@charset "utf-8";

/* MOBILE */
#m-nav { position:fixed; left:-100%; top:0; height:100%; width:calc(100% - 40px); 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:4px 0; }
#m-nav .etc a:first-child { border-left:0;  }
#m-nav .nav h2 { line-height: 2em; }
#m-nav .nav h2 a { display:block; font-size:17px; font-weight:600; padding:15px 0 15px 10px; border-bottom:1px solid #ededed;  }
#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:#009999; font-weight:700; background-image: url(/_theme/basic/img/mobile/ico_m_nav_minus.png);}

#m-nav .btn-close { position:absolute; right:-40px; top:0px; background:#000; width:40px; height:40px; }
#m-nav .btn-close span{ color:#fff; font-size:40px  !important }
#m-nav > h1 > a > img {width:180px;}
.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; }

/*사이트 공통*/
#wrap{ min-width:1800px; position:relative}
/* header 헤더 */
#header_new{width:100%;
	position:fixed;
	top:0;
	padding:28px 20px 0 60px;
	z-index:999999999; font-size:18px;background:#fff;
	min-height:35px;

	color: #fff;;
	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);	
}
#header_new div.header_ci {position:absolute; z-index:999999999; left:50px; top:40px;width:570px; display:flex;}

#header_new.headerin{ background-color:#fff; color:#000;}
#header_new.headerin #top #navi ul.topngb li a {color:#000;}
#header_new #top { max-width: 100%; width:100%; min-width:1600px;height:auto !important; vertical-align: middle; position:relative; margin:0 auto}

#header_new #top > #navi {display:block; align-self:center; text-align:center; position:relative;}
#header_new #top > #navi:after{clear:both; display:block; content:'';}
#header_new #top h1 { }
div.top_search { display: flex; width:280px; margin-left:10px;height:50px; border-radius:30px; border:3px solid #3366cc; padding:3px 10px 0px 10px; overflow:hidden}
div.top_search input[type='text'] { border:0; height:25px;padding:0; width:130px; }
div.top_search input[type='text']:focus{border:0!important}
div.top_search input[type='image']{width:30px}

#header_new #top #navi ul.topngb{ float:right; display:flex; justify-content:center; width:1200px;  margin:0 auto; padding-left:150px; padding-right:50px }
#header_new #top #navi > ul.topngb > li {text-align:center;position:relative}
#header_new #top #navi > ul.topngb > li:after{clear:both; display:block; content:'';}
#header_new #top #navi > ul.topngb > li > a{color:#000; display:block; padding:25px 20px 0 20px; font-size:20px;}
#header_new #top #navi ul.topngb > li:hover > a{font-weight:500;}

 ul.rightmenu{position:absolute; right:20px; top:20px; display:flex; gap:10px;}
 ul.rightmenu li{position:relative;  }
 ul.rightmenu li > a{cursor:pointer}
 .member_menu{display:none; position:absolute;font-size:0.9em; border:1px solid #ccc; top:40px;left:-20px ; background:#fff; width:100px }
 .member_menu a{display:inline-block !important; padding:5px 10px !important; }
#header_new #top #navi > ul.topngb > li > a::after{content:""; display:block; border-bottom:2px solid #009999; transform: scaleX(0); transition: transform 250ms ease-in-out; padding-bottom:30px;}
#header_new #top #navi > ul.topngb > li > a:hover::after{transform: scaleX(1);}

#header_new #top #navi ul.topngb li div.submenu{ display:none; overflow: hidden;position: fixed; right: 0px; width: 100%; background-color: rgba(255,255,255,1); top:95px; padding:20px 0;  z-index:30000000000000; text-align:right}
#header_new.headerin #top #navi ul.topngb li div.submenu {background-color: rgba(255,255,255,1); border-top:1px solid #e7e7e7}
#header_new #top #navi ul.topngb li div.submenu:after{clear:both; display:block; content:'';}




#header #top #navi ul.topngb li div.submenu:after{clear:both; display:block; content:'';}


#header #top #navi ul.topngb li div.submenu > .submenu_div {text-align:left; width:1500px; float:right}

#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:5px 10px 0 10px }
#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;}

#header #top #navi ul.topngb li:nth-child(4) div.submenu > .submenu_div {padding-left:550px;}
#header #top #navi ul.topngb li:nth-child(6) div.submenu > .submenu_div {padding-left:650px;}
#header #top #navi ul.topngb li:nth-child(7) div.submenu > .submenu_div {padding-left:800px;}



/*상세페이지 상단 _ 사이트 네비 맵바 */
.contents{color:#666; font-size:1em; line-height:1.5em }
#contents{width:100%; height:auto; clear:both; display:block; position:relative; margin-bottom:80px; position:relative; width:100%; margin: 0 auto;}


/*상세페이지 상단_ background_img : 메뉴의 대분류 코드값을 따라가므로(bg10의 10) 이미지 매치가 안되면 개발자에게 문의해주세요.*/
#contents{background: #fff; }
#contents.content_bg10{}

#content_title { max-width:1400px; min-height:200px; margin:0 auto; margin-top:120px; display:flex; /* flex-wrap:wrap */;align-items:center; position:relative; }
div.content_title_text {position:relative;}
div.content_title_text > h2 {font-size:2.5em; text-align:left; line-height:1em;    font-family: 'ONE-Mobile-Title'; font-weight:400;  padding:20px 20px; display:block; }
div.content_title_text > h2::before {display:block; content:""; width:35px; height:25px; border-top:8px solid;border-left:8px solid;position:absolute; left:0px; top:0}
div.content_title_text > h2::after {display:block; content:""; width:35px; height:25px; border-bottom:8px solid;border-right:8px solid;position:absolute; right:0px; bottom:0;}
#content_title > ul { display:flex; flex-wrap:wrap; gap:5px;margin-left:20px;}
#content_title > ul > li > a{ display:inline-block; padding:10px 20px; border-radius:30px; border:1px solid; font-size:0.9em }
#content_title > ul > li.act_depth > a{color:#fff;  }


#contents.content_bg10 div.content_title_text > h2::before {border-color:#5c135b}
#contents.content_bg10 div.content_title_text > h2::after {border-color:#5c135b}
#contents.content_bg10 #content_title > ul > li > a{ border-color:#5c135b }
#contents.content_bg10 #content_title > ul > li.act_depth > a{ background:#5c135b; }

#contents.content_bg20 div.content_title_text > h2::before {border-color:#ff6633}
#contents.content_bg20 div.content_title_text > h2::after {border-color:#ff6633}
#contents.content_bg20 #content_title > ul > li > a{ border-color:#ff6633 }
#contents.content_bg20 #content_title > ul > li.act_depth > a{ background:#ff6633; }

#contents.content_bg30 div.content_title_text > h2::before {border-color:#1b2058}
#contents.content_bg30 div.content_title_text > h2::after {border-color:#1b2058}
#contents.content_bg30 #content_title > ul > li > a{ border-color:#1b2058 }
#contents.content_bg30 #content_title > ul > li.act_depth > a{ background:#1b2058; }

#contents.content_bg40 div.content_title_text > h2::before {border-color:#339999}
#contents.content_bg40 div.content_title_text > h2::after {border-color:#339999}
#contents.content_bg40 #content_title > ul > li > a{ border-color:#339999 }
#contents.content_bg40 #content_title > ul > li.act_depth > a{ background:#339999; }

#contents.content_bg50 div.content_title_text > h2::before {border-color:#339966}
#contents.content_bg50 div.content_title_text > h2::after {border-color:#339966}
#contents.content_bg50 #content_title > ul > li > a{ border-color:#339966 }
#contents.content_bg50 #content_title > ul > li.act_depth > a{ background:#339966; }

#contents.content_bg60 div.content_title_text > h2::before {border-color:#99cc66}
#contents.content_bg60 div.content_title_text > h2::after {border-color:#99cc66}
#contents.content_bg60 #content_title > ul > li > a{ border-color:#99cc66 }
#contents.content_bg60 #content_title > ul > li.act_depth > a{ background:#99cc66; }


@media(max-width:1400px){
#content_title { padding:0 10px }
div.content_title_text > h2 {font-size:2.5em;  padding:20px 20px; }

}
@media(max-width:840px){
#content_title { min-height:150px; }
div.content_title_text > h2 {font-size:2em;  padding:20px 20px; }
 div.content_title_text > h2::before {width:25px; height:15px; border-top:6px solid;border-left:6px solid }
 div.content_title_text > h2::after { width:25px; height:15px; border-bottom:6px solid;border-right:6px solid }
}

@media(max-width:640px){
#content_title { min-height:100px;  }
div.content_title_text > h2 {font-size:1.5em;  padding:10px 10px; width:100%; }
 div.content_title_text > h2::before {width:20px; height:10px; border-top:4px solid;border-left:4px solid }
 div.content_title_text > h2::after { width:20px; height:10px; border-bottom:4px solid;border-right:4px solid }
 #content_title > ul { margin-left:10px; margin-bottom:20px;margin-top:20px}
ul.rightmenu li ul.lang_menu li{margin-top:0}

}




.site_map {	display:none; position: fixed; left: 0; top: 0; background:url("/pc/images/common/bg_allmenu.jpg") no-repeat center center; background-size:cover; z-index: 900; width:100%;  height: 100%; border-radius: 10px; overflow: hidden;z-index:9999999999999;
	-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:#009999; 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;}


/*media*/




}
/*공통하단*/
#footer {width:100%; padding:100px 0px; background:#f3f4f6 !important;  color:#666; }
#footer > div.footer_in{max-width:100%; margin:0 auto; display:flex; flex-wrap:wrap;padding:80px 100px;background:#f3f4f6 !important;font-size:0.95em !important; }

#footer > div.footer_in > div.footer_01{}
#footer > div.footer_in > div.footer_01 p.footer_ci{margin-bottom:30px}
#footer > div.footer_in > div.footer_01 div.footer_store{display:flex; flex-wrap:nowrap; gap:10px; align-items:center; margin-bottom:30px}


#footer > div.footer_in > div.footer_02{color:#999999; font-size:1.1em; padding-left:100px}
#footer > div.footer_in > div.footer_02 p:nth-child(2){color:#333; font-family: 'ONE-Mobile-Title'; font-size:2em; letter-spacing: -0.02em; margin:10px 0}
#footer > div.footer_in > div.footer_02 p.footer_social{display:flex; flex-wrap:nowrap; gap:10px;  margin-top:30px}

#footer > div.footer_in > div.footer_03{color:#999999; font-size:0.9em; margin-top:20px; padding:10px 50px 0 0; border-top:1px solid #999}


#footer > ul {padding-top:20px}
#footer > ul > li{width:100%; display:flex; flex-wrap:wrap;padding-bottom:10px}
#footer > div.footer_in > div.footer_01 div.footer_store ul{display:flex; font-size:1.1em; font-weight:600}
ul.footer_menu{margin-left:20px}
ul.footer_menu li a{font-size:0.9em}
ul.footer_menu li span:after{display:inline-block; content:"/";  margin:0 10px;  color:#ccc; font-size:16px}
#footer > ul > li > dl{ display:flex; gap:10px;}
#footer > ul > li > dl > dd{ display:flex; flex-wrap:wrap;gap:10px;}
#footer > ul > li div:first-child{position:relative;}
#footer > ul > li div:first-child::after{content:""; display:inline-block; background:#999; position:relative; height:11px; width:1px; margin-left:25px;}
.right_quick {position:fixed; z-index:999999999999999999; right:10px; bottom:20px;display:flex; flex-direction:column; gap:10px; font-size:16px; text-align:center;  line-height:1.2em}
.right_quick > li{}
.right_quick > li  div {width:108px; height:108px; border-radius:50%; background:#ccc; margin-bottom:5px; overflow:hidden}
.right_quick > li  a{color:#ccc; }
.right_quick > li  div.consult_on {background:url("/app/images/common/ico_quick_03_on.png") no-repeat center center; background-size:cover;display:flex; align-items:center; justify-content:center }
.right_quick > li  div.consult_on a{color:#fff; }
.right_quick > li  div.consult_off {background:url("/app/images/common/ico_quick_03_off.png") no-repeat center center; background-size:cover;display:flex; align-items:center; justify-content:center }
.right_quick > li  div.consult_off a{color:#000; }
.right_quick > li div.counter{background:#f8f8f8; display:flex; flex-direction:column; justify-content:center;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}

.right_quick > li div.q_banner{background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}

.right_quick > li div.q_banner img{width:80px;}







@media (max-width:840px) {

	
	#footer {width:100%; padding:20px 20px;font-size:14px; line-height:1.5em; margin-top:0}
	#footer > ul > li{gap:10px; padding-bottom:5px}
	#footer > div.footer_ci {width:100%;padding-right:0px; }
#footer > div.footer_ci img {width:200px }
#footer > ul > li > dl > dd img{ height:20px;}
#footer > ul > li div:first-child::after{margin-right:10px;}
}
@media (max-width:640px) {
#footer > ul > li > dl{ width:100%; gap:10px;}
#footer > ul > li div{width:100%;}
#footer > ul > li div:first-child::after{display:none;}
}