ul {    
    list-style: none;
}
html,body {
	margin: 0 auto;
	background: transparent;
}
a:focus{
	outline:none;
	outline:0px auto -webkit-focus-ring-color;
}
 button{
	outline:none;
	border:none;
    color: rgba(51, 51, 51, 0);
    text-decoration: none;
    box-shadow: none;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
    background-color: transparent;
	cursor:pointer;
}
div > img{
	width: 100%;
	height: auto;
	text-align:center;
	display: inline-block;
}
/**************
***************
**************/
#mode-position{
	width: 100%;
    height:auto;
}

#mode-position a{
	position:absolute;
	outline:none;
	border:none;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
	background-color: transparent;
	cursor:pointer;
}
 #mode-position button{
	position:absolute;
	outline:none;
	border:none;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
	background-color: transparent;
	cursor:pointer;
}
 #mode-position .div-abs{
    position: absolute;
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
 }
 .pr{
    position: relative;
    display: inline-block;
 }
 .pa{
    position: absolute;
    display: inline-block;
 }
.clear{
	clear: both;
}
.copyright{
    background-position:right bottom;
	background-repeat:no-repeat;
    background-size: contain;
    position: absolute;
	margin:auto;
    z-index: 3;
    width:10%;
    height: auto;
	min-width:200px;
	min-height:38px;
}
.copyright-right{
    bottom:1%;
    right:1%;
}
.copyright-left{
    bottom: 1%;
    left: 1%;
}
.butn-mold, .icon-mold, .title-mold{	
	display: inline-block;	
	position:absolute;		
	background-repeat:no-repeat;
	background-position:top center;	
	background-size:contain;
}
.icon-mold{
	transition: .5s;
}


.butn-mode-wrap, .butn-mode{
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
    display: inline-block;
    z-index:7;
}
.butn-mode-wrap{
    position: relative;
    width: 100%;
    height: 100%;
}
.butn-mode{	
    z-index:7;
    position: absolute;
/*    opacity: .8;*/
    transform:scale(.9);
    transition:all .3s;
}
.butn-mode:hover{
    opacity: .8;
    transform:scale(1.3);
    transition:all .3s;
}
.butn-10p{width: 10%;}
.butn-20p{width: 20%;}
.butn-30p{width: 30%;}
.butn-40p{width: 40%;}
.butn-45p{width: 45%;}
.butn-r1{right: 5%}
.butn-r2{right: 10%}
.butn-l1{left: 5%}
.butn-l2{left: 10%}

.butn-t1{top: 5%}
.butn-t2{top: 10%}
.h-1{height: 5%}
.h-2{height: 10%}
.h-3{height: 15%}
.h-4{height: 20%}
.h-5{height: 25%}
.h-6{height: 30%}
.h-7{height: 35%}
.h-8{height: 40%}
/**************
***************
**************/
.video-page{}
.page-01{}
.page-02{}
.butn-mold{} 
.icon-mold{}
.title-mold{}
/**************
***************
***************/
h1.logo{
	padding:0;
	margin: 0;
}
.logo{
    width: 13%;
    min-width:200px;
    height: auto;
    position: absolute;
    display: inline-block;
    z-index: 20;
    left: 5%;
    top: 10%;
}
.logo-lg-r{
    top: 5%;
    left: 8%;
}
.gameqr{
    width: 6%;
    min-width: 60px;
    height: 12%;
    background-image: url(../images/qrcode.png);
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat;
    position: absolute;
    cursor: pointer;
    transition: .5s;
    top: 30%;
    left: 0%;
    z-index: 20;
}
.gameqr:hover{
	width:20%;
	height:15%;
	min-width: 300px;
	min-height: 200px;
	background-image:url(../images/qrcode_hover.png);
	background-repeat:no-repeat;
    background-size: contain;
    background-position: top center;
	transition: .5s;
	z-index:10;
}

.icon-down{
    width: 6%;
    height: 5%;
	min-width: 30px;
	min-height: 30px;
	bottom:13%;
	left:0%;
	right:0%;
	margin:0 auto;
    position: absolute;
	z-index:6;
    background-image: url(../images/icon_down.png);
	background-position: center;
	background-repeat: no-repeat; 
	background-size: contain;
	-webkit-animation: gotoNextBtn 1.5s infinite ease-in-out;
	-moz-animation: gotoNextBtn 1.5s infinite ease-in-out;
	-ms-animation: gotoNextBtn 1.5s infinite ease-in-out;
	animation: gotoNextBtn 1.5s infinite ease-in-out;
}
.pull-center{
	position: absolute;
	left:0;
	right:0;
	margin:auto; 
}
.pull-right{
	position: absolute;
	right:0;
	margin:auto;
}
.pull-left{
	position: absolute;
	left:0;
	margin:auto;
}
/**************
** animation ****
**************/


@-webkit-keyframes gotoNextBtn{
	0%,30%{opacity:0;-webkit-transform:translate(0,-8px)}
	60%{opacity:1;-webkit-transform:translate(0,0)}
	100%{opacity:0;-webkit-transform:translate(0,10px)}
}
@-moz-keyframes gotoNextBtn{
	0%,30%{opacity:0;-moz-transform:translate(0,-8px)}
	60%{opacity:1;-moz-transform:translate(0,0)}
	100%{opacity:0;-moz-transform:translate(0,10px)}
}
@-o-keyframes gotoNextBtn{
		0%,30%{opacity:0;-o-transform:translate(0,-8px)}
		60%{opacity:1;-o-transform:translate(0,0)}
		100%{opacity:0;-o-transform:translate(0,10px)}
}
@-ms-keyframes gotoNextBtn{
	0%,30%{opacity:0;-ms-transform:translate(0,-8px)}
	60%{opacity:1;-ms-transform:translate(0,0)}
	100%{opacity:0;-ms-transform:translate(0,10px)}}
	
@keyframes gotoNextBtn{
	0%,30%{opacity:0;transform:translate(0,-8px)}
	60%{opacity:1;transform:translate(0,0)}
	100%{opacity:0;transform:translate(0,10px)}
}
/*trun bg*/
@-webkit-keyframes twinkling{
	0%{background-image:url(../img/bg_01.jpg);}
	100%{background-image:url(../img/bg_02.jpg);}
}


@media screen and (min-height:1366px){
	} 
}
@media screen and (min-height:1024px){
}

@media screen and (min-height:1000px){
}
@media screen and (min-height:768px){
	.copyright{
		min-width:200px;
		min-height:20px;
	}
}
@media screen and (min-height:400px){
	.copyright{
		min-width:200px;
		min-height:30px;
	}
}