/*
   created by yt
   time: 2018-10
*/

* {
    margin: 0;
    padding: 0;
    outline: none;
}

html,body {
    overflow-x: hidden;
}

body {
    /* max-width: 100%; */
    margin: 0 auto;
}

.big-circle {
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #fff;
    background: rgba(37, 182, 218, 1);
    opacity: 0.5;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
}

.big-circle.active {
    opacity: 1;
}

.big-circle i {
    font-style: normal;
    font-size: 30px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

.sm-circle {

    width: 16px;
    height: 16px;
    background: rgba(72, 189, 218, 1);
    border-radius: 50%;
    display: inline-block;
    /* margin-left: 27px; */
    margin-left: 20px;
    opacity: .5;
}

.sm-circle.active {
    opacity: 1;
}

.form {

    width: 958px;
    height: 692px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    margin: 0 auto;
    margin-top: 70px;
}

.text-info span {
    width: 120px;
    height: 30px;
    font-size: 30px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(96, 96, 96, 1);
}

.inputbox label {
    width: 96px;
    height: 23px;
    font-size: 24px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    margin: 67px 54px 0 37px;
    color: rgba(127, 127, 127, 1);
}

.inputbox input {
    width: 664px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(170, 170, 170, 1);
    margin-top: 34px;
}

.inputbox input:focus {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 162, 202, 1);
    box-shadow: 0px 0px 0px 0px rgba(130, 130, 130, 0.57);
}

#input-rewrite {
    resize: none;
    width: 664px;
    overflow: auto;
    min-height: 145px;
    margin-top: 34px;
    vertical-align: middle;
    padding: 10px 5px;
}

.btn {
    width: 300px;
    height: 70px;
    background: rgba(37, 182, 218, 1);
    box-shadow: 0px 0px 0px 0px rgba(130, 130, 130, 0.57);
    border-radius: 35px;
    margin-top: 45px;
    margin-bottom: 49px;
    text-align: center;
}

.btn span {
    width: 71px;
    height: 23px;
    font-size: 24px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(254, 254, 254, 1);
}

.sss {
    position: absolute;
    top: 60px;
    font-size: 22px;
    color: black;
    display: inline-block;
    width: 200px;
    left: -65px;
}

.pay {
    width: 1054px;
    height: auto;
    min-height: 638px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(201, 201, 201, 1);
    margin: 0 auto;
    margin-top: 63px;
    padding: 0 18px;
}

.set-meal {
    width: 220px;
    height: 128px;
    border: 1px solid rgba(191, 191, 191, 1);
    /*margin-top: 61px;*/
    margin-bottom: 40px;
    margin-left: 28px;
    float: left;
    cursor: pointer;
}

.set-meal.current {
    border: 2px solid rgba(0, 162, 202, 1);
    -webkit-box-shadow: 0px 0px 20px #A7E3F1; /* 兼容webkit内核 */
    -webkit-box-shadow: 0px 0px 20px #A7E3F1; /* 兼容gecko内核 */
}

.pay-time {
    height: 57px;
    line-height: 57px;
    width: 100%;
    border-bottom: 1px dashed rgba(195, 195, 195, 1);
    text-align: center;
}

.pay-time span {
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(46, 46, 46, 1);
    text-align: center;
}

.pay-money {
    height: 70px;
    width: 100%;
    text-align: center;
    line-height: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pay-price i {
    font-style: normal;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(0, 162, 202, 1);
}

.pay-price {
    font-size: 30px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(0, 162, 202, 1);
}

.gift {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(0, 162, 202, 1);
}

.selbox {
    height: auto;
    min-height: 381px;
    padding-top: 40px;
    border-bottom: 1px solid rgba(210, 210, 210, 1);
}

.version {
    height: 256px;
    /* padding: 32px 0; */
}

.sel-v {
    height: 148px;
    width: 427px;
    margin-left: 80px;
    float: left;
    margin-top: 53px;
}

.change-v {
    width: 140px;
    height: 40px;
    border: 1px solid rgba(160, 160, 160, 1);
    text-align: center;
    background-color: #fff;
    display: block;
    margin-bottom: 30px;
    outline: none;
}

.change-v span {
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(111, 111, 111, 1);
}

.change-v.current {
    background: rgba(0, 162, 202, 1);

}

.change-v.current span {
    color: #fff;
}

.v-explain {
    float: right;
    width: 235px;
    height: 148px;
    background: rgba(249, 249, 249, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    margin-left: 52px;
}

.ch-box {
    float: left;
}

.v-explain h6 {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(0, 162, 202, 1);
    margin-left: 17px;
    margin-top: 13px;
}

.v-explain p {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    margin-left: 17px;
    text-align: left;
    /* margin-top: 20px; */
}

.rule {
    width: 1px;
    height: 192px;
    background: rgba(191, 191, 191, 1);
    float: left;
    margin-left: 29px;
    margin-top: 32px;
}

.pay-pic {
    /*width: 379px;*/
    /*height: 164px;*/
    float: right;
}

.setting {
    width: 1066px;
    height: 640px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(210, 210, 210, 1);
    margin: 70px auto 0;
    text-align: center;
}

.mark {
    margin-top: 56px;
}

.setting label {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(96, 96, 96, 1);
}

.setting #markId {
    margin-left: 9px;
    width: 742px;
    height: 26px;
    background: rgba(238, 238, 238, 1);
    border: 1px solid rgba(229, 229, 229, 1);

}

.customer {
    margin-top: 49px;
}

.droplist {
    width: 122px;
    height: 31px;
    background: rgba(51, 204, 153, 1);
    position: relative;
    float: left;
    margin-left: 20px;
}

.droplist li {
    height: 31px;
    line-height: 31px;
    color: #FFFFFF;
}

.droplist b {
    width: 0;
    height: 0;
    border-width: 7px;
    border-style: solid solid solid solid;
    border-color: #fff transparent transparent transparent;
    /* display: block; */
    position: absolute;
    right: 3px;
    top: 10px;
}

.warning {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(156, 156, 156, 1);
    margin-top: 10px;
    margin-left: 6px;
    float: left;
}

.warning i {
    font-style: normal;
    color: rgba(255, 51, 51, 1);
}

.domain {
    margin-bottom: 19px;
}

.domain label {
    margin-left: 113px;
    float: left;
    margin-top: 5px;
}

.domain div input {
    width: 665px;
    height: 34px;
    background: rgba(245, 245, 245, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    float: left;
    margin-left: 22px;
}

.domain p {
    margin-top: 12px;
    margin-left: 198px;
    text-align: left;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(156, 156, 156, 1);
}

.subbtn {
    width: 152px;
    height: 48px;
    line-height: 48px;
    background: rgba(0, 162, 202, 1);
    box-shadow: 0px 0px 0px rgba(NaN, 202, 162, 0.35);
    margin: 41px auto 0;
    cursor: pointer;
}

.subbtn span {
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

.createweb p {
    text-align: center;
    width: 1090px;
    font-size: 36px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(241, 180, 35, 1);
}

.webbox {
    width: 1090px;
    height: 482px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    margin: 67px auto 0;
}

.webbox p {
    margin-top: 80px;
}

.webbox a {
    margin: 10px;
    display: block;
}

.webbox input {
    width: 591px;
    height: 52px;
    background: rgba(247, 247, 247, 1);
    border: 1px solid rgba(160, 160, 160, 1);
    font-size: 25px;
    color: rgba(241, 180, 35, 1);
    margin: auto;
    margin-top: 70px;
    outline: none;
}

.webbox .createbtn {
    width: 152px;
    height: 48px;
    background: rgba(0, 162, 202, 1);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.35);
    outline: none;
    display: block;
    margin: 70px auto 0;
    border: none;
    font-size: 24px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

.weixin {
    float: left;
    margin-right: 40px;
}

.zfb {
    float: right;
    margin-right: 40px;
}

.weixin p,
.zfb p {
    margin-top: 4px;
}

.weixin p {
    background: url(https://wx.gtimg.com/pay/img/common/logo.png?v=20160114) no-repeat;
    color: #fff;
    padding: 10px 0;
    text-indent: -9999px;
    background-position: 15px 0;
}

.zfb p {
    background: url("https://t.alipayobjects.com/images/T1HHFgXXVeXXXXXXXX.png") no-repeat;
    color: #fff;
    padding: 10px 0;
    text-indent: -9999px;
    background-position: 15px 0;
}

.pay-pic > div {
    /*float: left;*/
    /*margin-right: 40px;*/
    margin-top: 30px;
    text-align: center;
    padding: 10px;
    background-color: #FFFFFF;
}

.erm-wx {
    padding: 6px;
    background-color: #fff;
    border: 2px solid green;
}

.erm-zfb {
    padding: 6px;
    background-color: #fff;
    border: 2px solid rgba(37, 182, 218, 1);
}

.erm-wx img,
.erm-zfb img {
    width: auto;
    height: auto;
    max-width: 130px;
    max-height: 130px;
    display: block;
}

/*手机端 简单修改
  基于iphone4,这里最好使用rem，这样体验更好，不过现在不好改了，暂时先这样
  style.css去掉了宽度为1200的样式  -----update by yt  time:2018-11
*/

@media screen and (max-width: 640px) {
    body {
        width: 100%;
        min-width: 300px !important;
        max-width: 100%;
        overflow-x: hidden;
    }
    .header-nav .logo {
        margin-left: 10px;
    }

    .main-content {
        width: 100% !important;
    }

    .ct-box {
        height: 590px;
    }

    .big-circle {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .circle-step {
        width: 100% !important;
        padding: 0 5px;
    }

    .sm-circle {
        width: 8px;
        height: 8px;
        margin-left: 2px;
        margin-right: 2px !important;
    }

    .big-circle i {
        font-size: 12px;
    }

    .sss {
        font-size: 12px;
        top: 30px;
        left: -86px;
    }

    .form {
        width: 100%;
        padding: 0 10px;
        border: none;
        margin-top: 50px;
    }

    .form .inputbox {
        text-align: left;
    }

    .form .inputbox input,
    .form .inputbox #input-rewrite {
        font-size: 12px;
        margin-top: 0px !important;
        width: 100%;
    }

    .form .inputbox label {
        font-size: 20px;
        height: 35px;
        line-height: 35px;
        margin: 10px 0 !important;
    }

    .btn {
        width: 200px;
        height: 35px;
        font-size: 16px;
        margin: 0;
    }

    .nav-title {
        margin-top: 0 !important;
    }

    .nav-title span:nth-child(1) {
        margin-left: 2%!important;
    }

    #app {
        margin: 30px 0 30px !important;
    }

    .footer-copyright {
        margin-top: 0 !important;
    }

    /*第二个页面*/
    .setting {
        width: 100%;
        padding: 0 10px;
        border: none;
        margin: 50px auto 0;
    }

    .setting div {
        margin-top: 10px!important;
    }

    .setting label {
        margin-left: 0!important;
    }

    .warning {
        margin-left: 2px;
        font-size: 12px;
    }

    .droplist {
        margin-left: 10px;
        color: #fff;
    }

    .setting .mark input,
    .setting .domain input
    {
        font-size: 12px;
        width: 100%!important;
        margin-left: 0!important;
    }

    .setting .mark {
        margin-left: 0!important;
    }

    .mark label,
    .domain label {
        display: block;
        margin: 0 0 10px 0;
    }

    .domain {
        margin-top: 0!important;
    }

    .domain p {
        margin-left: 0;
    }

    .subbtn span {
        font-size: 16px;
    }

    /*第三页*/
    .pay {
        width: 100%;
        border: none;
        margin-top: 30px!important;
    }
    .version {
        /*display: none;*/
        height: auto;
    }

    .selbox {
        border: none;
    }

    .set-meal {
        margin-left: 4px;
        width: 47%;
        margin-bottom: 30px;
    }
    .pay-time span {
        font-size: 16px;
    }
    .pay-price {
        font-size: 14px;
        display: block;
        height: 15px;
    }
    .gift {
        font-size: 12px;
    }
    .sel-v,
    .rule {
        display: none;
    }

    .pay-pic {
        float: none;
    }

    .pay-pic>div {
        float: none;
        padding: 0;
        width: 142px;
        margin:  0 auto;
    }

    .weixin p,
    .zfb p {
        width: 142px;
        text-align: center;
    }

    .zfb p{
        padding: 11px 0;
    }

    .erm-zfb,
    .erm-wx {
        width: 142px;
        margin: 0 auto;
    }

    /*-----*/
    .ct-box {
        height: auto;
    }

    /*最后*/
    .webbox,
    .createweb p {
        width: 100%;
    }

     div {
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
    }
    
}