/* ======= Header ======= */
.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;
    border-bottom: 1px solid rgba(255,255,255,.5);
}

.header__inner{
    position: relative;
    margin: auto; max-width: 1440px; width: 100%; height: 86px;
    text-align: center;
}


.header__logo{
    display: block;
    z-index: 10001; position: absolute; top: 30px; left: 0;
    width: 352px; height: 42px;
}
.header__logo a{
    display: block; width: 100%; height: 100%;
    background: url('/child/img/ci-white.png') no-repeat center;
}

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

.header__menu{
    position: absolute; top: 43px; right: 0;
}
.header-menu-ul { display: flex; }
.header-menu-ul > li { position: relative; }

.header-menu-ul .menu-link{
    display: block; position: relative;
    margin: 0 100px; padding: 5px 5px 15px;
    font-size: 24px; color: #fff; font-weight: 800;
}
.header-menu-ul h2 { font-size: inherit; color: inherit; font-weight: inherit; cursor: pointer;}

.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: 49px; left: 50%; padding-top: 20px;
    width: 100%; height: 0; background: rgba(255,255,255,.6);
    -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: 10px 0px 11px 110px;
    text-align: left; font-size: 18px; font-weight: 700;color: #555;
}
.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: #3399d6;
}

.sub-menu__delete{
    position: absolute; top: 0; bottom: 0; right: 5px;
    margin: auto; width: 20px; height: 20px;
    border: 2px solid #ff2f25; 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: #ff2f25;
}
.sub-menu__delete::before{
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.sub-menu__delete::after{
    -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}

.header-fullmenu{
    overflow: hidden; z-index: 10001; position: absolute; top: 100%; left: 0;
    padding: 0 15px; width: 100%; height: 0;
    background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
    -webkit-transition: ease-in-out .35s; transition: ease-in-out .35s;
    opacity: 0;
    visibility: hidden;
}
.header-fullmenu__inner{
    margin: auto; padding-left: 90px; max-width: 1230px; width: 100%; height: 100%;
    text-align: center; font-size: 0;
}
.header-fullmenu__col { position: relative; display: inline-block; vertical-align: top; padding-top: 18px; height: 100%; border-right: 1px solid #ddd; }
.header-fullmenu__col:first-child { width: 190px; border-left: 1px solid #ddd; }
.header-fullmenu__col:nth-child(2) { width: 145px; }
.header-fullmenu__col:nth-child(3) { width: 180px; }
.header-fullmenu__col li a { display: block; padding: 8px 0; width: 100%; text-align: center; font-size: 14px; }


@media (max-width:1330px){
    .header-menu-ul .menu-link{
        display: block; position: relative;
        margin: 0 60px;}
}
@media (min-width:1025px){
    /* [data-header-full="on"] .header-fullmenu{
        height: 360px; opacity: 1; visibility: visible;
    }
    [data-header-full="on"] .sub-menu{
        display: none;
    } */
    .header-menu-ul .menu-link:hover{
        color: #d1e2f5;
    }
	.sub-menu__add:hover{
        background: #388cea;
    }

    .header__menu:hover .sub-menu,
    .menu-link:hover + .sub-menu,
    .sub-menu:hover { height: 240px; opacity: 1; visibility: visible; }
    .header-fullmenu__col:hover::before { content: ''; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: 0; border-top: 2px solid #3399d6; }
    .header-fullmenu__col li a:hover { color: #3399d6; font-weight: 700; }
}



/* Burger Maker */
.mobile-menu { z-index: 10002; 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: #3399d6;
	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: #3399d6;
}
.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; }



.header__right{
    position: absolute; top: 43px; right: 0;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}


.customer-menu { display: flex; justify-content: flex-end; align-items: center; margin-top: 14px; }
.customer-menu li { position: relative; padding: 0 10px; }
.customer-menu li:first-child::after { content: ''; position: absolute; display: block; top: 1px; right: 0; width: 1px; height: 80%; background: #fff; }
.customer-menu li a { display: block; color: #fff; font-size: 14px; }

@media (min-width:1025px){
	.customer-menu a:hover{
        opacity: .7;
    }
}




.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; }
}
@media (max-width: 1024px){
    .header { position: fixed; top: 0; left: 0; width: 100%; border-bottom: none; }
    .header--center { height: 50px; }
    .header__inner{
        padding: 0; height: 50px;
    }
    .header__logo { top: 0; right: 0; left: 0; bottom: 0; margin: auto; height: 50px; }
    .header__logo a { background: url('/child/img/ci.png') center no-repeat; 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: #3399d6; }

    /* 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 { justify-content: center;  }
    .customer-menu li a { font-size: 17px; font-weight: 700; color: #3399d6; }
    .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: 5px 0; padding: 0px 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; text-align: left; padding: 15px 0; border-bottom: 1px solid #ddd; }

    [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: 0px;
        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 { overflow-x: hidden; width: 100%; }
footer .container { max-width: 1230px;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
.footer-wrap { position: relative; display: flex; justify-content: space-between; padding: 50px 0 60px; border-top: 3px solid #444444; }

.footer-l { display: flex; }
.footer-logo { display: block; width: 100px; height: 100px; background: url('/child/img/footer_logo.png') no-repeat center; }
.footer-text { margin-left: 70px; }

.footer-text ul { margin-bottom: 15px; }
.footer-text ul::after { content: ''; display: block; clear: both; }
.footer-text ul.list li { position: relative; padding: 0 15px; float: left; line-height: 1.5; }
.footer-text ul.list li:first-child { float: none;}
.footer-text ul.list li:first-child:after {content: none;}
.footer-text ul.list li:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 1px; height: 15px; background: rgba(0,0,0,.3); }
.footer-text ul.list li:last-child:after { content: none; }
.footer-text ul.list li a { font-size: 17px; color: #555555; cursor: text; }
.pt-list li { position: relative; padding: 0 15px; float: left; }
.pt-list li:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 2px; height: 15px; background: #666!important; }
.pt-list li:last-child:after { content: none; }
.pt-list li a { font-size: 17px; font-weight: 700; color: #333; }
.copyright { margin-top: 7px; padding: 0 15px; font-size: 15px; font-weight: 500; color: #aaaaaa; }

.footer-r { display: flex; }
.f-sns-ul { display: flex; margin-left: 30px; }
.f-sns { margin-right: 10px; }
.f-sns:last-child { margin-right: 0; }
.f-sns a { display: block; -webkit-transition: all ease-in-out .2s; transition: all ease-in-out .2s;}
.f-sns a:hover { opacity: .7; }
.f-sns a i { display: block; width: 40px; height: 40px; }
.f-s1 { background-image: url('/child/img/icon/sns-insta.png'); background-repeat: no-repeat; background-position: center; }
.f-s2 { background-image: url('/child/img/icon/sns-twitter.png'); background-repeat: no-repeat; background-position: center; }
.f-s3 { background-image: url('/child/img/icon/sns-nblog.png'); background-repeat: no-repeat; background-position: center; }

@media (max-width: 1024px){
    .footer-l { display: block; }
    .footer-logo { display: none; }
    .footer-text { margin: 0; }
}
@media (max-width: 768px){
    .footer-wrap { display: block; padding: 25px 0 30px; }
    .footer-r  { margin-top: 20px; padding: 15px; }
    .pt-list li a,
    .footer-text ul.list li a { font-size: 15px; }

}
@media (max-width: 550px){
}