@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: #ffae00;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
	color:#ff8400;
}
a:hover{
	text-decoration: none;
	color: #ff9000;
}
a:active {
	text-decoration: none;
	color: #ff8400;
}
html{font-size:75%;}
body{
	font-size:1rem;
	word-wrap:break-word;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;/**/
	/**/
	-webkit-text-size-adjust:100%;
	}
*{	
	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;
	}
	
/**/
.allbx{
	position:relative;
	width:100%;
	min-height: 100vh;
	display: block;
	/*overflow: hidden;*/
	}

.logo{
	position:absolute;
	width:25%;/*500*/
	z-index:6;
	left:0;
	top:0;
	overflow: hidden;
	/**/
	transition: all .5s;
	}
.logo::before{
	position: relative;
	width:100%;/*500*/
	padding-bottom:24%;/*120*/
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/logo.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
/**/
.mubx{
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 5;
	}
.mu{
	position:relative;
	display: block;
	text-align: right;
	padding-right: 9vw;
	}
.mu > a{
	position:relative;
	width:11.2%;/*224*/
	padding-bottom:6%;/*120*/
	display: inline-block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.mu > a::before,.mu > a::after{
	position:absolute;
	width: 100%;/*224*/
	height: 100%;
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	top: 0;
	left: 0;
	}
.mu > a::before{background-image:url(../images/m1.png);}
.mu > a::after{
	opacity:0;
	/**/
	transition: all .5s;
	}
.mu > a:last-child::before{background-image:none;}
.mu > a.m1{background-image:url(../images/mu_1.png);}
.mu > a.m2{background-image:url(../images/mu_2.png);}	
.mu > a.m3{background-image:url(../images/mu_3.png);}
.mu > a.m4{background-image:url(../images/mu_4.png);}
.mu > a.m1::after{background-image:url(../images/mu_1a.png);}
.mu > a.m2::after{background-image:url(../images/mu_2a.png);}	
.mu > a.m3::after{background-image:url(../images/mu_3a.png);}
.mu > a.m4::after{background-image:url(../images/mu_4a.png);}
.mu > a:hover::after,.mu > a.on::after{opacity:1;}


/**/
.mubx .moc{
 position:absolute;
 width:12.3%;/*96*/
 padding-bottom:7.6875%;/*60*/
 display:none;
 cursor:pointer;
 right:3.71vw;/*29*/
 top:3.71vw;/*30*/
 z-index:6;
 	} 
.mubx .moc > li{
 position:absolute;
 width:100%;/*96*/
 padding-bottom:9.11%;/*8.75*/
 background-color:#ff7000;
 left:0;
 /**/
 transition: all .3s;
 -moz-transition: all .3s;
 -webkit-transition: all .3s;
 -o-transition: all .3s;
 }
.mubx .moc >  li:first-child {top:0;}
.mubx .moc >  li:nth-child(2) {top:50%;transform:translateY(-50%);}
.mubx .moc >  li:last-child {bottom:0;}
/**/
.mubx.on .moc > li:nth-child(2) {opacity:0;}
.mubx.on .moc > li:first-child,.mubx.on .moc > li:last-child{top:50%;transform-origin:50% 50%}
.mubx.on .moc >  li:first-child {transform:translateY(-50%)rotate(-45deg);}
.mubx.on .moc >  li:last-child {bottom:auto;transform:translateY(-50%)rotate(45deg); }

.sharebx{
	position:absolute;
	width:10vw;/*50*/
	text-align:center;
	/*display:none;*/
	right:0;
	top:1.5vw;
	}
.sharebx a{
	position:relative;
	width:2.5vw;
	padding-bottom:2.5vw;
	display:inline-block;
	margin:0 .1vw;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.link_fb{background-image:url(../images/link_fb.png);}
.link_line{background-image:url(../images/link_line.png);}
.link_share{background-image:url(../images/link_share.png);}
/**/
.footer{
	position: absolute;
	width: 100%;
	padding: .8vw 0 .5vw;/*20*/
	display: block;
	background-color: #aad6b1;
	left: 0;
	bottom: 0;
	text-align: center;
	font-size:1.1rem;/*12*/
	color: #40220f;
}
.footer2{
	position: absolute;
	width: 100%;
	padding:1vw 0 .5vw;/*20*/
	display: block;
	left: 0;
	bottom: 0;
	text-align: center;
	font-size:1.1rem;/*12*/
	color: #40220f;
}

/**/
#light_bx,#light_bx2{
	position:fixed;
	width:100%;
	height:100vh;
	height:calc(var(--vh, 1vh) * 100);
	backdrop-filter: blur(3px);
	top:0;
	left:0;
	background-color:rgba(0,0,0,.85);
	text-align:center;
	overflow:auto;
	display:none;/**/
	z-index: 10;
	}
#light_bx > div,#light_bx2 > div{
	position:relative;
	width:100%;
	min-height:100vh;
	min-height:calc(var(--vh, 1vh) * 100);
	/**/
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	}
.msbx_1{
	position: relative;
	width:500px;
	display:none;
	}
.msbx_1:before,.msbx_1:after{
	position:relative;
	width:100%;/*500*/
	padding-bottom:8%;/*40*/
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.msbx_1 > .mb1{
	position:relative;
	width:100%;
	min-height:100px;
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-position:50% 30%,50% 50%;
	background-image:url(../images/ligbx_02a.png),url(../images/ligbx_02.png);
	background-size:100% auto;
	}
.msbx_1 .msbx{
	position:relative;
	display:none;
	}
.msbx_1:before{
	background-position:50% 100%;
	background-image: url(../images/ligbx_01.png);
	}
.msbx_1:after{
	background-position:50% 0%;
	background-image: url(../images/ligbx_03.png);
	}
/**/
.msbx_2{
	position: relative;
	width:380px;
	display:none;
	}
.msbx_2:before,.msbx_2:after{
	position:relative;
	width:100%;/*500*/
	padding-bottom:8%;/*40*/
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.msbx_2 > .mb1{
	position:relative;
	width:100%;
	min-height:100px;
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image:url(../images/ligbx_02.png);
	background-size:100% auto;
	}
.msbx_2 .msbx{
	position:relative;
	display:none;
	}
.msbx_2:before{
	background-position:50% 100%;
	background-image: url(../images/ligbx_01.png);
	}
.msbx_2:after{
	background-position:50% 0%;
	background-image: url(../images/ligbx_03.png);
	}
/**/
.con2{
	position: relative;
	width:90%;/*450*/
	margin:0 auto;
	font-size:20px;/*20*/
	color: #40220f;
	text-align: center;
	}
.f3bx{
	position: relative;
	width:100%;
	font-size:25px;/*25 1.25vw*/
	font-weight:700;
	color:#26150a;
	padding:12px 0 20px;/*10 20*/
	text-align: center;
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 100%;
	background-image:url(../images/s2.png);
	}
.imbx{
	position: relative;
	display:inline-block;
	padding:10px 15px;/*5  10*/
	font-size:18px;/*18*/
	line-height:20px;/*20*/
	color:#ee6500;
	border:1px solid #ee6500;
	border-radius:10px;/*10*/
	margin:20px 0 10px;/*10*/
	}
.tbx3{
	position: relative;
	display:inline-block;
	padding:5px 0;/*5*/
	font-weight:500;
	}
.tbx5{
	position: relative;
	width:100%;
	display:block;
	padding:20px 0 13px;
	}
	
.ik{display:inline-block;}
.tbx3 > div{
	position: relative;
	width: 100%;
	display:block;
	padding:0 0 10px;/*10*/
	text-align: left;
	}
.bt2bx{
	position: relative;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	}
.bt2bx a{
	position:relative;
	width:140px;/**/
	display:inline-block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-image: url(../images/bt2_a.png);
	background-size:100% auto;
	margin:0 10px; 
	}
.bt2bx a:before{
	position:relative;
	width:100%;/*160*/
	padding-bottom:37.5%;/*60*/
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-image: url(../images/bt2_b.png);
	background-size:100% auto;
	/**/
	opacity: 0;
	/**/
	transition: all .5s;
	}
.bt2bx a:after{
	position:absolute;
	width:100%;/*140*/
	height:100%;
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	top: 0;
	left: 0;
	}
.bt2bx a.bt2_1:after{background-image: url(../images/bt2_1.png);}
.bt2bx a.bt2_2:after{background-image: url(../images/bt2_2.png);}
.bt2bx a.bt2_3:after{background-image: url(../images/bt2_3.png);}
.bt2bx a:hover:before{opacity:1;}
.bt3bx{
	position: relative;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	}
.linkbt2{
	position: relative;
	width: 200px;
	display: block;
	margin:0 auto;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-image: url(../images/linkbt_1.png);
	background-size:100% auto;
	}
.linkbt2:before{
	position:relative;
	width:100%;/*230*/
	padding-bottom:26%;/*60*/
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-image: url(../images/linkbt_2.png);
	background-size:100% auto;
	/**/
	opacity: 0;
	/**/
	transition: all .5s;
	}
.linkbt2:hover:before{opacity:1;}


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

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

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

}	
@media only screen and (max-width:780px){
/**/
.logo{
	width:53.4615%;/*417*/
	left:0;/*-7 -.89vw*/
	top:.89vw;/*7*/
	}
.logo::before{
	left:-.89vw;
	}
	
/**/	
.mubx.on{
	position:fixed;
	overflow:auto;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	background-color:#fffdeb;
	z-index: 6;
	}	
.mubx.on::before{
	position:relative;
	width: 100%;
	padding-bottom:15%;
	content:"";
	display: block;
	}
.mu{
	text-align:center;
	pointer-events:none;
	display:none;
	padding-right:0;
	}
.mubx.on .mu{
	pointer-events:auto;
	display:block;
	}
	
.mu > a{
	width:85%;
	padding-bottom:20%;
	display:block;
	background-size:auto 120%;
	margin:0 auto;
	}
.mu > a::before{
	height: 3.8px;
	background-image:url(../images/m1_m.png);
	background-repeat:repeat-x;
	background-size:auto 3.8px;
	top:auto;
	bottom: 0;
	}
.mu > a:last-child::before{background-image:url(../images/m1_m.png);}
.mu > a::after{background-size:auto 120%;}
.mubx .moc{display:block;}
/**/

.sharebx{
	position:relative;
	width:100%;/*50*/
	display:none;
	right:0;
	top:0;
	padding-top:6vw;
	}
.mubx.on .sharebx{display:block;}
.sharebx a{
	width:16.5%;
	padding-bottom:16.5%;
	margin: 0 2.8%;
	}
.footer{
	padding:2.5641vw 0;
	font-size:1rem;/*20*/
	}	
.footer2{
	position: relative;
	padding:2.5641vw 0;
	font-size:1rem;/*20*/
	}	
	
}
@media only screen and (max-width:685px){ 
/**/
	
}
@media only screen and (max-width:580px){
/**/	
}
@media only screen and (max-width:560px){
/**/
/**/
.msbx_1{width:95%;}
.con2{font-size:18px;/*20*/}	
.f3bx{
	font-size:22px;/*25 1.25vw*/
	padding:12px 0 20px;/*10 20*/
	}	
.imbx{
	padding:10px 15px;/*5  10*/
	font-size:16px;/*18*/
	border-radius:10px;/*10*/
	margin:20px 0 10px;/*10*/
	}
.imbx span{display:inline-block;}
.bt2bx a{width:120px;/*140*/margin: 0 3px;}
.linkbt2{width:175px;/*200*/}
}
@media only screen and (max-width:470px){
/**/

}

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

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


}
 
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.disabled{
	pointer-events: none;
    cursor: default;
    color: gray;
    text-decoration: none;
}