@charset "utf-8";
/* CSS Document */
:root{
	--f1-size:1.1vw;/*22*/
	--f1-h:1.75vw;/*35*/
	--ca-size:1.1vw;/*22*/
	--ca-h:3vw;/*60*/
	--nb-size:1.75vw;/*35*/
	--nb-h:2.7vw;/*54*/
	--sr-size:1.1vw;/*22*/
	--sr-h:2.6vw;/*52*/
	--sn-size:1.25vw;/*25*/
	--sn-h:2vw;/*40*/
	--sn2-size:1.1vw;/*22*/
	--sn2-h:1.75vw;/*35*/
	}
/**/
.hbg{
	position: relative;
	width: 100%;
	/*min-height:250vh;*/
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat;
	background-position:50% 0%,50% 90%;
	background-image: url(../images/hbg_01.jpg),url(../images/hbg2.png);
	background-size:100% auto;
	}
.hbx{
	position: relative;
	width: 100%;
	padding-bottom:48.55%;/*971*/
	display:block;
	}
.hbx_a{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/hbg_01a.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.cbx_t,.cbx_t2{
	position: relative;
	width: 100%;
	display:block;
	}
.cbx_t::before{
	position: relative;
	width: 100%;
	padding-bottom:10.6%;/*212*/
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/bx1.png);
	background-size:100% auto;
	}
.cbx_c1{
	position: relative;
	width: 100%;
	/*min-height:100vh;*/
	display:block;
	/*padding:0 0 3.5vw;*/
	background-attachment:scroll;
	background-repeat:no-repeat,repeat-y;
	background-position:50% 0%,50% 0%;
	background-image: url(../images/bx2.png),url(../images/bx3.png);
	background-size:100% auto;
	}
.cbx_c1::after{
	position: relative;
	width:100%;
	padding-bottom:2%;/*6*/
	display: block;
	content:'';
	}
.cbx_t2::after{
	position: relative;
	width: 100%;
	padding-bottom:14.9%;/*298*/
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/bx5.png);
	background-size:100% auto;
	}
.cbx_c2{
	position: relative;
	width: 100%;
	/*min-height:100vh;*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat,repeat-y;
	background-position:50% 100%,50% 0%;
	background-image: url(../images/bx4.png),url(../images/bx3.png);
	background-size:100% auto;
	}
.slogan{
	position:absolute;
	width:60.6%;/*1212*/
	padding-bottom:23.75%;/*475*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/slogan_1.png);
	background-size:100% auto;
	top:17.40473%;/*169*/
	left:3.3%;/*66*/
	z-index:2;
	}
.slogan > div{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	top:0;
	left:0;
	} 
.slogan .slo2{
	background-image: url(../images/slogan_2.png);
	animation:heartBeat2 2.2s ease-in infinite;
	} 
.slogan .slo3{
	background-image: url(../images/slogan_3.png);
	/*
	-moz-animation:rotate 3.8s linear infinite;
	-webkit-animation:rotate 3.8s linear infinite;
	-o-animation:rotate 3.8s linear infinite;
	-ms-animation:rotate 3.8s linear infinite;*/
	animation:heartBeat 2.2s ease-in infinite;/*ease-out*/
	} 	
.slogan .slo4{background-image: url(../images/slogan_4.png);}	
.slogan .slo5{
	opacity:0;
	overflow:hidden;
	/**/
	mask-image: url(../images/slogan_4a.png);
	mask-repeat: no-repeat;
	mask-position:50% 100%;
	mask-size:100% auto;
	-webkit-mask-image: url(../images/slogan_4a.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 100%;
	-webkit-mask-size:100% auto;
	/**/
	}
.sl,.sl2{
	position: absolute;
	width:15%;
	height:110%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/sl.png);
	background-size:100% 100%;
	top:50%;
	transform:translateY(-50%)rotate(20deg);
	}

.slogan .slo5 .sl{
	left:-5%;
	transition: all 3.2s ease;
	}
.slogan .slo5.on .sl{left:50%;}

.slogan .slo6{
	opacity:0;
	overflow:hidden;
	/**/
	mask-image: url(../images/slogan_4b.png);
	mask-repeat: no-repeat;
	mask-position:50% 100%;
	mask-size:100% auto;
	-webkit-mask-image: url(../images/slogan_4b.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 100%;
	-webkit-mask-size:100% auto;
	/**/
	}
.slogan .slo6 .sl2{
	left:20%;
	transition: all 3.5s ease;
	}
.slogan .slo6.on .sl2{left:100.2%;}
.slogan .slo5.on,.slogan .slo6.on{opacity:1;}

	
.trbt{
	position:absolute;
	width:13.4%;/*268*/
	top:0;
	right:1.65%;/*33*/
	z-index: 3;
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .75));
	}
.trbt a{
	position:absolute;
	padding-bottom:35.4%;/*177*/
	display: block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	top:0;
	}
.trbt a::before{
	position:absolute;
	width: 100%;
	height: 100%;
	display: block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	top:0;
	left: 0;
	opacity: 0;
	/**/
	transition: all .5s;
	}
.trbt .goinbt{
	width:70.2%;/*351*/
	background-image: url(../images/trbt_01.png);
	left: 0;
	}
.trbt .goinbt::before{
	background-image: url(../images/trbt_01a.png);
	}
.trbt .fbbt{
	width:29.8%;/*149*/
	background-image: url(../images/trbt_02.png);
	right:0;
	}
.trbt .fbbt::before{
	background-image: url(../images/trbt_02a.png);
	}
.trbt a:hover::before{opacity:1;}
/**/
.pbx{
	position:relative;
	display: block;
	}
.pbx1{
	position:absolute;
	width:37.55%;/*751*/
	height:101%;
	display: block;
	pointer-events:none;
	top: 0;
	right: 0;
	z-index:1;
	}
.pbx2{
	position:sticky;
	width:100%;/*751*/
	height:65vw;/*1311 1300*/
	top:0;
	left: 0;
	overflow: hidden;
	}
.pbx2 .p1{
	position:absolute;
	width:100%;
	padding-bottom:173.1%;
	display: block;
	top:0;
	left: 0;
	
	/**/
	transition: all .5s;
	}
.pbx2 .p1::before,.pbx2 .p1::after{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-size:100% auto;
	top:0;
	left:0;
	}
.pkk{
	position: absolute;
	width: 100%;
	height: 100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/p1a.png);
	background-size:100% auto;
	top:-.55%;/*7*/
	left:0;
	transform:rotate(1deg);
	opacity:0;
	transition: all .5s;
	}
.pkk2{
	position: absolute;
	width: 100%;
	height: 100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/p1b.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.pkk3{
	position: absolute;
	width:34.62%;/*260*/
	padding-bottom:34.62%;
	/*height: 100%;*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/p1c.png);
	background-size:100% auto;
	top:27.57%;/*368*/
	left:0;
	animation:pkk3a 1.3s linear infinite;
	transform-origin:85% 85%;
	}
@keyframes pkk3a {
    0% {transform:rotate(0deg);}
	50%{transform:rotate(-5deg);}
    100%{transform:rotate(0deg);}
	}
.pkk5{
	position: absolute;
	width:51.93%;/*390*/
	padding-bottom:31.956923%;/*240*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image: url(../images/p1d.png);
	background-size:100% auto;
	top:41.8%;/*552*/
	left:44%;/*328*/
	animation:pkk3b 2s linear infinite;
	transform-origin:5% 5%;
	}
@keyframes pkk3b {
    0% {transform:rotate(0deg);}
	50%{transform:rotate(2deg);}
    100%{transform:rotate(0deg);}
	}	
	
.pbx2 .p1.on .pkk{
	top:0;
	transform:rotate(0deg);
	opacity:1;
	}
.pbx2 .p1::before{background-image: url(../images/p1.png);}
.pbx2 .p1::after{background-image:none;}
.gobt{
	position:absolute;
	width:31.45%;/*629*/
	display:block;
	cursor: pointer;
	top:34.05vw;/*681*/
	left:17.45%;/*349*/
	z-index:2;
	}
.gobt::before,.gobt::after{
	width:100%;
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	}
.gobt::before{
	position:relative;
	padding-bottom:38.1558%;/*240*/
	background-image: url(../images/gobt.png);
	}
.gobt::after{
	position:absolute;
	height:100%;
	background-image: url(../images/gobt_on.png);
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	}
.gobt:hover::after{opacity:1;}

.s1{
	position:relative;
	width:66.6%;/*1332*/
	padding-bottom:12px;/*12*/
	display:block;
	margin:0 auto 2.75vw;/*55*/
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 50%;
	background-image: url(../images/s1.png);
	background-size:auto 12px;
	}
.s1::before,.s1::after{
	position:absolute;
	width:12px;
	padding-bottom:12px;
	display:block;
	content:'';
	background-color:#125666;
	border-radius:100px;
	top:42%;
	transform:translateY(-50%);
	}
.s1::before{left:0;}
.s1::after{right:0;}
/**/
.paint_1,.paint_2,.paint_3,.paint_4,.paint_5{
	position:absolute;
	display:block;
	pointer-events:none;
	}
.paint_1 > p,.paint_2 > p,.paint_3 > p,.paint_4 > p,.paint_5 > p{
	position:relative;
	width:100%;
	display:block;
	overflow:hidden;
	}
.paint_1 > p::before,.paint_2 > p::before,.paint_3 > p::before,.paint_4 > p::before,.paint_5 > p::before{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	top:0;
	left:0;
	}
.paint_1{
	width:30.5%;/*610*/
	left:0;
	top:-8vw;
	}
.paint_1 > p{
	/*w610*/
	padding-bottom:95.081%;/*580*/
	}
.paint_1 > p::before{
	background-image: url(../images/paint_1.png);
	}
.paint_2{
	width:26.9%;/*578 28.9*/
	right:0;
	bottom:-17.8vw;/*10.8 18.8*/
	z-index:1;
	}
.paint_2 > p{
	/*w578*/
	padding-bottom:92.56%;/*535*/
	}
.paint_2 > p::before{
	background-image: url(../images/paint_2.png);
	}
.paint_3{
	width:12.5%;/*250*/
	left:8.5%;/*170*/
	bottom:1vw;/*10.8*/
	}
.paint_3 > p{
	/*w250*/
	padding-bottom:100%;/*250*/
	}
.paint_3 > p::before{
	background-image: url(../images/paint_3.png);
	}
.paint_4{
	width:28.5%;/*570*/
	right:14.6%;/*292*/
	bottom:5.3vw;/*10.8*/
	z-index:1;
	}
.paint_4 > p{
	/*w570*/
	padding-bottom:66.666%;/*380*/
	}
.paint_4 > p::before{
	background-image: url(../images/paint_4.png);
	}
.dnbx{
	position:relative;
	width:100%;
	padding-bottom:6.5%;
	display:block;
	}	
.paint_5{
	width:29%;/*580*/
	left:0;
	bottom:0;
	}
.paint_5 > p{
	/*w580*/
	padding-bottom:46.551%;/*270*/
	}
.paint_5 > p::before{
	background-image: url(../images/paint_5.png);
	}
/**/
.titbx{
	position:relative;
	width:63.5%;/*1270*/
	margin:0 auto;
	z-index:1;
	}
.titbx > p{
	position:relative;
	width:69.2973%;/*880*/
	}
.titbx > p::before{
	position:relative;
	width:100%;/*880*/
	padding-bottom:27.272727%;/*240*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 50%;
	background-size:100% auto;
	}
.tit_1{top:-4vw;}
.tit_1 > p::before{background-image: url(../images/tit_1.png);}
.tit_2 > p::before{background-image: url(../images/tit_2.png);}	
.tit_3 > p::before{background-image: url(../images/tit_3.png);}
/**/
.acbtbx{
	position:relative;
	width:66%;/*1320*/
	margin:-.5vw auto;
	/*margin-left:17%;340*/
	top:-5vw;
	}
.acbt{
	position:relative;
	width:34.84%;/*460*/
	display:inline-block;
	cursor:pointer;
	}
.acbt::before{
	position:relative;
	width:100%;
	padding-bottom:91.3%;/*420*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/acbt_c.png);
	background-size:100% auto;
	}
.acbt::after{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	left:0;
	bottom:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:100% auto;
	z-index:1;
	}
.acbt_1{margin-right:2%;}
.acbt_1::after{background-image: url(../images/acbt_1.png);}	
.acbt_2::after{background-image: url(../images/acbt_2.png);}
.ack{
	position:absolute;
	width:129.13%;/*594*/
	height:100%;
	display:block;
	pointer-events:none;
	left:-14.565%;
	bottom:0;
	/**/
	mask-image: url(../images/acbt_b1.png);
	mask-repeat: no-repeat;
	mask-position:50% 100%;
	mask-size:100% auto;
	-webkit-mask-image: url(../images/acbt_b1.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 100%;
	-webkit-mask-size:100% auto;
	/**/
	}
.ack > p{
	position:absolute;
	width:100%;/*594*/
	padding-bottom:100%;
	display:block;
	left:0;
	bottom:-70%;
	opacity:.35;
	/**/
	transition: all .5s;
	}
.ack > p::before{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	left:0;
	top:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/acbt_a.png);
	background-size:100% auto;
	
/*	-moz-animation:rotate 3.8s linear infinite;
	-webkit-animation:rotate 3.8s linear infinite;
	-o-animation:rotate 3.8s linear infinite;
	-ms-animation:rotate 3.8s linear infinite;
	animation:rotate 3.8s linear infinite;*/
	/*
	animation-play-state:paused;*/
	}	
.acp{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	left:0;
	bottom:0%;
	/**/
	transition: all .5s;
	}
.acp::before{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	left:0;
	bottom:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:100% auto;
	/*
	-moz-animation:tup2 .75s linear infinite;
	-webkit-animation:tup2  .75s linear infinite;
	-o-animation:tup2  .75s linear infinite;
	-ms-animation:tup2  .75s linear infinite;
	animation:tup2  .75s linear infinite;*/
	/*
	animation-play-state:paused;*/
	}
.acbt_1 .acp::before{background-image: url(../images/acbt_1p.png);}
.acbt_2 .acp::before{background-image: url(../images/acbt_2p.png);}	

.acbt:hover{z-index:1;}
.acbt:hover .acp{bottom:6%;}
.acbt:hover .acp::before{
	/*animation-play-state:running;*/
	-moz-animation:tup2 .75s linear infinite;
	-webkit-animation:tup2  .75s linear infinite;
	-o-animation:tup2  .75s linear infinite;
	-ms-animation:tup2  .75s linear infinite;
	animation:tup2  .75s linear infinite;
	}	
.acbt:hover .ack{
	mask-image: url(../images/acbt_b2.png);
	-webkit-mask-image: url(../images/acbt_b2.png);
	}
.acbt:hover .ack > p{
	bottom:-50%;
	opacity:.85;
	}
.acbt:hover .ack > p::before{
	/*animation-play-state:running;*/
	-moz-animation:rotate 3.8s linear infinite;
	-webkit-animation:rotate 3.8s linear infinite;
	-o-animation:rotate 3.8s linear infinite;
	-ms-animation:rotate 3.8s linear infinite;
	animation:rotate 3.8s linear infinite;
	}
/**/
.cardh{
	position:relative;
	
	width:100%;
	min-height:20vw;/*410*/
	}
.cloading{
	position:absolute;
	width:50px;
	padding-bottom:50px;
	display:none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/loading2.svg);
	background-size:100% auto;
	top:50%;
	left:37.9%;
	transform: translate(-50%,-50%);
	}
.cardbx_1{
	position:relative;
	width:37.65%;/*753*/
	display:block;
	margin-left:21.2%;/*424*/
	z-index:1;
	}
.cardbx_1::before{
	position:relative;
	width:100%;/*753*/
	padding-bottom:58.4329%;/*440*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/card.png);
	background-size:100% auto;
	}
.cabx{
	position:absolute;
	width:45.15%;/*340*/
	right:11.952%;/*90*/
	top:50%;
	transform: translateY(-50%);
	}
.c_tit{
	position:relative;
	width:100%;/*340*/
	padding-bottom:19.117%;/*70 20.58 65*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/c_tit.png);
	background-size:100% auto;
	}
.cck{
	position:relative;
	width:100%;
	padding-bottom:10%;/*35 10.29*/
	display:block;
	clear:both;
	}
.cbt{
	position:relative;
	width:54.4%;/*185*/
	display:block;
	clear:both;
	cursor: pointer;
	margin:0 auto;
	}
.cbt::before,.cbt::after{
	width:100%;/*185*/	
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}	
.cbt::before{
	position:relative;
	padding-bottom:35.135%;/*65*/
	background-image: url(../images/cbt.png);
	}
.cbt::after{
	position:absolute;
	height:100%;
	background-image: url(../images/cbt_on.png);
	top:0;
	left:0;
	opacity:0;
	transition: all .5s;
	}
.cbt:hover::after{opacity:1;}

input{
	position:relative;
	width:100%;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	color:#c2f6ff;
	border:1px solid #319caf;
	padding:0 5%;/*15*/
	background-color:transparent;/**/
	/*text-align-last:center;
	text-align:center;*/
	/**/
	transition: all .5s;
	}
input:focus{border: 1px solid #ffc600;}/*,select:focus*/
::-webkit-input-placeholder {color:#3698a9;}
:-ms-input-placeholder {color:#3698a9;}
::placeholder {color:#3698a9;}
.cardbx_1 input{
	height:var(--ca-h);
	font-size:var(--ca-size);
	line-height:var(--ca-h);
	/**/
	background-color:rgba(10 ,15 , 34 , .6);
	}
.telbx{
	position:relative;
	width:100%;
	display:block;
	}
.telbx::before,.telbx::after{
	position:relative;
	width:100%;
	padding-bottom:6.764%;/*23*/
	display:block;
	content:'';
	}
.nbbx{
	position:relative;
	width:50%;/*190 55.88% 170*/
	display:block;
	/*margin-right:4.1%;14*/
	float:left;
	}
.nbbt{
	position:relative;
	width:45.58%;/*135 39.7% 155*/
	display:block;
	float:right;
	}
.nbbt::before{
	position:absolute;
	width:100%;/*calc(100% + 1px)*/
	height:100%;
	display:block;
	content:'';
	pointer-events:none;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%,100% 0%,100% 100%,0% 100%;
	background-image:url(../images/nbb1.png),url(../images/nbb2.png),url(../images/nbb3.png),url(../images/nbb4.png);
	background-size:12px auto;
	top:0%;
	left:0%;
	/*transform:translate(-50%,-50%);*/
	}		
.nbbt > a{
	position:relative;
	width:100%;/*135*/
	height:var(--ca-h);
	font-size:var(--ca-size);
	line-height:var(--ca-h);
	color:#fefeff;
	border:1px solid #3ac2da;
	background-color:#008aa3;
	text-align:center;
	overflow:hidden;
	/**/
	transition: all .5s;
	}
.nbbt > a:link{color:#fefeff;}
.nbbt > a:visited{color:#fefeff;}
.nbbt > a:hover{color:#fefeff;background-color:#0eccee; }
.nbbt > a:active{color:#fefeff;}
/**/
.cardbx_2{
	position:relative;
	width:37.65%;/*753*/
	display:none;/*block*/
	margin-left:21.2%;/*424*/
	z-index:1;
	}
.cardbx_2::before{
	position:relative;
	width:100%;/*753*/
	padding-bottom:54.714475%;/*412*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/card2.png);
	background-size:100% auto;
	}
.avatar{
	position:absolute;
	width:30.544%;/*230*/
	left:8.1%;/*61*/
	top:12.1359%;/*50*/
	}
.avatar::before{
	position:relative;
	width:100%;/*230*/
	padding-bottom:128.695%;/*296*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/avatar.png);
	background-size:100% auto;
	z-index:1;
	}
.avatar > div{
	position:absolute;
	width:90.86%;/*209*/
	padding-bottom:113.901%;/*262*/
	display:block;
	top:5.4%;/*16*/
	left:4.3478%;/*10*/
	overflow:hidden;
	background-color:#0eccee;
	}
.avatar > div img{
	position:absolute;
	width:100%;
	display:block;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	}
.databx{
	position:absolute;
	width:41.168%;/*310*/
	padding-bottom:30.544%;/*230*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/nbbx.png);
	background-size:100% auto;
	top:12.8932%;/*49*/
	left:45.551%;/*343*/
	}
	
.da1,.da2{
	position:absolute;
	width:86.48%;/*265 85.48*/
	left:13.5258%;/*41*/
	/**/
	height:var(--nb-h);/*54*/
	font-size:var(--nb-size);/*35*/
	line-height:var(--nb-h);
	letter-spacing:0.1vw;/*2*/
	color:#c2f6ff;	
	}
.da1{ top:18.26%;/*42*/}
.da2{ top:72.26%;/*42*/}
/**/	
.s_regionbx{
	position:relative;
	width:60%;/*1200*/
	margin:0 auto;
	}
.s_regionbx::after{
	position:relative;
	width:100%;
	padding-bottom:4.3%;/*52*/
	display:block;
	content:'';
	}	
.sr_tit{
	position:relative;
	width:26.6%;/*320*/
	display:block;
	margin-top:-1%;
	}
.sr_tit::before{
	position:relative;
	width:100%;/*320*/
	padding-bottom:21.875%;/*70*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/select_r.png);
	background-size:100% auto;
	}
.sr1{
	position:relative;
	width:100%;
	padding:5px 5px 0;
	display:block;
	border-radius:5px;
	background-color:rgba(32,106,119,.16);
	}
.sr1 > .srb{
	position:relative;
	display:inline-block;
	margin:0 -2px;
	overflow:hidden;
	}
.sr1 > .srb::before{
	position:absolute;
	width:1.05vw;/*21*/
	padding-bottom:1.05vw;/*21*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/se-down.png);
	background-size:100% auto;
	top:50%;
	right:.4vw;/*8*/
	transform:translateY(-50%);
	z-index:1;
	pointer-events:none;
	}	
.sar1{width:20%;}
.sar2{width:20%;}
.sar3{width:60%;}
.sar1 select,.sar2 select{
	text-align-last:center;
	text-align:center;
	}
option{color:#0b1926;}
select{
	outline:none;
	-webkit-appearance: none; /*Chrome*/
	-moz-appearance: none;/*FF*/
	-ms-appearance: none;
	-o-appearance: none;
	appearance:none;/*CSS3*/
	}
select::-ms-expand{display:none;}
select{
	position:relative;
	width:100%;
	cursor: pointer;
	height:var(--sr-h);
	font-size:var(--sr-size);
	line-height:var(--sr-h);
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	border:0;
	color:#c2f6ff;
	padding:0 1.9vw 0 5%;/*20 1vw*/
	background-color:transparent;/**/
	/**/
	transition: all .5s;
	}
	
	
.s_mp{
	position:relative;
	width:100%;
	padding-bottom:6px;
	display:block;
	margin:7px auto 0;
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat,no-repeat,repeat-x;
	background-position:0% 0%,100% 0%,100% 0%,0% 0%;
	background-image:url(../images/s_mp_01.png),url(../images/s_mp_03.png),url(../images/s_mp_02.png),url(../images/s_mp_01a.png);
	background-size:auto 100%;
	}
.finishbt{
	position:relative;
	width:23.7%;/*474*/
	display:block;
	margin:0 auto;
	}
.finishbt::before,.finishbt::after{
	width:100%;/*474*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.finishbt::before{
	position:relative;
	padding-bottom:25.316%;/*120*/
	background-image: url(../images/finishbt.png);	
	}
.finishbt::after{
	position:absolute;
	height:100%;
	background-image: url(../images/finishbt_on.png);
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	}
.finishbt:hover::after{opacity:1;}
.fbx{
	position:relative;
	width:100%;
	display:block;
	}
.fbx::after{/*.fbx::before,*/
	position:relative;
	width:100%;
	display:block;
	content:'';
	}
/*.fbx::before{padding-bottom:3%;}*//*60*/
.fbx::after{padding-bottom:3.25%;/*65*/}
/**/	
.storebx{
	position:relative;
	width:60%;/*1200*/
	margin:0 auto;
	z-index:1;
	/**/
	color:#c2f6ff;
	}
.storebx::before,.storebx::after{/**/
	position:relative;
	width:100%;
	display:block;
	content:'';
	}
.storebx::before{padding-bottom:1.5%;/*30*/}
.storebx::after{padding-bottom:6%;/*60*/}
	
.store_con{
	position:relative;
	width:46.16%;/*554*/
	float:left;
	}
.sphbx{
	position:relative;
	width:100%;/*554*/
	padding-bottom:57.761%;/*320*/
	display:block;
	}
.sphbx::before{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	top:0;
	left:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/store_phbx.png);
	background-size:100% auto;
	z-index:1;
	}
.sph1{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	top:0;
	left:0;
	/**/
	mask-image: url(../images/store_phbx_2.png);
	mask-repeat: no-repeat;
	mask-position:50% 100%;
	mask-size:100% auto;
	-webkit-mask-image: url(../images/store_phbx_2.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 100%;
	-webkit-mask-size:100% auto;
	}
.sph1 > div{
	position:absolute;
	width:97.6534296%;/*541*/
	padding-bottom:52.166%;/*289*/
	top:4.6875%;/*15*/
	left:1.083%;/*6*/
	overflow:hidden;
	background-color:rgba(6,10,20,.5);/*#01a8fe*/
	}
.sph1 > div img{
	position:absolute;
	width:101%;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	}
.sc1{
	position:relative;
	width:100%;
	padding-bottom:5.415%;/*30*/
	display:block;
	}
.s_name{
	position:relative;
	display:block;
	font-size:var(--sn-size);
	line-height:var(--sn-h);
	padding:.25vw .75vw .15vw 7.2%;/*5 15 3 40*/
	background-color:#075c80;
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat;
	background-position:100% 100%,0% 0%;
	background-image:url(../images/store_2.png),url(../images/store_1.png);
	background-size:.85vw auto,100% 100%;/*17*/
	}
.s_name::before{
	position:absolute;
	width:11.91%;/*66*/
	padding-bottom:17.684%;/*98*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/m_icon.png);
	background-size:100% auto;
	z-index:1;
	top:-3vw;/*-60*/
	left:-.85vw;/*-17*/
	}
.sc2{
	position:relative;
	width:100%;
	padding-bottom:4.5%;/*25*/
	display:block;
	}
.s_address{
	position:relative;
	display:block;
	padding-left:7.2%;/*40*/
	font-size:var(--sn2-size);
	line-height:var(--sn2-h);
	}
.s_address > span{
	position:relative;
	display:inline-block;
	padding-bottom:2px;
	/*border-bottom:1px solid #6daab5;*/
	}
.s_address > span::before{
	position:absolute;
	width:100%;
	padding-bottom:1px;
	background-color:#6daab5;
	display:block;
	content:'';
	left:0;
	bottom:6%;
	}
.s_address::before{
	position:absolute;
	width:7.2%;/*40*/
	padding-bottom:6.3%;/*35*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/m_icon2.png);
	background-size:100% auto;
	top:-.08vw;
	left:0;
	}
	
	
	
.store_con::after{
	position:relative;
	width:100%;
	display:block;
	content:'';
	}
.store_map{
	position:relative;
	width:46.66%;/*560*/
	float:right;
	}
.s_mbx{
	position:relative;
	width:100%;
	padding:4px;
	display:block;
	}
.s_mbx::before{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:'';
	pointer-events: none;
	top:0;
	left:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%,100% 0%,100% 100%,0% 100%;
	background-image:url(../images/mbr_1.png),url(../images/mbr_2.png),url(../images/mbr_3.png),url(../images/mbr_4.png);
	/*background-size:100% auto;*/
	z-index:1;
	}
.s_map{
	position:relative;
	width:100%;
	padding-bottom:80%;/*435*/
	display:block;
	border:2px solid #00a5ff;
	background-color:rgba(6,10,20,.35);
	overflow:hidden;
	}	
.s_map iframe {
  	position:absolute;
  	width:100%;
  	height:100%;
  	left:0;
  	top:0;
	}
	
	


/**/
.noticebx{
	position:relative;
	width:63.1%;/*1262*/
	margin:0 auto;
	z-index:1;
	}
.not1{
	position:relative;
	width:28.52%;/*360*/
	display:block;
	margin-bottom:10px;
	}
.not1::before{
	position:relative;
	width:100%;/*360*/
	padding-bottom:25%;/*90*/
	display:block;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 50%;
	background-image: url(../images/notice.png);
	background-size:100% auto;
	}	
.not2{
	position:relative;
	width:94.45%;/*1192*/
	display:block;
	margin:0 auto;
	padding-left:var(--f1-size);/*22*/
	font-size:var(--f1-size);
	line-height:var(--f1-h);/*35*/
	color:#c2f6ff;
	}
.not2::after{
	position:relative;
	width:100%;
	padding-bottom:12%;
	display:block;
	content:'';
	}
	
.not2 > li{
	position:relative;
	list-style-type:decimal;
	padding-bottom:10px;/*10*/
	}
/*20251110*/
.bn2{
	position: fixed;
	width:240px;/*240*/
	display: block;
	left: 0;
	top:70%;
	transform:translateY(-50%);
	z-index:3; 
	}
.bn2 img{
	position: relative;
	width: 100%;
	display: block;
	cursor: pointer;
	}

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

	}
@media only screen and (max-width:1200px){
/**/
:root{
	--f1-size:1.7vw;/*20.4*/
	--f1-h:2.5vw;/*30*/
	--ca-size:1.5vw;/*20*/
	--ca-h:4.16vw;/*50*/
	--nb-size:2.3vw;/*28*/
	--nb-h:3.5vw;/*42*/
	--sr-size:1.6vw;/*20*/
	--sr-h:3.3vw;/*52*/
	--sn-size:1.6vw;/*20*/
	--sn-h:3vw;/*40*/
	--sn2-size:1.45vw;/*17.4*/
	--sn2-h:2.5vw;/*30*/
	}
/**/
.cardh{min-height:25.83vw;/*310*/}
.cloading{
	width:38px;
	padding-bottom:38px;
	left:37.9%;
	}
.cardbx_1{
	width:48%;/*753*/
	margin-left:17.2%;/*424*/
	z-index:1;
	}
.nbbt::before{background-size:8px auto;}
/**/
.cardbx_2{
	width:48%;/*753*/
	margin-left:17.2%;/*424*/
	}
/**/	
.sr_tit{
	width:35%;/*320*/
	margin-top:-1%;
	}
.finishbt{width:33%;/*474*/}
.s_name::before {top:-2.6vw;}
.s_address::before{top:.32vw;}



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

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

}
/**/
@media only screen and (max-width:780px){
/**/
:root{
	--f1-size:2.82vw;/*22*/
	--f1-h:4.5vw;/*35*/
	--ca-size:2.82vw;/*22*/
	--ca-h:7.69vw;/*60*/
	--nb-size:4.23vw;/*33*/
	--nb-h:6.8vw;/*54*/
	--sr-size:2.82vw;/*22*/
	--sr-h:6.6vw;/*52*/
	--sn-size:3.84vw;/*30*/
	--sn-h:5.769vw;/*45*/
	--sn2-size:2.82vw;/*22*/
	--sn2-h:4.5vw;/*35*/
	}
/**/
.hbg{
	background-image: url(../images/hbg_m_01.jpg),none;
	}
.hbx{padding-bottom:156.41%;/*1220*/}
.hbx_a{background-image: url(../images/hbg_m_01a.png);}
.cbx_t::before{
	padding-bottom:15.897435%;/*124*/
	background-image: url(../images/bx1_m.png);
	}
.cbx_c1{background-image: url(../images/bx2_m.png),url(../images/bx3_m.png);}
.cbx_c1::after{padding-bottom:10%;}/*16*/
.cbx_t2::after{
	padding-bottom:16.282%;/*127*/
	background-image: url(../images/bx5_m.png);
	}
.cbx_c2{background-image: url(../images/bx4_m.png),url(../images/bx3_m.png);}
.slogan{
	width:100%;/*812*/
	padding-bottom:44.871794%;/*350*/
	background-image: url(../images/slogan_m_1.png);
	background-size:104.1% auto;
	top:15.4%;/*188*/
	left:0;
	overflow: hidden;
	}
.slogan > div {background-size:104.1% auto;}
.slogan .slo2{
	background-image: url(../images/slogan_m_2.png);
	} 
.slogan .slo3{
	background-image: url(../images/slogan_m_3.png);
	} 	
.slogan .slo4{background-image: url(../images/slogan_m_4.png);}
	
.slogan .slo5{
	mask-image: url(../images/slogan_m_4a.png);
	mask-size:104.1% auto;
	-webkit-mask-image: url(../images/slogan_m_4a.png);
	-webkit-mask-size:104.1% auto;
	/**/
	}
.slogan .slo6{
	/**/
	mask-image: url(../images/slogan_m_4b.png);
	-webkit-mask-image: url(../images/slogan_m_4b.png);
	-webkit-mask-size:104.1% auto;
	/**/
	}	
	
	 
.trbt{
	width:53%;/*400 51.282*/
	right:1.7948%;/*14*/
	}
/**/
.pbx1{
	width:48%;/*375*/
	height:137.82vw;
	top:46.15vw;/*360*/
	}
.pbx2{
	position:absolute;
	width:100%;/*615*/
	height:100%;/*1075*/
	}
.pbx2 .p1{
	width:164%;/*615*/
	padding-bottom:286.66%;/*1075*/
	transform:rotate(5deg);
	}
.pbx2 .p1::after{background-image: url(../images/pk.png);}
	
.gobt{
	width:78.7179%;/*614*/
	top:102.05vw;/*796*/
	left:2.6923%;/*21*/
	}
.gobt::before{
	padding-bottom:43.485342%;/*267*/
	background-image: url(../images/gobt_m.png);
	}
.gobt::after{
	background-image: url(../images/gobt_m_on.png);
	}	
.s1{
	width:91.282%;/*712*/
	padding-bottom:12px;/*12*/
	margin:0 auto 5.769vw;/*45*/
	}
.paint_1{
	width:60%;
	top:-18vw;
	}
.paint_1 > p::before{
	left:-18.58vw;/*145*/
	}
.paint_2{
	width:40%;/*45*/
	bottom:-21.8vw;/*22.8*/
	}
.paint_2 > p::before{
	left:21.282vw;/*166*/
	}	
.paint_3{
	width:22%;
	left:0;
	bottom:1vw;
	}
.paint_3 > p::before{
	left:-8.179vw;/*-56*/
	transform: rotate(-96deg);
	}	
.paint_4 {
  	width: 55.5%;
  	right: 3.6%;
  	bottom: 8.6vw;
	}
.dnbx{padding-bottom:20.5%;}	
.paint_5{width:72%;}
.paint_5 > p::before{left:-12vw;}
/**/
.titbx{width:95%;/*737*/}
.titbx > p{width:100%;}
.tit_1{top:0;padding-top:7vw;}	
/**/	
.acbtbx{
	width:94.48%;/*737*/
	margin:0 auto 11vw;
	top:0;
	}
.acbt{
	width:460px;/*460*/
	display:block;
	margin:0 auto;
	}	
.acbt_1{margin-bottom:6vw;margin-top:-1vw;}
	
.acbt:hover .acp::before{
	animation-play-state:paused;
	}	

.acbt:hover .ack > p::before{
	animation-play-state:paused;
	}
	
/**/
.cardh{min-height:48.7vw;/*380*/}
.cloading{
	width:10%;
	padding-bottom:10%;
	left:50%;
	}
.cardbx_1{
	width:90%;/*753*/
	margin:0 auto;
	}
/**/
.cardbx_2{
	width:90%;/*753*/
	margin:0 auto;
	}
/**/
.s_regionbx{
	width:87.179%;/*680*/
	}	
.s_regionbx::after{
	padding-bottom:8%;/*55*/
	}
.sr_tit{
	width:47.05%;/*320*/
	margin-top:-2.5%;
	}
select{padding:0 3.5vw 0 5%;}
.sr1 > .srb::before{
	width:2.7vw;/*21*/
	padding-bottom:2.7vw;/*21*/
	right:.38vw;/*3*/
	}	
.sar1{width:25%;}
.sar2{width:25%;}
.sar3{width:50%;}
	
.finishbt{width:60.7%;/*474*/}
/*.fbx::before{padding-bottom:5.76%;}*//*45*/
.fbx::after{padding-bottom:7.3%;/*57*/}	

.storebx{width:100%;}
.storebx::before{padding-bottom:3.8%;/**/}
.storebx::after{padding-bottom:10.3%;/*45 5.76%*/}
.store_con{
	width:80%;/*624*/
	float:none;
	margin:0 auto;
	}
.store_con::after{ padding-bottom:7.3%;/*35 4.48%*/}
.s_name{
	padding:.641vw 1.92vw .38vw 7.2%;/*5 15 5 40*/
	background-size:2.17vw auto,100% 100%;/*17*/
	}
.s_name::before{
	top:-9vw;/*-70.2*/
	left:-2.5vw;/*-19.5*/
	}
.s_address::before{top:-.38vw;}	
/**/
.store_map{
	width:80%;/*624*/
	float:none;
	margin:0 auto;
	}
	
	

/**/
.noticebx{
	width:87.18%;/*680*/
	}
.not1{
	width:52.94%;/*360*/
	margin-bottom:8px;
	}
.not2{width:89.7%;/*610*/}
.not2::after{padding-bottom:33.5%;}
.not2 > li{padding-bottom:8px;}	

/*20251110*/	
.bn2{width:29.2vw;/*240*/top:67.8vw;transform:translateY(0%);}	
}
@media only screen and (max-width:600px){ 
/**/
.acbt{width:75%;/*460*/}

}
@media only screen and (max-width:580px){
/**/	
	
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:470px){
/**/
:root{
	--f1-size:1.25rem;/*20*/
	--f1-h:1.8rem;/*22*/
	--ca-size:3.3vw;/*15.5*/
	--ca-h:8.5vw;/*42.3*/
	--sr-size:4.1vw;/*20*/
	--sr-h:9.8vw;/*45*/
	--sn-size:4.6vw;/*22*/
	--sn-h:7vw;/*33*/
	--sn2-size:4vw;/*18.8*/
	--sn2-h:6.38vw;/*30*/
	}
/**/
.s1{padding-bottom:10px;/*12*/
	background-size:auto 10px;
	}
.s1::before,.s1::after{
	width:10px;
	padding-bottom:10px;
	top:42%;
	}
	
/**/
.cabx {width:46.15%;top:49%;}
.cck{padding-bottom:8%;}
.nbbt::before {background-size: 6px auto;}
/**/
.s_regionbx{
	width:90%;/*430 91.48%*/
	}	
.sr_tit{
	width:68.418%;/*320*/
	margin-top:-1.2%;
	}
select{
	padding:0 3.5vw;/*15*/
	}
.sar1 select,.sar2 select{
	text-align-last:left;
	text-align:left;
	}
.sar1{width:50%; }
.sar2{width:50%;}
.sar3{width:100%;}
.finishbt{width:70%;/*474*/}
.store_con {width: 83%;}
.s_name{
	padding:1.06vw 3.19vw 1.06vw 7.2%;/*5 15 5 40*/
	background-size:3.6vw auto,100% 100%;/*17*/
	}
.s_name::before{
	top:-7.8vw;
	left:-3vw;
	}
.s_address::before{top:.35vw;}
.store_map{width:83%;}
.s_mbx {padding:3px;}
.s_mbx::before{background-size:30px;}
/*.s_map{border:1px solid #00a5ff;}*/

/**/
.noticebx{width:92%;}	
	
	
}
@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/

}