@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:#ff3333; padding:10px 0;border-top:1px solid #ff3333 ; border-bottom:1px solid #ff3333 ; border-left:1px solid #ff3333 ;  }
#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:15px 0 15px 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('/theme/basic/img/mobile/ico_m_nav_minus.png')no-repeat; transition:.2s linear; }
#m-nav .nav > div.active h2 a::after{transform:rotate(-90deg); background:url('/theme/basic/img/mobile/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:#ff3333; font-weight:700;}
#m-nav .btn-close { position:absolute; right:0; top:10px;}
#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; }
body.fixed #m-nav { left:0; }
body.fixed .bg-gnb { display:block; }

/*사이트 공통*/

/* header 헤더 */
#header{width:100%;
	position:fixed;
	top:0;
	padding:28px 20px 0 60px;
	background-color:#fff;
	font-size:18px;
	min-height:35px;
	margin: 0 auto;
	
	z-index:3000; 
	color: #000;
	border-bottom: 1px solid rgba(128,128,128, 0.6);
	*-webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	*-moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	*box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);	
}
#Right_fix{position:fixed; right:50px; top:40px; background:#fff; z-index:99;}
#Right_fix ul{display:flex;  }
#Right_fix ul.menu_R > li{position:relative; }
#Right_fix ul.menu_R > li > a{display:block;width:50px; height:50px; font-size:0;}
#Right_fix ul.menu_R > li > a.menu_all{background:url('/images/common/icon_menu.png' ) no-repeat center center;}
#Right_fix ul.menu_R > li > a.menu_lang{background: url('/images/common/ico_my.png' ) no-repeat center center}
#Right_fix ul.menu_R > li > ul.familyLink{display:none; position:absolute; left:-35px; top:45px; border:1px solid #ccc; width:120px; background:#fff; font-size:0.9em; text-align:center}
#Right_fix ul.menu_R > li > ul.familyLink li{padding-bottom:5px}
#Right_fix ul.menu_R > li > ul.familyLink li a{display:inline-block; padding:5px 10px}
div.menu_my{height:50px; align-content:center; padding-right:10px; display:inline-block; color:#ff3333; margin-left:50px}

div.menu_my a{border:1px solid #ff3333;padding:5px 20px; border-radius:20px; font-size:0.8em; margin-right:3px}
@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;}
#Right_fix ul.menu_R > li > ul.familyLink{background:#fff; top:45px;}
#Right_fix ul.menu_R > li > ul.familyLink li{border-bottom:1px solid #ccc}
#Right_fix ul.menu_R > li > ul.familyLink li a{ }
}
@media(max-width:1400px){
#Right_fix{top:10px; right:10px;}
}
@media(max-width:840px){
#Right_fix{top:10px; right:0px;}
#Right_fix ul.menu_R > li > a{display:block;width:40px; height:40px; font-size:0;}
div.menu_my{font-size:15px; }
div.menu_my span:nth-child(1)::after{padding:0 2px; }

}
@media(max-width:640px){

div.menu_my{font-size:13px; gap:2px}


}
#header.headerin{ background-color:#fff; color:#000; z-index:99999999999999}
#header.headerin #top #navi ul.topngb li a {color:#000;}
#header #top { max-width: 100%; width:100%; vertical-align: middle; display: block; position:relative; }

#header #top > #navi {text-align:center;}
#header #top > #navi:after{clear:both; display:block; content:'';}
#header #top h1 { display: inline-block; float: left; width: 230px; position: absolute; top:auto; bottom:28px; left: 0; right:0;}
#header #top #navi ul.topngb{ display:flex; justify-content:flex-end; margin-right:300px;/* width:1000px;  */}
#header #top #navi > ul.topngb > li {text-align:center; display: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 30px 25px 30px; font-size:22px;font-family: 'ONE-Mobile-Title';}
#header #top #navi ul.topngb > li:hover > a{font-weight:500;}



#header #top #navi ul.topngb li div.submenu{display: none; overflow: hidden; position: fixed; left: 0px; width: 100%; background-color: rgba(255,255,255,1); top:95px; padding:0px 0;}
#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:1200px; float:right; text-align:left;}
#header #top #navi ul.topngb li:nth-child(1) div.submenu > .submenu_div {padding-left:0px;}
#header #top #navi ul.topngb li:nth-child(2) div.submenu > .submenu_div {padding-left:140px}
#header #top #navi ul.topngb li:nth-child(3) div.submenu > .submenu_div {padding-left:300px;}
#header #top #navi ul.topngb li:nth-child(4) div.submenu > .submenu_div {padding-left:350px}
#header #top #navi ul.topngb li:nth-child(5) div.submenu > .submenu_div {padding-left:450px}
#header #top #navi ul.topngb li:nth-child(6) div.submenu > .submenu_div {padding-left:530px}
#header #top #navi ul.topngb li:nth-child(7) div.submenu > .submenu_div {padding-left:550px}
#header #top #navi ul.topngb li:nth-child(8) div.submenu > .submenu_div {padding-left:520px}

#header #top #navi ul.topngb li div.submenu > .submenu_div ul li {display:inline-block; font-size:16px;}
#header #top #navi ul.topngb li div.submenu > .submenu_div ul li a {color:#292929;display:block; padding:10px 20px 10px 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;}

ul.right_quick {position:fixed;bottom:20px;right:20px; width:65px; z-index:99999999999999999999}
ul.right_quick li{padding:5px 0}
#scroll-top {width:60px;height:60px;line-height:60px;border:1px solid #ccc; text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5); border-radius:50px; transition:0.3s;}
#scroll-top:hover {background:#ff3333;color:#fff; border:1px solid transparent;}




/*상세페이지 상단 _ 사이트 네비 맵바 */
.contents{color:#666; font-size:18px; line-height:1.5em }

#contents{width:100%; height:auto; clear:both; display:block; position:relative; margin-bottom:80px; *border:1px solid #e7e7e7; position:relative; width:100%; margin: 0 auto;}


/*상세페이지 상단_ background_img : 메뉴의 대분류 코드값을 따라가므로(bg10의 10) 이미지 매치가 안되면 개발자에게 문의해주세요. */
#contents{background: url('/images/common/sub_topbg_00.jpg') no-repeat center center; background-size: cover; }
#contents.content_bg10{background: url('/images/common/sub_topbg_01.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg20{background: url('/images/common/sub_topbg_02.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg30{background: url('/images/common/sub_topbg_03.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg40{background: url('/images/common/sub_topbg_04.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg50{background: url('/images/common/sub_topbg_04.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg60{background: url('/images/common/sub_topbg_04.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg70{background: url('/images/common/sub_topbg_04.jpg') no-repeat center center; background-size: cover;}
#contents.content_bg80{background: url('/images/common/sub_topbg_04.jpg') no-repeat center center; background-size: cover;}



#content_title { max-width:1400px; min-height:584px; margin:0 auto; display:block; position:relative; }
#content_title > div.content_title_div { position: absolute;    top: 50%;    left: 0;    right: 0;    bottom: 0;   z-index:1; }
#content_title >div.content_title_div > div.content_title_text > h2 {font-size:3em; text-align:left; color:#fff;  line-height:1em;  letter-spacing:-3px; font-weight:600; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.45);}
#content_title >div.content_title_div > div.content_title_text > p {font-size:1.1em; font-weight:500; color:#fff;  line-height:1.5em; margin-bottom:5px}


@media(max-width:1400px){
#content_title { min-height:345px; margin:0 auto; display:block; position:relative; }
#content_title > div.content_title_div { padding:0 10px; ;    }
}
@media(max-width:840px){
#content_title { min-height:280px; text-align:center;margin:0 auto; display:block; position:relative; }
#content_title >div.content_title_div > div.content_title_text > h2 {font-size:2.5em;text-align:center;}
}

@media(max-width:640px){
#content_title { min-height:200px; margin:0 auto; display:block; position:relative; }
#content_title >div.content_title_div > div.content_title_text > h2 {font-size:2em; }

}


/*3depth 기능*/


.site_map {	display:none; position: fixed; left: 0; top: 0; background:url("/images/common/bg_allmenu.jpg") no-repeat center center; background-size:cover; z-index: 900; width:100%;  height: 100%; border-radius: 10px; overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.site_map div.sitemap_wrap{width:1400px; margin:0 auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.sitemap_title{}
.sitemap{padding:10px;}

.sitemap_close {position: absolute; right: 15px; top: 15px; cursor:pointer;}
ul.sitemap{display:flex; flex-wrap:wrap; padding:100px 0 0 0; width:100%}

ul.sitemap > li {display: block; padding:0 20px; overflow: hidden; vertical-align: middle; width:25%; margin-bottom:50px;}
ul.sitemap > li > a {color: #fff; display: block; position:relative; font-size: 1.3em; font-weight: 600}
ul.sitemap > li > a::before{content:""; display:block; width:3px; height:20px; background:#ff3333; position:absolute; top:0; left:0; margin-left:-20px; border-radius:20px;}
ul.sitemap > li > ul {overflow: hidden; margin-top:20px;}

ul.sitemap > li > ul > li {display: block; font-size: 0.9em; color: #fff; font-weight: normal; margin-right: 20px; margin-bottom: 10px;}
ul.sitemap > li > ul > li a{color:#eee}
ul.sitemap > li > ul > li a:hover{color:#fff; font-weight:600;}


/* 패밀리 사이트 */
div.site{position:absolute; top:0; right:0;}
div.family1{position:relative; display:inline-block; width:180px; cursor:pointer; height:38px;}
div.family1 span{display:block; color:#333; font-weight:500; background:url("/images/common/family_btn.png") no-repeat right 15px center; line-height:38px;}
div.family1 ul.familyLink1{display:none; position:absolute; bottom:38px; right:0; width:100%; border:1px solid #ddd; background:#f4f4f4;}
div.family1 ul.familyLink1 li{float:none; padding:5px 0;}

/*공통하단*/
#footer {width:100%; padding:40px 10px; background-color:#fff;  text-align:center; position:relative; font-size:0.9em}
#footer > p{margin-bottom:20px}
#footer > p:nth-child(1){margin-bottom:5px}
#footer > ul{margin:20px}
#footer > ul {display:flex; flex-wrap:wrap; justify-content:center; font-size:0.9em; gap:0 5px;}
#footer > ul > li:last-child{margin-right:0px}
#footer > ul.f_menu > li {border:1px solid #ccc;  line-height:38px;}
#footer > ul.f_menu > li > a{display:inline-block; padding:10px 20px; }
#footer > div.add > ul{display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:20px;}
#footer > div.add > ul > li{width:100% }
#footer > div.add p{margin-bottom:20px }
#footer > div.add > ul > li > span:after{display:inline-block; content:"|";  margin:0 10px; }

dl.footer_dl{
	position: absolute;
    right: 120px;
    top:40px;
    width: 190px; height:55px;
    border: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 16px;
    color: #333;
	z-index:99;
	background:#fff;
}

dl.footer_dl > dt {z-index:9999; cursor: pointer;  }

dl.footer_dl dd {
    display: none;
    z-index: 9999;
    background: #fff;
    box-sizing: border-box;
		
}
#footer dd.familyLink1 ul > li {padding:5px;     display: block;    width: 100%; margin-right:0; }
#footer dd.familyLink1 ul > li a {    display: block;	color:#333;	}

#footer dt.family1 > span{ position:absolute; right:20px;}

@media (max-width:640px) {

	
	#footer {width:100%; font-size:14px; line-height:1.5em; margin-top:0}

	#footer > ul.f_menu > li {border:1px solid #ccc;  line-height:28px;}
#footer > ul.f_menu > li > a{display:inline-block; padding:5px 5px; }


div.family1{display:none; }
ul.right_quick {position:fixed;bottom:20px;right:0px; width:45px; z-index:99999999999999999999}
ul.right_quick li{padding:5px 0}
#scroll-top {width:45px;height:45px;line-height:45px;border-radius:50%;}

}
/*media*/

@media (max-width:1400px) {
	#header h1 img{}
	#header #top{width:100%; height:auto;}
	#header #top #navi {position:fixed;right:5px; }
	
	#header{ padding: 0 0;  background-color:#fff; z-index:600; font-size:18px; *padding-top: 20px !important; min-height: auto; padding: 20px 0; }
	#header #top #navi ul.topngb{display:none;}
	#header #top #navi ul.topntop_01{display:none;}
	#header #top #navi ul.topntop_02{}
	#header #top { height: 50px;}
		#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%;}

	#m-nav{display:block;}
	#footer{font-size:16px;padding:20px 10px 20px 10px;}
	#footer .site_link {font-size:14px; line-height:1.5em; padding:15px 0;}
 br { display:none; } 
 br.enter { display:block; } 

}


@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;}

#footer { font-size:13px;padding:20px 0px 20px 0px;}
#footer > ul.f_menu > li > a{padding:10px 5px;font-size:13px; }

}




@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;	}
}



#sub_nav > div {display:block;max-width:1400px; width:100%; height:72px; margin:0 auto; padding:25px 20px;}
#sub_nav:after{display:block; clear:both; content:'';}

#sub_nav > div > a {padding-left:10px; padding-right:20px; border-right:1px solid #ccc; line-height:1.0em;}
#sub_nav .depth_link{ display:inline-block; color:#fff; padding-right:20px }
#sub_nav .depth_link dl li {margin:10px 0;}
#sub_nav .depth_link dt {width: 280px;	padding: 20px 30px;	font-size: 18px;line-height:1.0em;	cursor:pointer; 	position:relative; border-bottom:1px solid #ccc }
#sub_nav .depth_link dt > img.down_vector{	position: absolute;	top: 50%;	right: 10px;}
#sub_nav .depth_link dd {	display: none;	z-index:5;	box-sizing: border-box;	position: absolute;	width: 280px; top: 100px;}
#sub_nav .depth_link dd ul{background-color:#fff; box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.10); border-radius:10px;}
#sub_nav .depth_link li{padding: 15px 30px; font-size:18px;}
#sub_nav .depth_link li a {width:100%; display:block;}
#sub_nav .depth_link li:hover > a { color:#ff3333; font-weight:700;}

h3{max-width:1400px;; display:block; text-align:left; font-size:2.5em;letter-spacing:-0.02em; font-weight:700; margin:100px auto 60px auto; color:#000 ;}
h3 > span:after{display:inline-block; content:"."; color:#ff3333;padding-left:5px; font-size:1.5em}
h3 > p{font-size:0.5em !important; font-weight:600; margin:30px 0 30px 0;}
h3 > p > span{color:#ff3333;}
.SubContent{width:100%; font-size:1em; margin:0 auto 50px auto; min-height:800px}

h4{width:100%; text-align:left; font-size:1.6em; letter-spacing:-3px; font-weight:600 !important; margin-bottom:50px }

div.subConten_in_01{max-width:1400px; margin:0 auto; padding:0px 0;}
div.subConten_in_01_1{max-width:1400px; margin:0 auto; padding-bottom:80px;}
div.subConten_in_01_2{max-width:1400px; margin:0 auto; padding:80px 0;}
div.subConten_in_02{width:100%; padding:80px 0; overflow:hidden }
div.subConten_in_03{width:100%; padding:80px 0; background:#f2f2f2; }
div.subConten_in_04{width:100%; padding:80px 0 0 0; background:#f2f2f2; }


@media (max-width:1400px) {
#sub_nav{display:none}
#sub_nav > div {display:block;max-width:1400px; width:100%; height:40px; margin:0 auto; padding:25px 20px;}
div.subConten_in_01{padding:0px 20px;}
div.subConten_in_01_1{padding:0 20px 40px 20px;}
div.subConten_in_01_2{padding:40px 20px;}
div.subConten_in_02{padding:40px 20px;  }
div.subConten_in_03{ padding:40px 20px; }
div.subConten_in_04{ padding:40px 20px 0 20px;}
}
@media (max-width:840px) {
	
	div.subConten_in_01{padding:20px 10px }
	div.subConten_in_01_1{padding:20px 10px }
	div.SubContent > div.subConten_in_01_1{padding:20px 10px}
	div.SubContent > div.subConten_in_02{padding:20px 10px; }
	div.SubContent > div.subConten_in_03{padding:20px 10px; }
	div.SubContent > div.subConten_in_04{padding:20px 10px 0 10px; }

}






@media (max-width:1000px) {


.content_head > H2{margin:0 auto; display:block; font-size:34px; position: absolute; top:100px;}

h3 > p{margin:20px 0 20px 0; font-size:0.6em !important;}
h3 span:after{font-size:1em}
.SubContent{max-width:100%; font-size:16px; margin:0 auto 30px auto;padding:0px 10px !important;}
h3{font-size:1.8em;margin:20px 0 20px 10px;}
}
@media (max-width:840px) {
.SubContent{font-size:16px; }

h4{letter-spacing:-1px; }

}

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



}

.hd_pops_footer button{font-size: 15px;}