@import '../css/swiper.min.css';

::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #a76b2b;
    font-size: 16px;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #a76b2b;
    font-size: 16px;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #a76b2b;
    font-size: 16px;
}

input:focus,
textarea:focus {
    outline: none;
}

button {
    display: block;
    font-size: 0;
    color: transparent;
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
}

.u-btn.dismiss,
.u-btn.disabled {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.u-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6;
    z-index: 999;
}

.form-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6;
    z-index: 999;
}

.u-btn.dismiss,
.u-btn.disable {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.u-loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.u-loading .content {
    min-width: 6em;
    padding: 4em 1em .5em 1em;
    margin: .1rem auto;
    color: #fff;
    text-align: center;
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #333;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 5px;
}

body {
    position: relative;
    box-sizing: border-box;
    height: 2860px;
    background-repeat: no-repeat;
    background-position: center 42px;
    background-color: #000;
    background-image: url(../images/body.jpg);
    overflow-x: hidden;
}

.u-btn {
    cursor: pointer;
}

.f-l {
    float: left;
}

.f-r {
    float: right;
}

.clearfix:after {
    content: "";
    /*内容设置为空！！！*/
    display: block;
    /*显示为块级元素！！！*/
    height: 0;
    visibility: hidden;
    clear: both;
    /*清除浮动！！！*/
}

@-webkit-keyframes moveFishUp {
    0% {
        -webkit-transform: translateY(-3%);
        transform: translateY(-3%);
    }

    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(3%);
        transform: translateY(3%);
    }
}

@-webkit-keyframes cloudUp {
    0% {
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%);
    }

    50% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
    }
}

@keyframes breath {
    from {
        opacity: 0.1;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0.1;
    }
}

.logo {
    position: absolute;
    top: 60px;
    left: 2%;
    width: 171px;
    height: 131px;
    background-image: url(../images/logo.png);
    z-index: 3;
    color: transparent;
    font-size: 0;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.m-title {
    /* display: none; */
    position: absolute;
    width: 100%;
    left: 0;
    top: 42px;
}

.m-title h2 {
    position: relative;
    width: 1285px;
    height: 543px;
    margin: 0 auto;
    background-image: url(../images/main-title.png);
}

/* view */
.m-viewport {
    position: relative;
    padding-top: 940px;
    padding-bottom: 200px;
    background-position: center -42px;
    background-repeat: no-repeat;
    z-index: 6;
}

.view-item>.title {
    margin: 0 auto 25px;
}

.view-item>.title.title-1 {
    width: 620px;
    height: 92px;
    background-image: url(../images/title-1.png);
}

.view-item>.title.title-2 {
    width: 554px;
    height: 96px;
    background-image: url(../images/title-2.png);
}

.m-game-reward {
    width: 686px;
    height: 188px;
    margin: 0 auto 85px;
    background-image: url(../images/img-game-reward.png);
}

.u-btn.form-trriger {
    position: relative;
    width: 260px;
    height: 79px;
    margin: 0 auto;
    background-image: url(../images/btn-evt.png);
    z-index: 10;
}

.gift-slide-body {
    width: 1013px;
    height: 586px;
    margin: -30px auto 0;
    background-image: url(../images/bg-slide.png);
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-next {
    position: absolute;
    right: 80px;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    background-image: url(../images/btn-slide-next.png);
    cursor: pointer;
    z-index: 20;
}

.swiper-prev {
    position: absolute;
    left: 50px;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    background-image: url(../images/btn-slide-prev.png);
    cursor: pointer;
    z-index: 20;
}

#swiper-pagination {
    bottom: 55px;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    opacity: 1;
    width: 15px;
    height: 15px;
    margin: 0 8px;
    background-color: #480f07;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #bd3131;
}

.gift-slide-btn {
    text-align: center;
}

.gift-slide-btn .u-btn {
    display: inline-block;
    width: 170px;
    height: 54px;
    font-size: 0;
    background-image: url(../images/sprite-tab.png);
}

.m-rule {
    width: 1029px;
    height: 357px;
    margin: 0 auto;
    background-image: url(../images/bg-rule.png);
}

.m-rule .title {
    width: 226px;
    height: 52px;
    margin: 0 auto 20px;
    background-image: url(../images/title-rule.png);
}

.m-rule .rule-container {
    padding: 70px 85px;
}

.m-rule p {
    position: relative;
    margin-bottom: 5px;
    padding-left: 35px;
    font-size: 16px;
    color: #90190d;
}

.m-rule .i-tag {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background-image: url(../images/icon-tag.png);
}

/* Modal */
.m-vip-form {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 816px;
    height: 492px;
    transform: translate(-50%, -50%);
    background-color: #670303;
    color: #fff;
    z-index: 1000;
}

.m-vip-form .form-header {
    padding: 8px 20px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, .4);
}

.m-vip-form .form-header .logout {
    margin-left: 40px;
    color: #01b4ff;
}

.m-vip-form .form-body {
    padding: 24px 30px 0;
}

.body-left .user-info {
    margin-bottom: 20px;
    font-size: 15px;
}

.body-left .user-info .area-name,
.body-left .user-info .user-name {
    color: #ffd800;
}

.body-left .user-info .vip-level {
    margin-left: 25px;
}

.body-left .user-info .level {
    color: #32be1b;
}

.m-vip-form .body-right {
    margin-right: 30px;
}

.m-vip-form .form-row {
    position: relative;
    padding-left: 115px;
}


.m-vip-form .body-left .form-row {
    margin-bottom: 20px;
}

.m-vip-form .body-right {
    padding-top: 42px;
}

.m-vip-form input[type=text] {
    display: inline-block;
    width: 225px;
    height: 45px;
    padding-left: 20px;
    line-height: 45px;
    font-size: 18px;
    color: #5d0d00;
    margin: 0 auto 10px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
}

.m-vip-form input[type="text"]:disabled {
    background-color: #dddddd;
}

.m-vip-form textarea:disabled {
    background-color: #dddddd;
}

.m-vip-form .checkbox {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 12px;
    background-image: url(../images/btn-radio-normal.png);
    vertical-align: middle;
    cursor: pointer;
}

.m-vip-form .checkbox.on {
    background-image: url(../images/btn-radio-on.png);
}

.m-vip-form input.phone-code {
    width: 112px;
    padding-left: 20px;
}

.m-vip-form .u-btn.phone-code {
    display: inline-block;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #e59156;
    border: 1px solid #e59156;
    border-radius: 5px;
}

.m-vip-form textarea {
    display: inline-block;
    width: 225px;
    height: 55px;
    padding: 10px 10px;
    font-size: 16px;
    color: #5d0d00;
    margin: 0 auto 10px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    resize: none;
}

.m-vip-form label {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 5em;
    padding-left: 1em;
    font-size: 16px;
    color: #fff;
    text-align: right;
}

.m-vip-form .i-need {
    display: inline-block;
    font-size: 20px;
    color: #ba3c3c;
    vertical-align: middle;
}

.m-vip-form .u-btn.submit {
    width: 142px;
    height: 62px;
    margin: 15px auto 10px;
    background-image: url(../images/btn-form-submit.png);
}

.m-vip-form .u-btn.submit.edit {
    background-image: url(../images/btn-form-edit.png);
}

.m-vip-form .notice {
    font-size: 14px;
    color: #905b49;
    text-align: center;
}

.form-sex {
    font-size: 18px;
}



/* aeraModal */
.area-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.area-modal .area-modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 528px;
    height: 450px;
    transform: translate(-50%, -50%);
    background-image: url(../images/bg-area.png);
    z-index: 1001;
}

.area-modal .area-view {
    position: relative;
    padding: 40px 50px 0;
}

.area-modal .area-view .user-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 518px;
    margin: 5px;
    padding: 8px 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, .4);
}

.area-modal .area-view .logout {
    margin-left: 40px;
    color: #01b4ff;
}

.area-modal h5 {
    margin-bottom: 30px;
    font-size: 32px;
    color: #fff;
    text-align: center;
}

.area-view .user-info {
    font-size: 14px;
    color: #fff;
}

.area-modal .area-item {
    position: relative;
    width: 340px;
    height: 42px;
    padding-left: 45px;
    line-height: 42px;
    font-size: 18px;
    color: #5d0d00;
    margin: 0 auto 10px;
    background-color: #fff;
    border-radius: 5px;
}

.area-modal .area-item .tag {
    display: none;
}

.area-modal .err-view {
    display: none;
    margin-top: 20px;
    margin-left: 100px;
}

.area-modal .err-view .i-notice {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 5px;
    background-image: url(../images/icon-notice.png);
    vertical-align: middle;
}

.area-modal .err-view p {
    display: inline-block;
    font-size: 16px;
    color: #ffdf7d;
    vertical-align: middle;
}

.query-result {
    text-align: center;
}

.query-result .result-item {
    display: inline-block;
    position: relative;
    width: 180px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 18px;
    color: #5d0d00;
    margin: 0 auto 10px;
    background-color: #fff;
    border-radius: 5px;
    vertical-align: middle;
}

.query-result .result-item.player-name {
    margin-right: 25px;
}

.area-item .u-list {
    display: none;
    position: absolute;
    top: 48px;
    left: 50%;
    width: 245px;
    transform: translateX(-50%);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    z-index: 2;
}

.area-item .u-list li {
    height: 40px;
    line-height: 40px;
}

.area-item .u-list li:hover {
    background-color: #5d0d00;
}

.area-item .u-list a {
    padding-left: 15px;
    font-size: 18px;
    color: #5d0d00;
}

.area-item .u-list li:hover a {
    color: #fff;
}

.area-modal .u-btn.submit {
    width: 142px;
    height: 62px;
    margin: 15px auto 10px;
    background-image: url(../images/btn-area-submit.png);
}

.area-modal .notice {
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color: #9e7676;
}

.u-btn.close {
    position: absolute;
    top: 0;
    right: -52px;
    width: 52px;
    height: 52px;
    background-image: url(../images/btn-area-close.png);
}

.gift-slide-btn .u-btn.tab-3.active {
    background-position: -0px -0px;
}

.gift-slide-btn .u-btn.tab-3 {
    background-position: -170px -0px;
}

.gift-slide-btn .u-btn.tab-2.active {
    background-position: -340px -0px;
}
.gift-slide-btn .u-btn.tab-2 {
    background-position: -0px -54px;
}

.gift-slide-btn .u-btn.tab-1.active {
    background-position: -170px -54px;
}

.gift-slide-btn .u-btn.tab-1 {
    background-position: -340px -54px;
}