/*@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap");*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; outline: none; }
ul{list-style:none;}
img{ max-width:100%; display:block;}
img[src*=".svg"] { width:100%; }
html { width:100%; height:100%; max-width:1920px; margin: 0 auto;}
body { width:100%; min-height:100%; max-width:1920px; color:#000; background-color: #e8ebee; margin:0 auto; font-size:18px; line-height:1.5; overflow-x:hidden; position:relative; font-family:'Noto Sans TC', Helvetica; }

h2{ font-size: 34px; font-weight: 500; line-height: 1.2;}
h3{ font-size: 26px; font-weight: 500;}
h4{ font-size: 21.5px; font-weight: 500;}
h5{ font-size: 20px; font-weight: 500;}

.none{ display:none !important;}
.container{ width:100%; position:relative; margin:0 auto; padding:0; z-index:3; }

#loader{ width:100%; height:100vh; top:0; left:0; bottom:0; right:0; background-color:#e8ebee; position:fixed; z-index:99999; overflow:hidden; pointer-events:none;}
#loader.loaded{ opacity:0; transition:all .5s ease-out; }

.page-index #loader{ opacity:0;}

#wrap{ width:100%; height:100%; max-width: 1920px; margin: 0 auto; overflow: hidden; }
#main{ width:100%; height:100%; }

#header{ width:100%; max-width: 1920px; position:absolute; z-index:1001; }
#header #btn-menu-toggle{ display: none; }


#nav{ position:fixed; z-index:1000; top:0px; width: 100%; max-width: 1920px; height: 65px; padding: 0px 3% 0 0; transition:all ease-in-out 0.4s; border: #000 solid 0px; display: flex; justify-content: flex-end;}
#nav .logo{ display: none;}
#nav .menu{ display: flex; text-align:center;}
#nav .menu li{ margin-left: 10px; padding-top: 10px;}
/*#nav .menu li:nth-child(3){ display: none;}*/
#nav .menu li a{ color:#000; display:block; font-weight:400; letter-spacing: 1px; font-style: italic; font-size:18px; line-height:35px; border-radius: 16px; border: transparent solid 3px; padding-right: 10px; }
#nav .menu li a span{ display: block; padding: 0px 20px 0px 10px; background-image: url("../img/ic_arr_menu.png"); background-size: 12px auto; background-position: 100% 50%; background-repeat: no-repeat;}
#nav .menu li a:active span{ position: relative; top: 1px;}
.page-index #nav .menu li a.m1{ display: none;}
.page-vote #nav .menu li a.m2,
.page-news #nav .menu li a.m4,
.desktop #nav .menu li a:hover{ background-color: #fffaa5; border:#1bb2b2 solid 3px; }
.scrolling #nav{ background-color: rgba(255,255,255,0.75); transition:all ease-in-out 0.4s;}


.sec-block{ padding:50px 0; position:relative; border-top: #000 solid 0px;}


#footer { background-color: #FFF; color:#000; }
#footer .container{ width:90%; max-width:1000px; text-align:center; padding:50px 0 20px 0;  }
#footer .flex-box{ display: flex; margin: 0 auto 30px;}
#footer .flex-box .box{  }
#footer .flex-box .box.left{ display: block; width: 20%; padding-bottom: 50px;}
#footer .flex-box .box.left .logo{ width: 95px; height: auto; user-select: none; }
#footer .flex-box .box.right{ display: flex; flex-wrap: wrap; width: 80%; text-align: left; }
#footer .flex-box .box.right .inner-box{ width: 50%; margin-bottom: 20px; padding: 0 2%;}
#footer .flex-box .box.right .inner-box h5{ color: #00a28d; border-bottom: #00a28d solid 1px; padding-bottom: 5px; margin-bottom: 10px;}
#footer .flex-box .box.right .inner-box ul{ }
#footer .flex-box .box.right .inner-box ul li{ display: flex; align-items: center; padding: 10px 0;}
#footer .flex-box .box.right .inner-box ul li span{ margin-right: 10px; }
#footer .flex-box .box.right .inner-box ul li .logo{ height: 40px; user-select: none; }
#footer .copyright{ font-size:13px; color: #999; }
#footer .copyright span{ display: inline-block; padding: 0 3px;}

#btn-gotop { display:none; position:fixed; right: 5%; bottom:55px; width:50px; height:50px; z-index:999; opacity: 1; background:#fff100 url(../img/gotop.png) 50% 50% no-repeat; background-size:100% auto; border-radius:100%; cursor:pointer; transition:opacity ease 0.2s;}
/*.desktop #btn-gotop:hover{ opacity:0.85; transition:opacity ease 0.2s; }*/




/*	RESPONSIVE:  */
@media only screen and (max-width:1080px) {
	
#header #btn-menu-toggle{ background-color: #fff100; background-image: url(../img/btn-menu-toggle.png); background-position: 50% 50%; background-repeat: no-repeat; background-size:65px auto; width:60px; height:60px; top:20px; right: 10px; position:fixed; cursor:pointer; transition:all ease-out 0.2s; border-radius: 100%; display: block;}
#header #btn-menu-toggle.active { background-color: #fff; background-image:url(../img/btn-menu-toggle_actived.png); background-size:60px auto; transition: all ease-out 0.2s;}

.has-active-menu #nav{ right: 0; transition:all ease-in-out 0.4s;}
	
#nav{ position:fixed; z-index:1000; top:0; width:400px; height:100vh; right: -100%; padding:30px 0 0 0; overflow-y:auto; background-color:#fff100; transition:all ease-in-out 0.4s; display: block;}
#nav .logo{ width:95px; height:120px; background:url(../img/logo.png) no-repeat; background-size:100% auto; margin: 0 auto 30px; display: block;}
#nav .menu{ width:90%; max-width:300px; text-align:center; display: block; margin:0 auto 50px auto;}
#nav .menu li{ margin-bottom: 10px; padding-top: 0;}
#nav .menu li a{ font-size:20px; line-height:40px; }
#nav .menu li a span{ display: inline; }
	
.scrolling #nav{ background-color: #fff100; transition:all ease-in-out 0.4s;}
	
}


/*	RESPONSIVE:  */
@media only screen and (max-width:810px) {
	
body.has-active-menu{ overflow:hidden;}
	
#header{ height:50px; }
#header #btn-menu-toggle{ background-size:50px auto; width:50px; height:50px; top:10px; }
#header #btn-menu-toggle.active { background-size:50px auto; }

#nav{ width:100%;}

.sec-block{ padding:30px 0;}
    
#footer .flex-box{ display: block; }
#footer .flex-box .box.left{ width: 100%;}
#footer .flex-box .box.right{ width: 100%; }

#btn-gotop { bottom:20px; }
    
}



/*	RESPONSIVE:  */
@media only screen and (max-width:499px) {
	
h2{ font-size: 24px; }
h3{ font-size: 22px; }
	
#nav .logo{ width:80px; height:101px; }
#nav .menu li{ }
#nav .menu li a{ letter-spacing: 0; font-size:25px; line-height:48px; padding-left:0;}
#footer .flex-box .box.left{ width: 100%;}
#footer .flex-box .box.left .logo{ width: 80px; margin: 0 auto;}	
#footer .flex-box .box.right{ display: block; width: 100%; }
#footer .flex-box .box.right .inner-box{ width: 100%; padding: 0;}
#footer .flex-box .box.right .inner-box ul{ margin-left: 10px;}
	
}