@charset "UTF-8";

body{ font-family:Noto Sans TC, sans-serif, "Microsoft JhengHei", "微軟正黑體";width: 100%;height: 100%;line-height: 1.8rem;text-align: left;color: #142862;font-size:1.05rem;min-width: 1300px;letter-spacing: 1px;font-weight:200;}
html{width: 100%;height: 100%;}
.bg,nav,.socialbtn a,.title div,.title{background-repeat: no-repeat;background-position:center top;background-size: contain;}
.on{display: block!important;}

/* mask */
.mask{width: 100%;height: 100%;position:fixed;z-index: 60;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.7);display: none;}
.close{width: 50px;height: 50px;position: relative;float: right;top:.5rem;right:2.3rem;cursor: pointer;background-image: url("../img/closebg.png");display: none;z-index: 2;}
.close div{width: 50px;height: 50px;transition:transform 0.5s;background-image: url("../img/close.png");padding:5px;background-repeat: no-repeat;background-position: center;}
.close:hover div{transform:rotate(90deg);}
/*mask youtube*/
.mask>.box3{width: 820px;height: 560px;margin: 9% auto auto;}
.mask>.box3 iframe{width:820px;height:510px;margin:auto;display: block;}
.mask .box3 .close {top: 0rem;right: 0rem;display: block;}

/* wrapper */
#wrapper{width: 100%;height:100%;margin: auto;background-size:cover;background-position: center top;background-repeat: no-repeat;overflow: hidden;position: relative;min-height: 900px;}
.indexbg{background-image: url("../img/bg.jpg");transition: all 2s;}
.page1bg{background-image: url("../img/pagebg1.jpg");transition: all 2s;}
.page2bg{background-image: url("../img/pagebg2.jpg");transition: all 2s;}

/* logo sound*/
.leftbox{width: 400px;height: 100%;float: left;}
.logo{width: 320px;height: 130px;background-image: url("../img/logo.png");cursor: pointer;float: left;}
.sound{width: 50px;height: 50px;background-repeat: no-repeat;background-position:center;background-size: contain;cursor: pointer;float: left;margin-top: 20px;display: none;}
.sound_on{background-image: url("../img/sound.png");}
.sound_off{background-image: url("../img/sound-.png");}

nav{width: 370px;height: 730px;background-image: url("../img/menubg.png");margin-top: 130px;}nav a{display: block;}

/* account nav*/
.account{width: 105px;height: 55px;background-image: url("../img/signup.png");margin-top: 310px; display: inline-block;position: absolute;z-index:51 ;}
.account div{width: 105px;height: 55px;background-image: url("../img/signup-.png");position: absolute;animation: slogan 1s linear infinite alternate;}
.account:hover{background-image: url("../img/signup-.png");}
.download{width: 105px;height: 55px;background-image: url("../img/download.png");z-index:51 ;position: absolute;margin-top: 370px;}
.download:hover{background-image: url("../img/download-.png");}

ul.menu{position: absolute;margin-top:95px;z-index:50;}
ul.menu li{width:185px;height: 35px;margin: 38px 0;transition: all 0.5s;}
ul.menu li:hover{transition: all 0.5s;}
ul.menu li a{width:100%;height:100%;display: block;}
ul.menu li:nth-child(1) {background-image: url("../img/m01.png");margin-left: 15px;}
ul.menu li:nth-child(2) {background-image: url("../img/m02.png");margin-left: 70px;}
ul.menu li:nth-child(5):after {width: 8px;height: 8px;border-radius: 50%;background-color: #0066cc;content: "";position: relative;margin-top: -8px;display: block;filter: drop-shadow(1px 1px 2px rgba(0, 102, 204, 1));margin-top: -20px;margin-left: 158px;animation: show1 2s infinite;}
ul.menu li:nth-child(3) {background-image: url("../img/m03.png");margin-left: 105px;}
ul.menu li:nth-child(4) {background-image: url("../img/m04.png");margin-left: 105px;}
ul.menu li:nth-child(5) {background-image: url("../img/m05.png");margin-left: 85px;}
ul.menu li:nth-child(6) {background-image: url("../img/m06.png");margin-left: 45px;}
ul.menu li:nth-child(1):hover,
ul.menu li:nth-child(1).on{background-image: url("../img/m01-.png");}
ul.menu li:nth-child(2):hover,
ul.menu li:nth-child(2).on{background-image: url("../img/m02-.png");}
ul.menu li:nth-child(3):hover,
ul.menu li:nth-child(3).on{background-image: url("../img/m03-.png");}
ul.menu li:nth-child(4):hover,
ul.menu li:nth-child(4).on{background-image: url("../img/m04-.png");}
ul.menu li:nth-child(5):hover,
ul.menu li:nth-child(5).on{background-image: url("../img/m05-.png");}
ul.menu li:nth-child(6):hover,
ul.menu li:nth-child(6).on{background-image: url("../img/m06-.png");}

/* canvas */
canvas{ display: block; vertical-align: bottom;min-width: 1200px; } 
#particles-js{ position:absolute; width: 100%; height: 100%;z-index: 50;pointer-events: none; } 

/* slogan */
.slogan{width:550px; height: 475px;background-image: url("../img/slogan.png");margin-top: 390px;background-size: 100% auto;background-repeat: no-repeat;margin-left: 120px;position: absolute;left: 50%;}
/* film */
.film{width: 145px;height: 150px;background-image: url("../img/film.png");margin-left: 370px;margin-top: 190px;cursor: pointer;}
.film div{width: 145px;height: 150px;background-image: url("../img/film-border.png");animation: spin 2s linear infinite;}
.film iframe{border-radius: 50%;position: absolute;bottom: 0;}
/* play */
.film:before{width: 25px;height: 30px;background-image: url("../img/play.png");content: "";position: absolute;z-index: 5;margin-left: 60px;margin-top: 60px;animation: play 2s linear infinite;}

/* page */
/* loader */
.loader{width:1300px;height: 100%;min-height: 900px;}
.loaderbox,.sloganbox{width: 750px;height: auto;float: right;display: none;}

/* animation */
.movetop{opacity: 0;animation: movetop .5s .3s linear forwards;}
.toright{opacity: 0;animation: toright .5s linear forwards;}
.show1{opacity: 0;animation: show1 .8s linear forwards;}
.delay1{animation-delay: .5s;}
.delay2{animation-delay: 1s;}

/* footer */
.footer{width: 100%;height:auto;margin: auto;background-color: black;position: absolute;bottom: 0;min-width: 1200px;}
.footer .copyrights{width: 60%;margin:.5% .5% 0;display: inline-block;}
.footer .copyrights img:nth-child(1){width: 15%;height: 100%;float: left;margin-right: 1%;display: inline-block;}
.footer .copyrights img:nth-child(2){width: 11%;height: 100%;float: left;margin-right: 3%;display: inline-block}
.footer .copyrights .icon15{width: 3%;height:auto;float: right;display: inline-block;margin-left: .5%;}
.word{font-size: .5rem;width: 62%;float: left;display: inline-block;line-height: 1rem;}
.company{color: #c1c1c1;display: block;}
.limited{color:#dcd8d0;display: block;}

/* socialbtn */
.socialbtn{float: right;width: 18%;margin-top: .5%;margin-right: .5%;}
.socialbtn a{width:16%; height: 0;padding-bottom: 14%;display: block;float: right;}
.gamer{background-image: url("../img/gamer.png");}
.gamebase{background-image: url("../img/gamebase.png");}
.fb{background-image: url("../img/fb.png");}
.fbs{background-image: url("../img/fbs.png");}
.gamer:hover{background-image: url("../img/gamer-.png");}
.gamebase:hover{background-image: url("../img/gamebase-.png");}
.fb:hover{background-image: url("../img/fb-.png");}
.fbs:hover{background-image: url("../img/fbs-.png");}


@keyframes slogan{ 
    0% { opacity: 0;}
    100% { opacity: 1;}   
}
@keyframes spin{ 
    100% {  transform:rotate(360deg); }   
}
@keyframes play{ 
    0% { transform: scale(1);}
    50% { transform: scale(1.3);filter: drop-shadow(0 0 8px #0e394d);}   
    100% { transform: scale(1);}   
}
@keyframes movetop{
    0%{opacity: 0;transform: translate3d(0,30px,0);}
    100%{opacity: 1;transform: translate3d(0,0,0);}
}
@keyframes show1{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes toright{
    0%{opacity: 0;transform: translate3d(-100px,0,0);}
    100%{opacity: 1;transform: translate3d(0,0,0);}
}
@keyframes arrow-{
    0% {transform: translateX(20px);}
    100% {transform: translateX(0);}
}
@keyframes -arrow{
    0% {transform: translateX(-20px);}
    100% {transform: translateX(0);}
}

@media screen and (max-width:1400px){
    .section1,.section2,.section3,.section4{width: 80%;padding:13% 4% 5%;}
    .footer .copyrights{width: 80%;}
    .footer .copyrights img:nth-child(2) {width: 11%;margin-right: 1%;}
    .word {width: 68%;}
    .socialbtn a {width: 22%;padding-bottom: 23%;}
    .mask>.box{width:50%;}
}

@media screen and (max-width:960px){
    .mask>.box{width:68%;}
    
    
}