@charset "utf-8";

/* MOBILE */
#m-nav { position:fixed; left:-100%; top:0; height:100%; width:100%; background:#fff;  transition:all 0.3s ease; -webkit-transition:all 0.3s ease; z-index:999999}
#m-nav .etc { *padding-top:50px; overflow:hidden; }
#m-nav .etc a { display:block; float:left; width:50%; border-top:1px solid #444; border-bottom:1px solid #444; border-left:1px solid #444; text-align:center; font-size:15px; color:#fff; background:#333; padding:10px 0; }
#m-nav .etc a.on {  background:#0099cc; padding:10px 0;border-top:1px solid #0099cc; border-bottom:1px solid #0099cc; border-left:1px solid #0099cc;  }
#m-nav .etc a:first-child { border-left:0;  }
#m-nav .nav h2 { line-height: 2em; }
#m-nav .nav h2 a {position:relative; display:block; font-size:17px; font-weight:600; padding:10px 0 10px 10px; border-bottom:1px solid #ededed;  }
#m-nav .nav h2 a::after{content:""; display:block; transform:rotate(90deg); position:absolute; top:15px; right:15px; width:7px; height:13px; background:url('/images/common/ico_m_nav_minus.png')no-repeat; transition:.2s linear; }
#m-nav .nav > div.active h2 a::after{transform:rotate(-90deg); background:url('/images/common/ico_m_nav_minus_on.png')no-repeat;}

#m-nav .nav ul { display:none; border-bottom:1px solid #ddd; }
#m-nav .nav ul li a { display:block; font-size:17px; padding:15px 0 15px 10px; }
#m-nav .nav > div.active ul {}
#m-nav .nav > div.active h2 a {color:#fff; background:#c4013e; font-weight:700;}
#m-nav .btn-close { position:absolute; right:0px; top:10px; z-index:99999999}
#m-nav .btn-close span{ color:#000; font-size:35px  !important }
#m-nav > h1 > a > img {width:140px;}
.bg-gnb { display:none; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.7); z-index:601;}

/* Mobile Active */
body.fixed  { overflow:hidden !important; position:relative }
body.fixed #m-nav { left:0; }
body.fixed .bg-gnb { display:block; }

/*사이트 공통*/

/* header 헤더 */
#header{width:100%;
	position:fixed;
	top:0;
	
	background-color:rgba(0,0,0,0.3);
	z-index:600; font-size:18px;
	min-height:35px;
	margin: 0 auto;
	background-color: #fff;
	z-index: 9;
	color: #000;
	box-shadow: 0 0 25.906px 0 rgba(0, 0, 0, 0.10);
	height:128px; 
}
#Right_fix{position:fixed; right:0; top:0; background:#fff; width:110px; background:yellow;
	z-index:99; display:none}
#Right_fix ul{width:47px; }
#Right_fix ul.menu_R > li{position:relative}
#Right_fix ul.menu_R > li > a{display:block;width:47px; height:47px; border-radius:50%; font-size:0; background:#999}
#Right_fix ul.menu_R > li > a.menu_all{background:#c4013e url('/images/common/ico_menuAll.png' ) no-repeat center center; background-size:cover; margin-bottom:10px; }
@media(max-width:1600px){
#Right_fix{position:fixed; right:20px; top:20px; background:transparent; width:auto; height:auto; border-left:0;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);z-index:99}
#Right_fix ul{width:auto; margin:10px 0 0 0; display:flex}
#Right_fix ul > li{margin-right:5px}
#header #top #navi ul.topngb li div.submenu{width:100% !important;}
}
@media(max-width:1600px){
/* #Right_fix{display:none;} */
#main_div{width:100% !important;}
}
@media(max-width:1400px){
#Right_fix{top:10px; right:10px;}
}
@media(max-width:840px){
#Right_fix{top:10px; right:0px;}
}
#header.headerin{ background-color:#fff; color:#000;}
#header.headerin #top #navi ul.topngb li a {color:#000;}
#header #top { /* max-width: 1700px;*/ width:100%; height:100%; /*padding:16px 0 16px 0;*/padding:16px 15px 16px 15px; display:flex; align-items:center;  justify-content:center; align-items:center; /*position:relative;margin:0 auto*/} /*2025-12-03 수정*/
#header #top > #navi {display:flex; justify-content:center; align-items:center}
#header #top > #navi:after{clear:both; display:block; content:'';}
#header #top h1 { position: absolute;top: 50%;left: 0;transform: translate(0, -50%);}
#header #top #navi ul.topngb{ display:inline-block;}
#header #top #navi > ul.topngb > li {text-align:center; display:inline-block;}
#header #top #navi > ul.topngb > li:after{clear:both; display:block; content:'';}
#header #top #navi > ul.topngb > li > a{color:#000; display:block; padding:25px 60px 0 60px; font-size:1.2em; font-weight:600}
#header #top #navi ul.topngb > li:hover > a{font-weight:500;}

#header #top #navi > ul.topngb > li > a::after{content:""; display:block; border-bottom:2px solid #c4013e; transform: scaleX(0); transition: transform 250ms ease-in-out; padding-bottom:20px;}
#header #top #navi > ul.topngb > li > a:hover::after{transform: scaleX(1);}

#header #top #navi ul.topngb li div.submenu{display: none; overflow: hidden; position: fixed; left: 0px; width: 100%; background:#fff; top:100px; padding:10px 0; z-index:300000000000000000000000}
#header.headerin #top #navi ul.topngb li div.submenu {background-color: rgba(255,255,255,1); border-top:1px solid #e7e7e7}
#header #top #navi ul.topngb li div.submenu:after{clear:both; display:block; content:'';}

#header #top #navi ul.topngb li div.submenu > .submenu_div {width:1100px;text-align:left; margin:0 auto; }
#header #top #navi ul.topngb li:nth-child(1) div.submenu > .submenu_div {padding-left:10px;}
#header #top #navi ul.topngb li:nth-child(2) div.submenu > .submenu_div {padding-left:300px}
#header #top #navi ul.topngb li:nth-child(3) div.submenu > .submenu_div {padding-left:420px;}
#header #top #navi ul.topngb li:nth-child(4) div.submenu > .submenu_div {padding-left:400px}
#header #top #navi ul.topngb li:nth-child(5) div.submenu > .submenu_div {padding-left:500px}
#header #top #navi ul.topngb li:nth-child(6) div.submenu > .submenu_div {padding-left:580px}
#header #top #navi ul.topngb li:nth-child(7) div.submenu > .submenu_div {padding-left:600px}
#header #top #navi ul.topngb li:nth-child(8) div.submenu > .submenu_div {padding-left:875px}

#header #top #navi ul.topngb li div.submenu > .submenu_div ul li {display:inline-block; font-size:16px; font-weight:700;}
#header #top #navi ul.topngb li div.submenu > .submenu_div ul li a {color:#292929;display:block; padding:5px 20px 0 20px }
#header #top #navi ul.topngb li div.submenu > .submenu_div ul li:hover a {display:block; color:#3366cc;}
#header.headerin #top #navi ul.topngb li a {text-shadow: none;}
#header.headerin #top #navi ul.topngb li:hover > .submenu{display:block;}






/*상세페이지 상단 _ 사이트 네비 맵바 */


#contents{ height:160px; width:100%; max-width:1700px; position:relative;  margin: 160px  auto 0 auto; position:relative; }


/*상세페이지 상단_ background_img : 메뉴의 대분류 코드값을 따라가므로(bg10의 10) 이미지 매치가 안되면 개발자에게 문의해주세요. */
#contents{background:#EF8BA6 url('/images/common/01_topimg.png') no-repeat calc(100% - 300px) bottom; background-size: 400px auto; }
#contents.content_bg10{background:#EF8BA6 url('/images/common/01_topimg.png') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg20{background:#5DB8E9 url('/images/common/02_topimg.png') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg30{background:#2BAB3A url('/images/common/03_topimg.png') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg40{background:#00418E url('/images/common/04_topimg.png') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg50{background: url('/images/common/sub_topbg_05.jpg') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg60{background: url('/images/common/sub_topbg_06.jpg') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg70{background: url('/images/common/sub_topbg_07.jpg') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}
#contents.content_bg80{background: url('/images/common/sub_topbg_08.jpg') no-repeat calc(100% - 300px) bottom; background-size: 400px auto;}



#content_title { width:100%;  height:100%; margin:0 auto; display:block; position:relative; padding:40px 80px 0 80px}
#content_title > div.content_title_div { color:#fff;  }
#content_title >div.content_title_div > div.content_title_text > h2 {font-size:1em; font-weight:400; text-align:left;  line-height:1.5em;  }
#content_title >div.content_title_div > div.content_title_text > p {font-size:1.6em; font-weight:700;  line-height:1.2em;}
#content_title >div.content_title_div > ul.location {font-size:0.9em; position:absolute; right:10px; bottom:10px; display:flex}
#content_title >div.content_title_div > ul.location li a {color:#fff}
#content_title >div.content_title_div > ul.location li a span:after {display:inline-block; content:">"; padding:0 5px; vertical-align:middle }
#content_title >div.content_title_div > ul.location li:last-child a span:after {content:""; }
ul.depth_navi {max-width:1700px; display:flex; margin:0 auto; padding:20px 0; font-size:1.1em; font-weight:700; justify-content:center; gap:32px; }
ul.depth_navi li a { display:inline-block; padding:10px 0; }
ul.depth_navi li a.on { border-bottom:2px solid #C4013E;  color:#C4013E}


@media(max-width:1400px){
#content_title { min-height:100%; margin:0 auto; display:block; position:relative; }
#content_title > div.content_title_div { padding:0 10px; ;    }
}
@media(max-width:1200px){
#content_title { padding:20px 20px 0 10px;min-height:170px;}
#contents.content_bg10{background:#EF8BA6 url('/images/common/01_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 300px auto;}
#contents.content_bg20{background:#5DB8E9 url('/images/common/02_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 300px auto;}
#contents.content_bg30{background:#2BAB3A url('/images/common/03_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 300px auto;}
#contents.content_bg40{background:#00418E url('/images/common/04_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 300px auto;}
#content_title >div.content_title_div > ul.location {left:10px;right:auto; bottom:10px; display:flex}
}
@media(max-width:840px){
#content_title { min-height:170px; text-align:left;margin:0 auto; display:block; position:relative; padding:20px 20px 0 10px}
#content_title > div.content_title_div > div.content_title_text > h2 {text-align:left;}
ul.depth_navi {gap:22px; padding:10px 0 }
#contents.content_bg10{background:#EF8BA6 url('/images/common/01_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 200px auto;}
#contents.content_bg20{background:#5DB8E9 url('/images/common/02_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 200px auto;}
#contents.content_bg30{background:#2BAB3A url('/images/common/03_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 200px auto;}
#contents.content_bg40{background:#00418E url('/images/common/04_topimg.png') no-repeat calc(100% - 0px) bottom; background-size: 200px auto;}
#content_title >div.content_title_div > div.content_title_text > h2 {font-size:0.9em;  }
#content_title >div.content_title_div > div.content_title_text > p {font-size:1.2em; }
ul.depth_navi {padding:10px 0; font-size:0.9em; font-weight:700; justify-content:center; gap:10px; }
}

@media(max-width:640px){
#content_title { min-height:150px; margin:0 auto; display:block; position:relative; }
ul.depth_navi {display:none }

}


/*media*/

@media (max-width:1200px) {
	#header h1 img{margin-left:20px;}
	#header #top{width:100%; height:auto;}
	#header #top #navi {position:fixed;right:5px; }
	
	#header{ padding: 0 0;   z-index:600; font-size:18px;height: auto; padding: 10px 0; }
	#header #top #navi ul.topngb{display:none;}
	#header #top #navi ul.topntop_01{display:none;}
	#Right_fix{ display:block}
		#header #top h1{display:block;width:100%; bottom:auto; margin-left:5px; font-size:1.7em;}
	#header h1 > a {display:block;}
	
	#header h1 img{width:180px}

	#header #top #navi ul.topntop_02 > li > a { width: 40px; height: 40px; border-radius: 20px; padding: 12px;}
	#header #top #navi ul.topntop{padding:20px 0;}
	#header #top > #navi {display: inline; width: auto; margin-left:0;	}
	#header #top{width:100%;}
#Right_fix ul{width:auto; }
#Right_fix ul.menu_R > li > a{width:30px; height:30px; }
#Right_fix ul.menu_R > li > a.menu_all{ margin-bottom:0px; }
	#m-nav{display:block;}

 br { display:none; } 
 br.enter { display:block; } 
 #Right_fix ul.menu_R > li > a.menu_lang{display:none}
}


@media (max-width:840px) {
#Right_fix{top:5px;}
#header h1 img{margin-top:-5px;}
#header #top { height: 40px;}


}
@media (max-width:640px) {
#Right_fix{top:0px;}
#header h1 img{margin-top:-10px; width:120px}
#header #top { height: 25px;}

}





@media (max-width:480px) {/*필요시만 추가*/
	
	/*서치아이콘 메뉴아이콘*/
	#header #top #navi ul.topntop {    padding: 20px 0; }
	#header #top #navi ul.topntop_02 > li {margin-left:0;}
	#header #top #navi ul.topntop_02 > li > a#toggle_search {background-color:#fff;}
	#header #top #navi ul.topntop_02 > li > a { padding:15px 10px 15px 0px; width:40px;}
	#header #top #navi ul.topntop_02 > li:nth-child(1) > a{background: url('/_theme/basic/img/icon_searchbtn_m.png') no-repeat center center; background-color:none;}
	#header #top #navi ul.topntop_02 > li:nth-child(2) > a{background: url('/_theme/basic/img/icon_menubtn_m.png') no-repeat center center;  background-color:#fff;}
}
@media (max-width:320px) {
	#header #top #navi ul.topntop_02 > li > a {width: 1em;height: 1em;border-radius: 1em;padding: 1em;	}
}





.SubContent{width:100%; max-width:1700px; font-size:20px; margin:50px auto 100px auto;  position:relative;}
.SubContent h3{font-size:1.6em; font-weight:700;}
.SubContent h3 + p{margin:10px 0 24px 0}
@media (max-width:1700px) {


}
@media (max-width:1700px) {
.SubContent{padding:0 10px;}

}
@media (max-width:1200px) {
#contents{ height:160px; margin: 50px  auto 0 auto; position:relative;}


}
@media (max-width:1000px) {
.SubContent{font-size:18px;margin:50px auto; }

}
@media (max-width:840px) {
.SubContent{font-size:16px; margin:30px auto;}

}
@media (max-width:640px) {
.SubContent{font-size:14px;margin:20px auto;}

}

/*공통하단*/
#footer {width:100%; padding:72px 10px; background-color:#f7f7f7;   position:relative; font-size:0.8em}
#footer > div {max-width:1700px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap}

#footer > div > ul {display:flex; flex-wrap:wrap;flex-direction:column; gap:5px;}
#footer > div > ul.f_menu > li > a{display:inline-block; }
#footer > div > div.footer_add{}

@media (max-width:840px) {
#footer {width:100%; font-size:16px;padding:30px 10px; }
#footer > div > div.footer_ci {width:100%; text-align:center; margin-bottom:20px}

}


@media (max-width:640px) {
	#footer {width:100%; font-size:14px; line-height:1.5em; margin-top:0}
	#footer > div > div {width:100%; margin-bottom:10px }
	#footer > div > div {width:100%; margin-bottom:10px }
#footer > div > div.footer_ci img{width:150px}


}


#visual{z-index:5;}


/* 전체 GNB 영역 */
.gnb_wrap {
	position: relative;
	background: #fff;
}

/* 1depth 메뉴 */
.topngb {
	display: flex;
	justify-content: center;   /* 가운데 정렬 */
	gap: 40px;                 /* 메뉴 사이 간격 */
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;        /* 하위 .submenu의 기준 */
	z-index: 100;
}

.topngb > li {
	position: relative;
}

.topngb > li > a {
	display: block;
	padding: 16px 0;
	font-size: 17px;
	font-weight: 600;
	color: #222;
	text-decoration: none;
}

.topngb > li:hover > a {
	color: #0059b3;
}

/* 2depth 공통 드롭다운 영역: 하나의 큰 바처럼 보이게 */
.topngb .submenu {
	position: absolute;
	left: 0;
	top: 100%;           /* 1depth 바로 아래 */
	width: 100%;         /* GNB 전체 폭(부모 .topngb 기준) */
	background: #fff;
	border-top: 1px solid #ddd;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	display: none;       /* 기본 숨김 */
}

/* hover 시 해당 li의 submenu 하나만 보이게 */
.topngb > li:hover .submenu {
	display: block;
}

/* 안쪽 실제 콘텐츠 영역 (센터정렬용) */
.submenu_div {
	max-width: 1200px;      /* 사이트 폭 맞춰서 조정 */
	margin: 0 auto;
	padding: 20px 0 24px;
}

/* 2depth 리스트 */
.submenu_div > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.submenu_div > ul > li > a {
	display: block;
	font-size: 15px;
	color: #333;
	text-decoration: none;
	padding: 4px 0;
}

.submenu_div > ul > li > a span {
	display: inline-block;
}

.submenu_div > ul > li > a:hover {
	color: #0059b3;
}

/* 전체 메뉴 영역에 마우스가 올라가 있을 때만 2depth 유지 (상단 밖으로 나가면 닫힘) */
.gnb_wrap:hover .submenu {
	/* 아무것도 안해도 되고, 필요 시 트랜지션 등 추가 가능 */
}

/* 옵션: 드롭다운 높이 부드럽게 */
.topngb .submenu {
	transition: opacity 0.2s ease;
	opacity: 0;
	pointer-events: none;
}

.topngb > li:hover .submenu {
	opacity: 1;
	pointer-events: auto;
}


#submenu {
    display: none;
    /*margin-top: -2px;*/
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    z-index: 999;
    background-color: #fff;
    color: #717171;
    width: 100%;
    height: auto;
    position: absolute;
	top:120px;
}

#submenu > div {
    font-size: 22px;
    padding: 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;

	display:flex;


	font-size: 22px;
    padding: 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;

	 align-items: stretch;
}

#submenu .nav_2dul {
    padding: 0 0 30px 50px;
    position: relative;
    
    
	width:100%;
}
#submenu .nav_2dul:last-child{
	
}

#submenu .nav_2dul:hover{
	border-top:2px solid #c4013e;
	margin-top:-2px;
}
#submenu .nav_2dul .nav_2dli {
    margin-top: 10px;
    font-size: 18px;
}

#submenu .nav_2dul .nav_2dli:hover a {
	color: #c4013e; font-weight:500;
}

#submenu a {
    color: #717171;
	
}