/* ======= Header ======= */
/* Main Type */
.header{
    z-index: 10000; position: absolute; top: 0; left: 0;
    padding: 0 15px; width: 100%;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}

.header__inner{
    position: relative;
    margin: auto; max-width: 1100px; width: 100%; height: 90px;
    text-align: center;
}
.header__logo{
    display: block;
    z-index: 10001; position: absolute; top: 28px; left: 0;
    width: 272px; height: 34px;
}
.header__logo a{
    display: block; width: 100%; height: 100%;
    background: url('/child/img/ci.png') no-repeat center;
}

.header__contents{
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}

.header__menu{
    position: absolute; top: 26px; right: 68px;
}
.header-menu-ul { display: flex; }
.header-menu-ul > li { position: relative; }
.header-menu-ul .menu-link{
    display: block; position: relative;
    margin: 0 55px; padding: 5px 5px 19px;
    font-size: 18px; color: #333; font-weight: 300;
}
.header-menu-ul h2 { font-size: inherit; color: inherit; font-weight: inherit; }

.header-menu-ul li.active:before { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #2a8ddc; }

.sub-menu{
    overflow: hidden; position: absolute; top: 50px; left: 50%;
    width: 185px; height: 0; background: #fff;
    border: 1px solid #eee; border-top: 2px solid #ffbb17;
    -webkit-transform: translate(-50%, -5px); transform: translate(-50%, -5px);
    -webkit-transition: ease-out .35s; transition: ease-out .35s;
    opacity: 0; visibility: hidden;
}
/* .sub-menu li { border-bottom: 1px solid #e5e5e5; } */
.sub-menu li:last-child { border-bottom: none; }
.sub-menu li a{
    display: block; position: relative;
    margin: 0; padding: 15px 15px 16px;
    text-align: center; font-size: 16px; color: #333;
}
.sub-menu__edit{
    margin-left: -5px; width: calc(100% + 10px);
}
.sub-menu__edit input { width: 100%; height: 35px; }
.sub-menu__add{
    margin-top: 7px; width: 100%; height: 35px;
    font-size: 14px; color: #fff; font-weight: 500;
    background: #ffbb17;
}
@media (min-width:1025px){
    .header-menu-ul .menu-link:hover {color: #ffbb17;}
    .header-menu-ul .menu-link:hover + .sub-menu,
    .sub-menu:hover{
        height: auto;
        -webkit-transform: translate(-50%, 0px);
        transform: translate(-50%, 0px);
        opacity: 1;
        visibility: visible;
        color: #ffbb17;
    }
    .sub-menu li a:hover{color: #ffbb17;}
}

.sub-menu__delete{
    position: absolute; top: 0; bottom: 0; right: 5px;
    margin: auto; width: 20px; height: 20px;
    border: 2px solid #ffbb17; border-radius: 50%;
}
.sub-menu__delete::before,
.sub-menu__delete::after{
    content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0;
    margin: auto; width: 10px; height: 2px;
    background-color: #ffbb17;
}
.sub-menu__delete::before{
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.sub-menu__delete::after{
    -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}


/* 풀메뉴 */

.header__right{
    position: absolute; top: 30px; right: 0;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.customer-menu { display: flex; align-items: center; }
.customer-menu a { display: block; margin-left: 30px; font-size: 15px; color: #777777; font-weight: 300; }

@media (min-width:1025px){
	.customer-menu a:hover{color: #333333;}
}

.header-fullmenu{
    overflow: hidden; position: absolute; top: 100%; left: 0;
    width: 100%; height: 0;
    background: rgba(255,255,255,.9);
    -webkit-transition: ease-in-out .35s;
    -o-transition: ease-in-out .35s;
    transition: ease-in-out .35s;
    opacity: 0;
    visibility: hidden;
}
.header-fullmenu__inner{
    margin: auto; padding-right: 71px; max-width: 1100px; width: 100%; height: 100%;
    text-align: right; font-size: 0;
}
.header-fullmenu__col { position: relative; display: inline-block; vertical-align: top; padding-top: 15px; height: 100%; }
.header-fullmenu__col:first-child { width: 182px; }
.header-fullmenu__col:nth-child(2) { width: 184px; }
.header-fullmenu__col:nth-child(3) { width: 180px; }
.header-fullmenu__col:nth-child(4) { width: 180px; }
.header-fullmenu__col:nth-child(5) { width: 145px; }
.header-fullmenu__col li a { display: block; padding: 6px 0; width: 100%; text-align: center; font-size: 16px; font-weight: 300; color: #000000; letter-spacing: -0.08em; }
@media (min-width:1025px){
    [data-header-full="on"] .header-fullmenu{
        height: 235px; opacity: 1; visibility: visible;
    }
    [data-header-full="on"] .sub-menu{
        display: none;
    }
    .header-fullmenu__col li a:hover { color: #ffbb17; }

}


/* Burger Maker */
.header-link .burger-button { width: 28px; height: 28px;}
.burger-button {
	display: inline-block; position: relative; width: 100%; height: 100%;
}
.burger-button span {
    position: relative; margin: 0 auto;
}
.burger-button span::before, .burger-button span::after {
	position: absolute;
	content: '';
}
.burger-button span, .burger-button span::before, .burger-button span::after {
	width: 25px;
	height: 3px;
	background-color: #ffbb17;
	display: block;
}
[aria-pressed="true"].burger-button span,
[aria-pressed="true"].burger-button span::before,
[aria-pressed="true"].burger-button span::after{
    background: #ffbb17;
}
.burger-button span::before {
	margin-top: -10px;
}
.burger-button span::after {
	margin-top: 10px;
}
.burger-button--flip[aria-pressed="true"] span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.burger-button--flip span::before {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.burger-button--flip[aria-pressed="true"] span::before {
	margin-top: 0;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.burger-button--flip span::after {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.burger-button--flip[aria-pressed="true"] span::after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}



.mobile-menu { z-index: 10000; display: none; position: absolute; top: 0; right: 0; width: 50px; height: 50px; }
.mobile-menu__button {
	display: inline-block; position: relative; width: 100%; height: 100%;
}
.mobile-menu__button span {
    position: relative; margin: 0 auto;
}
.mobile-menu__button span::before, .mobile-menu__button span::after {
	position: absolute;
	content: '';
}
.mobile-menu__button span, .mobile-menu__button span::before, .mobile-menu__button span::after {
	width: 25px;
	height: 3px;
	background-color: #ffbb17;
	display: block;
}
[aria-pressed="true"].mobile-menu__button span,
[aria-pressed="true"].mobile-menu__button span::before,
[aria-pressed="true"].mobile-menu__button span::after{
    background: #ffbb17;
}
.mobile-menu__button span::before {
	margin-top: -10px;
}
.mobile-menu__button span::after {
	margin-top: 10px;
}
/* .mobile-menu__button--flip span {
	-webkit-transition-duration: 0s; transition-duration: 0s;
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
} */
.mobile-menu__button--flip[aria-pressed="true"] span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.mobile-menu__button--flip span::before {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.mobile-menu__button--flip[aria-pressed="true"] span::before {
	margin-top: 0;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.mobile-menu__button--flip span::after {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.mobile-menu__button--flip[aria-pressed="true"] span::after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}




.m-search { display: none; position: absolute; top: 0; bottom: 0; right: 0; }
.m-search button { width: 50px; height: 50px; background: url('/child/img/search.png') no-repeat center / auto 23px; }




.menu-login { margin: 7px 0; width: 100%; }
.menu-login li { position: relative; }
.menu-login li a { display: inline-block; position: relative; padding: 16px 15px 14px 60px; font-size: 16px; color: #fff; font-weight: 800; }
.login_icon { display: inline-block; vertical-align: middle; position: absolute; top: 0; bottom: 0; left: 15px; margin: auto; width: 30px; height: 30px; background: url('/child/img/icon/icon_profile.png') no-repeat center / 30px; }

.mobile-quick-menu { display: flex; flex-wrap: wrap; padding: 0 15px; }
.mobile-quick-menu li { margin: -1px 0 0 -1px; border: 1px solid #e5e5e5; width: 50%; }
.mobile-quick-menu li a { display: block; padding: 15px 5px; text-align: center; font-size: 13px; }
.mobile-quick-menu li img { margin: 0 auto 5px; width: auto; height: 20px; }

.m-menu-li { border-bottom: 1px solid #e5e5e5; }

.gnb-dimmed { z-index: 9998; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    animation: dimmed linear .3s forwards;
}
@-webkit-keyframes dimmed {
    o% { background: rgba(0,0,0,0); }
    100% { background: rgba(0,0,0,.55); }
}
@keyframes dimmed {
    o% { background: rgba(0,0,0,0); }
    100% { background: rgba(0,0,0,.55); }
}




@media(min-width:1025px){
	.header--center .header__logo { right: 0; margin: auto; }
    .mobile-menu .mobile-menu__button { display: none; }
}
@media (max-width: 1024px){
    .header { position: fixed; top: 0; left: 0; width: 100%; border-bottom: none; background: #fff; }
    .header--center { height: 50px; }
    .header__inner{
        padding: 0; height: 50px;
    }
    .header__logo { 
      top: 0; right: 0; left: 0; bottom: 0; margin: auto; 
      width:200px; height: 50px; 
    }
    .header__logo a { background-size: auto 21px; }
    .header__right { top: 10px; right: 10px; }
    .header-link { justify-content: center; margin-top: 30px; }
    .header-link .button { height: 45px; line-height: 45px; font-size: 18px; }
    .header-link .button span { background-size: auto 39px; }
    .header-global__button { font-size: 16px; }

    [data-header="sticky"] { background: #fff; box-shadow: 0px 2px 10px 0px rgba(0,0,0,.1); }
    [data-header="sticky"] .header__logo a,
    [data-header-mobile="on"] .header__logo a { background-image: url('/child/img/ci.png'); }

    [data-header="sticky"] [aria-pressed="false"].mobile-menu__button span,
    [data-header="sticky"] [aria-pressed="false"].mobile-menu__button span::before,
    [data-header="sticky"] [aria-pressed="false"].mobile-menu__button span::after { background: #ffbb17; }

    .header-link .burger-button { display: none; }
    /* Mobile Menu */
    .mobile-menu { display: block; }
    .header__contents{
        display: flex; flex-direction: column;
        z-index: 10000; overflow-x: hidden; overflow-y: auto; position: fixed; top: 0px; left: 0;
        padding: 50px 15px 0; width: 100%; height: 100%;
        background: #fff; pointer-events: none;
        -webkit-clip-path: circle(10% at 100% -10%); clip-path: circle(10% at 100% -10%);
        -webkit-transition: all .6s ease-out; transition: all .6s ease-out;
        visibility: hidden;
    }
    .header__right { order: 1; position: static; justify-content: center; }
    .header-customer-menu { flex: 1 1; }
    .customer-menu a { font-size: 16px; }
    .header__menu { order: 2; position: static; margin: 15px auto 0; max-width: 350px; width: 100%; text-align: center; }
    .header-menu-ul { flex-direction: column; }
    .header-menu-ul .menu-link { margin: 10px 0; padding: 5px 0; font-size: 20px; color: #333; }
    .sub-menu{
        position: relative; top: 0; left: 0;
        margin: -10px 0 15px; width: auto; max-height: 0; height: auto;
        border: none;
        -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important;
    }
    .sub-menu li { border-bottom: none; }
    .sub-menu li a { padding: 10px 0; text-align: center; font-size: 16px; }
    .menu-toggle[aria-pressed="true"] + .sub-menu{
        opacity: 1; visibility: visible; max-height: 400px;
    }
    .menu-toggle h2 { position: relative; font-weight: 500; }

    [data-header-mobile="on"] .header__contents{
        pointer-events: all;
        -webkit-clip-path: circle(160% at 100% -10%); clip-path: circle(160% at 100% -10%);
        visibility: visible;
    }
    .menu-toggle h2:before, .menu-toggle h2:after{
        content: ''; display: block; position: absolute; top: 50%; right: 30px;
        width: 13px; margin-top: -1px;
        background-color: #333; height: 3px;
        -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
        -webkit-transition: all .3s; transition: all .3s;
    }
    .menu-toggle h2:before {
        z-index: 2;
        -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
        opacity: 1;
    }
    .menu-toggle[aria-pressed="true"] h2:before {
        background: #333 !important;
        -webkit-transform: rotate(0deg); transform: rotate(0deg);
    }
    .menu-toggle[aria-pressed="true"] h2:after {
        opacity: 0;
        background: #333 !important;
        -webkit-transform: rotate(180deg); transform: rotate(180deg);
    }

    .sub-menu__edit { padding: 0; }
    .sub-menu__edit input { margin-right: 15px; }
}
@media (max-width: 768px){
}





/* Footer */
.footer { padding: 40px 0 80px; background: #f8f8f8; border-top: 1px solid #e5e5e5; }
.footer__inner{
    position: relative;
    margin: auto; max-width: 1100px; width: 100%;
}
.footer-logo { display: block; margin-right: 40px; width: 320px; height: 40px; background: url('/child/img/footer-logo.png') no-repeat center; }

.footer-info ul{ display: flex; margin-left: -8px; margin-right: -8px; margin-bottom: 5px; }
.footer-info ul::after { content: ''; display: block; clear: both; }
.footer-info li { float: left; margin: 6px 8px; line-height: 1; font-size: 16px; color: #999; }
.footer-info ul.footer-link li { color: #555; }
.footer-copyright { line-height: 1; font-size: 16px; font-weight: 300; color: #c7c7c7; }
@media (min-width:1025px){
    .footer-wrap { display: flex; }
}
@media (max-width: 1200px){
    .footer { padding: 30px 10px 50px; }
    .footer__inner { padding: 0 15px; }
    .footer-logo { display: none; }
    .footer-info ul { flex-flow: wrap; }
    .footer-info li { margin: 3px 8px; line-height: 1.4; }
    .footer-info li a { font-size: 15px; }
    .footer-info li:first-child span { font-size: 15px; }
    .footer-info li:nth-child(2) { clear: both; }
    .footer-info li span { font-size: 15px; }
    .footer-copyright { font-size: 15px; }
}
@media (max-width: 768px){
}