@charset "utf-8";
/*콘텐츠 공통*/
/* UL, OL, DL */
* html ul li {height:1%; }

ul.basic { margin: 10px 0 0;}
ul.basic > li {padding:0 0 0 12px; background:url("/layout/images/www/common/basic_ul_gn.png") no-repeat left 10px; text-align:justify;}

ul.basic ul {margin-top:10px;}
ul.basic ul li {padding:0 0 0 12px; background:url("/layout/images/www/common/basic_ul_ul_bl.png") no-repeat left 7px;  text-align:justify; margin:3px 0 0; line-height:130%;}

ul.basic ul {margin-top:5px; margin-bottom:10px;}
ul.basic ul > li ul li {padding:0 0 0 12px; background:url("/layout/images/www/common/ico_li_li.png") no-repeat left 8px;  text-align:justify; margin:3px 0 0; line-height:130%;}

 ul.ul_po > li { background:url("/layout/images/www/contents/w_bl.png") no-repeat 0px 6px ; padding: 0 0 0 22px; }
 ul.ul_br > li { background:url("/layout/images/www/contents/aorrw_ico.png") no-repeat 0px 4px ; padding: 0 0 0 22px; }


ol.basic > li { margin-top:7px; padding-bottom:7px; border-bottom:1px dashed #9e9e9e; counter-increment: counter; line-height:30px; }
ol.basic > li:before{content: counter(counter); display: inline-block; border-radius: 30%; width: 24px; height: 24px; text-align: center; vertical-align: middle; margin: -3px 5px 0 3px; text-indent: -1px; line-height:24px;background: #333;color: #fff;}
ol.basic > li > ul { background-color:#f9f7f3; padding:8px 17px; margin:10px 0; }
ol.basic > li > ul li { background:url("/layout/images/common/ico_li01.png") no-repeat 0px 7px ; padding:0 0 0 10px; }
ol.ol_br > li:before { background-color:#336666; border:1px solid #336666; color:#fff; }
ol.ol_ye > li:before { background-color:#f67115; border:1px solid #f67115; }

ol.basic ul {margin-top:20px;margin-bottom: 20px;}
ol.basic ul > li ul li {padding:0 0 0 8px; background:url("/layout/images/common/ico_li02.png") no-repeat left 10px;  text-align:justify; margin:3px 0 0; line-height:130%;}

p.basic { clear:both; text-align:justify; padding:2px 0; margin:12px 0 0 0;line-height: 24px;}
p.line { clear:both; text-align:justify;  margin:12px 0 0 2px; padding:0 0 7px 12px; background:url("/layout/images/www/sub/ulli_bl.gif") no-repeat left 8px; border-bottom:1px dashed #c9c9c9;}


#content span.next {display: block;}

.cont_titlebox {position: relative;padding-top: 49px;padding-bottom: 30px; border-bottom: 1px solid #cdcdcd;margin-bottom: 40px;}
.cont_titlebox h3 {display: block;font-size: 30px;line-height: 34px;color: #171717;}

.c_box {background-color: #fff;margin-top: 20px;padding: 25px 30px;border: 10px solid #f3f4f6;}
.c_box2 {margin-top: 20px;padding: 25px 30px;border: 1px dashed #b3b3b3;}
.c_box2 > p.basic:first-child, .c_box2 > ul.basic:first-child, .c_box2 > ol.basic:first-child, .c_box2 > h4:first-child, .c_box2 > h5:first-child {margin-top: 0px;}
.c_box3 {background-color: #f3f4f6;margin-top: 20px;padding: 5px;border: 1px solid #cacccc;}
.c_box3 .in_box {background-color: #fff;padding: 25px 30px;overflow: hidden;}
.c_box3 .in_box .box_l h5:first-child, .c_box3 .in_box .box_l ul.basic:first-child, .c_box3 .in_box .box_r h5:first-child, .c_box3 .in_box .box_r ul.basic:first-child {margin-top: 0px;}
.c_box > p.basic:first-child, .c_box > ul.basic:first-child, .c_box > ol.basic:first-child, .c_box > h4:first-child, .c_box > h5:first-child {margin-top: 0px;}

.bg_point { border: 1px dashed #b3b3b3 !important; background-color: #fbff95 !important; margin-bottom: 20px;}
.bg_point p:first-child { margin-bottom: 10px;}


<!--좌우영역-->

.img_txt h4:first-child, .img_txt h5:first-child, .img_txt h6:first-child {margin-top: 0px;}
.c_box3 .in_box .box_l {float: left;width: 44%;border-right: 1px solid #e2e2e2;padding-right: 5%;}
.c_box3 .in_box .box_r {float: left;width: 44%;margin-left: 5%;}
.img_txt {clear: both; width: 100%;margin: 30px 0 15px 0;display: inline-block;}
.img_txt .l50 {width: 49%;float: left;margin-right: 1%;}
.img_txt .r50 {width: 49%;float: left;margin-left: 1%;}
.img_txt .l30 {width: 32%;float: left;margin-right: 2%;}
.img_txt .c30 {width: 32%;float: left;}
.img_txt .l70 {width: 66%;float: left;}
.img_txt .r30 {width: 32%;float: left;margin-left: 2%;}
.img_txt .r70 { width: 66%;float: left;}
.img_txt .l40 {width: 38%;float: left;margin-right: 2%;}
.img_txt .r40 {width: 38%;float: left;margin-right: 2%;}
.img_txt .l60 {width: 58%;float: left;margin-right: 2%;}
.img_txt .r60 { width: 58%;float: left;}
.img_txt > div {position: relative;}
.img_txt > div.l50 .photo_name1, .img_txt > div.r50 > .photo_name1 {max-width: 505px;}
.img_txt > div > .photo_name1 {display: block;width: 100%;background: rgba(0,0,0,.6);text-align: center;position: absolute;bottom: 0px;height: 45px;line-height: 45px;color: #fff;}
.h400 {min-height: 410px;}
.btn_p a.rdno {border-radius: 1px; padding: 4px 25px;text-align: center;}
.btn_p a.block {display: block;}
.img_txt > div.l30 .photo_name1, .img_txt > div.r30 > .photo_name1, .img_txt > div.c30 > .photo_name1 {max-width: 327px;}


/* img100% 임시임 */
.c_box img { width:100%}
.img_txt img { width:100%}


<!--버튼-->

.align_left {text-align:left !important;}
.guide_wrap .btn_p {margin-top: 20px;}
.btn_p a.p1 {border: 1px solid #f67115; background: #f67115;color: #fff;}
.btn_p a.p2 {background-color: #74bf06;border: 1px solid #74bf06; color:#fff}
.btn_p a.p3 {background-color: #fff;border: 1px solid #333;color: #333;}
.btn_p a.p4 {background-color: #16202c;border: 1px solid #141d28;color: #fff;} 
.btn_p a.p5 { border: 1px solid #336666;color: #fff;background-color: #336666;}

.btn_p a.p1:hover {background-color: #fff;border: 1px solid #141d28;color: #141d28;} 
.btn_p a.p2:hover {background-color: #333;border: 1px solid #333; color: #fff;} 
.btn_p a.p3:hover {background-color: #336666;border: 1px solid #336666;color: #fff;} 
.btn_p a.p4:hover {background-color: #fff;border: 1px solid #141d28;color: #141d28;} 
.btn_p a.p5:hover {background-color: #fff;border: 1px solid #336666;color: #336666;} 
.btn_p a {color: #fff;padding: 10px 38px;transition: all 0.5s ease 0s;border-radius: 3px;display: inline-block;}
.mar5 {margin-right: 5px!important; }
.bgno {background: none !important;padding-left: 0px;}
.mat15 {margin-top: 15px!important;}


ol.basic > li > ul li {background: url(/layout/images/www/common/basic_ul_ul_bl.png) no-repeat 0px 11px;padding: 0 0 0 10px;}

.btn_dw:first-child { margin-left: 0;}
.btn_dw {background-color: #f8f8f8;border:1px solid #d2d2d2;border-radius: 30px;padding: 4px 25px 5px 50px;transition: all 0.5s ease 0s;margin-left: 3px;color: #fff;}
.btn_dw.new3 {background: url(/layout/images/www/common/newwin_bl_gr_big.png) no-repeat 26px 9px;color: #000;}
.btn_dw.new4 {background: #98a255 url(/layout/images/www/common/newwin_bl_wh_big.png) no-repeat 26px 9px;border:none;}
.btn_dw.new5 {background: #336666 url(/layout/images/www/common/newwin_bl_wh_big.png) no-repeat 26px 9px;border: 1px solid #336666;}
.btn_dw.new3:hover {background:#4f4f4f url(/layout/images/www/common/newwin_bl_wh_big.png) no-repeat 26px 9px !important;color: #fff;}
.btn_dw.new4:hover {background:#f67115 url(/layout/images/www/common/newwin_bl_wh_big.png) no-repeat 26px 9px !important;color: #fff;border:none;}
.btn_dw.new5:hover {background:#333 url(/layout/images/www/common/newwin_bl_wh_big.png) no-repeat 26px 9px !important;;color: #fff; border: 1px solid #333;}

.btn_dw.hwp:hover {background-color: #c8e0f1;}
.btn_dw.pdf:hover {background-color: #ffd7d7;}
.btn_dw.xls:hover {background-color: #ffd7d7;}
.btn_dw.pptx:hover {background-color: #ffd7d7;}
.btn_dw.hwp {background: url(/layout/images/www/common/content_bl.png) no-repeat 20px -299px;border-radius: 2px;border: 1px solid #4688b5;color: #1e394f;}
.btn_dw.pdf {background: url(/layout/images/www/common/content_bl.png) no-repeat 20px  -345px;border-radius: 2px;border: 1px solid #e1574c;color: #a33b32;}


.guide_wrap .iconbox {width: 100%;min-height: 60px;padding: 0px;display: inline-block;box-sizing: border-box;}
.guide_wrap .iconbox .icon {background: url(/layout/images/www/common/box_icon01.png) no-repeat 58px 49px;float: left;width: 21%;height: 152px;position: relative;}
.guide_wrap .iconbox .info {float: left;width: 79%;}
.iconbox .icon2 {background: url(/layout/images/www/common/box_icon02.png) no-repeat 58px 49px;float: left;width: 21%;height: 152px;position: relative;}
.iconbox .icon3 {background: url(/layout/images/www/common/box_icon01.png) no-repeat 58px 32px;float: left;width: 21%;height: 152px;position: relative;}
.iconbox .info .in_box {background-color: #fff;padding: 25px;}
.iconbox .info .in_box h5{ margin-top:0px;} 



<!--테이블-->
table {border-collapse: collapse;border-spacing: 0;}
caption {text-indent: -9999px;height: 0;}
table.basic {margin: 18px 0 5px 0;border-right: 1px solid #d2d2d2;border-top: 2px solid #40434c;border-bottom: 1px solid #d2d2d2;border-collapse: collapse;clear: both;width: 100%;}
table.basic th {font-weight: 400;padding: 13px;background-color: #f6f6f6;border-bottom: 1px solid #d2d2d2;border-left: 1px solid #d2d2d2;border-top: 1px solid #4264a3;vertical-align: middle;word-break: keep-all;color: #323232;font-size: 18px;}
table.basic td {background-color: #fff;text-align: center;padding: 10px;border-left: 1px solid #dedede;border-top: 1px solid #dedede;vertical-align: middle;word-break: break-all;font-size: 15px;}
.tb_info {float: right;padding-bottom: 5px;}
table.basic .btn_dw {border: 0px;}
.align_left {text-align: left !important;}

ul.img_col4 li span.photo_name1 {display: block;width: 100%;background: rgba(0,0,0,.5);text-align: center;position: absolute;bottom: 0px;height: 40px;line-height: 40px;color: #fff;}
ul.img_col5 li span.photo_name1 {display: block;width: 100%;background: rgba(0,0,0,.5);text-align: center;position: absolute;bottom: 0px;height: 40px;line-height: 40px;color: #fff;}
ul.img_col6 li span.photo_name1 {display: block; width: 100%;background: rgba(0,0,0,.5);text-align: center;position: absolute;bottom: 0px; height: 40px;line-height: 40px;color: #fff;}


/* 도식 */
/*.step_list {margin:20px 0 0 0;display: block;overflow: hidden;background: #f3f4f6;padding: 30px 20px 0 20px;text-align: center;}
.step_list .step_box {width: 17%;background-color: #ffffff;border:1px solid #e4e4e4;border-radius: 14px;padding: 20px 10px;margin-bottom: 30px;display: inline-block;position: relative; vertical-align: middle;}
.step_list .step_box.w25 {width: 25% !important;}
.step_list .step_box.strong_b{border:2px solid #d96e04;}
.step_list .step_box.strong_r{border:2px solid #6d910b;}
.step_list .step_box.strong_b p.tit{ color:#d56b03;}
.step_list .step_box.strong_r p.tit{ color:#6d910b;}
.step_list .step_box p.tit{text-align:center;font-weight: 400;font-size: 18px;border-bottom: 1px dotted #adadad;padding-bottom: 8px;margin-bottom: 10px;}
.step_list .step_box p.tit.bor_n{ border: none; margin-bottom: 0; padding-bottom: 0;}
.step_list .step_box p.txt{text-align:center;}
.step_list .step_box p.txt > span.next{ line-height: 18px; }
.step_list .step_box p.txt > span.next.part{color:#6b6b6b;font-size: 14px;font-weight: normal;}
.step_list .step_next {width: 39px;height: 135px;text-indent: -999em;display: inline-block;background: url("/layout/images/www/contents/step_ico_next.png") center no-repeat;margin: 0 auto;vertical-align: top;padding: 0 10px;}
.step_list .step_box p.tit span.icon{display:block;background: url("/layout/images/www/contents/step_li_ico.png") 2px -5px no-repeat;width: 30px;height: 32px;margin: 0 auto;margin-bottom: 5px;}
.step_list .step_box p.tit span.ico01{background-position: 0px 0px;}
.step_list .step_box p.tit span.ico02{background-position: -32px 0px;}
.step_list .step_box p.tit span.ico03{background-position: -58px 0px;width: 36px;}
.step_list .step_box p.tit span.ico04{background-position: -93px 0px;width: 28px;}
.step_list .step_box p.tit span.ico05{background-position: -127px 0px;width: 28px;}
.step_list .step_box p.tit span.ico06{background-position: -160px 0px;}
.step_list .step_box p.tit span.ico07{background-position: -193px 0px;}
.step_list .step_box p.tit span.ico08{background-position: -224px 0px;width: 27px;}
.step_list .step_box p.tit span.ico09{background-position: -256px 0px;width: 27px;}
.step_list .step_box p.tit span.ico10{background-position: -289px 0px;}
.step_list .step_box p.tit span.ico11{background-position: -320px 0px;width: 28px;}
.step_list .step_box p.tit span.ico12{background-position: -352px 0px;width: 29px;}
.step_list .step_box p.tit span.ico13{background-position: -385px 0px;width: 29px;}
.step_list .step_box p.tit span.ico14{background-position: -419px 0px;}
.step_list.four .step_box{width: 17%;}
.step_list.three .step_box{width: 24.7%;}
.step_list .step_next.h60{height:60px;}
.step_list .step_next.h70{height:70px;}
.step_list .step_next.h80{height:80px;}
.step_list .step_next.h90{height:90px;}
.step_list .step_next.h100{height:100px;}
.step_list .step_next.h110{height:110px;}
.step_list .step_next.h120{height:120px;}
.step_list .step_next.h130{height:130px;}
.step_list .step_next.h140{height:140px;}
.step_list .step_next.h150{height:150px;}
.step_list .step_next.h160{height:160px;}
.step_list .step_next.h170{height:170px;}
.step_list .step_next.h180{height:180px;}
.step_list .step_next.h190{height:190px;}
.step_list .step_next.h200{height:200px;}*/
.step_list_col {display: block;overflow: hidden;text-align: center; width:50%; margin:35px auto 0;}
.step_list_col .step_box {background-color: #ffffff;border-radius: 14px;position: relative;margin: 0 auto; font-size:14px;}
.step_list_col .step_box.strong_b{border:2px solid #046fd9;width: 19.5%;}
.step_list_col .step_box.strong_r{border:2px solid #d21b4f;width: 19.5%;}
.step_list_col .step_box.strong_b p.tit{ color:#046fd9;}
.step_list_col .step_box.strong_r p.tit{ color:#d21b4f;}
.step_list_col .step_box p.tit{text-align:center;font-weight: 400;font-size: 16px;color:#000;padding-bottom: 8px;margin-bottom: 10px;padding:5px;border-radius: 10px;background-color: lightgray; width:90%; margin:0 auto;}
.step_list_col .step_box ul.basic.txt{ text-align: left; margin: 0 auto;;font-size:15px;color: #666;display: inline flow-root list-item;}
.step_list_col .step_box p.tit.bor_n{ border: none; margin-bottom: 0; padding-bottom: 0;}
.step_list_col .step_box p span.tit{font-weight: 400;color: #ac4b11;}

.step_list_col .step_box img {width: 100%;}

.step_list_col .step_box p.tit1{text-align:center;font-weight: 500;font-size: 18px;border-bottom: 1px dotted #adadad;color: #000;padding-bottom: 8px;margin-bottom: 10px;}
.step_list_col .step_next1 {width: 39px;height: 39px;text-indent: -999em;display: inline-block;background: url("/layout/images/www/contents/step_ico_col_next1.png") center no-repeat;margin: 0 auto;padding: 0 10px;}


.step_list_col .step_box p.txt{text-align:center; font-size:13px;color: #666; line-height:16px; padding-top:10px;}
.step_list_col .step_box p.txt > span.next{ line-height: 18px; }
.step_list_col .step_box p.txt > span.next.part{color:#6b6b6b;font-size: 14px;font-weight: 300;}
.step_list_col .step_next {width: 39px;height: 39px;text-indent: -999em;display: inline-block;background: url("/layout/images/www/contents/step_ico_col_next.png") center no-repeat;margin: 0 auto;padding: 0 10px;}
.step_list_col .step_box.w40{width:40%}
.step_list_col .step_box.w50{width:50%}
.step_list_col .step_box.w60{width:60%}
.step_list_col .step_box.w70{width:70%}
.step_list_col .step_box.w80{width:80%}

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


/*인사말*/

.l_tit { font-size:36px; line-height:45px; font-weight:500;}
.l_tit span { color:#3366cc;} 
.r_tit { font-size:30px; line-height:40px; font-weight:400; color:#333;}
ul.add_list{ width:60%; border-top:3px solid #333333; box-sizing:border-box;}
ul.add_list span {display: inline-block;width:150px; font-weight:500; color:#000;}
ul.add_list li { line-height:45px; border-bottom:1px  dotted #ccc;}
ul.add_list li:last-child{ border-bottom:2px solid #cccccc;}




/* 연혁 */
.history_box > ul{position:relative;}
.history_box > ul:after{content:"";display:block;clear:both;}
.history_box > ul:before{content:"";position:absolute;left:170px;top:15px;width:1px;height:100%;background:#ccc;}
.history_box > ul > li:after{content:"";display:block;clear:both;}
.history_box > ul > li > p{position:relative;z-index:1;float:left;width:140px;font-size:24px;text-align: right;color:#000;background:url("/layout/images/www/contents/history_icon.png") no-repeat 160px 6px;padding-right: 41px;}
.history_box > ul > li > ul{overflow: hidden;padding:0 0 60px 30px; }
.history_box > ul > li > ul > li{margin-bottom:5px;padding-bottom:5px;border-bottom:1px dotted #aaa;}
.history_box > ul > li > ul > li:after{content:"";display:block;clear:both;}
.history_box > ul > li > ul > li > .month{float:left;width:80px;font-size:18px;font-weight:500;color:#363636;}
.history_box > ul > li > ul > li > span { width:20px;}
.history_box > ul > li > ul > li > li {float:left;width:80px;font-size:16px;font-weight:500;color:#363636;}


/*오시는 길*/
.location {position: relative;overflow: hidden;padding: 38px 20px 32px 31px;border: 1px solid #ddd;box-sizing: border-box; margin-top:1%;}
.location .map_txt {overflow:hidden; float:left;}
.location .map_txt dl{float:left; margin-right:10px;}
.location .map_txt dt{display:inline-block; font-weight:600; font-size:18px; line-height:25px; height:30px; color:#333; box-sizing:border-box;}
.location .map_txt dl.add dt{/*background:url("/layout/images/www/common/sub_sprite.png") no-repeat -97px -10px; */padding:0 10px 0 5px;}
.location .map_txt dl.tel dt{background:url('/information/img/tel_icon.gif') 0 4px no-repeat; padding:0 10px 0 25px;}
.location .map_txt dl.fax dt{background:url('/information/img/fax_icon.gif') 0 5px no-repeat; padding:0 10px 0 30px;}
.location .map_txt dd{display:inline-block;line-height:25px; height:30px;}



/* 제품소개 */
ol.basic_img > li {width: 31%; float:left;margin:0 2% 1% 0; padding:0 7px;counter-increment: counter;border: 1px dotted #333;border-radius: 10px; box-sizing:border-box;}
ol.basic_img > li:before{content: counter(counter); display: inline-block; border-radius: 30%; width: 24px; height: 24px; text-align: center; vertical-align: middle; margin: -3px 5px 0 3px; text-indent: -1px; line-height: 1.3em;background:#444;color: #fff;}
ol.basic_img > li span.photo_name { display:inline;width:100%; text-align:left; bottom:0px; height:30px; line-height:30px; color:#444; font-size:14px; }
ol.basic_img > li img { display:block; padding:3% 0;}
ul.card_border li { width:400px; height:330px;float:left;margin: 0 20px 20px 0; padding:10px 35px;\text-align:center; border:1px solid #666; box-sizing:border-box;}


/* 탭버튼 */
.info_wrap {padding-top: 10px;  width:100%; margin:0 auto;}
.tab_wrap {display: none;padding: 20px 0 0;}
.info_wrap input {display: none;}
.info_wrap label {text-align: center;width: 50%;display: inline-block;padding: 7px 25px;font-size: 16px; box-sizing: border-box; margin-right: 0; float: left;border-top: 1px solid rgba(139,139,139,0.4); border-bottom: 1px solid rgba(139,139,139,0.4);}
.info_wrap label:hover {cursor: pointer;}
input:checked + label {color: #303030;background-color: #e7e7e7; }
.info_wrap #tab1:checked ~ .tab_con01,  .info_wrap #tab2:checked ~ .tab_con02{display: block;}


 /* Distrobuters */
 .distributors_wrap{ margin-top:-35px;}
 .distributors_list{ height:100px;  border-bottom: 1px solid #e0e0e0;}   
 .distributors_list p{width: 250px;height: 100%;text-align: center; float:left;}
 .distributors_list .dist_con{ float:left; height:100%; padding-left: 20px;}
 .distributors_list .dist_con strong{font-size: 20px;font-weight: 700; display:block; padding-top:26px; color:#000;}
 .distributors_list .dist_con span{font-size:16px;}
 .distributors_list a{ float:right; display: block; width: 100px;height: 46px;border: 1px solid #c4c4c4;border-radius: 10px;text-align: center; margin-top:26px; line-height:45px; transition-duration:0.5s;}
 .distributors_list a:hover{ background-color:#98a255 ; color:#fff;}

 

 /*샘플이미지 버튼*/
summary{border-radius: 30px;transition: all 0.5s ease 0s;color: #000; cursor:pointer; padding:5px 25px 5px 30px;background-color:#98a255 ; color:#fff; float:left; margin:15px 10px 30px 0px;}
summary:hover{ background-color:#F63;}


ul.sample_col{margin: 0px 0 0px;width: 100%;display: inline-block;}
ul.sample_col li {position: relative; height:180px; display: inline-block;text-align: center;width: 15%;margin-right:14px;float: left;}
ul.sample_col li img {width: 100%;height: auto;max-width: 205px;}
span.photo_name3 {display: block;width: 100%;margin-top: 5px;padding-bottom: 10px;text-align: center; font-size:15px; line-height:20px;}
ul.sample_col li:last-child{ margin-right:0px;}
ul.sample_col li .sample_img{ border:1px solid #CCC; padding:5%;}


.det_box2{ float:left;}
.det_box2 ul li{ padding-bottom:10px; font-size:16px; line-height:24px;}