@charset "utf-8";


/*layout*/

.wow { 	visibility: hidden;}

/*header*/
.header {width: 100%; height: 90px; position: absolute; z-index: 100; font-size: 14px;}
.header .head {padding-top: 45px; height: 300px; box-sizing: border-box; transition: all .3s ease-in-out;background-color: rgba(0,0,0,0); width: 100%;}

.header .logo {float: left;padding-top: 20px;}
.header .logo img {width: 100%;}
.header .gnb_wrap {width: 100%; }
.header .gnb_wrap > .gnb {width: 40%; float: right; margin-right: 80px;}
.header .gnb_wrap > .gnb > ul { padding: 25px 0;}
.header .gnb_wrap > .gnb > ul > li {display: inline-block; width: 20%;position: relative; transition: all 0.2s ease-in-out; text-align: center;}
.header .gnb_wrap > .gnb > ul > li > a {color: #fff; font-size: 18px; font-weight: 400;}
.header .gnb_wrap > .gnb > ul > li > ul {display:none; transition:.3s ease; position: absolute;  width: 123px; background: #3a3c8a; padding: 65px 0 25px; left: 50%;top: -25px;  transform: translateX(-50%);  z-index: -1;}
.header .gnb_wrap > .gnb > ul > li {padding: 0 7px;}
.header .gnb_wrap > .gnb > ul > li.tech > ul {width: 160px;}
.header .gnb_wrap > .gnb > ul > li:hover ul {display:block;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child {padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.3);}
.header .gnb_wrap > .gnb > ul > li > ul > li {transition: all .2s ease-in-out;}
.header .gnb_wrap > .gnb > ul > li > ul > li a {transition: all .2s ease-in-out; position: relative;}
.header .gnb_wrap > .gnb > ul > li > ul > li:hover a {font-weight: 600;transition: all .1s ease-in-out;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child a {margin-top: 0;}
.header .gnb_wrap > .gnb > ul > li ul > li:first-child::before {transition:.3s ease; transform:translateX(-15px); position: absolute; display:inline-block; content: ""; top: -2px; left: -15px;width:62px;  height: 3px;  background: #fff;}
.header .gnb_wrap > .gnb > ul > li:hover ul > li:first-child::before { transform:translateX(0)}
.header .gnb_wrap > .gnb > ul > li > ul > li > a {color: #fff;display: block; width: 100%; margin-top: 17px; font-size: 16px;}
.header .ham_btn, .header .ham_menu {display: none;}
.header .ham_btn, .header .ham_btn span {display: inline-block; z-index: 100; transition: all .3s ease-in-out; box-sizing: border-box;}
.header .ham_btn {position: absolute; width: 28px; height: 24px; top: 70px; right: 4%; cursor: pointer;}
.header .ham_btn span {position: absolute; width: 100%; height: 4px; background-color: #fff; right: 0;}
.header .ham_btn span:nth-of-type(1) {top: 0;width: 24px;}
.header .ham_btn span:nth-of-type(2) {top: 10px;}
.header .ham_btn span:nth-of-type(3) {bottom: 0;width: 17px;}
.header .ham_btn::after { background: #ea650c; content: ""; position: absolute; width: 0; height: 0; top: 50%; left: 50%;transform: translate(-50%, -50%); transition: all 0.3s ease-in-out;}
.header .ham_btn:hover::after {width: 40px; height: 40px;}

/* .header .ham_btn.active {position: fixed;} */
.header .ham_btn.active {position: fixed;}
.header .ham_btn.active span:nth-of-type(1) {-webkit-transform : translateY(10px) rotate(-45deg);	width: 100%; transform : translateY(10px) rotate(-45deg);}
.header .ham_btn.active span:nth-of-type(2) {opacity: 0;}
.header .ham_btn.active span:nth-of-type(3) {-webkit-transform : translateY(-10px) rotate(45deg); width: 100%; transform : translateY(-10px) rotate(45deg);}


.header .ham_menu {position: fixed; top: 0; left: 0; width: 100%; height: 100vh;background: rgba(54,56,117,0.95);}
.header .ham_menu .h_inner {height: auto;}
.header .ham_menu .logo {margin-top: 45px;}
.header .ham_menu .side_txt {color: #999; font-weight: 600; font-size: 15px;  letter-spacing: 6px;  transform: rotate(-90deg);  position: absolute;top: 50%; left: 0;}
.header .ham_menu > .inner {height: 100vh;}
.header .ham_menu .m_gnb_wrap { position: absolute; left:50%;    width: 100%; transform: translateX(-50%); margin-top: 10vh;}
.header .ham_menu .m_gnb_wrap > .gnb {max-height: calc(100vh - 125px); overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li {margin-bottom: 70px; position: relative; display: block;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li::after {display: block; content: ""; clear: both; height: 0;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > a {display: inline-block; position: relative;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > a::before { content: "01"; opacity: 0; visibility: hidden; font-style: italic; font-size: 30px; color: #f2721d; letter-spacing: -4px; position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.3s ease; font-weight: 600; left: 0;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li:nth-child(2) > a::before { content: "02";}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li:nth-child(3) > a::before { content: "03";}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li:nth-child(4) > a::before { content: "04";}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li:hover > a::before {visibility: visible; opacity: 1;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > a {color: #fff; font-size: 65px; font-weight: 600;  transition: all .3s ease; padding: 5px; box-sizing: border-box;   display: inline-block; width: 340px;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li:hover > a {padding-left: 50px; color: #f2721d;}

.header .ham_menu .m_gnb_wrap > .gnb > ul > li:last-child {margin-bottom: 0;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul {display: inline-block; }
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul > li { float: left; display: inline-block; font-size: 20px; padding-right: 45px; transition: all 0.2s ease-in-out;}


.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul > li > a {color: #fff;  text-align: center; display: inline-block; padding: 5px; box-sizing: border-box;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul > li > a:hover {font-weight: 600; text-decoration: underline;}



/*header*/
/*footer*/
/*sec_com*/
.h2_box {position: relative; margin-bottom: 80px;}
.h2_box h2 {color: #8437c5; display: inline-block; font-size: 32px; font-weight: 800;}
.h2_box h2 span {display: block;}
.h2_box h2 span.ava {font-weight: 300;}
.h2_box h2 span.title {background-color: #f9f9f9; padding-right: 10px;}
.h2_box:before {content: "";display: inline-block; width: 100%; height: 2px; background: linear-gradient(to right, #8437c5, #0083e5); bottom: 8px; right: 0; position: absolute;}

/*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: #3a3c8a; 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: #3a3c8a;font-size: 16px; display: inline-block; text-align: center; transition: all .3s ease;}
.contact .ask_btn a:hover {background-color: #ea650c;}
.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 .ask_btn:hover a span {width: 20px; margin-left: 5px;}
.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;}



/*footer*/
#footer {width: 100%; background-color: #373a43; color: #d8d9da;font-family: 'NanumSquare','Noto Sans KR', sans-serif; font-size: 14px;}
#footer .f_logo {width: 221px;float: left;}
#footer .f_logo img {width: 100%;}
#footer .f_upper {padding: 20px 0;}
#footer .f_quick {width: 30%;  float: right;  text-align: right;padding-top: 13px;}
#footer .f_quick a {color: #d8d9da; font-size: 15px; padding-left: 17px; transition:.3s ease; display:inline-block; transform:skew(-0.03deg); margin-left: 13px; position: relative;font-weight: 400;}
#footer .f_quick a:hover{color: #ea650c; text-decoration:underline;}
#footer .f_quick a:first-child {padding-left: 0; margin-left: 0;}
#footer .f_quick a::before {content: "";position: absolute; top:50%; left: 0; transform: translateY(-50%); width: 3px; height: 3px; background: #fff; border-radius: 100%;}
#footer .f_quick a:first-child::before {display: none;}
#footer .f_line {display: block; width: 100%; height: 1px; background: #5f6169; }
#footer .f_inform {width: 100%; padding: 35px 0;transform: skew(-0.03deg);}
#footer .f_inform p .bold {margin-right: 1%;}
#footer .f_inform p {position: relative; display: inline; margin-right: 35px;}
#footer .f_inform p:last-child {margin-right: 0;}
#footer .f_inform p.fax::after, #footer .f_inform p.ct::after {display: none;}
#footer .f_inform .bottom {margin-top: 3px;}
#footer .copy {color: #afb0b4; margin-top: 15px; font-size: 14px;}

#footer .top_btn {position: fixed; background-color: #3a3c8a; width: 60px; height: 60px; bottom: 40px; right: 80px; z-index: 11; border-radius: 100%;transition: all .2s ease-in-out;}
#footer .top_btn a::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-radius: 100%; background-color: rgba(58,60,138,.2); transition: all .2s ease-in-out;}
#footer .top_btn:hover a::after{transition: all .2s ease-in-out;width: 128px; height: 128px;}
#footer .top_btn a {display: inline-block; background: url(/resources/img/main/main_ico.png)no-repeat left 22px bottom 33px; color: #fff; font-weight: 300;text-align: center; padding-top: 30px; width: 100%; height: 100%; box-sizing: border-box;z-index: 12;}
#footer .copylink {color: #afb0b4;}
/*layout*/

@media screen and (max-width:1500px){
      .header .ham_menu > .inner {width: 100%;}
      .header .ham_menu .m_gnb_wrap > .gnb > ul {display: block; width: 90%;margin: 0 auto;float: right;}
      .header .ham_menu .m_gnb_wrap > .gnb > ul > li { margin-bottom: 7vh;}
      .header .ham_menu .side_txt {left: 0;}
      .header .ham_menu .m_gnb_wrap > .gnb > ul > li > a {font-size: 50px;}
      .header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul > li { font-size: 16px;}
}

@media screen and (max-width:1300px){
      .header .ham_menu .side_txt {left: -5%;}
      .contact .info {width: 42%; padding-left: 8%;}
      .contact .ct_inp {padding: 0 3%;}

      #footer .f_inform {float: left; width: 72%; margin-left: 4%;}
}
@media screen and (min-height:850px), (max-width:1024px){
      .header .ham_menu .m_gnb_wrap {transform: translate(-50%, -50%); margin-top: 0; top: 42%;}
    }
@media screen and (max-width:1200px){
      .header .gnb_wrap {width: 60%;  float: right; margin-right: 10%;}
      .header .gnb_wrap > .gnb {margin-right: 0;  width: 100%; float: none; text-align: center;}
}
@media screen and (max-width:1024px){
    .header .gnb_wrap {display: none;}
    .header .head {height: 90px; padding:17px 12px;}
    .header .head:hover {height: auto; background-color: inherit;}
    .header .ham_btn {display: block; top: 42px;}
    .header .ham_menu .logo {margin: 17px 12px;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li {display: block;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul {margin-top: 20px;display: block; margin-top: 10px;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li > a {width: 270px;}

    .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: 18px;}
    .contact .bg1, .contact .bg2 {display: none;}

    #footer .f_logo {float: none;display: inline-block;}
    #footer .f_quick {width: auto;}
    #footer .f_inform {float: none; width: 100%; margin-top: 30px; margin-left: 0;}
    #footer .f_sns_box {float: none; position: absolute; top: 20px; right: 0;}
    #footer .copy {margin-top: 50px;}

}
@media screen and (max-width:768px){
    .header .logo {padding-top: 0;}
    .header .head {height: 70px;}
    .header .ham_btn {top:22px;}

    .header .ham_menu .side_txt {display: none;}
    .header .ham_menu .m_gnb_wrap { transform: translateY(-50%);  margin-top: 0;  top: 42%;  left: 0;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul{float: left; margin-left: 3%;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li > a::before {opacity: 1; visibility: visible; position: relative; font-size: 20px; top: auto; transform: none;padding-right: 8px;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li > a {font-size: 30px;}
    .header .ham_menu .m_gnb_wrap > .gnb > ul > li:hover > a {padding-left: 5px; color: #fff;}


    #footer .top_btn {bottom: 10px; right: 10px;}

    .contact .ct_inp .textarea, .contact .ct_inp .inform {width: 48%;}

    #footer .f_inform p {display: block; margin-bottom: 10px;}
  	#footer .f_inform p .bold { display:inline-block;vertical-align:top; line-height:130%;}
    #footer .f_inform p:after {display: none;}
    #footer .f_inform .bottom {margin-top: 0;}


}

@media screen and (max-width:650px){
.header .ham_menu .m_gnb_wrap {margin-top: 30px; position: relative; top: auto; left: auto; transform: none;}
.header .ham_menu .m_gnb_wrap > .gnb > ul {float: none; margin: 0 auto; text-align: center;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li {margin-bottom: 7vh;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > a {width: auto; font-size: 20px;}

.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul {position: relative; padding-top: 16px;}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);  width: 50%; height: 1px;background: rgba(255,255,255,.2);}
.header .ham_menu .m_gnb_wrap > .gnb > ul > li > ul > li {display: block; width: 100%; padding-bottom: 20px;}


/*모바일 일 때, 햄버거 메뉴 열림, 닫힘*/
.header .ham_menu .m_gnb_wrap.mobile_menu > .gnb > ul > li > ul {display: none;}


.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;}

#footer .f_logo {display: block;margin: 0 auto; width: 150px;}
#footer .f_quick {float: none;text-align: center;}
#footer .f_quick a {font-size: 14px;}
#footer .f_inform_wrap {width: 90%;}
#footer .f_inform {margin-top: 0;font-size: 12px;}
#footer .f_inform p {margin-right: 0;}
#footer .f_inform p.address .txt {display: inline; word-break: keep-all;}
#footer .copy {text-align: center; font-size: 12px; margin-top: 30px;}

}



@media screen and (max-width:500px){
    .header .head > .h_inner > .lang {display: none;}
    .header .ham_menu .lang {display: block; float: none; width: 87%; text-align: right; padding-top: 17px;}

    .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%;}


    #footer .f_inform p.address .txt {display: block;margin-top: 5px;}
    #footer .top_btn {bottom: 3px;right: 3px; width: 50px; height: 50px;}
    #footer .top_btn a {font-size: 12px; padding-top: 26px;background-position: left 17px bottom 28px;}
    #footer .top_btn:hover a::after{width: 60px; height: 60px;}
}