@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@charset "utf-8";
/* reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent }
html,body{ height:100% }
body {margin:0; padding:0;} 
fieldset{padding:0; margin:0; vertical-align:top; border:0 none; font-size:100%; background: transparent; _display:inline}
ol, ul { list-style: none }
blockquote, q { quotes: none }
a{ color:#000; text-decoration:none; }
a:hover, a:active, a:focus{ color:#ff7800}   
table { border-collapse: collapse; border-spacing: 0 }
img{ border:0 none; vertical-align:top }
hr{ font-size:0; height:0; line-height:0; width:0; visibility:hidden; overflow:hidden; position:absolute; left:0; top:0 }
select{padding:0; margin:0; font-size:12px}
input{font-size:12px}
/* end reset css */

body{background:#fff; font-size:0.76em; font-family:"Nanum Gothic", dotum,"돋움",sans-serif;}

/* common css */
.blind{visibility:hidden; position:absolute; z-index:-1; left:-9999px; top:0; width:1px; height:1px;}
.hide{display:none;}
.fontB{font-weight:bold}
.colorR{color:#ea0027}
.colorR2{color:#c10000}
.clear{clear:both}
.float_l{float:left}
.float_r{float:right}
/* end common css */

#wrapper{width:100%; position:relative;}

#header{width:100%; height:47px; /*border-top:5px solid #1b1a19*/; position:relative; background:#fff}
#header h1{width:161px; height:47px; position:absolute; top:0px; left:50%; margin-left:-80px}
#header h1 img{width:100%}
#header .header-btn{display:block; width:55px; height:47px;}
#header .header-cate-btn{float:left; background:url(/mobile/images/top_cate.png) no-repeat center center; background-size:25px 16px}
#header .header-call-btn{float:right; background:url(/mobile/images/top_call.png) no-repeat 60% 50%; background-size:30px 29px}
header nav ul{width:100%; height:40px; background:#444444; }
header nav ul:after{display:block; clear:both; content:''}
header nav ul li{float:left; width:25%; height:100%; background:url(/mobile/images/bg_gnb_line.png) repeat-y right top}
header nav ul li:last-child{background-image:none}
header nav ul li a{display:block; width:100%; height:40px; line-height:40px; text-align:center; font-weight:bold; color:#eee}

/* 페이지 공통 */
#container{width:100%; position:relative}
#contents{width:100%;position:relative; z-index:1;}
#contents .homePath{text-align:right; padding:5px 0; font-size:11px; margin-right:5px; color:#6c6c6c;}
#contents .homePath2{width:100%; border-bottom:2px solid #000; padding:0 0 5px 0; color:#6c6c6c; font-size:11px;}
#contents .homePath2:after{display:block; clear:both; content:''}
#contents .homePath2 .path{float:right; margin-right:5px; padding-top:5px}
#contents .homePath2 .total{float:left; margin-left:5px; padding:5px 0 2px 0}
#contents .homePath2 .backBtn{float:left; width:50px; margin-left:5px;}
#contents .homePath2 .backBtn img{width:100%}
#contents .page-title{width:100%; height:40px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; background:#231916}
#contents .pc-ver{width:41.09375%; height:22px; margin:16px auto 0 auto; border:1px solid #dedede; border-radius:7px; font-size:13px; color:#838383; font-weight:bold;}
#contents .pc-ver a{display:block; width:100%; height:22px; line-height:22px; text-align:center}
#contents .contents-bg{display:none; width:100%; height:100%; background:#000; z-index:3; opacity:0.5; left:0; top:0; position:absolute}
#contents .paging{padding:10px 0; text-align:center; color:#838383}
#contents .paging a{color:#838383}
#contents .paging .paging-btn{display:inline-block; width:22px; height:22px; line-height:22px; border:1px solid #dedede; background:#fff; border-radius:4px; margin:0 1px}
#contents .paging .paging-active{background:#f4f4f4}
#contents .paging .pageNavBtn{display:inline-block; height:22px; line-height:22px; border:1px solid #dedede; background:#fff; border-radius:4px; padding:0 7px; margin:0 1px}
.closeb {color:#fff}

/* 메인페이지 */
#contents h2.main-title{width:100%; text-align:center;margin-top:7px; padding:10px 0; font-size:14px; color:#222; letter-spacing:-1px; border-bottom:1px solid #d5d5d5; border-top:1px solid #d5d5d5; background:#f1f1f1}
#contents .main-portfolio{width:100%}
#contents .main-portfolio:after{display:block; clear:both; content:''}
#contents .main-portfolio li{float:left; width:33.333333%; margin-top:5px; text-align:center}
#contents .main-portfolio li.list-clear{clear:both; float:left}
#contents .main-portfolio li .list-name{font-size:11px; text-align:center; letter-spacing:-1.5px; padding:4px 0 13px 0; color:#6c6c6c;}
#contents .main-portfolio li a{display:block; width:96%; margin:0 auto}
#contents .main-portfolio li img{width:100%;}
#contents .main-portfolio li span{display:block; padding:5px 0; color:#636362;  border-top:none; }

.business_sec{overflow:hidden;width:100%;}
.business_sec ul {float:left;width:50%;}
.business_sec ul li{margin:10px; height:220px;}
.business_sec ul li .txt{padding:11px;font-size:11px;line-height:20px;letter-spacing:-1px;}
.business_sec li a{color:#666;text-decoration:none}
.business_sec li a:hover{color:#017acd;text-decoration:none}

.business_sec_sub{overflow:hidden;width:100%;}   .business_sec_sub .sub_tit {font-size:14px; text-align:center;}
.business_sec_sub ul {text-align:center;}
.business_sec_sub ul li{float:left;width:25%; padding:10px 15px 0 0;text-align:center;}   .business_sec_sub ul li:first-child{padding-left:30px;}
.business_sec_subul li .txt{padding:11px;font-size:11px;line-height:20px;letter-spacing:-1px;}
.business_sec_subli a{color:#666;text-decoration:none}
.business_sec_subli a:hover{color:#017acd;text-decoration:none}


/* 좌측메뉴 */
#container #sideSitemap{width:80%; position:absolute; background:#272727; left:-100%; top:0; z-index:10; display:none;}
#sideSitemap h2{width:100%; height:39px; line-height:39px; color:#939393; text-align:center; letter-spacing:3px; background:url(../mobile/images/bg_sitemap_title.png) repeat-x 0 0; background-size:3px 39px}
#sideSitemap .category{width:100%; background:#3b3b3b }
#sideSitemap .category>li:nth-child(2),
#sideSitemap .category>li:nth-child(3){padding-bottom:5px}
#sideSitemap .category>li>a{display:block; width:100%; height:29px; line-height:29px; border-top:1px solid #4a4949; border-bottom:1px solid #4b4b4b; color:#b7b7b7; font-weight:bold; text-indent:17px; background:#4d4d4d}
#sideSitemap .category>li ul{width:100%; padding-top:5px; background:url(../mobile/images/bg_siteMap_line.png) repeat-y 50% 0%;}
#sideSitemap .category>li ul:after{display:block; clear:both; content:''}
#sideSitemap .category>li ul li{float:left; width:50%}
#sideSitemap .category>li ul li a{display:block; width:100%; padding:11px 0; color:#767676; text-indent:17px; font-weight:bold; font-size:12px; letter-spacing:-1px}
#sideSitemap .close{width:100%; padding:5px 0; margin-bottom:10px; text-align:center; color:#5c5c5c;}
#sideSitemap .siteMap-copy{color:#5c5c5c; padding:11px 0 4px 0; text-align:center; font-size:10px; letter-spacing:-1px}

/* 터치슬라이더 js css */
#contents .touchSliderSec{width:100%; margin:0 auto; overflow:hidden; position:relative;}
#contents .touchSlider{width:300%; list-style:none; padding:0; margin:0}
#contents .touchSlider:after{display:block; clear:both; content:''}
#contents .touchSlider li{float:left; width:33.3333%; text-align:center;}
#contents .touchSlider li img{/*width:100%*/}
#contents .box-sec .prev{position:absolute; width:30px; height:40px; left:0; top:50%; margin-top:-20px; background:url(../mobile/images/btn_prev_arrow.png) no-repeat center center; background-size:17px 25px}
#contents .box-sec .next{position:absolute; width:30px; height:40px; right:0; top:50%; margin-top:-20px; background:url(../mobile/images/btn_next_arrow.png) no-repeat center center; background-size:17px 25px}
/* sub 페이지 */
#contents h2.sub-title{width:100%; height:40px; line-height:41px; border-top:1px solid #dbdbdb; border-bottom:1px solid #b9b9b9; margin:5px 0; color:#fff; text-indent:10px; font-size:14px; background:#231916}
#contents h2.sub-title span{font-size:12px; color:#9c9897; letter-spacing:-1px}
/* about dyne */
#contents .about-dyne{color:#464646}
#contents .about-dyne h3{text-indent:4.6875%; font-size:13px; color:#464646; letter-spacing:-1px}
#contents .about-dyne h3 span{font-size:11px; color:#a9a9a9; letter-spacing:0; font-weight:normal}
#contents .about-img{width:100%; margin-bottom:7px}
#contents .about-img:after{display:block; clear:both; content:''}
#contents .about-img li:nth-child(1){float:left; width:70.78125%}
#contents .about-img li:nth-child(2){float:right; width:28.28125%}
#contents .about-img li img{width:100%}
#contents .about-us{background:#f6f6f6; padding:18px 0; margin-bottom:12px}
#contents .about-us p{width:90.625%; margin:6px auto 0 auto; padding-top:8px; border-top:1px solid #d9d5cb; line-height:16px}
#contents .expertise{width:90.625%; margin:0 auto 18px auto; padding-bottom:6px; border-bottom:1px solid #dcdcdc;}
#contents .expertise:after{display:block; clear:both; content:''}
#contents .expertise-txt{width:53.17241%; float:right; border-top:1px solid #dcdcdc}
#contents .expertise-txt h3{text-indent:0; padding:7px 0}
#contents .expertise-txt h3 span{letter-spacing:-1px}
#contents .expertise-txt p{border-top:1px solid #bfbfbf; padding:5px 0 0 0; line-height:16px; letter-spacing:-1px}
#contents .expertise-img{width:43.62068%; float:left}
#contents .expertise-img img{width:100%}

#contents .account{width:100%; margin-bottom:7px; }
#contents .account:after{display:block; clear:both; content:''}
#contents .account li{float:left; width:50%; text-align:center;padding-bottom:10px;}

#contents .account ul{padding-top:10px;}

.year_history{padding-top:43px}
.dtyear_lst{color:#333;line-height:22px; margin:15px;border-bottom:1px solid #dedede;}
.dtyear_lst li{position:relative;width:100%;padding:24px 0 24px 0;border-top:1px solid #dedede;vertical-align:top}
.dtyear_lst li:after{display:block;clear:both;content:""}
.dtyear_lst li:first-child{padding-top:0;border-top:0}
.dtyear_lst .dt_year{float:left;height:32px;font-size:30px;color:#01878d;letter-spacing:-1px;line-height:32px;}

.history_lst{float:left;margin-top:30px}
.history_lst li{width:100%;padding:0;border:0;vertical-align:top}
.history_lst li:after{display:block;clear:both;content:""}
.history_lst li a{color:#008288;text-decoration:underline}
.history_lst li .month{float:left;margin-right:14px;font-size:14px;font-weight:600;line-height:30px;}
.history_lst li .info{display:block;overflow:hidden;font-size:14px;line-height:30px;letter-spacing:-1px;color:#333;}


#footer{width:100%; padding:0 0 20px 0; background:#000; color:#777; text-align:center; margin-top:7px;}
#footer .f-info-menu{width:100%; padding:9px 0; background:#333;}
#footer .f-info-menu:after{display:block; clear:both; content:''}
#footer .f-info-menu .f-info-box{float:left; width:50%}
#footer .f-info-menu div:first-child{background:url(http://d-i.kr/m/mobile/images/bg_footer_info.png) repeat-y right top}
#footer .f-info-menu div:first-child a img{width:70%; max-width:112px}
#footer .f-info-menu div:last-child a img{width:81.25%; max-width:130px}
#footer .f-logo{padding:19px 0 5px 0; color:#fff; text-decoration:underline; }
#footer .f-logo img{width:98px; height:22px}
#footer address{font-style:normal; font-size:1em; letter-spacing:-1px; line-height:1.4em}
#footer p{font-size:0.917em}






/*제품소개*/
.pro-bx {width:100%;overflow:hidden; }
.pro-bx .pro-img { float:left;width:100%; text-align:center }
.pro-bx .fac { float:right; width:100%;}
.pro-bx .fac li {padding-left:15px; font-size:12px; color:#666;line-height:1.8em;  background:url(/images/depth2_bullet.gif) 5px 8px no-repeat;}
.content h5 {margin-top:10px; background:#eee; padding:5px; text-align:center;  border:1px solid #ccc; color:#222}


.pro-bx .pro-txt { overflow:hidden; float:right; width:480px; }
.pro-bx .pro-txt p { padding-left:8px; margin-bottom:10px;}
.pro-bx .pro-txt p span { font-weight:bold; }
.pro-bx .fac3 { float:left;}
.pro-bx .fac3 dt { padding-left:10px; margin:15px 0 10px; background:url(/images/bullet-con2.gif) 0 3px no-repeat;}
.pro-bx .fac3 dd { padding-left:8px; margin:0 0 7px 10px; background:url(/images/depth2_bullet2.gif) 0 50% no-repeat;}
.tit{color:#000; font-size:14px;}
.ff {text-align:center;}

.pro-ListD { position:relative; width:100%;}
.pro-list {float:left; overflow:hidden; padding:0 0 0 0; width:100%; }
.pro-list dt { }
.pro-list dd {padding-left:8px; margin:0 4px 0 10px; font-size:14px; color:#666; background:url(/images/depth2_bullet.gif) 0 9px no-repeat;}

.pro-list1 { position:relative; width:100%;}
.pro-list1 dt {padding-left:10px; margin-bottom:10px; background:url(/images/bullet-con2.gif) 0 3px no-repeat;}
.pro-list1 dd {padding-left:8px; margin:0 4px 0 10px; font-size:14px; color:#666; background:url(/images/depth2_bullet.gif) 0 9px no-repeat;}

.tbl-fac { margin-bottom:40px; border-top:2px solid #0650a5; border-right:1px solid #ccc; font-size:12px; color:#666}
.tbl-fac th { padding:10px 0; text-align:center; background:#f7f7f7; border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
.tbl-fac td { padding:5px 10px; border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
.base1 {}
.base1 li { float:left; margin-right:6px; width:138px;}
.base2 {}
.base2 li { float:left; margin-right:5px; width:115px;}