a{ text-decoration: none}
section{ width: 100%; display: block; position: relative}
.center{ text-align: center}
.wrapbig{ width: 1400px; margin: 0 auto; background: #fff;}
.wrap{ width: 1200px; margin: 0 auto; position: relative}
.abs{ position: absolute}
.fll{ float: left;}
.flr{ float: right;}
.col-left{ float: left;}
.col-right{ float: right;}
.clear{ clear: both}
p{ line-height: 1.5em; font-size: 22px;font-family: 'Roboto', 'Noto Sans TC', sans-serif;}
.bold{ font-weight: bold;}
.block{ display: block}
.in-blk{ display: inline-block}
.no-show{ display: none}
.mgb-30{ margin-bottom: 30px;}
:root {
  --animate-delay: 0.5s;
}



body{ font-size: 18px; line-height: 36px; font-family: 'Roboto', 'Noto Sans TC', sans-serif;}

nav{float: right; margin-top: 13px; margin-right: 30px; }
nav span{ display: block; font-size: 14px; color:#00a0ea;  margin-top: 5px; }
nav >div{display: inline-block;padding: 0 20px;}
nav >div a{font-size: 24px; border: 0; text-align: center;  color: #fff; transition: all 0.5s;position: relative}
nav a:hover{ transition: all 0.5s; color: #e86129}


.head{ width: 100%; padding: 0 5%; top: 0; padding-top: 10px; opacity: 1; transition: all 0.2s; display: block;z-index: 99; box-sizing: border-box; position: fixed;}
.head.fadein{ position: fixed; top: 0px; background: #000}
.head.fadein nav{ }
.logo{ display: inline-block; margin-left: 30px; margin-top: 0px;}
.logo img{ width: 300px;}
.container{ width: 1200px; margin: 0 auto; position: relative}
.title{ margin-bottom: 50px; text-align: center}
.title .h2{ font-size: 42px; color: #000; line-height: 1.3em; font-weight: bold; position: relative; letter-spacing: 1px}
.title .h2:after{ content: ''; width: 250px; height: 3px; background: #fff; margin: 0 auto; margin-top: 20px; display: block}


/*****************Pages************************/


.kv-wrap {
    position: relative;
    overflow: hidden;
    min-height: 96vh; /* 根據需求調整高度 */
}

/* 影片背景容器樣式 */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden; /* 關鍵：隱藏掉放大後超出的影片邊緣 */
    pointer-events: none;
}

/* 2. YouTube iframe 強制滿版與放大 */
#player {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* 設定基礎 16:9 比例 */
    width: 100vw;
    height: 56.25vw; /* 100vw * 9/16 */
    min-height: 100vh;
    min-width: 177.77vh; /* 100vh * 16/9 */
    
    /* 🔑 關鍵修改：加入 scale(1.2) 強制將影片放大 1.2 倍 */
    /* 如果放大 1.2 倍後上下還是有黑邊，可以將數值調大至 1.35 或 1.4 */
    transform: translate(-50%, -50%) scale(1.2); 
}

.kv-wrap{ }
.kv-wrap .container{ min-height: 650px; padding-bottom: 50px;padding-top:120px; position: relative}
.slogan{ text-align: center;position: relative; z-index: 2; margin-bottom: 30px; width: 85%; margin: 0 auto}
.kv1 .center{ font-size: 36px; color: #fff; margin-bottom: 30px; margin-top: 30px; }


.s1{ min-height: 530px; padding-bottom: 30px; background: url(../images/bg_02.jpg) center top; background-size:cover;  padding-top: 90px;}
.s1 .container{ width: 1000px;}
.s1 .aitxt p{ margin-bottom: 30px; color: #fff; text-align: center}
.s1 .h2{ color: #FF853A}


.s2{ min-height: 700px; padding-bottom: 30px; background: url(../images/bg_03.jpg) center top; background-size:cover;  padding-top: 90px;}
.s2 .h2{ color: #000; margin-bottom: 20px;}
.s2 .title .h2:after{ background: #FF4F3A}
.s2 .imgflow{ display: flex; margin-bottom: 30px; }
.s2 .imgflow >div{ width: 33%;}
.s2 .imgflow >div img{ max-width: 100%;}
.dl{ width: 100%; text-align: center}
.dl a {}
.dl a:hover img{ transform: scale(1.05);transition: all 0.5s}
.dl a img{max-width: 100%; width: 580px;transition: all 0.5s }
.cfa img{transition: all 0.5s}
.cfa:hover img{transition: all 0.5s;transform: scale(1.02);}

.s3{ min-height: 620px; padding-bottom: 30px; background: url(../images/bg_04.jpg) center top; background-size:cover;  padding-top: 90px; }
.s3 .coltxt{ display: flex; color: #fff; margin-bottom: 30px;}
.s3 .coltxt .h2{font-size: 40px; color: #fff; line-height: 1.3em; font-weight: bold; position: relative; margin-bottom: 20px; letter-spacing: 1px}
.s3 .coltxt .h3{font-size: 26px; color: #fff; line-height: 1.3em; font-weight: bold; position: relative; margin-bottom: 20px; letter-spacing: 1px}
.s3 .coltxt >div:first-child{ width: 45%; }
.s3 .coltxt >div:last-child{ width: 55%; padding-left: 30px; }
.s3 .coltxt >div img{ width: 500px; max-width: 100%; }
ul>li{ list-style:disc outside; font-size: 20px; margin-left: 20px;}


.ti{font-size: 42px; color: #fff; line-height: 1.3em; font-weight: bold; position: relative; text-align: center; font-style:italic; margin-bottom: 60px;}
.ti span{ color: #000; background: #FFFF00; display: inline-block;clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%); margin-left: 5px; padding: 0 10px;}



.s4{ min-height: 700px; padding-bottom: 30px; background: url(../images/bg_05.jpg) center top; background-size:cover;  padding-top: 90px; }
.s4 .title .h2:after{ background: #FF4F3A}
.s4 .row{ display: flex}
.s4 .row >div:first-child{ width: 55%;}
.s4 .row >div:last-child{ width: 45%;}
.s4 .row .item{ margin-bottom: 30px; padding-left: 80px; position: relative}
.s4 .row .nb-ic{position: absolute; left: 20px; top: 12px}

.s4 .row .pt{font-size: 26px; color: #000; line-height: 1.3em; font-weight: bold; position: relative; margin-bottom: 20px;}
.s4 .row .cfa img{width: 415px; margin-top: 30px;}
.s4 .row .rig-col img{ width: 520px; max-width: 100%;}
.logoct {justify-content: center; display: flex; width: 100%;}
.logoct img{ width: 690px; max-width: 100%}




.s5{ min-height: 700px; padding-bottom: 30px; background: url(../images/bg_06.jpg) center top; background-size:cover;  padding-top: 90px; }
.s5 .coltxt{ display: flex; color: #fff; margin-bottom: 80px;}
.s5 .coltxt .h2{font-size: 40px; color: #fff; line-height: 1.3em; font-weight: bold; position: relative; margin-bottom: 20px; letter-spacing: 1px}
.s5 .coltxt .h3{font-size: 26px; color: #fff; line-height: 1.3em; font-weight: bold; position: relative; margin-bottom: 20px; letter-spacing: 1px}
.s5 .coltxt >div:first-child{ width: 42%; }
.s5 .coltxt >div:last-child{ width: 58%; padding-left: 30px; display: flex; flex-direction: column; justify-content: center}
.s5 .coltxt >div:first-child img{ width: 445px; max-width: 100%; }
.s5 .coltxt ul{ margin-bottom: 30px;}
.s5 .coltxt >div:last-child img{ width: 580px; max-width: 100%; }
.s5 .perimg { text-align: center}
.s5 .perimg img{ width: 650px; max-width: 100%}



.s6{ min-height: 600px; padding-bottom: 30px; background: url(../images/bg_07.jpg) center top; background-size:cover;  padding-top: 90px; }
.s6 .container{ width: 1080px;}
.s6 .ti{ color: #000}
.s6 .coltxt{ display: flex; color: #fff; margin-bottom: 80px; color: #000}
.s6 .coltxt >div:first-child{ width: 42%; }
.s6 .coltxt >div:last-child{ width: 58%; padding-left: 30px;}
.s6 .coltxt >div:last-child p{line-height: 1.7em}
.s6 .coltxt >div:first-child img{ width: 475px; max-width: 100%; }


.s7{ min-height: 700px; padding-bottom: 30px; background: url(../images/bg_08.jpg) center top; background-size:cover;  padding-top: 90px; padding-bottom: 80px;}
.s7 .title .h2{ color: #FF853A}
.s7 .note{ color: #fff; margin-top: 30px;}

.iframe{ width: 860px; margin: 0 auto; margin-bottom: 30px;}
.iframe iframe{ border: 3px solid #fff !important}

footer{  text-align: center;}
footer img{ max-width: 240px; padding: 25px 0;}

.fixbtn{ position: fixed; right:4%; bottom: 20%; width: 150px; height: 150px; padding: 35px; box-sizing: border-box; text-align: center; }
.fixbtn .bckg{ width: 150px; height: 150px; padding: 35px; box-sizing: border-box; background: url(../images/fix_btn.png) no-repeat;  background-size: 100%; display: inline-block}

.fixbtn.fadein{ opacity: 1; transition: all 0.5s}
.fixbtn span{  color: #000; font-size: 32px; font-weight: bold; position: absolute; top: 68px; left: 69px;z-index: 1}
.fixbtn:hover{ opacity: 0.8}
.slid{ padding: 30px; background: #fff7eb}

.pc{ display: block}
.mb{ display: none;}
.box{ display: none;}

.fancybox-content{ padding: 25px!important}

.mbbtnfix{ display: none;}


.fade-loop {
  opacity: 0;
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media only screen and (max-width: 1600px) {
    /* 如果放大 1.2 倍後上下還是有黑邊，可以將數值調大至 1.35 或 1.4 */
     #player {
    transform: translate(-50%, -50%) scale(1.3); }
}

@media only screen and (max-width: 1500px) {
    .logo img{ width: 350px;}
    nav >div{ padding: 0 15px}
    .head{ padding: 5px 2%}
   

}

@media only screen and (max-width: 1200px) {
    .container{ width: 100%; padding: 0 20px; box-sizing: border-box }
    .kv-wrap .container{ width: 100%; padding-top: 160px; min-height: 800px }
    .s1 .container,.s6 .container{ width: 100%;}
    .logo img{ position: relative; top: 5px}
}
@media only screen and (max-width: 1000px) {
    .mb{ display: block;}
    .mb img{ width: 100%; display: flex;}
    .pc{ display: none !important}
    .wrap{ width: 100% !important}
    .kv-wrap{ height: auto}
    .box{ display: block}
    .head {padding-top: 0;z-index: 99; background:#000; position: inherit}
    .head.fadein{ padding-bottom: 0;}
    .logo img{ width: 145px;margin-top: 15px;}
    .logo{ margin-top: 0px; width: inherit; max-width: 70%;margin-left: 0; margin-bottom: 0;}
    
    nav{ display: none; width: 100%;z-index: 999; position: fixed; background: #000; left: 0; margin-top: 0;}
    nav >div,.en nav >div{ width: 100%; border-bottom: 1px solid #000;padding: 15px 0; border-right: 0; color: #3165b0; text-align: center}
    nav >div a{border-right: 0; color: #fff}
    nav a:hover span{ border: 0; padding: 0}
    nav a.active:after{ display: none;}
    
    .fixbtn{ display: none;}
    
    
    
    
    .s2{ min-height: 600px;}
     .iframe{ width: 100%;}
     
    
}
/*tablet*/
@media only screen and (max-width: 800px) {
    
    .kv1 .center{ font-size: 22px; }
    p{ font-size: 20px;}
    .title .h2,.ti{ font-size: 34px;}
    
    .s2 .imgflow{ flex-direction: column}
    .s2 .imgflow >div{ width: 80%; margin: 0 auto; margin-bottom: 30px;}
    
    .s3 .coltxt .h2,.s5 .coltxt .h2{ font-size: 30px;}
    
    .s3 .coltxt{ flex-direction: column}
    .s3 .coltxt >div:first-child,.s3 .coltxt >div:last-child,.s3 .coltxt >div img{ width: 100%; padding: 0}
    .s4 .row{ flex-direction: column}
    .s4 .row >div:first-child,.s4 .row >div:last-child,.s4 .row .rig-col img{ width: 100%; box-sizing: border-box}
    
    .s5 .coltxt{ flex-direction: column}
    .s5 .coltxt >div:first-child,.s5 .coltxt >div:last-child,.s5 .coltxt >div:first-child img{ width: 100%; padding: 0}
    .s5 .perimg img{ width: 80%;}
    
    .s6 .coltxt{flex-direction: column}
    .s6 .coltxt >div:first-child,.s6 .coltxt >div:last-child,.s6 .coltxt >div:first-child img{ width: 100%; padding: 0}
    
    .s3,.s5,.s7{ padding-top: 60px;}
    
}


@media only screen and (max-width: 500px) {
    
    .mbhide{ display: none;}
    .kv-wrap{ min-height: inherit}
    .kv-wrap .container{ padding-top: 50px; min-height: 480px    }
    .slogan{ width: 100%;}
    .kv1 .center{ font-size: 20px; letter-spacing: 0}
    p{ font-size: 18px;}
    .title .h2,.ti{ font-size: 34px; letter-spacing: 0}
    ul>li{ font-size: 18px; letter-spacing: 0}
    
    .s2{ padding-top: 60px;}
    .s2 .imgflow >div{ width: 90%;}
    
    .s3 .coltxt .h2,.s5 .coltxt .h2{ font-size: 26px; letter-spacing: 0}
    .s3 .coltxt .h3{ font-size: 22px; letter-spacing: 0}
    
    .s4{ padding-top: 60px;}
    .s4 .logoct{ margin-top: 20px;}
    .s4 .row .pt{ font-size: 22px;}
    .s4 .row .cfa img{ max-width: 100%}
    .s4 .row .item{ padding-left: 50px;}
    .s4 .row .nb-ic { left: 5px}
    .s4 .row .nb-ic img{ width: 35px;}
    .s5 .perimg img{ width: 100%;}
    .mbbtnfix{ display: block; position: fixed; bottom: 0}
    .mbbtnfix img{ float: left;}
    footer{ padding-bottom: 80px;}
    
   
   
}


/*updown*/

@keyframes updown {
	0% {
		-webkit-transform: translateY(-2%);
		-moz-transform: translateY(-2%);
		-ms-transform: translateY(-2%);
		-o-transform: translateY(-2%);
		transform: translateY(-2%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

.updown{
	-webkit-animation: updown 700ms forwards ease-in-out infinite alternate;
	-moz-animation: updown 700ms forwards ease-in-out infinite alternate;
	-ms-animation: updown 700ms forwards ease-in-out infinite alternate;
	-o-animation: updown 700ms forwards ease-in-out infinite alternate;
	animation: updown 700ms forwards ease-in-out infinite alternate;
}




.box {
  position: absolute;
  top: 0px;
  right:0px;
/*  transform: translate(-50%, -50%);*/
  width:50px;
  height: 50px;
  background: none;
/*  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);*/
}

.btn {
  position: absolute;
  top: 25px;
  right: -13px;
  transform: translate(-50%, -50%);
  width: 43px;
  cursor: pointer;
}
.btn.active{ top: 32px; right: -12px;}
.box .active span:nth-child(2){ margin-top: 20px;}
.box span {
  display: block;
  width: 100%;
/*  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);*/
/*  border-radius: 3px;*/
  height: 2px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.box span + span {
  margin-top: 6px;
}

.box .active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.box .not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.box .active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.box .not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.box .active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.box .not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 10px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


.biggerbtn{
    animation: biggerbtn 500ms forwards ease-in-out infinite alternate;
}

@keyframes biggerbtn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  
  }
}


.rotate-div {  animation: rotate 5s linear infinite;transform-origin: center;}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}