.txpo-main-content{
    width: 1200px;
    margin:0 auto;
}
.txpo-main-content .info{
    margin:0 50px;
    font-size: 20px;
    color: #FFF;
    line-height: 200%;
}
.tf-txpo-content{
    background: #FFF;
}
.tf-txpo-banner{
    height: 500px;
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/bg-banner.png") no-repeat center;
    padding-top: 144px;
}
.tf-txpo-banner .banner-main-title{
    height: 66px;
    background: url("../../images/banner-main-title.png") no-repeat center;
}
.tf-txpo-banner .banner-main-motto{
    color:#FFF;
    font-size: 30px;
    font-family: SimSun;
    width: 750px;
    margin:0 auto;
    margin-top:67px;
    background: url("../../images/quote-right.png") no-repeat right bottom;
    height: 60px;
    line-height: 60px;
}

.tf-txpo-banner .banner-main-motto > span{
    display: inline-block;
    width: 14px;
    height: 42px;
}
.tf-txpo-banner .banner-main-motto > span.quote-left{
    background: url("../../images/quote-left.png") no-repeat left top;
}
.tf-txpo-banner .banner-main-motto > span.quote-right{
    background: url("../../images/main-quotemark.png") no-repeat right bottom;
    transform: rotate(180deg);
}
.tf-txpo-info{
    height: 793px;
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/main-bg-txpo-1.png") no-repeat center;
    padding: 250px 0;
}
.tf-txpo-content .txpo-info-title{
    text-align: center;
    font-size: 36px;
    padding-bottom: 25px;
    margin-bottom: 50px;
}
.tf-txpo-content  .title-01{
    color:#FFF;
    background: url("../../images/sep-s1.png") no-repeat center bottom;
}
.tf-txpo-content  .title-02{
    color:#000;
    background: url("../../images/sep-s2.png") no-repeat center bottom;
}
.tf-txpo-content  .title-03{
    color:#FFF;
    background: url("../../images/sep-s3.png") no-repeat center bottom;
}
.tf-txpo-content .tf-txpo-course{
    background: url("../../images/Rectangle.png") repeat-x left bottom #FFF;
    padding: 66px 0;
    font-size: 16px;
}
.course-info{
    line-height: 200%;
    color:#7B7B7B;
    text-align: center;
}
ul.course-item{
    margin-top:50px;
}
ul.course-item > li{
    float: left;
    margin:0 60px 60px 0;
}

ul.course-item > li > a {
    display: block;
}

ul.course-item > li .course-name{
    /* width: 160px; */
    margin-top:11px;
    float: left;
}
ul.course-item > li .course-name > a{
    color:#333;
}
ul.course-item > li .course-name .name{
    color:#000;
    font-size: 20px;
}
ul.course-item > li .course-name .eg-name{
    color:#565656;
    font-size: 16px;
}
ul.course-item > li .course-detail > button{
    float: right;
    color:#FFF;
    width: 127px;
    height: 37px;
    background: #DFB26C;
    border:none;
    border-radius:4px; 
    border-bottom: 4px solid #BB8530;
    margin-top: 18px;
}
ul.course-advantage{
    margin:30px 0 0 30px;
}
ul.course-advantage > li{
    float: left;
    margin-right: 20px;
    width: 210px;
    height: 384px;
    background: #FFF;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    padding: 0 23px;
}
ul.course-advantage > li:last-child{
    margin-right: 0;
}
ul.course-advantage > li .advantage-icon{
    height: 141px;
}
ul.course-advantage > li.advantage-01 .advantage-icon{
    background: url("../../images/main-icon-1.png") no-repeat center;
}
ul.course-advantage > li.advantage-02 .advantage-icon{
    background: url("../../images/main-icon-2.png") no-repeat center;
}
ul.course-advantage > li.advantage-03 .advantage-icon{
    background: url("../../images/main-icon-3.png") no-repeat center;
}
ul.course-advantage > li.advantage-04 .advantage-icon{
    background: url("../../images/main-icon-4.png") no-repeat center;
}
ul.course-advantage > li.advantage-05 .advantage-icon{
    background: url("../../images/main-icon-5.png") no-repeat center;
}
ul.course-advantage > li .advantage-title{
    text-align: center;
    font-size: 24px;
    color:#000;
    font-family: SimSun;
    font-weight: bold;
}
ul.course-advantage > li .separate-line{
    width: 50px;
    height: 4px;
    background: #DFB26C;
    margin:14px auto;
    opacity: .5;
}
ul.course-advantage > li .advantage-detail{
    font-size: 16px;
    color: #7B7B7B;
    line-height: 35px;
}
.tf-txpo-certificate{
    height: 650px;
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/main-blockchain-bg.png") no-repeat center;
    padding: 80px 0;
}
.tf-txpo-certificate .certificate-info{
    margin-top:60px;
    height: 290px;
}
.tf-txpo-certificate .certificate-info .main-blockchain-icon{
    float: left;
    width: 300px;
    height: 290px;
    background: url("../../images/main-blockchain-pic.png") no-repeat;
}
.tf-txpo-certificate .certificate-info .main-blockchain{
    float: right;
    width: 850px;
    height: 290px;
    background: #FFF;
    border-radius: 90px 0 0 0;
    padding: 46px 75px;
    font-size: 18px;
    color: #242424;
    text-align: justify;
    line-height: 36px;
}
.tf-txpo-lecturer{
    height: 674px;
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/main-dashi-bg-1.png") no-repeat center;
    padding-top: 97px;
}
.tf-txpo-lecturer .lecturer-left{
    float: left;
    width: 316px;
    height: 507px;
    background: url("../../images/main-dashi-avatar.png") no-repeat center;
}
.tf-txpo-lecturer .lecturer-detail{
    float:left;
    width: 850px;
    height: 394px;
    background: #FFF;
    margin:30px 15px;
    padding: 60px 55px;
    position: relative;

    font-family: SourceHanSansSC-Regular;
    font-size: 18px;
    color: #242424;
    text-align: justify;
    line-height: 36px;
}
.tf-txpo-lecturer .lecturer-detail .lecturer-title{
    font-family: SimSun;
    font-weight: bold;
    font-size: 36px;
    color: #000000;
}
.tf-txpo-lecturer .lecturer-detail .lecturer-info{
    font-size: 16px;
    color: #242424;
    text-align: justify;
    line-height: 36px;
    margin-top:30px;
}
button.learn-more{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 16px;
    color: #FFF;
    border: none;
    background: #FF9F00;
    width: 215px;
    height: 56px;
}
.tf-txpo-organ{
    background: #FFF;
    padding: 50px;
    font-size: 16px;
}
div.course-organ{
    margin:50px 0;
}
div.course-organ .course-organ-item{
    float: left;
    background: #FFF;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    width: 216px;
    height: 317px;
    text-align: center;
    padding: 33px 0;
}
div.course-organ .organ-separator{
    float: left;
    width: 1px;
    height: 260px;
    margin:0 48px;
    background: #E2E2E2;
    margin-top:30px;
}

div.course-organ .course-organ-item > a {
    display: inline-block;
    width: 140px;
    height: 140px;
}
div.course-organ .course-organ-item > a > img{
    width: 100%;
}
div.course-organ .course-organ-item .course-organ-name{
    font-size: 18px;
    font-weight: bold;
    margin-top: 38px;
}

/*课程详情*/
.txpo-detail-banner{
    height: 500px;
    text-align: center;
    padding-top: 142px;
    color:#FFF;
    font-size: 42px;
    font-family: SimSun;
    font-weight: bold;
}




.txpo-detail-banner .banner-detail-title{
    text-align: center;
    margin-bottom: 34px;
}
.txpo-course-content .txpo-course-item{
    padding: 90px 0;
}
.txpo-course-title{
   font-weight: bold;
}
.txpo-course-title > p{
    text-align: center;
}
.txpo-course-title > p.course-title{
    font-size: 40px;
}
.txpo-course-title > p.course-title-eg{
    font-size: 28px;
}
.txpo-course-about{
    margin:20px 0 50px 0;
}
.txpo-course-about .about-title{
    font-weight: bold;
}
.txpo-course-about .about-title > span{
    margin-right: 10px;
}
.txpo-course-about .about-title > span.about-detail{
    font-size: 32px;
}
.txpo-course-about .about-title > span.about-detail-eg{
    font-size: 28px;
}
.txpo-course-about .course-about-detail{
    font-size: 18px;
    color: #414141;
    line-height: 43px;
    margin-bottom: 70px;
}
.txpo-course-about > table{
    width: 1200px;
    margin-top:20px;
}
.txpo-course-about > table tr.table-header th{
    height: 66px;
    text-align: center;
    color:#8F8F8F;
    font-weight: normal;
    font-size: 18px;
}
.txpo-course-about > table  td{
    height: 166px;
    width: 240px;
}
.txpo-course-about > table tr.table-header th:last-child{
    width: 320px;
    padding: 20px;
}
.txpo-course-about > table tr.detail th:last-child{
    border-bottom: none;
    text-align: left;
}
.txpo-course-about > table tr td:last-child{
    border-top:none; 
}
p.course-title-eg ,span.about-detail-eg{
    opacity: .5;
}
.txpo-course-about > table  th,.txpo-course-about > table  td{
    border: 1px solid #EFEFEF;
    text-align: center;
}
.txpo-course-about > table tr.table-header th > span.prefer{
    float: left;
    color:#000;
    font-weight: bold;
}
.txpo-course-about > table tr.table-header th > span.oiginal-price{
    float: right;
    font-size: 12px;
    color:#8F8F8F;
    line-height: 30px;
}
table  td.place > span{
    display: inline-block;
    font-size: 18px;
    width: 70px;
    height: 70px;
    border: 1px solid;
    line-height: 70px;
    border-radius: 90px;
}
table  td.date > p{
    font-size: 20px;
    margin: 0;
}
table  td.date .arrow{
    font-size: 18px;
    transform: rotate(90deg);
}
table  td.hours{
    color:#666;
}
table  td.hours > span{
    font-size: 44px;
    color: #000000;
    letter-spacing: 0;
    margin-right: 5px;
}
table  td.time{
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
}
table  td.time > div.time-mark{
    display: inline-block;
    font-size: 14px;
    color:#FFF;
    width: 30px;
    height: 30px;
    border-radius: 60px;
    line-height: 30px;
    margin-bottom: 10px;
}
table  td.discount{
    position: relative;
    font-size: 18px;
}
table  td.discount > span{
    font-size: 44px;
}
table  td.discount > button{
    position: absolute;
    width: 100%;
    height: 42px;
    left:0;
    bottom: 0;
    border: none;
    color:#FFF;
    font-size: 17px;
}
p.suitable{
    color:#8F8F8F;
    margin-top:10px;
    font-size: 16px;
    margin-bottom: 0;
    line-height: 30px;
}
p.suitable > label{
    opacity: 0.5;
}
p.suitable > span{
    padding:1px 7px;
    color:#FFF;
    font-size: 12px;
    border-radius: 90px;
}
.tutor > span{
    float: right;
    margin-left: 20px;
}
.tutor > span > a{
    color:#8F8F8F;
}



/*课程一*/ /*课程二*/
.course-01 .txpo-course-title ,
.course-01 .about-title,
.course-01 .place,
.course-01 td.discount,
.course-01 p.suitable > label{
    color: #AF854E;
}
.course-01 td.discount > button,
.course-01 td.time > div.time-mark,
.course-01 p.suitable > span{
    background: #AF854E;
}

.course-02 .txpo-course-title ,
.course-02 .about-title,
.course-02 .place,
.course-02 td.discount,
.course-02 p.suitable > label{
    color: #81583D;
}
.course-02 td.discount > button,
.course-02 td.time > div.time-mark,
.course-02 p.suitable > span{
    background:#81583D;
}

.detail-banner-01 .banner-detail-title{
    background: url("../../images/title-c1.png") no-repeat center;
    height: 67px;
}


/*课程三*/
.course-03 .txpo-course-title ,
.course-03 .about-title,
.course-03 .place,
.course-03 td.discount,
.course-03 p.suitable > label,
.course-03 .unit-left .unit-title{
    color: #A48C65;
}
.course-03 td.discount > button,
.course-03 td.time > div.time-mark,
.course-03 p.suitable > span,
.course-03 .unit-title-line > span{
    background:#A48C65;
}
.course-03 .unit-right{
    width: 160px;
    height: 160px;
    float: right;
    background: url("../../images/cooper-logo-1.png") no-repeat center;
    background-size: 100% auto;
}
.detail-banner-03 .banner-detail-title{
    background: url("../../images/title-c3.png") no-repeat center;
    height: 67px;
}


/*课程四*/
.course-04 .txpo-course-title ,
.course-04 .about-title,
.course-04 .place,
.course-04 td.discount,
.course-04 p.suitable > label,
.course-04 .tutor > span > label{
    color: #2569A5;
}
.course-04 td.discount > button,
.course-04 td.time > div.time-mark,
.course-04 p.suitable > span{
    background:#2569A5;
}
.detail-banner-04 .banner-detail-title{
    background: url("../../images/title-c4.png") no-repeat center;
    height: 67px;
}

/*课程五*/
.detail-banner-05 .banner-detail-title{
    background: url("../../images/title-c5.png") no-repeat center;
    height: 67px;
}

/*课程六*/
.detail-banner-06{
    padding-top: 124px;
}
.detail-banner-06 .banner-detail-title{
    background: url("../../images/title-c6.png") no-repeat center;
    height: 172px;
}
.course-06 .txpo-course-title ,
.course-06 .about-title,
.course-06 .place{
    color: #7F2725;
}
.course-06-detail .course-item{
    float: left;
    width: 211px;
    height: 314px;
    border: 1px solid #DDC7C6;
    border-radius: 10px;
    text-align: center;
    padding: 0 36px;
}
.separator-line{
    float: left;
    width: 1px;
    height: 260px;
    margin:30px 38px;
    background: #DDC7C6;
}
.course-06-detail .course-item .course-icon{
    height: 211px;
}
.course-06-detail .course-item .course-info{
    font-size: 18px;
    color:#414141;
    font-weight: bold;
}
.course-06-detail .item-01 .course-icon{
    background: url("../../images/c5-icon-1.png") no-repeat center;
}
.course-06-detail .item-02 .course-icon{
    background: url("../../images/c5-icon-2.png") no-repeat center;
}
.course-06-detail .item-03 .course-icon{
    background: url("../../images/c5-icon-3.png") no-repeat center;
}
.course-06-detail .item-04 .course-icon{
    background: url("../../images/c5-icon-4.png") no-repeat center;
}
/*课程七*/
.detail-banner-07{
    padding-top: 100px;
}
.detail-banner-07 .banner-detail-title{
    background: url("../../images/title-c7-0827.png") no-repeat center;
    height: 135px;
}
.course-07 .txpo-course-title ,
.course-07 .about-title,
.course-07 .place,
.course-07 td.discount,
.course-07 p.suitable > label,
.course-07 .unit-left .unit-title{
    color: #368DD2 
}
.course-07 td.discount > button,
.course-07 td.time > div.time-mark,
.course-07 p.suitable > span,
.course-07 .unit-title-line > span{
    background:#368DD2;
}
.course-07 .unit-right{
    width: 160px;
    height: 160px;
    float: right;
    background: url("../../images/cooper-logo-cacee 2.png") no-repeat center;
    background-size: 100% auto;
}
/* 极研社--导师简介 */
.teacher-container{
    width: 1200px;
    margin: 60px auto;
    background-color: #fff; 
    padding: 20px 75px 60px 75px;
}
.teacher-title{
    font-size: 29px;
    color: #DFB26C;
    text-align: center;
    margin-bottom: 5px;
}
.teacher-title-block{
    width: 70px;
    height: 6px;
    background-color: #F1DCBC;
    margin: 0 auto;
    margin-bottom: 40px;
}
.teacher-li{
    padding: 40px 0;
    border-bottom: 1px solid #979797;
}
.teacher-li:last-child{
    border-bottom: none;
}
    
.teacher-header{
    float: left;
    width: 140px;
    height: 140px;
    border: 3px solid #DFB26C;
    border-radius: 50%;
}
.teacher-information{
    margin-left: 200px;
}
.teacher-font{
    font-size: 20px;
    color: #8F8F8F;
    line-height: 39px;
}

/* 立即报名 */
.step-title{
    font-size: 16px;
    color: #000000;
    padding: 25px 0 0 25px;
    font-weight: bold;
    font-weight: bold;
}
.step-li-container{
    width: 945px;
    margin: 0 auto;
    margin-top: 25px;
}
.step-li{
    float: left;
    width: 170px;
    height: 150px;
    padding: 30px 24px;
    border: 1px solid rgba(223,178,108,0.40);
    border-radius: 20px;
    box-sizing: border-box;
}
.step-arrow{
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 30px;
    margin-top: 50px;
    border-top: 20px solid transparent;
    border-left: 27px solid #DFB26C ;
    border-bottom: 20px solid transparent;
}
.step-num{
    font-size: 20px;
    color: #DFB26C;
    font-weight: bold;
}
p{
    margin: 0;
}
.step-hr{
    width: 1160px;
    height: 1px;
    margin: 60px auto 0 auto;
    background-color:  #E4E4E4;
}
.step-btn-container{

    padding: 25px 0 50px 0;
}
.step-btn-container button{
    width: 180px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #DFB26C;
    border: none;
    font-weight: bold;
}
/* 我的会员页 */
.input-ul{
    float: left;
    margin-left: 50px;
}
.input-container{
    position: relative;
    margin-top: 25px;
}
.input-container label{
    width: 70px;
    font-size: 14px;
    color: #666666;
}
.input-container input{
    font-size: 14px;
    width: 228px;
    height: 30px;
    padding: 0 5px;
    border: 1px solid #ABABAB;
}
form label.error {
    position: absolute;
    left: 73px;
    width: 100%;
    bottom: -24px;
    color: #f25454;
    font-size: 12px;
}

/**/
table.table-content{
    margin-bottom: 70px;
}
table.table-content  td{
    height: 45px;
    text-align: center;
    color: #000;
    font-size: 15px
}
table.table-content  td.course-name{
    font-size: 19px;
}
.course-item-content{
    margin-bottom: 120px;
}
.unit-title-line{
    text-align: center;
}
.unit-title-line > span{
    display: inline-block;
    height: 6px;
    width: 67px;
    opacity: .5;
}
.unit-left{
    float: left;
    width: 960px;
}
.unit-left .unit-title{
    font-size: 30px;
}
.unit-left .unit-content{
    font-size: 18px;
    color: #414141;
    line-height: 43px;
    margin-top: 20px;
}
.unit-right{
    width: 160px;
    height: 160px;
    float: right;
}
.list-banner01{
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/bg-b1.png") no-repeat center;
}
.list-banner02{
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/bg-b2.png") no-repeat center;
}
.list-banner03{
    background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/bg-b3.png") no-repeat center;
}

.txpo-main-item .txpo-info-title{
    margin-bottom: 20px;
}
.txpo-main-item ul.course-item{
    margin-top:20px;
}

/* video详情 */
.tf-video-banner{
    height: 675px;
    background: #3C3C3C;
    border: 1px solid #979797;
}
.tf-video-banner .course-video{
    width: 1200px;
    height: 675px;
    margin: 0 auto;
    /* background: url("https://cdn.tyfon.com.cn/themes/mall/jd2014/styles/default/images/txpo/video-bg.png") no-repeat center; */
}
.brief-item{
    float:left;
    width: 560px;
    margin-right: 80px;
}
.brief-introduction > div:last-child{
    margin-right: 0;
}
.brief-title .title{
    font-size: 28px;
    color:#000;
}
.brief-title .eg-title{
    opacity: 0.47;
    font-size: 28px;
    color: #DFB26C;
    font-weight: bold;
    margin-left:10px;
}
.brief-content{
    font-size: 16px;
    line-height: 36px;
    color: #656565;
    margin-top:24px;
}
.course-more-video{
    margin-top:70px;
}
a.view-more{
    color: #B1B1B1;
    float: right;
}
/* 艺术大讲堂 */
.li-img-container-relative{
    position: relative;
}
.forum-bg-detail{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}
.forum-bg-name{
    margin-top: 30px;
    font-size: 34px;
    color: #FFFFFF;
}
.forum-bg-time{
    margin-top: 10px;
    font-size: 14px;
    color: #FFFFFF;
}
.forum-bg-address{
    display: inline-block;
    padding: 2px 10px;
    margin-top: 15px;
    background: #fff;
    color: #630B14;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50px;
}
/* 
    艺术词条
*/
.art-code-area{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.art-code-title{
    font-size: 22px;
    color: #000;
    padding: 50px 0 25px 0;
}
.art-code-item{
    position: relative;
    width: 240px;
    margin-right: 35px;
    border-radius: 10px;
    overflow: hidden;
}
.art-code-item::after{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    background: rgba(0, 0, 0, .1);
}
.art-code-img{
    display: block;
    width: 100%;
}
.art-code-tit{
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 17px;
    color: #fff;
    z-index: 1;
}
.hot-code-area{
    margin-left: 850px;
}
.hot-code-item{
    height: 240px;
    overflow-y: auto;
}
.art-code-txt{
    padding: 5px 20px;
    margin: 0 10px 15px 0;
    font-size: 14px;
    color: #9E9E9E;
    border-radius: 20px;
    background: #FFF1E7;
}
.art-code-txt a{
    color: #9E9E9E;
    text-decoration: none;
}



.art-code-banner-area{
    height: 340px;
    background-image: url(../../images/tf_images/txpo/banner.png);
    background-position: center;
    
}
.art-code-search-area{
    width: 880px;
    margin: 0 auto;

}
.art-code-search-title{
    padding-top: 70px;
    text-align: center;
    font-size: 40px;
    color: #fff;           
}
.art-code-search{
    position: relative;
    margin-top: 35px;
    padding: 20px 30px;
    background: #fff;
    border-radius: 50px;

}
.art-code-search-input{
    display: inline-block;
    width: 700px;
    font-size: 26px;
    color: #C0C0C0;
    border: none;
    outline: none;
}
.art-code-search-btn{
    position: absolute;
    right: 30px;
    top: 18px;
    width: 40px;
    height: 40px;
    background-image: url(../../images/tf_images/txpo/search-logo.png);
    background-position: center;
    background-size: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #fff;
}
.art-code-search-tit{
    padding: 15px 0 15px 0;
    border-bottom: 1px solid #CDCDCD;
    font-size: 22px;
    color: #000000;
}
.art-code-container{
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 100px;
}
.art-search-result{
    margin-bottom: 50px;
}
.art-search-item{
    display: inline-block;
    padding: 5px 20px;
    margin: 20px 10px 0 0;
    font-size: 14px;
    color: #9E9E9E;
    border-radius: 20px;
    background: #FFF1E7;
    cursor: pointer;
}
.all-code{
    margin-top: 40px;
}
.all-code-left{
    font-size: 24px;
    color: #000;
}
.all-code-right{
    margin-left: 150px;
    font-size: 0;
}
.all-code-item{
    display: inline-block;
    width: 20%;
    margin-bottom: 20px;
    font-size: 14px;
    color: #565656;
    cursor: pointer;
}
.code-modal-container {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
}
.code-modal-middle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1000px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    border-radius: 40px;
    background-color: #fff;
}
.code-modal{
    position: relative;
    padding: 70px 60px;
}
.code-modal-close{
    position: absolute;
    right: -15px;
    top: -15px;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
    cursor: pointer;
}
.code-modal-close img{
    width: 100%;
}
.code-modal-tit{
    font-size: 35px;
    color: #000000;
}
.code-modal-txt{
    margin-top: 20px;
    font-size: 22px;
    color: #3F3E3E;
    line-height: 35px;
}