@charset "utf-8";
/* CSS Document */
.navbx{
	position:fixed;
	width:100%;
	left:0;
	top:0;
	z-index:10;
	}
.navbx.on{position:absolute;}
.logo{
	position:absolute;/*fixed*/
	width:13.9%;/*278*/
	z-index:3;
	left:.5vw;/*10*/
	top:.5vw;/*10*/
	/**/
	transition: all .5s;
	}
.logo::before{
	position: relative;
	width:100%;/*278*/
	padding-bottom:43.165%;/*120*/
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/logo.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
.logo.on{width:10.5%;/*210*/}
/**/
.topup{
	position:absolute;
	width:8.4%;/*168*/
	right: 0;
	top:.9vw;/*18*/
	/**/
  	-webkit-filter: drop-shadow(0 0 1.2vw rgba(0, 0, 0, .2));/*30*/
  	filter: drop-shadow(0 0 1.2vw rgba(0, 0, 0, .2));
	}
.topup::before,.topup::after{
	width:100%;
	content:"";
	display:block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
.topup::before{
	position: relative;
	/*width:100%;243*/
	padding-bottom:38.68312757201646%;/*94*/
	background-image:url(../images/topup.png);
	}
.topup::after{
	position: absolute;
	height:100%;
	background-image:url(../images/topup_a.png);
	top:0;
	right:0;
	opacity:0;
	}
.topup:hover::after{opacity:1;}
/**/
.userbx{
	position:absolute;
	top:1.45vw;/*28*/
	right:9%;/*180*/
	text-align:right;
	}
.user{
	position:relative;
	width:2.35vw;/*47*/
	height:2.35vw;/*47*/
	display:inline-block;
	margin-left:.5vw;/*10*/
	}
.user .uic{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	cursor:pointer;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/user_icon.png);
	background-size:100% auto;
	top:0;
	right:0;
	}
.user.on .uic{display:none;}
.user .hav{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	border-radius:50%;
	border: .12vw solid #fff;/*2*/
	background-color:#fff;
	overflow:hidden;
	top:0;
	right:0;
	}
.user .uidbx{
	position:absolute;
	/*min-width:350%;
	width:;*/
	display:inline-block;/*block*/
	pointer-events:none;
	font-size:.75vw;/*15*/
	color: #fff;
	text-align:left;
	border-radius:30px;
	background-color:#0e182a;
	padding:.35vw 3.35vw .35vw .65vw;/* 9*/
	top: 95%;
	left:50%;
	transform: translateX(-50%);
	opacity:0;
	/**/
	transition: all .5s;
	/**/
  	-webkit-filter: drop-shadow(0 0 .2vw rgba(0, 0, 0, .2));
  	filter: drop-shadow(0 0 .2vw rgba(0, 0, 0, .2));
	}
.user.on:hover .uidbx{
	opacity:1;
	top: 110%;
	pointer-events:auto;
	}

.user .uidbx span{
	position:relative;
	/*display:inline-block;*/
	display: flex;
	flex-wrap: nowrap;
	}
.user .uidbx span p{padding-right:3px;}
.user .uidbx::before{
	position:absolute;
	width:.95vw;/*19*/
	padding-bottom:.5vw;/*10*/
	content:"";
	display:block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/havc.png);
	background-size:100% auto;
	bottom:100%;
	left:50%;
	transform: translateX(-50%);
	}
.user .uidbx a.soutbt{
	position:absolute;
	width:2.5vw;
	color:#fff;
	text-align: center;
	border-radius:30px;
	background-color:#144894;
	padding:.01vw .5vw .03vw;/* 9*/
	top:50%;
	left:108%;
	transform: translateY(-50%);
	/**/
	transition: all .5s;
	}
.user .uidbx a.soutbt:hover{background-color:#357be3;}

.user.on .hav{display:block;}
.user.on .hav img{
	position: relative;
	width:100%;
	display:block;
	}
/**/
.musicbt{
	position:relative;
	width:2.35vw;/*47*/
	height:2.35vw;/*47*/
	display:inline-block;
	cursor: pointer;
	}	
.musicbt::before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	top:0;
	left:0;
	}
.musicbt::before{
	display:block;
	background-image: url(../images/music_off.png);
	}
.musicbt .music_on{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	top:0;
	left:0;
	}	
.musicbt p{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	top:0;
	left:0;
	}
.musicbt.on p{display:none;}	
	
.musicbt .music_on::before,.musicbt .music_on::after{
	position:absolute;
	content:"";
	width:100%;	
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	bottom:0;
	left:0;
	}
.musicbt .music_on::before{
	height:100%;
	background-image: url(../images/music_on_1.png);
	}
.musicbt .music_on::after{
	height:123.809523%;
	background-image: url(../images/music_on_2.png);
	}
.musicbt.on::before{display:none;}
.musicbt.on .music_on{display:block;}
.musicbt.on .music_on::before{
	-moz-animation: rotate 3s linear infinite;
	-webkit-animation: rotate 3s linear infinite;
	-o-animation: rotate 3s linear infinite;
	-ms-animation: rotate 3s linear infinite;
	animation: rotate 3s linear infinite;
	}
.musicbt.on .music_on::after{
	animation: tp 1.2s linear infinite;
	}
/**/
.smbx_t{
	position:absolute;
	top:1.45vw;/*28*/
	right:15%;/*300*/
	text-align:right;
	}
.smbx_t a{
	position:relative;
	width:2.35vw;/*47*/
	height:2.35vw;/*47*/
	display:inline-block;
	margin-left:.5vw;/*10*/
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	}
.smbx_t a.fb_a{background-image: url(../images/fb_icon.png);}
.smbx_t a.yt_a{background-image: url(../images/yt_icon.png);}
.smbx_t a.dc_a{background-image: url(../images/dc_icon.png);}
/**/
.mucp{
	position:absolute;
	width:3vw;/*60*/
	height:3vw;
	display:block;
	cursor: pointer;
	top:5.2vw;/*104*/
	right:.75vw;/*15*/
	/**/
	transition: all .5s;
	}
.mucp::before,.mucp::after{
	position:absolute;
	width:100%;
	height:100%;
	content:"";
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.mucp::before{
	mask-image: url(../images/mu_op_a.png);
	mask-repeat: no-repeat;
	mask-position:50% 50%;
	mask-size: 100% auto;
	-webkit-mask-image: url(../images/mu_op_a.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 50%;
	-webkit-mask-size:100% auto;
	
	border-radius:50%;
	background-color: rgba(255,255,255,.85);/*26,49,89,.75*/
	}
.mucp::after{
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/mu_op.png);
	background-size:100% auto;
	}
/*.mucp.on{top:4.8vw;}*/
.mucp.on::before{
	mask-image: none;
	-webkit-mask-image:none;
	border-radius:50% 50% 0 0;
	background-color:rgba(36,53,84,1);
	}
.mucp.on::after{background-image: url(../images/mu_cl.png);}

.mubx{
	position:absolute;
	width:0;
	/*height:calc(100vh - 7.85vw);157*/
	overflow:hidden;
	top:7.31vw;/*157*/
	right:0;
	/**/
	transition: all .5s;
	}
.mubx.on{
	width:245px;/*245 12.25%12.25vw*/
	/**/
  	-webkit-filter: drop-shadow(0 0 1vw rgba(0, 0, 0, .2));
  	filter: drop-shadow(0 0 1vw rgba(0, 0, 0, .2));
	}
.mbx{
	position:relative;
	width:245px;/*245px12.25vw*/
	/*max-height:calc(100vh - 7.85vw);
	background-color:#999;*/
	height:calc(100vh - 7.85vw);
	height: calc((var(--vh, 1vh) * 100) - 7.85vw);
	transition: all .5s;
	}
.mbx > div{
	position:absolute;
	width:100%;
	height:calc(100% - 140px);
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position:50% 50%;
	background-image: url(../images/mubx_02.png);
	background-size: 100% auto;
	z-index:1;
	top:70px;
	/**/
	transition: all .5s;
	}
.mbx::before,.mbx::after{
	position:absolute;
	width:100%;
	padding-bottom:28.571%;/*70*/
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	right:0;
	}	
.mbx::before{
	top:0;
	background-position:50% 100%;
	background-image: url(../images/mubx_01.png);
	}
.mbx::after{
	bottom:0;
	background-position:50% 0%;
	background-image: url(../images/mubx_03.png);
	}
.mbx > div .mb1{
	position:absolute;
	width:100%;
	height:103%;
	display:block;
	text-align:right;
	overflow:auto;
	right:0;
	top:49%;
	transform: translateY(-50%);
	}
.mbx > div .mb2{
	position:relative;
	width:85.71%;/*210*/
	text-align:center;
	display:inline-block;
	}
.mbx > div .mb2 li{
	position:relative;
	width:79%;/*166*/
	display:block;
	margin:0 auto;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/ms.png);
	background-size:100% auto;
	}
.mbx > div .mb2 li a{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	top:0;
	left:0;
	z-index:1;
	}
.mbx > div .mb2 li a::before{
	position:absolute;
	width:100%;
	height:100%;
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/mk.png);
	background-size:80% auto;
	top:0;
	left:-38%;
	opacity:0;
	/**/
	transition: all .5s;
	}
.mbx > div .mb2 li::before,.mbx > div .mb2 li::after{
	width:100%;
	content:"";
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:100% auto;
	}
.mbx > div .mb2 li::before{
	position:relative;
	padding-bottom:39.156%;/*65*/
	}
.mbx > div .mb2 li::after{
	position:absolute;
	height:100%;
	top:0;
	left:0;
	opacity:0;
	transition: all .5s;
	}
.mbx > div .mb2 li:hover::after,.mbx > div .mb2 li.on::after{opacity:1;}
.mbx > div .mb2 li a:hover::before,.mbx > div .mb2 li.on a::before{opacity:1;left:-20%;}
	
.mbx > div .mb2 li.m1::before{background-image: url(../images/m1a.png);}
.mbx > div .mb2 li.m1::after{background-image: url(../images/m1.png);}
.mbx > div .mb2 li.m2::before{background-image: url(../images/m2a.png);}
.mbx > div .mb2 li.m2::after{background-image: url(../images/m2.png);}
.mbx > div .mb2 li.m3::before{background-image: url(../images/m3a.png);}
.mbx > div .mb2 li.m3::after{background-image: url(../images/m3.png);}
.mbx > div .mb2 li.m4::before{background-image: url(../images/m4a.png);}
.mbx > div .mb2 li.m4::after{background-image: url(../images/m4.png);}
.mbx > div .mb2 li.m5::before{background-image: url(../images/m5a.png);}
.mbx > div .mb2 li.m5::after{background-image: url(../images/m5.png);}
.mbx > div .mb2 li.m6::before{background-image: url(../images/m6a.png);}
.mbx > div .mb2 li.m6::after{background-image: url(../images/m6.png);}
.mbx > div .mb2 li.m7::before{background-image: url(../images/m7a.png);}
.mbx > div .mb2 li.m7::after{background-image: url(../images/m7.png);}
.mbx > div .mb2 li.m8::before{background-image: url(../images/m8a.png);}
.mbx > div .mb2 li.m8::after{background-image: url(../images/m8.png);}
.smbx2{
	position:relative;
	width:85.71%;/*210*/
	text-align:center;
	display:inline-block;
	padding:7.5% 0 5%;/*5%*/
	}
.smbx2 a{
	position:relative;
	width:15.5%;
	padding-bottom:15.5%;
	display:inline-block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	margin:0 .5%;
	opacity:.35;
	transition: all .5s;
	}
.smbx2 a:hover{opacity:1;}
.smbx2 a.fb_b{background-image: url(../images/fb_icon.png);}
.smbx2 a.x_b{background-image: url(../images/x_icon.png);}	
.smbx2 a.yt_b{background-image: url(../images/yt_icon.png);}	
.smbx2 a.dc_b{background-image: url(../images/dc_icon.png);}
.smbx2 a.bh_b{background-image: url(../images/bh_icon.png);}

@media only screen and (max-width:1600px){
/**/
.mubx{top:7vw;}

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

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

}
@media only screen and (max-width:1000px){	
/**/
.mubx.on{
	width:200px;
	/**/
  	-webkit-filter: drop-shadow(0 0 10vw rgba(0, 0, 0, .2));
  	filter: drop-shadow(0 0 10vw rgba(0, 0, 0, .2));
	}
.mbx{width:200px;}
.mbx > div{
	height:calc(100% - 114px);
	top:57px;
	}
}
@media only screen and (max-width:800px){
/**/

}	
@media only screen and (max-width:780px){
/**/
.logo{
	/*position:fixed;*/
	width:37.435%;/*292*/
	left:0;
	top:1.282vw;/*10*/
	}
.logo.on{
	width:26.923%;/*210*/
	left:.512vw;/*4*/
	top:1.794vw;/*14*/
	}
/**/
.topup{
	width:31.1538461538461%;/*243*/
	top:2.82vw;/*22*/
	/**/
  	-webkit-filter: drop-shadow(0 0 3.8vw rgba(0, 0, 0, .2));/*30*/
  	filter: drop-shadow(0 0 3.8vw rgba(0, 0, 0, .2));
	}
/**/
.userbx{
	top:4.5vw;/*37 4.743589743589744*/
	right:34.1%;/*266*/
	}
.user{
	width:9.1vw;/*71*/
	height:9.1vw;/*71*/
	margin-left:2.3vw;/*18*/
	}
.user .uidbx{
	/*min-width: 292%;*/
	font-size:2.5vw;/*20*/
	background-color:#0e182a;
	padding:.9vw 11vw .9vw 2vw;/* 15*/
	top:95%;
	left:0%;
	}
.user.on:hover .uidbx{top: 100%;}
.user .uidbx::before{
	width:2.4vw;/*19*/
	padding-bottom:1.28vw;/*10*/
	bottom:100%;
	left:65%;
	transform: translateX(-50%);
	}
.user .uidbx a.soutbt{
	width:8vw;
	padding:.07vw .5vw .2vw;
	top:50%;
	left:108%;
	}
/**/
.musicbt{
	width:9.1vw;/*71*/
	padding-bottom:9.1vw;/*71*/
	}	
/**/
.smbx_t{display:none;}	
/**/
.mucp{
	width:9.358vw;/*73*/
	height:9.358vw;
	top:18.46153846153846vw;/*144*/
	right:3.2vw;/*25*/
	}
/*.mucp.on{top:17vw;}*/
/**/
.mubx{
	top:25.45vw;/*157*/
	}
.mubx.on{
	width:245px;
	/**/
  	-webkit-filter: drop-shadow(0 0 2.5vw rgba(0, 0, 0, .2));
  	filter: drop-shadow(0 0 2.5vw rgba(0, 0, 0, .2));
	}
.mbx{
	width:245px;
	height:calc(100vh - 25.55vw);
		height: calc((var(--vh, 1vh) * 100) - 25.55vw);
	}
.mbx > div{
	height:calc(100% - 138px);
	top:69px;
	}
}
@media only screen and (max-width:685px){ 
/**/

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

}
@media only screen and (max-width:470px){
/**/
.user .uidbx{
	/*min-width: 380%;*/
	font-size:3.2vw;/*20*/
	padding:1.2vw 14.5vw 1.2vw 2.5vw;/* 15*/
	}
.user .uidbx::before{
	width:2.4vw;/*19*/
	padding-bottom:1.28vw;/*10*/
	bottom:100%;
	left:62%;
	transform: translateX(-50%);
	}
.user .uidbx a.soutbt{
	width:11vw;
	padding:.07vw .5vw .2vw;
	top:50%;
	left:108%;
	}
/**/
.mubx{
	top:25vw;
	}
.mubx.on{
	width:200px;
	/**/
  	-webkit-filter: drop-shadow(0 0 5.5vw rgba(0, 0, 0, .5));
  	filter: drop-shadow(0 0 5.5vw rgba(0, 0, 0, .5));
	}
.mbx{width:200px;}
.mbx > div{
	height:calc(100% - 114px);
	top:57px;
	}
	
}

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

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

	
}
@media only screen and (max-width:340px){
/**/
.mubx.on{width:180px;}
.mbx{width:180px;}
.mbx > div{
	height:calc(100% - 102px);
	top:51px;
	}
}

@keyframes rotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@keyframes tp {
   0% { bottom:0;}
   50% {bottom:8%;}
   100% {bottom:0;}
}