* {



    padding: 0;







    margin: 0;



}



li {



    list-style: none;



}







a {



    text-decoration: none;



 



}



.fx {

    display: flex;

}





img {



    border: none;



}







.clearfix:after {



    /*伪元素是行内元素 正常浏览器清除浮动方法*/



    content: "";



    display: block;



    height: 0;



    clear: both;



    visibility: hidden;



}







.clearfix {



    *zoom: 1;



    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

}



@font-face {







    font-family:BARLOWCONDENSED-REGULAR;



    src: url("../fonts/BARLOWCONDENSED-REGULAR-1.ttf")/*tpa=http://www.gonoptics.com/static/style/pc/fonts/BARLOWCONDENSED-REGULAR.TTF*/;







}

@font-face {







    font-family: BARLOWCONDENSED-BOLD;



    src: url("../fonts/BARLOWCONDENSED-BOLD.TTF")/*tpa=http://www.gonoptics.com/static/style/pc/fonts/BARLOWCONDENSED-BOLD.TTF*/;







}

@font-face {







    font-family:BARLOW-BOLD;



    src: url("../fonts/BARLOW-BOLD.TTF")/*tpa=http://www.gonoptics.com/static/style/pc/fonts/BARLOW-BOLD.TTF*/;







}

@font-face {







    font-family:DIN-REGULAR-2;



    src: url("../fonts/DIN-REGULAR-2.OTF")/*tpa=http://www.gonoptics.com/static/style/pc/fonts/DIN-REGULAR-2.OTF*/;







}

.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);

}

.modal-content {
    width: 550px;
    margin: 5% auto;
    -webkit-animation: zoom 0.6s;
    animation: zoom 0.6s;
    resize: both;
    overflow: auto;
    background: url("../images/zcbg.jpg")/*tpa=http://www.gonoptics.com/static/style/pc/images/zcbg.jpg*/no-repeat;
    background-size: cover;
    position: relative;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close {
    font-size: 2.5rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right:2%;
    top: 3%;
    cursor: pointer;
}

.close:hover img,
.close:focus img {
    content: url("../images/closes1.png")/*tpa=http://www.gonoptics.com/static/style/pc/images/closes1.png*/;
   
}

.modal-body {
    padding: 5.625rem 5rem;
    box-sizing: border-box;
}

.modal-body .modal-title {
    margin: .5rem auto 2rem;
    display: flex;
}
#modal .s_title {
    display: flex;
    align-items: flex-end;
}
#modal .s_title h3 {
    color: #323232;
    font-size: 1.75rem;
    margin-right: 1.5rem;
}

#modal .s_title h4 {
    color: #626262;
    font-size: 1rem;
}

#modal .gridbox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

#modal .gridbox .group p {
    color: #454545;
    font-size: 1.125rem;
    margin-bottom: 1rem;

}


#modal .gridbox {
    margin: 3rem 0;
}

#modal .gridbox .group input {
    border: 1px solid #a9abae;
    width: 100%;
    line-height: 3.125rem;
    border-radius: 5px;
    padding: 0 1.5rem;
}


#modal .gridbox>button {
    background: #013280;
    cursor: pointer;
    color: #fff;
    font-size: 1.125rem;
    border: 0;
    outline: 0;
    width: 100%;
    height: 3.125rem;
    border-radius: 5px;
    display: block;
}

.modal-body span {
    color: #000000;
    font-size: .875rem;
    font-family: HONORSansCN-ExtraLight;
    text-align: center;
    display: block;
}


.group input::-webkit-input-placeholder {

    color: #747474;

}

.group input::-moz-placeholder {
    /* Mozilla Firefox 19+ */

    color: #747474;

}

.group input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */

    color: #747474;

}

.group input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #747474;

}

.gridbox .yzms div {
    display: flex;
    gap: .8125rem;
}



.gridbox .yzms button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #013280;
    border-radius: 5px;
    width: 108px;
    color: #fff;
    font-size: .875rem;
    flex-shrink: 0;
}