@charset "utf-8";
/* CSS Document */
.hcon{width:100%;height:100vh;height:calc(var(--vh, 1vh) * 100);}
.hcon > .swiper-wrapper > .swiper-slide{
     width: 100%;
     height:100vh;
	 height:calc(var(--vh, 1vh) * 100);
	 overflow:hidden;
	 background-attachment: scroll;
	 background-repeat:no-repeat;
	/* background-position:50% 0%;
	 background-size:100% auto;*/
	}
.hom{
	background-color:#03060b;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/index.jpg);
	}
.pg1{
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/page.jpg);
	}
.bg_h .hom,.bg_h .pg1{background-size:auto 100%;}	
	
	
.logo{
	position: absolute;
	width:14.583%;/*280*/
	padding-bottom:11.45807142857143%;/*220*/
	display:block;
	cursor: pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/logo.png);
	left:0;
	top:0;
	z-index:2;
	}
.scrolltips{
	position:absolute;
	width:10.9375%;/*210*/
	padding-bottom:4.6875%;/*90*/
	display: block;
	pointer-events:none;
	bottom:0.6%;
	left:50%;
	transform: translateX(-50%);
	}
.scrolltips::before{
	position:absolute;
	width: 100%;
	height: 100%;
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/scroll-tips.png);
	left: 0;
	bottom: 0;
	animation: tp 1s linear infinite;
	}
.communitybx{
	position:absolute;
	top:0.78125vw;/*15*/
	right:1.3vw;/*25*/
	text-align:right;
	z-index:2;
	}
.communitybx > a{
	position:relative;
	width:2.864583333333333vw;/*60 3.125 55*/
	padding-bottom:2.864583333333333vw;
	display:inline-block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	margin-left:0.52vw;/*10*/
	}
.linebt{background-image: url(../images/linebt.png);}
.fbbt{background-image: url(../images/fbbt.png);}
.hbtbx{
	position:absolute;
	top:0.9375vw;/*18*/
	right:8.3vw;/*160*/
	text-align:right;
	}
.hbtbx > a{
	position:relative;
	width:9.010416666666667vw;/*190 173*/
	padding-bottom:2.604166666666667vw;/*55 50*/	
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	margin-left:0.3125vw;/*6*/
	top: 0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.hbtbx > a:hover{
	top: -.3rem;
	/**/
  	-webkit-filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .8));
  	filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .8));
	}
.downloadbt,.registerbt{display:inline-block;}
.downloadbt{background-image: url(../images/h_bt_2.png);}
.registerbt{background-image: url(../images/h_bt_1.png);}

.hcbx{
	position:absolute;
	width:82.39168%;/*1581.920256*/
	left:8.80416%;/*169 146 7.60416*/
	top:56%;
	transform:translateY(-50%);
	transition: all .5s;
	}
.slogan,.subtitle,.play_h,.progressbx{
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;	
	}
.slogan{
	position:relative;
	width:27.2453%;/*449 23.385416   431 22.45vw*/
	padding-bottom:56.070953%;/*924 48.125  887 46.2vw*/
	pointer-events:none;
	background-image: url(../images/slogan.png);
	}
.subtitle{
	position:absolute;
	width:10.802%;/*178  170.88 8.9vw*/
	padding-bottom:47.2739%;/*779 747.84 38.95vw*/
	pointer-events:none;
	background-image: url(../images/subtitle.png);
	left:22.15029%;/*365 350.4 18.25vw*/
	top:9.307%;/*86 82.56 4.3vw*/
	}
.play_h{
	position:absolute;
	width:8.981%;/*148 142.08 7.4vw*/
	padding-bottom:8.25281%;/*136 130.56 6.8vw*/
	cursor: pointer;
	background-image: url(../images/play.png);
	left:23.0969%;/*381 19.05 19.03vw  365.376*/
	top:-0.1vw;
	}

.prbx{
	position:absolute;
	width:33.4378%;/*551 528.96*/
	left:33.1951%;/*541 28.55 525.12 27.35vw*/
	top:56.2795%;/*530 499.2 26vw*/
	}
.progressbx{
	position:relative;
	width:100%;/*551 528.96 27.55vw*/
	padding-bottom:11.7967%;/*65 3.25vw*/
	background-image: url(../images/progress_bg.png);
	/**/
  	-webkit-filter: drop-shadow(0 .5rem 2.5rem rgba(0, 0, 0, .8));
  	filter: drop-shadow(0 .5rem 2.5rem rgba(0, 0, 0, .8));
	}
.progressbx::before{
	position:absolute;
	width:0;
	height: 100%;
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 50%;
	background-size:auto 100%;
	background-image: url(../images/progress_line.png);
	left: 0;
	top: 0;	
	}
.progressbx.lv1::before{width:17%;}
.progressbx.lv1.lv2::before{width:39%;}
.progressbx.lv1.lv2.lv3::before{width:62%;}
.progressbx.lv1.lv2.lv4::before{width:100%;}/*84*/
.progressbx.lv1.lv2.lv4.lv5::before{width:100%;}
.progressbx.lv1 ul > li:nth-child(1)::before{opacity:1;}
.progressbx.lv1 ul > li:nth-child(1)::after{opacity:1;}

.progressbx.lv1.lv2 ul > li:nth-child(2)::before{opacity:1;}
.progressbx.lv1.lv2 ul > li:nth-child(2)::after{opacity:1;}
.progressbx.lv1.lv2 ul > li:nth-child(1)::after{opacity:0;}

.progressbx.lv1.lv2.lv3 ul > li:nth-child(3)::before{opacity:1;}
.progressbx.lv1.lv2.lv3 ul > li:nth-child(3)::after{opacity:1;}
.progressbx.lv1.lv2.lv3 ul > li:nth-child(2)::after{opacity:0;}

.progressbx.lv1.lv2.lv3.lv4 ul > li:nth-child(4)::before{opacity:1;}
.progressbx.lv1.lv2.lv3.lv4  ul > li:nth-child(4)::after{opacity:1;}
.progressbx.lv1.lv2.lv3.lv4  ul > li:nth-child(3)::after{opacity:0;}

.progressbx ul{
	position:absolute;
	width:100%;
	left:0;
	top:-0.05vw;/*1*/
	}
.progressbx ul > li{
	position:absolute;
	width:6.352%;/*35*/
	padding-bottom:6.352%;/*35*/
	display: block;
	cursor: pointer;
	top:0;
	}
.progressbx ul > li:nth-child(1){ left:13.411%;/*75*/}
.progressbx ul > li:nth-child(2){ left:35.834%;/*198*/}	
.progressbx ul > li:nth-child(3){ left:58.157%;/*321*/}	
.progressbx ul > li:nth-child(4){ left:80.48%;/*444*/}
.progressbx ul > li::before,.progressbx ul > li::after{
	position:absolute;
	width: 100%;
	height: 100%;
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	left: 0;
	top: 0;
	opacity:0;
	}
.progressbx ul > li::before{background-image: url(../images/spot-def.png);}
.progressbx ul > li::after{background-image: url(../images/spot-act.png);}
	
.progressbx ul > li > div{
	position: absolute;
	width:585.7142857142857%;/*205*/
	padding-bottom:588.5714285714286%;/*206*/
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	bottom: 90%;
	left:50%;
	transform:translateX(-50%);
	opacity: 0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.progressbx ul > li > div::before{
	position:absolute;
	width:42.43%;/*87*/
	padding-bottom:39.50379310344828%;/*81*/
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/done-icon.png);
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	opacity: 0;
	}
.progressbx ul > li:nth-child(1) > div{background-image: url(../images/awardbx_1.png);}
.progressbx ul > li:nth-child(2) > div{background-image: url(../images/awardbx_2.png);}
.progressbx ul > li:nth-child(3) > div{background-image: url(../images/awardbx_3.png);}
.progressbx ul > li:nth-child(4) > div{background-image: url(../images/awardbx_4.png);}
.progressbx ul > li:hover > div{bottom:105%;opacity:1;}

.progressbx.lv1 ul > li:nth-child(1) > div::before{opacity:1;}
.progressbx.lv1.lv2 ul > li:nth-child(2) > div::before{opacity:1;}
.progressbx.lv1.lv2.lv3 ul > li:nth-child(3) > div::before{opacity:1;}
.progressbx.lv1.lv2.lv3.lv4 ul > li:nth-child(4) > div::before{opacity:1;}

.reservebt{
	position: relative;
	width:62.008%;/*328 16.4 17.08333333333333vw*/
	padding-bottom:15.691%;/*83 4.15 4.322916666666667vw*/
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/reserve.png);
	margin:1.3vw auto 0;/*26*/
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	/**/
  	-webkit-filter: drop-shadow(0 .5rem 2.5rem rgba(0, 0, 0, .5));
  	filter: drop-shadow(0 .5rem 2.5rem rgba(0, 0, 0, .5));
	}
.reservebt::before{
	position:absolute;
	width:100%;
	height:100%;
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/reserve_on.png);
	top: 0;
	left: 0;
	opacity: 0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.reservebt:hover::before{opacity:1;}
.reservebt:hover{
	/**/
  	-webkit-filter: drop-shadow(0 1rem 2.5rem rgba(0, 0, 0, .9));
  	filter: drop-shadow(0 1rem 2.5rem rgba(0, 0, 0, .9));
	}
#kkb{
  position: absolute;
  width: 100%;
  height: 100vh;
  display:block;
  left: 0;
  top: 0;
  z-index:3;
  pointer-events: none;
  overflow: hidden;
	}



/**/			
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1000px){	
/**/

}
@media only screen and (max-width:800px){
/**/

}
@media only screen and (max-width:750px){
/**/
.hom{background-image: url(../images/index_m.jpg);}
/*.bg_h .hom{background-size:100% auto;}	*/
.pg1{background-image: url(../images/page_m.jpg);}
.logo{
	width:27.2%;/*204*/
	padding-bottom:21.3%;/*160*/
	}
.scrolltips{
	width:28%;/*210*/
	padding-bottom:12%;/*90*/
	bottom:0%;
	}
.scrolltips::before{background-image: url(../images/scroll-tips_m.png);}
.communitybx{
	top:2.4vw;/*18*/
	right:2.6vw;/*15 20 2.6*/
	}
.communitybx > a{
	width:10vw;/*66 8.8 75*/
	padding-bottom:10vw;
	margin-left:1.33vw;/*6 .8 10 */
	}
.hbtbx{
	top:3vw;/*25*/
	right:27.5vw;/*210*/
	}
.hbtbx > a{
	width:30vw;/*190 185 225*/
	padding-bottom:8.666666666666667vw;/*55 54 65*/
	}
.downloadbt{display:none;}
.hcbx{
	width:100%;
	left:0;
	top:53%;
	}	
/*.ws7 .hcbx{top:53%;}*/
.slogan{
	width:49.06%;/*368 49.06vw*/
	padding-bottom:101.0529347826087%;/*758 101.06vw*/
	left:-3.4%;/*48 -6.4vw*/
	}
.subtitle{
	width:21.46%;/*161 21.46vw*/
	padding-bottom:93.4376397515528%;/*701 93.46vw*/
	left:37.93%;/*262 34.93vw*/
	top:1.73vw;/*13*/
	}	
.play_h{
	width:19.73%;/*148 19.73vw*/
	padding-bottom:18.13027027027027%;/*136 18.13vw*/
	left:21.5%;/*144 19.2vw*/
	top:23.96vw;/*92*/
	}
.prbx{
	position:relative;
	width:auto;
	left:0;
	top:0;
	margin:-4vw auto 0;/*40 /6*/
	z-index: 3;
	}
.ws7 .prbx{margin:12vw auto 0;}
.ws8 .prbx{margin:30vw auto 0;}	
.progressbx{
	width:91.83333333333333vw;/*551 /6 */
	padding-bottom:10.83333333333333vw;/*65*/
	margin:0 auto;
	}
.reservebt{
	width:54.66666666666667vw;/*328 /6 */
	padding-bottom:13.83333333333333vw;/*83*/
	}
.ws7 .reservebt{margin:3.5vw auto 0;}	
.ws8 .reservebt{margin:6vw auto 0;}	
		
}
@media only screen and (max-width:630px){
/**/

}
@media only screen and (max-width:580px){
	
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:450px){
/**/

}
@media only screen and (max-width:380px){
/**/
}
@media only screen and (max-width:360px){
/**/

}
@media only screen and (max-width:320px){
/**/

}