.cert{position: relative; min-height: 820px; width: 1105px; color: #8f9091; margin: 10px auto;}
.cert .bg{ width: 1105px; min-height: 800px;  position: absolute; left: 0; top: 0;}
.cert .no{ position: absolute; left: 115px; top: 105px; font-size: 16px;}
.cert .qrcode{position: absolute; top: 105px; right: 115px; text-align: center}
.cert .qrcode img{width: 100px; height: 100px;}
.cert .name{position: absolute; top: 300px; left: 470px; width: 165px; text-align: center; height: 45px; line-height: 45px; font-size: 38px;}
.cert .cube-type-cn{position: absolute; top: 360px; left: 584px; width: 124px; text-align: center; height: 30px; line-height: 30px; font-size: 22px;}
.cert .cube-type-en{position: absolute; top: 422px; left: 434px; width: 206px; text-align: center; height: 25px; line-height: 25px; font-size: 17px;}
.cert .level{position: absolute; top: 480px; left: 420px; width: 250px; text-align: center; height: 60px; line-height: 60px; font-size: 50px; color: #d69e4a}
#wcu-location #wcu-address { font-size: 20px; line-height: 35px; margin-bottom: 10px;}
#wcu-location #wcu-address img{width: 25px; height: 25px; margin-left: 30px; margin-top: -5px;}
#wcu-location #wcu-map{ width: 100%; height: 350px; background-color: white}
#wcu-location #wcu-table h3{font-size: 22px; line-height: 35px; margin-bottom: 10px; text-align: center; margin-top: 30px;}
#wcu-location #wcu-table>table>thead>tr{border-bottom: 1px solid #333333;}
#wcu-location #wcu-table>table>thead>tr>th{font-size: 16px;}
#wcu-location #wcu-table>table>tbody>tr{border-bottom: 1px solid #cccccc; height: 60px;}
#wcu-user #head-img{padding: 10px 30px;text-align: center;}
#wcu-user #head-img img{ width: 125px; height: 125px; border: 1px solid #CCCCCC; border-radius: 5px;}
#wcu-user #head-img p{ margin-top: 10px;}
#wcu-user #hr{text-align: center;}
#wcu-user #hr hr{width: 1px; height: 200px; background-color: #DBDBDB; margin: 0 auto;}
#wcu-user #info{ font-size: 20px; font-weight: 500;}
#wcu-user #info li{margin-bottom: 20px;}
#wcu-user #profile{padding-bottom: 20px; border-bottom: 1px solid #DBDBDB;}
#wcu-user #record{text-align: center;}
#wcu-user #record h2{ text-align: center; margin-top: 20px; font-size: 28px;}
#wcu-user #record-table>table{border-spacing: 0 20px;border-collapse: separate;}
#wcu-user #record-table>table>thead th{font-size: 20px; text-align: center;}
#wcu-user #record-table>table>thead p.m{font-size: 14px;}
#wcu-user #record-table>table>tbody>tr{box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.2); margin-bottom: 20px; border-radius: 10px; height: 60px; overflow: hidden;}
#wcu-user #record-table>table>tbody>tr td{font-size: 18px; text-align: center;}
#wcu-user #record-table>table>tbody>tr td img{width: 25px; height: 25px; margin-right: 10px;}
#wcu-user #record-table>table>tbody>tr.active{background-color: #298DFF;color: #fff;}
#wcu-user #record-table>table{ min-width: 768px;}
#wcu-user #level{text-align: center;}
#wcu-user #level h2{margin-top: 20px; font-size: 28px; margin-bottom: 10px;}
#wcu-user #level p{ font-size: 20px; font-weight: 600;}
#wcu-user #level #silver, #wcu-user #level #copper{padding-top: 40px;}
#wcu-user #score h2{text-align: center; margin-top: 20px; font-size: 28px; margin-bottom: 10px;}
#wcu-user #score .layui-form-label{font-size: 22px; font-weight: 500; line-height: 39px;}
#wcu-user #score .layui-form-radioed .wcu-cube-type{background-color: #298DFF; border: 1px solid #298DFF; color: #ffffff}
#wcu-user #score .wcu-cube-type{padding: 10px; margin-left: 2px; border: 1px solid #d8d6d7; border-radius: 5px; margin-bottom: 4px; text-align: center; min-width: 70px;}
#wcu-user #score .wcu-cube-type img{

    /*width: 25px; */

    height: 25px;

}

@media (width <= 1170px) {
    .cert{position: relative; min-height: 575px; width: 800px; color: #8f9091;}
    .cert .bg{ width: 800px; min-height: 555px;  position: absolute; left: 0; top: 0;}
    .cert .no{ position: absolute; left: 90px; top: 82px; font-size: 12px;}
    .cert .qrcode{position: absolute; top: 72px; right: 90px; text-align: center}
    .cert .qrcode img{width: 70px; height: 70px;}
    .cert .name{position: absolute; top: 203px; left: 338px; width: 125px; text-align: center; height: 35px; line-height: 35px; font-size: 28px;}
    .cert .cube-type-cn{position: absolute; top: 247px; left: 422px; width: 91px; text-align: center; height: 25px; line-height: 25px; font-size: 16px;}
    .cert .cube-type-en{position: absolute; top: 288px; left: 313px; width: 152px; text-align: center; height: 25px; line-height: 25px; font-size: 14px;}
    .cert .level{position: absolute; top: 334px; left: 306px; width: 180px; text-align: center; height: 40px; line-height: 40px; font-size: 30px; color: #d69e4a}
}
@media (width <= 970px) {
    .cert{position: relative; min-height: 425px; width: 539px; color: #8f9091;}
    .cert .bg{ width: 539px; min-height: 405px;  position: absolute; left: 0; top: 0;}
    .cert .no{ position: absolute; left: 63px; top: 57px; font-size: 8px;}
    .cert .qrcode{position: absolute; top: 50px; right: 57px; text-align: center; font-size: 8px;}
    .cert .qrcode img{width: 50px; height: 50px;}
    .cert .name{position: absolute; top: 150px; left: 227px; width: 85px; text-align: center; height: 25px; line-height: 25px; font-size: 20px;}
    .cert .cube-type-cn{position: absolute; top: 178px; left: 273px; width: 91px; text-align: center; height: 25px; line-height: 25px; font-size: 10px;}
    .cert .cube-type-en{position: absolute; top: 207px; left: 188px; width: 152px; text-align: center; height: 25px; line-height: 25px; font-size: 11px;}
    .cert .level{position: absolute; top: 238px; left: 177px; width: 180px; text-align: center; height: 40px; line-height: 40px; font-size: 23px; color: #d69e4a}
    .wcu-article{border-left: none; padding-left: 10px !important; padding-right: 0 !important;}
    .wcu-section{padding: 0 5px;}
    .wcu-article #record-table{overflow-x: scroll;}
}

@media (width <= 768px) {
    .cert{position: relative; height: 300px; min-height: 300px; width: 100%; color: #8f9091; overflow: hidden;}
    .cert .bg{ width: 100%; height: 280px;  min-height: 280px; position: absolute; left: 0; top: 0;}
    .cert .no{ position: absolute; left: 10%; top: 14%; font-size: 8px;}
    .cert .qrcode{position: absolute; top: 14%; right: 12%; text-align: center; font-size: 8px;}
    .cert .qrcode img{width: 40px; height: 40px;}
    .cert .name{position: absolute; top: 32%; left: 40%; width: 85px; text-align: center; height: 25px; line-height: 25px; font-size: 14px;}
    .cert .cube-type-cn{position: absolute; top: 39%; left: 47%; width: 91px; text-align: center; height: 25px; line-height: 25px; font-size: 8px;}
    .cert .cube-type-en{position: absolute; top: 46.3%; left: 30%; width: 152px; text-align: center; height: 25px; line-height: 25px; font-size: 9px;}
    .cert .level{position: absolute; top: 53%; left: 27%; width: 180px; text-align: center; height: 40px; line-height: 40px; font-size: 17px; color: #d69e4a}
    #wcu-user #info{margin-top: 20px;}
    .wcu-article #record-table{overflow-x: scroll;}
    #wcu-user #level #gold img{width: 127px; height: 125px;}
    #wcu-user #level #silver img, #wcu-user #level #copper img{ width: 100px; height: 100px;}
    #wcu-user #level #silver, #wcu-user #level #copper{padding-top: 24px;}
}