@charset "utf-8";

/*
 * File       : header.css
 * Author     : SMART GEO
 * Guideline  : -
 * Update : 2021-11-26
 *
 * Dependency : 헤더레이아웃 스타일
 *
 * SUMMARY:
 * 01) 전역 스타일
 * 02) 기본 스타일
 * 03) 햄버거 등 기타 스타일
 * 04) 청맥 알리미 스타일
 */

/* **************************************** *
 * 01) 전역 스타일
 * **************************************** */
#wrap, #container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#contents{
    padding-bottom: 40px;
    position: relative;
}

.title_wrap {
    position: relative;
    padding-top: 120px;
}

.page_view_top_image {
    background-color: #DFE0DF;
    position: relative;
    margin-bottom: -80px;
}

/* **************************************** *
 * 02) 기본 스타일
 * **************************************** */
#header { z-index: 10000; width: 100%; height: 75px; position: fixed; top: 0; left: 0; }
.header_inner { font-family: 'Noto Sans KR', sans-serif; position: relative; }
#header #logo { position: absolute; top: 50%; left: 90px; transform: translate(0, -50%); z-index: 551; }
#header #logo a { display: inline-block; }
#header #logo a img { width: 168px; display: none; }
#header #logo a img.logo { display: block; }
#header #logo a img.logo_w { display: none; }
#header .menu_container { display: block; width: 100%; position: relative; font-size: 0; line-height: 1; text-align: center; z-index: 550; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
#header .menu_container_bg { position: absolute; top: 75px; left: 0; right: 0; bottom: 0; background: rgba(243, 243, 243, 0.9); opacity: 0; }
#header #menu { display: inline-block; vertical-align: top; }
#header #menu:after { content: ''; display: table; clear: both; }
#header #menu a { display: block; line-height: 1.7; }
/* 1depth */
#header #menu > li { display: inline-block; vertical-align: top; position: relative; }
#header #menu > li > a { padding: 22.5px 30px; color: #000000; font-size: 18px; line-height: 1.7; text-align: center; letter-spacing: -0.02em; }
#header #menu > li > a:hover { color: #F26F3D; }
#header #menu-item-1:hover > ul, #header #menu-item-2:hover > ul, #header #menu-item-3:hover > ul, #header #menu-item-4:hover > ul, #header #menu-item-5:hover > ul, #header #menu-item-6:hover > ul { background-color: #ffffff }
#header #menu > li > a > span { position: relative; }
#header #menu > li:hover > a > span::before { width: 100%; transition: all .3s; }
#header #menu > li:hover > a, #menu > li.current-page-ancestor > a { color: #F26F3D; font-weight: bold; }
/* 2depth */
#header #menu > li > ul { display: none; width: 100%; position: absolute; margin-top: -1px; }
#header #menu > li:last-child ul { border-right: 0; }
#header #menu > li > ul > li { display: block; }
#header #menu > li > ul > li > a { padding: 6.5px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: normal; font-size: 18px; line-height: 1.7; text-align: center; letter-spacing: -0.02em; color: #4F4F4F; }
#header #menu > li > ul > li > a:hover > #menu > li > a { color: #F26F3D; font-weight: bold; }
#header #menu > li > ul > li:first-child > a { padding-top: 24.5px; }
#header #menu > li > ul > li:last-child > a { padding-bottom: 36.5px; }
#header #menu > li > ul > li:hover > a, #menu > li > ul > li.current-menu-item > a, #menu > li > ul > li.current-page-ancestor > a { color: #F26F3D; font-weight: bold; }
#header div.header_wrap div.header_inner .user_area { position: absolute; top: 0; right: 100px; z-index: 551; }
#header div.header_wrap div.header_inner .user_area ul a li { position: relative; float: left; line-height: 75px; color: #414144; }
#header div.header_wrap div.header_inner .user_area ul a li{ font-family: 'Noto Sans KR'; font-style: normal; font-weight: normal; font-size: 15px; line-height: 75px; text-align: center; letter-spacing: -0.02em; padding-left: 50px; }
#header div.header_wrap div.header_inner .user_area ul a img { position: relative; right: 6px; }
#header div.header_wrap div.header_inner .user_area ul a.review img { width: 18px; }
#header div.header_wrap div.header_inner .user_area ul a.gallery img { width: 16px }
#header div.header_wrap div.header_inner .user_area ul a.mypage img { width: 12px }
#header div.header_wrap div.header_inner .user_area ul a.login img { width: 13px }

#header div.header_wrap div.header_inner .user_area ul a:hover li { font-weight: bold; }

/* mobile */
#small_menu_btn, #small_menu_overlay, #small_menu_container { display: none; }

/* scroll hide menu error debugging */
body.search_open #header, body.open_menu #header {-webkit-transform: none !important;-ms-transform: none !important;transform: none !important;}

/* S ---- add transparent ---- */
#header.transparent .menu_container { background-color: transparent; box-shadow: unset; }
#header.transparent #logo a img.logo { display: none; }
#header.transparent #logo a img.logo_w { display: block; }
#header.transparent #menu > li > a { color: #ffffff; }
#header.transparent div.header_wrap div.header_inner .user_area ul a li { color: #ffffff; }
/* E ---- add transparent ---- */

/* S ---- add transparent + hover ---- */
#header.transparent:hover #logo a img.logo { display: block; }
#header.transparent:hover #logo a img.logo_w { display: none; }
#header.transparent:hover .menu_container { background-color: #ffffff; }
#header.transparent:hover #menu > li > a { color: #000000; }
#header.transparent #menu > li:hover > a, #menu > li.current-page-ancestor > a { color: #F26F3D; font-weight: bold; }
#header.transparent:hover div.header_wrap div.header_inner .user_area ul a li { color: #000000; }
/* E ---- add transparent + hover ---- */

/* S ---- add transparent (type2) ---- */
#header.transparent.type2 .menu_container { background-color: transparent; box-shadow: unset; }
#header.transparent.type2 .menu_container_bg { background: transparent;}
#header.transparent.type2 #logo a img.logo { display: block; }
#header.transparent.type2 #logo a img.logo_w { display: none; }
#header.transparent.type2 #menu > li > a { color: #000000; }
#header.transparent.type2 #menu-item-1:hover > ul, #header.transparent.type2 #menu-item-2:hover > ul,
#header.transparent.type2 #menu-item-3:hover > ul, #header.transparent.type2 #menu-item-4:hover > ul,
#header.transparent.type2 #menu-item-5:hover > ul, #header.transparent.type2 #menu-item-6:hover > ul { background-color: transparent }
#header.transparent.type2 div.header_wrap div.header_inner .user_area ul a li { color: #000000; }
/* E ---- add transparent (type2) ---- */

@media (max-width: 1760px) {
    #header div.header_wrap div.header_inner .user_area ul a li { font-size: 14px; padding-left: 28px; }
}

@media (max-width: 1600px) {
    #header #menu { margin-left: -80px; font-size: 15px; }
    #header #menu > li > a { padding: 23.5px 20px; font-size: 17px; }
    #header #header div.header_wrap div.header_inner .user_area ul a li { font-size: 13px; }
}

@media (max-width: 1400px) {
    #header .menu_container_bg { background-size: 270px auto; }
}

@media (max-width: 1280px) {
    #header { height: 80px; }
    #header .header_wrap:before { left: 20px; right: 20px; }
    #header div.header_wrap div.header_inner .user_area ul a li { line-height: 80px; font-size: 12px; }
    #header #logo { width: 136px; }
    #header #menu > li > a { padding: 27.5px 15px; font-size: 15px; }
    #header #menu > li > ul > li > a { padding: 6.5px 12px; font-size: 13px; }
    #header #menu > li > ul > li:first-child > a { padding-top: 19.5px; }
    #header #menu > li > ul > li:last-child > a { padding-bottom: 26.5px; }
    #header .menu_container_bg { top: 80px; background-size: 290px auto; }
}

/* 1140px */
@media (max-width: 1140px) {
    #header { height: 70px; top: 0; box-shadow:unset; }
    #header .header_wrap { padding-left: 0; padding-right: 0; }
    #header .header_wrap:before { display: none; }
    #header .header_inner { background-color: #ffffff; height: 70px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);}
    #header div.header_wrap div.header_inner .user_area { display: none; }
    #header #logo { left: 50%; transform: translate(-50%, -50%); }
    #header .menu_container, .menu_container_bg { display: none; }
    #header #small_menu_btn { display: block; width: 25px; height: 25px; position: absolute; top: 22px; right: 20px; z-index: 550; cursor: pointer; transition: top 300ms; }
    #header #small_menu_btn i { font-size: 28px; font-weight: lighter; color: #414144; }
    #header #small_menu_btn button { display: block; width: 100%; text-indent: -9999px; border: none; background: none; }
    #header #small_sns_btn { display: block; width: 26px; height: 26px; position: absolute; top: 22px; left: 20px; z-index: 550; cursor: pointer; transition: top 300ms; background: url("https://cheongmac.blob.core.windows.net/btn/btn_header_mobile_sns_btn.svg") no-repeat center center/cover; }
    #header .small_menu_container { display: none; width: 100%; height: 100%; margin: 0; padding: 50px 20px 60px; position: fixed; top: 0; left: inherit; right: 0; z-index: 650; background: #F4F4F3; }
    #header .small_menu_container_inner { width: 100%; height: calc(100% - 45px); position: relative; overflow: hidden; }
    #header .small_menu_container_inner .user_area { width: 100%; height: 50px; display: inline-block; margin-top: 30px; }
    #header .small_menu_container_inner .user_area h1 { text-align: center; margin-bottom: 20px; }
    #header .small_menu_nav { width: 100%; height: 100%; position: relative; background-color: #ffffff; border-top: 1px solid #eee; border-radius: 12px 12px 0 0; padding: 0 10px; }
    #header .menu_type { text-align: center; }
    #header .menu_type div { height: 40px; line-height: 50px; margin-bottom: 20px; display: inline-block; font-size: 16px; color: #000000; border-top: 2px solid transparent; }
    #header .menu_type div.defalut { font-weight: bold; color: #E57C3F; border-top: 2px solid #E57C3F; margin-right: 10%; }
    .menu_type div:hover, .menu_type div:focus { font-weight: bold; color: #E57C3F; border-top: 2px solid #E57C3F; }
    #header #small_menu { position: relative; left: 0; right: 0; top: 0; bottom: -1px; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; }
    #header #small_menu > li { display: block; margin: 0 16px; }
    #header #small_menu > li > a { display: block; width: 100%; padding: 16px 0; padding-left: 30px; position: relative; font-size: 15px; line-height: 1.38; font-weight: 600; color: #444444; border-bottom: 1px solid #eee; }
    #header #small_menu > li > a:after { position: absolute; top: 50%; right: 4px; transform: translate(-50%, -50%); font-family: xeicon !important; content: "\e93f"; font-size: 15px; font-weight: normal; color: #414144; }
    #header #small_menu > li > a:hover, #small_menu > li > a:focus { color: #E57C3F; font-weight: bold; }
    #header #small_menu > li.current-page-ancestor > a { color: #1c9ad6; }
    #header #small_menu li a::before { position: absolute; top: 50%; left: 5px; transform: translate(0%, -50%); content: ''; width: 20px; height: 20px; background: url("https://cheongmac.blob.core.windows.net/common/ic_header_mobile_menu.svg") no-repeat center center; background-size: 120px 40px; }
    #header #small_menu li:nth-child(1) a::before { background-position: 0 0; }
    #header #small_menu li:nth-child(2) a::before { background-position: -20px 0; }
    #header #small_menu li:nth-child(3) a::before { background-position: -40px 0; }
    #header #small_menu li:nth-child(4) a::before { background-position: -60px 0; }
    #header #small_menu li:nth-child(5) a::before { background-position: -80px 0; }
    #header #small_menu li:nth-child(6) a::before { background-position: -100px 0; }
    #header #small_menu > li:nth-child(1) > a:hover::before, #small_menu > li:nth-child(1) > a:focus::before { background-position: 0 -20px; }
    #header #small_menu > li:nth-child(2) > a:hover::before, #small_menu > li:nth-child(2) > a:focus::before { background-position: -20px -20px; }
    #header #small_menu > li:nth-child(3) > a:hover::before, #small_menu > li:nth-child(3) > a:focus::before { background-position: -40px -20px; }
    #header #small_menu > li:nth-child(4) > a:hover::before, #small_menu > li:nth-child(4) > a:focus::before { background-position: -60px -20px; }
    #header #small_menu > li:nth-child(5) > a:hover::before, #small_menu > li:nth-child(5) > a:focus::before { background-position: -80px -20px; }
    #header #small_menu > li:nth-child(6) > a:hover::before, #small_menu > li:nth-child(6) > a:focus::before { background-position: -100px -20px; }
    #header .single-notice #small_menu > li.menu-item-promote > a, .single-career #small_menu > li.menu-item-career > a, .single-inquiry #small_menu > li.menu-item-career > a { color: #E17C4D; }
    #header .small_depth_menu_nav { width: 30%; height: 100%; position: absolute; top: 131px; right: -30%; background: #f6f6f6; }
    #header #small_depth_menu { width: 100%; height: 100%; position: relative; overflow: hidden; }
    #header #small_depth_menu > li { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; -ms-overflow-style: none; }
    #header #small_depth_menu .sub-menu { display: block; width: 100%; padding: 0 20px; border-left: 2px solid #E57C3F; }
    #header #small_depth_menu .sub-menu > li { display: inline-block; width: 100%; padding: 5px 25px; text-align: left; }
    #header #small_depth_menu .sub-menu > li > a { display: block; padding: 16px 0; line-height: 1.38; border-bottom: 1px solid transparent; font-size: 15px; font-weight: 600; color: #000000; }
    #header #small_depth_menu .sub-menu > li > a:hover, #header #small_depth_menu .sub-menu > li > a:focus { color: #E57C3F; font-weight: bold; }
    #header #small_depth_menu .sub-menu > li.current-menu-item > a, #small_depth_menu .sub-menu > li.current-page-ancestor > a { color: #1c9ad6; }
    #header .single-notice #small_depth_menu .sub-menu > li.menu-item-news > a, .single-career #small_depth_menu .sub-menu > li.menu-item-employment > a, #header .single-inquiry #small_depth_menu .sub-menu > li.menu-item-career-inquiry > a { color: #1c9ad6; }
    #header #small_menu_overlay { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #000000; background: rgba(0, 0, 0, .8); z-index: 600; }
    #header #small_menu_close { position: relative; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 45px; background: linear-gradient(to top, #E38151 0%, #F2AB74 100%); border-radius: 25px; color: #ffffff; font-size: 16px; font-weight: bold; }
    #header #small_menu_close i { position: relative; top: 2px; margin-right: 5px; }
    #header #small_menu_close:hover, #header #small_menu_close:focus { background: linear-gradient(to bottom, #E38151 0%, #F2AB74 100%); }
    #header .type_divistion { color: #444; }
    #header.transparent { box-shadow: unset; }
    #header.transparent .header_inner { background-color: rgba(65,65,68,0.2); height: 70px; }
    #header.transparent:hover #logo a img.logo_w { display: block; }
    #header.transparent:hover #logo a img.logo { display: none; }
    #header.transparent #small_sns_btn { background: url("https://cheongmac.blob.core.windows.net/btn/btn_header_mobile_sns_btn_w.svg") no-repeat center center/cover; }
}

/* 480px */
@media (max-width: 480px) {
    #header .small_menu_container { width: 100%; padding-top: 60px; }
    #header .small_depth_menu_nav { width: 55%; right: -55%; }
}

/* 345px */
@media (max-width: 345px) {
    #header #small_menu > li { margin: 0 6px; }
    #header #small_menu > li > a { font-size: 12px; }
    #header #small_depth_menu .sub-menu > li > a { font-size: 12px; }
    #header .small_depth_menu_nav { width: 50%; right: -50%; }
}

/* **************************************** *
 * 03) 햄버거 등 기타 스타일
 * **************************************** */
#header .xi-bars:before { content: ""; position: absolute; width: 25px; height: 25px; background: url('https://cheongmac.blob.core.windows.net/btn/btn_header_hambuger.svg') center center/cover no-repeat; }
#header.transparent .xi-bars:before { content: ""; position: absolute; width: 25px; height: 25px; background: url('https://cheongmac.blob.core.windows.net/btn/btn_header_hambuger_w.svg') center center/cover no-repeat; }
#header .xi-close:before { content: ''; position: absolute; width: 10px; height: 10px; top: -12px; left: -10px; background: url('https://cheongmac.blob.core.windows.net/btn/btn_header_close.svg') center center/cover no-repeat; }

@media (max-width: 1140px){
    #header .small_menu_container { background: #f9f9f9; padding: 30px 0 0 0; }
    #header .small_menu_container_inner { background: #f9f9f9; }
    #header .small_menu_nav{ border: 0; padding: 0; background: #f9f9f9; }
    #header .menu_type { background:#f9f9f9; padding: 20px; height: 90px; text-align: center; }
    #header .menu_type > a { display: inline-block; padding-left: 0; position: relative; font-size: 15px; line-height: 1.38; font-weight: 600; color: #444444; }
    #header .small_depth_menu_nav.open { width: 50%; height: calc( 100% - 140px ); position: absolute; top: 170px; left: 100%; right: 0; background: #f4f4f4; border-top-right-radius: 32px; }
    #header #small_menu { border-top-left-radius: 32px; border-top-right-radius: 32px; filter: drop-shadow(0 -10px 15px rgba(0,0,0,0.1)); height: calc( 100% - 170px); background: white; }
    #header #small_menu > li > a { width:100px; }
    #header #small_menu li a::before { position: absolute; top: 50%; left: 5px; transform: translate(0%, -50%); content: ''; width: 20px; height: 20px; background: url('https://cheongmac.blob.core.windows.net/common/ic_header_mobile_menu.svg') no-repeat center center; background-size: 120px 40px; }
    #header #small_depth_menu .sub-menu { padding: 0; border:0; }
    #header #small_menu > li { width:50%; margin: 0; padding: 5px 25px; text-align: center; }
    #header #small_menu > li.open { background-color:#f4f4f4; }
    #header #small_menu > li > a { display: inline-block; }
    #header #small_menu_close { position: relative; left: 50%; transform: translate(-50%); width: 100%; height: 45px; background: #E57C3F; border-radius: 0; color: #ffffff; font-size: 16px; font-weight: bold; }
    #header #small_menu > li:hover > a, #header #small_menu > li:focus > a { color: #E57C3F; }
    #header #small_menu > li.active > a { color: #E57C3F; }
    #header #small_menu_close:hover, #header #small_menu_close:focus { color: #E57C3F; background: #ffffff; }
    #header #small_menu > li > a { border: 0; }
    #header #small_menu > li > a:after { display : none; }
    #header #small_menu > li:nth-child(1):hover > a::before, #header #small_menu > li:nth-child(1):focus > a::before{ background-position: 0 -20px; }
    #header #small_menu > li:nth-child(1).active > a::before { background-position: 0 -20px; }
    #header #small_menu > li:nth-child(2):hover > a::before, #header #small_menu > li:nth-child(2):focus > a::before { background-position: -20px -20px; }
    #header #small_menu > li:nth-child(3):hover > a::before, #header #small_menu > li:nth-child(3):focus > a::before { background-position: -40px -20px; }
    #header #small_menu > li:nth-child(4):hover > a::before, #header #small_menu > li:nth-child(4):focus > a::before { background-position: -60px -20px; }
    #header #small_menu > li:nth-child(5):hover > a::before, #header #small_menu > li:nth-child(5):focus > a::before { background-position: -80px -20px; }
    #header #small_menu > li:nth-child(6):hover > a::before, #header #small_menu > li:nth-child(6):focus > a::before { background-position: -100px -20px; }
}

@media (max-width: 1080px) {
    #header #small_menu > li { text-align: left; padding: 5px 36px; }
    #header #small_menu > li:nth-child(1) { padding-top: 24px; }
    #header #small_depth_menu .sub-menu > li:nth-child(1) { padding-top: 24px; }
}

@media (max-width: 480px){
    #header #small_menu > li { text-align: center; }
    #header .small_menu_container { padding: 0; }
    #header #small_menu::before { display: none; }
}

/* **************************************** *
 * 04) 청맥 알리미 스타일
 * **************************************** */
#header .navi > a span:after{
    content:'';
    display: inline-block;
    width: 13px;
    height: 12px;
    background: url('https://cheongmac.blob.core.windows.net/common/ic_header_navi.png') center center/cover no-repeat;
    position: absolute;
    top: 0px;
    right: -14px;
}
#header:hover .navi > a span:after{
    display: none;
}
#header:hover .navi .point > a span:after{
    content:'';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #ff0000;
    border-radius: 100%;
    position: absolute;
    top: 41px;
    right: 24px;
}
#header:hover .navi .one > a span:after{
    top: 36px;
}
#header:hover .navi .two > a span:after{
    top: 80px;
}
#header:hover .navi .three > a span:after{
    top: 124px;
}
#header:hover .navi .four > a span:after{
    top: 168px;
}

@media screen and (max-width: 1600px){
    #header:hover .navi .point > a span:after{
        right: 14px;
    }
}

@media screen and (max-width: 1280px){
    #header:hover .navi .point > a span:after{
        right: 16px;
    }
    #header:hover .navi .one > a span:after{
        top: 28px;
    }
    #header:hover .navi .two > a span:after{
        top: 62px;
    }
    #header:hover .navi .three > a span:after{
        top: 98px;
    }
    #header:hover .navi .four > a span:after{
        top: 134px;
    }
}

@media screen and (max-width: 1140px) {
    #header #small_menu_btn.navi:after{
        content:'';
        display: inline-block;
        width: 13px;
        height: 12px;
        background: url('https://cheongmac.blob.core.windows.net/common/ic_header_navi.png') center center/cover no-repeat;
        position: absolute;
        top: -4px;
        right: -8px;
    }
    #header:hover .navi > a span:after{
        display: inline-block;
    }
    #header .navi > a span:after{
        content:'';
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #ff0000;
        border-radius: 100%;
        position: absolute;
        top: 22px;
        right: -10px;
    }
    #header .navi.open > a span:before,
    #header:hover .navi.open > a span:before{
        display: none;
    }
    #header .navi.open > a span,
    #header:hover .navi.open > a span{
        animation-name: none;
    }
    #header:hover .point > a span:after,
    #header .point > a span:after{
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #ff0000;
        border-radius: 100%;
        position: relative;
        top: -2px;
        right: -6px;
    }
}