@charset "utf-8";

/**
 * --------------------------------
 * header CSS
 * --------------------------------
*/

header {position: absolute;left: 0;top: 0;width: 100%;height:110px;z-index: 30;}
header .inner {position: relative;margin: 0 auto;width: 1920px;}
header .menu_area {display:flex;position:absolute;top:31px;left:58px;font-family: "Oswald";font-size:20px;line-height:48px;color:#000;letter-spacing:.05em;}
header .menu_area > p {margin-left:8px; font-weight:400; color:#000; transition:color .3s ease-in;}
header .btn_menu {width: 48px;height: 48px;background-color: #1f4ded;border-radius: 50%; z-index: 31;}
header .btn_menu span {position: absolute;left: 15px;width: 19px;height: 2px;display: block;background-color: rgba(255, 255, 255, .8);border-radius: 99px;transition: all ease-in .2s;}
header .menu_area .btn_menu span:nth-of-type(1) {top: 17px;transform-origin: top left;}
header .menu_area .btn_menu span:nth-of-type(2) {top: 23px;}
header .menu_area .btn_menu span:nth-of-type(3) {top: 29px;transform-origin: bottom left;}
header .menu_area .btn_menu.close span {width: 23px;top: 15px;left: 17px; transform: rotate(45deg);}
header .menu_area .btn_menu.close span:nth-of-type(2) {top: 23px;opacity: 0; transform: rotate(0);}
header .menu_area .btn_menu.close span:nth-of-type(3) {top: 31px;transform: rotate(-45deg);}
/*header .menu_area .btn_menu.close ~ .search_area {opacity:1;}*/

header .search_area {position: absolute;top:39px;right: 57px;z-index: 31;}
header .search_area img {transition:opacity .3s ease;}
header .search_area img:not(.search_b) {opacity:0;}
header .search_area img.search_b {position:absolute;left:0;top:0;opacity:1;}
header.white .search_area img.search_b {opacity:0;}
header.white .search_area img:not(.search_b) {opacity:1;}

header a {font-family: "Oswald";font-weight: 400;text-transform: uppercase;}
header [class^="depth"] li {font-family: "Oswald";font-weight: 400;text-transform: uppercase;}
header .gnb {position: absolute;top: 0;left: 0; width: 100%;height: 960px;padding-top: 208px;padding-left: 60px;background-color:#f8f8f8;transform: translateX(-100%);opacity: 0;transition: .4s opacity ease-in .1s, .4s transform ease-in .1s;background-image: url('./images/depth1bg.jpg');background-position: 0 0;background-repeat: no-repeat;overflow: hidden;}
header .gnb.active {transform: translateX(0);opacity: 1;}
header .gnb .bottom_nav {position: absolute;bottom: 32px;left: 0;}
.backbtn {position: absolute;top: 150px;left: 700px;visibility: hidden;z-index: 99;}
.backbtn.active{visibility: visible;}

header .depth1 {width: 580px;}
header .depth1 ul li {position: relative;font-family: "Oswald";line-height: 54px;display: block;font-size: 32px;line-height: 62px;font-weight: 400;letter-spacing: 0.065em;opacity: .7;color: #FFF;}
header .depth1 ul li a {color:#fff;}
header .depth1 ul li+li {margin-top: 36px;}
header .depth1 ul li::after {display: block;content: '';position: absolute;top: 6px;right: 60px;width: 52px;height: 52px;background-image: url('./images/arrow.png');opacity: 0;}

header .depth1 ul li:first-of-type.active {opacity: 1;}
header .depth1 ul li:first-of-type.active::after{opacity: 1;}
header .depth1 ul li:first-of-type:hover {opacity: 1;}

.depth2 {position: absolute;top: 208px;left: 640px;width: 640px;padding-top: 5px;padding-left: 60px;transform: translateX(-100px);visibility: hidden;opacity: 0;transition: .2s all ease-in;}
.depth2.active {transform: translateX(0);opacity: 1;visibility: visible;}
.depth2 ul li+li {margin-top: 2px;}
.depth2 ul li {position: relative;line-height: 52px;font-family: "Oswald";color: #000;font-size: 18px;letter-spacing: 0.055em;font-weight: 300;}
.depth2 ul li a {display: block; font-weight:300;}
.depth2 ul li a:hover {color: #1f4ded;font-weight: 400;}
.depth2 ul li.active a {color: #1f4ded;font-weight: 400;}
.depth2 ul li a::after {display: block;content: '';position: absolute;top: 0;right: 60px;width: 52px;height: 52px;background-image: url('./images/arrow_fill.png');opacity: 0;}
.depth2 ul li a:hover::after {opacity: 1;}

.depth3 {position: absolute;top: 208px;left: 640px;width: 640px;padding-top: 5px;padding-left: 60px; transform: translateX(100px);visibility: hidden;opacity: 0;transition: .3s all ease-in;}
.depth3.active {transform: translateX(0);opacity: 1;visibility: visible;}
.depth3.close {transform: translateX(-100px);}
.depth3 ul li+li {margin-top: 2px;}
.depth3 ul li {line-height: 52px;font-family: "Oswald";color: #000;font-size: 18px;letter-spacing: 0.055em;font-weight: 300;}
.depth3 ul li a {position: relative;display: block; font-weight:300;}
.depth3 ul li:hover a {color: #1f4ded;font-weight: 400;}
.depth3 ul li.active a {color: #1f4ded;font-weight: 400;}
.depth3 ul li a::after {display: block;content: '';position: absolute;top: 0;right: 60px;width: 52px;height: 52px;background-image: url('./images/arrow_fill.png');opacity: 0;}
.depth3 ul li:hover a::after {opacity: 1;}

.depth4 {position: absolute;top: 0;right: 0px;width: 1280px;height: 960px;padding-top: 205px;padding-left: 60px;transition: .3s ease-in opacity,.4s ease-out transform;opacity: 0;background-color: #f8f8f8;z-index: 1;transform: translateX(1280px);box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.07);}
.depth4.active {opacity: 1;transform: translateX(0);}
.depth4 > ul > li {width: 520px;font-family: "Oswald";line-height: 52px;color: #000;font-size: 18px;letter-spacing: 0.055em;font-weight: 300;}
.depth4 > ul > li+li {margin-top: 2px;}
.depth4 > ul > li > a {position: relative;display: block; font-weight:300;}
.depth4 > ul > li:hover a {color: #1f4ded;font-weight: 400;}
.depth4 > ul > li.active a {color: #1f4ded;font-weight: 400;}
.depth4 > ul > li > a::after {display: block;content: '';position: absolute;top: 0;right: 40px;width: 52px;height: 52px;background-image: url('./images/arrow_fill.png');opacity: 0;}
.depth4 > ul > li.active > a::after {opacity: 1;}
.depth4 .con {position: absolute;right: 0;top: 0;width: 640px;}
.depth4 .con li {display: none;opacity: 0;}
.depth4 .con li+li {margin-top: 0;}
.depth4 .con li.active {display: block;opacity: 1;}

/* logo */
header .logo-area {position:absolute;left:50%;top:0;transform:translateX(-50%);min-width:300px;height:110px;} /*left:760px;*/
header .logo-area .swiper {height:110px;}
header .logo-area .swiper-slide {padding:0 15px;height:110px;}
header .logo-area .swiper-slide > a {display:block;}
header .logo-area .swiper-slide > a > p {font-family:'Oswald',sans-serif;font-size:32px;text-align:center;line-height:110px;color:#1f4ded;transition:color .5s ease-in;}
header .logo-area .swiper-slide > a > .logo-white {position:absolute;left:0;top:0;width:100%;height:110px;opacity:0; transition: opacity .5s ease-in;}
header .logo-area .swiper-slide > a > img {opacity:1;transition:opacity .5s ease-in;}

header.white .menu_area > p {color:#fff;}

header.white .logo-area .swiper-slide > a > p {color:#ffffff;}
header.white .logo-area .swiper-slide > a > img {opacity:0;}
header.white .logo-area .swiper-slide > a > .logo-white {opacity:1;}