@charset "utf-8";
/*------------ main ---------------*/
/*section0 内容区域背景*/

.section0{
    width: 100%;
    height: 1050px;
    background: url("../img/bg_01.jpg") no-repeat center;
    background-size: cover;
}
.section1{
    position: relative;
    width: 100%;
    height: 900px;
    background: url('http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/bg_02.jpg') no-repeat center;
    background-size: cover;
}
.section2{
    position: relative;
    width: 100%;
    height: 680px;
    background: url('http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/bg_03.jpg') no-repeat center;
    background-size: cover;
}
.section3{
    width: 100%;
    min-height: 1397px;
    background: url('http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/bg_FAQ.jpg') no-repeat top center;
}
.section4{
    width: 100%;
    height: 850px;
    background: url("http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/bg_04.jpg") no-repeat center;
    background-size: cover;
}
.page img{
	width: 293px;
	height: 286px;
}
.section1,.section2 .top{
    text-align: center;
    clear: both;
    padding-top: 5px;
}


.article {
    width: 100%;
    margin: 0 auto;
    position: absolute;
}
.article .package {
	width: 650px;
	height: 200px;
	position: relative;
	margin: 0 auto;
	top: 650px;
    padding: 25px 0;
    display: none;
}
.package .package-bg{
	width: 446px;
	height: 160px;
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/QR-bg.png) no-repeat;
	background-size: 100% 100%;
	padding: 5px 10px;
	float: left;
}
.package .content_r {
	float: left;
	cursor: pointer;
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/bg-play.png) no-repeat;
	width: 82px;
	height: 80px;
	position: relative;
    top: 20%;
    left: 20px;
    line-height: 100px;
    text-align: center;
}
.package .content_f {
	float: left;
	padding-left: 15px;
	padding-top: 18px;
}
.package .content_c {
	float: left;
	padding-top: 15px;
	padding-left: 25px;
	width: 180px;
}
.package .content_c .btn-ios{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/ios.png) no-repeat;
	width: 180px;
	height: 55px;
}
.package .content_c .btn-ios:hover{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/h-ios.png) no-repeat;
}
.package .content_c .btn-android{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/Android.png) no-repeat;
	width: 180px;
	height: 55px;
}
.package .content_c .btn-android:hover{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/h-android.png) no-repeat;
}
.package .content_c .img {
	width: 100%;height: 100%;display: block;
}
.package .gift{
	float: left;
	padding-top: 25px;
	cursor: pointer;
	-webkit-animation: gift .5s .6s  linear infinite;
	animation: gift .5s .6s  linear infinite;
	-moz-animation: gift .5s .6s  linear infinite;
}
@keyframes gift{
0% {transform: rotate(0);}
20% {transform: rotate(1deg);}
40% {transform: rotate(-1deg);}
60% {transform: rotate(1deg);}
80% {transform: rotate(-1deg);}
100% {transform: rotate(0deg);}
}
@-webkit-keyframes gift{
0% {transform: rotate(0);}
20% {transform: rotate(1deg);}
40% {transform: rotate(-1deg);}
60% {transform: rotate(1deg);}
80% {transform: rotate(-1deg);}
100% {transform: rotate(0deg);}
}

.play{
	width: 30px;
    height: 35px;
    z-index: 101;
	-webkit-animation: circle 3s .6s  linear infinite;
	animation: circle 3s .6s  linear infinite;
	-moz-animation: circle 3s .6s  linear infinite;
}
@keyframes circle{
0%{transform:rotate(0);transform-origin: 15px 17.5px;}
100%{transform:rotate(360deg);transform-origin: 15px 17.5px;}
}
@-webkit-keyframes circle{
0%{-webkit-transform:rotate(0);transform-origin: 15px 17.5px;}
100%{-webkit-transform:rotate(360deg);transform-origin: 15px 17.5px;}
}

.girl{
	float: right;
	position: relative;
	right: 40px;
	top: -55px;
	z-index: 50;
	-webkit-animation: girl 2s .6s  linear infinite;
	animation: girl 2s .6s  linear infinite;
	-moz-animation: girl 2s .6s  linear infinite;
}
@keyframes girl{
0% {transform: rotate(0);}
20% {transform: rotate(1deg);}
40% {transform: rotate(-1deg);}
60% {transform: rotate(1deg);}
80% {transform: rotate(-1deg);}
100% {transform: rotate(0deg);}
}
@-webkit-keyframes girl{
0% {transform: rotate(0);}
20% {transform: rotate(1deg);}
40% {transform: rotate(-1deg);}
60% {transform: rotate(1deg);}
80% {transform: rotate(-1deg);}
100% {transform: rotate(0deg);}
}


.video {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: none;
	text-align: center;
	padding-top: 10%;
}


/*  二屏  */
.section1 .content{
    position: absolute;
    left: 25%;
    margin-left: 0;
    top:50px;
}
.leftout{
    animation: leftout 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-animation: leftout 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-animation: leftout 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation: leftout 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@keyframes leftout {
  0% {
    opacity: 0;
    transform: translate3d(-600px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(100px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  100% {
    transform: none;
  }
}
.section1 .content .picture ul li{
    display: none;
}

.section1 .content .picture ul li#show{
    display: block;
}

.section1 .content .first{
    position: absolute;
    top: 40px;
    left: 85px;
}
.section1 .content .second{
    position: absolute;
	top: 30px;
    right: 230px;
}
.section1 .content .row{
    z-index: 100;
}
.section1 .content .row ul li{
	
}
.section1 .content .row ul .lione{
    margin-top: 8px;
    margin-left: -6px;
    position: relative;
    left: 156px;
}

.section1 .content .row ul .litow{
    padding-bottom: 0;
    margin-top: -5px;
    margin-left: 0;
    position: relative;
    left: 240px;
}
.section1 .content .row ul .lithree{
    margin-top: 84px;
    margin-right: 0;
    margin-left: 0px;
    position: relative;
    left: 234px;
}
.section1 .content .row ul .lifour{
	margin-right: -89px;
    margin-left: 89px;
    margin-top: 2px;
    position: relative;
    left: 13px;
}
.section1 .content .row ul .lione>div:hover{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/pic01.png) no-repeat;
}
.section1 .content .row ul .litow>div:hover{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/pic02.png) no-repeat;
}
.section1 .content .row ul .lithree>div:hover{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/pic03.png) no-repeat;
}
.section1 .content .row ul .lifour>div:hover{
	background: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/pic04.png) no-repeat;
}
.section1 .content .row ul li div{
	width: 150px;
    height: 150px;
    cursor: pointer;
    border-radius: 75px;
}




.section2 .content .game_feature .banner .pagination span {
    width: 50px;
    height: 10px;
}
.section2 .content .game_feature .banner .swiper-pagination{
    text-align: center;
}
.section2 .content .swiper-pagination-bullet{
	transform: skewX(-45deg);
    background:white;
    border-radius: 0;
}
.section2 .content  .swiper-pagination-bullet-active{
	transform: skewX(-45deg);
    background:#676aaa;
}
.section2 .content .swiper-container-horizontal>.swiper-pagination-bullets{
    bottom: 25px;
}
.section2 .content  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 11px;
}


/*  三屏  */
.section2 .content{
    position: absolute;
    left: 50%;
    margin-left: -597px;
    top:80px;
    width: 1200px;
    height: 700px;
}
.rightin{
    -webkit-animation: rightin 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-animation: rightin 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation: rightin 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation: rightin 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@keyframes rightin {
  0% {
    opacity: 0;
    transform: translate3d(600px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-100px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  100% {
    transform: none;
  }
}
.section2 .content .main{
    width: 18.5%;
    text-align: center;
    padding-top: 105px;
}
.section2 .content .main div{
    margin-top: 43px;
}
/* ************************  FAQ  **************************** */
.section3>.main{
    width: 1200px;
    margin: auto;
    margin-top: 630px;
    min-height: 1744px;
    height: 100%;
}
.section3>.main .guild{
    display: inline-block;
    vertical-align: top;
    width: 833px;
    height: 100%;
    float: right;
    margin-right: 75px;
}
.section3>.main .guild .empty_nav{
    background: #2b2117;
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
}
.section3>.main .guild .empty_nav .navfl{
    font-size: 27px;
    color: #d5d3d3;
    margin: 0 3rem 0 0.5rem;
}
.section3>.main .guild .empty_nav .navrq{
    font-size: 1rem;
    color: #958f8a;
    margin: 0 2rem 0.2rem 0;
}
.section3>.main .guild .empty_nav .navrq a{
    color: #958f8a;
}
.section3>.main .guild .empty_content{
    background: #2f2114;
    padding-bottom: 2rem;
    margin: 0.5rem 0 0 0;
    padding-top: 0;
}
.section3>.main .guild div{
    padding: 20px 30px 0 30px;
    color: #7f685e;
}
.section3>.main .guild h1{
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    padding: 20px 0 10px 0;
    color: #d0beb6;
    border-bottom: 1px solid #57443e;
}
.section3>.main .guild h4{
    font-size: 16px;
    font-weight: 600;
    text-indent: 2em;
    padding: 20px 0 20px 0;
}
.section3>.main .guild p{
    font-size: 15px;
    text-indent: 2em;
    line-height: 30px;
}
.section3>.main .guild  span img{
    width: 460px;
}

/**** 右侧 ****/
.section3>.main .nav{
    display: inline-block;
    width: 280px;
    height: 661px;
}
.section3>.main .nav .android img{
    margin-top: 10px;
}
.section3>.main .nav .QR_code{
    display: block;
    width: 240px;
    margin: auto;
    margin-top: 30px;
    text-align: center;
    font-size: 21px;
    color: #d0beb6;
}
.section3>.main .nav .QR_code img{
    display: block;
    width: 200px;
    margin: auto;

}
.swiper-button-prev{
	background-image: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/left.png);
	background-size: 100% 100%;
    width: 100px;
    height: 107px;
}
.swiper-button-next{
	background-image: url(http://91muzhicom-1251304591.file.myqcloud.com/pic/yzzhs/newimg/right.png);
	background-size: 100% 100%;
    width: 100px;
    height: 107px;
}
.swiper-button-next, .swiper-button-prev{
	top: 38%;
}



.common_mask{
	min-width: 320px;
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background: rgba(0,0,0,.9)!important;
	filter:Alpha(opacity=70);
}

/* 登录框 */
.common_main_log{
    width: 330px;
    height: 205px;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 100px;
    border-radius: 5px;
    display: none;
}
/* 注册框 */
.common_main_reg{
	width:330px;
	height:250px;
    margin: 0 auto;
	background-color:#fff;
	margin-top:80px;
	border-radius:5px;
	display: none;
}
.common_main_lr_top{
	width:100%;
	height:35px;
	line-height:35px;
	text-align:center;
	font-size:16px;
}
.common_main_lr_cue{
	width:100%;
	height:15px;
	line-height:15px;
	font-size:13px;
	color:red;
}/* 消息提示 */
.common_main_lr_un{
	margin-top:5px;
	width:86%;
	margin-left:7%;
	height:45px;
	background:url(http://cdn.91muzhi.com/h5sdk/img/login_username.jpg) no-repeat center center;
	background-size:100% 100%
}
.common_main_lr_text{
	height:45px;
	width:75%;
	margin-left:16%;
	margin-top:2px;
	font-size:14px;
	border: none;
	display: inherit;
	background: none;
	color:#666;
}
.common_main_lr_pw{
	margin-top:5px;
	width:86%;
	margin-left:7%;
	height:45px;
	background:url(http://cdn.91muzhi.com/h5sdk/img/login_password.jpg) no-repeat center center;
	background-size:100% 100%;
	display: inherit;
	color:#666;
}
.common_main_lr_d{
	height:50px;
	width:86%;
	margin-top:0px;
	margin-left:7%;
}
.common_main_lr_dl{
	width:50%;
	height:50px;
	float:left
}
.common_main_lr_dr{
	width:50%;
	height:50px;
	float:left;
	text-align:right
}
.common_main_lr_btn_log{
	border-radius: 4px;
	border: none;
	-webkit-appearance: none;
	height:38px;
	margin-top:6px;
	background-color: #E87936;
	font-size: 15px;
	color: #fff;
	width:85%;
	display: inherit;
}
.common_main_lr_btn_reg{
	border-radius: 4px;
	border: none;
	-webkit-appearance: none;
	height:38px;
	margin-top:6px;
	background-color: #4D88E1;
	font-size: 15px;
	color: #fff;
	width:85%;
	display: inherit;
}

.common_mask .js_modal{
	position: absolute;
	top:2rem;
	left: 50%;
	color: #fff;
	font-size: 0.4rem;
	text-align: center;
	line-height: 2em;
	padding-top: 0.7rem;
	margin-left: -45%;
	width: 90%;
	height: 3.3rem;
	/*background: url("../imgs/mobel.png");*/
	background-size: 100%;
	background-repeat: no-repeat;
}
.common_mask .js_modal span{
	color: #F9F325;
}
.common_main_box{
        width: 775px;
    height: 465px;
    border-radius: 10px;
    background: #dcc0de;
    margin-left: 27%;
    margin-top: 17%;
    display: block;
    font-size: 25px;
    padding: 45px 30px 20px 30px;
    position: absolute;
}
.common_main_box .common_main_box_lf{
	margin: 0.2rem;
}
.common_main_box .common_main_box_lf .common_main_box_title{
	    border-radius: 10px;
    border: 1px solid #dcc0de;
    background: #f58f98;
    color: #772d60;
    height: 70px;
    line-height: 70px;
    padding: 0 113px;
    display: inline-block;
    margin: 1% 4%;
}
.my_close{
	border: 2px solid #fff;
    color: #fff;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    height: 40px;
    width: 40px;
    font-size: 29px;
    position: absolute;
    top: 1%;
    left: 93%;
}
.my_close::before {
	content: "\2716";
}
.common_main_box_list{
	height: 300px;
    border-radius: 15px;
    margin: 20px 0;
    color: #fff;
    overflow-y: scroll;
    border: 1px solid #fff;
    line-height: 55px;
}
.common_main_box_list p{float: left;width: 50%;text-align: center;}
.common_main_box_list ul{text-align: center}
.common_main_box_list ul li{margin-top: 0.2rem;overflow: hidden}
.common_main_box_list ul li div{
	float: left;
	width: 2rem;
}
.common_main_box_list ul li .box_list{
	margin-left: 0.37rem;
}
.remind{
	background: #fff;
	width: 4rem;
	position: absolute;
	top: 3.5rem;
	left: 50%;
	margin-left: -2.5rem;
	border-radius: 0.1rem;
	font-size: 0.2rem;
	text-align: center;
	padding: 0.2rem 0.5rem;
}
.remind p{
	margin-bottom: 0.2rem;
}
.remind a{
	border-radius: 0.08rem;
	border-style: none;
	background: #87cefa;
	color: #fff;
	padding: 0.05rem 0.5rem;
}




.tinyBox {
				    width: 363px;
    height: 151px;
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 99999;
			}
			
.closeBox {
	float: right;
	display: inline-block;
	width: 30px;
	height: 30px;
	cursor: pointer
}

.sure_btn {
	width: 76px;
	height: 24px;
	border: none;
	text-align: center;
	line-height: 24px;
	float: right;
	margin-right: 20px;
	cursor: pointer;
	font-size: 14px;
	color: #252121;
	font-weight: bold
}

.messageBox {
    width: 243px;
	height: 50px;
	padding: 10px 0px;
	margin-top: -40px;
	text-align: left;
	font-size: 20px;
	color: #f3ecec;
	margin-left: 100px;
}
		
.ok {
	margin-top: 40px;
	margin-left: 30px;
	vertical-align: middle;
	width: 40px;
	height: 39px;
}

.mask_all {
    z-index: 9999;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	display: none;
}

.mask {
    width: 100%;
    text-align: center;
    position: fixed;
    top: 0;
    background: #000;
    opacity: 0.8;
    height: 100%;
    z-index: 9999;
    display: none;
}
.mask p {
    font-size: 100px;
    text-align: center;
    color: #fff;
    margin-top: 20%;
}
.mask span {
	color: #fff;
	font-size: 32px;
}
.mask .iecolse {
	width: 100px;
	height: 55px;
	line-height: 55px;
	border-radius: 10px;
	background-color: #bb3837;
	margin: 0 auto;
	margin-top: 20px;
	color: #FFFFFF;
	font-size: 24px;
	text-align: center;
	cursor: pointer;
}

/*剑上光芒*/
.corona {
    background: #fff;
    border-radius: 50%;
    box-shadow:inset 0 0 30px rgb(255, 255, 253), 0 0 40px 20px white, 0 0 60px 30px rgb(250, 215, 121);
    height: 5px;
    left: 35%;
    position: relative;
    top: 30%;
    -webkit-transform: translate(calc(-50% + 90px), -50%);
    transform: translate(calc(-50% + 90px), -50%);
    width: 120px;
    z-index: 3;
    transform: rotate(12deg);
    -webkit-animation: twinkling 3s infinite ease-in-out 
}
@-webkit-keyframes twinkling{
	0%{opacity: 0.3;}
	50%{opacity: 1;}
	100%{opacity: 0.3;}
} 
@keyframes twinkling{ 
	0%{opacity: 0.3;} 
	50%{opacity: 1;}
	100%{opacity: 0.3;}
}
.corona:before,
.corona:after {
    background: -webkit-linear-gradient(left, transparent 0%, white 50%, transparent 100%);
    background: linear-gradient(to right, transparent 0%, white 50%, transparent 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
    content: "";
    position: absolute;
}
.corona:before {
    height: 3px;
    left: -110px;
    opacity: .3;
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
    top: 3px;
    width: 300px;
}
.corona:after {
    height: 3px;
    left: -225px;
    opacity: .2;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    top: 10px;
    width: 500px;
}