@charset "utf-8";


#consultation{margin: 0 auto; padding: 100px 0;}

#consultation .display{margin: 0 auto;position: relative;}
#consultation .display .contact{margin: 0 auto; position: relative;}
#consultation .display .contact>.layout{ display: flex; align-items: center; align-content: center; justify-content: space-between; margin: 0 auto;}
#consultation .display .contact>.layout>.info{display: inline-flex; align-items: center; align-content: center; flex: auto; }
#consultation .display .contact>.layout>.info .rows{display: inline-block; flex: auto;height: 140px; margin-right: 50px; background: rgba(7,88,171,.02); border: 1px solid #ddd; border-radius: 16px; box-sizing: border-box;padding: 30px;text-align: left;}
#consultation .display .contact>.layout>.info .rows>.ico{ display: flex;align-content: center; align-items: center; text-align: left;color: #0758ab;  }
#consultation .display .contact>.layout>.info .rows>.ico>i{ display: inline-block; margin-right: 10px; font-size: 2.4rem; border-radius: 5px;padding: 7px; background: rgba(7,88,171,.08);}
#consultation .display .contact>.layout>.info .rows>.ico>span{display: inline-block; font-size: 1.4rem;}
#consultation .display .contact>.layout>.info .rows>.info{ font-size: 2.4rem; color: #333; padding-top: 10px;}
#consultation .display .contact>.layout>.info .rows>.info>a{display: block; transition: all .35s;}
#consultation .display .contact>.layout>.info .rows>.info>a:hover{ color: #0758ab;}
#consultation .display .contact>.layout>.info .rows>.img>img{height: 40px; width: auto;}
#consultation .display .contact>.layout>.qrcode{ display: inline-flex; align-items: center; align-content: center;background: rgba(7,88,171,.02); border: 1px solid #ddd;height: 140px; border-radius: 16px; box-sizing: border-box;padding: 10px 15px;overflow: hidden;}
#consultation .display .contact>.layout>.qrcode .img{display: inline-flex; height: 100%; align-content: center; align-items: center;}
#consultation .display .contact>.layout>.qrcode .img>img{height: 100%; width: auto;}
#consultation .display .contact>.layout>.qrcode .info{display: inline-block; text-align: left;padding: 0 20px;}
#consultation .display .contact>.layout>.qrcode .info>i{ display: block; color: #0758ab; font-size: 2.4rem;}
#consultation .display .contact>.layout>.qrcode .info>p{display: block; padding-top: 6px; font-size: 1.4rem; color: #0758ab;}


#consultation .display .formbox{ padding: 50px 0; text-align: left; }
#consultation .display .formbox>.describe{ font-size: 1.6rem; color: #999; line-height: 2.4rem;}
#consultation .display .formbox>.describe>p{margin-bottom: 10px;}
#consultation .display .formbox>.form{ margin: 0 auto;padding: 30px 0;}
#consultation .display .formbox>.form .container{ position: relative; z-index: 10; margin:20px auto; }
#consultation .display .formbox>.form .layui-input, #consultation .display .formbox>.form .layui-select, #consultation .display .formbox>.form .layui-textarea {height: 46px!important;line-height: 46px\9!important;border-radius: 3px!important;}
#consultation .display .formbox>.form .layui-form-select dl { box-shadow: 0 0 0!important;}
#consultation .display .formbox>.form .layui-form-select dl dd.layui-this { background-color: #f4f7ff!important;color: #0758ab!important;}
#consultation .display .formbox>.form .layui-anim::-webkit-scrollbar {width:2px;height: 2px;}
#consultation .display .formbox>.form .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#0758ab;}
#consultation .display .formbox>.form .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}
#consultation .display .formbox>.form .layui-form-checkbox[lay-skin=primary] { min-width: 24px!important; min-height: 24px!important;border: none!important;}
#consultation .display .formbox>.form .layui-form-checkbox[lay-skin=primary] i {width: 24px!important;height: 24px!important; line-height: 24px!important; font-size: 16px!important;}
#consultation .display .formbox>.form .container::-webkit-scrollbar {width:5px;height: 1px;}
#consultation .display .formbox>.form .container::-webkit-scrollbar-thumb {background:#666;}
#consultation .display .formbox>.form .container::-webkit-scrollbar-track { box-shadow: 0 0 0 rgba(255,255,255,1); border-radius: 10px;background: none;}
#consultation .display .formbox>.form .container .item>.rows{ position: relative; display:block; margin-bottom: 20px;}
#consultation .display .formbox>.form .container .item>.rows>label{ display: block; font-size: 1.6rem; color: #666;margin-bottom: 10px;}
#consultation .display .formbox>.form .container .item>.rows>label>span{ display: inline-block; color: #db4437; margin-right: 6px;}
#consultation .display .formbox>.form .container .item>.rows>.select{display: block;}
#consultation .display .formbox>.form .container .item>.rows>.input{display: flex;align-items: center; align-content: center;}
#consultation .display .formbox>.form .container .item>.rows>.input>input{ display:inline-block; box-sizing:border-box; width:100%;height:46px; line-height: 46px; padding:0 16px;-webkit-appearance:none; font-size: 1.4rem; border: 1px solid #ddd; border-radius: 3px; color:#666;text-align:left; transition: all .35s;}
#consultation .display .formbox>.form .container .item>.rows>.input>input::-webkit-input-placeholder{ color:#999;}
#consultation .display .formbox>.form .container .item>.rows>.textarea>textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:16px;-webkit-appearance:none;  font-family: 'Noto Sans SC'; font-size: 1.4rem; line-height:20px; border: 1px solid #ddd; border-radius: 3px; color:#666;text-align:left;}
#consultation .display .formbox>.form .container .item>.rows>.textarea>textarea::-webkit-input-placeholder{ color:#999;}
#consultation .display .formbox>.form .container .error{ background: rgba(7,88,171,.06) !important; border:1px solid rgba(7,88,171,.7) !important;}
#consultation .display .formbox>.form .container .w30{width:32%; margin-right: 2%;}
#consultation .display .formbox>.form .container .w30:last-child{ margin-right: 0;}
#consultation .display .formbox>.form .container .w50{width:48.5%;}
#consultation .display .formbox>.form .container .w100{width:100%; clear:both}
#consultation .display .formbox>.form .container #checksn{  flex: 1; display: inline-block; margin-right: 20px}
#consultation .display .formbox>.form .container #checkimg{display:inline-block; height: 46px;  border-radius: 3px; padding: 0 10px; cursor:pointer; border: 1px solid #eee;}
#consultation .display .formbox>.form .policy{ display: flex; align-items: center; align-content: center; text-align: left; font-size: 1.4rem; color: #999;}
#consultation .display .formbox>.form .policy>.info{display: inline-flex; }
#consultation .display .formbox>.form .policy>.info>span{ display: inline-block; color: #db4437; margin:0 6px; font-size: 1.8rem;}
#consultation .display .formbox>.form .policy>.info>em{display: inline-block; font-style: normal;}
#consultation .display .formbox>.form .policy>.info>em>a{display: inline-block; color: #0758ab; text-decoration: underline;}
#consultation .display .formbox>.form .button{padding-top: 30px; text-align: left;}
#consultation .display .formbox>.form .button>a{position: relative; display:inline-block; width: auto; box-sizing:border-box; background-image: linear-gradient(45deg, rgba(7, 88, 171, 1), rgba(110, 222, 100, 1)); border-radius: 10px; padding:16px 90px; font-size:2.2rem; color:#fff; overflow: hidden; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#consultation .display .formbox>.form .button>a>span{position: relative;z-index: 20;}
#consultation .display .formbox>.form .button>a:after{position: absolute;z-index: 12; left: -300px; top:-30px; width: 300px;height: 160px;background: #030711; content: ''; transition: all .35s;}
#consultation .display .formbox>.form .button>a:hover:after{left: 0;}

#consultation .display .complete{ display: none; width: 50%; border: 1px solid #eee; text-align: left; box-sizing: border-box; background: #f7f7f7; border-radius: 16px; padding: 50px 80px;overflow: hidden; margin: 0 auto;}
#consultation .display .complete>.ico{display: inline-block;float: left; box-sizing: border-box;padding-right: 20px;}
#consultation .display .complete>.ico i{display: inline-block;font-size: 10rem;color: rgba(110, 222, 100, 1); }
#consultation .display .complete>.box{display: inline-block;float: left; padding-top: 20px;}
#consultation .display .complete>.box .tit{font-size: 2.4rem;color: #000;}
#consultation .display .complete>.box .txt{font-size: 1.4rem; color: #999;}
#consultation .display .complete>.box .txt>span{display: inline-block; font-size: 1.4rem; color: #ff0000;}


.layui-layer-btn .layui-layer-btn0 {border-color: #0758ab!important;background-color: #0758ab!important;}




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


    #consultation .display .formbox>.describe {  font-size: 1.4rem; line-height: 2rem; }
    #consultation .display .contact>.layout>.info .rows>.info {font-size: 2rem;}
    #consultation .display .contact>.layout>.qrcode .info>p { font-size: 1.2rem; }


}


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


    #consultation .display .contact>.layout>.info .rows{margin-right: 30px;height: 120px;}
    #consultation .display .contact>.layout>.info .rows>.ico>span {font-size: 1.2rem;}
    #consultation .display .contact>.layout>.info .rows>.info {font-size: 1.7rem;}

    #consultation .display .contact>.layout>.qrcode{ height: 120px;}



}



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


    #consultation .display .contact>.layout{ display: block;}
    #consultation .display .contact>.layout>.info{display: flex; align-items: center; align-content: center; flex: auto; }
    #consultation .display .contact>.layout>.info>.rows:nth-child(2){ margin-right: 0;}
    #consultation .display .contact>.layout>.qrcode{ display: flex; margin-top: 30px;padding: 10px 25px;}





    #consultation .display .formbox>.form { padding: 20px 0;}
    #consultation .display .formbox>.form .container .item>.rows>label { font-size: 1.4rem; }
    #consultation .display .formbox>.form .container .w30{width:100%;clear: both;float: none;}
    #consultation .display .formbox>.form .container .w50{width:100%;clear: both;float: none}

    #consultation .display .formbox>.form .button>a { display: block; }
    #consultation .display .formbox>.form .button>a:after{left: -100%;  width: 100%;}


}


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

    #consultation{ padding: 50px 0;}



}


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


    #consultation .display .contact>.layout>.info{display: block; }
    #consultation .display .contact>.layout>.info>.rows{  display: block; height: auto; padding: 20px; margin-right: 0; margin-bottom: 15px;}
    #consultation .display .contact>.layout>.qrcode{ height: 100px; margin-top: 0; padding: 10px 20px;}
}