@charset "utf-8";
@import url(default.css);

/* -------레이아웃 -------*/
#wrap {position:relative; width:100%;background:url(/images/bg.jpg) repeat-y center top;}

#wrapper {
	position:relative; 
	width:1200px;
	margin:0px auto;
	text-align:left;
	overflow:hidden;
	z-index:10;
}

#left {position:absolute; left:0; top:0; width:200px; height:100%; background:#1a1a1a url(/images/left_bg.jpg) no-repeat left bottom; border-left:1px solid #eee;  border-right:1px solid #eee;}
#content_wrap {overflow:hidden; margin:0 auto; width:1200px; }
#content_frame {width:985px; margin-left:215px;}
#content_area {padding-top:5px;}


/* -------상단-------*/
#top_logo  {
	background:#fff; 
	padding-top:15px; padding-bottom:15px; 
	text-align:center;
}
#top_sm  {
	background:#9c1a1a; 
	border-bottom:1px solid #515151;
	overflow:hidden;
}
#top_sm li {float:left;padding:10px 0 10px 20px}
#top_sm li a{color:#fff; font-size:11px;}

.sign {height:138px; padding:30px 0; background:#fff url(/images/haenaroo_logo.jpg) no-repeat center;}


/* -------menu -------*/
#snb {border:0px solid #000;width:200px;}
#snb * {margin:0;padding:0;}
#snb > ul {width:100%;*zoom:1;}
#snb > ul:after {display:block;content:" ";clear:both;}
#snb li.menus {float:left;width:100%;vertical-align:top; font-weight:bold; border:0px solid red;border-bottom:1px solid #515151;}
#snb li.menus a:link, 
#snb li.menus a:visited {display:block; color:#fff; font-size:13px;} 
#snb li.menus a:hover, 
#snb li.menus a:active, 
#snb li.menus a:focus {color:#e22d22;  /*background:url(/images/left_on.jpg) no-repeat 170px 15px;*/} 
#snb li.menus a {text-align: left;padding:15px 17px;}


#snb li.menus .sm { margin:0px 0;*zoom:1;}
#snb li.menus .sm:after {display:block;content:" ";clear:both; }
#snb li.menus .sm li {float:left;width:100%;margin:0;padding:0;font-size:11px;}
#snb li.menus .sm li a:link, 
#snb li.menus .sm li a:visited {display:block; font-size:12px; color:#333; font-weight:normal; background:#fff;}
#snb li.menus .sm li a:hover, 
#snb li.menus .sm li a:active,  
#snb li.menus .sm li a:focus {background:#ebebeb;}
#snb li.menus .sm li a {text-align: left;padding:12px 20px;  border-bottom:1px solid #ddd;}
#snb li.menus .submenus {display:none;}


#snb li.inquiry {float:left;width:100%;vertical-align:top; font-weight:bold;}
#snb li.inquiry a:link, 
#snb li.inquiry a:visited {display:block; color:#fff; font-size:13px; background:#9c1a1a;} 
#snb li.inquiry a:hover, 
#snb li.inquiry a:active, 
#snb li.inquiry a:focus {color:#fff;} 
#snb li.inquiry a {text-align: left;padding:10px 17px;}


/* ------- 카피라이트 -------*/
#footer_menu {width:1200px; margin:15px auto 0; text-align:center; background:#1a1a1a; border:1px solid #1a1a1a;}

.footsitemap {overflow:hidden;width:1200px; margin:0 auto; margin:0 auto; text-align:left; border-left:0px solid #ddd;}
.footsitemap li {float:left; width:20%; height:230px; border-right:0px solid #ddd;}
.footsitemap li p {color:#fff; font-size:14px; font-weight:bold; padding:20px 0 10px 40px;}
.footsitemap li a {color:#efefef; padding:10px 0 10px 40px; font-size:13px; line-height:180%;}

#footerWrap { width:1200px; margin:0 auto; background:#fff;border:1px solid #ddd;}
.footerInner { overflow:hidden; padding:25px 20px; } 
.foot_logo {float:left;}
.address {float:left;font-size:13px; color:#515151; padding-left:45px; line-height:130%;}
.gobiz {float:right; padding-top:15px;}


/* 메인이미지 */
#main_img_area {overflow:hidden; width:985px; height:460px; margin-top:0px;}

/* 메인이미지롤링 */
.center {float:left; width:985px; position:relative;}
.center .center_txt {position:absolute; width:985px; bottom:85px; font-size:22px; color:#fff;text-align:center; z-index:2000;}
.center .center_txt .big {font-size:34px;color:#fff;font-weight:900; text-shadow:#333 3px 3px 3px; }

.center .m_banner {overflow:hidden; position: relative;}
.center .m_banner ul {width:2727px; zoom:1;}
.center .m_banner ul:after {clear: both; display: block; visibility: hidden; content:' ';}
.center .m_banner ul li {float: left; width:985px; }
.center .m_banner ul li img {width:985px; height:460px;}

.center .rolling {position: absolute; top:420px; left :450px;  z-index:2000; border:0px solid red;}
.center .rolling span {display: inline-block; vertical-align: top;}
.center .rolling span a {display: block; width:15px;height:15px; background:url(/images/navi_off.png) no-repeat left top; text-indent:-1000px}
.center .rolling span a.on {display:block;width:15px;background:url(/images/navi_on.png) no-repeat;}

/* 메인컨텐츠 내용 */
#com_box_wrap {overflow:hidden; width:985px; margin-top:10px;}

#com_box_left {float:left; background:#e5e5e3 url(/images/m_company_bg.jpg) no-repeat left bottom; width:243px; height:410px; border:1px solid #ddd;}
#com_box_left a {display:block;height:391px;}
#com_box_left p {padding:50px 0 0 40px;font-size:20px;color:#1a1a1a;text-transform:uppercase;font-weight:600;line-height:150%;}
#com_box_left p span {color:#9c1a1a;}
#com_box_left a span.more {background:#1a1a1a;color:#fff;font-size:12px;font-weight:normal;display:inline-block;margin-left:0px;margin-top:15px;padding: 8px 30px;line-height:100%;}
#com_box_left a:hover span.more {border:1px solid #1a1a1a; background:none; color:#1a1a1a;}


#com_box_right {float:left; margin-left:15px; width:725px;}

#business_box { float:left; width:395px; height:198px; background:url(/images/m_business_bg.jpg) no-repeat left bottom; border:1px solid #ddd;}
#business_box a {display:block;height:199px;}
.m_txt_box {color:#fff; font-size:20px; line-height:28px; font-weight:800;text-transform:uppercase;}
.m_txt_box p {padding:32px 0 0 25px;}
.m_txt {color:#00afa9;}
.m_txt_s {font-size:14px;color:#fff;padding:24px 25px 0 25px;line-height:150%;}

#con_box { float:left;  width:310px; height:198px; background:url(/images/m_store_location_bg.jpg) no-repeat left bottom; border:1px solid #ddd; margin-left:15px;}
#con_box a {color:#fff; font-size:20px;font-weight:800;text-transform:uppercase;text-align:center;padding:70px 0 70px 0;display:block;}
#con_box a span.more {background:#000;color:#fff;font-size:11px;font-weight:normal;display:inline-block;margin-top:15px;padding: 8px 30px;line-height:100%;}
#con_box a:hover span.more {border:1px solid #fff; background:none;}


#pro_box { float:left; width:722px; height:195px; margin-top:15px; background:#fff; border:1px solid #ddd;}
.pro_box_txt {float:left; width:400px;}
.m_txt_pro { color:#222; font-size:20px; line-height:28px; font-weight:800;text-transform:uppercase;}
.m_txt_pro p {padding:32px 0 0 25px;}
.m_txt {color:#00afa9;}
.m_txt_pros {font-size:14px;color:#222;padding:18px 25px 0 25px;line-height:150%;}

.m_video {float:right; background:url(/images/m_video_bg.jpg) no-repeat right top; width:311px; height:195px;}
.m_video a {text-align:center;padding:90px 0 0 0;display:block;}
.m_video a span.video_btn {background-color:rgba(0,0,0,.6); border-radius:7px; padding: 15px 25px;}
.m_video a:hover span.video_btn {background-color:rgba(156,26,26,.9);}


/* ------- 서브페이지 -------*/
#sub_frame {width:983px; min-height:750px; margin-left:215px; background:#fff; border-left:1px solid #ddd;  border-right:1px solid #ddd;  border-bottom:1px solid #ddd;}
#sub_frame .top_navi_wrap{overflow:hidden; width:100%; background:#9c1a1a; text-align:right;}
#sub_frame .top_navi_wrap .top_navi {float:right;}
#sub_frame .top_navi_wrap .top_navi li {float:left; margin:10px 0; padding:0 10px; text-align:center; font-size:13px; color:#fff; border-right:1px solid #fff;}
#sub_frame .top_navi_wrap .top_navi li:last-child {border-right:0px solid #fff; padding-right:20px;}

#sub_frame #title {clear:both; margin:0 auto; width:100%; padding:50px 0 40px 0; border:0px solid red;}
#sub_frame #title .tit {text-align:center; font-size:30px; font-weight:700; background:url(/images/tit_bg.jpg) no-repeat center 50px; padding-bottom:30px;}


#sub_contents {
    width:875px; 
	margin:0 auto; 
	padding-bottom:70px;
	line-height: 150%;
	font-size:16px;
	color:#333;
}




/*******************************************************************************************/

/*greetings*/
.greeting_txt {text-align:center; font-size:26px; color:#111; font-weight:600; line-height:150%;}
.greeting_txt span.red {color:#9c1a1a;}

/*company*/
.sub_title {border-left:7px solid #9c1a1a; font-size:22px; font-weight:900; color:#111; padding-left:10px;}
.sub_list {padding-top:20px;}
.sub_list dt {font-size:18px; font-weight:700; color:#9c1a1a; border-bottom:1px solid #ddd;padding:0 0 5px 20px;}
.sub_list dd {font-size:14px; padding:5px 15px ; border-bottom:1px dashed #ddd;}
.sub_list li {font-size:14px; padding:5px 15px ; border-bottom:1px dashed #ddd;}

.category_list {overflow:hidden; padding:10px 0;}
.category_list li {float:left; width:24%; padding:10px 0px; background:#fff; border:1px solid #ddd; text-align:center; margin-right:1%; margin-top:10px;}
.category_list li:nth-child(4n) {margin-right:0;}

.pro_con {padding-top:30px;}
.pro_con dl:first-child {border-top:1px dotted #ccc;}
.pro_con dl {overflow:hidden;border-bottom:1px dotted #ccc;padding:10px 0;}
.pro_con dl dt {float:left;width:18px;border:1px solid #9c4000;background:#9c1a1a;color:#fff;padding: 0 5px;font-weight:700;border-radius: 5px;text-align:center; font-size:14px;}
.pro_con dl dd {float:right;width:830px;line-height:1.4em;}



/*View of the Office*/
.office_img {text-align:center;}
.office_img img {border:10px solid #f8f8f8; }
.office_txt { font-weight:700; padding-top:15px; text-align:center;}

/*History*/
.history {width:100%; overflow:hidden; padding:25px 0; border-bottom:1px solid #dfdfdf;}
.history dt {float:left; font-size:26px;  font-weight:700; color:#111;  line-height:130%; width:10%; padding-left:0px;}
.history dd .month {position:absolute; left:0; font-size:16px; font-weight:900;  color:#ddd;}
.history dd {position:relative; float:right; width:75%; padding:5px 50px;}

.his_tit {border-bottom:1px solid #dfdfdf; padding-bottom:5px; text-align:right; font-size:50px; font-weight:900; color:#5fb6a5;}


/* tab */
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:50px;
	overflow:hidden;
	border-bottom:1px solid #ddd;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-1px;
	border-top:1px solid #D3D9E6;
}


ul.tabs {
	padding:0px;margin:0px;
	z-index:2;
}

ul.tabs li {
	list-style:none;
	display:inline;
	height:50px;
}

ul.tabs li a {
	padding:5px 40px 7px 40px;
	border:1px solid #D3D9E6;
	text-decoration:none;   
	line-height:30px;
    color:#333; 
    background:#f1f1f1;
    font-weight:bold;
	font-size:15px;
}

ul.tabs li a:hover {   
    background:#9c1a1a;
	color:#fff;
}

ul.tabs li a.active {   
    background:#fff;
    color:#9c1a1a;   
    border:1px solid #D3D9E6;    
    border-bottom: 1px solid #ffffff;   
	padding:10px 40px;
	font-weight:bold;
	line-height:70px;
	font-size:16px;
}

div.content {
	padding-top:35px;
}
div.show		{ display:block;}
div.hide		{ display:none; }


/* certification */
.cert_wrap {}
.cert_wrap .st {font-size:22px;color:#222;font-weight:700;padding:20px 0;background:url(../images/st_ico.jpg) no-repeat left 10px;}
.cert_wrap ul {overflow:hidden;}
.cert_wrap ul li {float:left;width:206px;margin-right:16px;min-height:350px;}
.cert_wrap ul li:nth-child(4n) {margin-right:0;}
.cert_wrap ul li p {font-weight:700; font-size:15px;  border-bottom:0px solid #e4e4e4;line-height:1.2em;padding: 10px 0; text-align:center;}
.cert_wrap ul li img {border:1px solid #ccc;}

/*Directions */
.location dl {padding-top:20px;}
.location dt {font-size:18px; font-weight:bold; color:#9c1a1a;border-bottom:1px solid #ddd;padding:0 0 5px 10px;}
.location dd {font-size:14px; padding:5px 10px ; border-bottom:1px dashed #ddd;}





/* product */
.healthy_box {border:1px solid #ddd; padding:20px 25px;}
.healthy_box dt {font-weight:700; color:#9c1a1a; font-size:20px; padding:0 0 15px 0; border-bottom:0px solid #ddd;}
.healthy_box dd {padding:3px 0; border-bottom:0px dashed #ddd;}

.business_img {overflow:hidden; width:100%; height:315px;}
.business_img p {float:left;}

.pro_list {}
.pro_list dt {position:relative; font-weight:700; color:#9c1a1a; padding-left:40px; font-size:18px; margin:20px 0 10px 0;}
.pro_list dt p {position:absolute; top:0; left:0; border:1px solid #9c4000;background:#9c1a1a;color:#fff;padding: 0 5px;font-weight:700;border-radius: 5px;text-align:center; font-size:14px;}
.pro_list dd {font-size:14px; padding:3px 20px 3px 40px; border-bottom:1px dashed #ddd;}

.add_list {overflow:hidden; border-top:2px solid #111; border-bottom:1px solid #ddd; padding:20px 0 10px 0;}
.add_list li {float:left; padding-right:15px;}
.add_list li:nth-child(5n)  {padding-right:0px;}
.add_list li p {font-size:14px; padding:5px 0 10px 0; text-align:center;}

.txt_list {border:1px solid #ddd; padding:15px 25px; margin-top:10px;}
.txt_list dt {font-size:18px; color:#9c1a1a;}
.txt_list dd {padding:3px 15px; background:url(/images/list_icon.jpg) no-repeat left 13px;}

.img_list {overflow:hidden;  border:1px solid #ddd; background:#f8f8f8; margin-top:10px;}
.img_list li {float:left; padding-left:20px; }
.img_list li:first-child {padding-left:0px;}

.con_list {padding-top:15px;}
.con_list dt {font-weight:700; color:#9c1a1a; padding-bottom:10px;}
.con_list dd {padding:2px 0;}

.process_list {overflow:hidden; margin-top:20px;}
.process_list li {float:left; width:150px; height:100px; font-size:14px; border-radius:5px;
 border:1px solid #9c1a1a; padding:15px 0px; text-align:center; margin-left:0px; margin-top:20px; }
.process_list li.arr {width:60px; background:url(/images/arr.jpg) no-repeat 10px 60px; border:none;}
.process_list li:first-child {margin-left:60px;}

.pro_img {position:relative;}
.pro_img p.txt {position:absolute; bottom:0; width:100%; background-color:rgba(0,0,0,.7); text-align:center; color:#fff; padding:15px 0;}
.pro_img p.s_logo {position:absolute; top:20px; right:20px;}


/*table*/
.t_norm {margin-top:20px;}
.t_norm table{border-top:1px solid #212121; text-align:left;}
.t_norm table th{background:#f1f1f1; font-weight:700; font-size:14px; color:#353535; width:30%; }
.t_norm table th:first-child {border-left:0px solid #ddd;}
.t_norm table th, .t_norm table td{border-left:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 30px; vertical-align:middle;}
.t_norm table td:first-child {border-left:0px solid #ddd;}

/*.t_norm {margin-top:0px;}
.t_norm table{border-top:1px solid #212121; text-align:center;}
.t_norm table th{background:#f1f1f1; font-weight:bold; font-size:16px; color:#353535;}
.t_norm table th:first-child {border-left:0px solid #ddd;}
.t_norm table th, .t_norm table td{border-left:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 30px; vertical-align:middle;}
.t_norm table td:first-child {border-left:0px solid #ddd;}*/

.table_style {margin-top:10px;}
.table_style table{width:95%; margin:0 auto; border-top:1px solid #ddd;}
.table_style table th{ color:#353535; text-align:right; border-bottom:1px solid #ddd;}
.table_style table th:first-child {border-left:0px solid #ddd;}
.table_style table td{border-left:1px solid #ddd; border-bottom:1px solid #ddd; padding:5px 10px; vertical-align:middle; text-align:center; width:50%;}
.table_style table td:first-child {border-left:0px solid #ddd;}


/*contact us*/
.contact {overflow:hidden;}
.contact_info {margin-top:30px;}
.contact_info p {margin-bottom:20px;}
.contact_info ul li {margin-bottom:20px;}
.contact_info ul li span{display:block; font-size:16px;font-weight:600;color:#57b60a;}


/* sitemap */
.sitemap {width:100%;}
.map_dl {
	float:left;
	width:31%;
	margin:0 1%;
	padding-bottom:15px;
	margin-bottom:25px;
	background-color:#f8f8f8;
	border:0px solid #00a4e1;
}
.map_dl.margin_right_none {margin-right:0;}
.map_dl > dt {
	width:80%;
	padding:20px 10%;
	height:20px;
	font-size:20px;
	line-height:22px;
	font-weight:600;
	color:#1a1a1a;
}
.map_dl > dd {
	width:80%;
	padding:2px 10%;
}
.map_dl > dd > a {
	display:block;
	font-size:13px;
	line-height:15px;
	padding:7px 20px;
	background-color:#ffffff;
	border:1px solid #bcbcbc;
}
.map_dl > dd > a:hover {
	color:#ffffff;
	background-color:#9c1a1a;
}



/************************************************/
/* 클리어 픽스 */
.clx {*zoom:1;}
.clx:after {display:block;content:" ";clear:both;}



/*intro*/

.intro {background:url(/images/intro_bg.jpg) no-repeat center 100%; width:100%; height:100%; margin:0 auto;  text-align: center;}

.intro:before {
    content: ""; display: inline-block;
    width: 1px; height: 100%;
    margin-right: 0; vertical-align: middle;
}

.intro_con {width:550px; display: inline-block; vertical-align: middle;}
.intro_con ul {overflow:hidden; padding-top:80px;}
.intro_con ul li {float:left;}
.intro_con ul li:last-child {float:right;}