game-sdk/public/static/web/pc/css/index.min.scss

/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
@import 'swiper.css';

// 主题色
$mainColor: #23B0CB; // #FD6A21
$headerColor: #333333;
$headerColor-active: #23B0CB; // #9B427A
// 按钮色
$btnColor: #09B6FC;
// Tab边框颜色
$tabBorderColor: #CC3333;

// --------------------------------- base.css --------------------------------- <
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}img:hover{filter:Alpha(opacity=0)}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset,div,a{margin:0;padding:0;box-sizing:border-box;border:0}address,cite,dfn,em,b,i,u,s{font-weight:normal;font-style:normal}ul,ol,li{list-style:none}a{text-decoration:none;color:inherit}body{background-color:#f4f4e6;font-family: Tahoma,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif!important;font-size:14px;color:#666;line-height:1;min-width:1080px}button{outline:0;cursor:pointer}.clearfix:before{clear:both;content:'';display:table}.clearfix:after{clear:both;content:'';display:table}
a {
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  -ms-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
  &:hover {
    color: $mainColor;
  }
}
.u {
  &-redColor {
    color: #FF0000 !important
  }
  &-blurColor {
    color: #000099
  }
  &-layoutDiv {
    width: 100%;
    position: relative
  }
  &-FullMask {
    position: fixed;
    z-index: 99;
    width: 100%;
    display: none;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
  }
  &-leftBox {
    float: left;
    width: 680px
  }
  &-rightBox {
    float: right;
    width: 326px
  }
  &-mainFontColor {
    color: #FF9933
  }
  &-mainBgColor {
    background-color: #FF6600
  }
  &-stars {
    margin-left: 8px;
    img {
      width: 15px;
      height: 15px
    }
  }
  &-mb200 {
    margin-bottom: 200px
  }
  &-height30 {
    height: 30px;
    width: 100%
  }
  &-border-rd__10 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  &-border__none {
    border: none
  }
  &-bg__FFFFFF {
    background: #FFFFFF !important;
  }
  &-mt190 {
    margin-top: 190px
  }
  &-Tab {
    position: relative;
    height: 50px;
    &:before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 1px;
      background: #EEEEEE
    }
    ul {
      width: 100%;
      position: absolute;
      li {
        float: left;
        padding:0 25px;
        cursor: pointer;
        font-weight: 100;
        font-size: 20px;
        color: #333333;
        text-align: center;
        height: 50px;
        line-height: 50px
      }
      .active {
        border-bottom: 3px solid $tabBorderColor
      }
    }
    &_more {
      position: absolute;
      right: 10px;
      height: 50px;
      display: block;
      line-height: 60px;
      font-size: 14px;
      text-decoration: dashed;
      color: #999999;
      a {
        text-decoration: underline
      }
    }
  }
  &-gameBlock {
    img {
      width: 100px;
      margin-right: 17px;
      height: 100px;
      display: block
    }
    &_msg {
      padding-top: 7px;
      h4 {
        font-weight: 400;
        font-size: 17px;
        color: #333333;
        overflow: hidden;
        width: 96px;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 22px;
        margin-bottom: 5px
      }
      p {
        font-size: 12px;
        margin-bottom: 5px;
        max-width: 96px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #999999;
        vertical-align: bottom;
        b {
          font-size: 16px
        }
      }
    }
  }
  &_button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 2px 9px;
    background: $btnColor;
    margin-top: 5px;
    color: #FFFFFF;
    font-size: 14px;
  }
  &-title {
    overflow: hidden;
    padding: 0 18px;
    height: 50px;
    h2 {
      font-weight: 100;
      line-height: 50px;
      font-size: 20px;
      color: #333333;
      float: left
    }
    a {
      line-height: 55px;
      float: right;
      color: #FF9933;
      font-size: 14px
    }
  }
  // 首页精品
  &-Boutique {
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -103px);
    -moz-transform: translate(-50%, -103px);
    -ms-transform: translate(-50%, -103px);
    -o-transform: translate(-50%, -103px);
    transform: translate(-50%, -103px);
    &_button {
      cursor: pointer;
      width: 30px;
      height: 30px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      background: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      img {
        display: block;
        margin-top: 5px;
        width: 20px;
        height: 20px;
        margin-left: 3px;
      }
    }
    &_leftbutton {
      left: 0
    }
    &_rightbutton {
      right: 0;
      img {
        margin-left: 6px
      }
    }
    &_text {
      width: 100%;
      font-size: 12px;
      display: block;
      margin-top: 15px;
      text-align: center;
    }
    &_gameBox {
      width: 952px;
      margin: 0 auto;
      cursor: pointer;
      .swiper-slide {
        width: 180px;
        position: relative;
        height: 260px;
        float: left;
        &:hover .swiper-slide_mask{
          display: block;
        }
        & > img {
          width: 100%;
          height: 100%;
        }
        h3 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30px;
          background: rgba(0, 0, 0, 0.5) !important;
          color: #CCCCCC;
          font-size: 14px;
          text-align: center;
          line-height: 30px
        }
      }
      .swiper-slide_mask {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $mainColor;
        .gameCode {
          width: 126px;
          height: 126px;
          display: block;
          margin:25px auto 15px auto;
        }
        a {
          width: 126px;
          margin:10px auto 0 auto;
          height: 34px;
          background: #FFFFFF;
          display: block;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          text-align: center;
          line-height: 34px;
          border-radius: 10px;
          color: #666666;
          font-size: 16px;
        }
      }
    }
    &_gameBg {
      width: 952px;
      margin: 0 auto;
      overflow: hidden;
      position: absolute;
      top: 7px;
      left: 44px;
      padding-left: 20px;
      .bg-item {
        width: 168px;
        height: 260px;
        float: left;
        background: rgba(204, 204, 204, 0.5);
        &:nth-child(1) {
          margin-right: 22px
        }
        &:nth-child(2) {
          margin-right: 13px
        }
        &:nth-child(3) {
          margin-right: 13px
        }
        &:nth-child(4) {
          margin-right: 22px
        }
        &:nth-child(5) {
          margin-right: 0px
        }
      }
    }
    &_games {
      overflow: hidden;
      li {
        width: 180px;
        height: 260px;
        float: left;
        img {
          width: 100%;
          height: 100%
        }
      }
    }
  }
  // 弹框
  &-Dialog {
    position: fixed;
    top: 25vh;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    &_nav {
      display: flex;
      padding-top: 15px;
      width: 100%;
      height: 55px;
      background: $mainColor;
      display: -webkit-flex;
      justify-content: center;
      position: relative;
      ul {
        overflow: hidden;
        li {
          height: 40px;
          cursor: pointer;
          font-weight: 600;
          line-height: 40px;
          padding: 0 25px;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          color: #FFFFFF;
          background: $mainColor;
          float: left
        }
        .active {
          color: #000000;
          background: #FFFFFF
        }
      }
      .close {
        width: 19px;
        height: 19px;
        padding-top: 8px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        right: 10px;
        cursor: pointer
      }
    }
    &_cnt {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border: 1px solid #CCCCCC;
      background: #FFFFFF;
      border-top: none;
      & > div {
        display: none;
      }
      .js-active {
        display: block
      }
    }
    &__login {
      width: 360px;
      padding: 25px 66px 20px 66px;
      .js-login {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 120px !important
      }
      .forget {
        position: absolute;
        right: 20px;
        text-decoration: underline;
        bottom: 15px;
        font-size: 14px;
        color: #999999
      }
    }
    &__sign {
      padding: 25px 66px 20px 66px;
      width: 360px;
    }
    &__verify {
      padding: 0 27px;
      width: 360px;
      p {
        padding-top: 20px;
        color: #CCCCCC;
        margin-bottom: 20px;
        line-height: 1.21em;
        font-size: 14px
      }
    }
    &__exchange {
      width: 496px;
      padding: 40px 30px 20px 30px
    }
    &__pay {
      width: 895px;
      padding: 15px 0px 20px 50px;
      .Textprompt {
        color: #999999;
        font-size: 14px;
      }
      .pay_Group {
        height: 60px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        & > span {
          font-size: 14px;
          color: #000000;
          b {
            color: #FF9900
          }
        }
        label {
          width: 75px
        }
        input[type=text] {
          width: 238px;
          height: 35px;
          border: 1px solid #CCCCCC;
          text-align: center;
          color: #CCCCCC;
          margin-right: 30px
        }
        .radios {
          display: inline-block;
          overflow: hidden;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          span {
            width: 100px;
            float: left;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            overflow: hidden;
            input[type=radio] {
              float: left;
              margin-right: 5px
            }
            b {
              float: left;
              height: 20px;
              line-height: 21px;
            }
          }
          .alipay{
            width: 120px;
            img {
              margin-left: 8px;
              width: 81px;
            }
          }
          .wechatpay {
            width: 170px;
            img {
              margin-left: 8px;
              width: 136px
            }
          }
        }
      }
    }
    &__Success {
      width: 400px;
      height: 200px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: #FFFFFF;
      .flexBox {
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
      }
      .Top {
        text-align: center;
        display: flex;
        justify-content: center;
        display: -webkit-flex;
        align-items: center;
        height: 80px;
        width: 100%;
        img {
          width: 54px;
          margin-right: 20px
        }
        span {
          margin-top: 5px;
          font-size: 22px;
          color: #000000
        }
      }
      .money {
        width: 100%;
        font-weight: 400;
        font-size: 30px;
        margin-top: 10px;
        color: #FF9900;
        text-align: center
      }
    }
    &__resetBind {
      padding: 20px 40px;
      width: 496px;
      p {
        font-size: 14px;
      }
      h3 {
        color: #666666;
        font-weight: 400;
        margin: 30px 0;
        text-align: center;
        b {
          color: #FF9900;
          font-size: 18px;
        }
      }
      .form {
        width: 369px;
        margin: 0 auto;
        .verify_ipt {
          width: 100%;
          margin-bottom: 15px;
          overflow: hidden;
          input {
            float: left;
            text-align: center;
            width: 224px;
            height: 40px;
            float: left;
            color: #999999;
            border: 1px solid #CCCCCC
          }
          button {
            width: 135px;
            float: right;
            height: 40px;
            background: transparent;
            color: #333333;
            border: 1px solid #CCCCCC;
          }
        }
        .save {
          width: 100%;
          height: 44px;
          background: #000000;
        }
      }
    }
    &__Bind {
      padding: 20px 40px;
      width: 496px;
      p {
        font-size: 14px;
        margin-bottom: 20px
      }
      .form {
        width: 369px;
        margin: 0 auto;
        & > .ipt {
          width: 100%;
          margin-bottom: 15px;
          overflow: hidden;
          input {
            text-align: center;
            width: 224px;
            height: 40px;
            color: #999999;
            border: 1px solid #CCCCCC;
          }
          button {
            width: 135px;
            height: 40px;
            background: transparent;
            color: #333333;
            border: 1px solid #CCCCCC;
          }
        }
      }
    }
    &__appdownload {
      width: 435px;
      height: 406px;
      & > div {
        height: 203.5px;
        background: #FFFFFF;
        padding: 0 27px;
        img {
          width: 120px;
          height: 120px;
        }
        .btns {
          width: 242px;
          height: 120px;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          button {
            width: 165px;
            height: 37px;
            background: #FF9900;
            color: #FFFFFF;
            font-size: 16px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            text-align: center;
            line-height: 36px;
            border: 1px solid #FF9900;
            margin-bottom: 10px;
            &:last-child {
              margin-bottom: 0;
              background: #FFFFFF;
              color: #333333;
              border: 1px solid #333333;
            }
          }
        }
        span {
          height: 120px;
          display: flex;
          display: -webkit-flex;
          font-size: 22px;
          text-align: center;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 1.5em;
          align-items: center
        }
        &:first-child {
          background: #FF9900;
        }
      }
      .flexBox {
        width: 100%;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
      }
    }
    &__news {
      width: 713px;
      padding: 50px 60px 90px 80px;
      .mainText {
        p {
          line-height: 1.5em;
          text-indent: 2em;
          color: #666666;
          font-size: 14px
        }
        em {
          padding-bottom: 2em;
          display: block;
        }
      }
      .msg {
        position: absolute;
        right: 60px;
        bottom: 30px;
        min-width: 80px;
        color: #000000;
        font-size: 12px;
        text-align: center;
        p {
          &:first-child {
            margin-bottom: 5px;
          }
        }
      }
    }
  }
  // form
  &-form-group {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    input[type=text] {
      width: 100%;
      height: 37px;
      padding-left: 15px;
      line-height: 37px;
      background: #F9F9F9;
      border: 1px solid #DEDEDE;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
    }
    input[type=password] {
      width: 100%;
      height: 37px;
      padding-left: 15px;
      line-height: 37px;
      background: #F9F9F9;
      border: 1px solid #DEDEDE;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
    }
    input[type=checkbox] {
      display: inline-block;
      vertical-align: middle
    }
    input[type=button] {
      width: 100%;
      height: 38px;
      font-weight: 600;
      background: $btnColor;
      color: #FFFFFF;
      font-size: 20px;
      &:hover {
        border: 1px solid $btnColor;
        cursor: pointer;
        background: transparent;
        color: $btnColor !important;
      }
    }
    select {
      width: 174px;
      height: 30px;
      border: 1px solid #CCCCCC;
      background: #F2F2F2;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      text-align: left;
      margin-right: 20px;
      padding-left: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
    .Check_agreement {
      font-size: 14px;
      color: #666666;
      text-decoration: underline
    }
    &__varify {
      overflow: hidden;
      input[type=text] {
        width: 135px;
        float: left
      }
      button {
        width: 80px;
        height: 37px;
        border: 1px solid #DEDEDE;
        background: #F9F9F9;
        float: right;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
      }
    }
    &__checkbox {
      margin: 20px auto;
      text-align: left;
    }
    &__merge {
      input[type=text] {
        border-bottom: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        &:first-child {
          border-top-right-radius: 3px;
          border-top-left-radius: 3px;
        }
        &:last-child {
          border-bottom: 1px solid #DEDEDE;
          border-bottom-right-radius: 3px;
          border-bottom-left-radius: 3px;
        }
      }
    }
    &__buttons {
      display: flex;
      display: -webkit-flex;
      margin-top: 28px;
      margin-bottom: 20px;
      input[type=button] {
        width: auto;
        flex: 1;
        margin-right: 30px;
        &:last-child {
          margin-right: 0
        }
      }
    }
    &__layout {
      overflow: hidden;
      text-align: left;
      .text {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        span {
          height: 60px;
          line-height: 60px;
        }
        &-gt {
          margin-left: 100px;
          font-weight: 600;
          font-size: 26px;
          color: #FF9900;
        }
      }
      .right {
        float: left
      }

    }
  }

}
.btn {
  &-lg {
    padding: 0 40px
  }
  &-md {
    padding: 0 24px;
    height: 32px;
    line-height: 32px
  }
  &-icon {
    margin-right: 2px;
    vertical-align: -1px
  }
  &-default {
    background-color: #FAFAFA;
    border: 1px solid #EEEEEE;
    color: #666666;
    display: inline-block;
    font-size: 12px;
    height: 36px;
    line-height: 36px
  }
}
.text {
  &__highlight {
    color: #FF7D27
  }
  &__primary {
    color: #333333
  }
}
.float {
  &_left {
    float: left
  }
  &_right {
    float: right
  }
}
.toPay {
  width: 200px;
  height: 38px;
  cursor: pointer;
  font-weight: 600;
  background: #FF6633;
  color: #FFFFFF;
  font-size: 20px
}
.bootUI {
  &_input {
    height: 26px;
    border-color: #ddd;
    background: #fafafa;
    padding: 2px 6px;
    width: 200px !important;
    height: 34px;
    padding: 6px 12px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    display: block;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    &:focus {
      outline: 0;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }
  }
  &_input[disabled] {
    background: #efefef;
  }
}
.TopBar {
  background: #FFFFFF;
  height: 35px;
  line-height: 35px;
  &_cnt {
    padding-left: 25px
  }
  i {
    margin: 0 5px
  }
}
.fastHref {
  &_list {
    padding: 55px 80px;
    a {
      font-size: 18px;
      display: block;
      float: left;
      width: 14%;
      height: 50px;
      line-height: 50px;
      text-align: center
    }
  }
}
.outer-bg {
  background-color: #FFFFFF
}
.more-link {
  color: #666666;
  font-size: 14px
}
.container {
  margin: 0 auto;
  width: 1080px
}
.separators {
  margin-left: 18px;
  margin-right: 18px;
  display: inline-block
}
.toPay:hover{
  opacity: 0.9;
}
#pagination {
  text-align: center;
  padding: 30px 0 30px 0;
  display: block !important;
  background: #FFFFFF;
  .pagination {
    &_item {
      font-size: 14px;
      text-decoration: none;
      color: #000000;
      margin: 0 10px;
      display: inline-block;
      cursor: pointer
    }
    &_item.active {
      color: #9B427A
    }
  }
}
.icon_cricle {
  background-color: #999999;
  border-radius: 50%;
  width: 4px;
  height: 4px !important;
  display: inline-block;
  vertical-align: middle
}
@-webkit-keyframes ballScale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0
  }
}
// --------------------------------- base.css --------------------------------- >


// --------------------------------- main.css --------------------------------- <
.mainHeader {
  height: 70px;
  line-height: 70px;
  background: $headerColor;
  .LOGO {
    width: 192px;
    height: 70px;
    display: block;
    text-align: center;
    background: #FFFFFF;
    img {
      width: 141px;
      line-height: 70px;
      display: inline-block;
      vertical-align: middle;
      height: 48px;
    }
  }
  li {
    float: left;
    padding: 0 27px;
    font-weight: 100;
    font-size: 18px;
    color: #CCCCCC
  }
  .active {
    color: #FFFFFF;
    background: $headerColor-active
  }
  &_search {
    line-height: 70px;
    position: relative;
    .submitSearch {
      position: absolute;
      height: 27px;
      width: 46px;
      right: 0;
      top: 50%;
      background: transparent;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    input {
      display: inline-block;
      margin-top: 21px;
      width: 208px;
      -webkit-border-radius: 1000px;
      -moz-border-radius: 1000px;
      border-radius: 1000px;
      height: 27px;
      font-size: 14px;
      text-align: center;
      outline-style: none;
      color: #CCCCCC;
      background: rgba(255, 255, 255, 0.2) url("../images/search_icon.svg") no-repeat 175px 4.5px;
      background-size: 18px 18px;
      &::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5)
      }
      &::-moz-placeholder {
        color: rgba(255, 255, 255, 0.5)
      }
      &::-moz-placeholder {
        color: rgba(255, 255, 255, 0.5)
      }
      &::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5)
      }
    }
  }
}  // header
.mainBanner {
  /*height: 420px;*/
  overflow: hidden;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  width: 100%;
  img {
    /*max-height: 420px*/
  }
}  // 首页banner
.mainBody {
  margin-top: -20px !important;
  &_tpIMG {
    width: 100%;
    text-align: center;
    img {
      width: 161px;
      height: 46px;
    }
  }
  &_modules {
    background: #FFFFFF;
    margin-top: 110px;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 20px
  }
}
.robGift_games {
  padding: 30px 0 0 15px;
  ul {
  }
  li {
    width: 33.33%;
    float: left;
    margin-bottom: 30px
  }
}
.news_list {
  padding: 10px 15px 0px 15px;
  ul {
    display: none;
  }
  li {
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    padding-left: 20px;
    position: relative;
    &:before {
      content: '';
      width: 9px;
      left: 0;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      background-color: #FF0000;
      height: 9px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%
    }
    &:nth-child(2):before {
      background-color: #FF0000
    }
    &:nth-child(3):before {
      background-color: #FF6600
    }
    &:nth-child(4):before {
      background-color: #FF9900
    }
    &:nth-child(5):before {
      background-color: #FFCC99
    }
    img {
      display: none;
      width: 152px;
      height: 100px
    }
    .content {
      a {
        height: 35px;
        line-height: 35px;
        float: left;
        display: block;
        color: #000000;
        font-size: 14px;
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        -ms-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s;
      }
      p {
        display: none
      }
      .time {
        font-size: 14px;
        float: right;
        height: 35px;
        line-height: 35px;
        color: #FD6A21;
        b {
          display: none
        }
      }

    }
  }
  .js-active {
    display: block;
  }
  .active {
    padding-left: 0;
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 20px;
    img {
      display: block;
      float: left;
      margin-right: 15px
    }
    &:before {
      display: none
    }
    .content {
      float: left;
      position: absolute;
      padding-left: 170px;
      width: 100%;
      a {
        margin-top: 7px;
        font-size: 16px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 100%;
        height: auto;
        line-height: 16px;
        margin-bottom: 8px
      }
      p {
        display: block;
        float: left;
        font-size: 15px;
        color: #999999;
        height: 40px;
        line-height: 1.4em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .time {
        color: #AAAAAA;
        font-size: 16px;
        display: inline-block;
        height: 30px;
        line-height: 40px;
        b {
          display: inline-block
        }
      }
    }
  }
}
.recommendHotGame {
  &_list {
    padding: 20px 20px 0 0;
    ul {
      position: relative;
      overflow: hidden;
      &:before {
        content: '';
        height: 111px;
        width: 1px;
        border-right: 1px dashed #CCCCCC;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
      }
      &:after {
        content: '';
        height: 1px;
        width: 147px;
        border-top: 1px dashed #CCCCCC;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
      }
      li {
        width: 50%;
        overflow: hidden;
        float: left;
        margin: 20px 0;
        padding-left: 20px;
        height: 150px;
        padding-right: 20px;
        position: relative;
        .item_IMG {
          width: 250px;
          height: 150px;
          overflow: hidden;
          position: absolute;
          float: left;
          img {
            width: 100%;
            height: 100%;
            display: block
          }
          & > div {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            &:hover .item_mask {
              opacity:1;
            }
          }
          .item_mask {
            -webkit-transition: opacity 0.3s;
            -moz-transition: opacity 0.3s;
            -ms-transition: opacity 0.3s;
            -o-transition: opacity 0.3s;
            transition: opacity 0.3s;
            position: absolute;
            width: 100%;
            opacity:0;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(255,255,255,.7);
            .gameCode {
              padding:5px;
              display: flex;
              align-items: center;
              img {
                width: 105px;
                height: 105px;
              }
              .text {
                font-size: 23px;
                line-height: 30px;
                color: #FF9933;
                font-weight: 600;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                text-align: center;
                width: 90px;
                margin-left: 20px;
              }
            }
            .toGift {
              text-align: center;
              line-height: 35px;
              width: 100%;
              position: absolute;
              background: $mainColor;
              display: block;
              left: 0;
              color: #FFFFFF;
              font-size: 16px;
              bottom: 0;
              height: 35px;
            }
          }
        }
        .item_MSG {
          float: left;
          padding-left: 270px;
          h3 {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            height: 22px;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 5px;
            a {
              max-width: 96px;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .types {
            height: 25px;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            img {
              width: 20px;
              margin-right: 5px
            }
            span {
              margin-left: 10px;
              color: $mainColor;
              font-size: 14px
            }
          }
          .introduce {
            text-indent: 2em;
            font-size: 14px;
            color: #666666;
            line-height: 1.7em;
            display: -webkit-box;
            height: 70px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          .ToDetail {
            color: #55555;
            position: absolute;
            right: 20px;
            bottom: 5px;
            &:hover {
              text-decoration: underline
            }
          }
        }
      }
    }
  }
}
.AppCode {
  width: 100%;
  background-color: rgba(204, 204, 204, 0.15);
  position: relative;
  margin-top: 50px;
  padding: 20px 18px;
  border: 1px solid #CCCCCC;
  height: 141px;
  &_IMG {
    width: 100px;
    height: 100px;
    vertical-align: middle
  }
  &_msg {
    padding-top: 4px;
    h5 {
      font-size: 16px;
      color: #333333;
      font-weight: 400;
      margin-bottom: 7px
    }
    .app_down {
      margin-top: 15px;
      display: block;
      width: 142px;
      height: 38px;
      font-size: 16px;
      background: #09B6FC;
      color: #FFFFFF;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      img {
        width: 25px;
        height: 25px;
        margin-right: 10px
      }
    }
  }

  &_packIMG {
    position: absolute;
    top: -52px;
    left: 28.5px;
    width: 79px;
    img {
      width: 100%;
      display: block
    }
  }
}
.hotPlaySer {
  margin-top: 20px;
  border: 1px solid #CCCCCC;
  border-top: 4px solid $mainColor;
  &_head {
    width: 100%;
    ul {
      display: flex;
      display: -webkit-flex;
      background: rgba(204, 204, 204, 0.2);
      height: 40px;
      line-height: 40px;
      li {
        flex: 1;
        color: #333333;
        font-size: 14px;
        text-align: center
      }
    }
  }
  &_item {
    position: relative;
    &:before {
      content: '';
      height: 1px;
      width: 95%;
      left: 2.5%;
      background: #EEEEEE;
      bottom: 0;
      position: absolute
    }
    &:last-child:before {
      display: none
    }
    .hotPlaySer_unhover {
      position: relative;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      min-height: 56px;
      span {
        flex: 1;
        line-height: 1.4em;
        text-align: center;
        img {
          width: 25px;
          height: 25px;
          &:first-child {
            margin-right: 10px
          }
        }
      }
    }
    .hotPlaySer_hover {
      display: none
    }
  }
  .js-hover {
    padding: 10px 20px;
    .hotPlaySer_unhover {
      display: none
    }
    .hotPlaySer_hover {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      & > img {
        width: 87px;
        height: 87px;
        display: inline-block;
        margin-right: 10px;
        &:first-child {
          /*margin-right: 25px*/
          margin-right: 5px;
        }
      }
      .msg {
        h4 {
          font-size: 14px;
          line-height: 30px;
        }
        .a {
          width:auto;
          height:auto;
          display: inline;
        }
        a {
          width: 25px;
          display: inline-block;
          height: 25px;
          img {
            width: 100%;
            &:first-child {
              margin-right: 10px
            }
          }
        }
      }
    }
  }
  &_playSerTime {
    height: 50px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding-left: 20px;
    width: 100%;
    &:before {
      content: '';
      vertical-align: middle;
      margin-right: 5px;
      width: 20px;
      height: 20px;
      background: #FF6633;
      display: inline-block
    }
  }
}
.swiper-text-container {
  text-align: center;
  overflow: hidden;
  height: 20px;
  line-height: 20px;
}
.gc {
  background-color: #FFFFFF;
  &_top {
    background-color: #FFFFFF;
    min-height: 100px;
    padding: 0 56px 10px;
    &_title {
      padding: 35px 0;
      text-align: center
    }
    &_kind {
      text-align: center;
      border: 1px solid $mainColor;
      border-radius: 10px;
      padding: 5px 15px;
      display: inline;
      a {
        font-size: 16px;
        color: #666666;
        font-weight: 100;
        display: inline-block;
        padding: 0 45px
      }
      a.active {
        color: $mainColor;
      }
    }
    &_cnt {
      dl {
        margin-bottom: 20px;
        .cnt_dt {
          font-size: 16px;
          font-weight: 600;
          color: #000000;
          margin-right: 30px;
          float: left;
          margin-top: 15px
        }
        .cnt_dd {
          overflow: hidden;
          a {
            display: inline-block;
            font-size: 16px;
            color: #666666;
            line-height: 26px;
            padding: 10px 60px 10px 0
          }
          .active {
            color: #FF9900;
          }
        }
      }
      dl.active {
        .cnt_dt {
          margin-top: 26px
        }
        .cnt_dd a {
          display: inline-block;
          color: #666666;
          height: 68px;
          font-size: 16px;
          background-color: #F0EEEE;
          margin-bottom: 5px;
          margin-right: 6px;
          border: 1px solid transparent;
          text-align: center;
          line-height: 68px;
          padding: 0 45px
        }
        a.active {
          background-color: $mainColor !important;
          border: 1px solid #FFFFFF;
          color: #FFFFFF;
          font-weight: 400
        }
      }
    }
  }
  &_body {
    padding: 0 60px;
    background-color: rgba(155, 66, 122, 0.05);
    &_total {
      white-space: nowrap;
      font-size: 14px;
      font-weight: 400;
      color: #FF9933;
      line-height: 40px;
      text-align: right
    }
    &_item {
      width: 172px;
      box-shadow: 0 2px 3px 0 rgba(0,0,0,.15);
      height: 242px;
      border-radius: 5px;
      background-color: #FFFFFF;
      text-align: center;
      padding: 10px 20px 14px;
      float: left;
      margin: 0 20px 30px 0;
    }
    &_img {
      width: 104px;
      height: 104px;
      display: inline-block;
    }
    &_title {
      white-space: nowrap;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      line-height: 24px
    }
    &_dtl {
      font-size: 12px;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 23px
    }
    &_star {
      width: 110px;
      height: 20px;
      margin: 0 auto;
      text-align: center;
      p {
        display: inline-block;
        height: 20px;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 2px;
        float: left
      }
    }
    &_dw {
      font-size: 14px;
      display: inline-block;
      width: 110px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: #FFFFFF;
      border: 1px solid #CCCCCC;
      color: #333333;
      margin-top: 10px;
      transition: all 0s
    }
    &_dw.btn-page {
      color: #000000;
      margin-right: 10px
    }
  }
}  // 游戏中心
.playSerList {
  width: 100%;
  background: #FFFFFF;
  padding-top: 20px;
  &_title {
    height: 79px;
    display: flex;
    padding-left: 40px;
    display: -webkit-flex;
    color: #000000;
    margin-bottom: 30px;
    align-items: center;
    background: rgba(155, 66, 122, 0.05);
    font-size: 18px;
    b {
      margin-right: 15px;
      width: 21px;
      height: 21px;
      display: inline-block
    }
    span {
      margin-right: 15px
    }
  }
  &_games {
    position: relative;
    &:last-child .Time .line {
      display: none
    }
    ul {
      width: 100%;
      overflow: hidden;
      padding-left: 300px;
      .game_item {
        float: left;
        margin-right: 73px;
        margin-bottom: 40px;
        .game_l {
          width: 100px;
          margin-right: 20px;
          img {
            width: 100px;
            height: 100px;
            display: block
          }
          h5 {
            width: 100px;
            font-size: 14px;
            font-weight: 400;
            height: 35px;
            line-height: 35px;
            display: inline-block;
            color: #666666;
            text-align: center
          }
        }
        .game_r {
          max-width: 190px;
          .gmae_name {
            font-size: 18px;
            font-weight: 100;
            padding: 5px 0 15px 0
          }
          .game_type {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-bottom: 6px
          }
          .game_text {
            height: 32px;
            font-size: 14px;
            line-height: 1.2em;
            color: #666666;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            margin-bottom: 5px;
          }
          .game_buttons {
            display: flex;
            display: -webkit-flex;
            a {
              text-align: center;
              width: 76px;
              padding-top:7px;
              height: 29px;
              display: block;
              -webkit-border-radius: 5px;
              background: $btnColor;
              -moz-border-radius: 5px;
              border-radius: 5px;
              flex: 1;
              color: #FFFFFF;
              margin-right: 10px
            }
            .download {
              background: transparent;
              color: #666666;
              border: 1px solid $btnColor;
            }
          }
        }
      }
    }
    .Time {
      width: 300px;
      height: 100%;
      padding-left: 100px;
      position: absolute;
      .roundIcon {
        height: 30px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        b {
          position: relative;
          width: 20px;
          height: 20px;
          background: rgba(255, 153, 51, 0.5);
          display: inline-block;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          i {
            background: #FF9933;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 8px;
            height: 8px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
          }
        }
        span {
          padding-left: 10px;
          font-size: 18px;
          color: #999999
        }
      }
      .line {
        width: 1px;
        height: 100%;
        background: #FF9933;
        position: absolute;
        top: 15px;
        -webkit-transform: translateX(10px);
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
        transform: translateX(10px)
      }
    }
  }
}  // 开服列表
.Gift {
  width: 100%;
  display: block;
  background: #FFFFFF;
  &_search {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    span {
      display: inline-block;
      font-size: 18px;
      color: #666666
    }
    input {
      width: 263px;
      padding-left: 10px;
      outline-style: none;
      display: inline-block;
      height: 30px;
      margin-left: 20px;
      background: transparent url("../images/search_icon2.svg") no-repeat 230px 4.5px;
      background-size: 18px 18px;
      border: 1px solid #CCCCCC;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px
    }
  }
  &_list {
    padding: 0 100px;
    &_item {
      width: 380px;
      height: 159px;
      position: relative;
      padding: 15px 13px;
      float: left;
      border: 1px solid #CCCCCC;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      float: left;
      margin-bottom: 50px;
      &:nth-child(even) {
        float: right
      }
      &_l {
        height: 142px;
        float: left;
        margin-right: 15px;
        img {
          width: 100px;
          height: 100px;
          display: block;
          float: left
        }
        h5 {
          text-align: center;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #666666;
          font-weight: 400
        }
      }
      &_r {
        h3 {
          font-weight: 400;
          margin-top: 5px;
          color: #000000;
          margin-bottom: 14px
        }
        .msg_p {
          max-height: 32px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        p {
          font-size: 12px;
          margin-bottom: 10px;
          line-height: 1.4em;
          color: #999999;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          b {
            font-size: 20px
          }
        }
      }
      &_buttons {
        position: absolute;
        bottom: -12px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        a {
          width: 56px;
          height: 24px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          border-radius: 6px;
          margin-right: 15px;
          display: inline-block;
          line-height: 24px;
          color: #FFFFFF;
          text-align: center;
          &:hover {
            color: #FFFFFF;
            opacity: 0.9;
          }
          &:first-child {
            background: #E32A3D
          }
          &:last-child {
            background: #FF9933
          }
        }
      }
    }
  }
}  // 礼包
.footer {
  width: 100%;
  height: 235px;
  margin-top: 30px;
  background-color: #474747;
  padding-top: 27px;
  text-align: center;
  position: relative;
  .container {
    background-color: #474747
  }
  &_icon {
    width: 100px;
    margin-top: 30px;
    &__top {
      display: inline-block;
      margin-bottom: 21px
    }
    a {
      &:nth-child(1) img {
        width: 100px
      }
      &:nth-child(2) img {
        width: 75px
      }
    }
  }
  &_info {
    padding-left: 5px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    height: 181px;
    width: 710px;
    font-size: 12px;
    border: 1px solid #666666;
    border-width: 0 1px;
    color: #BBBBBB;
    text-align: left;
    &_nav {
      margin-top: 21px;
      margin-bottom: 25px
    }
    &_item {
      float: left;
      color: #FFFFFF;
      font-size: 14px;
      cursor: pointer;
      padding: 0 22px;
      border-right: 2px solid #CECCCC;
      &:nth-last-child(1) {
        border-right: none
      }
    }
    p {
      margin-left: 19px;
      margin-bottom: 20px;
      .dividLine {
        margin: 0 20px
      }
      .ft-cusService {
        margin-left: 20px
      }
    }
  }
  &_dwcode {
    text-align: left;
    div {
      width: 110px;
      display: inline-block;
      margin-top: 21px;
      font-size: 12px;
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
      &:first-child {
        margin-right: 10px
      }
      .intro {
        color: #C2C2C2;
        margin-top: 10px;
        line-height: 15px
      }
    }
    img {
      width: 100%
    }
  }
}  // 页尾
.banner {
  &_pic {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    color: #fff;
    z-index: 9999;
    background: #010a12;
    background: rgba(1,10,18,.9);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6010A12, endColorstr=#E6010A12)";
    transition: height .3s ease-in-out 0s;
    & > div {
      position: absolute;
      transition: top .3s ease-in-out 0s;
      top: -47px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .app_code {
      width: 110px;
      height: 110px;
      display: inline-block;
      margin-bottom: 7px;
      -webkit-box-reflect: below 2px -webkit-linear-gradient(bottom,rgba(255,255,255,.6) 0,transparent 25%,transparent 100%);
    }
    h1 {
      margin:0 80px;
      font-size: 23px;
      font-weight: 400;
      margin-bottom: 7px;
      -webkit-box-reflect: below 2px -webkit-linear-gradient(bottom,rgba(255,255,255,.6) 0,transparent 80%,transparent 100%);
      em {
        font-weight: 400;
        &:first-child {
          margin-right:18px;
        }
        &:last-child {
          margin-left: 5px;
        }
      }
    }
    .download_btn {
      width: 100px;
      text-align: center;
      line-height: 30px;
      align-items: flex-end;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      background-color: rgba(208,79,3,.9);
      color: #FFFFFF;
      font-size: 16px;
      &:hover {
        background-color: rgba(208,79,3,.8);
        cursor: pointer;
      }
      &:active {
        background-color: rgba(208,79,3,.7);
      }
    }
    .close_appDown {
      position: absolute;
      right: 150px;
      display: block;
      top: 60px;
      width: 20px;
      height: 20px;
      img {
        width:100%;
        display: block;
      }
    }
  }
}
.newscontainer {
  background: #FFFFFF;
  padding: 20px 32px;
  .newsTopSwiper {
    height: 345px;
    width: 100%;
    border: 1px solid #CCCCCC;
    padding: 22.5px 0px 22.5px 20px;
    overflow: hidden;
    &_l {
      float: left;
      width: 643px;
      height: 300px;
      div {
        height: 300px;
        img {
          width: 100%;
          height: 100%;
          display: block
        }
      }
    }
    &_r {
      float: right;
      width: 280px;
      ul {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        li {
          margin: 20px 0;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          width: 100%;
          height: 60px;
          text-align: left;
          & > div {
            width: 100%;
            h3 {
              font-weight: 400;
              font-size: 16px;
              width: 280px;
              padding-right: 20px;
              margin-bottom: 10px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            p {
              padding-right: 20px;
              font-size: 14px;
              height: 35px;
              line-height: 1.3em;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              width: 100%;
              color: #999999;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              -webkit-line-clamp: 2;
            }
          }
        }
        .active {
          border-right: 6px solid #FF9933
        }
      }
    }
  }
  .newsBody {
    margin-top: 17px;
    overflow: hidden;
    &_l {
      width: 595px;
      float: left;
      .u-Tab {
        li {
          cursor: pointer;
          padding: 0 25px;
          width: auto;
        }
      }
      .toggle_cnt {
        padding-left: 22px;
        & > div {
          display: none;
          & > ul > a {
            display: block;
            width: 100%;
            height: 100%
          }
        }
        & > div:first-child {
          display: block
        }
        .item {
          margin-top: 30px;
          height: 136px;
          &_title {
            margin-bottom: 17px;
            font-size: 16px;
            color: #993300;
            font-weight: 400;
            letter-spacing:0.5px;
          }
          &_msg {
            overflow: hidden;
            position: relative;
            &_img {
              float: left;
              width: 185px;
              height: 100px;
              img {
                width: 100%;
                height: 100px;
                display: block
              }
            }
            &_text {
              float: right;
              width: 371px;
              font-size: 14px;
              height: 100px;
              padding-left: 10px;
              color: #999999;
              line-height: 1.6em;
              border-bottom: 1px solid #CCCCCC;
              p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                height: 63px;
              }
              b {
                position: absolute;
                right: 0px;
                bottom: 8px
              }
            }
          }
        }
      }
      #pagination {
        margin-top: 20px
      }
      #pagination.small a {
        /*margin: 0 3px*/
      }
    }
    &_r {
      float: right;
      width: 326px;
      .Title {
        height: 50px;
        border-bottom: 4px solid $mainColor;
        font-size: 20px;
        font-weight: 400;
        line-height: 50px;
        text-align: center
      }
      .newActivity {
        border: 1px solid #CCCCCC;
        border-top: none;
        margin-bottom: 10px;
        .item {
          &:last-child {
            border-bottom: none
          }
          .hover {
            display: none;
          }
          .unhover {
            height: 60px;
            display: flex;
            border-bottom: 1px solid #EEEEEE;
            display: -webkit-flex;
            align-items: center;
            a {
              padding-right: 15px;
            }
          }
          a {
            line-height: 1.5em;
          }
          &:nth-child(1) b {
            background: #000000
          }
          &:nth-child(2) b {
            background: #FF6633
          }
          &:nth-child(3) b {
            background: #FF9966
          }
        }
        .active {
          .hover {
            display: block;
          }
          .unhover {
            height: 60px;
            display: none;
          }
        }
        .item_first {
          height: 180px;
          position: relative;
          width: 100%;
          img {
            width: 100%;
            height: 100%
          }
          h3 {
            position: absolute;
            width: 100%;
            height: 37px;
            bottom: 0;
            padding-right: 15px;
            left: 0;
            text-align: center;
            font-weight: 400;
            line-height: 37px;
            background-color: rgba(0, 0, 0, 0.7);
            color: #FFFFFF;
            font-size: 14px
          }
        }
        .specials {
          &_item {
            h3 {
              height: 30px;
              line-height: 30px;
              margin-bottom: 20px;
              font-size: 16px;
              text-align: center;
              font-weight: 400;
              color: #333333;
              -webkit-transition: all 0.15s;
              -moz-transition: all 0.15s;
              -ms-transition: all 0.15s;
              -o-transition: all 0.15s;
              transition: all 0.15s
            }
            &:hover h3 {
              color: #FF9933
            }
          }
        }
        b {
          display: block;
          width: 20px;
          height: 20px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          color: #FFFFFF;
          text-align: center;
          line-height: 20px;
          display: inline-table;
          /*padding-top: 2px;*/
          /*text-align: left;*/
          /*padding-left: 6px;*/
          /*font: italic 14px Impact;*/
          margin: 0 15px;
          background: #999999
        }
      }
    }
  }
}
.UserContainer {
  background: #FFFFFF;
  padding-bottom: 100px
}
.UserTop {
  padding: 55px 60px 50px 120px;
  overflow: hidden;
  &_head {
    margin: 10px 50px 10px 0;
    float: left;
    width: 122px;
    height: 122px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden
  }
  &_msg {
    float: left;
    .item {
      margin-bottom: 16px;
      .label {
        color: #000000
      }
      .value {
        color: #999999
      }
      .username {
        font-weight: 600;
        color: #333333
      }
      .aq_rank {
        width: 87px;
        border: 1px solid #FD6A21;
        height: 6px;
        display: inline-block;
        background: #FFFFFF;
        margin-right: 5px;
        b {
          width: 50%;
          height: 6px;
          display: block;
          background: #FF9933
        }
      }
      &_ye {
        margin-top: 25px;
        overflow: hidden;
        span {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #000000;
          float: left;
          b {
            font-size: 20px;
            font-weight: 600;
            color: #FF9933
          }
        }
        .buttons {
          float: left;
          margin-left: 70px;
          overflow: hidden;
          a {
            display: block;
            float: left;
            margin-right: 12px;
            height: 30px;
            line-height: 30px;
            width: 73px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            text-align: center;
            &:first-child {
              background: #FF9933;
              color: #FFFFFF;
              border: 1px solid #FF9933
            }
            &:last-child {
              background: transparent;
              color: #FF9933;
              border: 1px solid #FF9933
            }
          }
        }
      }
    }
  }
  &_buttons {
    float: right;
    a {
      display: block;
      width: 105px;
      height: 36px;
      margin-bottom: 15px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      background: transparent;
      color: $mainColor;
      text-align: center;
      line-height: 36px;
      border: 1px solid $mainColor;
    }
  }
  &_Toggle {
    & > div {
      display: none;
      padding-left: 172px;
      .input {
        margin-bottom: 15px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        a {
          width: 80px;
          text-align: center
        }
        label {
          width: 80px;
          display: block;
          float: left;
          text-align: right;
          margin-right: 15px;
          font-size: 14px;
          color: #000000
        }
        .label50 {
          width: 50px
        }
      }
      .btns {
        margin-top: 36px;
        button {
          width: 82px;
          margin-right: 20px;
          height: 28px;
          border: 1px solid $mainColor;
          color: $mainColor;
          background: transparent;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px
        }
      }
    }
    .active {
      display: block
    }
    .resetUserData {
      padding-top: 30px
    }
    .resetPass {
      padding-top: 10px;
      .btns {
        margin-top: 16px
      }
    }
  }
}
.game {
  &_yxb {
    height: 70px;
    background: #F4F4E6;
    width: 100%;
    line-height: 70px;
    position: relative;
    vertical-align: middle;
    &_left {
      background: $mainColor;
      width: 43px;
      height: 70px;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 75px;
      text-align: center;
      img {
        width: 24px;
        height: 24px
      }
    }
    &_right {
      background: $mainColor;
      width: 43px;
      height: 70px;
      line-height: 75px;
      position: absolute;
      right: 0;
      top: 0;
      text-align: center;
      vertical-align: middle;
      img {
        display: inline-block;
        width: 24px;
        height: 24px
      }
    }
    &_list {
      overflow: hidden;
      & > h3 {
        font-weight: 400;
        padding-left: 100px;
        float: left;
        margin-right: 30px;
        font-size: 14px
      }
      ul {
        float: left;
        overflow: hidden;
        li {
          float: left;
          width: 60px;
          padding-top: 5px;
          margin-right: 50px;
          line-height: 3em;
          img {
            width: 60px;
            height: 60px
          }
          span {
            text-align: center;
            width: 60px;
            display: block;
            line-height: 1em;
            color: #FF9933
          }
        }
      }
    }
  }
}
.UserMneus {
  margin-top: 80px;
  overflow: hidden;
  &_left {
    width: 235px;
    min-height:410px;
    float: left;
    border-right: 1px solid #FF9933;
    ul {
      li {
        cursor: pointer;
        width: 100%;
        color: #000000;
        text-align: right;
        padding-right: 30px;
        height: 63px;
        margin-bottom: 10px;
        line-height: 63px;
        border-right: 9px solid transparent
      }
      .active {
        border-right: 9px solid #FF9933
      }
    }
  }
  &_right {
    width: 835px;
    float: left;
    min-height: 365px;
    padding-left: 10px;
    & > div {
      display: none
    }
    & > .active {
      display: block
    }
    .u_list {
      li {
        position: relative;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        padding: 15px 0 15px 10px;
        overflow: hidden;
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
        &:last-child {
          border-bottom: none
        }
        .lImg {
          width: 69px;
          float: left;
          margin-right: 20px;
          div {
            width: 63px;
            height: 63px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            color: #FFFFFF;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 15px;
            line-height: 1.4em
          }
          .newBgColor {
            background: #FF9933
          }
          .ptbPayBgColor {
            background: #33CCFF
          }
          .yxbPayBgColor {
            background: #00CCCC
          }
          .xfBgColor {
            background: #9999FF
          }
          img {
            width: 69px;
            display: block;
            height: 100%
          }
        }
        .text {
          float: left;
          h3 {
            font-size: 16px;
            color: #000000;
            margin-bottom: 7px;
            font-weight: 400
          }
          .p {
            font-size: 14px;
            color: #999999;
            line-height: 1.4em;
            max-width: 490px;
            text-indent: 2em
          }
          .p2 {
            font-size: 14px;
            color: #999999;
            line-height: 1.4em;
            input {
              background: #FFFFFF;
            }
          }
          .fz16 {
            font-size: 16px
          }
          .fz12 {
            font-size: 12px;
            color: #999999
          }
          .moneyColor {
            color: red
          }
          .dhColor {
            color: #888888
          }
        }
        .text_group {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0
          }
          span {
            width: 200px;
            color: #000000;
            display: inline-block
          }
        }
        .rt {
          position: absolute;
          top: 15px;
          right: 30px;
          button {
            width: 56px;
            height: 24px;
            color: #FFFFFF;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background: $mainColor;
          }
        }
        .rb {
          position: absolute;
          right: 105px;
          top: 22px;
          span {
            color: #666666;
            font-size: 12px
          }
        }
      }
    }
    #pagination {
      margin-top: 20px
    }
  }
}
.detailBox {
  background: #FFFFFF;
  & > div {
    padding: 0 26px
  }
  &_Title {
    margin-bottom: 10px;
    span {
      background: url("../images/cloud_icon.png") no-repeat 100%;
      background-size: 150px;
      display: inline-block;
      height: 96px;
      width: 150px;
      text-align: center;
      font-size: 20px;
      line-height: 118px;
      font-weight: 600;
      color: #333333
    }
  }
  .gameimgBox {
    width: 100%;
    .swiper-slide {
      width: 280px;
      img {
        width: 100%;
        /*height: 450px;*/
        display: block
      }
    }
  }
  .introduce {
    position: relative;
    padding-bottom: 15px;
    p {
      line-height: 2em;
      font-size: 16px;
      color: #666666;
      text-indent: 2em
    }
    a {
      text-decoration: underline;
      position: absolute;
      bottom: 0;
      right: 26px
    }
  }
  .Gift_list {
    padding: 0 50px
  }
  .gc_body {
    padding: 0 50px;
    &_item {
      margin-right: 17px;
      &:nth-child(5n) {
        margin-right: 0
      }
    }
  }
  .TopGameDetail {
    padding-top: 40px;
    height: 274px;
    padding-left: 145px;
    width: 100%;
    background: rgba(51, 204, 255, 0.54) url("../images/cloud_bg.png") no-repeat bottom left;
    background-size: contain;
    overflow: hidden;
    &_head {
      float: left;
      img {
        width: 152px;
        height: 152px
      }
    }
    &_msg {
      padding-left: 15px;
      float: left;
      h1 {
        color: #000000;
        margin-bottom: 20px
      }
      p {
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
        span {
          min-width: 140px;
          display: inline-block
        }
      }
      .btns {
        a {
          display: inline-block;
          border: 1px solid $mainColor;
          background: $mainColor;
          color: #FFFFFF;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          width: 126px;
          height: 43px;
          text-align: center;
          line-height: 43px;
          font-size: 16px;
          &:first-child {
            background: #FFFFFF;
            color: $mainColor;
            margin-right: 20px
          }
        }
      }
    }
    &_code {
      width: 160px;
      float: right;
      margin-right: 75px;
      text-align: center;
      position: relative;
      .game_Code {
        width: 148px;
        height: 148px
      }
      .parmpt_Code {
        width: 218px;
        position: absolute;
        bottom: 30px;
        left: -218px;
        span {
          width: 100%;
          text-align: center;
          display: block;
          font-size: 18px;
          color: #000000;
          font-weight: 500;
          padding-top: 7px
        }
      }
    }
  }
}
.newdetailBox {
  padding: 20px 50px;
  background: #FFFFFF;
  &_title {
    width: 100%;
    text-align: center;
    font-weight: 400;
    color: #000000;
    height: 70px;
    line-height: 70px;
  }
  &_time {
    text-align: center;
    width: 100%;
    color: #999999;
    font-weight: 400;
    margin-bottom: 30px
  }
  &_html {
    color: #666666;
    font-size: 16px;
    line-height: 1.7em;
    text-align: center;
    img {
      margin: 15px 0
    }
    p {
      text-align: left;
      margin-bottom: 10px;
      text-indent: 2em
    }
  }
  &_msg {
    overflow: hidden;
    margin-top: 100px;
    width: 100%;
    & > div {
      width: 220px;
      color: #999999;
      float: right;
      & > span {
        display: block;
        margin-bottom: 10px
      }
      .sharelistBox {
        overflow: hidden;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        span {
          float: left
        }
        .sharelist {
          margin-left: 20px;
          float: left
        }
      }
    }
  }
  &_rela {
    .title {
      margin-top: 30px;
      margin-bottom: 30px;
      height: 26px;
      line-height: 26px;
      position: relative;
      &:before {
        content: '';
        position: absolute;
        height: 1px;
        border-top: 1px solid #CCCCCC;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 90%
      }
      h2 {
        font-size: 18px;
        font-weight: 400;
        color: #000000
      }
    }
    .relaList {
      li {
        font-size: 14px;
        color: #666666;
        margin-bottom: 15px;
        &:before {
          content: '';
          width: 9px;
          height: 9px;
          display: inline-block;
          background: #FF9900;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%
        }
        a {
          padding-left: 15px
        }
      }
    }
  }
  &_activityhtml {
    width: 827px;
    margin: 0 auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 50px 100px;
    border: 1px solid #FF9900;
    &_title {
      display: flex;
      height: 50px;
      font-weight: 400;
      margin-bottom: 10px;
      width: 100%;
      display: -webkit-flex;
      align-items: center;
      .leftIcon {
        width: 50px;
        text-align: center
      }
      span {
        font-size: 16px;
        color: #000000
      }
    }
    p {
      margin-bottom: 1em;
      padding-left: 50px;
      i {
        margin: 0 10px
      }
    }
    .timeColor {
      color: #3399FF
    }

  }
  &_in {
    margin-top: 50px;
    button {
      width: 147px;
      height: 39px;
      background: #FF9900;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color: #FFFFFF;
      font-weight: 600;
      text-align: center;
      line-height: 39px;
      display: block;
      font-size: 18px;
      font-weight: 600;
      margin: 20px auto
    }
    p {
      color: #FF9900;
      font-size: 18px;
      width: 100%;
      text-align: center
    }
  }
}
.agreement {
  background-color: #FFFFFF;
  padding: 0 70px 140px;
  &_title {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    line-height: 100px
  }
  &_body {
    &_title {
      font-size: 14px;
      color: #999999;
      line-height: 28px
    }
    &_cnt {
      font-size: 14px;
      color: #999999;
      line-height: 25px;
      display: block
    }
  }
}
.about-us {
  background-color: #FFFFFF;
  padding: 22px 67px 140px 107px;
  &_dtl {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: rgba(102, 255, 255, 0);
    border: 1px solid #FF9900;
    min-height: 200px;
    position: relative;
    text-align: left;
    padding: 50px 56px 80px 56px;
    &_one {
      margin-top: 30px
    }
  }
  &_nav {
    position: absolute;
    top: 64px;
    width: 149px;
    left: -74px;
    a {
      width: 100%;
      display: block;
      margin-bottom: 10px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 5px;
      background-color: #FFFFFF;
      border: 1px solid #FF9933;
      font-size: 14px;
      color: #333333
    }
    a.active {
      background-color: #FF9900;
      color: #FFFFFF;
      font-weight: 400
    }
  }
  .inner-about-us {
    text-align: center
  }
  &_title {
    font-size: 28px;
    color: #000000;
    margin-bottom: 48px;
    font-weight: 400;
  }
  &_cnt {
    font-size: 14px;
    color: #666666;
    line-height: 26px;
    text-indent: 2em;
    text-align: left
  }
  &_triangle {
    position: relative;
    margin-top: 70px;
    .triangle_item {
      margin: 0 auto;
      font-size: 20px;
      font-weight: 700;
      color: #FFFFFF;
      width: 120px;
      height: 120px;
      overflow: hidden;
      background-color: #FF3366;
      border-radius: 50%;
      text-align: center;
      padding: 35px 0;
      position: relative;
      z-index: 10;
      span {
        width: 60px;
        display: inline-block;
        margin-bottom: 8px
      }
    }
    .triangle_item.mid {
      font-size: 18px;
      margin-top: 72px;
      display: inline-block;
      background-color: #FF6633;
      font-weight: 400;
      &:first-child {
        margin-right: 86px
      }
    }
    .triangle_item.btm {
      font-size: 16px;
      background-color: #FF9933;
      margin-right: 86px;
      &:last-child {
        margin-right: 0
      }
    }
    .line {
      height: 400px;
      width: 4px;
      background-color: #666666;
      position: absolute;
      left: 50%;
      margin-left: -15px;
      top: 100px;
      transform-origin: left top;
      transform: rotate(30deg)
    }
    .line.transform-right {
      margin-left: 15px;
      transform: rotate(-30deg)
    }
    .line.transform-btm {
      left: 50%;
      top: 87%;
      margin-left: 200px;
      transform: rotate(90deg)
    }
  }
  .item {
    margin-bottom: 10px;
    &_title {
      color: #000000;
      font-size: 16px;
      font-weight: 700;
      line-height: 45px;
      position: relative;
      &:before {
        content: '';
        background: url("../images/FAC3DBB2DBF818C5C19FDE60E28B0473.svg") no-repeat center center;
        width: 20px;
        height: 20px;
        position: absolute;
        left: -30px;
        top: 13px
      }
    }
    &_title.business:before {
      background: url("../images/business.svg") no-repeat center center
    }
    &_title.location:before {
      background: url("../images/location.svg") no-repeat center center
    }
    &_cnt {
      span {
        line-height: 26px;
        color: #000000;
        font-size: 16px;
      }
      img {
        width: 100%;
        height: auto;
        margin: 10px 0 12px
      }
    }
    &_outerbox {
      margin-top: 33px
    }
    &_box {
      width: 275px;
      height: 128px;
      margin-right: 40px;
      padding: 45px 22px 13px;
      border-radius: 10px;
      box-sizing: border-box;
      background-color: #FFFFFF;
      border: 1px solid #FF9900;
      position: relative;
      float: left;
      margin-bottom: 30px;
      &_contact {
        position: absolute;
        left: 52px;
        top: 0;
        margin-top: -19px;
        text-align: center;
        width: 177px;
        height: 37px;
        line-height: 37px;
        background-color: #FFFFFF;
        color: #000000;
        font-size: 14px
      }
      div {
        display: inline-block
      }
      &_header {
        width: 70px;
        height: 70px;
        margin-right: 25px;
        float: left;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%
        }
      }
      &_icon {
        width: 18px;
        height: 23px;
        margin-right: 25px;
        vertical-align: sub;
        &:first-of-type {
          width: 21px;
          height: 25px;
          margin-top: 5px
        }
      }
      &_phone {
        color: #666666;
        font-size: 14px;
        line-height: 33px
      }
    }
  }
  .contact-us {
    margin-left: 77px;
    margin-top: 11px
  }
  .sincere-hire {
    position: relative;
    margin-left: 88px;
    margin-top: 18px;
    &_title {
      font-size: 16px;
      color: #000000;
      line-height: 36px;
      position: relative;
      font-weight: 400;
      &:before {
        content: '';
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 1px solid #666666;
        position: absolute;
        left: -76px;
        top: -4px
      }
    }
    &_img {
      position: absolute;
      left: -63px;
      top: 7px
    }
    &_page {
      margin-top: 70px;
      padding-bottom: 0 !important;
      .pagination_item {
        margin: 0 3px !important
      }
    }
    .demand {
      &_each {
        margin-top: 50px
      }
      &_title {
        width: 100%;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        text-indent: 25px;
        color: #FFFFFF;
        background-color: #9D447F
      }
      &_body_title {
        line-height: 54px;
        color: #000000;
        font-size: 14px;
        font-weight: 400
      }
      &_body_cnt {
        line-height: 26px;
        font-size: 14px;
        color: #999999
      }
    }
  }
  .customer-center {
    margin-top: 10px;
    width: 650px;
    .feedback {
      &_title {
        width: 100%;
        height: 42px;
        line-height: 42px;
        text-indent: 1em;
        font-size: 16px;
        color: #FFFFFF;
        background-color: #9D447F;
        border: 1px solid #666666
      }
      &_body {
        text-align: center;
        width: 100%;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        padding: 60px 0 66px;
        &_item {
          margin-bottom: 20px;
          .feedbackcnt::-webkit-input-placeholder {
            color: #999999;
            font-weight: 400;
            font-size: 14px
          }
          label {
            width: 70px;
            height: 40px;
            color: #000000;
            font-size: 14px;
            text-align: right;
            display: inline-block;
            margin-right: 30px
          }
          input {
            height: 40px;
            width: 391px;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            border: 1px solid #CCCCCC;
            text-align: center;
            outline: none;
            &::-webkit-input-placeholder {
              color: #999999;
              font-weight: 400;
              font-size: 14px
            }
          }
          textarea {
            resize: none;
            height: 250px;
            vertical-align: top;
            padding: 10px;
            text-align: left !important;
            width: 391px;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            border: 1px solid #CCCCCC;
            text-align: center;
            outline: none
          }
        }
        &_btm {
          margin-top: 45px;
          text-align: center;
          .btn {
            width: 98px;
            height: 40px;
            font-size: 18px;
            border-radius: 5px;
            color: #FF9900;
            background-color: #FFFFFF;
            border: 1px solid #FF9900;
            &:first-child {
              margin-right: 46px;
              margin-left: 10px
            }
          }
          .btn.active {
            background-color: #FF9900;
            color: #FFFFFF
          }
        }
      }
    }
  }
  .parents-care {
    margin-left: 74px;
    &_title {
      margin: 0 auto;
      width: 170px;
      height: 40px;
      font-size: 18px;
      font-weight: 400;
      text-align: center;
      line-height: 40px;
      color: #000000;
      margin-bottom: 37px;
      box-sizing: border-box;
      border-radius: 10px;
      background-color: #FFFFFF;
      border: 1px solid #999999
    }
    &_body {
      font-size: 14px;
      line-height: 26px;
      text-indent: 2em;
      color: #666666;
      margin-bottom: 20px
    }
    img {
      width: 100% !important;
    }
    li {
      line-height: 25px;
    }
  }
  .inner-about-us, .contact-us, .sincere-hire, .customer-center, .parents-care {
    display: none
  }
}
.box-body {
  background-color: rgba(0, 204, 255, 0.05);
  padding: 10px 78px 164px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  &_title {
    display: inline-block;
    margin: 25px 0;
    width: 276px;
    height: 62px;
    text-align: center;
    line-height: 62px;
    border-radius: 10px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    h2 {
      font-size: 22px;
      color: #000000
    }
  }
  &_progressbar {
    position: absolute;
    left: 78px;
    text-align: center;
    padding: 0 168px;
    div {
      display: inline-block;
      text-align: center;
      margin-right: 123px;
      &:last-child {
        margin-right: 0
      }
      span {
        width: 52px;
        height: 54px;
        font-size: 20px;
        line-height: 54px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        color: #FF9900;
        border: 1px solid #FF9900;
        box-sizing: border-box;
        background-color: #FFFFFF
      }
    }
    div.active {
      span {
        background-color: #FF9900;
        color: #FFFFFF;
      }
      p {
        color: #FF9900
      }
    }
    p {
      font-size: 14px;
      color: #999999;
      line-height: 44px
    }
  }
  &_cnt {
    border-radius: 10px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    margin-top: 27px;
    padding: 125px 230px 150px;
    text-align: center;
    .item {
      height: 37px;
      margin-bottom: 18px;
      text-align: center;
      line-height: 37px;
      position: relative;
      &_label {
        width: 100px;
        font-size: 14px;
        text-align: right;
        margin-right: 5px;
        color: #000000;
        display: inline-block
      }
      &_input {
        height: 100%;
        width: 264px;
        outline: none;
        text-indent: 2em;
        border-radius: 5px;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC
      }
      &_input.small {
        width: 136px;
        margin-right: 15px
      }
      &_pic {
        width: 95px;
        height: 40px;
        vertical-align: middle;
        margin-left: 64px
      }
      &_change {
        font-size: 14px;
        color: #000000;
        cursor: pointer
      }
      &_btn {
        width: 265px;
        height: 43px;
        line-height: 43px;
        text-align: center;
        margin-left: 100px;
        margin-top: 20px;
        background-color: #FF9900;
        font-size: 14px;
        color: #FFFFFF
      }
      &_btn.small {
        width: 128px;
        margin-left: 0;
        &:nth-of-type(1) {
          margin: 0 5px 0 100px
        }
      }
      &_btn-getCode {
        width: 116px;
        height: 37px;
        font-size: 14px;
        line-height: 37px;
        text-align: center;
        border-radius: 10px;
        color: #FF9900;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC
      }
    }
    .item.yz {
      margin-top: 30px
    }
    .complete-login {
      margin-top: 30px;
      .logo {
        width: 64px;
        height: 64px;
        display: inline-block;
        margin-right: 40px;
        img {
          width: 100%;
          height: 100%;
          vertical-align: sub
        }
      }
      .success-tip {
        display: inline-block;
        text-align: left;
        h4 {
          color: #000000;
          font-size: 22px;
          font-weight: 400;
          line-height: 55px
        }
        span {
          color: #999999;
          font-size: 14px;
          margin-right: 5px
        }
        a {
          font-size: 14px;
          color: #FF9900
        }
      }
    }
    .find-byPhone, .box-body_cnt .find-byEmail, .box-body_cnt .reset-pwd, .box-body_cnt .complete-login {
      display: none
    }
  }
}
// --------------------------------- main.css --------------------------------- >


// ---------------------------------  弹   框  --------------------------------- <
.GiftDetailDialog {
  width: 744px;
  height: 476px;
  line-height:1em;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  &_l {
    width: 188px;
    float: left;
    background: $mainColor;
    position: absolute;
    height: 100%;
    color: #FFFFFF;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    & > div {
      text-align: center;
      img {
        width: 100px;
        height: 100px;
        display: inline-block;
      }
      h3 {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 8px;
        text-align: center
      }
      p {
        width: 100%;
        padding:0 30px;
        line-height: 1.4em;
        text-align: center
      }
    }
  }
  &_r {
    padding-left: 188px;
    padding-right: 10px;
    height: 100%;
    border: 1px solid #CCCCCC;
    border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    .Title {
      width: 100%;
      border-bottom: 1px solid $mainColor;
      height: 50px;
      display: flex;
      display: -webkit-flex;
      position: relative;
      align-items: center;
      justify-content: center;
      span {
        font-size: 16px;
        font-weight: 600;
        color: #000000
      }
      img {
        position: absolute;
        right: 0;
        width: 30px;
      }
    }
    .Receive {
      width: 100%;
      text-align: center;
      margin-top: 50px;
      button {
        display: inline-block;
        width: 195px;
        height: 38px;
        background: $btnColor;
        font-size: 20px;
        font-weight: 600;
        color: #FFFFFF
      }
    }
    .QA {
      padding-top: 40px;
      padding-left: 50px;
      &_item {
        font-size: 14px;
        margin-bottom: 25px;
        &_Q {
          color: #333333;
          margin-bottom: 10px
        }
        &_A {
          color: #999999;
          line-height: 1.4em;
        }
        .GiftCntColor {
          color: #993366
        }
      }
    }
  }
}  // 领取礼包
.successDialog {
  width: 592px;
  height: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  &_top {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    border: 1px solid #CCCCCC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none
  }
  img {
    width: 68px;
    margin-right: 40px
  }
  .msg {
    font-size: 22px;
    color: #000000;
    p {
      &:first-child {
        margin-bottom: 13px
      }
    }
  }
  &_Code {
    height: 270px;
    padding-top: 20px;
    background: $mainColor;
    img {
      width: 160px;
      display: block;
      margin: 0 auto;
    }
    h2 {
      margin-top: 20px;
      display: block;
      font-weight: 600;
      font-size: 30px;
      width: 100%;
      text-align: center;
      color: #FFFFFF;
    }
    a {
      width: 107px;
      height: 33px;
      position: absolute;
      right: 15px;
      bottom: 15px;
      background: transparent;
      border: 1px solid #FFFFFF;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      color: #FFFFFF;
      font-size: 14px;
      text-align: center;
      line-height: 33px;
      &:hover {
        color: #FFFFFF
      }
    }
  }
}  // 礼包领取成功
// ---------------------------------  弹   框  --------------------------------- >