@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : KSH
Create date : 2020.12.22
-------------------------------------------------*/

#header{border-bottom:1px solid #eee}
#header #searchWrap { position: absolute; left: 50%; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; background: #00a0e0; padding: 0 1rem; text-align: center; color: #fff; height: 0; opacity: 0; padding: 0 1rem; overflow: hidden; visibility: hidden; -webkit-transition: padding .4s,opacity .4s; transition: padding .4s,opacity .4s; }
#header #searchWrap.active { padding: 3.1rem 1rem; height: auto; opacity: 1; visibility: visible; overflow: visible; }
#header #searchWrap .search-area { width: 30.25rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; max-width: 100%; border-bottom: 2px solid #fff; margin: auto; text-align: left; overflow: hidden; margin-bottom: .75rem; }
#header #searchWrap .search-area input { background: transparent; border: 0; width: calc(100% - 3.5rem); color: #fff; font-size: .9rem; font-weight: 300; float: left; height: 2.5rem; line-height: 2.5rem; padding: 0 10px; outline: 0 none; }
#header #searchWrap .search-area input::-webkit-input-placeholder { color: #fff; font-weight: 300; }
#header #searchWrap .search-area input:-ms-input-placeholder { color: #fff; font-weight: 300; }
#header #searchWrap .search-area input::-ms-input-placeholder { color: #fff; font-weight: 300; }
#header #searchWrap .search-area input::placeholder { color: #fff; font-weight: 300; }
#header #searchWrap .search-area button { font-size: 1.25rem; float: right; padding: 0 .75rem; height: 2.5rem; }
#header #searchWrap .keywords { margin-bottom: 2.1rem; }
#header #searchWrap .keywords > * { display: inline-block; vertical-align: middle; }
#header #searchWrap .keywords span { color: #fff; font-size: .9rem; font-weight: 700; background: #fa4d09; border-radius: 30px; padding: 0 .77rem; margin-right: .3rem; }
#header #searchWrap .keywords a { font-weight: 300; opacity: .7; -webkit-transition: opacity .4s; transition: opacity .4s; padding: 0 .5rem; position: relative; color: #fff; font-size: .8rem; }
#header #searchWrap .keywords a:after { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: .7rem; background: #fff; opacity: .5; content: ''; }
#header #searchWrap .keywords a:last-child { padding-right: 0; }
#header #searchWrap .keywords a:last-child:after { display: none; }
#header #searchWrap .keywords a:hover, #header #searchWrap #searchWrap .keywords a:focus { opacity: 1; }
#header #searchWrap .close { position: relative; display: block; width: 100px; margin: auto; text-align: center; padding: .35rem 0 .4rem; font-size: .7rem; font-weight: 300; border: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; color: #fff; }
#header #searchWrap .close:after { position: absolute; left: 70%; top: 50%; -webkit-transform: skewX(45deg) translate(-50%, -50%); transform: skewX(45deg) translate(-50%, -50%); width: 0; height: 100%; background: #fff; content: ''; opacity: 1; -webkit-transition: all .4s; transition: all .4s; }
#header #searchWrap .close span { position: relative; z-index: 1; }
#header #searchWrap .close:hover span, #header #searchWrap #searchWrap .close:focus span { color: #333; }
#header #searchWrap .close:hover:after, #header #searchWrap .close:focus:after { width: 150%; opacity: 1; }

.gnbWrap { float: right; margin-right: calc(13rem / 2); }
.gnbWrap #gnb > .title { display: none; }
.gnb_bg { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block; position: absolute; left: 0; top: 4.8rem; z-index: 1; width: 100%; background-color: rgba(0, 0, 0, 0.6); content: ''; }
#head_menu { text-align: center; }
#head_menu > li{position:relative;display:inline-block;vertical-align:top}
#head_menu > li:before{content:"";position:absolute;left:0;top:50%;width:0;height:.6rem;transform:translateY(-50%);border-left:1px solid #aaa}
#head_menu > li:first-child:before{display:none}
#head_menu > li.on .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; height: 16rem; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
#head_menu > li > a { position: relative; font-size: .9rem; font-weight: 500; display: block; height: calc(9.6rem / 2); color: #333; padding: 0 .25rem;margin:0 1.5rem;line-height: calc(9.6rem / 2);transition:all .3s}
#head_menu > li.on > a,
#head_menu > li > a.active {color:#1791D9 !important}
#head_menu > li:last-child > a {margin-right:0}

#head_menu > li > a:after { position: absolute; left: 0; bottom: 0; -webkit-transform: scaleX(0); transform: scaleX(0); width: 100%; height: 5px; background: #00a0e0; content: ''; -webkit-transition: all .3s; transition: all .3s; }
#head_menu .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; top: 100%; z-index: 2; padding-left: 16rem; }
#head_menu .submenu::before { position: absolute; left: 0; top: 0; z-index: -1; width: 10000%; height: 100%; background-color: #F5F7FC; content: ''; }
#head_menu .submenu .title { position: absolute; left: 0; top: 0; z-index: 2; width: 16rem; height: 100%; padding-top: 1.5rem; color: #fff; text-align: left; }
#head_menu .submenu .title::before { position: absolute; right: 0; top: 0; z-index: -1; width: 1000%; height: 100%; background: url("/kr/img/common/gnb_bg.png") no-repeat right bottom #153C7C; content: ''; }
#head_menu .submenu .title strong { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
#head_menu .submenu .title span { display: block; width: 10rem; max-width: 100%; word-break: keep-all; }
#head_menu .submenu .depth2 { margin: 1.5rem 0 1.5rem 1.25rem; text-align: left; }
#head_menu .submenu .depth2 li { float: left; width: calc(33.333% - 1.25rem); margin: 0 0 0.75rem 1.25rem; }
#head_menu .submenu .depth2 a { display: block; position: relative; padding: 0.75rem; border: 1px solid #ddd; background-color: #fff; font-weight: 400; -webkit-transition: all 0.3s; transition: all 0.3s; }
#head_menu .submenu .depth2 a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; font-size: 0.9rem; right: 1rem; color: #aaa; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
#head_menu .submenu .depth2 a:hover, #head_menu .submenu .depth2 a:focus { border-color: #0270B1; background-color: #0270B1; color: #fff; }
#head_menu .submenu .depth2 a:hover::after, #head_menu .submenu .depth2 a:focus::after { color: inherit; }
#head_menu .submenu .depth3 { display: none; }
#header.active .gnb_bg { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 100%; height: calc(100vw - 4.8rem); -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
#header .AllMn {position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 23px; }
#header .AllMn .bar { display: block; width: 100%; height: 2px; background: #333; -webkit-transition: all .4s; transition: all .4s; }
#header .AllMn .bar:nth-of-type(2) { margin: 0.25rem 0; }
#header .AllMn:hover .bar:nth-of-type(1), #header .AllMn:focus .bar:nth-of-type(1) { -webkit-transform: translateY(7px); transform: translateY(7px); }
#header .AllMn:hover .bar:nth-of-type(3), #header .AllMn:focus .bar:nth-of-type(3) { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
#allgnb { position: fixed; left: 0; top: 0; width: 100vw; height: 0; opacity: 1; background: #fff; content: ''; -webkit-transition: all .4s; transition: all .4s; z-index: 1; }
#allgnb.active { height: 100vh; opacity: 1; }
#allgnb.active .container { overflow: visible; visibility: visible; opacity: 1; height: auto; }
#allgnb .container { position: absolute; left: 50%; top: 5rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 64rem; max-width: calc(100% - 2rem); overflow: hidden; visibility: hidden; opacity: 0; height: 0; -webkit-transition: all .4s .6s; transition: all .4s .6s; }
#allgnb .all_close { position: absolute; right: 0; top: 0; font-size: 2rem; color: #000; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; line-height: 1; }
#allgnb .all_close:hover, #allgnb #allgnb .all_close:focus { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
#head_menu_all { margin: 0 0 0 -1.5rem; overflow: hidden; }
#head_menu_all > li { float: left; width: calc(33.3% - 1.2rem); margin: .7rem 0 0 1.2rem; }
#head_menu_all > li > a { font-size: 1.5rem; font-weight: 800; color: #000; display: block; padding: 1.1rem 0; position: relative; }
#head_menu_all .submenu { border-top: 1px solid #000; }
#head_menu_all .submenu > ul > li > a { position: relative; font-size: .8rem; color: #000; font-weight: 500; display: block; border-bottom: 1px solid #ddd; padding: .8rem 0; }
#head_menu_all .submenu > ul > li.plus > a:after { position: absolute; right: .85rem; top: .75rem; font-family: 'xeicon'; content: '\e914'; font-size: 1rem; color: #000; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }
#head_menu_all .submenu > ul > li > a:hover, #head_menu_all #head_menu_all .submenu > ul > li > a:focus { color: #00a0e0; }
#head_menu_all .submenu > ul > li.plus > a:hover:after, #head_menu_all #head_menu_all .submenu > ul > li.plus > a:focus:after { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); color: #00a0e0; }
#head_menu_all .submenu > ul > li.plus.active > a, #head_menu_all #head_menu_all .submenu > ul > li.plus.active > a:after { color: #00a0e0; }
#head_menu_all .lnb-detail { height: 0; opacity: 0; overflow: hidden; visibility: hidden; -webkit-transition: all .3s; transition: all .3s; }
#head_menu_all .lnb-detail a { position: relative; display: block; font-weight: 400; color: #767676; padding-left: 10px; }
#head_menu_all .lnb-detail li + li { margin-top: .3rem; }
#head_menu_all .lnb-detail a:before { position: absolute; left: 0; top: .6rem; width: 4px; height: 1px; background: #767676; content: ''; }
#head_menu_all .lnb-detail a:hover, #head_menu_all #head_menu_all .lnb-detail a:focus { color: #00a0e0; }
#head_menu_all .lnb-detail a:hover:before, #head_menu_all #head_menu_all .lnb-detail a:focus:before { background: #00a0e0; }
#head_menu_all .lnb-detail a:hover span, #head_menu_all #head_menu_all .lnb-detail a:focus span { border-bottom: 1px solid #00a0e0; }
#head_menu_all .submenu > ul .active .lnb-detail { border-bottom: 1px solid #ddd; padding: 1rem 0 .9rem; opacity: 1; overflow: visible; visibility: visible; height: auto; }
#header .headerWrap { width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 2; height: calc(9.6rem / 2); background-color: #fff; }
#header .headerWrap .logo a { position: absolute; top: 50%; left:0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:10.05rem; height: calc(3.8rem / 2); background: url("../img/common/logo_new.png") no-repeat center center/cover; }
#header .headerWrap .lang { position: absolute; top: 50%; right:2rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0.6rem;color:#333}
#header .headerWrap .lang i { font-size: 0.75rem; position: relative; top: -1px; margin-right: 0.25rem; vertical-align: middle; }
#header .headerWrap .search-btn { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: calc(5rem / 2); }

#header .gnb_bg,
#header.active .gnb_bg,
#head_menu .submenu{display:none}

#content .depth4_tab { float: right; width: calc(100% - 14.75rem); margin-bottom: 2rem; padding-top: 14.5rem; }
.depth4_tab {margin-bottom:1rem}
.depth4_tab, .tab-wrap {text-align:center}
.depth4_tab li,.tab-wrap a {display:table-cell;width:1%;border:1px solid #ddd;font-size:1rem;color:#333;position:relative;}
.depth4_tab li a {display:block;padding:.725rem .5rem;position:relative}
.depth4_tab li a:before, .tab-wrap a:before {position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;border:1px solid #FF3665;content:'';opacity:0;transition:all .2s;z-index:0}
.depth4_tab li + li,.tab-wrap a + a {border-left:0}
.depth4_tab li.active, .tab-wrap a.on {color:#fff;background:linear-gradient(135deg, #FF3665 0%, #FF3665 5%, #EB3535 85%, #EB3535 100%);font-weight:500;border-color:transparent}
.depth4_tab li a:hover:before,.depth4_tab li a:focus:before,.tab-wrap a:hover,.tab-wrap a:focus:before {opacity:1}
.depth4_tab li:first-child,
.depth4_tab li:first-child a:before{border-radius:.4rem 0 0 .4rem}
.depth4_tab li:last-child,
.depth4_tab li:last-child a:before{border-radius:0 .4rem .4rem 0}

/* FOOTER */
#footer{font-size:0.85rem;padding:2.1rem 0 2.85rem;background-color:#fff;color:#555;border-top:1px solid #e1e1e1}
#footer .logo{float:left;width:10rem;margin-top:.4rem}
#footer .util { float: right; width: calc(100% - 14rem)}

@media all and (min-width:1025px){
	/* #header .AllMn{display:none !important} */
}
@media (max-width: 1280px) {}

@media (max-width: 1024px) { #gnb, #allgnb h2 { display: none; }
	#header .AllMn{display:block}
	#header .headerWrap .lang{right:2rem}
	#allgnb { top: 3rem; background: #173b5d; }
	#allgnb .all_close { font-size: 1.25rem; top: -2.1rem; right:1rem; width: 23px; height: 23px; }
	#allgnb .container { top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; max-width: 100%; }
	#allgnb.active { height: calc(100% - 3rem); }
	#allgnb.active .container { width: calc(100% + 2rem); }
	#head_menu_all { margin: 0; padding: 1.5rem 0; }
	#head_menu_all > li { float: none; width: 100%; margin: 0; }
	#head_menu_all > li + li { margin-top: .7rem; }
	#head_menu_all > li > a { color: #fff; width: 35vw; text-align: center; font-size: .9rem; padding: .8rem .5rem; }
	#head_menu_all > li > a span { position: relative; }
	#head_menu_all > li > a span:before { position: absolute; right: -15px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fa4d09; content: ''; opacity: 0; -webkit-transition: opacity .2s; transition: opacity .2s; }
	#head_menu_all > li.active > a span:before { opacity: 1; }
	#head_menu_all .submenu { overflow-y: auto; position: absolute; right: 0; top: 0; width: 65vw; height: calc(100vh - 3rem); background: #fff; border-top: 0; padding: 1.5rem 1.35rem; display: none; word-break: keep-all; }
	#head_menu_all .submenu > ul > li > a { font-size: 0.9rem; }
	#head_menu_all .active .submenu { display: block; }
	#wrap { padding-top: 3rem; }
	#header { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; background-color: #fff; }
	#header .headerWrap { height: 3rem; }
	#header .headerWrap .logo a { width:7rem; height: 1.25rem; }
	#header #searchWrap .keywords { margin-bottom: 1rem; }
	#header #searchWrap.active { padding: 1rem; }
	#footer { padding: 1rem 0; }
	#footer .logo { display: block; float: none; width: 7rem; }
	#footer .util { float: none; width: auto; margin: 1rem 0; font-size:.7rem}
	#footer .related { display: block; clear: both; position: relative; top: 0; width: 100%; }
	#footer .related button { padding-left: 1rem; }
	#footer .related .scroll { margin-bottom: 0; }
}
@media (max-width:400px){
	.depth4_tab li a{font-size:.8rem}
}