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


#feedback{margin: 0 auto; padding: 150px 0;}
#feedback .title{ position: relative; text-align: center; margin: 0 auto;}
#feedback .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}
#feedback .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#feedback .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#feedback .layout{margin: 0 auto; padding: 100px 0; }
#feedback .layout>.layout-box-left{ position: absolute; width: 36%; left: 0;}
#feedback .layout>.layout-box-right{width: 60%;float: right;}
#feedback .layout .img{width: 100%;}
#feedback .layout .img>img{width: 100%;height: auto;}
#feedback .layout .describe{ position: absolute; z-index: 10; right: 0; top: 50%; transform: translateY(-50%); background: rgba(199,0,12,.8);padding: 30px; text-align: left; color: #fff;}
#feedback .layout .describe>i{display: block; font-size: 6rem;}
#feedback .layout .describe>p{display: block;font-size: 1.6rem; line-height: 2.4rem; padding-top: 10px;}
#feedback .layout .form{margin: 0 auto; padding: 50px 0;}
#feedback .layout .form .row{ position: relative; display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; margin: 0 auto;}
#feedback .layout .form .row>[class*="col-"] {padding-right: 20px;}
#feedback .layout .form .row>.group{display: block;  margin-bottom: 30px;}
#feedback .layout .form .row>.group dt{ font-size: 1.6rem; color: #333; margin-bottom: 10px;}
#feedback .layout .form .row>.group dt>span{display: inline-block; margin-left: 10px; color: #d70d19; font-size: 1.4rem;}
#feedback .layout .form .row>.group dd{position: relative;}
#feedback .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;}
#feedback .layout .form .row>.group dd>input::-webkit-input-placeholder{ color:#999;}
#feedback .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;}
#feedback .layout .form .row>.group dd>textarea::-webkit-input-placeholder{ color:#999;}
#feedback .layout .form .row>.group dd>input:hover, #procure .form .row>.group dd>textarea:hover{border-color: #ccc;}
#feedback .layout .form .row>.col-3{width: 33.33%; flex: 0 0 33.33%;}
#feedback .layout .form .row>.col-5{width: 50%; flex: 0 0 50%;}
#feedback .layout .form .row>.col-10{width: 100%; flex: 0 0 100%;}
#feedback .layout .form #checkimg{position: absolute;z-index: 10; right: 20px; top: 50%; transform: translateY(-50%); display:inline-block;  cursor:pointer;}
#feedback .layout .form .row>.button{text-align: center;}
#feedback .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: 60px; line-height: 60px; background: #d70d19;padding:0 100px; font-size: 2rem; color:#fff;  cursor:pointer; transition: all .35s;}
#feedback .layout .form .row>.button .form_button:hover{background: #555;}
#feedback .layout .form .layui-input, #feedback .layout .form .layui-select, #feedback .layout .form .layui-textarea{height: 50px!important; line-height: 50px\9!important;}
#feedback .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;}

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

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


    #feedback .layout>.layout-box-left{ width: 40%;}
    #feedback .layout>.layout-box-right{width: 55%;}

    #feedback .layout .form{padding: 20px 0;}
    #feedback .layout .describe>p{font-size: 1.4rem; line-height: 2rem;}


}

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

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

    #feedback .layout .describe>i{ font-size: 4rem;}
    #feedback .layout .describe>p{font-size: 1.2rem; line-height: 1.8rem;}

    #feedback .layout .form .row>.button .form_button{height: 50px; line-height: 50px;  font-size: 1.8rem;;}

}


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

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

    #feedback .layout>.layout-box-left{ width: 100%; position: relative;overflow: hidden;}
    #feedback .layout>.layout-box-left .img>img{display: none;}
    #feedback .layout>.layout-box-left .describe{ position: relative; width: 100%; top: 0; transform: translateY(0); background: #999;}
    #feedback .layout>.layout-box-right{width: 100%; float: none;}

    #feedback .layout .form .row>.col-3{width: 100%; flex: 0 0 100%;}
    #feedback .layout .form .row>.col-5{width: 100%; flex: 0 0 100%;}
    #feedback .layout .form .row>.button .form_button{display:block!important; width: 100%;}

    #feedback .layout .form .row>[class*="col-"] {padding-right: 0;}


}


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

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

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


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

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

    #feedback .layout .describe{ width: 100%;font-size: 1.2rem;}


}