@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
	list-style-type:none;
	}
a,img {
	outline: none;/* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */	
	}
input,textarea{outline:none} /*消除chrome黃色框*/
textarea{resize:none} /*不要縮放*/	
img, div {border:0px;}
a:link {
	color: #c51700;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
	color: #c51700;
}
a:hover {
	text-decoration: none;
	color: #9d0000;
}
a:active {
	text-decoration: none;
	color: #c51700;
}
html{font-size:75%;}
body{
	font-size:1rem;
	word-wrap:break-word;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	background-color:#000;
	}
*{	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}
.tas{
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}

/**/
body{}
.allbg{
	position: relative;
	width:100%;/*2000*/
	/*min-height: 100vh;*/
	display: block;
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:50% 0%;/*53.2*/
	background-image: url(../images/bg_1a.jpg);
	background-size:100% auto;/*100% 6vw*/
	}
.iecbn{
	position:fixed;
	width:270px;/***/
	padding-bottom: 450px;
	display:none;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:repeat;
	background-position:50% 0%;
	background-image: url(../images/iec_bn.png);
	background-size:100% auto;
	right: 0;
	bottom: 20%;
	z-index:5;
	}
.iecbn > p{
	position:absolute;
	width:50px;/*50*/
	padding-bottom:35px;
	display:block;
	left:50%;/*135*/
	top:19.33%;/*87*/
	}
.iecbn > p::before{
	position:absolute;
	width:100%;/*50*/
	padding-bottom:70%;/*35*/
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/iec_g.png);
	background-size:100% auto;
	top: 0;
	left: 0;
	/**/
	-moz-animation:tup .75s linear infinite;
	-webkit-animation:tup  .75s linear infinite;
	-o-animation:tup  .75s linear infinite;
	-ms-animation:tup  .75s linear infinite;
	animation:tup  .75s linear infinite;
	}
.logo{
	position: absolute;
	width:16.5%;/*330*/
	padding-bottom:10.9%;/*218*/
	display:block;
	overflow:hidden;
	top:0;
	left:2%;/*40*/
	z-index: 2;
	}
.logo::before{
	position: absolute;
	width:100%;/*330*/
	padding-bottom:69.6969%;/*230*/
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/logo.png);
	background-size:100% auto;
	left: 0;
	bottom: 0;
	}


/*版宣*/
footer{
	position:relative;
	width:100%;
	/*padding:0 0 0; */
	font-size:1rem;
	line-height:1.5rem;
	color:#fff;
	border-top:2px solid #0a555c;
	background-color:#0a090e;
	overflow:hidden;
	}
footer::before,footer::after{
	position: relative;
	width:100%;	
	display: block;
	content:'';
	}
footer::before{padding-bottom:4.25%;/*85*/}
footer::after{padding-bottom:4%;/*80*/}
	
.companybx{
	position:relative;
	display:block;
	overflow:hidden;
	text-align:center;
	}
.companybx img{
	position:relative;
	height:4vw;/*80*/
	display:inline-block;
	margin:0 .5vw 1vw;/*10*/
	}
.cyr{
	position:relative;
	padding:0 15px;
	/**/
	font-size:1.25rem;/*15*/
	line-height: 1.6rem;
	color:#1397a3;
	}
.cyr::before{
	position:relative;
	width:100%;
	padding-bottom:1%;/*20*/	
	display:block;
	content:'';
	}
.cyr > div{
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	}
.cyr img{
	position:relative;
	width:2.8vw;/*50 2.5*/
	display:block;
	margin-left:.75vw;/*15*/
	}
.cyr .cy1{
	position:relative;
	display:block;
	font-size:1.15rem;
	line-height: 1.5rem;
	margin-bottom:5px; 
	}
/**/
#light_bx,#light_bx2{
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background-color:rgba(1,10,12,.9);
	z-index:10;
	overflow:auto;
	display:none;/**/
	/**/
	--co1-size:1.33rem;
	--co1-h:2.2rem;
	--co2-size:1.5rem;
	--co2-h:3rem;
	--f2-size:1.6rem;
	--f2-h:3rem;
	--f3-size:1.55rem;
	--f3-h:4rem;
	--f5-size:1.6rem;
	--f5-h:2.8rem;
	}
#light_bx2{z-index:11;}



#light_bx .bbt,#light_bx2 .bbt{
	position:relative;
	width:100%;
	min-height:100vh;
	/**/
	display: flex;
	justify-content: center;
	align-items: center;
	}
.conbx1,.conbx2{
	position: relative;
	width:460px;/*460px*/
	display:none;/*block*/
	filter: drop-shadow(0 5px 8px rgba(19,151,163, 0.5));
	}
.conbx1::before,.conbx1::after,
.conbx2::before,.conbx2::after{
	position: relative;
	width: 100%;
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.conbx1::before,.conbx2::before{
	padding-bottom:8.043478260869565%;/*37*/
	background-position:50% 100%;
	background-image: url(../images/conbx_1_01.png);
	}
.conbx1::after,.conbx2::after{
	padding-bottom:7.608695652173913%;/*35*/
	background-position:50% 0%;
	background-image: url(../images/conbx_1_04.png);
	}
.cobx1a{
	position: relative;
	width:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat,repeat-y,no-repeat;
	background-position:50% 0,50% 0,0 100%;
	background-image: url(../images/conbx_1_02.png),url(../images/conbx_1_03.png),url(../images/conbx_1_05.png);
	background-size:100% auto;
	z-index:1;
	}
.cht{
	position:absolute;
	width:100%;
	padding-bottom:2.1%;/*10*/
	top:0;
	left:0;
	}
.conc1,.conc2{
	position: relative;
	width: 93%;
	min-height:50px;
	margin:0 auto;
	padding:13px 0 0;
	/**/
	font-size:var(--co1-size);
	line-height:var(--co1-h);
	color: #c2f6ff;
	}
.clos,.clos2{
	position:absolute;
	width:8.6%;/*40*/
	padding-bottom:8.6%;
	display:block;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/close.png);
	background-size:100% auto;
	right:2.5%;
	bottom:0;
	margin-bottom:1%;
	}
.tac{text-align:center;}
.tdv{
	position: relative;
	margin:10px auto; 
	padding:5px 0;
	}
.tdv2{
	position: relative;
	width:80%;
	padding:3px 0 6px;
	margin:0 auto;
	}
.f2{
	font-size:var(--f2-size);
	line-height:var(--f2-h);
	}
.conc1 input{
	font-size:var(--f3-size);
	line-height:var(--f3-h);
	height:var(--f3-h);
	text-align-last:center;
	text-align:center;
	/**/
	background-color:rgba(2,16,17,.6);
	}
.ckbtbx{
	position: relative;
	text-align:center;
	padding:8px 0 0;
	top:5px;
	}
.cok{
	position:relative;
	width:154px;
	display: inline-block;
	/**/
	transition: all .5s;
	}
.cok::before,.cok::after{
	width:100%;/*160*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.cok::before{
	position: relative;
	padding-bottom:32.5%;/*52*/
	background-image: url(../images/cok.png);
	}
.cok::after{
	position:absolute;
	height: 100%;
	background-image: url(../images/cok_on.png);
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	}
.cok:hover::after{opacity:1;}
/**/
.kbt,.proceed,.finish2{
	position:relative;
	width:134px;
	display: inline-block;
	margin:0 5px;
	/**/
	transition: all .5s;
	}
.kbt::before,.kbt::after,
.proceed::before,.proceed::after,
.finish2::before,.finish2::after{
	width:100%;/*134*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.kbt::before,.proceed::before,.finish2::before{
	position: relative;
	padding-bottom:37.3134328358209%;/*50*/
	}
.kbt::after,.proceed::after,.finish2::after{
	position:absolute;
	height: 100%;
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	}
.kbt:hover::after,.proceed:hover::after,.finish2:hover::after{opacity:1;}
.kbt.kbt_1::before{background-image: url(../images/kbt_1.png);}
.kbt.kbt_2::before{background-image: url(../images/kbt_2.png);}
.kbt.kbt_3::before{background-image: url(../images/kbt_3.png);}
.kbt.kbt_1::after{background-image: url(../images/kbt_1_on.png);}
.kbt.kbt_2::after{background-image: url(../images/kbt_2_on.png);}
.kbt.kbt_3::after{background-image: url(../images/kbt_3_on.png);}

.proceed::before{background-image: url(../images/proceed.png);}
.proceed::after{background-image: url(../images/proceed_on.png);}
.finish2::before{background-image: url(../images/finish2.png);}
.finish2::after{background-image: url(../images/finish2_on.png);}

.dak{display:none;}

.s2{
	position: absolute;
	width:90%;
	padding-bottom:1px;
	background-color:#158994;
	left: 50%;
	transform:translateX(-50%);
	opacity: .35;
	}
.stp{top:0;}
.sbm{bottom:0;}
.s2::before,.s2::after{
	position: absolute;
	width: 6px;
	height: 6px;
	display:block;
	content:'';
	border-radius:50px;
	background-color:#158994;
	top:50%;
	transform:translateY(-50%);
	}
.s2::before{left: -1%;}
.s2::after{right:-1%;}
/**/
.p_load{
	position:relative;
	width:98%;
	pointer-events:none;
	padding-bottom:60px;/*100*/
	margin:0 auto;
	}
.p_br{
	position:absolute;;
	width:60px;
	padding-bottom:3px;/*100*/
	background-color:#1fc4d3;
	transition: width 1.5s ease-in-out;/*ease-in-out*/
	bottom:0;
	left: 0;
	}
.p_py{
	position:absolute;
	width:60px;
	bottom:0;
	right:-5px;
	}
.p_py:before{
	position: relative;
    width:100%;
	padding-bottom:160%;/*128*/
	display:block;
	content:'';
    background-image:url(../images/load.png);
	background-size:auto 100%;
	}
.p_load.on .p_br{width:100%;}
.p_load.on .p_py:before{
    -webkit-animation: pgo .3s steps(4) infinite alternate;
    animation: pgo .3s steps(4) infinite alternate;
	}

/**/
.conbx3{
	position: relative;
	width:782px;
	display:none;/*none*/
	filter: drop-shadow(0 5px 8px rgba(19,151,163, 0.5));
	margin:50px 0 20px;
	}
.conbx3::before,.conbx3::after{
	position: relative;
	width: 100%;
	padding-bottom:6.39386189258312%;/*50*/
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.conbx3::before{
	background-position:50% 100%;
	background-image: url(../images/conbx_3_01.png);
	}
.conbx3::after,.conbx2::after{
	background-position:50% 0%;
	background-image: url(../images/conbx_3_05.png);
	}
.cobx3a{
	position: relative;
	width:100%;
	/*min-height: 250px;*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat,repeat-y;
	background-position:50% 0,0 100%,50% 0;
	background-image: url(../images/conbx_3_02.png),url(../images/conbx_3_04.png),url(../images/conbx_3_03.png);
	background-size:100% auto;
	z-index:1;
	}
.clos3{
	position:absolute;
	width:5.115%;/*50*/
	padding-bottom:5.115%;
	display:block;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/close.png);
	background-size:100% auto;
	right:3%;
	bottom:0;
	margin-bottom:1.5%;
	}
.conc3{
	position: relative;
	width:90%;
	min-height:100px;
	margin:0 auto;
	padding:10px 0;
	/**/
	font-size:var(--co1-size);
	line-height:var(--co1-h);
	color: #c2f6ff;
	}
.conc3  ul{
  position: relative;
  width: 100%;
  display: block;
  margin: 0 auto;
  padding-left:var(--co1-size); 
  font-size:var(--co1-size);
  line-height:var(--co1-h);
  }
.conc3  ul > li {
  position: relative;
  list-style-type: decimal;
  padding-bottom: 10px;
}
.ct1{
  font-size:var(--co2-size);
  line-height:var(--co2-h);	
	color: #1cadba;
	}
.tdv3{
	position: relative;
	padding:0 0 6px;
	color: #9bd8e2;
	}
.ct2{
	position: relative;
	display: inline-block;
  font-size:var(--f5-size);
  line-height:var(--f5-h);	
	font-weight: 500;
  color: #28dcec;
	padding:0 8px;
	border:1px solid #1397a3;
	margin:6px 0 10px;
  }
.s3,.s3a{
	position: relative;
	width: 100%;
	padding-bottom:6px;
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 50%;
	background-image: url(../images/s3.png);
	margin:0 auto 10px;
	opacity: .8;
	}
.s3a{
	width:calc(100% + var(--co1-size));
	right: var(--co1-size);
	}
.s3b{
	position: relative;
	width:calc(100% - var(--co1-size));
	padding-bottom:6px;
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 50%;
	background-image: url(../images/s3.png);
	margin:10px 0 15px;
	right:3px;
	opacity: .35;
	}
.s3b::before,.s3b::after{
	position: absolute;
	width: 6px;
	height: 6px;
	display:block;
	content:'';
	border-radius:50px;
	background-color:#158994;
	top:50%;
	transform:translateY(-50%);
	}
.s3b::before{left: -1%;}
.s3b::after{right:-1%;}
.actit{
	position: relative;
	width:370px;/**/
	margin:0 auto 35px;	
	}
.actit > p{
	position: relative;
	width: 100%;
	padding-bottom:23.24324324324324%;/*86*/
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 50%;
	background-size:100% auto;
	}
.act1{background-image: url(../images/actit_1.png);}
.act2{background-image: url(../images/actit_2.png);}

.fk{
	position:relative;
	width:37.65%;
	display: block;
	margin-left: 21.2%;
	margin-bottom:2.8vw;/*50*/
	}
.fbbx2{
	position:relative;
	width:500px;
	height:70px;
	display:block;
	border:3px solid #04b0fa;
	overflow:hidden;
	/*margin:0 auto 2.8vw;50*/
	left:50%;
	transform:translateX(-50%);
	}


@media only screen and (max-width:1600px){
/**/

	}
@media only screen and (max-width:1200px){
/**/
.companybx img{
	height:6.6vw;/*80*/
	margin:0 .83vw 1vw;/*10*/
	}
.cyr img{
	width:4.16vw;/*50*/
	margin-left:1.25vw;/*15*/
	}
.fk{
	width:48%;
	margin-left:17.2%;
	}
.fbbx2{width:400px;}
	
}
@media only screen and (max-width:1000px){	
/**/

	
}
@media only screen and (max-width:800px){
/**/
.fbbx2{width:320px;}
}
/**/
@media only screen and (max-width:780px){
/**/

.allbg{
	background-image: url(../images/bg_1a_m.jpg);
	background-position:50% 0%;
	/*background-position:59% 0%;
	background-size:15.3846vw auto;*/
	}
/*版宣*/
footer{border-top:3px solid #0a555c;}
footer::before{padding-bottom:8.9%;/*70*/}
footer::after{padding-bottom:32%;/*+85 38.2% 28.2%*/}
.companybx img{
	height:10.25vw;/*80*/
	margin:0 1.28vw 1vw;/*10*/
	}
.cyr::before{padding-bottom:2.564%;/*20*/}
.cyr img{
	width:6.41vw;/*50*/
	margin-left:1.923vw;/*15*/
	}
/**/
.iecbn{
	width:100%;/*780*/
	padding-bottom: 28.2051282%;/*220*/
	display:block;
	background-image: url(../images/iec_bn_m.png);
	right: 0;
	bottom:0;
	}
.iecbn > p{
	position:absolute;
	width:6.41%;/*50*/
	padding-bottom:4.487%;/*35*/
	display:block;
	left:3.3333%;/*26*/
	top:65%;/*143*/
	}
.logo{
	width:42.3%;/*330*/
	padding-bottom:29.481%;/*230*/
	left:0;
	}
/**/
.conbx3{width:99%;}
.clos3{
	width:6.2%;/*50*/
	padding-bottom:6.2%;
	margin-bottom: 1.8%;
	}
.conc3{width: 90%;}

.fk{
	width: 90%;
	margin: 0 auto 7.5vw;
	}
.fbbx2{width:500px;}
	
}
@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:580px){
/**/	
.actit{width:70%;/*370*/}

.fbbx2{width:80%;}		
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:470px){
/**/
.companybx img{
	height:11.2vw;/*80*/
	margin:0 2vw 2vw;/*10*/
	}
.cyr{
	font-size:1rem;
	line-height: 1.4rem;
	}	
.cyr::before{padding-bottom:4.25%;/*20*/}
.cyr img{
	width:10.6vw;/*50*/
	margin-left:3.19vw;/*15*/
	}
.cyr .cy1{
	font-size:1.1rem;
	line-height: 1.4rem;
	margin-bottom:5px; 
	}
/**/
#light_bx,#light_bx2{
	--co1-size:1.28rem;
	--co1-h:2rem;
	--co2-size:1.4rem;
	--co2-h:2.2rem;
	--f2-size:1.5rem;
	--f2-h:2.6rem;
	--f3-size:1.45rem;
	--f3-h:4rem;
	--f5-size:1.55rem;
	--f5-h:2.6rem;
	}
.conbx1,.conbx2{width:99%;}
.conc1,.conc2{padding:2.7vw 0 0;}/*13px 0 0*/
.tdv{padding:1.06vw 0;}/*5px 0 8px*/
.tdv2{
	width:90%;
	padding:.63vw 0 1.27vw;/*3px 0 6px*/
	}
.ckbtbx{
	padding:1.7vw 0 0;/*8px 0 0*/
	top:1.06vw;/*5*/
	}
.cok{width:140px;}
/**/
.kbt,.proceed,.finish2{
	width:123px;
	margin:0 5px;/*5*/
	}
/**/
.p_load{padding-bottom:65px;}
.p_br{width:50px;}
.p_py{width:50px;}
.actit{
	width:90%;/*370*/
	margin:0 auto 6.8vw;
	}		
.fbbx2{width:90%;}
	
}
@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
.fbbx2{width:90%;}	

}

/**/
@keyframes tup {
    0% {top:0%;}
	50%{top:13%;}
    100%{top:0%;}
	}
@keyframes tup2 {
    0% {bottom:0%;}
	50%{bottom:5%;}
    100%{bottom:0%;}
	}
@keyframes rotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@keyframes pgo{
   from { background-position:  0; }
     to { background-position: -400%; }
	}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}	
@keyframes heartBeat2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}