@charset "utf-8";
/* CSS Document */


#samples{margin: 0 auto; padding: 150px 0;}
#samples .title{ position: relative; text-align: center; margin: 0 auto;}
#samples .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}
#samples .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#samples .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#samples .layout{margin: 0 auto; padding: 100px 0; }
#samples .layout .describe{ text-align: center; margin: 20px auto; font-size: 1.6rem; color: #999; line-height: 2.4rem;}
#samples .layout .form{margin: 0 auto; padding: 50px 0;}
#samples .layout .form .row{ position: relative; display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; margin: 0 auto;}
#samples .layout .form .row>[class*="col-"] {padding-right: 20px;}
#samples .layout .form .row>.group{display: block;  margin-bottom: 30px;}
#samples .layout .form .row>.group dt{ font-size: 1.6rem; color: #333; margin-bottom: 10px;}
#samples .layout .form .row>.group dt>span{display: inline-block; margin-left: 10px; color: #d70d19; font-size: 1.4rem;}
#samples .layout .form .row>.group dd>input{ display:inline-block; box-sizing:border-box; width:100%; height: 50px; line-height: 50px; border-radius: 2px; padding:0 10px;-webkit-appearance:none; font-size: 1.4rem; border:1px solid #ddd; color:#666;text-align:left; transition: all .35s;}
#samples .layout .form .row>.group dd>input::-webkit-input-placeholder{ color:#999;}
#samples .layout .form .row>.group dd>textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:13px 10px;-webkit-appearance:none; font-size: 1.4rem; line-height:3.2rem; border:1px solid #ddd; color:#666;text-align:left;transition: all .35s;}
#samples .layout .form .row>.group dd>textarea::-webkit-input-placeholder{ color:#999;}
#samples .layout .form .row>.group dd>input:hover, #procure .form .row>.group dd>textarea:hover{border-color: #ccc;}
#samples .layout .form .row>.col-3{width: 33.33%; flex: 0 0 33.33%;}
#samples .layout .form .row>.col-5{width: 50%; flex: 0 0 50%;}
#samples .layout .form .row>.col-10{width: 100%; flex: 0 0 100%;}
#samples .layout .form #checkimg{display:inline-block;  margin-top: 16px; cursor:pointer;}
#samples .layout .form .row>.button{text-align: right;}
#samples .layout .form .row>.button .form_button{display:inline-block!important; box-sizing:border-box; border: 0!important; text-align: center; border-radius: 2px; font-weight: bold;height: 50px; line-height: 50px; background: #d70d19;padding:0 100px; font-size: 1.6rem; color:#fff;  cursor:pointer; transition: all .35s;}
#samples .layout .form .row>.button .form_button:hover{background: #555;}
#samples .layout .form .layui-input, #samples .layout .form .layui-select, #samples .layout .form .layui-textarea{height: 50px!important; line-height: 50px\9!important;}
#samples .layout .form .layui-form-select dl dd.layui-this {background-color: #666!important;}
.layui-layer-btn .layui-layer-btn0 { border-color: #333!important; background-color: #333!important; color: #fff!important;}

#samples .layout .form .layui-form-select dl dt {font-size: 12px!important;color: #999!important;}



@media only screen and (max-width: 1080px){

    #samples .title>h3{ font-size: 3.2rem;}
    #samples .title>h4{font-size: 4.5rem;}



}


@media only screen and (max-width: 860px){

    #samples .title>h3{ font-size: 2.8rem;}
    #samples .title>h4{font-size: 4rem;}

    #samples .layout .describe{ width: 80%; font-size: 1.4rem;}
    #samples .layout .form .row>.col-3{width: 100%; flex: 0 0 100%;}
    #samples .layout .form .row>.col-5{width: 100%; flex: 0 0 100%;}
    #samples .layout .form #checkimg{position: absolute; right: 30px; top: 10px; margin-top: 0;}
    #samples .layout .form .row>.button .form_button{display:block!important; width: 100%;}


}


@media only screen and (max-width:640px) {

    #samples .layout{ padding: 50px 0; }

    #samples .layout .form{ padding: 20px 0;}
    #samples .layout .form .row>.group{margin-bottom: 20px;}
    #samples .layout .form .row>.group dt{ font-size: 1.4rem;}
    #samples .layout .form .row>.group dd>input{ height: 38px; line-height: 38px;}
    #samples .layout .form .layui-input, #samples .layout .form .layui-select, #samples .layout .form .layui-textarea{height: 38px!important; line-height: 38px\9!important;}
    
    
}


@media only screen and (max-width:520px) {

    #samples{ padding: 60px 0;}
    #samples .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #samples .title>h4{font-size: 2.4rem;}

    #samples .layout .describe{ width: 100%;font-size: 1.2rem;}
    #samples .layout .form #checkimg{ top: 8px;}

}