body, button, input, select, textarea {
	font-family: '微软雅黑';
}
body {
    color: #efd984;
    font-size: 15px;
}
.body-innerwapper {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	position: relative;
}
.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    font-size: 0;
}
img {
	display: block;
	width: 100%;
}
i {
    font-style: normal;
}
input:focus {
    outline: none;
}
/*===================================
*border-box
===================================*/
.reg-area-content span, .reg-area-content li, #phone, .game-frame-bg, .gift-box-bg, .user-phone input,.bg-title,.gift-group > img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
/***********
*animate
********/
.icon,.btn,.gift-foot .back-top {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.section {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.section.bg1 {
	height: 972px;
	background: url(../images/20180417b_bg01_1920x972.jpg) center top no-repeat;
	background-size: auto 100%;
}
.section.bg2 {
	height: 1354px;
	background: url(../images/20180417b_bg02_1920x1354.jpg) center top no-repeat;
	background-size: auto 100%;
}
.section.bg3 {
    height: 1877px;
    background: url(../images/20180417b_bg03_1920x1877.jpg) center top no-repeat;
    background-size: auto 100%;
}
.section.bg4 {
    height: 2140px;
    background: url(../images/20180417b_bg04_1920x2140.jpg) center top no-repeat;
    background-size: auto 100%;
}
/*===============
* Public style
*================*/
.mid {
	position: relative;
	max-width: 1260px;
	width: 100%;
	margin: 0 auto;
}
.icon {
	display: block;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
    text-indent: -9999px;
    opacity: 1;
}
.icon:hover {
	opacity: .8;
}
.btn {
    display: block;
    margin: 0 auto;
    text-indent: -9999px;
    opacity: 1;
}
.btn:hover {
    opacity: .8;
}
.row {
	width: 100%;
	position: relative;
	margin-bottom: 20px;
	text-align: center;
}
.txt-center {
    text-align: center;
}
.txt-left {
    text-align: left;
}
.mt-28 {
    margin-top: 28px;
}
.mt-35 {
    margin-top: 35px;
}
.mt-75 {
    margin-top: 75px;
}
.mt-105 {
    margin-top: 105px;
}
.mt--35 {
    margin-top: -35px;
}
.on {
    opacity: 1 !important;
}
.dim,.btn.dim:hover {
    opacity: .2;
}
.breath {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-name: breathe;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/*===================================
* Foot
===================================*/
.footer {
    background-color: #280000;
    padding-bottom: 20px;
}
.foot-content {
    padding-top: 6px;
}
.cr {
    position: relative;
    margin: 25px 0;
    margin-left: 37%;
    padding-left: 135px;
    text-align: left;
}
.cr a, .cr p {
    line-height: 35px;
    font-size: 15px;
    color: #c3c3c3;
    margin-right: 25px;
}
.cr a {
	visibility: hidden;
}
.cr img {
    position: absolute;
    z-index: 2;
    top: -5px;
    left: 0;
    width: 80px;
    height: 79px;
}
/*===================================
 * Pop up Player wrapper
===================================*/
.video_player {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10011;
    background: #000;
    display: none;
}
.img_close, .video_close {
    font: 700 24px/32px "Helvetica Neue",Helvetica,STHeiTi,sans-serif;
    width: 32px;
    height: 32px;
    background: #000;
    color: #869f22;
    position: fixed;
    right: 2%;
    top: 2%;
    z-index: 10012;
    text-align: center;
    display: none;
    cursor: pointer;
}
.video_player_bg {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    background: #000;
}
.vd_container {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 1;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.vd_container * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.video_player iframe {
    position: absolute;
    border: 0;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 854px;
    height: 480px;
    margin:-240px 0 0 -427px;
}
/**
 * Main body
 **/
.icon-play {
    margin-top: 160px;
    margin-left: 160px;
    width: 146px;
    height: 146px;
    background: url(../images/play_146x146.png) no-repeat;
}
.btn-submit {
    float: left;
    width: 325px;
    height: 89px;
    background: url(../images/submit.png) no-repeat;
    margin-left: 28px;
}
.reg-nums {
    margin: 95px 0 50px;
    font-size: 80px;
    line-height: 92px;
    text-shadow: 2px 2px 5px #000;
}
#reg-num {    
    margin-left: 60px;
}
.reg-input-content,.reg-area-content,.reg-phone-content {
    float: left;
}
.reg-input-content {
    font-size: 32px;  
    margin-left: 76px;
    position: relative;
}
.reg-area-content span {
    display: block;
    width: 173px;
    line-height: 85px;
    border: 2px solid #cb9248;
    background: #2d2a24;
    cursor: pointer;
}
.reg-area-content i {
    margin-left: 11px;
}
.reg-area-content ul {
    display: none;
    position: absolute;
    z-index: 2;
    width: 173px;
}
.reg-area-content li {
    float: left;
    width: 100%;
    border: 2px solid #cb9248;
    border-top: none;
    line-height: 62px;
    background-color: #1b1912;
    cursor: pointer;
}
#phone {
    width: 575px;
    height: 89px;
    line-height: 85px;
    border: 2px solid #cb9248;
    border-left: 0;
    padding-left: 35px;
    background-color: #1b1912;
    color: #efd984;
}
.reg-tips {
    margin-left: 30%;
    font-size: 19px;
    color: #efd984;
    line-height: 37px;
}
.reg-tips span {
    color: #826f57;
    padding-left: 8px;
}
.reg-tips span i {
    position: relative;
    display: block;
    width: 31px;
    height: 31px;
    background: url(../images/tips.png) no-repeat;
    float: left;
    top: 3px;
}
.btn-search, .pop-search {
    width: 231px;
    height: 70px;
    background: url(../images/search.png) no-repeat;
}
.btn-start {
    width: 231px;
    height: 70px;
    background: url(../images/start_231x70.png) no-repeat;
}
.btn-retry {
    width: 231px;
    height: 70px;
    background: url(../images/retry_231x70.png) no-repeat;
}
.btn-next {
    width: 147px;
    height: 78px;
    background: url(../images/arrow.png) no-repeat;
}
.game-frame-bg {
    position: relative;
    z-index: 2;
    top: 0;
    left: 50%;
    margin-left: -632px;
    width: 1264px;
    height: 674px;
    padding: 25px;
    background: url(../images/180418_slide01_1264x674.png) no-repeat;
}
.game-pos {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}
.choose-item {
    position: absolute;
    cursor: pointer;
}
.choose-item > img {
    width: 198px;
    height: 198px;
}
.choose-item:hover .pop-img {
    display: block;
}
.part_1 .item-1 {
    top: 150px;
    left: 250px;
}
.part_1 .item-2 {
    bottom: 116px;
    right: 280px;
}
.part_2 .item-1 {
    top: 150px;
    left: 250px;
}
.part_2 .item-2 {
    bottom: 116px;
    right: 280px;
}
.part_3 .item-1 {
    top: 70px;
    left: 245px;
}
.part_3 .item-2 {
    top: 101px;
    right: 260px;
}
.part_3 .item-3 {
    left: 305px;
    bottom: 57px;
}
.choose-btn {
    bottom: 110px;
    left: 0;
    width: 100%;
    position: absolute;
}
.part_0 .choose-btn, .part_10 .choose-btn {
    bottom: 20px
}
.pop-img {
    display: none;
    position: absolute;
    z-index: 4;
    top: -30px;
}
.pop-img > img {
    width: 415px;
    height: 254px;
}
.part_1 .item-1-pop, .part_2 .item-1-pop, .part_2 .item-3-pop, .part_3 .item-1-pop, .part_3 .item-3-pop {
    right: -425px;
}
.part_1 .item-2-pop, .part_2 .item-2-pop, .part_3 .item-2-pop {
    left: -425px;
}
.game-tips {
    color: #daaf61;
    margin-top: 50px;
}
.game-tips h3 {
    font-size: 36px;
}
.game-tips p {
    margin-left: 30%;
    margin-top: 17px;
    line-height: 37px;
    font-size: 19px;
}
.gift-group {
    position: relative;
    width: 877px;
    margin: 0 auto;
}
.gift-group > img {
    margin-left: -20px
}
.btn-fb-share {
    width: 190px;
    height: 54px;
    background: url(../images/fb_share.png) no-repeat;
    bottom: 25%;
    top: auto;
    margin-left: -95px;
}
.share-container {
    position: relative;
    margin-top: 215px;
    overflow: hidden;
}
.like-group {
    width: 308px;
    margin-left: 258px;
    float: left;
}
.share-group {
    width: 363px;
    margin-left: 75px;
    float: left;
}
.like-group h2, .share-group h2 {
    width: 100%;
    color: #564b59;
    font-size: 53px;
    margin-bottom: 40px;
}
.like-group a {
    display: block;
    height: 78px;
}
.share-group ul {
    overflow: hidden;
}
.share-group li {
    float: left;
    margin-right: 20px;
}
.share-group li:last-child {
    margin-right: 0;
}
.share-group li a {
    display: block;
    width: 74px;
    height: 74px;
}
.share-group li a.fb-share {    
    background: url(../images/share_fb_74x74.png) no-repeat;
}
.share-group li a.tw-share {
    background: url(../images/share_tw_74x74.png) no-repeat;
}
.share-group li a.yt-share {
    background: url(../images/share_yt_74x74.png) no-repeat;
}
.share-group li a.line-share {
    background: url(../images/share_line_74x74.png) no-repeat;
}
.gift-foot {
    position: relative;
    width: 100%;
    margin-top: 65px;
}
.gift-foot .back-top {
    display: block;
    margin: 0 auto;
    width: 214px;
    height: 55px;
    line-height: 53px;
    color: #8b8bb0;
    border: 1px solid #8b8bb0;
    font-size: 17px;
}
.gift-foot .back-top:hover {
    background-color: #8b8bb0;
    color: #fff;
}
.bg-title {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 59px;
    padding-left: 40px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-weight: 400;
    text-align: left;
    font-size: 23px;
    text-shadow: 2px 2px #000;
}
/*===============
* 彈窗
*================*/
.pop-mask {
    position: fixed;
    z-index: 99998;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    top: 0;
    left: 0;
    display: none;
    cursor: pointer;
}
.gift-online {
    display: none;
    position: absolute;
    top: 20%;
    width: 100%;
}
.gift-code-bg {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 645px;
    height: 401px;
    background: url(../images/180419_pop_bg_645x401.png) no-repeat;
    margin-left: -322.5px;
    cursor: auto;
}
.gift-online img {
    max-width: 645px;
    width: 645px;
    height: auto;
    margin: 0 auto;
}
.gift-code-wp {
    margin-top: 115px;
    color: #140000;
    font-weight: 600;
    font-size: 33px;
}
.pop-mask.go .gift-online {
    display: block;
}
.pop-mask.go .gift-code-bg {
    display: none;
}
.step-1 .user-phone, .step-2 .user-code {
    display: block;
}
.step-2 .user-phone, .step-1 .user-code {
    display: none;
}
.user-phone input {
    width: 50%;
    margin: 0 auto;
    font-size: 23px;
    padding: 3px 8px;
}
.download-container {
    margin: 0 auto;
}
.download-container .btn {
    display: inline-block;
    width: 285px;
    height: 84px;
}
.download-container .btn-ios {
    background: url(../images/ios_download.png) no-repeat;
}
.download-container .btn-gg {
    background: url(../images/android_download.png) no-repeat;
}
.mb-mt img {
    display: none;
}
.video-bg-wrapper {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#videohome {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: auto;
    max-width: 100%;
    height: 100%;
    z-index: -1;
    margin: auto auto;
    object-fit: cover;
    padding: 0;
}
.mb-bg {
    display: none;
}
/*================
* 轮播
*===============*/
.slide {
    position: relative;
}
.mptab {
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -360px;
    width: 720px;
    height: 53px;
    background: url(../images/slide_bg.png) no-repeat;
    z-index: 10;
}
.mptab li {
    width: 120px;
    line-height: 53px;
    float: left;
    margin: 0 30px;
    font-size: 18px;
    color: #666;
    text-align: center;
    cursor: pointer;
}
.mptab li.on {
    background: url(../images/mptabbg_0d45006.png) no-repeat;
    background-size: 100% 100%;
    color: #f87970;
}
.mptab li:hover {
    background: url(../images/mptabbg_hover.png) no-repeat;
    background-size: 100% 100%;
    color: #f87970;
}
.g-animEle1, .g-animEle2 {
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
}
.g-animEle1 {
    -webkit-transition: all .8s ease-out .3s;
    -moz-transition: all .8s ease-out .3s;
    -ms-transition: all .8s ease-out .3s;
    -o-transition: all .8s ease-out .3s;
    transition: all .8s ease-out .3s;
}
.mpcon {
    position: relative;
    width: 1200px;
    height: 900px;
    margin: 100px auto 0;
    z-index: 5;
}
.mpcon .list .mptext {
    display: none;
    position: absolute;
    width: 357px;
    height: 170px;
    top: 65px;
    left: 0;
}
.mpcon .list.on .mptext {
    display: block;
    -webkit-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -moz-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -ms-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -o-animation: left_out .5s linear 0s 1 alternate forwards;
    -webkit-animation: left_out .5s linear 0s 1 alternate forwards;
    -moz-animation: left_out .5s linear 0s 1 alternate forwards;
    -ms-animation: left_out .5s linear 0s 1 alternate forwards;
    animation: left_out .5s linear 0s 1 alternate forwards;
}
.mpcon .list.list1 .mptext {
    background: url(../images/slide/180427_bxt_357x170.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list.list2 .mptext {
    background: url(../images/slide/180427_bhg_357x170.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list.list3 .mptext {
    background: url(../images/slide/180427_lqg_357x170.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list.list4 .mptext {
    background: url(../images/slide/180427_tbf_357x170.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list .video-btn {
    position: relative;
    display: none;
    width: 280px;
    height: 160px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.mpcon .list.on .video-btn {
    display: block;
    -webkit-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -moz-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -ms-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -o-animation: left_out .5s linear 0s 1 alternate forwards;
    -webkit-animation: left_out .5s linear 0s 1 alternate forwards;
    -moz-animation: left_out .5s linear 0s 1 alternate forwards;
    -ms-animation: left_out .5s linear 0s 1 alternate forwards;
    animation: left_out .5s linear 0s 1 alternate forwards;
}
.mpcon .list .juese {
    display: none;
    position: absolute;
}
.mpcon .list.on .juese {
    display: block;
    -webkit-animation: fade .3s linear 0s 1 alternate forwards 300ms 0 ease;
    -moz-animation: fade .3s linear 0s 1 alternate forwards 300ms 0 ease;
    -ms-animation: fade .3s linear 0s 1 alternate forwards 300ms 0 ease;
    animation: fade .3s linear 0s 1 alternate forwards 300ms 0 ease;
    -o-animation: fade .3s linear 0s 1 alternate forwards;
    -webkit-animation: fade .3s linear 0s 1 alternate forwards;
    -moz-animation: fade .3s linear 0s 1 alternate forwards;
    -ms-animation: fade .3s linear 0s 1 alternate forwards;
    animation: fade .3s linear 0s 1 alternate forwards;
}
.mpcon .list.list1 .juese {
    width: 1180px;
    height: 1000px;
    background: url(../images/slide/180427_bxt_role.png) no-repeat;
    background-size: 100% 100%;
    top: -70px;
    left: 0;
}
.mpcon .list.list2 .juese {
    width: 1180px;
    height: 1000px;
    background: url(../images/slide/180427_bhg_role.png) no-repeat;
    background-size: 100% 100%;
    top: -70px;
    left: 0;
}
.mpcon .list.list3 .juese {
    width: 1180px;
    height: 1000px;
    background: url(../images/slide/180427_lqg_role.png) no-repeat;
    background-size: 100% 100%;
    top: -70px;
    left: 0;
}
.mpcon .list.list4 .juese {
    width: 1180px;
    height: 1000px;
    background: url(../images/slide/180427_tbf_role.png) no-repeat;
    background-size: 100% 100%;
    top: -70px;
    left: 0;
}
.mpcon .list .mpdw {
    display: none;
    position: absolute;
    width: 334px;
    height: 720px;
    top: 110px;
    right: 0;
}
.mpcon .list.on .mpdw {
    display: block;
    -webkit-animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -moz-animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -ms-animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
    -o-animation: right_out .5s linear 0s 1 alternate forwards;
    -webkit-animation: right_out .5s linear 0s 1 alternate forwards;
    -moz-animation: right_out .5s linear 0s 1 alternate forwards;
    -ms-animation: right_out .5s linear 0s 1 alternate forwards;
    animation: right_out .5s linear 0s 1 alternate forwards;
}
.mpcon .list.list1 .mpdw {
    background: url(../images/slide/180427_bxt_info.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list.list2 .mpdw {
    background: url(../images/slide/180427_bhg_info.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list.list3 .mpdw {
    background: url(../images/slide/180427_lqg_info.png) no-repeat;
    background-size: 100% 100%
}
.mpcon .list.list4 .mpdw {
    background: url(../images/slide/180427_tbf_info.png) no-repeat;
    background-size: 100% 100%
}
.fix-bottom {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 19px;
    z-index: 99999;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: down_in;
    -webkit-animation-duration: 1.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-name: down_in;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
.fix-bottom span {
    display: block;
    width: 82px;
    height: 95px;
    margin: 0 auto;
    background: url(../images/arrow_down.png) no-repeat;
}
@-webkit-keyframes down_in {
    0% {
        opacity: 1;
    }
    100% {
        bottom: 0;
        opacity: 0;
    }
}
@keyframes down_in {
    0% {
        opacity: 1;
    }
    100% {
        bottom: 0;
        opacity: 0;
    }
}
@-webkit-keyframes breathe {
    0% {
        opacity: .5;
    }
    100% {
        opacity: .9;
    }
}
@-moz-keyframes breathe {
    0% {
        opacity: .5;
    }
    100% {
        opacity: .9;
    }
}
@-ms-keyframes breathe {
    0% {
        opacity: .5;
    }
    100% {
        opacity: .9;
    }
}
@-o-keyframes breathe {
    0% {
        opacity: .5;
    }
    100% {
        opacity: .9;
    }
}
@keyframes breathe {
    0% {
        opacity: .5;
    }
    100% {
        opacity: .9;
    }
}

@-webkit-keyframes left_out {
    0% {
        -o-transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes left_out {
    0% {
        -o-transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes left_out {
    0% {
        -o-transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes left_out {
    0% {
        -o-transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes left_out {
    0% {
        -o-transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}
@-webkit-keyframes fade {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes fade {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes fade {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes fade {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes fade {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes right_out {
    0% {
        -o-transform: translateX(100px);
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes right_out {
    0% {
        -o-transform: translateX(100px);
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes right_out {
    0% {
        -o-transform: translateX(100px);
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes right_out {
    0% {
        -o-transform: translateX(100px);
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes right_out {
    0% {
        -o-transform: translateX(100px);
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        -o-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@media screen and (min-width: 720px) and (max-width: 1180px) {
    #phone {
        width: 425px;
    }
    .btn-submit {
        width: 280px;
        background-size: 100% auto;
    }
    .reg-tips,.game-tips p {
        margin-left: 20%;
        font-size: 27px;
        line-height: 52px;
    }
    .reg-tips span i {
        top: 13px;
    }
    .game-frame-bg {
        width: 100%;
        height: auto;
        left: 0;
        margin-left: 0;
        background-size: 100% 100%;
    }
    .share-container {
        margin-top: 250px;
    }
    .like-group {
        margin-left: 170px;
    }
    .share-group {
        margin-left: 140px;
    }
    .download-container .btn {
        width: 210px;
        height: 62px;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 720px) {
    .row {
        margin-bottom: 0.5333333333333333rem;
    }
    .mt-28 {
        margin-top: 0.7466666666666667rem
    }
    .mt-35 {
        margin-top: 0.9333333333333333rem
    }
    .mt-75 {
        margin-top: 2rem;
    }
    .game-frame-bg.mt-75 {
        margin-top: 0;
    }
    .section.bg1 {
        height: 36.88rem;
        background: url(../images/20180417b_m_bg01_750x1383.jpg) center top no-repeat;
        background-size: 100% auto;
    }
    .section.bg2 {
        height: 40.18666666666667rem;
        background: url(../images/20180417b_m_bg02_750x1507.jpg) center top no-repeat;
        background-size: 100% auto;
    }
    .section.bg3 {
        height: 53.306666666666665rem;
        background: url(../images/20180417b_m_bg03_750x1999.jpg) center top no-repeat;
        background-size: 100% auto;
    }
    .section.bg4 {
        height: 57.70666666666666rem;
        background: url(../images/20180417b_m_bg04_750x2164.jpg) center top no-repeat;
        background-size: 100% auto;
    }
    .icon-play {
        margin-top: 2.7rem;
        margin-left: 3.2rem;
        width: 3.8933333333333335rem;
        height: 3.8933333333333335rem;
        background-size: 100% 100%;
    }
    .reg-nums {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    #reg-num {
        display: block;
        margin-left: 0;
    }
    .reg-input-content {
        font-size: 0.8533333333333334rem;
        width: 100%;
        padding: 0 0.32rem;
        margin-left: 0;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .reg-area-content span, .reg-area-content li {
        width: 4.613333333333333rem;
        line-height: 2.2666666666666666rem;
    }
    #phone {
        width: 14.533333333333333rem;
        line-height: 2.2666666666666666rem;
        height: auto;
        border-radius: 0;
    }
    .reg-tips {
        width: 90%;
        margin: 0 auto;
        line-height: 2rem;
        font-size: 0.5066666666666667rem;
    }
    .reg-tips span i {
        width: 0.8266666666666667rem;
        height: 0.8266666666666667rem;
        background-size: 100% 100%;
        top: 0.56667rem;
    }
    .btn-submit {
        margin-top: 0.8rem;
        margin-left: 30%;
        width: 8.666666666666666rem;
        height: 2.48rem;
        background-size: 100% 100%;
    }
    .btn-search, .pop-search, .btn-start {
        width: 6.16rem;
        height: 1.8666666666666667rem;
        background-size: 100% 100%;
    }
    .game-frame-bg {
        width: 20rem;
        height: 16.64rem;
        background-size: 100% 100%;
        margin-left: -10rem;
        padding: 0.6666666666666666rem;
    }
    .part_1 .item-1 {
        top: 1.7866666666666666rem;
        left: 2.666666666666667rem;
    }
    .part_1 .item-2 {
        bottom: 3.0933333333333333rem;
        right: 2.466666666666667rem;
    }
    .part_2 .item-1 {
        top: 2rem;
        left: 2.666666666666667rem;
    }
    .part_2 .item-2 {
        bottom: 3.0933333333333333rem;
        right: 2.466666666666667rem;
    }
    .part_2 .item-3 {
        top: 2.24rem;
        left: 7.36rem;
    }
    .part_3 .item-1 {
        top: 1.8666666666666667rem;
        left: 6.533333333333333rem;
    }
    .part_3 .item-2 {
        top: 2.6933333333333334rem;
        right: 2.933333333333334rem;
    }
    .part_3 .item-3 {
        left: 2.133333333333333rem;
        bottom: 1.52rem;
    }
    .choose-item > img {
        width: 5.28rem;
        height: 5.28rem;
    }
    .btn-retry {
        width: 6.16rem;
        height: 1.8666666666666667rem;
        background-size: 100% 100%;
    }
    .game-tips {
        margin-top: 2.8rem;
    }
    .game-tips h3 {
        font-size: 0.96rem;
    }
    .game-tips p {
        font-size: 0.5066666666666667rem;
        width: 92%;
        margin: 0 auto;
        margin-top: 0.4533333333333333rem;
        line-height: 1.2rem;
    }
    .gift-group {
        width: 100%;
    }
    .gift-group > img {
        margin-left: 0;
        padding: 0 0.8rem;
    }
    .reg-nums {
        margin: 2.533333333333333rem 0 1.3333333333333333rem;
    }
    .btn-fb-share {
        width: 5.066666666666666rem;
        height: 1.44rem;
        background-size: 100% 100%;
        margin-left: -2.533333333rem
    }
    .mptab {
        width: 100%;
        height: 1.44rem;
        margin-left: 0;
        left: 0;
        background-size: 100% 100%;
    }
    .mptab li {
        width: 3.2rem;
        line-height: 1.44rem;
        margin: 0 0.9rem;
        font-size: 0.48rem;
    }
    .mpcon {
        width: 100%;
        height: 28rem;
        margin: 2.6666666666666665rem auto 0;
    }
    .mpcon .list .mptext {
        width: 9.52rem;
        height: 4.533333333333333rem;
        top: 1.7333333333333334rem;
    }
    .mpcon .list .video-btn {
        width: 7.466666666666667rem;
        height: 4.266666666666667rem;
    }
    .mpcon .list .mpdw {
        width: 8.906666666666666rem;
        height: 19.2rem;
        top: 8.4rem;
    }
    .mpcon .list.list1 .juese, .mpcon .list.list2 .juese, .mpcon .list.list3 .juese, .mpcon .list.list4 .juese  {        
        width: 24.533333333333335rem;
        height: 20.8rem;
        left: 50%;
        top: 5.866667rem;
        margin-left: -12.2666666rem;
    }

    .share-container {
        margin-top: 4.8rem;
    }
    .like-group {
        /*width: 8.213333333333333rem;
        margin-left: 5.88rem;*/
        width: 100%;
        padding: 0 3.88rem;
        margin: 0;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .like-group h2, .share-group h2 {
        font-size: 1.4133333333333333rem;
        margin-bottom: 0.92666666666666667rem;
    }
    .share-group {
        /*margin-left: 1.5rem;*/
        width: 100%;
        padding: 0 2rem;
        margin: 0;
        margin-top: 0.8533333333333334rem;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .share-group ul {
        width: 9.68rem;
        margin: 0 auto;
    }
    .share-group li {
        margin-right: 0.5333333333333333rem;
    }
    .share-group li a {
        width: 1.9733333333333334rem;
        height: 1.9733333333333334rem;
        background-size: 100% 100%!important;
    }
    .gift-foot {
        display: none;
    }
    .footer {
        padding: 0.56rem;
    }
    .cr {
        margin: 1rem 0;
        margin-left: 20%;
        padding-left: 3rem;
    }
    .cr a, .cr p {
        line-height: 0.9333333333333333rem;
        font-size: 0.4rem;
    }
    .cr img {
        width: 2.1333333333333333rem;
        height: 2.1333333333333333rem;
        top: -15px;
        left: 10px;
    }
    .cr a {
        display: none;
    }
    .mb-mt {
        position: relative;
    }
    .mb-mt img {
        display: block;
        width: 3.546666666666667rem;
        height: 3.546666666666667rem;
        margin: 0 auto;
        margin-bottom: 11px;
    }
    .choose-btn, .part_10 .choose-btn {
        bottom: 0.933333333333333rem;
    }
    .pop-img {
        top: -0.8rem;
    }
    .pop-img > img {
        width: 11.066666666666666rem;
        height: 6.773333333333333rem;
    }
    .part_1 .item-1-pop, .part_2 .item-1-pop, .part_2 .item-3-pop, .part_3 .item-1-pop, .part_3 .item-3-pop {
        right: -11.333333333333334rem;
    }
    .part_1 .item-2-pop, .part_2 .item-2-pop, .part_3 .item-2-pop {
        left: -11.333333333333334rem;
    }
    .gift-code-bg {
        left: 0;
        width: 100%;
        height: 10.693333333333333rem;
        background-size: 100% 100%;
        margin: 0;
    }
    .gift-code-wp {
        margin-top: 3.066666666666667rem;
        font-size: 0.88rem;
    }
    .user-phone input {
        width: 78%;
        font-size: 0.6133333333333333rem;
    }
    .gift-online img {
        width: 100%;
    }
    .gift-pos-box {
        position: fixed;
        top: 20%;
        left: 0;
        width: 100%;
        margin: 0;
    }
    .video_player iframe {
        width: 100%;
        height: 8.533333333333333rem;
        top: 50%;
        left: 0;
        margin: 0;
        margin-top: -4.25rem;
    }
    .bg-title {
        line-height: 1.5733333333333333rem;
        font-size: 0.6133333333333333rem;
        padding-left: 0;
        text-align: center;
    }
    .reg-area-content ul {
        width: 4.613333333333333rem;
    }
    .download-container {
        display: none;
    }
    .video-bg-wrapper {
        display: none;
    }
    .btn-next {
        width: 3.92rem;
        height: 2.08rem;
        background-size: 100% 100%;
    }
    .part_0 .choose-btn {
        bottom: 0
    }
    .game-pos > img {
        display: none;
    }
    .mb-bg {
        display: block !important;
    }
    .fix-bottom {
        display: block;
        bottom: 2.1333333333333333rem;
    }
    .fix-bottom span {
        width: 3.84rem;
        height: 2.16rem;
        background-size: 100% 100%;
    }
}