@charset "utf-8";
/*@import url("gnb.css");*/


/*layout*/
.wow { 	visibility: hidden;}
body.overflow {overflow: hidden;}
.contents {padding-top: 125px;}
/*contact us*/
.contact {padding:60px 0;  width:100%; z-index: 1; position: relative; border-top: 1px solid #ddd;}

.contact .h2_box h2 { color:#111; font-weight:600; line-height:100%; line-height:100%; font-size: 60px; }
.contact .h2_box h2 span {line-height:100%;}
.contact .h2_box:before {display:none;}
.contact .info {width: 50%;  display: inline-block; float: left;}
.contact .info h2 {color: #fff; font-weight: 600; font-size: 25px; padding-bottom: 45px;}
.contact .info .txt_wrap {padding-right: 5%;    color: #fff;}
.contact .info .txt_wrap .tit1 {font-size: 55px; color: #fff; font-weight: 600; padding-bottom: 40px; position: relative;}
.contact .info .txt_wrap p {word-break: keep-all;}
.contact .info .txt_wrap .tit2{font-size: 16px;line-height: 150%;}
.contact .info .info_wrap {margin-top: 95px; color: #fff;font-size: 18px;}
.contact .info .info_wrap > div > p {    width: 80px; display: inline-block;  margin-bottom: 30px; padding: 5px 0 5px 45px; font-weight: 400;  background: url("/resources/img/main/sec_contact1.png") center left no-repeat;}
.contact .info .info_wrap > div.fax > p{ background: url("/resources/img/main/sec_contact2.png") center left no-repeat;}
.contact .info .info_wrap > div.email > p{ background: url("/resources/img/main/sec_contact3.png") center left no-repeat;}


.contact .ct_inp {display: inline-block; width: 50%; float: right; box-sizing: border-box;padding: 0 80px;}
.contact .ct_inp .inform {width: 100%;}
.contact .ct_inp .tit{font-weight: 600; font-size: 16px; color: #333; margin-bottom: 32px;}
.contact .ct_inp .inp_box {padding: 15px; box-sizing: border-box; height: 52px; border: none; width: 100%;border:1px solid #ddd;border-bottom: none; transform: skew(-0.03deg);}
.contact .ct_inp .inp_box:last-child { margin-bottom: 20px;border-bottom:1px solid #ddd; }
.contact .ct_inp .inp_box > span {    color: #777; font-weight: 400;
    font-size: 16px;}
.contact .ct_inp .inp_box input {    width: 80%;  float: right;  background: none; border: none;  font-size: 14px;    padding-top: 4px;  color: #333;}
.contact .ct_inp .inp_box input:focus, .contact .ct_inp .textarea textarea:focus { outline: none;}
.contact .ct_inp .inp_box input::placeholder, .contact .ct_inp .textarea textarea::placeholder {color: #999;}
.contact .ct_inp .textarea { width: 100%;}
.contact .ct_inp .textarea textarea{max-width: 100%;min-width: 100%;height: 100%; border: 1px solid #ddd; box-sizing: border-box; min-height: 145px;max-height: 200px;overflow: auto; padding: 15px; background: none;font-size: 16px; color: #333; font-weight: 300;color: #333; line-height: 150%;}

.contact .ask_btn {text-align: center; margin-top: 17px; width: 100%;}
.contact .ask_btn a {width: 200px; height: 40px; line-height: 40px; color:#fff; font-weight:300; background-color: #000;font-size: 16px; display: inline-block; text-align: center; transition: all .3s ease;}
.contact .ask_btn a:hover {background-color: #88b927;}
.contact .ask_btn a span {display: inline-block;background: url("/resources/img/main/arrow_ico.png")no-repeat center right; width: 0px; height: 10px;transition: all .3s ease-in-out;}
.contact .bg1 {  position: absolute;  background: url("/resources/img/main/sec_contact.png") center/cover no-repeat;  width: 50%;height: 100%; top: 0;  left: 0; z-index: -1;}
.contact .bg2 {position: absolute; background: url("/resources/img/main/logo_contact.png") top -32px right 60px/43% no-repeat; width: 50%;  height: 100%;  top: 0;  right: 0;  z-index: -1;}



.bt_banner .tit_box {float: left; width: 23%;  background-color: #3189b7; padding: 0 1%; box-sizing: border-box; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.bt_banner .tit_box.tb2 .tit {float: none; display: inline-block; position: relative;}
.bt_banner .tit_box p {color: #fff !important; position: relative; display: inline-block;  font-weight: 400; font-size: 25px;box-sizing: border-box;}

.bt_banner .tit_box.tb2 p.txt_f {float: none; display: inline-block; position: relative;}
.bt_banner span.color_f { color: #fff; font-weight: 600; margin-right: 10px; display: inline-block;}

.bt_banner .tit_box.tb2 .tit {float: none; display: inline-block; position: relative;}
.bt_banner .tit_box p {color: #fff !important; position: relative; display: inline-block;  font-weight: 400; font-size: 25px;box-sizing: border-box;}

.tit_box .tit p.fff {position: relative; color: #fff; display: inline-block;  padding-right: 25px; font-weight: 400; font-size: 17px;box-sizing: border-box;}
.tit_box .tit .colorff {color: #fff; font-weight: 600; margin-right: 10px; display: inline-block;}


.bt_banner .tit_box .swiper-btn-wrap {margin-left: 8%; display: inline-block;}
.bt_banner .tit_box p .color {color: #fff;font-weight: 600; margin-right: 10px; display: inline-block;}
.bt_banner .tit_box .swiper-arrow {opacity: 1;position: static; margin: 0; padding: 0; width: 10px; height: 17px; display: inline-block; background: url("/resources/img/common/slide_arrow.png")no-repeat; transition: all .3s ease-in-out;}
.bt_banner .tit_box .swiper-arrow.swiper-button-prev {background-position: left 0px bottom 0px; margin-right: 20px;}
.bt_banner .tit_box .swiper-arrow.swiper-button-next {background-position: right 0px bottom 0px;}

.bt_banner .cont_wrap {float: right; width: 77%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fafafa; padding: 18px 10px; box-sizing: border-box; padding-top: 19px;}

.bt_banner img{max-width: 100%;}

.bt_banner .swiper-wrapper {height: auto;}

.login_popup {position: fixed; width: 100%; height: 100vh; background-color: rgba(255,255,255,.6); top: 0; left: 0; display: none;}

.login_popup .popup_in {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);background-color: #3189b7; border-radius: 20px; width: 95%; max-width: 650px; box-sizing: border-box; max-height: 80%;overflow-y: auto;}

.login_popup .popup_in .tit {position: relative; padding: 50px 0 35px; text-align: center; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.4);}
.login_popup .popup_in .tit p {color: #fff;}
.login_popup .popup_in .tit p.tt {font-weight: 600; font-size: 30px;}
.login_popup .popup_in .tit p.txt {font-weight: 500; margin-top: 20px;}

.login_popup .popup_in form {display: block; width: 100%; height: 100%; max-width: 450px; margin: 0 auto; padding: 60px 30px; box-sizing: border-box;}
.login_popup .popup_in .ip_box label {display: block; font-weight: 600; color: #fff;}
.login_popup .popup_in .ip_box input {border: none; border-bottom: 1px solid #fff; display: block; width: 100%; height: 50px; background: none; color: #fff; padding: 0;}
.login_popup .popup_in .ip_box input::placeholder {color: rgba(255,255,255,.6)}
.login_popup .popup_in .ip_box {margin-top: 50px;}
.login_popup .popup_in .ip_box:first-child {margin-top: 0;}
.login_popup .popup_in .login_btn {display: block; width: 100%; height: 50px; background-color: #fff; color: #3189b7; margin-top: 50px; line-height: 50px; text-align: center;}
.login_popup .popup_in .bt_if {margin-top: 50px;    display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.login_popup .popup_in .bt_if a {color: #fff;}
.login_popup .popup_in .bt_if a.btn {border-color: #fff;}

.login_popup .popup_in .close {position: absolute; top: 30px; right: 50px; cursor: pointer;}
.login_popup .popup_in .close span {position: absolute; width: 2px; height: 30px; transform: rotate(-45deg); background-color: #fff; top: 0px; left: 0px;}
.login_popup .popup_in .close span:last-child {transform: rotate(45deg);}




/*layout*/

@media screen and (max-width:1600px){
    .bt_banner .tit_box {display: none;}
    .bt_banner .cont_wrap {float: none; width: 100%;}
}

@media screen and (max-width:1500px){
      .contact .h2_box h2 .title{background: linear-gradient(to right, #2d759b, #326d9d);}
}

@media screen and (max-width:1300px){
    
      .contact .h2_box h2 .title{  background: linear-gradient(to right, #2d759b, #326f9d);}
    
  
}
@media screen and (max-width:1024px){
    
    .contents {padding-top: 100px;}
    
    .contact {padding: 0;}
    .contact .inner {width: 100%;}
    .contact .contact_box {width: 100%;  display: block;padding-bottom: 20px;box-sizing: border-box;}
    .contact .info, .contact .ct_inp {width: 100%;}
    .contact .ct_inp {background: url("/resources/img/main/logo_contact.png") top -32px right 60px/43% no-repeat;padding: 40px 45px;}
    .contact .ct_inp .tit {display: none;}
    .contact .info h2 {padding: 40px 0 50px;}
    .contact .info{box-sizing: border-box; padding: 0 45px; margin: 0 auto; background: url("/resources/img/main/sec_contact.png") center/cover no-repeat;width: 100%;}
    .contact .info .txt_wrap {display: inline-block; float: left;width: 50%; padding: 0 ;box-sizing: border-box;}
    .contact .info .txt_wrap .tit1 {font-size: 35px;padding-bottom: 30px;}
    .contact .info .txt_wrap .tit2 {font-size: 14px;}
    .contact .info .info_wrap{ display: inline-block;  width: 50%;  float: left;  margin-top: 0;}
    .contact .info .info_wrap {font-size: 14px; float: right; width: 50%;}
    .contact .ct_inp .inform {width: 48%; float: left;}
    .contact .ct_inp .textarea { width: 50%; float: right;}
    .contact .ct_inp .textarea textarea {min-height: 208px; max-height: 208px; height: 208px;}
    .contact .info .info_wrap > div > p {width: 70px;margin-bottom: 10px;}
    .contact .bg1, .contact .bg2 {display: none;}
    .contact .ct_inp { padding:20px; box-sizing: border-box;}
    
      
}
@media screen and (max-width:768px){
    .contact .ct_inp { background-position: top -32px right -50px; background-size: 60%;}
    .contact .ct_inp .textarea, .contact .ct_inp .inform {float: none; width: 100%;}
    .contact .ct_inp .textarea {margin-top: 30px;}
    .contact .info .txt_wrap {width: 100%; }
    .contact .info .txt_wrap .tit2 > span {display: inline-block;}
    .contact .info .info_wrap {width: 100%; margin-top: 30px;}
    .contact .h2_box h2 .title{background: linear-gradient(to right, #2d759b, #36699f);}
    .contact .info .info_wrap > div > p {width: 50px;padding: 5px 0 5px 35px;}
    .contact .ct_inp .inp_box {padding: 14px 10px; height: 49px;}
    .contact .ct_inp .inp_box > span {font-size: 14px;}
    .contact .ct_inp .inp_box input {padding-top: 2px;}
    .contact .ct_inp .textarea {margin-top: 20px;}
    .contact .ct_inp .textarea textarea {font-size: 14px;}
    .contact .ask_btn a {width: 100%;}
        .contact .ct_inp .textarea, .contact .ct_inp .inform {width: 48%;}
   
}

@media screen and (max-width:650px){
    .contact .h2_box h2 .title{background: linear-gradient(to right, #2d759b, #336c9e);}    
    .contact .ct_inp .textarea, .contact .ct_inp .inform {float: none; width: 100%;}    
    .contact .ct_inp .textarea {margin-top: 30px;}    
}
@media screen and (max-width:500px){
    .contact .h2_box h2 .title{background: linear-gradient(to right, #2d759b, #36699f);}
    
    .login_popup .popup_in .tit p.tt {font-size: 22px;}
    .login_popup .popup_in .tit {padding: 40px 0 20px;}
    .login_popup .popup_in form {padding: 30px;}
    
    .login_popup .popup_in .ip_box, .login_popup .popup_in .login_btn, .login_popup .popup_in .bt_if {margin-top: 20px;}
    .login_popup .popup_in .tit p.txt {margin-top: 10px;}
    
    .login_popup .popup_in .close {top: 15px; right: 30px;}
    
}