/* ======= Header ======= */

/* Main Type */

header { position: absolute; z-index: 10000; top: 0; left:0; width: 100%; background: rgba(0,0,0,.03); border-bottom: 1px solid rgba(255,255,255,.2); }

.header-shop-top { background: #f4f4f4; border-bottom: 1px solid #e5e5e5; }
.customer-menu { position: absolute; top: 0; bottom: 0; right: 0; height: 36px; margin-top: 28px; padding: 0px 14px; border: 1px solid #fff; border-radius: 20px; }
.customer-menu:after { content: ''; display: block; clear: both; }
.customer-menu ul { display: flex; }
.customer-menu li { position: relative; }
.customer-menu li a { display: block; padding: 5px 8px 7px; text-align: center; color: #f5f5f5; font-size: 16px; }
.customer-menu li a:hover { color: #333; }
.customer-menu li:first-child a { padding-left: 0; }
.customer-menu li:last-child a { padding-right: 0; border-right: none; }
.customer-menu li:last-child a:before { content: '';position: absolute; display: inline-block; top: 12px; left: 0; width: 1px; height: 12px; background: #fff; }
.customer-menu li.on a { color: #fff; font-weight: 600; }

#header-logo { position: absolute; top: 18px; left: 40px; margin: auto; width: 195px; height: 43px; }
.logo { display: block; position: absolute; top: 0; left: 0; right:0; bottom: 0; margin: auto 0; width: 125px; height: 42px; }
.logo a { display: block; width: 100%; height: 100%; background: url('/child/img/ci-eng-white.png') no-repeat center; }

.ci { display: block; width: 100%; height: 100%; }
.ci span { display: block; width: 100%; height: 100%; background: url('/child/img/ci-eng.png') no-repeat center; }

/* GNB */

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

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

.header__menu{
    position: absolute; top: 25px; right: 120px;
}
.header-menu-ul { display: flex; }
.header-menu-ul > li { position: relative; }
.header-menu-ul .menu-link{
    display: block; position: relative;
    margin: 0 15px; padding: 5px 5px 15px;
    font-size: 20px; color: #fff; font-weight: 600;
}
.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 #4c6ce4;
    -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: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: #4c6ce4;
}
@media (min-width:1025px){
    header:hover { background: #fff; -webkit-transition: all ease-in-out .35s; transition: all ease-in-out .35s;  }
    header:hover .logo a { background: url('/child/img/ci-eng.png') no-repeat center; }
    header:hover .header-menu-ul h2 { color: #555; }
    header:hover .customer-menu { border-color: #ddd; }
    header:hover .customer-menu li a { color: #bbb; }
    header:hover .customer-menu li.on a  { color: #333; }
    header:hover .customer-menu li a:hover { color: #333; }
    header:hover .customer-menu li:last-child a:before { background: #ddd; }

    .menu-link:hover + .sub-menu,
    .sub-menu:hover { height: auto; 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 #4c6ce4; }
    .header-fullmenu__col li a:hover { color: #4c6ce4; font-weight: 700; }

}


/* Burger Maker */
.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: #ffffff;
	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: #4c6ce4;
}
.mobile-menu__button span::before {
	margin-top: -10px;
}
.mobile-menu__button span::after {
	margin-top: 10px;
}

.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-search { float: right; margin-top: 7px; }
#hsearch-wrap { position: relative; padding-right: 40px; width: 200px; height: 40px; }
#hsearch-btn { position: absolute; top: 0; right: 0; width: 40px; height: 40px; }
#hsearch-area { width: 100%; height: 100%; }
#hsearch-area input { padding: 0 5px; width: 100%; height: 100%; font-size: 15px; border: none; color: #333; }
#hsearch-area input::placeholder { color: #999999; }
#hsearch-area input:-ms-input-placeholder { color: #999999 !important; }
#hsearch-area input::-ms-input-placeholder { color: #999999 !important; }
#hsearch-btn .btn-search span { display: block; margin: auto; width: 26px; height: 26px; background: url('/child/img/search.png') no-repeat center; }
#hsearch-btn .btn-search { margin: 0; width: 100%; height: 100%; }



/* Mobile Gnb */
.m_gnb { z-index: 9999; overflow: hidden; position: fixed; top: 0px; right: 0; -webkit-transform: translateX(101%); transform: translateX(101%);
    padding-top: 51px; width: 65%; height: 100%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.m_gnb #menu-container { padding-bottom: 50px; background: #e6e6e6; }
.mo_gnb_on{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.menu-login { margin: 7px 0; }
.menu-login li { position: relative; background: #fff; }
.menu-login li a { display: block; padding: 16px 15px 14px 60px; width: 100%; font-size: 13px; }
.login_icon { display: inline-block; vertical-align: middle; position: absolute; top: 9px; left: 15px; width: 30px; height: 30px; background: url('/child/img/icon/icon_profile.png') no-repeat center / 30px; }
.my-page {background: #fff; }
.menu-link { }
.my-page li { font-size: 14px !important; border-bottom: 1px solid #e5e5e5; }
.my-page li a { display: block; padding: 15px; font-size: 18px; color: #333; font-weight: 500; cursor: pointer; }
.my-page .menu-submenu li { background: #f7f7f7; }
.my-page .menu-submenu li a { padding: 12px 30px; font-size: 14px; font-weight: 400; }

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

.header__menu-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); }
}

#quick-menu {
    z-index: 10; position: relative; bottom: 0; right: 0;
    margin: auto; width: 100%;
}
 .quick { display: none; position: absolute; right: 0; top: 40px;}
[data-quick="sub"] .quick { top: 10px; }
.quick li { display: flex; align-items: center; width: 100px; height: 100px; margin-bottom: 5px; padding: 12px 10px 8px; text-align: center; }
.quick li:last-child { margin-bottom: 0px; }
.quick li .img { font-size: 0; }
.quick li > div { margin: auto; }
.quick span { display: block; color:#fff; margin-top: 5px; line-height: 1; }
.quick span em { display: block; line-height: 1; font-style: normal; }
.quick .float1 { background:#f39800; }
.quick .float2 { background:#555555; }

/* Mobile Lite Header Bar */
.lite-header-bar { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 45px; line-height: 45px; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0px 0px 3px 0px rgba(0,0,0,.1); z-index: 10001; }
.lite-header-bar h1 { text-align: center; font-size: 17px; }
.lite-header-bar a { position: absolute; top: 0; right: 0; width: 45px; height: 45px; }
.lite-header-bar a:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 20px; height: 2px; background: #333;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.lite-header-bar a:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 20px; height: 2px; background: #333;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

@media (max-width: 1024px){
    .lite-header-bar { display: block; }
}




@media (max-width: 1024px){
    .sns-ul { display: none; }
    .menu { display: block; top: 0; left: auto; right: 0;  }

    .customer-menu { position: relative; margin: 10px 0 0; padding: 10px 14px; width: 100%; background: #fff; }
    .customer-menu  ul { display: flex; }
    .customer-menu  li { flex: 1 1; margin-left: -1px; text-align: center; border: 1px solid #ddd;}
    .customer-menu  li.on { background: #0068b7; color: #fff; }
    .customer-menu  li a { display: block;text-align: center; padding: 2px 0; width: 100%; height: 100%; font-size: 16px; color: #999;}
    .customer-menu li:last-child a:before { content: none; }

    .m-search { display: block; }
    #header-search { float: none; margin-top: 0; }
    .header__menu-search,
    #hsearch-wrap { width: 100%; }

    header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0,0,0,.1); }
    .header-top { position: relative; height: 50px; }
    #header-logo { left: 0; right: 0; top: 0; bottom: 0; height: 50px; }
    .ci span { margin-left: -7px; background-size: auto 30px; }
    #gnb { display: none; }
    #shopping { width: 50px; line-height: 50px; }
    #shopping:after { content: none; }
    #shopping a i { margin-right: 0; }
    #shopping a span { display: none; }

    /* Shop Header */
    .header__menu-menu { display: none; }

    .logo { height: 50px; }
    .logo a { background-size: auto 30px; }
    #home { display: none; }
    [data-header="sticky"] { background: #fff; box-shadow: 0px 2px 10px 0px rgba(0,0,0,.1); }
   [data-header="sticky"] .logo a,
   [data-header-mobile="on"] .logo a { background-image: url('/child/img/ci-eng.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: #4c6ce4; }

    .header { position: fixed; top: 0; right: 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-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; }


   .mobile-menu { display: block; }
   .header__contents{
       display: flex; flex-direction: column;
       z-index: 10000; overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; right: 0;
       padding: 50px 0px 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;  width: 100%; text-align: center; }
   .header-menu-ul { flex-direction: column; border-top: 1px solid #ddd; }
   .header-menu-ul .menu-link { margin: 0; padding: 12px 30px; font-size: 18px; font-weight: 500;  color: #333; text-align: left; border-bottom: 1px solid #e5e5e5; }

   .sub-menu{
       position: relative; top: 0; left: 0;
       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; background: #f9f9f9;}
   .sub-menu li a { padding: 10px 40px; text-align: left; font-size: 16px; border-bottom: 1px solid #e5e5e5; }
   .menu-toggle[aria-pressed="true"] + .sub-menu{
       position: relative; opacity: 1; visibility: visible; max-height: 400px;
   }
   .menu-toggle h2 { position: relative; font-size: 18px; }

   [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: 10px;
       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){
    .header_top { display: none; }
    .header_middle_center { display: none; }

    .quick { display: none; }
    [data-quick="sub"] .quick { top: 0px; }
    .quick li { width: 50px; height: 50px; margin-bottom: 5px; padding: 0; text-align: center; border-radius: 50%; }
    .quick li:last-child { margin-bottom: 0px; }
    .quick li img { width: 70%; }
    .quick span { display: none; }
}
@media (max-width: 550px){
}


/* ======= Footer ======= */
footer { overflow-x: hidden; width: 100%; background-color: #38404a; }
footer .container { max-width: 1230px;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}


.footer-wrap { position: relative; padding: 50px 0 90px; }
.footer-wrap .container { position: relative; }
.footer-wrap ul.list li { padding: 0 15px; }
.footer-wrap ul.list li a { position: relative; font-size: 18px; font-weight: 200; color: #bcbcbc; cursor: text; }
.footer-wrap ul.list li a:after { content: ''; position: absolute; top: 2px; right: -16px; bottom: 0; margin: auto; width: 1px; height: 15px; background: #999; }
.footer-wrap ul.list li:first-child a:after,
.footer-wrap ul.list li:nth-child(2) a:after,
.footer-wrap ul.list li:last-child a:after { content: none; }
.copyright { margin-top: 7px; padding: 0 15px; font-size: 16px; color: #999999; }

.pt-list { display: flex; margin-top: 36px; }
.pt-list li { position: relative; padding: 0 15px; line-height: 1; }
.pt-list li:after { content: ''; position: absolute; top: 2px; right: 0; bottom: 0; margin: auto; height: 14px; width: 2px; background: #999; }
.pt-list li:last-child:after { content: none; }
.pt-list li a { font-size: 16px; font-weight: 500; color: #999999; }

.footer-logo { position: absolute; right: 0; bottom: 0; display: block; width: 146px; height: 45px; background: url('/child/img/footer-logo-eng.png') no-repeat bottom / auto; }

@media(min-width:1025px){
.footer-wrap ul.list { display: flex; flex-flow: wrap; width: 80%;}

}
@media (max-width: 1024px){
}
@media (max-width: 768px){
    .footer-wrap { position: relative; padding: 30px 0 50px; }
    .pt-list li a { font-size: 14px; }
    .footer-wrap ul.list::after { content: ''; display: block; clear: both; }
    .footer-wrap ul.list li { float: left; }
    .footer-wrap ul.list li a { font-size: 16px; }
}
@media (max-width: 550px){
    .footer-logo,
    .f-sns-ul { display: none; }
    .bottom-r { padding-left: 0; }
}