@charset "utf-8";


 

/* ===== COMMON ===== */
.hide {
    position:absolute;
    left:-9999%;
    font-size:0;
    line-height:0;
    text-indent:-9999px;
}
.menubtn .menubar {
    display:block;
    width:30px;
    height:23px;
	cursor:pointer;
}
.menubtn .menubar .bar {
    position:absolute;
    right:0;
    top:0;
    height:2px;
    background:#111;
	transition:all ease .3s; 
}
.menubtn .menubar .bar.bar01 {
    width:21px;
}
.menubtn .menubar .bar.bar02 {
    top:10px;
    width:21px;
}
.menubtn .menubar .bar.bar03 {
    top:20px;
    width:30px;
}
/*
.eng,
.eng * { font-family:'Inter','Noto Sans KR', dotum, sans-serif !important;}*/
.eng .fa {
    font: normal normal normal 14px/1 FontAwesome !important;
}





/* ===== LOAD EFFECT ===== */
.loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    background-color:#fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.loading-wrap .loading-circle {
	width: 60px;
	height: 60px;
	-webkit-animation: spin 3s infinite;
	-moz-animation: spin 3s infinite;
	-ms-animation: spin 3s infini
	-o-animation: spin 3s infinite;
	animation: spin 3s infinite;
}
.loading-wrap .loading-circle circle {
	stroke:#0042bf;
	stroke-width: 4;
	stroke-dasharray: 157, 157;
	stroke-dashoffset: 0;
	fill: transparent;
	-webkit-animation: circleAni 1s infinite;
	-moz-animation: circleAni 1s infinite;
	-ms-animation: circleAni 1s infinite;
	-o-animation: circleAni 1s infinite;
	animation: circleAni 1s infinite;
}
.sub .loading-wrap {
    opacity: 0;
}
.loading.sub .loading-wrap {
	opacity: 1;
}

/* SPIN */
@-webkit-keyframes spin {
	100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
}
@-moz-keyframes spin {
	100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
}
@-ms-keyframes spin {
	100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
}
@-o-keyframes spin {
	100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
}
@keyframes spin {
	100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
}


/* CIRCLE */
@-webkit-keyframes circleAni {
	0% { 
        stroke-dashoffset: 157; 
    }
	75% { 
        stroke-dashoffset: -147; 
    }
	100% { 
        stroke-dashoffset: -157; 
    }
}
@-moz-keyframes circleAni {
	0% { 
        stroke-dashoffset: 157; 
    }
	75% { 
        stroke-dashoffset: -147; 
    }
	100% { 
        stroke-dashoffset: -157; 
    }
}
@-ms-keyframes circleAni {
	0% { 
        stroke-dashoffset: 157; 
    }
	75% { 
        stroke-dashoffset: -147; 
    }
	100% { 
        stroke-dashoffset: -157; 
    }
}
@-o-keyframes circleAni {
	0% { 
        stroke-dashoffset: 157; 
    }
	75% { 
        stroke-dashoffset: -147; 
    }
	100% { 
        stroke-dashoffset: -157; 
    }
}
@keyframes circleAni {
	0% { 
        stroke-dashoffset: 157; 
    }
	75% { 
        stroke-dashoffset: -147; 
    }
	100% { 
        stroke-dashoffset: -157; 
    }
}





/* ===== HEADER ===== */
#header {
    position:absolute;
    left:0;
    top:-100px !important;
    z-index:5000;
    width:100%;
    height:100px;
    /*background:#fff;*/
    -webkit-transition:top ease 0.4s;
    -moz-transition:top ease 0.4s;
    -ms-transition:top ease 0.4s;
    -o-transition:top ease 0.4s;
    transition:top ease 0.4s; 
	line-height:1.6; 
}
#header.top{top:0 !important;} 
#header h1 {
    position:absolute;
    left:5%;
    top:50%;
    margin-top:-20.5px;
}
#header h1 a {
	display:block;
    width:162px;
    height:60px;
    background-image:url(/new1/img/common/logo-w.png);
    background-size:100% !important;
    background-position:center center;
    background-repeat:no-repeat;
}
#header .gnb-wrap {
    display:flex;
    justify-content:center;
    height:100%;
}
#header .gnb-wrap .gnb {
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0;
    text-align:center;
}
#header .gnb-wrap .gnb > li {
    margin:0 35px;
    vertical-align:middle;
	height:100%;
	display:flex;
	align-items:center;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}
#header .gnb-wrap .gnb > li > ul{
	position:absolute;  
	border-bottom:1px solid #fff; 
	background:#fff;
	opacity: 0.8;
	padding:30px; 
	top:100px;
	left:0;
	width:100%; 
	display:flex;
	justify-content:center; 
	font-size:18px; 
	text-shadow: none;
}
#header .gnb-wrap .gnb > li > ul > li { 
	text-align:left;
} 
#header .gnb-wrap .gnb > li > ul > li > a{ 
	font-weight:500;
	padding:0 40px 0 0;
	display:inline-block; 
	transition:all ease .2s; 
	position:relative;
}
#header .gnb-wrap .gnb > li > ul > li:hover > a{
	color:#0042bf;  
}
#header .gnb-wrap .gnb > li > ul > li > a:before{content:'';   width:5px; height:5px; border-radius:50%; background:#0042bf; position:absolute; left:0; top:-14px; opacity:0; transition:all ease .3s;}
#header .gnb-wrap .gnb > li > ul > li:hover > a:before{top:-7px; opacity:1;}

#header .gnb-wrap .gnb > li > ul > li > ul{
	margin:15px 0 10px;
	text-align:left;
}
#header .gnb-wrap .gnb > li > ul > li > ul > li{
	margin:5px 0;
}
#header .gnb-wrap .gnb > li > ul > li > ul > li > a{ 
	font-size:16px;
	position:relative; 
}
#header .gnb-wrap .gnb > li > ul > li > ul > li > a:after{content:''; width:0; height:1px; background:#111; position:absolute; right:0; bottom:-5px; transition:all ease .3s;} 
#header .gnb-wrap .gnb > li > ul > li > ul > li > a:hover:after{  right:auto; left:0; width:100%;} 
.all-menu .gnb-sns {display: flex;  align-items: end;}


#header .gnb-wrap .gnb > li > a {
    display:block;
    font-size:18px;
    color:#fff;
    font-weight:600;
    letter-spacing:-0.25px;
}
#header .hd-etc {
    display:flex;
    align-items:center;
    position:absolute;
    right:5%;
    top:50%;
	height:32px;
    margin-top:-16px;
} 
#header .hd-etc .hd-link{}
#header .hd-etc .hd-link a{line-height:31px;font-size: 14px; color:#fff; font-weight:600; position:relative; padding-right:10px;}
#header .hd-etc .hd-link a:after{content:''; width:1px; height:10px; background:rgba(255,255,255,0.5); position:absolute; right:0; top:5px;}
#header .hd-etc .hd-language {
    position:relative;
    padding:0 10px;
    margin-right:15px;
} 
#header .hd-etc .hd-language .btn-language { 
    position:relative;
    padding-right:21px;
    background-color:transparent;
    border:0;
    font-size:14px;
    color:#666666;
    font-weight:600;
	height:32px;
	line-height:32px;
	line-height:1.6;
}
#header .hd-etc .hd-language .btn-language:after { 
    content:"";
    position:absolute;
    right:0;
    top:50%;
    margin-top:-2.5px;
    width:10px;
    height:5px;
    background:url(/new1/img/bu/bu-language.png) no-repeat center;
}
#header .hd-etc .hd-language ul {
    display:none;
}
#header .hd-etc .hd-search .btn-hd-search {
    display:inline-block;
    width:21px;
    height:21px;
    background-color:transparent;
    border:0;
    background:url(/new1/img/ico/ico-search.png) no-repeat center;
}
#header .hd-etc .hd-menubtn {
    position:relative;
    margin-left:30px;
	z-index:10;
}
 
/* en */
#header .gnb-wrap .gnb > li.en > ul > li {
    width: 10%;
    margin: 0 10px;
}


/* HEADER TRANSPARENT */
#header.trans {
    border-bottom:1px solid rgba(255,255,255,0.2);
	background:transparent !important;
	top:0 !important;
}
#header.trans h1 a {
	background-image:url(/new1/img/common/logo-white.png);
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,0.3))
        drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}


#header.trans .gnb-wrap .gnb > li > a {
	color:#fff;
}
#header.trans .hd-etc .hd-language .btn-language {
	color:#fff;
}
#header.trans .hd-etc .hd-language .btn-language:after {
	background:url(/new1/img/bu/bu-language-white.png) no-repeat center;
}
#header.trans .hd-etc .hd-search .btn-hd-search {
	background:url(/new1/img/ico/ico-search-white.png) no-repeat center / cover;
}
#header.trans .menubtn .menubar .bar {
	background-color:#fff;
}
#header.bg-color{background: #0042bf !important; border-bottom:0;}




/* hd all menu */
.gnb-all{position:fixed; top:0; right:0; width:100%; height:0; background:#fff; z-index:9; overflow:hidden; transition:all ease .6s;}
.all-menu{height:100%;}  
.all-menu > ul{display:flex;  height:100%; flex-wrap:wrap;}
.all-menu > ul > li{width:23%; border-right:1px solid #eee; padding: 2% 3%;}
.all-menu > ul > li > a{display:block; font-size:40px; font-weight:700; position:relative; margin-bottom:60px; line-height:1.2; color:#0042bf; opacity:0; transition:all ease 1s; transition-delay:.1s; margin-left:-10px;} 
.all-menu > ul > li > ul > li{transition:all ease 1s; transition-delay:.2s; opacity:0; margin-left:-10px;}
.all-menu > ul > li > ul > li:nth-child(2){transition-delay:.3s;}
.all-menu > ul > li > ul > li:nth-child(3){transition-delay:.4s;}
.all-menu > ul > li > ul > li:nth-child(4){transition-delay:.5s;}
.all-menu > ul > li > ul > li:nth-child(5){transition-delay:.6s;}
.all-menu > ul > li > ul > li:nth-child(6){transition-delay:.8s;}



.all-menu > ul > li:not(.gnb-sns) > a:before{content:'';   width:10px; height:10px; border-radius:50%; background:#0042bf; position:absolute; left:0; top:-20px; opacity:0; transition:all ease .3s;}
.all-menu > ul > li:not(.gnb-sns):hover > a:before{top:-15px; opacity:1;}
.all-menu > ul > li:not(.gnb-sns) > ul > li{margin-top:5px;}
.all-menu > ul > li:not(.gnb-sns) > ul > li > a{font-size:20px; font-weight:500; transition:all ease .3s;} 
.all-menu > ul > li:not(.gnb-sns) > ul > li > a:hover{padding-left:5px; color:#0042bf; font-weight:700}  
.all-menu > ul > li:not(.gnb-sns) > ul > li:hover > a{padding-left:5px; color:#0042bf; font-weight:700} 
.all-menu > ul > li:not(.gnb-sns) > ul > li > ul {padding-left:5px;}
.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li{margin:10px 0;}
.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li > a{font-size:18px; font-weight:500; transition:all ease .3s; position:relative;}
.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li > a:after{content:''; width:0; height:1px; background:#111; position:absolute; right:0; bottom:-25px; transition:all ease .3s;} 
.all-menu > ul > li:not(.gnb-sns) > ul > li > ul > li > a:hover:after{  right:auto; left:0; width:100%;} 
.all-menu .gnb-sns {display: flex;  align-items: end;}
.all-menu .gnb-sns > ul > li{margin:20px 0;}
.all-menu .gnb-sns > ul > li > a{font-size:16px; position:relative; font-weight:500;}
.all-menu .gnb-sns > ul > li > a:after{content:''; width:0; height:1px; background:#111; position:absolute; right:0; bottom:-2px; transition:all ease .3s;}
.all-menu .gnb-sns > ul > li > a:hover:after{width:100%; right:auto; left:0;}




/* hd gnb */
#header.gnb-open .all-menu > ul > li > a{opacity:1; margin-left:0;}
#header.gnb-open .all-menu > ul > li > ul > li{opacity:1; margin-left:0;} 
#header.gnb-open .gnb-all{height:100vh;} 
#header.gnb-open.trans{position:fixed;}
#header.gnb-open.trans .menubtn .menubar .bar{background-color:#111;} 
#header.gnb-open .menubtn .menubar .bar.bar01{width:30px; top:10px; transform:rotate(45deg);}
#header.gnb-open .menubtn .menubar .bar.bar02{display:none;}
#header.gnb-open .menubtn .menubar .bar.bar03{width:30px; top:10px; transform:rotate(-45deg);}

.scr-none{overflow-y:hidden;}


/* hd search */
.hd-search-box{width:100%; height:0; overflow:hidden; transition:all ease .5s; position:fixed; background:#002a78; z-index:99; top:0; left:0; display:flex;  align-items:center; justify-content:center; }
.hd-search-box.hd-sch-open{height:250px;}
.hd-search-box .search-box{  width:80%; max-width:500px;   position:relative; }
.hd-search-box .search-box p{margin-bottom:20px}
.hd-search-box .search-box a{color:#fff; border:1px solid rgb(255 255 255 / 22%); font-size:14px; padding:7px 15px; margin-right:5px; border-radius: 50px;}
.hd-search-box .search-btn{width:65px; line-height:65px; height:65px; background:url('/new1/img/ico/ico-search-white.png') no-repeat center center; position:absolute; right:0; bottom:0;}   
.hd-search-box .search-box input{ line-height:65px; height:65px; width:calc(100% - 65px); background:transparent; border-bottom:2px solid #fff;     font-size: 18px; padding:0 0;}
.hd-search-box .search-box input::placeholder{ color:rgba(255,255,255,0.5)}  
.hd-search.close{z-index:100; position:relative;}



.hd-search-box .search-box > a {
    border: none;
    padding: 0;
    margin: 0;
}
.hd-search-box .search-box input{ color:#fff;}


/* hd lang */
#header .hd-etc .hd-search.close .btn-hd-search{background: url(/new1/img/sub/ic-close.png) no-repeat center;}
#header.trans .hd-etc .hd-search.close .btn-hd-search{background: url(/new1/img/sub/ic-close.png) no-repeat center;}
.hd-logo.show{z-index:100; position:relative;} 



/* 흰 로고 + 검은 배경 전용 
#header .hd-logo.show a{
    background-image: url(/new1/img/common/logo-white234.png);
    display: block;

    /* 검은 배경에서 살아나는 그림자 
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,0.6))
        drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
*/


#header .hd-etc .hd-language ul{position:absolute;  top:30px; background:#fff; padding:10px; width:100%; left:50%; transform:translateX(-50%); border:1px solid #ddd;}
#header .hd-etc .hd-language ul li {font-size:12px; font-weight:500;  line-height:1.8;} 
#header .hd-etc .hd-language ul li a{display:block; color:#aaa;}
#header .hd-etc .hd-language ul li a:hover{color:#111;}




/* ===== FOOTER ===== */
#footer {
    position: relative;
    z-index:1;
	background:#111111;
}
#footer .ft-top {
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding: 25px 0;
	border-bottom:1px solid rgba(255,255,255,0.15);
}


#go-top {position:fixed;bottom:40px;right:20px;width:60px; height:60px;  color:#fff;text-align:center;font-size:18px;z-index:90;background:#111; border-radius:50%; border:1px solid #444;}
#go-top .arr{display:block; background:url(/new1/img/bu/bu-language-white.png) no-repeat center; width:11px; height:4px; transform:rotate(180deg); margin:0 auto 5px}
#go-top p{font-size:12px;}


#go-back {position:fixed;bottom:40px;right:100px;width:60px; height:60px;  color:#fff;text-align:center;font-size:18px;z-index:90;background:#111; border-radius:50%; border:1px solid #444;}
#go-back .arr{display:block; background:url(/new1/img/bu/bu-arrow-next.png) no-repeat center; width:11px; height:4px; transform:rotate(180deg); margin:0 auto 5px}
#go-back p{font-size:12px;}





#footer .ft-top .ft-menu {
	font-size:0;
}
#footer .ft-top .ft-menu li {
	display:inline-block;
	margin-left:30px;
}
#footer .ft-top .ft-menu li:first-child {
	margin-left:0;
}
#footer .ft-top .ft-menu li a {
	font-size:16px;
	color:#fff;
}
#footer .ft-top .ft-site {
	position:relative;
	width:190px;
	border:1px solid #595959;
}
#footer .ft-top .ft-site h2:after {
	content:"";
	position:absolute;
	right:18px;
	top:50%;
	width:11px;
	margin-top:-1px;
	height:4px;
	background:url(/new1/img/bu/bu-family.png) no-repeat center; 
}
#footer .ft-top .ft-site.open h2:after{
	transform:rotate(180deg);
}
#footer .ft-top .ft-site h2 {
	padding-left:20px;
	font-size:14px;
	color:rgba(255,255,255,0.5);
	font-family:'Poppins',sans-serif;
	font-weight:400;
	line-height:48px;
	cursor:pointer
}
#footer .ft-top .ft-site ul {
	display:none;
	position:absolute;
	left:0;
	bottom:100%;
	width:100%;
	background:#fff;
	padding:10px 20px;
	border:1px solid #ddd;
}
#footer .ft-top .ft-site ul li a{
	font-size:14px;
	color:#aaa;
	display:block;
	margin:5px 0;
	line-height:1.5;
}
#footer .ft-top .ft-site ul li a:hover{
	color:#111;
}
#footer .ft-btm  {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:30px 0 55px;
	border-bottom:1px solid rgba(255,255,255,0.15);
}

#footer .ft-btm .ft-addr{
	width:calc(100% - 240px);
}
#footer .ft-btm address p {
	position:relative;
	display:inline-block;
	padding-left:15px;
	margin-left:15px;
	font-size:14px;
	color:#aaa;
	letter-spacing:-0.25px;
	font-family:'Pretendard',sans-serif;
	font-weight:400;
	font-style:normal;
} 
#footer .ft-btm address p:after {
	content:"";
	position:absolute;
	left:0;
	top:50%;
	margin-top:-5px;
	width:1px;
	height:10px;
	background:#484848;
}
#footer .ft-btm address p:first-child {
	padding-left:0;
	margin-left:0;
}
#footer .ft-btm p.copyright {
	margin-top:20px;
	font-size:14px;
	color:rgba(255,255,255,0.5);
	font-family:'Poppins',sans-serif;
}
#footer .ft-btm .ft-sns {
	font-size:0;
}
#footer .ft-btm .ft-sns li { 
    display:inline-block;
    margin-left:10px;
}
#footer .ft-btm .ft-sns li:first-child {
	margin-left:0;
}
#footer .ft-btm .ft-sns li a {
	display:block;
	width:40px;
	height:40px;
	border-radius:50%;
    background-color:#292929;
    background-repeat:no-repeat;
    background-position:center center;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
#footer .ft-btm .ft-sns li.sns-youtube a {
	background-image:url(/new1/img/ico/ico-youtube-white.png);
}
#footer .ft-btm .ft-sns li.sns-facebook a {
	background-image:url(/new1/img/ico/ico-facebook-white.png);
}
#footer .ft-btm .ft-sns li.sns-blog a {
	background-image:url(/new1/img/ico/ico-blog-white.png);
}
#footer .ft-btm .ft-sns li.sns-instagram a {
	background-image:url(/new1/img/ico/ico-instagram-white.png);
}
#footer .ft-btm .ft-sns li.sns-linkedin a {
	background-image:url(/new1/img/ico/ico-linkedin-white.png);
}
#footer .ft-btm .ft-sns li.shop a {
	background-image:url(/new1/img/ico/ico-shop-white.png);
}
#footer .ft-btm .ft-sns li a:hover {
	background-color:#444;
}

#footer.en .ft-btm address {
    display: flex;
    flex-direction: column;
}
#footer.en .ft-btm address p {
    padding: 0;
    margin: 0;
}