@charset "utf-8";

@import url('https://fonts.font.im/css?family=Rubik');


#contact{margin: 0 auto; }


#contact .headquarters{position: relative;margin: 0 auto; background: url("../img/contact_bg.jpg") no-repeat; background-position: 50% 50%; background-size: cover;}
#contact .headquarters:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 100%;height: 100%; background: rgba(0,0,0,.1); content: '';}
#contact .headquarters>.info{position: absolute;z-index: 90;right: 14%;bottom: 18%; box-sizing: border-box;padding: 50px; background: rgba(147,209,255,.9); border-radius: 30px;}
#contact .headquarters>.info .theme{margin:0 auto;}
#contact .headquarters>.info .theme>.title{ margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #fff;}
#contact .headquarters>.info .theme>.title:before{position: absolute;z-index: 12; left: 0; bottom: -10px;width: 36px;height: 3px; background: #fff;border-radius: 10px; content: '';}
#contact .headquarters>.info .container{margin: 0 auto; padding-top: 50px;}
#contact .headquarters>.info .container>.content{margin: 0 auto;}
#contact .headquarters>.info .container>.content>.rows{display: flex; justify-content: flex-start; align-content: center; align-items: center; max-width: 500px; margin-bottom: 20px;}
#contact .headquarters>.info .container>.content>.rows>i{display: inline-block; font-size:4rem; margin-right: 10px; color: #fff;}
#contact .headquarters>.info .container>.content>.rows>p{display: inline-block;}
#contact .headquarters>.info .container>.content>.rows>p>a{display: block; color: #fff; font-size: 1.6rem; font-weight: bold; transition: all .35s;}
#contact .headquarters>.info .container>.content>.rows>p>a:hover{text-decoration: underline;}
#contact .headquarters>.info .container>.content>.rows>p>span{display: block; color: #fff; font-size: 1.6rem; font-weight: bold;}
#contact .headquarters>.shape{position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%; height: 100px;transform: rotate(180deg);}
#contact .headquarters>.shape svg { fill:#f7f7f7; position: relative; display: block; width: 100%; height: 100%;}
#contact .headquarters>.bg{margin: 0 auto;}
#contact .headquarters>.bg>img{ width: 100%;height: auto;}

#contact .message{margin: 0 auto; background: #f7f7f7; padding: 150px 0;}
#contact .message .theme{margin:0 auto;}
#contact .message .theme>.title{ text-align: center; margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #464646;}
#contact .message .theme>.title:before{position: absolute;z-index: 12; left: 50%; bottom: -10px;width: 36px;height: 3px; background: #88cfff;border-radius: 10px; transform: translateX(-50%); content: '';}
#contact .message .container{margin: 0 auto;}
#contact .message .container>.describe{ margin: 0 auto; }
#contact .message .container>.describe>.text{text-align: center; font-size: 1.6rem; color: #666; margin: 0 auto; padding-top: 20px;}
#contact .message .container>.describe>.info{display:flex; align-content: center; align-items: center;justify-content: center;}
#contact .message .container>.describe>.info>p{display: inline-flex; align-items: center; align-content: center; margin: 0 10px;}
#contact .message .container>.describe>.info>p>i{ display: inline-block; margin-right: 10px; color: #88cfff; font-size: 3rem;}
#contact .message .container>.describe>.info>p>a{display: inline-block; color: #464646; font-size: 1.6rem; transition: all .35s;}
#contact .message .container>.describe>.info>p>a:hover{color: #88cfff; text-decoration: underline;}
#contact .message .container>.form{ display: block; width: 60%; max-width: 1200px; margin: 0 auto; padding-top: 50px;}
#contact .message .container>.form .rows{display: block; float: left; width: 48%; margin-bottom: 20px; position: relative;}
#contact .message .container>.form .rows:nth-child(even){float: right;}
#contact .message .container>.form .rows>input{display: block; box-sizing: border-box;}
#contact .message .container>.form .rows .layui-input, #contact .message .container>.form .rows .layui-select, #contact .message .container>.form .rows .layui-textarea { border-radius: 5px!important;}
#contact .message .container>.form .rows .layui-anim::-webkit-scrollbar {width:5px;height: 5px;}
#contact .message .container>.form .rows .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#88cfff;}
#contact .message .container>.form .rows .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}
#contact .message .container>.form .rows .layui-form-select dl dd.layui-this { font-weight: bold; background-color: #fff!important; color: #88cfff!important;}
#contact .message .container>.form .rows #checkimg{position: absolute;z-index: 12; right: 6px;top: 50%; transform: translateY(-50%); cursor: pointer;}
#contact .message .container>.form .w100{width: 100%; float: none; overflow: hidden;}
#contact .message .container>.form .policy{ display: flex; align-items: self-start; align-content: center; text-align: left; font-size: 1.2rem; color: #999; clear: both;}
#contact .message .container>.form .policy>.info{display: inline-flex; }
#contact .message .container>.form .policy>.info>span{ display: inline-block; color: #ff0000; margin:0 6px; font-size: 1.4rem;}
#contact .message .container>.form .policy>.info>em{display: inline-block; font-style: normal;}
#contact .message .container>.form .policy>.info>em>a{display: inline-block; color: #0758ab; text-decoration: underline;}
#contact .message .container>.form .policy .layui-form-checkbox[lay-skin=primary]:hover i { border-color:#88cfff!important;}
#contact .message .container>.form .policy .layui-form-checked[lay-skin=primary] i {border-color: #88cfff!important;background-color: #88cfff!important;}
#contact .message .container>.form .button{padding-top: 30px; text-align: center; margin: 0 auto;}
#contact .message .container>.form .button>a{position: relative; display:inline-block; width: auto; box-sizing:border-box; background: #464646; border-radius: 10px; padding:12px 50px; font-size:1.8rem; color:#fff; overflow: hidden; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#contact .message .container>.form .button>a>span{position: relative;z-index: 20;}
#contact .message .container>.form .button>a:after{position: absolute;z-index: 12; left: -300px; top:-30px; width: 300px;height: 160px; border-radius: 100%; background: #88cfff; content: ''; transition: all .35s;}
#contact .message .container>.form .button>a:hover:after{left: 0;}
#contact .message .container>.form .button>a:hover{background: #88cfff;}
#contact .message .container>.complete{ display: none;  width: 50%; text-align: center; box-sizing: border-box; padding: 50px 80px;overflow: hidden; margin: 0 auto;}
#contact .message .container>.complete>.ico{display: block; box-sizing: border-box;}
#contact .message .container>.complete>.ico i{display: inline-block;font-size: 10rem;color: #88cfff; }
#contact .message .container>.complete>.box{display: block; padding-top: 20px; text-align: center; }
#contact .message .container>.complete>.box .title{font-size: 2.4rem; font-weight: bold; color: #333;}
#contact .message .container>.complete>.box .text{font-size: 1.4rem; color: #999;}
#contact .message .container>.complete>.box .text>span{display: inline-block; font-size: 1.4rem; color: #ff0000;}



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

    #contact .headquarters>.info>.container>.content>.rows{max-width: 420px;}
    #contact .headquarters>.info>.container>.content>.rows>p>a{ font-size: 1.5rem;}
    #contact .headquarters>.info>.container>.content>.rows>p>span{ font-size: 1.5rem;}
    #contact .headquarters>.info>.container>.content>.rows>i{font-size:3.2rem;}

}


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

    #contact .headquarters>.info{bottom: 12%; padding: 40px;}
    #contact .headquarters>.info .theme>.title{ font-size: 3.6rem;}
    #contact .headquarters>.info>.container>.content>.rows>p>a{ font-size: 1.4rem;}
    #contact .headquarters>.info>.container>.content>.rows>p>span{ font-size: 1.4rem;}

    #contact .message .theme>.title{ font-size: 3.6rem;}



}

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


    #contact .headquarters>.info{ width: 76%; left: 50%;bottom: 0; transform: translateX(-50%) translateY(80px); }
    #contact .headquarters>.info .theme>.title{ text-align: center;  }
    #contact .headquarters>.info .theme>.title:before{ left: 50%; transform: translateX(-50%);}
    #contact .headquarters>.info .container>.content>.rows{display: block; float: left; width: 50%; text-align: center;margin: 0 auto 15px auto; box-sizing: border-box;padding: 0 10px; max-width: 100%; }
    #contact .headquarters>.info .container>.content>.rows>i{display: block; margin-right: 0; margin-bottom: 6px; }
    #contact .headquarters>.info .container>.content>.rows>p{display: block; height: 40px;}

    #contact .message .container>.describe>.text{font-size: 1.4rem;}

}

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

    #contact .headquarters>.info .container>.content>.rows>p{height: 50px;}
    #contact .headquarters>.info .container>.content>.rows>p>a{ font-size: 1.3rem;}
    #contact .headquarters>.info .container>.content>.rows>p>span{ font-size: 1.3rem;}
}

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


    #contact .headquarters{padding-top: 160px;}
    #contact .headquarters>.info{position: relative;}
    #contact .headquarters>.info .container>.content>.rows{display: block; float: none; width: 80%;}
    #contact .headquarters>.info .container>.content>.rows>p{display: block; height: auto;}
    #contact .headquarters>.bg{display: none;}
    #contact .headquarters>.shape{height: 80px;}

    #contact .message .container>.describe>.text{font-size: 1.2rem;}

    #contact .message .container>.form .rows{ float: none; width: 100%;}
    #contact .message .container>.form .rows:nth-child(even){float: none;}


}

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


    #contact .headquarters>.info .theme>.title{ font-size: 2.8rem;}
    #contact .headquarters>.info .container>.content>.rows{width: 100%;}
    #contact .headquarters>.shape{height: 40px;}

    #contact .message .theme>.title{ font-size: 2.8rem;}


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

    #contact .headquarters{padding-top: 120px;}
    #contact .headquarters>.info{ width: 90%; }
    #contact .headquarters>.shape{height: 30px;}

    #contact .message .container>.form{ width: 100%;}

}