@charset "utf-8";


.wrap{ max-width: 1460px;}


#contact{ margin: 0 auto; padding: 30px 0;}
#contact>.container{ margin: 0 auto;}
#contact>.container>ul{margin: 0 auto;}
#contact>.container>ul>li{display: block;float: left; width:48.5%; margin-right: 3%; margin-bottom: 3%; background: #fff; border: 1px solid #ddd; height: 240px; box-sizing: border-box; padding:50px; text-align: center; transition: all .35s; }
#contact>.container>ul>li:nth-child(2n){margin-right: 0;}
#contact>.container>ul>li .ico{text-align: center;}
#contact>.container>ul>li .ico>i{ display: inline-block; position: relative; font-size: 4rem; color: #999; padding-bottom: 20px; transition: all .35s;}
#contact>.container>ul>li .ico>i:after{position: absolute;z-index: 21; left: 50%; bottom: 0; margin-left: -10px; width: 20px;height: 2px; background: rgba(248,182,45,1); content: ''; transition: all .35s;}
#contact>.container>ul>li .tit{font-size: 1.8rem; font-weight: 600; color: #333; padding: 10px 0; transition: all .35s;}
#contact>.container>ul>li .txt{font-size: 1.6rem; line-height: 140%; color: #666; transition: all .35s;}
#contact>.container>ul>li .txt>a{color: #666; transition: all .35s;}
#contact>.container>ul>li:hover{background: #fffbf0;  border: 1px solid #f8e19d; transform: translateY(-10px);}
#contact>.container>ul>li:hover .ico>i{color: rgba(248,182,45,1);}
#contact>.container>ul>li:hover .ico>i:after{margin-left: -15px; width: 30px;}
#contact>.container>ul>li:hover .txt>a{text-decoration:underline;}


#message {width:100%;margin: 0 auto; padding: 80px 0 120px 0; background:url("../img/message_bg.jpg") no-repeat; background-size: cover;}
#message>.title{margin: 0 auto; padding:30px 0 80px 0; text-align: center;}
#message>.title>h3{ position: relative; display: block; font-size: 4.6rem; font-weight: 200; color:#333;}
#message>.title>h3:after{position: absolute;z-index: 3; left: 50%; bottom: 50px; margin-left: -50px; width:100px; height: 60px; background: url("../img/icon-sun.png") no-repeat; background-position: 50% 50%; background-size: auto 30px;  content: ''; }
#message>.title>span{ display: block; width: 40%;margin: 0 auto; font-size: 1.8rem; line-height: 2.8rem; padding-top: 10px; font-weight: 200; color: rgba(0,0,0,.5);}
#message>.container .rows{padding:10px 2%;position: relative;}
#message>.container .rows.input_rows{float:left; width:50%;text-align: center;box-sizing: border-box;}
#message>.container .rows .input{width:100%; height:43px; line-height:43px; font-size:1.3rem; color:#888; border: 1px solid #ccc; text-indent:10px;box-sizing: border-box;}
#message>.container .rows textarea{width:100%; height:150px; padding:5px; font-size:1.3rem; color:#888; border: 1px solid #ccc; box-sizing: border-box; font-family: 'Rubik', sans-serif; }
#message>.container .rows .necessary{margin-right:8px;position: absolute;right: 0;bottom: 7px;z-index: 1; font-size: 1.8rem; font-weight: 200; color: #ff0000;}
#message>.container .rows.input_rows .necessary{bottom: 18px;}
#message>.container .rows.vcode .input{width:150px; max-width:80%;}
#message>.container .rows.vcode img{margin-top:3px;}
#message>.container .rows.vcode .necessary{position: static;margin: 0 0 0 8px;}
#message>.container .rows .form_button{width:160px; height:40px;line-height: 40px; background:#222; color:#fff;font-size:1.4rem; border:none;text-transform: uppercase;cursor: pointer;}
#message>.container .rows.textarea_rows{clear:both;}
#message>.container.s1>form>.rows.input_rows{width:100%; float:none;}
#message>.container.s1>form>.rows.textarea_rows textarea{width:90%; max-width:90%;}

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







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

    #contact>.container>ul>li{height: 240px; padding:50px 10px;}

}

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

    #contact>.container>ul>li{height: 220px;}

    #message>.title{padding:30px 0;}
    #message>.title>h3{ font-size: 4rem;}
    #message>.title>span{width: 60%; line-height: 2rem; font-size: 1.4rem}

}


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

    #contact>.container>ul>li{ width:48%; margin-right: 0; }
    #contact>.container>ul>li:nth-child(1){width: 100%; float: none;}
    #contact>.container>ul>li:nth-child(odd){ float: right;}


}

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

    #message>.container .rows.input_rows{float:none; width:100%;text-align: left;}
    #message>.container .rows .necessary{margin-right: -8px;}
    #message>.container .rows.vcode .input{width:100%; max-width:none;}
    #message>.container .rows.vcode>.fl{ width: 100%;}
    #message>.container .rows.vcode>.chk{ position: absolute;z-index: 10; right: 0; width: 30%; text-align: right; box-sizing: border-box;padding: 8px 20px 0 0;}
    #message>.container .rows.vcode .necessary{position: absolute;margin-right: -8px;}
    #message>.container .rows .form_button{width:100%;}


}


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

    #contact>.container>ul>li{ width:100%;float: none; }
    #contact>.container>ul>li:nth-child(odd){ float: none;}


    #message>.title>h3{ font-size: 3rem;}






}