@charset "utf-8";

/* 공통 */
.inner{width: 100%; max-width: 1340px; padding: 0 30px; margin: 0 auto;}

/* 헤더 */
.header-wrap{position: relative; padding-bottom: 90px;}
.h-utill{font-size: 16px; background-color: #f5f5f5;}
.h-utill>div{display: flex; justify-content: space-between; align-items: center; width: 100%; height: 45px; max-width: 1280px; padding: 0; margin: 0 auto;}
.h-utill .ulsan{display: flex; gap: 5px; align-items: center; line-height: 1.2em;}
.h-utill .ulsan:before{content: ""; display: block; width: 20px; height: 17px; background-image: url(../img/main/ulsan_symbol.png); background-repeat: no-repeat; background-position: center; background-size: contain;}
.h-info{}
.h-info ul{display: flex; gap: 10px; padding: 0 10px;}
.h-info li{position: relative;}
.h-info li a{display: block; padding: 0 20px; border-radius: 27px; height: 27px; line-height: 27px; font-size: 14px; color: #fff; background-color: #333;}
.h-info li a.login{border: 1px solid #ddd; color: #000; background-color: #fff;}

.header{position: absolute; top: 45px; left: 0; width: 100%; z-index: 100;}
.header:after{position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: #ddd;}
.header.open{background-color: #fff; box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
.header.open:before{position: absolute; top: 90px; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: #ddd; z-index: 1;}
.header .header-inner {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1280px; height: 90px; margin: 0 auto;}
.header .logo {display: flex; width: 250px;}
.header .logo a{display: inline-block; width: 211px; height: 67px; background-image: url(../img/main/logo.png); background-repeat: no-repeat; background-size: contain; background-position: center; text-indent: -99999px;}
.header .header-gnb {display: inline-block; width: calc(100% - 330px); height: 100%;}
.header .header-gnb .gnb-depth-1 {display: flex; height: 100%; text-align: center;}
.header .header-gnb .depth-1 > .depth-1-link {position: relative; display: flex; align-items: center; justify-content: center; height: 90px; font-weight: 500; font-size: 20px; color: #000; }
.header .header-gnb .depth-1 > .depth-1-link:before{content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 3px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: #e30613;}
.header .header-gnb .depth-1.current > .depth-1-link:before{content: ""; display: block; width: 100%;}
.header .header-gnb .gnb-depth-1 .depth-1{width: 16.6666666666%;}
.header .header-gnb .depth-1 > .depth-1-link > span {position: relative; display: inline-block; line-height: 90px; line-height: normal;}


.header .header-gnb .depth-1 .depth-item {display: none; position: absolute; top: 90px; left: 0; width: 100%; min-height: 270px; opacity: 0; text-align: left;}
.header .header-gnb .depth-1 .depth-item .item-title {position: absolute; top: 0; left: 0; width: 320px; height: 100%;}
.header .header-gnb .depth-1 .depth-item .item-title strong {display: block; margin-top: 35px; font-size: 24px; font-weight: 700;}
.header .header-gnb .depth-1 .depth-item .item-title p {margin-top: 10px; color: #222; font-size: 16px; font-weight: 300;}
.header .header-gnb .depth-1 .depth-item .gnb-depth-2 {display: flex; flex-wrap: wrap; margin-left: 320px; padding: 35px 0 40px; visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-2 {width: 25%; margin-bottom: 10px; padding: 0 10px;}
.header .header-gnb .depth-2 > .depth-2-link {display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border: 1px solid #e4e8eb; border-radius: 5px; font-size: 16px; color: #222; transition: all 0.3s;}
.header .header-gnb .depth-2 > .depth-2-link .img-wrap{display: flex;}
.header .header-gnb .depth-2:hover > a, .header .header-gnb .depth-2 > .depth-2-link:focus {border: 1px solid #f60000; color: #f60000;}
.header .header-gnb .depth-2:hover > a .img-wrap img, .header .header-gnb .depth-2 > .depth-2-link:focus .img-wrap img{filter: invert(11%) sepia(88%) saturate(7155%) hue-rotate(1deg) brightness(95%) contrast(108%);}
.header .header-gnb .depth-3 {padding: 2px 20px;}
.header .header-gnb .depth-3 > .depth-3-link {display: block; position: relative;}
.header .header-gnb .depth-3 > .depth-3-link span {display: inline-block; position: relative; padding-right: 15px; background-color: #fff;}
.header .header-gnb .depth-3 > .depth-3-link:hover, .header .header-gnb .depth-3 > .depth-3-link:focus {color: #007ea5;}
.header .header-gnb .depth-3 > .depth-3-link:before {display: block; position: absolute; top: 57%; right: 0; content: ''; width: 0; height: 1px; background-color: #007ea5; transition: all 0.5s; -webkit-transition: all 0.5s;}
.header .header-gnb .depth-3 > .depth-3-link:hover:before, .header .header-gnb .depth-3 > .depth-3-link:focus:before {width:100%;}


/* 모바일 gnb */
.header .mobile-gnb {display: none;}
.header .mobile-gnb .sidebar-btn {position: relative; width: 65px; height: 65px; margin-right: 10px; z-index: 1;}
.header .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 20px; width: 33px; height: 3px; border-radius: 3px; background-color: #222;}
.header .mobile-gnb .sidebar-btn span:nth-child(1) {top: 21px;}
.header .mobile-gnb .sidebar-btn span:nth-child(2) {top: 31px; width: 28px; transition: opacity 0s 0.15s;}
.header .mobile-gnb .sidebar-btn span:nth-child(3) {top: 41px;  width: 24px;}
.header .mobile-gnb .sidebar-btn span:nth-child(1), .header .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1), .header .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 32px; width: 30px; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 18px; transform: rotate(45deg);}
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 18px; transform: rotate(-45deg);}
.header .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: 100%; top: 109px; left: 0; background-color: rgba(0,0,0,0.3); visibility: hidden; opacity: 0; transition: all 0.5s; z-index: 100; border-top: 1px solid #ddd;}
.header .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1;}
.header .mobile-gnb .sidebar-wrap .sidebar {position: absolute; top: 0; right: 0; width: 100%; max-width: 375px; height: calc(100vh - 65px); background-color: #fff; transform: translateX(100%); transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto;}
.header .mobile-gnb .depth-1 > a {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 17px; font-weight: bold; border-bottom: 1px solid #ddd;}
.header .mobile-gnb .depth-1 > a:not(:only-child)::before {content: "▼"; display: block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); font-size: 10px;}
.header .mobile-gnb .depth-1.current > a:not(:only-child)::before {content: '▲';}
.header .mobile-gnb .depth-1 > a > span {position: relative; display: block; line-height: normal;}
/*.header .mobile-gnb .depth-1 > a > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 9px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: #60ccf6;}*/
.header .mobile-gnb .depth-1.current > a > span::before {content: ""; display: block; width:calc(100% + 4px);}
.header .mobile-gnb .gnb-depth-2 {display: none; background-color: #f1f1f1; padding: 10px; text-align: left;}
.header .mobile-gnb .gnb-depth-2:after{content: ""; display: block; clear: both;}
.header .mobile-gnb .depth-2{float: left; width: 50%;}
.header .mobile-gnb .depth-2 > a {position: relative; display: block; padding: 6px 25px; font-size: 15px; color: #111;}
.header .mobile-gnb .depth-2 > a:before{position: absolute; top: 14px; left: 10px; content: ""; display: block; width: 4px; height: 4px; background-color: #333; border-radius: 50%;}
.header .mobile-gnb .depth-2 > a.active {color: #007ea5; font-weight: bold;} /* 현재 페이지 활성화 되어있음을 알리는 active 클래스 */

.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}

html.not-scroll, html.not-scroll body{overflow-y: hidden;}

/* 푸터 */
.f-utill{background-color: #373a42;}
.f-utill>ul{display: flex; align-items: center; height: 45px; flex-wrap: wrap;}
.f-utill li{position: relative; padding-right: 20px; margin-right: 20px;}
.f-utill li:after{position: absolute; top: 8px; right: 0; content: ""; display: block; width: 1px; height: 12px; background-color: #fff;}
.f-utill li:last-child:after{display: none;}
.f-utill li a{color: #fff; font-size: 15px;}
.f-utill li:first-child a{color: #fff726;}

.f-info{padding: 30px 0;}
.f-info>div{display: flex;}
.f-info .logo{width: 270px;}
.f-info .logo a{display: inline-block; width: 211px; height: 67px; background-image: url(../img/main/logo.png); background-repeat: no-repeat; background-size: contain; background-position: center; text-indent: -99999px;}
.f-info ul{flex-grow: 1; font-size: 16px;}
.f-info li:last-child{color: #3265ce;}
.f-info .call{display: flex; justify-content: center; align-items: center; width: 270px; height: 80px; background-color: #1e358c; border-radius: 20px; color: #fff;}
.f-info .call span{padding-top: 8px; font-size: 17px; font-weight: 700;}
.f-info .call p{padding-left: 35px; margin-left: 15px;  font-size: 30px; font-weight: 700;  background-image: url(../img/main/i_call.png); background-repeat: no-repeat; background-position: left top 9px;}



@media screen and (max-width: 1600px) {
    /* 헤더 */
    .header .logo a{margin-left: 20px;}
    .h-utill>div{padding-left: 20px;}
}

@media screen and (max-width: 1240px) {
    /* 헤더 */
    .header .logo a{width: 155px;}
    .header .header-gnb{width: calc(100% - 180px);}
    .header .header-gnb .depth-1 .depth-item .item-title{width: 310px;}
    .header .header-gnb .depth-1 .depth-item .item-title p{margin-top: 10px; font-size: 16px;}
    .header .header-gnb .depth-1 .depth-item .gnb-depth-2{margin-left: 310px;}
    .header .header-gnb .depth-1 > .depth-1-link {font-size: 18px;}
    .header .header-gnb .depth-2 > .depth-2-link {font-size: 15px;}
    
    /* 푸터 */
    .f-info .logo{display: none;}
}

@media screen and (max-width: 1024px) {
    /* 헤더 */
    .header-wrap{padding-bottom: 70px;}
    .h-info li:after{top: 10px; height: 16px;}
    .h-utill>div{height: 40px;}
    .header{top: 40px; width: 100%; overflow: visible;}
    .header .header-inner{height: 70px;}
    .header .header-gnb {display: none;}
    .header .mobile-gnb {display: flex;}
    
    /* 푸터 */
    .f-info>div{flex-wrap: wrap;}
    .f-info ul{width: 100%;}
    .f-info .call{width: auto; height: auto; margin-top: 20px; padding: 15px 20px;}
    .f-info .call p{padding-left: 30px; font-size: 25px; background-size: 23px;}
}

@media screen and (max-width: 991px){
    .header:after{display: none;}
    .pathbox{border-top: 1px solid #ddd;}
}

@media screen and (max-width: 640px) {
    /* 공통 */
    .inner{padding: 0 20px;}
    
    /* 헤더 */
    .header-wrap{padding-bottom: 60px;}
    .h-utill{font-size: 14px;}
    .h-utill>div{height: 35px;}
    .h-info ul{gap: 5px;}
    .h-info li a{padding: 0 15px; font-size: 14px;}
    
    .header{top: 35px;}
    .header .header-inner{height: 60px;}
    .header .logo a{width: 148px; height: 60px; margin-left: 10px;}
    .header .mobile-gnb .sidebar-btn{width: 60px; height: 60px; margin-right: 0;}
    .header .mobile-gnb .sidebar-btn span{left: 13.5px;}
    .header .mobile-gnb .sidebar-btn span:nth-child(1){top: 18px;}
    .header .mobile-gnb .sidebar-btn span:nth-child(2){top: 28px;}
    .header .mobile-gnb .sidebar-btn span:nth-child(3){top: 38px;}
    .header .mobile-gnb.open .sidebar-btn span:nth-child(1), .header .mobile-gnb.open .sidebar-btn span:nth-child(3){top: 28px;}
    .header .mobile-gnb .sidebar-wrap{top: 94px;}
    .header .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
    
    /* 푸터 */
    .f-info{padding: 20px 0;}
    .f-utill{padding: 10px 0;}
    .f-utill>ul{height: auto;}
    .f-utill li{padding-right: 10px; margin-right: 10px;}
    .f-info ul{font-size: 14px;}
    .f-info .call{margin-top: 10px;}
    .f-info .call span{font-size: 16px;}
    
}