@charset "utf-8";
/* ================================================================== */
/* Name	: common_2022.css
/* Author : Design Geulggol
/* Date	: 2022-05-24
/* ================================================================== */

/* ================================================================== */
/*  font-family: NotoSansThin, NotoSansDemiLight, NotoSansLight, NotoSansRegular, NotoSansMedium, NotoSansBold, NotoSansBlack */
/*  font-family: RobotoThin, RobotoThinItalic,  , RobotoLightItalic, RobotoRegular, RobotoMedium, RobotoMediumItalic, RobotoItalic, RobotoBlack, RobotoBlackItalic, RobotoBold, RobotoBoldItalic */
/* ================================================================== */

/* ================================================================== */
/* common */
/* ================================================================== */

figure img {
    max-width:100%;
}

select {
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    appearance: none;         /*Removes default*/
    background: url('/share/images/common/select_icon.png')  no-repeat;
    background-position: center right;
}
select::-ms-expand {
    display: none;
}

.contents_wrap  { height:100%; position:relative; }

.content_container {
    max-width:1200px;
    margin:0 auto;
    padding:0 1em;
}

.content_container_inner {
    max-width:1180px;
    margin:0 auto;
}

/* 한줄 말줄임 */
.text-ellipsis {
    width: 100%;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 여러줄 말줄임 (3줄기준) */
.multi-ellipsis {
    width: 100%;
    height: 3.6em;
    white-space: normal;
    line-height: 120%;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixed {
	position:fixed !important;
}
.absolute {
	position:absolute !important;
}


/* ================================================================== */
/* search_bar */
/* ================================================================== */

div.search-bar  {
    width:100%;
    background:#fff;
    position:fixed;
    top:-200px;
    left:0;
    z-index: 300;
    transition: all 0.4s ease;
}
div.search-bar.open {
    top:0;
    box-shadow: 0 5px 10px rgb(0, 0, 0, 0.3);
}
div.search-bar > div { padding: 30px 20px; }
div.search-bar > div form {
    display:flex;
}

div.search-container                            { width:800px; margin:0 auto; }
div.search-container div                        { border-bottom:1px solid #000; display:inline-block; padding:.5em 0; margin-right:10px; }
div.search-container div.search-btn {
    border:none;
    display: flex;
    align-items: center;
}
div.search-container div.search-btn a {
    color:#000;
    font-family:"RobotoLight";
    font-size:1.6rem;
    background:url('/share/images/common/search_icon.svg') no-repeat top left;
    background-size: 20px;
    padding-left:30px;
}
div.search-container select                     { width:137px; height:27px; }
div.search-container input[type='text']         { width:522px; font-family:"NotoSansLight"; font-size:1.2em; color:#ccc; border:none; }

.search-bg {
    width:100%;
    height:100%;
    background:rgba(0,0,0, 0.5);
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index: 290;
}
.search-bg.open {
    display:block;
}


    /* ================================================================== */
/* header */
/* ================================================================== */

.logo-wrap {
    width:150px;
    padding:0 20px;
    position:absolute;
    top:0;
    left:0;
    z-index: 220;
	transition: all 0.4s ease;
}

/* ================================================================== */
/* Navigation */
/* ================================================================== */
.gnb-wrap {
    padding:70px 20px;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 210;
	transition: all 0.6s ease;
}
.gnb-wrap.w100 {
    width:100%;
}
.gnb-wrap.open {
    background:transparent;
}
.gnb-wrap.open > ul {
    display:none;
}
.gnb-wrap.open .search_btn {
    display:none;
}
.gnb-wrap > ul {
    font-family: 'NanumMyeongjoBold', sans-serif;
    font-size:2rem;
    margin-right:60px;
    display:flex;
}
.gnb-wrap > ul li:first-child {
    margin-right:20px;
}
.gnb-wrap .search_btn {
    margin-right:25px;
    cursor:pointer;
}
.gnb-wrap .search_btn img {
    width:30px;
}
.gnb-wrap .hamburger {
    width:40px;
    cursor:pointer;
    z-index: 300;
}
.gnb-wrap .hamburger::before,
.gnb-wrap .hamburger::after {
    content:'';
    height:2px;
    background:#000;
    display:block;
    transition:all 0.4s ease;
}
.gnb-wrap .hamburger::before {
    margin-bottom:10px;
}
.gnb-wrap .hamburger.open {
    height:40px;
}
.gnb-wrap .hamburger.open::before,
.gnb-wrap .hamburger.open::after {
    background:#fff;
}
.gnb-wrap .hamburger.open::before {
    margin-bottom:0;
    transform: translate(0, 800%) rotate(45deg);
}
.gnb-wrap .hamburger.open::after {
    transform: translate(0, 700%) rotate(-45deg);
}

nav {
    width:400px;
    height:100%;
    background:#282828;
    padding:200px 20px 0 20px;
    position:fixed;
    top:0;
    transition:all 0.4s ease;
    z-index: 200;
}
nav.close {
    right:-400px;
}
nav.open {
    right:0;
}
nav a {
    color:#fff;
}
nav ul[data-depth="1"] > li {
    margin-bottom:50px;
}
nav ul[data-depth="1"] > li:last-child {
    margin-bottom:0;
}
nav ul[data-depth="1"] > li > a {
    font-family: 'NanumMyeongjoBold', sans-serif;
    color:#282828;
    background:#fff;
    padding:5px 10px;
    margin-bottom:10px;
    display:block;
}
nav ul[data-depth="2"] > li {
    font-size:2rem;
    padding-left:2rem;
    margin-bottom:1rem;
}
nav ul[data-depth="2"] > li:last-child {
    margin-bottom:0;
}

/* ================================================================== */
/* footer */
/* ================================================================== */
footer {
    font-size:1.6rem;
    color:#a4a4a4;
    background:#282828;
    padding:65px 20px;
}
footer .footer-inner {
    max-width:1280px;
    margin:0 auto;
}
footer .footer-inner .footer-logo-wrap {
    color:#fff;
    border-bottom:1px solid #545454;
    padding-bottom:35px;
    margin-bottom:35px;
    display:flex;
    align-items: center;
}
footer .footer-inner .footer-logo-wrap a {
    color:#fff;
}
footer .footer-inner .footer-logo-wrap > a > img {
    width:200px;
    margin-right:45px;
}
footer .footer-inner .sns {
    margin-left:auto;
    display:flex;
}
footer .footer-inner .sns li {
    margin-right:30px;
}
footer .footer-inner .sns li:last-child {
    margin-right:0;
}
footer .footer-inner .sns img {
    height:25px;
}
footer .footer-inner .copyright-info {
    display:flex;
    align-items: flex-start;
}
footer .footer-inner .copyright-info p {
    line-height: 160%;
    margin:0;
}
footer .footer-inner .copyright-info  a {
    color:#a4a4a4;
}
footer .footer-inner .copyright-info > a {
    border:1px solid #535353;
    background:url('/share/images/common/footer_arrow.png') no-repeat 90% center;
    padding:10px 20px;
    padding-right:40px;
    margin-left:auto;
    display:inline-block;
}

@media (max-width:900px) {
    .logo-wrap {
        width:100px;
    }
    .gnb-wrap {
        width:100% !important;
        padding:30px 20px;
    }
}

@media (max-width:800px) {
    div.search-container,
    div.search-container div,
    div.search-container select,
    div.search-container input[type='text'] {
        width: 100%;
    }
    div.search-bar > div form {
        display:block;
    }
    div.search-container div {
        margin-right:0;
    }
}
@media (max-width:640px) {
    footer .footer-inner .footer-logo-wrap {
        flex-wrap: wrap;
    }
    footer .footer-inner .sns {
        width:100%;
        margin-top:20px;
    }
    footer .footer-inner .copyright-info {
        display:block;
    }
    footer .footer-inner .copyright-info > a {
        margin-top:10px;
    }
}

@media (max-width:480px) {
    .logo-wrap {
        width:90px;
    }
    .gnb-wrap {
        width:100% !important;
        padding:20px;
    }
    .gnb-wrap > ul {
        display:none;
    }

    footer .footer-inner .footer-logo-wrap {
        display:block;
    }
    footer .footer-inner .footer-logo-wrap > a {
        margin-bottom:20px;
        display:block;
    }
}