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

/* Main Type */
header { position: relative; top: 0; left: 0; width: 100%; z-index: 10000; background: #fff; }
.customer-menu { padding-top: 40px; float: right; }
.customer-menu:after { content: ''; display: block; clear: both; }
.customer-menu li { float: left; }
.customer-menu li a { display: block; padding: 9px 8px 7px; text-align: center; color: #888888; font-size: 14px; }
.customer-menu li:first-child a { padding-left: 0; }
.customer-menu li:last-child a { padding-right: 0; border-right: none; }

.header-wrap { position: relative; padding: 0 50px; height: 100px; text-align: center; border-bottom: 1px solid #e5e5e5; }
.header-wrap .container { position: relative; }
.logo { display: block; position: absolute; top: 22px; left: 0; margin: auto; width: 250px; height: 54px; }
.logo a { display: block; width: 100%; height: 100%; background: url('../img/ci.png') no-repeat center; }
.sns-ul { float: left; padding-top: 40px; }
.sns { float: left; margin-right: 10px; }
.sns a { display: block; }
.sns a i { display: block; width: 35px; height: 35px; }
.s1 { background-image: url('../img/icon/s1.png'); background-repeat: no-repeat; background-position: center; }
.s2 { background-image: url('../img/icon/s2.png'); background-repeat: no-repeat; background-position: center; }
.s3 { background-image: url('../img/icon/s3.png'); background-repeat: no-repeat; background-position: center; }

/* GNB */
.gnb { display: inline-block; vertical-align: top; margin: 18px 0 0 240px; }
.gnb-menu { position: relative; width: auto; text-align: center; }
.gnb-search { width: 250px; }
.gnb-menu a { display: block; padding: 19px 36px 35px; /*min-width: 120px;*/ font-size: 18px; font-weight: 400; }
.gnb-menu h2 { font-size: inherit; color: inherit; font-weight: inherit; }
.gnb-menu a span { font-size: 15px; color: #777777; font-weight: 400; }
.gnb ul li.active:before { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #024297; }
.gnb-menu:hover > a { color: #024297; }
.gnb-on > a { color: #024297; font-weight: bold; border-bottom: 2px solid #024297; }
.sub-gnb { overflow: hidden; position: absolute; top: 80px; left: 50%; padding: 15px 0; width: 170px; height: 0; opacity: 0; visibility: hidden; background: #fff; border: 1px solid #e5e5e5; border-top: 2px solid #024297;
    -webkit-transform: translate(-50%, -5px);
    -ms-transform: translate(-50%, -5px);
    transform: translate(-50%, -5px);
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
.gnb-menu a:hover ~ .sub-gnb,
.sub-gnb:hover { opacity: 1; visibility: visible; height: auto;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
}
.sub-gnb li { }
.sub-gnb li:last-child { border-bottom: none; }
.sub-gnb li a { padding: 7px 25px; font-size: 15px; color: #333; text-align: left; }
.sub-gnb li a:hover { background: #fafafa; }

.login-list { float: right; margin-top: 39px; }
.login-list:after { content: ''; display: block; clear: both; }
.login-list li { float: left; position: relative; padding: 0 14px; line-height: 20px; font-size: 14px; color: #777777; }
.login-list li:first-child:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 1px; height: 11px; background: #e5e5e5; }
.login-menu span { display: inline-block; vertical-align: middle; }
.login-menu i { display: inline-block; vertical-align: middle; margin-left: 10px; width: 20px; height: 20px; background: url('../img/icon/login.png') no-repeat center; }

.menu { z-index: 11; display: none; position: absolute; top: 5px; left: 5px; width: 50px; height: 50px; }

.burger-menu { position: relative; padding: 17px 15px; width: 100%; height: 100%; }
.burger-wrap { position: relative; width: 100%; height: 100%; }
.burger-wrap span { position: absolute; width: 100%; height: 2px;
    background: #333;
    -webkit-transition: ease-out .3s;
    -o-transition: ease-out .3s;
    transition: ease-out .3s;
}
.burger-menu[aria-pressed="false"] .burger-top { top: 0; right: 0; }
.burger-menu[aria-pressed="false"] .burger-middle { top: 0; right: 0; bottom: 0; margin: auto; }
.burger-menu[aria-pressed="false"] .burger-bottom { bottom: 0; right: 0; }
.burger-menu[aria-pressed="true"] .burger-top { top: 7px; right: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.burger-menu[aria-pressed="true"] .burger-middle { top: 0; right: 0; bottom: 0; margin: auto; opacity: 0; visibility: hidden; }
.burger-menu[aria-pressed="true"] .burger-bottom { bottom: 7px; right: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }


/* Mobile Gnb */
.m_gnb { z-index: 9999; overflow: hidden; position: fixed; top: 0px; left: 0; -webkit-transform: translateX(-101%); transform: translateX(-101%);
    padding-top: 50px; width: 65%; height: 100%;
    -webkit-transition: ease-in-out .55s;
    -o-transition: ease-in-out .55s;
    transition: ease-in-out .55s;
}
.m_gnb #menu-container { padding-bottom: 50px; background: #fff; }
.mo_gnb_on { -webkit-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('../img/icon/icon_profile.png') no-repeat center / 30px; }
.my-page { background: #fff; }
.my-page li { font-size: 14px !important; border-bottom: 1px solid #e5e5e5; }
.my-page li a { display: block; padding: 15px; font-size: 14px; color: #333; font-weight: 500; }
.active-tab .menu-link { color: #fff; background: #024297; }
.my-page .menu-submenu li { background: #f7f7f7; }
.my-page .menu-submenu li a { padding: 12px 30px; font-size: 13px; font-weight: 400; }

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

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


@media (max-width: 1280px){
    .header-wrap {padding:0 20px;}
	.gnb-menu a { padding: 19px 30px 37px; font-size: 17px; }
}
@media (max-width: 1024px){
    header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; box-shadow: 0px 2px 10px 0px rgba(0,0,0,.1); }
    .logo { top: 0; right: 0; width: 200px; height: 50px; }
    .logo a { background-size: auto 14px; }
    .header-wrap { height: 50px; }

    .sns-ul { display: none; }
    .menu { display: block; top: 0; left: 0; }
    .gnb,
    .gnb-sub { display: none; }

    .header-top { height: 50px; }
    .ci span { margin-left: -7px; background-size: auto 30px; }

    .login-list { display: none; }
    .login-menu em { display: inline-block; vertical-align: middle; margin-right: 15px; font-style: normal; font-size: 14px; }
    .login-menu span { font-size: 14px; }
}
@media (max-width: 768px){
}
@media (max-width: 550px){
}

/*
@media (min-width: 1024px){

	#navigation {
		position: fixed;
		top: 180px;
		display: block;
		z-index:99999;
	}

}
*/
/* ======= Footer ======= */
footer { padding: 24px 0; text-align: center; background: #f5f6f7; border-top: 1px solid #e5e5e5; }