﻿@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{/*background-color:#000;*/}

/*版宣*/
footer{
	position:relative;/*fixed*/
	width:100%;
	padding:.8rem 2.5rem .6rem;/*.8rem 2.5rem .6rem*/
	font-size:1rem;
	line-height:1.5rem;
	color:#fff;
	background-color:#000;
	overflow:hidden;
	z-index:1;
	}
.fcc{position:relative;width:1400px;/*71%*//*float:right;*/margin:0 auto;}

footer span.tf1 > div{
	position:relative;
	}
footer  span.tf1 > div span{display:block;}
footer  span.tf1 > div span.cok{
	/*display:block;*/
	color:#cdcdcd;
	font-weight:300;
	line-height:1.3rem;
	}
footer span.tf1,footer > img{
	position:relative;
	display:inline-block;
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
footer > img{height:45px;}
footer span.tf1{ padding:.6rem 0 0; }
footer .a15{height:43px;float:right;top:2px;margin-left:5.5px;}	
footer img{}
/**/
.menut{
	position:fixed;
 	width:55px;
 	height:55px;
	display:none;
	z-index:5;
	top:0;
	right:0;
	}
.menu-trigger{
	position:absolute;
 	width:100%;
 	height:100%;
 	cursor:pointer;
 	flex-direction:column;
 	display:flex;
 	align-items:center;
 	justify-content:center;
	top:0;
	left:0;
 	} 
.menu-trigger>.line{
	width:50%;
 	height:3px;
 	border-radius:5px;
 	background-color:#f2deae; 
 	transition: all .3s;
 	-moz-transition: all .3s;
 	-webkit-transition: all .3s;
 	-o-transition: all .3s;
 	}
.menu-trigger>.line:first-child{margin-bottom:8.77%;}
.menu-trigger>.line:last-child{margin-top:8.77%;}
.allmu.on .menu-trigger >.line{opacity:0;transform:rotate(45deg)}
.allmu.on .menu-trigger >.line:first-child{
 	opacity:1;
 	margin-bottom:-3.5%;
 	transform:rotate(-45deg);
 	}
.allmu.on .menu-trigger >.line:last-child{opacity:1;margin-top:-7.01%;}
/**/
.m_logo{
	position:relative;
	width:370px;
	padding-bottom:210px;
	margin:1rem auto 0;
	display:none;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/logo.png);
	background-size:100% auto;
	}
/**/
.allmu{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	z-index:10;
	}
.amubx{
	position:absolute;
	width:100%;
	/*height:0;*/
	top:0;
	left:0;
	}
.f_bt,.f_bt2{
	position:absolute;
	width:2.25%;/*45*/
	padding-bottom:2.25%;/**/
	margin:0 .5%;
	display:inline-block;
	cursor:pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	transition: all .5s;
	background-size:100% auto;
	top:0.65vw;/*13*/
	}
.f_bt{background-image:url(../images/f_bt.png);right:3%;}
.f_bt2{background-image: url(../images/f_bt2.png);right:.3%;}
	
.t_mu{
	position:absolute;
	width:2.7%;/*54*/
	padding-bottom:25.6%;/*512*/
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/t_mubg.png);
	background-size:100% auto;
	top:8.45vw;/*169*/
	left:2.9%;/*58*/
	/*
	transition: all .5s;*/
	}
.t_mu div{
	position:absolute;
	width:100%;
	top:16.4%;/*84*/
	left:0;
	}
.t_mu a{
	position:relative;
	display:inline-block;
	cursor:pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	transition: all .5s;
	}
.t_m1,.t_m2,.t_m3{
	width:100%;/*54*/
	margin:-2px 0;/**/
	}
.t_m1 span{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:100% 60%;	
	}
.t_m1{
	padding-bottom:205.5%;/*111*/
	background-image: url(../images/t_mu1.png);}
/*.t_m1 > span,.t_m2 > span{background-image: url(../images/m_s1.png);}*/
.t_m2{
	padding-bottom:211.1%;/*114*/
	background-image: url(../images/t_mu2.png);
	}
.t_m3{
	padding-bottom:216.6%;/*117*/
	background-image: url(../images/t_mu3.png);
	}
.allmu.inm .t_mu{
	background-image: url(../images/t_mubg2.png);
	top:6vw;/*11.25*/
	left:91.2%;/*93.2*/
	filter: drop-shadow(0px 15px 20px rgba(34, 43, 63, .3));
	}

.allmu.inm .imubx{
	/*display:block;*/
	left:2.45%;
	opacity:1;
	}
.imubx{
	position:absolute;
	width:7.15%;/*143*/
	padding-bottom:28.3%;/*566*/
	/*display:none;*/
	opacity:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	/*background-image: url(../images/imu.png);*/
	top:6.55vw;/*125*/
	left:-10%;/*49*/
	filter: drop-shadow(0px 15px 20px rgba(34, 43, 63, .3));
	/**/
	transition:all 1s;
	}
.imubx::before{
	position:absolute;
	width:106.99%;/*153*/
	height:100%;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	background-image: url(../images/im2.png);
	top:0;
	left:50%;
	transform:translateX(-50%);
	}
		
.imubx::after{
	position:absolute;
	width:100%;
	height:100%;
	content:'';
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	background-image: url(../images/im1.png);
	top:0;
	left:0;
	}
.imubx ul{
	position:absolute;
	width:90.9%;
	top:12.7%;
	left:4.89%;
	z-index:1;
	}
.imubx ul li{
	position:relative;
	width:100%;
	padding-bottom:30.769%;/*40*/
	cursor: pointer;
	margin-bottom:3.5%;
	/*background-color:#3F0;*/
	}
.imubx ul li a{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	top:0;
	left:0;
	opacity:.55;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:auto 90%;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.imubx ul li:hover a{opacity:1;}
.imubx ul li:nth-child(1) a{background-image: url(../images/im_1.png);}
.imubx ul li:nth-child(2) a{background-image: url(../images/im_2.png);}
.imubx ul li:nth-child(3) a{background-image: url(../images/im_3.png);}
.imubx ul li:nth-child(4) a{background-image: url(../images/im_4.png);}
.imubx ul li:nth-child(5) a{background-image: url(../images/im_5.png);}
.imubx ul li:nth-child(6) a{background-image: url(../images/im_6.png);}
.imubx ul li:nth-child(7) a{background-image: url(../images/im_7.png);}
.imubx ul li:nth-child(8) a{background-image: url(../images/im_8.png);}
.imubx ul li:nth-child(9) a{background-image: url(../images/im_9.png);}
.imubx ul li:nth-child(10) a{background-image: url(../images/im_10.png);}
.imubx ul li::before{
	content:'';
	position:absolute;
	width:0%;
	height:100%;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:auto 100%;
	background-image: url(../images/im_on.png);
	top:0;
	left:-15.5%;/*.5*/
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.imubx ul li.on a{opacity:1;}
.imubx ul li.on::before{width:130%;/*113*/filter: drop-shadow(0px 15px 20px rgba(34, 43, 63, .8));}
.imubx ul li::after{
	content:'';
	position:absolute;
	width:84.6%;
	padding-bottom:1.5381%;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/ims.png);
	bottom:-10.6%;
	left:50%;
	transform:translateX(-50%);
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.imubx ul li:last-of-type::after{background-image:none}


@media only screen and (max-width:1600px){
	/**/

	}
@media only screen and (max-width:1400px){
/**/
.fcc{width:100%;
}
@media only screen and (max-width:1000px){	
/**/



/*版宣*/
/*.fcc{width:78%;}*/
footer span.tf1 > div span.cok{
	display:block;
	padding-left:0;
	}
footer span.tf1{ height:auto;}
	
	
}
@media only screen and (max-width:800px){
/**/

/*版宣*/
footer{padding:.8rem 1rem .6rem; text-align:center;}
footer span.tf1,footer > span.tf1 > div{height:auto;}
footer span.tf1,footer > img{
	/*display:block;
	height:auto;*/
	}
footer img{height:40px;}	
footer .a15{top:0;height:40px;float:none;}		
}
/**/
@media only screen and (max-width:780px){
/**/
.fcc{width:100%;float:none;}
/**/
.allmu{position:fixed; text-align:center;}
.menut{display:block;}
.amubx{overflow:auto;}
.allmu.on .amubx{
	height:100vh;
	background-color:rgba(25,30,39,.98);
	}
.allmu.on .m_logo{
	width:50%;/*348*/
	padding-bottom:25.287%;/*176*/
	display:block;
	}
.f_bt,.f_bt2{
	position:relative;
	width:10.25%;
	padding-bottom:10.25%;
	display:none;
	margin:0 1%;
	top:0;
	}
.allmu.on .f_bt,.allmu.on .f_bt2{display:inline-block;}
.f_bt{right:0;}
.f_bt2{right:0;}
.t_mu,.allmu.inm .t_mu{
	position:relative;
	width:100%;
	display:none;
	background-image:none;
	padding:.5% 0 .5% 0;
	text-align:center;
	top:-.5%;
	left:0;
	}
.t_mu div{
	position:relative;
	top:0;
	}
.t_mu span{}
.t_m1 > span{background-image: url(../images/m_s1.png);}
.allmu.on .t_mu{display:block;}
.t_mu span{display:block;}
.t_m1,.t_m2,.t_m3{
	width:32%;/*94 251*/
	padding-bottom:10.19%;
	margin:0 -2px;
	}
.t_m1{background-image: url(../images/t_m1.png);}
.t_m3{background-image: url(../images/t_m3.png);}
.t_m1 > span{background-size:1px 45%;}	
a.t_m2{display:none;}

/**/
.imubx,.allmu.inm .imubx{
	position: relative;
	width: 90%;
	padding: 15px 0;
	display: none;
	/*background-color:rgba(18,22,30,.5);*/
	background-repeat: no-repeat;
	background-position: 0% 0%,100% 0%,100% 100%,0% 100%;
	background-size:5px 5px,5px 5px,5px 5px,5px 5px;
	background-image:url(../images/mbb.png),url(../images/mbb.png),url(../images/mbb.png),url(../images/mbb.png);
	top: 0;
	left: 0;
	margin: 10px auto 8%;
	border: 1px solid #2f3848;
	}
.allmu.on .imubx{display:block;opacity:1;}
.imubx::before{display:none;}
.imubx::after{display:none;}
.imubx ul{
	position:relative;
	width:90%;
	top:0;
	left:0;
	margin:0 auto;
	}
.imubx ul li{
	padding-bottom:11%;
	margin-bottom:3.5%;
	}
.imubx ul li::before{
	content:'';
	position:absolute;
	width:0%;
	height:100%;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:100% 100%;
	background-image: url(../images/im_on2.png);
	top:0;
	left:0;
	border-radius:10px;
	}
.imubx ul li.on::before{width:100%;}
.imubx ul li::after{
	width:100%;
	padding-bottom:2px;
	background-size:100% 2px;
	background-image: url(../images/ims2.png);
	bottom:-6px;
	}
.imubx ul li a{
	opacity:.5;
	background-size:auto 100%;
	}
}
@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:580px){
/*版宣*/	
footer  span.tf1 > div{text-align:left;}
footer span.tf1{padding-top:.3rem;}
footer span.tf1 > div span.cok{
	padding-top:.3rem;
	line-height:1.5rem;
	}
footer  img{height:35px;}	
footer .a15{height:35px;}		
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:470px){
/**/
.t_m1,.t_m2,.t_m3{
	width:35%;/*251*/
	padding-bottom:11.155%;/*80*/
	}
.t_m1 > span{background-size:1px 50%;}
.f_bt,.f_bt2{
	width:13%;
	padding-bottom:13%;
	margin:0 2%;
	}
	
	
}

@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
}

