@charset "utf-8";
/* CSS Document */
/* loading */
#loo{
	position:absolute;
	width:50px;/*32*/
	height:50px;
	left:50%;
	top: 50%;
	margin-left:-25px;
	margin-top: -25px;
	background-color:#000;
	background-image: url(../images/loading.gif);
	border-radius: 99px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	overflow:hidden;
}
#bacc{
	position: fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:20;
	background-color:rgba(0,0,0,.8);
	}
.abx{
	position:relative;
	width:100%;
	display:block;
	margin:0 auto;
	overflow:hidden;
	}
.logo{
	position:absolute;
	width:17.4%;/*348*/
	padding-bottom:8.8%;/*176*/
	display:block;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/logo.png);
	background-size:100% auto;
	top:0;
	left:0;
	z-index:1;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.logo.on{
	width:13%;/*348*/
	padding-bottom:6.574%;/*176*/
	top:0;
	left:0;
	z-index:1;
	}
	
#rain{
	position:fixed;
	width:100%;
	height:100%;
	pointer-events:none;
	left:0;
	top:0;
	mix-blend-mode: screen;
	z-index:1;
	opacity:1;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#rain iframe{
    position:absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 50%;
	transform:translateX(-50%);
	}	
/**/
/*home*/
.h_bt{
	position:absolute;
	width:26.9%;/*210*/
	padding-bottom:26.9%;/**/
	display:none;
	bottom:2%;
	left:68.5%;
	/*transform:translateX(-50%);*/
	filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .3));	
	}
.h_bt::before,.h_bt::after{
	content:'';
	}
.h_bt > div,.h_bt::before,.h_bt::after{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	top:0;
	left:0;
	}
.h_bt > div{background-image: url(../images/h_bt1.png); z-index:1;}
.h_bt::before{background-image: url(../images/h_bt2.png);}
.h_bt::after{background-image: url(../images/h_bt3.png);}



.hombx{
	position:relative;
	width:100%;
	padding-bottom:50.4%;/*1010*/
	display:block;
	margin:0 auto;
	opacity:0;
	overflow:hidden;
	top:0;
	left:0;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/index.jpg);
	background-size:100% auto;
	/*
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;*/
	}
.hombx.on{opacity:1;z-index:1;}
.h_t_1,.h_t_2{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	
	background-size:100% auto;
	}
.h_t_1{background-image: url(../images/h_t_1.png);}
.h_t_2{background-image: url(../images/h_t_2.png);}	

.hombx.on .h_t_1{animation:slideToLeft 1s;}	
.hombx.on .h_t_2{animation:slideToLeft 1.5s;}	
.reserve{
	position:absolute;
	width:7.1%;/*142*/
	padding-bottom:12.2%;/*244*/
	display:block;
	cursor: pointer;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/reserve.png);
	background-size:100% auto;
	top:66%;
	right:17.8%;
	/**/
	}
.reserve::before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	background-image: url(../images/reserve_a.png);
	top:0;
	left:0;
	/**/
	-moz-animation:fin2 .8s linear infinite;
	-webkit-animation:fin2 .8s linear infinite;
	-o-animation:fin2 .8s linear infinite;
	-ms-animation:fin2 .8s linear infinite;
	animation:fin2 .8s linear infinite;
	}
	
/**/
#light_bx{
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background-color:rgba(17,16,15,.9);
	z-index:15;
	overflow:auto;
	display:none;/**/
	}
#light_bx .kbx{
	position:relative;
	width:100%;
	min-height:100vh;
	/* Center slide text vertically */
	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;
	}
/**/
.play_v{
	position:absolute;
	width:3.9%;/*82*/
	padding-bottom:3.9%;/**/
	display:block;
	cursor: pointer;
	/*background-color:rgba(0,0,0,.5);*/
	top:79.5%;
	right:6.2%;
	}	
/**/
.vdbx{
	position:relative;
	width:800px;
	padding-bottom:467px;/*584*/
	display:block;
	display:none;
	margin:0 auto;
	/**/
   -webkit-filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.8));	
	}
.vdbx::after{
    position:absolute;
    content:"";
	width:100%;
	height:100%;
	display:block;
	pointer-events: none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/vdo.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.vdbx > .v1{
	position:absolute;
	width:95%;/*950*/
	padding-bottom:53.4%;/*534*/
	top:0;
	left:2.5%;
	margin-top:2.5%;
	overflow:hidden;
	}
.vdbx > .v1 video,
.vdbx > .v1 iframe,
.vdbx > .v1 img{
    position:absolute;
    width: 100%;
    height: 100%;	
    top:0%;
    left:0%;
	}
.clos_2{
	position:absolute;
	width:50px;
	padding-bottom:71px;
	display:block;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-image:url(../images/close_s.png);
	background-size:100% auto;
	top:1%;
	right:3.8%;
	z-index:2;
	}
	
/* 內頁 */		
.incbx{
	position:relative;
	width:100%;
	padding-bottom:52.5%;/*1050*/
	display:none;/*block*/
	margin:0 auto;
	overflow:hidden;
	opacity:0;
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat,repeat-y;
	background-position:50% 0%,50% 100%,50% 0%;
	background-image:url(../images/inbg_01.jpg),url(../images/inbg_02.jpg),url(../images/inbg_03.jpg);
	background-size:100% auto,100% auto,100% auto;
	/*top:0;
	left:0;*/
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.incbx.on{opacity:1;z-index:1;}
.tcon{
	position:relative;
	width:100%;
	padding-bottom:18%;/*17.3*/
	display:none;
	z-index:1;
	}
.dcon{
	position:relative;
	width:100%;
	padding-bottom:23.84%;/*186*/
	display:none;
	}
.tit{
	position:absolute;
	width:30%;/*393 25.519*/
	padding-bottom:5.343%;/*70 4.545*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/tit.png);
	background-size:100% auto;
	top:-112%;/*83*/
	left:50%;
	transform:translateX(-50%);
	/*filter: drop-shadow(0px 3px 25px rgba(66, 98, 133, .6));*/
	z-index:1;
	pointer-events:none;
	}
.tit > div{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/tita.png);
	background-size:100% auto;
	top:0%;
	left:0%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.conbx{
	position:absolute;
	width:77%;/*1540*/
	left:11.5%;
	top:7.9%;/*104 9.9*/
	/*z-index:1;*/
	}
.cbx1{
	position:relative;
	width:100%;
	padding-bottom:2.207%;/*34*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:100% auto;
	/*background-image: url(../images/conbx_01.png);*/
	}
.cbx2{
	position:relative;
	width:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	/*background-image: url(../images/conbx_02.png);*/
	}
.cbx3{
	position:relative;
	width:100%;
	padding-bottom:2.7272%;/*42*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:100% auto;
	/*background-image: url(../images/conbx_03.png);*/
	
	top:-1px;
	-moz- top:0;
	}
.cbx2 .bx1{
	position:relative;
	width:100%;
	padding-bottom:45.064%;/*694*/
	}
/**/	
.pam{
	position:absolute;
	width:95%;
	/*height:15.85%;110 694*/
	top:0;
	left:50%;
	transform:translateX(-50%);
	margin:0 auto;
	/**/
	font-size:1.5rem;
	line-height:2.2rem;
	text-align:center;
	color:#303b43;
	z-index:2;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.btbx{
	position:relative;
	text-align:center;
	padding:.5rem 0 .2rem;
	}
.btbx .tlf{ text-align:left; padding-left:4.2%;}	
.btbx2,.btbxs{
	position:relative;
	text-align:center;
	padding:1rem 0 .2rem;
	}
.btbx3{
	position:relative;
	text-align:center;
	padding:1rem 0 .2rem;
	}
.btbx a{
	position:relative;
	width:9.3%;/*130*/
	padding-bottom:2.86%;/*40*//*1392*/
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	opacity:.6;
	margin:0 .3%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.btbxs a{
	position:relative;
	width:9.3%;/*130*/
	padding-bottom:2.86%;/*40*//*1392*/
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	opacity:.6;
	margin:0 .3%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.btbx2 a{
	position:relative;
	width:10.9%;/*153*/
	padding-bottom:2.86%;/*40*//*1392*/
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	opacity:.6;
	margin:0 .2%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.btbx3 a{
	position:relative;
	width:5.27%;/*120 50*/
	padding-bottom:2.86%;/*60*//*1392*/
	display:inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	opacity:.6;
	margin:0 .3%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.btbx3 span{ display:block;}
.btbx a::before,.btbxs a::before,.btbx2 a::before,.btbx3 a::before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.btbx a.on::before,.btbx a.on,.btbxs a.on::before,.btbxs a.on,.btbx2 a.on::before,.btbx2 a.on,.btbx3 a.on::before,.btbx3 a.on{opacity:1;}
.btbx a:hover,.btbxs a:hover,.btbx2 a:hover,.btbx3 a:hover{opacity:1;}
.btbx a.bt_1{background-image: url(../images/bt_1.png);}
.btbx a.bt_1::before{background-image: url(../images/bt_1a.png);}	
.btbx a.bt_2{background-image: url(../images/bt_2.png);}
.btbx a.bt_2::before{background-image: url(../images/bt_2a.png);}	
.btbx a.bt_3{background-image: url(../images/bt_3.png);}
.btbx a.bt_3::before{background-image: url(../images/bt_3a.png);}

.btbx3 a.bt_4{background-image: url(../images/bt_4.png);}
.btbx3 a.bt_4::before{background-image: url(../images/bt_4a.png);}
.btbx3 a.bt_5{background-image: url(../images/bt_5.png);}
.btbx3 a.bt_5::before{background-image: url(../images/bt_5a.png);}
.btbx3 a.bt_6{background-image: url(../images/bt_6.png);}
.btbx3 a.bt_6::before{background-image: url(../images/bt_6a.png);}
.btbx3 a.bt_7{background-image: url(../images/bt_7.png);}
.btbx3 a.bt_7::before{background-image: url(../images/bt_7a.png);}	
.btbx3 a.bt_8{background-image: url(../images/bt_8.png);}
.btbx3 a.bt_8::before{background-image: url(../images/bt_8a.png);}	
.btbx3 a.bt_9{background-image: url(../images/bt_9.png);}
.btbx3 a.bt_9::before{background-image: url(../images/bt_9a.png);}		
.btbx3 a.bt_10{background-image: url(../images/bt_10.png);}
.btbx3 a.bt_10::before{background-image: url(../images/bt_10a.png);}

.btbx a.bt_11{background-image: url(../images/bt_11.png);}
.btbx a.bt_11::before{background-image: url(../images/bt_11a.png);}	
.btbx a.bt_12{background-image: url(../images/bt_12.png);}
.btbx a.bt_12::before{background-image: url(../images/bt_12a.png);}	
.btbx a.bt_13{background-image: url(../images/bt_13.png);}
.btbx a.bt_13::before{background-image: url(../images/bt_13a.png);}	
.btbx a.bt_14{background-image: url(../images/bt_14.png);}
.btbx a.bt_14::before{background-image: url(../images/bt_14a.png);}	
.btbx a.bt_15{background-image: url(../images/bt_15.png);}
.btbx a.bt_15::before{background-image: url(../images/bt_15a.png);}	
.btbx a.bt_16{background-image: url(../images/bt_16.png);}
.btbx a.bt_16::before{background-image: url(../images/bt_16a.png);}	
.btbx a.bt_17{background-image: url(../images/bt_17.png);}
.btbx a.bt_17::before{background-image: url(../images/bt_17a.png);}	

.btbx a.bt_sp1{background-image: url(../images/bt_sp_1.png);}
.btbx a.bt_sp1::before{background-image: url(../images/bt_sp_1a.png);}
.btbx a.bt_sp2{background-image: url(../images/bt_sp_2.png);}
.btbx a.bt_sp2::before{background-image: url(../images/bt_sp_2a.png);}
.btbx a.bt_sp3{background-image: url(../images/bt_sp_3.png);}
.btbx a.bt_sp3::before{background-image: url(../images/bt_sp_3a.png);}
.btbx a.bt_sp4{background-image: url(../images/bt_sp_4.png);}
.btbx a.bt_sp4::before{background-image: url(../images/bt_sp_4a.png);}
.btbx a.bt_sp5{background-image: url(../images/bt_sp_5.png);}
.btbx a.bt_sp5::before{background-image: url(../images/bt_sp_5a.png);}
.btbx a.bt_sp6{background-image: url(../images/bt_sp_6.png);}
.btbx a.bt_sp6::before{background-image: url(../images/bt_sp_6a.png);}
.btbx a.bt_sp7{background-image: url(../images/bt_sp_7.png);}
.btbx a.bt_sp7::before{background-image: url(../images/bt_sp_7a.png);}
.btbx a.bt_sp8{background-image: url(../images/bt_sp_8.png);}
.btbx a.bt_sp8::before{background-image: url(../images/bt_sp_8a.png);}

	
.btbx a.on.bt_1,.btbx a.on.bt_2,.btbx a.on.bt_3,.btbx3 a.on.bt_4,.btbx3 a.on.bt_5,
.btbx3 a.on.bt_6,.btbx3 a.on.bt_7,.btbx3 a.on.bt_8,.btbx3 a.on.bt_9,.btbx3 a.on.bt_10,
.btbx a.on.bt_11,.btbx a.on.bt_12,.btbx a.on.bt_13,.btbx a.on.bt_14,.btbx a.on.bt_15,.btbx a.on.bt_16,.btbx a.on.bt_17{background-image:none;}	

.btbx2 a.bt_ac1{background-image: url(../images/bt_ac_1.png);}
.btbx2 a.bt_ac1::before{background-image: url(../images/bt_ac_1a.png);}
.btbx2 a.bt_ac2{background-image: url(../images/bt_ac_2.png);}
.btbx2 a.bt_ac2::before{background-image: url(../images/bt_ac_2a.png);}
.btbx2 a.bt_ac3{background-image: url(../images/bt_ac_3.png);}
.btbx2 a.bt_ac3::before{background-image: url(../images/bt_ac_3a.png);}
.btbx2 a.bt_ac4{background-image: url(../images/bt_ac_4.png);}
.btbx2 a.bt_ac4::before{background-image: url(../images/bt_ac_4a.png);}
.btbx2 a.bt_ac5{background-image: url(../images/bt_ac_5.png);}
.btbx2 a.bt_ac5::before{background-image: url(../images/bt_ac_5a.png);}
.btbx2 a.bt_ac6{background-image: url(../images/bt_ac_6.png);}
.btbx2 a.bt_ac6::before{background-image: url(../images/bt_ac_6a.png);}	
.btbx2 a.bt_ac7{background-image: url(../images/bt_ac_7.png);}
.btbx2 a.bt_ac7::before{background-image: url(../images/bt_ac_7a.png);}	
/**/	
.pam > div{
	display:none;/**/
	padding:1.2% 0 0;
	}
.con{
	position:absolute;
	width:95%;
	/*height:96%;*/
	bottom:4%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 auto;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.topbx{
	position:absolute;
	width:2.5%;
	padding-bottom:2.5%;
	display:block;
	cursor: pointer;
	border-radius:99px;
	background-color:rgba(170,140,80,1);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/top.png);
	background-size:85% auto;
	right:6.25%;/*:-6.78*/
	bottom:35.5%;
	z-index:3;
	}
.hombt{
	position:absolute;
	width:2.5%;
	padding-bottom:3.5%;
	display:block;
	cursor: pointer;
	border-radius:99px;
	background-color:rgba(152,32,23,1);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/home.png);
	background-size:90% auto;
	right:6.25%;
	top:65%;
	z-index:3;
	}
/*.hombt::before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/home.png);
	background-size:90% auto;
	top:0;
	left:0;
	}*/
	
.s1a{
	position:relative;
	width:95%;
	height:11px;
	background-attachment:scroll;
	background-repeat:no-repeat,repeat-x;
	background-position:50% 50%,50% 50%;
	background-image:url(../images/sa.png),url(../images/s1.png);
	margin:0 auto;
	}	
.s1{
	position:relative;
	width:100%;
	height:15px;
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 50%;
	background-image:url(../images/s1.png);
	margin:0 auto;
	opacity:.5;
	}
.s2{
	position:relative;
	width:100%;
	height:15px;
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-position:50% 50%;
	background-image:url(../images/s1.png);
	margin:0 auto;
	opacity:.8;
	}
/**/
.h_mubx{
	position:absolute;
	width:20%;
	height:100%;
	text-align:center;
	left:0;
	top:0;/*752*/
	/**/
	transition: all 1s;
	}
.hombx.on .h_mubx{animation:slideToRight 1s;}/**/
.h_mubx li{
	position:absolute;
	width:34.5%;/*138*/
	padding-bottom:34.5%;
	display:block;
	cursor:pointer;
	}	
.h_mubx li > a{
	position:absolute;
	width:100%;
	padding-bottom:100%;
	display:block;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size:100% auto;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	filter: drop-shadow(0px 10px 25px rgba(66, 98, 133, 0));
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.h_mubx li > a::before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.h_mubx li > a:hover{
	width:115%;
	padding-bottom:115%;
	filter: drop-shadow(0px 20px 35px rgba(0, 0, 0, 1));
	z-index:1;
	}
.h_mubx li > a:hover::before{opacity:1;}
	
.h_mubx li.hm1{
	left:35.5%;/*142*/
	top:17.72%;/*179*/
	}
.h_mubx li.hm1 > a{background-image:url(../images/h_mu_1.png);}	
.h_mubx li.hm1 > a::before{background-image:url(../images/h_mu_1a.png);}
.h_mubx li.hm2{
	left:60%;/*240*/
	top:25.04%;/*253*/
	}
.h_mubx li.hm2 > a{background-image:url(../images/h_mu_2.png);}	
.h_mubx li.hm2 > a::before{background-image:url(../images/h_mu_2a.png);}
.h_mubx li.hm3{
	left:35.5%;/*142*/
	top:32.57%;/*329*/
	}
.h_mubx li.hm3 > a{background-image:url(../images/h_mu_3.png);}	
.h_mubx li.hm3 > a::before{background-image:url(../images/h_mu_3a.png);}
.h_mubx li.hm4{
	left:60%;/*240*/
	top:40%;/*404*/
	}
.h_mubx li.hm4 > a{background-image:url(../images/h_mu_4.png);}	
.h_mubx li.hm4 > a::before{background-image:url(../images/h_mu_4a.png);}
.h_mubx li.hm5{
	left:35.5%;/*142*/
	top:47.52%;/*480*/
	}
.h_mubx li.hm5 > a{background-image:url(../images/h_mu_5.png);}	
.h_mubx li.hm5 > a::before{background-image:url(../images/h_mu_5a.png);}
.h_mubx li.hm6{
	left:60%;/*240*/
	top:54.55%;/*551*/
	}
.h_mubx li.hm6 > a{background-image:url(../images/h_mu_6.png);}	
.h_mubx li.hm6 > a::before{background-image:url(../images/h_mu_6a.png);}
.h_mubx li.hm7{
	left:35.5%;/*142*/
	top:62.17%;/*628*/
	}
.h_mubx li.hm7 > a{background-image:url(../images/h_mu_7.png);}	
.h_mubx li.hm7 > a::before{background-image:url(../images/h_mu_7a.png);}
.h_mubx li.hm8{
	left:60%;/*240*/
	top:69.3%;/*700*/
	}
.h_mubx li.hm8 > a{background-image:url(../images/h_mu_8.png);}	
.h_mubx li.hm8 > a::before{background-image:url(../images/h_mu_8a.png);}

.download_bt{
	position:absolute;
	width:18%;
	display:block;
	left:38%;/*38*/
	bottom:15%;/*15*/
	filter: drop-shadow(0px 20px 35px rgba(0, 0, 0, .8));
	}
#directdownload{
	position:relative;
	width:100%;/*400*/
	padding-bottom:31.75%;/*127*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/download_bt.png);
	}
#directdownload span{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/download_bt_2.png);
	opacity:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#directdownload:hover span{opacity:1;}
.download_bt2{
	position:absolute;
	width:38%;
	display:none;
	right:33%;
	bottom:5.6%;
	filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, .5));
	/*transform:rotate(-90deg);*/
	}	
#mbdownload{
	position:relative;
	width:100%;/*92 226*/
	padding-bottom:40.7%;/*92*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/download_bt_3.png);
	}	

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

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

}
@media only screen and (max-width:1250px){
/**/
.pam{
	font-size:1.3rem;
	line-height:2rem;
	}
.pam > div{padding:1% 0 0;}

}
@media only screen and (max-width:1000px){	
/**/
.pam{
	font-size:1.25rem;
	line-height:1.8rem;
	}
	
}
@media only screen and (max-width:800px){
/**/
.play_v{
	width:11.9%;/*82*/
	padding-bottom:11.9%;/**/
	top:66%;
	right:6.2%;
	}	
/**/
.vdbx{
	width:100%;
	padding-bottom:58.4%;
	}
/**/
.pam{
	font-size:1.2rem;
	line-height:1.8rem;
	}	
	
}
@media only screen and (max-width:780px){
/**/
.logo{
	width:36.6%;/*286*/
	padding-bottom:18.55%;/*145*/
	left:-2%;
	}
.logo.on{
	width:30%;/*348 32*/
	padding-bottom:16.183%;/*176*/
	top:-.9vw;
	left:35%;/*34*/
	}
/**/
.hombx{
	padding-bottom:170.128%;/*1327*/
	background-image: url(../images/index_m.jpg);
	}
.h_t_1{background-image: none;}
.h_t_2{background-image: url(../images/h_t_2_m.png);}	
.hombx.on .h_t_2{animation:slideToRight 1s;}	 
.reserve{
	width:11.794%;/*92*/
	padding-bottom:28.972%;/*226*/
	/**/
	background-image: url(../images/reserve_1.png);
	top:64%;
	right:68%;
	}
.reserve::before{background-image: url(../images/reserve_1a.png);}
/**/
.h_bt{display:block;}
.hombx.on .h_bt::before{
	-moz-animation:rotate2 20s linear infinite;
	-webkit-animation:rotate2 20s linear infinite;
	-o-animation:rotate2 20s linear infinite;
	-ms-animation:rotate2 20s linear infinite;
	animation: rotate2 20s linear infinite;
	}
.hombx.on .h_bt::after{
	-moz-animation: rotate 25s linear infinite;
	-webkit-animation: rotate 25s linear infinite;
	-o-animation: rotate 25s linear infinite;
	-ms-animation: rotate 25s linear infinite;
	animation: rotate 25s linear infinite;
	}

.h_mubx{ display:none;}
/**/
/* 內頁 */
.incbx{
	padding-bottom:0%;/*152.5%*/
	background-image:url(../images/inbg_m_01.jpg),url(../images/inbg_m_02.jpg),url(../images/inbg_m_03.jpg);
	}	
.tcon,.dcon{display:block;}
.tit{
	width:69%;/*480 61.5 65*/
	padding-bottom:12.282%;/*85 11 11.57*/
	top:-118%;/*-103%*/
	}
.conbx{
	position:relative;
	width:100%;
	left:0%;
	top:9.9%;
	}
.cbx1{
	padding-bottom:4.487%;/*34*/
	/*background-image: url(../images/conbx_m_01.png);*/
	}
.cbx2{
	background-repeat:repeat-y;
	/*background-image: url(../images/conbx_m_02.png);*/
	}
.cbx3{
	padding-bottom:13.0769%;/*102*/
	/*background-image: url(../images/conbx_m_03.png);*/
	}
.cbx2 .bx1{padding-bottom:0;}
/**/
.pam{
	position:relative;
	height:auto;
	top:0;
	left:0;
	transform: translateX(0%);
	font-size:1.4rem;
	line-height:2rem;
	}
.pam > div{padding:2.6% 0 0;}
.s1a{
	width:95%;
	height:9px;
	background-size:auto 9px, auto 1px;
	}
.con{
	position:relative;
	height:auto;
	top:0;
	left:0;
	transform: translateX(0%);
	}
/**/
.btbx .tlf{ text-align:center; padding-left:0;}	
.btbx2,.btbxs{padding:1.5rem 0 .2rem;}
.btbx a,.btbxs a{
	width:18%;/*130 17*/
	padding-bottom:5.5384%;/*40 5.23*/
	}
.btbx2 a{
	width:21.19%;/*153*/
	padding-bottom:5.5384%;/*40*//*1392*/
	}
.btbx3 a{
	width:11.0768%;/*120 50*/
	padding-bottom:5.5384%;/*60*//*1392*/
	}
/**/
.topbx{
	position:fixed;
	width:35px;
	padding-bottom:40px;
	right:0%;
	bottom:25%;
	background-color:rgba(170,140,80,.8);
	background-position: 92% 50%;
	background-size:90% auto;
	border-radius:90px 0 0 90px;
	}	
.hombt{
	width:9.3%;
	padding-bottom:11.5%;
	border-radius:0 0 99px 99px;
	background-color:rgba(1,43,86,1);/*(191,41,29,1)*/
	background-position:50% 20%;
	background-size:90% auto;
	right:88%;
	top:0%;
	}	

/**/
.download_bt{display:none;}	
.download_bt2{display:block;}
	
}
@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:580px){
/**/	
	
}
@media only screen and (max-width:560px){
/**/
.clos_2{
	width:10%;/*50*/
	padding-bottom:14.2%;/*71*/
	}
.pam{
	font-size:1.22rem;
	line-height:1.8rem;
	}
.pam > div{padding:3.2% 0 0;}


	
}
@media only screen and (max-width:470px){
/**/
.btbx a,.btbxs a{
	width:28%;/*130 29*/
	padding-bottom:8.61538%;/*40 8.923*/
	}
.btbx2 a{
	width:30%;
	padding-bottom:7.8431%;
	}
.btbx3 span{ display: inline;}
.btbx3 a{
	width:15.6862%;/*120 50*/
	padding-bottom:7.8431%;/*60*//*1392*/
	}
	
}

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

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

/**/
@keyframes fin2 {
   0% {opacity:0;}
   30% {opacity:.8;}
   60% {opacity:.8;}
   100% {opacity:0;}
	}
@keyframes slideToRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-180px);
        transform: translateX(-180px);
    	}
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    	}
}
@keyframes slideToLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(180px);
        transform: translateX(180px);
    	}
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    	}
}
/**/
@keyframes rotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@keyframes rotate2 {
   0% {transform: rotate(360deg);}
   100% {transform: rotate(0deg);}
}
@keyframes st {
   0% { opacity:0; /*top:50px;*/}
   100% {opacity:1;/*top:0;*/}
}