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

* {margin:0px; padding:0px;}

body, html {background:black; font-size:16px; line-height:24px; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; font-weight:400; color:#595758; max-width:100vw; overflow-x:hidden;}
a:link, a:active, a:hover, a:focus, a:visited {outline:none; cursor:pointer !important;}

.se-pre-con {position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999999; background: url(../images/loading.gif) center no-repeat #000;}

.cleardiv {clear:both;}


/*------------ header ------------*/
header {position:fixed; top:0px; left:50%; z-index:999; width:100vw; max-width:640px; height:60px; background:black; -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);}
header .hd_logo {display:block; width:120px; height:50px; margin:5px 0px 0px 5px; transition: ease 0.4s;}
header .hd_logo img {display:block; height:50px; width:auto; padding: 5px 10px; box-sizing: border-box; }

header .navcon {display:block; width:100vw; max-width:640px; height:calc(100vh - 140px); background:black; position:absolute; top:60px; right:0px; padding-bottom:80px; overflow-y:scroll;}
header .nav {display:block; display:block; width:90%; margin:auto; position:relative;}
header .nav li {display:block; width:100%; position:relative; padding:0px; height:auto;}
header .nav li a {display:block; width:90%; margin:auto; color:white; text-align:center; font-size:18px; line-height:60px; text-decoration:none;}


header .nav ul.sub {display:block; width:100%; background:none;}
header .nav ul.sub li {display:block; float:none; width:100%; height:50px;}
header .nav ul.sub li a {box-sizing:border-box; color:#e5e5e5; font-size:16px; text-align:center; text-decoration:none;}

header .nav .arrow {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    top:22px;
    right:10%;
}
header .nav .arrow span {
    top: 8px;
    position: absolute;
    width: 9px;
    height: 2px;
    background-color:white;
    display: inline-block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
header .nav .arrow span:first-of-type {
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
header .nav .arrow span:last-of-type {
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
header .nav .arrow.active span:first-of-type {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background:orangered;
}
header .nav .arrow.active span:last-of-type {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background:orangered;
}

header #mbmnu {display:block; position:absolute; right:17px; top:17px; width:30px; height:25px;}
header #mbmnu span {display:block; width:30px; height:3px; background:white;}
header #mbmnu span:first-child {position:absolute; top:2px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
header #mbmnu span:nth-child(2) {position:absolute; top:11px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
header #mbmnu span:nth-child(3) {position:absolute; top:20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

header #mbmnu.open span:first-child {top:13px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
header #mbmnu.open span:nth-child(2) {display:none;}
header #mbmnu.open span:nth-child(3) {top:13px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}

header .volume {display:block; position:absolute; top:17px; right:70px; color:white;}
header .volume span {font-size:26px;}
.on_off:nth-child(2) {
    display: none;
  }




/*------------ 全站共用 ------------*/
#center {position:relative; width:100vw; max-width:640px; /*height:100vh;*/ box-sizing:border-box; margin:auto; padding-top:60px; background:#0e0e0e;}