@charset "utf-8";
/* CSS Document */
    .pc{display: block;}
    .mobile{display: none;}

    /*loading===============*/
        .loading{}
            .loadingloading{
                background:url(../img/common/bg_lightblueCarben.png) repeat;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                position: fixed;
                text-align:center;
                z-index: 200;}
            .loading_logo{    
                width: 500px;
                height: 117px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -250px;
                margin-top: -121px;}
            .loading_bar{
                height: 98px;
                width: 567px;
                background: url(../img/common/loadingbg.png) no-repeat scroll left top rgba(0, 0, 0, 0);
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -283px;
                margin-top: -49px;}
            .loader{
                width:1%;
                height:98px;
                background:url(../img/common/loading.png) no-repeat left top;}
            .load_status{
                width: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -51px;
                margin-top: 36px;
                color: #fff;
                font-family: Arial;
                font-size: 17px;
                text-align: center;}
            .temp{
                width:4px;
                height:4px;
                overflow:hidden;
                position: absolute;
                left:-50%;
                top:-50%;}
            .temp img{
                width:4px;
                height:4px;}


 /*nav===============*/
.unibtn {
 transition:all .2s;
 -webkit-transition:all .2s;
 cursor:pointer;	
}
.unibtn:hover {
 transition:all .3s ease-in-out;
 -webkit-transition:all .3s ease-in-out;	
}

.unibtn[class~=scale]:hover {
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
}
.unibtn[class~=zsmall]:hover {
transform:scale(.9,.9);
-webkit-transform:scale(.9,.9);
}
.unibtn[class~=down]:hover {
transform:translateY(8px);
-webkit-transform:translateY(8px);
}
.unibtn[class~=up]:hover {
transform:translateY(-8px);
-webkit-transform:translateY(-8px);
}
.unibtn[class~=right]:hover {
transform:translateX(8px);
-webkit-transform:translateX(8px);
}



    /*nav===============*/
	.nav .navbg {	 
	  background-color:rgba(0,0,0,.8);
	   background-color:#000000\9;
	  xbackground: url("../imgok/navbg.png") repeat-x; /* For browsers that do not support gradients */
      xbackground: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
      xbackground: -o-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
      xbackground: -moz-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
      xbackground: linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0)); /* Standard syntax */
	  position:fixed;
	  top:0px;
	  left:0px;
	  width:100%;
	  height:92px;
	  display:none;
	}
	.nav .navbg[class~=on] {
	  	display:block;
	}
	
	
    .nav {position: fixed; top: 0; left: 0; width: 100%;}
    .nav .logo{position: absolute; top: 25px; left: 34px;}

    .nav ul{position: absolute; top: 0; right: 34px; list-style: none;height:92px}
    .nav ul li{float: right;margin-left:10px;height:92px}
    .nav ul li a{display: block; padding:37px 15px 25px; color: #fff; font-size: 13px; font-family: "微軟正黑體"; cursor: pointer;}
    .nav ul li a:hover{background-color:#e4007f; color: #fff !important;height:31px}
    .nav ul li a.on{background-color:#e4007f; cursor: default; color: #fff !important;height:31px;}

    .nav ul .product{position: relative;}
    .nav ul .product ul{display: none; margin: 0; position: absolute; top:92px; left:0; width: 100%;}
    .nav ul .product ul li a{display: inline-block;}
    .nav ul .product:hover ul{display: block;}
    .nav ul .product:hover .menu{background-color:#e4007f;color: #fff !important;height:31px}
    .nav ul .product:hover ul li{float: left;margin: 0;}
    .nav ul .product:hover ul a{text-align: center; line-height:1.5;background-color: #000;color: #fff !important;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #e4007f;
        border-top: 0;
        padding: 20px 14px 20px;
		height:92px;
        cursor: pointer;}
    .nav ul .product:hover ul a:hover{background-color: #e4007f;}
    .nav ul .product:hover ul a.on{background-color: #e4007f;}

    .nav ul .event a,.nav ul .nopen a{ position: relative;}
    .nav ul .event a:after,.nav ul .nopen a:after{ display: none;}
    .nav ul .xevent:hover a:after,.nav ul .nopen:hover a:after{
        display: block;
        content: "尚未開放";
        color: #fff; 
        font-size: 13px; 
        font-family: "微軟正黑體";
        line-height: 13px;
        position: absolute;
        left: 0px;
        bottom: -27px;
        padding:5px 15px 8px; 
        background-color:#e4007f;
        width: 52px;
    }
    

    /*pre-index===============*/
    .pre-index{
        background: url(../imgok/index/bg.jpg) no-repeat right 30%;
        background-size: cover;
        min-height:650px;
        position: relative;}
    /*
    .pre-index .title{
        position: absolute;
        left: 46%;
        top: 50%;}

    .pre-index .title .text{
        width: 100%;}

    .pre-index .countdown{
        width: 326px;
        height: 112px;
        background: url(../img/pre-index/bg-countdown.png) no-repeat 0 0;
        position: absolute;
        right: 26px;
        bottom: 60px;
    }
    .pre-index .countdown .numbers{
        position: absolute;
        right: 0;
        top: 0;
    }
	*/
	.pre-index .wlogo {
	  position:absolute;
	  left:0px;
	  bottom:0px;
	  margin:20px;
	}
	.pre-index .titlebox {
	  width:340px;
	  height:320px;
	  position:absolute;
	  left:100px;/*14%*/
	  top:100px;	
	}


	.pre-index .titleb {
	  position:absolute;
	  right:0px;
	  bottom:-5%;
	  width:80%;
	}	
	
	.pre-index .item {
	  position:absolute;
	  left:80px;
	  bottom:10%;
	}	

   .pre-index .sd {
	  position:absolute;
	  right:50%;
	  bottom:10px;
	  margin-left:-25px;
	}	
	

    /*film===============*/
    .film{
        display: block;
        background: url(../img/film/bg.jpg) no-repeat center top;
        background-size: cover;
        background-attachment: fixed;
        min-height:200px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .film .mask{
        width: 100%;
        height: 200px;
        background: url(../img/film/mask.png) repeat;
    }
    .film .pro{
        position: absolute;
        left: 50%;
        top: -126px;
        margin-left: 104px;
    }

    .film .player{
        position: absolute;
        left: 50%;
        top: 56px;
        margin-left:-309.5px;
        opacity: 0.6;
    }
    .film:hover .player{
        opacity: 1;
    }

    /*product-welcome===============*/
    .product-welcome{
        background: url(../img/product-welcome/bg.jpg) no-repeat center top;
        background-size: cover;
        min-height:650px;
        position: relative;
    }

    .product-welcome .title{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -217.5px;
        margin-top: -7.5px;
        width: 429px;
    }

    .product-welcome .indicate{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -24px;
        margin-top: 71px;
    }

    .product-welcome .btn1{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left:-184px;
        margin-top:83px;
        background: url(../img/product-welcome/btns.png) no-repeat 0 0;
        width: 150px;
        height: 21px;
        cursor: pointer;
    }
    .product-welcome .btn1:hover{
        background-position: 0 -35px;
    }

    .product-welcome .btn2{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left:30px;
        margin-top:83px;
        background: url(../img/product-welcome/btns.png) no-repeat -210px 0;
        width: 151px;
        height: 21px;
        cursor: pointer;
    }
    .product-welcome .btn2:hover{
        background-position: -210px -35px;
    }

    /*product01===============*/
    .product01{
        background: url(../img/product01/bg.png) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        min-height:650px;
        position: relative;
    }

    .product01 .pro01{
        position: absolute;
        right:50%;
        top: 50%;
        margin-right: 27px;
        margin-top: 0px;
    }

    .product01 .title{
        position: absolute;
        left:50%;
        top: 50%;
        margin-left: -120px;
        margin-top: 0px;
    }

    .product01 .cons1{
        position: absolute;
        left:50%;
        top: 50%;
        margin-left: 0px;
        margin-top: 0px;
        opacity: 1;
    }

    .product01 .cons1 .pager{
        display: block;
        width: 18px;
        height: 32px;
        position: absolute;
        left:422px;
        top: 45px;
        background: url(../img/product01/slide-pager.png) no-repeat 0 0;
        cursor: pointer;
    }
    .product01 .cons1 .pager:hover{
        background-position: 0 -32px;
    }

    .product01 .cons2{
        position: absolute;
        left:50%;
        top: 50%;
        margin-left: 0px;
        margin-top: 0px;
        opacity: 0;
    }

    .product01 .cons2 .pager{
        display: block;
        width: 18px;
        height: 32px;
        position: absolute;
        left:452px;
        top: 46px;
        background: url(../img/product01/slide-pager.png) no-repeat 0 0;
        cursor: pointer;
    }
    .product01 .cons2 .pager:hover{
        background-position: 0 -32px;
    }

    .product01 .more{
        width: 170px;
        height: 35px;
        display: block;
        position: absolute;
        left:50%;
        top: 50%;
        background: url(../img/common/morebtn.jpg) no-repeat 0 0;
        margin-left: 270px;
        margin-top: 0px;
        cursor: pointer;
    }
    .product01 .more:hover{
        background-position: 0 -35px;
    }

    /*product02===============*/
    .product02{
        background: url(../img/product02/bg.png) no-repeat center 28%;
        background-size: cover;
        min-height:650px;
        position: relative;
        background-attachment: fixed;
    }

    .product02 .pro02{
        position: absolute;
        left:50%;
        top: 50%;
        margin-left: -495px;
        margin-top: 0px;
    }

    .product02 .title{
        position: absolute;
        left:50%;
        top: 50%;
        margin-left: -358px;
        margin-top: 0px;
    }

    .product02 .more{
        width: 170px;
        height: 35px;
        display: block;
        position: absolute;
        left:50%;
        top: 50%;
        background: url(../img/common/morebtn.jpg) no-repeat 0 0;
        margin-left: -333px;
        margin-top: 0;
        cursor: pointer;
    }
    .product02 .more:hover{
        background-position: 0 -35px;
    }

    /*filmpop===============*/
    .filmpop{
        display: none;
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        background: url(../img/film/bg-popup.png) repeat;
    }
    .filmpop .youtubeF{
        position: absolute;
        left:50%;
        top:50%;
        width: 770px;
        height: 434px;
        margin-left: -385px;
        margin-top: -217px;
        border-top:2px solid #e4007f;
        background-color: #000;
    }
    .filmpop .youtubeF .youtubefilm{
        width: 100%;
        height: 100%;
    }
    .filmpop .youtubeF .youtubefilm iframe{
        width: 100%;
        height: 100%;
    }
    .filmpop .youtubeF .closer{
        position: absolute;
        right:0;
        top:-41px;
        width: 35px;
        height: 35px;
        background: url(../img/film/closer-popup.png) repeat 0 0;
        cursor: pointer;
    }
    .filmpop .youtubeF .closer:hover{
        background-position: 0 -35px;
    }

/*rule*/
#rule {
position:relative;	
width:100%;
min-height:100%;
background-image:url(../imgok/rulebg.jpg);
background-size:cover;
background-position:top center;
background-attachment:fixed;
text-align:center;
padding:150px auto 50px auto;
}
#rule .rulecont {
 margin:auto;
 display:block;
 max-width:1175px;
 width:100%;
 border:1px solid #E5007F;
 background-color:#000000;
}
#rule[class~=wlist] .rulecont {
min-height:600px;	
overflow:visible;
}

#rule .rulecont img {
width:100%;	
}

#rule .rulecont img.nofull {
width:auto;	
}


#rule .rulecont img.rcbtn {
width:49%;	
display:inline-block;
cursor:pointer;
}

.nscroll {
display:none;
}
.nscroll[class~=pcshow]{
display:block;
}





/*pc uni inbox*/
.wh .inbox {
position:absolute;
top:90px;
width:100%;
border:0px solid #ff0000;
}


/*pop box*/
.popbox {
position:absolute;	
width:100%;
height:100%;
left:0px;
top:0px;
z-index:100;
font-family:chaparral-pro,Lucida Grande,Verdana,Tahoma,Georgia,"MHei","微軟正黑體","Microsoft JhengHei","Heiti TC";
}

.popbox .unibg {
position:absolute;		
background:rgba(0,0,0,.8); 
width:100%;
height:100%;
left:0px;
top:0px;	
}

.popbox  .closer{
	position: absolute;
	right:0;
	top:-41px;
	width: 35px;
	height: 35px;
	background: url(../img/film/closer-popup.png) repeat 0 0;
	cursor: pointer;
	z-index:10
}
.popbox .closer:hover{
	background-position: 0 -35px;
}



/*mobile*/
.mrule {
background:#000000;
}
.mrule .img {
width:100%;
display:table;
}

.mrule img.nofull {
width:60%;
margin:auto;
display:table;
}

@media (max-width: 1350px) {
  .pre-index .titlebox{
	width:25%;
	left:80px;
  }	
		
 .pre-index .titlebox img{
	width:100%; 
  }	
  
 .pre-index .item {
	width:25%;
	left:3%;
	bottom:50px; 
  }  
	
}





/*Media Query smaller then 320-----------------------------------------------------*/
@media (max-width: 350px) {
}


/*Media Query smaller then 480-----------------------------------------------------*/
@media (min-width: 351px) and (max-width: 480px) {
    .mfilmpop .myoutubeF .myoutubefilm{
        width: 100%;
        height: 100%;
    }
}

/*Media Query smaller then 767-----------------------------------------------------*/
@media (max-width: 768px) {
    .pc{display: none}
    .nscroll[class~=pcshow]{
     display:none;
    }	
	
    .mobile{display: block;}
    
    .mpage{position: relative; width: 100%; overflow: hidden;}
    .mpage img{width: 100%;}

    .mpage .mplayer,
    .mpage .welcomeP1,
    .mpage .welcomeP2,
    .mpage .P1more,
    .mpage .P2more{
        position: absolute;
        cursor: pointer;
        display: block;
    }

    .mpage .mplayer,
    .mpage .P1more,
    .mpage .P2more{
        width: 100%;
		border:#ffffff 0px solid;
    }

    .mpage .welcomeP1,
    .mpage .welcomeP2{
        width: 50%;
		border:#ffffff 0px solid;
    }

    .mpage .welcomeP1{left: 0;}
    .mpage .welcomeP2{left: 50%;}

    .mpage .mplayer{height: 6%; top: 20.5%;}
    .mpage .welcomeP1{height: 20.5%; top: 26.5%;}
    .mpage .welcomeP2{height: 20.5%; top: 26.5%;}
    .mpage .P1more{height: 2%; top: 65%;}
    .mpage .P2more{height: 2%; top: 84.5%;border:#000000 0px solid;}

    .mnumbers{
        position: absolute;
        width: 18.3% !important;
        left: 56.5%;
        top: 16.75%;
		border:#ffffff 0px solid;
    }
	.msignup{
        position: absolute;
        width: 36% !important;
		height:1.5%;
        left: 50%;
        top: 18.9%;
		border:#ffffff 0px solid;
		display:block;
		transform:translateX(-110%);
		cursor:pointer;
    }
	
	.mvote{
        position: absolute;
        width: 36% !important;
		height:1.5%;
        left: 25%;
        top: 18.9%;
		border:#ffffff 0px solid;
		display:block;
		transform:translateX(10%);
		cursor:pointer;
    }
	
	
	
	
    
    .mlogo{
        display: block;
        width: 38.5px;
        height: 41px;
        background: url(../img/mobile/logo.png) no-repeat 0 0;
        background-size:100%;
        position: fixed;
        left: 10px;
        top: 10px;
    }
    .mlogo.on{
        background-position: 0 100%;
    }
    .mnavmain{
        width: 48px;
        position: fixed;
        right: 0;
        top: 0;
    }
    .mnavmain img{
        width: 100%;
    }

    .mnavmain .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#e4007f;}
    .mnavmain .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}

    .mnavmenus{
        width: 100%;
        position: fixed;
        top: -501px;
        left: 0;
    }
    .mnavmenus a{
        display: block;
        width: 94%;
        font-size: 20px;
        line-height: 48px;
        background-color: #e4007f;
        font-family: "微軟正黑體";
        border-bottom:1px solid rgba(255,255,255,0.5);
        color: #fff;
        padding: 0 3%;
    }
    .mnavmenus a:last-child{
        border-bottom:0px; 
    }
    .mnavmenus a.mnavcloser{
        height: 55px;
    }


    .mHmark{width: 100%; position: absolute; left:0; height: 10px;}
    .mHfilm{top:19%;}
    .mHwelcome{top:29.6%;}
    .mHp1{top:53.05%;}
    .mHp2{top:76.4%;}

    .mfilmpop{
        display: none;
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        background: url(../img/film/bg-popup.png) repeat;
    }
    .mfilmpop .myoutubeF{
        position: absolute;
        left:0;
        bottom:0;
        width: 100%;
        height: calc(100% - 52px);
        border-top:2px solid #e4007f;
        background-color: #000;
    }
    .mfilmpop .myoutubeF .myoutubefilm{
        width: 100%;
        height: 100%;
    }
    .mfilmpop .myoutubeF .myoutubefilm iframe{
        width: 100%;
        height: 100%;
    }
    .mfilmpop .myoutubeF .mcloser{
        position: absolute;
        right:3%;
        top:-45px;
        width: 35px;
        height: 35px;
        background: url(../img/film/closer-popup.png) repeat 0 0;
        cursor: pointer;
    }
    .mfilmpop .myoutubeF .mcloser:hover{
        background-position: 0 -35px;
    }

    .mcons1{
        position: absolute;
        left: 12%;
        top: 61.8%;
        width: 73%;
        opacity: 1;
    }
    .mcons1 .pager{
        position: absolute;
        left: 102%;
        top: 35%;
        width: 14px;
    }
    .mcons2{
        position: absolute;
        left: 12%;
        top: 61.8%;
        width: 74%;
        opacity: 0;
    }
    .mcons2 .pager{
        position: absolute;
        left: 102%;
        top: 35%;
        width: 14px;
    }

    .loading_bar {
    height: 98px;
    width: 320px;
    background: url(../img/common/loadingbg_mobile.png) no-repeat scroll left top rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -160px;
    margin-top: -49px;
    }

    .loader {
    width: 1%;
    height: 98px;
    background: url(../img/common/loading_mobile.png) no-repeat left top;
}

}

/*Media Query between 768to 1023-----------------------------------------------------*/
@media (min-width: 769px) and (max-width: 1023px) {
}

/*Media Query bigger then 980-----------------------------------------------------*/
@media (min-width: 980px) {



}

/*Media Query bigger then 1200-----------------------------------------------------*/
@media (min-width: 1200px) {
	

	
}

/*Media Query bigger then 1366-----------------------------------------------------*/
@media (min-width: 1366px) {
    .product-welcome .title {
        width: initial;
        margin-left: -217.5px;
    }
}

/*height*/
@media (max-height: 770px) {
    .pre-index .titlebox {
       transform:scale(.85,.85) translateY(-30px);
	   -webkit-transform:scale(.85,.85) translateY(-30px);
    }
	.pre-index .item {
       transform:scale(.8,.8) translateY(65px);
	   -webkit-transform:scale(.8,.8) translateY(65px);
    }
}

@media (max-height: 650px) {
    .pre-index .titlebox {
       transform:scale(.8,.8) translateY(-50px);
	   -webkit-transform:scale(.8,.8) translateY(-50px);
    }
	.pre-index .item {
       transform:scale(.7,.7) translateY(50px);
	   -webkit-transform:scale(.7,.7) translateY(50px);
    }
}