@charset "utf-8";

/* ------------------------------------------------------- HEADER ------------------------------------------------------- */
.util {display:none}

#hd {position:relative;margin:0 auto;width:100%;border-bottom:0px solid rgba(255,255,255,0);background:#fff;z-index:1000;}
#hd:before, #hd:after {clear:both;content:'';display:block;}
#hd.fixed-top {position:fixed !important;top:0;left:0;right:0;animation:header_fix .3s ease-in-out forwards} /* Header Fixed */


.header_top {display:flex;justify-content: space-between;align-items: flex-start;padding:2rem 0}

	
/* Logo */
#hd .logo {display:inline-block;margin:0;}
#hd .logo a { display:inline-block;height:100%;}
#hd .logo a img {width:120px;margin-top:8px}

/* Naviation */
.main_nav {display: flex;justify-content: space-between;align-items: center;padding-bottom:1.6rem}

/* 네비게이션 */
#hd .gnb {position: relative;padding-top:1.6rem;padding-bottom:1.6rem}
#hd .gnb nav {position:relative;}
#hd .gnb nav > .depth1 {display: flex;flex-wrap: nowrap;width:100%;overflow-x: scroll;margin-left:-1.2rem;margin-right:-1.2rem;}
#hd .gnb nav > .depth1 > li {padding:0 0.2rem;}
#hd .gnb nav > .depth1 > li > a {display:inline-block;font-size:1.6rem;white-space:nowrap;font-weight:bold;color:var(--text-gray1);padding:0 1rem 15px;}
/*#hd .gnb nav .depth2,*/
.quick {display: none}

.nav_depth2_wrap {position:absolute;top:30px; padding: 0;margin:0 auto}
.nav_depth2_wrap h2 {display:inline-block;float:left;width:15%;font-size:38px;line-height:48px;font-weight:bold;letter-spacing:-1px;color:#5bc1c6;text-align:left;} 
.nav_depth2_wrap .btn_gnb_cls {position:absolute;bottom:0;right:0}

.gnb nav .depth2 { margin:0; border:solid 1px #010101; background:#fff; padding:16px; min-width:150px; }
.gnb nav .depth2 > li { margin:0;padding:0}
.gnb nav .depth2 > li:hover {border-color:#dd458e;}
.gnb nav .depth2 > li > a {font-size:15px;display:table-cell;vertical-align:middle;padding:8px 10px;color:#111;font-weight:300; white-space: nowrap;}
.gnb nav .depth2 > li > a:hover,
.gnb nav .depth2 > li > a.on {color:#0877a1;cursor:pointer;}

.sub_menu nav .depth1 { text-align:center;}




/* Button - All menu */
.btn_menu{position: absolute;top:20px;right:8px; width:40px;height:21px;display:inline-block;z-index:99999;}
.btn_menu:focus,
.btn_menu:visited {color:#111}
.btn_menu .inner {position:relative;display:inline-block;width:24px;height:16px;vertical-align:middle;}
.btn_menu .line {position:absolute;right:0;width:100%;height:2px;background-color:#222;transition:0.3s all ease-out;-webkit-transition:0.3s all ease-out;font-size:0;line-height:0;}
.btn_menu .tline{top:0px;}
.btn_menu .mline{top:50%;margin-top:-1px;}
.btn_menu .bline{bottom:0px;}

/* Button - All menu Close */
.modal_open .btn_menu .tline,
.modal_open .btn_menu:focus .tline{top:7px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.modal_open .btn_menu .mline{display:none;}
.modal_open .btn_menu .bline,
.modal_open .btn_menu:focus .bline{bottom:7px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}


/* All menu layer */
#menu {opacity:0;display:none;z-index:-1;}
.menu #menu {display:block;opacity:1;z-index:9999;animation:menu_on0 .4s ease-in-out forwards;}

#menu {position:fixed;top:0;left:0;bottom:0;right:0;margin:auto auto;transition:all .3s ease;overflow-y:scroll;width:100%;height:100%;background-color:#fff;}
#menu .allmenu {padding:3.2rem}
#menu .allmenu .depth1 {}
#menu .allmenu .depth1 > li {position:relative;color:var(--text-gray1);display:block;padding-bottom:0.4rem;padding-top:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line-gray2)}
#menu .allmenu .depth1 > li > a {position:relative;display:inline-block;font-size:1.4rem;;color:var(--text-gray1);font-weight: bold}
#menu .allmenu .depth2 {position: relative}
#menu .allmenu .depth2:before,
#menu .allmenu .depth2:after {clear:both;display:block;content:'';}
#menu .allmenu .depth2 > li {float:left;width:50%}
#menu .allmenu .depth2 > li > a {display:block;padding-top:1.2rem;color:var(--text-gray1);font-size:1.4rem;}




/*------------------------------- PC -------------------------------*/

@media (min-width: 1200px) {

	
	.header_wrap {position:relative;padding:2rem 0 2.4rem;display: flex;justify-content: space-between;align-items: center}
	.header_wrap .main_nav_left {display: flex;flex-direction: row;justify-content:flex-start;align-items: center}
	
 	/* Logo */
	#hd .logo a img {width:180px;margin-top:0} 
	
	/* 네비게이션 */
	#hd .gnb {position: relative;padding-left:4rem;padding-top:0;padding-bottom:0}
	#hd .gnb nav {position:relative;}
	#hd .gnb nav > .depth1 {display: flex;flex-wrap:wrap;width:auto;overflow-x:auto;}
	#hd .gnb nav > .depth1 > li {padding:0 1rem;}
	#hd .gnb nav > .depth1 > li > a {display:inline-block;font-size:1.8rem;white-space:nowrap;font-weight:bold;color:var(--text-gray1);padding:13px 1rem}
	/*#hd .gnb nav .depth2 {display: none}*/
	
	/* Naviation */
	.util {display: flex;justify-content: flex-end;align-items:center;}
	.util_list {position:relative;display:flex;align-items:center;justify-content: flex-start;margin-left:-1.3rem;margin-right:-1.3rem}
	.util_list li {position:relative;padding:0 1.3rem;}
	.util_list li:not(:last-child) {padding-right:1.3rem}
	.util_list li:not(:last-child):after {content:'';display:inline-block;width:1px;height:10px;background:var(--line-gray1);position:absolute;top:1px;right:0;}
	.util_list li a {display:block;color:var(--text-gray2);font-size: 1.3rem;line-height: 100%}	
	
	.util_list li.login {display: flex;justify-content: flex-start;align-items:center}
	.util_list li.login:after {content:'';display: block;width:28px;height:28px;background:url(../img/cmm/noprofile.svg) no-repeat center top #ccc;
		overflow: hidden;border-radius: 50%;border: 3px solid #ccc;margin-left:0.8rem;background-size:24px}
	
	.btn_menu {display: none}
	/* All menu layer */		
	#menu {position:absolute;top:60px;left:auto;right:0;bottom:auto;height:auto;border:1px solid var(--line-gray1); box-shadow:var(--shadow1); border-radius:var(--radius-s);width:370px}
	#menu .allmenu {max-height: 640px;overflow-y: scroll}
	
	
	
}



/* ------------------------------------------------------- Sub menu ------------------------------------------------------- */

.sub_menu {position: relative;height:60px;display: flex;justify-content: flex-start;align-items: center;border-top:1px solid var(--line-gray2)}
.sub_menu ul {margin-left:-0.8rem;margin-right:-0.8rem;}
.sub_menu ul li {padding:0 0.8rem}
.sub_menu ul li a {display:inline-block;font-size:1.4rem; color:var(--text-gray3);padding:0 0.2rem;font-weight: bold;}
.sub_menu ul li.on a {color:var(--text-gray1);}

@media (min-width: 1200px) {
	
	.sub_menu {height: 80px;}
	.sub_menu ul {margin-left:-1.2rem;margin-right:-1.2rem;}
	.sub_menu ul li {padding:0 1.2rem}
	.sub_menu ul li a {font-size:1.6rem;padding:0 0.8rem;}
	
}


/* ------------------------------------------------------- FOOTER ------------------------------------------------------- */

#ft {position:relative;margin:0;padding:0;color:var(--text-gray3);text-align:left;background:#f6f6f6}

.footer_top {display: flex; flex-direction: column; justify-content:flex-start;align-items:flex-start;padding:3.2rem 0 0rem}

.footer_top .lang a {color:var(--text-gray2);border:1px solid var(--line-gray1);border-radius: 50px;}

.footer_top .fnb {display: block;justify-content: flex-start;align-items: center;margin-top:2.4rem;}
.footer_top .fnb ul {display: flex;justify-content: flex-start;align-items: center;margin-left:-0.8rem;margin-right:-0.8rem;flex-wrap: wrap}
.footer_top .fnb ul li {position:relative;padding-left:0.8rem;padding-right:0.8rem;padding-right:0.8rem;}
.footer_top .fnb ul li:after {content:'';display:inline-block;width:1px;height:12px;background:#ccc;position: absolute;top:0;right:0;bottom:0;margin: auto 0}
.footer_top .fnb ul li:last-child:after {content:none;}
.footer_top .fnb ul li a {color:var(--text-gray2); font-weight:bold;}

.footer_top .fnb h3 {font-size: 1.6rem;line-height: 100%;font-weight: bold;color:var(--text-gray1)}
.footer_top .fnb .depth2 li {margin-top:2rem;line-height: 100%;}

.address {padding:2rem 0 4rem}
.address address > div {margin-bottom:8px}

.copyright {margin-top:2.4rem}


@media (min-width: 1200px) {
	
	.footer_top {flex-direction: row; justify-content: space-between;align-items: center;padding:3.2rem 0 2.4rem}
	
	.footer_top .fnb {margin-top:0}
	.footer_top .fnb ul {margin-left:-1.6rem;margin-right:-1.6rem;}
	.footer_top .fnb ul li {padding-left:1.6rem;padding-right:1.6rem}
	.footer_top .fnb ul li a {color:var(--text-gray2); font-weight:bold}
	
	.address {padding:3.2rem 0 4rem;border-top:1px solid var(--line-gray1)}
	.address address > div {margin-bottom:4px}
	
	
}




/* 드래그 블록 색상 */
::selection {background:#111;color:#FFF;text-shadow:none;}
::-moz-selection {background:#111;color:#FFF;text-shadow:none;}
::-webkit-selection {background:#111;color:#FFF;text-shadow:none;}

/* animate */
@keyframes header_fix{0%{opacity:0}100%{opacity:1}}
@keyframes menu_on0{0%{opacity:0}100%{opacity:1}}
@keyframes menu_on1{0%{transform:translateY(50%) rotateX(90deg)}100%{transform:translateY(0) rotateX(0)}}