@charset "utf-8";

body {overflow-x: hidden; overflow-y: auto;}

/* header */
.header {position: absolute; left: 0; top: 0; width: 100%; height: 100px; background: url(../images/common/header_bg.png) center; z-index: 100; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out;}
.header:after {display: block; content: ""; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; top: 99px; opacity: 0.4;}
.header_container {padding: 0 230px 0 335px;}
.mob_header_menu_btn {display: none;}
.header_logo {position: absolute; left: 60px; top: 31px;}
.header_logo .white {display: inline-block;}
.header_logo .black {display: none;}
.header_logo img {max-width: 215px;}
.header_etc {position: absolute; right: 60px; top: 35px;}
.header_etc a {display: inline-block; height: 30px; padding: 0 20px; color: #fff; font-size: 12px; text-align: center; line-height: 26px; border: 2px solid #fff; border-radius: 15px;}
.header.active,
.header.scroll {background: #fff;}
.header.active:after,
.header.scroll:after {background: #d9d9d9; opacity: 1;}
.header.active .header_logo .white,
.header.scroll .header_logo .white {display: none;}
.header.active .header_logo .black,
.header.scroll .header_logo .black {display: inline-block;}
.header.active .header_etc a,
.header.scroll .header_etc a {background: #8dc31b; line-height: 30px; border: none;}
.header.scroll {position: fixed; left: 0; top: 0; width: 100%;}

@media all and (max-width:1023px) {
    .header {height: 70px;}
    .header:after {top: 69px;}
    .header_wrap {height: 100%;}
    .header_container {height: 100%; padding: 0 20px;}
    .mob_header_menu_btn {width: 28px; height:21px; position: absolute; right:20px; top:22px; display: block;}
    .mob_header_menu_btn .ico,
    .mob_header_menu_btn .ico:before,
    .mob_header_menu_btn .ico:after {height: 2px; -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg); -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out; display: block; content: ""; background: #fff; position: absolute;}
    .mob_header_menu_btn .ico {width: 28px; right: auto; left:0;}
    .mob_header_menu_btn .ico:before,
    .mob_header_menu_btn .ico:after {right: auto; left:0;}
    .mob_header_menu_btn .ico:before {margin-top:-8px; width: 28px;}
    .mob_header_menu_btn .ico:after {margin-top:8px; width: 28px;}
    .mob_header_menu_btn.active .ico {background: none; left:2px; top:9px;}
    .mob_header_menu_btn.active .ico:before,
    .mob_header_menu_btn.active .ico:after {top:0; bottom: auto; left:0; margin: 0;}
    .mob_header_menu_btn.active .ico:before {-webkit-transform:rotate(-45deg); transform:rotate(-45deg); width: 23px;}
    .mob_header_menu_btn.active .ico:after {-webkit-transform:rotate(45deg); transform:rotate(45deg); width: 23px;}
    .header.active .mob_header_menu_btn .ico,
    .header.scroll .mob_header_menu_btn .ico,
    .header.active .mob_header_menu_btn .ico:before,
    .header.scroll .mob_header_menu_btn .ico:before,
    .header.active .mob_header_menu_btn .ico:after,
    .header.scroll .mob_header_menu_btn .ico:after {background: #000;}
    .header.active .mob_header_menu_btn.active .ico,
    .header.scroll .mob_header_menu_btn.active .ico {background: none;}
    .header_logo {position: static; left: auto; top: auto; display: inline-block; padding-top: 16px; vertical-align: middle;}
    .header_etc {display: none;}
}
@media all and (max-width: 767px) {
    .header {height: 60px;}
    .header:after {top: 59px;}
    .header_container {padding: 0 10px;}
    .mob_header_menu_btn {width: 22px; height: 16px; top: 19px;}
    .mob_header_menu_btn .ico {width: 22px;}
    .mob_header_menu_btn .ico:before {width: 22px; margin-top: -6px;}
    .mob_header_menu_btn .ico:after {width: 22px; margin-top: 6px;}
    .mob_header_menu_btn.active .ico:before,
    .mob_header_menu_btn.active .ico:after {width: 20px; top: -2px;}
    .header_logo {padding-top: 15px;}
    .header_logo img {max-width: 172px;}
}


/* gnb */
.gnb_list:after {display: block; content: ""; clear: both;}
.gnb_list > li {float: left; position: relative; width: 25%; text-align: center;}
.gnb_list > li > a {display: block; position: relative; color: #fff; font-size: 18px; line-height: 100px;}
.gnb_dep2_wrap {position: absolute; top: 100px; width: 100%; height: 0; background: #fff; overflow: hidden; z-index: 15;}
.gnb_dep2_list {padding: 30px;}
.gnb_dep2_list > li ~ li {margin-top: 10px;}
.gnb_dep2_list > li > a {display: block;}
.gnb_dep2_list > li > a:hover {text-decoration: underline;}
.header.active .gnb_list > li > a,
.header.scroll .gnb_list > li > a {color: #000;}
.header.active .gnb_list > li.active > a,
.header.scroll .gnb_list > li.active > a {background: #191c60; color: #fff;}
.header.active .gnb_list > li.active .gnb_dep2_wrap,
.header.scroll .gnb_list > li.active .gnb_dep2_wrap {background: #191c60;}
.header.active .gnb_list > li.active .gnb_dep2_list > li > a,
.header.scroll .gnb_list > li.active .gnb_dep2_list > li > a {color: #fff;}
.gnb_dimed {position: absolute; left: 0; top: 100px; width: 100%; height: 0; background: #fff; overflow: hidden; box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.07); -webkit-box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.07); z-index: 10;}

@media all and (max-width:1023px) {
    .gnb {display: none; position: absolute; left: 0; top: 70px; width: 100%; height: 100%; overflow-y: auto; z-index: 50;}
    .gnb_list > li {float: none; width: 100%; text-align: left;}
    .gnb_list > li > a {height: 56px; background: #fff; padding: 0 20px; font-size: 16px; line-height: 56px; border-bottom: 1px solid #d9d9d9;}
    .gnb_list > li > a:after {display: block; content:""; position: absolute; right: 22px; top: 18px; width: 10px; height: 10px; border-top: 2px solid #aeaeae; border-right: 2px solid #aeaeae; -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  transition: .5s ease-in-out;}
    .gnb_list > li.active > a {background: #191c60; color: #fff !important; border-bottom-color: #303370;}
    .gnb_dep2_wrap {display: none; position: static; top: auto; height: auto; background: #fff; overflow: inherit; border-bottom: 1px solid #d9d9d9;}
    .gnb_dimed {display: none; position: fixed; left: 0; top: 70px; height: 100%; background: #000; opacity: 0.7; z-index: -1; box-shadow: none;}
    .gnb_dimed.active {display: block;}
    .header.active .gnb_list > li.active .gnb_dep2_wrap,
    .header.scroll .gnb_list > li.active .gnb_dep2_wrap {background: #fff;}
    .header.active .gnb_list > li.active .gnb_dep2_list > li > a,
    .header.scroll .gnb_list > li.active .gnb_dep2_list > li > a {color: #000;}
}
@media all and (max-width: 767px) {
    .gnb {top: 60px;}
    .gnb_dimed {top: 60px;}
}


/* common */
.cont_container {max-width: 1220px; padding: 0 10px; margin: 0 auto;}

@media all and (max-width:1023px) {
    .cont_container {padding: 0 10px;}
}
@media all and (max-width: 767px) {
}


/* footer */
.footer {background: #fff; padding: 40px 0;}
.footer_wrap {display: table; width: 100%; table-layout: fixed;}
.footer_wrap .footer_info,
.footer_wrap .footer_logo {display: table-cell; vertical-align: middle;}
.footer_info {color: #767676;}
.footer_logo {width: 40%; text-align: right;}
.footer_logo img {vertical-align: middle; margin: 0 10px;}

@media all and (max-width:1023px) {
    .footer {padding: 30px 0;}
    .footer_wrap .footer_info,
    .footer_wrap .footer_logo {display: block; vertical-align: top;}
    .footer_logo {width: 100%; margin-top: 10px; text-align: center;}
}
@media all and (max-width: 767px) {
    .footer {padding: 20px 0;}
    .footer_info {font-size: 14px;}
    .footer_info p:nth-child(2) {font-size: 12px;}
    .footer_logo img {width: 40%;}
}