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,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;line-height:160%;} /* delete vertical-align,font:inherit; */
body,html{width:100%; font-size:15px; color:#666; font-family:'Noto Sans KR', sans-serif; }
ol,ul,li{list-style:none;}
a{cursor:pointer;text-decoration:none;color:#666;}
/* Common */
.line_bg{height:2px; background-color:#f5f5f5}
.img_bor{border:1px solid #ddd}
.eng_font {letter-spacing:0 !important; font-family:'Maven Pro', 'Noto Sans KR', sans-serif !important;}
.bold {font-weight:700 !important;}
/* 레이아웃 */
/* Start-슬릭기본 */
.slick-slider{position: relative;display: block;box-sizing: border-box;
-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
touch-action: pan-y;-webkit-tap-highlight-color: transparent; }
.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0; width:100%;}
.slick-slide{display: none;float: left; width:100%; }
.slick-initialized .slick-slide{display: block;}
/* End-슬릭기본 */
#contents {position:relative; overflow:hidden; clear:both;}
.m_tit {position:relative; font-weight:300; font-size:35px; letter-spacing:-1.8pt; line-height:140%; color:#262626; margin-bottom:15px;}
.m_tit span {line-height:inherit; letter-spacing:inherit;}
.m_stit {font-size:21px; letter-spacing:-1.8pt; line-height:100%; color:#333; font-weight:700; margin-bottom:18px;}
.moreBtn { text-align:left; font-size:15px; letter-spacing:-0.5pt; width:170px; line-height:54px; border:1px solid #393939; color:#393939; background:url('/theme/nanograting04/img/arrow_b.png') right 15px center no-repeat; box-sizing:border-box; padding:0 0 0 15px; display:block; margin:50px auto 0 auto; transition: all 0.3s ease-out; }
.prd_con {position:Relative; overflow:hidden; background:url('/theme/nanograting04/img/prdBg.gif') center center/cover no-repeat; padding:0px 0}
.prd_in {position:Relative; width:1130px; padding:0 10px; box-sizing:border-box; margin:0 auto;}
.prd_in .m_tit {text-align:center;}
.prd_in .sub_mtxt {text-align:center;}
.prd_rolling {position:relative;}
.prd_rolling .slick-list {padding-top:40px; }
.prd_rolling dl {text-align:center; float:left; margin:0 15px}
.prd_rolling dl a {display:block; transition: all 0.3s ease-out;}
.prd_rolling dt {border:1px solid #ddd; box-sizing:border-box; top:0; position:Relative; transition: all 0.3s ease-out;}
.prd_rolling dt img {width:100%}
.prd_rolling dd {padding-top:20px; overflow:hidden; height: 8.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3em; text-overflow:ellipsis; font-weight:500; c
olor:#333; letter-spacing:-0.5pt; font-size:18px; word-wrap: normal !important; }
.prd_rolling dd p{ font-size:15px; font-weight:300; }
.prd_rolling dl a:hover {transition: all 0.3s ease-out;}
.prd_rolling dl a:hover dt {border-color:#bc171d; top:-11px; transition: all 0.3s ease-out;}
/* Arrows */
.prd_rolling .slick-arrow {display:block; content:""; position: absolute; top:50% ; left:-30px; transform: translate(0, -50%); margin:0; display: block;width:54px; height:54px;border-radius:50%; border:none; box-sizing:border-box; padding: 0; cursor: pointer; color: transparent; outline: none; background:url('/theme/nanograting04/img/prevBtn.png') center center no-repeat; z-index:9999; transition: all 0.3s ease-out; opacity:0.8}
.prd_rolling .slick-arrow.slick-next {background-image:url('/theme/nanograting04/img/nextBtn.png'); left:auto; right:-30px; margin:0}
.prd_rolling .slick-arrow:hover {opacity:1}
/* // Arrows */
/*******************************************************************************
@media ~1070px
*******************************************************************************/
@media all and (max-width:1070px){
.gnbDiv .gnbWrap .gnb ul {margin-left:34%}
.gnbDiv .gnbWrap .gnb ul li a.oneDep {font-size:17px; padding:0 15px;}
.gnbDiv .gnbWrap li .twoDep a {font-size:14px; padding:0 0 8px 0}
}
/*******************************************************************************
@media 1024~1199px
*******************************************************************************/
@media all and (max-width:1199px){
#wrap {min-width:auto}
.cont_1170 {width:100%;}
.gnbDiv .gnbWrap {width:100%; padding:0 3%; box-sizing:Border-box;}
.gnbDiv .gnbWrap .gnb ul {margin-left:32.5%}
.gnbDiv .gnbWrap .gnb ul li {}
.gnbDiv .gnbWrap .gnb ul li a.oneDep {padding:0 20px; font-size:18px;}
.prd_con {}
.prd_in {width:100%; padding:0 2%;}
.prd_rolling dd {font-size:16px; padding-top:18px}
.prd_rolling .slick-arrow {width:40px; height:40px; left:15px; top:-100px; transform:translate(0,0);}
.prd_rolling .slick-arrow.slick-next {left:auto; right:15px;}
}
/*******************************************************************************
@media 768~980px
*******************************************************************************/
@media all and (max-width:980px){
.prd_con {padding:35px 2%}
.prd_in {padding:0}
.prd_rolling {}
.prd_rolling .slick-list {padding-top:25px; }
.prd_rolling dl {margin:0 10px}
.prd_rolling dd {font-size:14px;}
.prd_rolling .slick-arrow {width:35px; height:35px; top:-47px;}
.prd_rolling .slick-arrow.slick-next {}
}
/*******************************************************************************
@media 680~768px
*******************************************************************************/
@media all and (max-width:768px){
.prd_rolling dl {margin:0 7px}
}
/*******************************************************************************
@media 321~480px
*******************************************************************************/
@media all and (max-width:480px){
.prd_rolling .slick-arrow {width:30px; height:30px; top:-58px;}
.prd_rolling .slick-arrow.slick-next {}
}
/*******************************************************************************
@media ~320px
*******************************************************************************/
@media all and (max-width:320px){
}
.main_about { position:relative; overflow:hidden; padding:70px 0 }
.main_about h2 { text-align:center; line-height:1; font-size:34px; font-weight:700; text-transform:uppercase; letter-spacing:-1px; margin:0 0 55px }
.main_about .bg { width:100%; height:100%; position:fixed; background:url(../img/main_about_bg.jpg) no-repeat center top; background-size:cover; top:0; z-index:-1; opacity:0.8 }
.main_about .img { float:left; width:48%; }
.main_about .text { float:right; width:47%; }
.main_about .text h2 { font-size:70px; font-weight:300; line-height:1; margin:0 0 30px }
.main_about .text h2 strong { font-weight:700 }
.main_about .text h3 { font-size:2em; letter-spacing:-1px; font-weight:600; margin:10px 0 25px }
.main_about .text p { font-size:1.2em; color:rgba(0,0,0,0.7); line-height:1.4; margin:0 0 25px;word-break:keep-all }
.main_about .btn_area a { width:144px; height:38px; line-height:36px; text-align:center; display:inline-block; border-radius:19px; background:transparent; font-size:18px; border:1px solid #666; margin:10px 10px 0 0 }
.main_about .btn_area a:hover { background:#333; color:#fff; border-color:#333 }
.main_about dl dt { font-size:24px; font-weight:700; margin:25px 0 15px 0; line-height:1 }
.main_about dl dd { margin:10px 0 0 0; font-size:1.3em; font-weight:600 }
.main_about dl dd i { margin:0 3px 0 0 }
.main_about dl dd.tel { font-weight:700; font-size:30px; line-height:1 }
.main_about dl dd small { font-size:20px; margin:0 0 0 5px; display:inline-block; vertical-align:3px }
.main_about hr { display:block; margin:0; background:none; height:80px }
.main_about .root_daum_roughmap .wrap_map { height:330px !important }
@media (max-width:1280px) {
.main_about {padding:80px 0 }
.main_about .img { width:50% }
.main_about .img img:first-child { width:83% }
.main_about .img img:last-child { width:50%; top:55%; left:45%; right:0 }
.main_about .text { width:45% }
.main_about .text h2 { font-size:70px; margin-bottom:35px }
.main_about .text h3 { font-size:22px; margin-bottom:25px }
.main_about .text p { font-size:16px; margin:0 0 23px }
.main_about .btn_area a { width:120px; height:34px; line-height:32px; font-size:15px; margin-top:5px }
.main_about dl dt { font-size:20px; margin:40px 0 10px 0 }
.main_about dl dd.tel { font-size:28px }
}
@media (max-width:1023px) {
.main_about hr { height:50px }
.main_about .img { width:50% }
.main_about .text { width:45% }
.main_about .text h3 { font-size:1.7em; word-break:keep-all; margin:0 0 20px }
.main_about .text p { font-size:1.2em }
.main_about dl dt { font-size:18px; margin-top:28px }
.main_about dl dd small { font-size:16px }
}
@media (max-width:767px) {
.s_mobile_only { display:block !important }
.main_about hr { height:35px }
.main_about .img { width:100%; float:none }
.main_about .root_daum_roughmap .wrap_map { height:200px !important }
.main_about .text { width:100%; float:none; margin:35px 0 0 0 }
.main_about .text h3 { font-size:16px; margin:0 0 15px }
.main_about .text p { font-size:14px; margin:0 0 15px }
.main_about .text .btn_area { text-align:center }
.main_about dl dt { font-size:1.2em }
.main_about dl dd { font-size:1.1em }
.main_about dl dd.tel { font-size:2em }
.main_about dl dd small { font-size:12px; font-weight:500 }
.main_about, .main_product, .main_bbs { padding:40px 0 }
}
/* content01 */
business_list{overflow:hidden; margin-top:0px; margin-bottom:60px}
.business_list .bs_img{float:left;width:610px;/* height:420px */ margin-top:50px; text-align:center}
.business_list .bs_img img{/* width:100%*/}
.business_list .bs_txt{float:left;width:calc(100% - 610px);padding:50px 0px 0 20px}
.business_list .bs_txt h3{position:relative; font-size:20px;letter-spacing:-2px;color:#222;font-weight:400}
.business_list .bs_txt h4{position:relative; font-size:15px;letter-spacing:-2px;color:#222;font-weight:400}
.business_list .bs_txt h2{position:relative; line-height:42px; font-size:35px;letter-spacing:-2px;color:#222;font-weight:400}
.business_list .bs_txt h2 span {color:#0f50a3; font-weight:500; letter-spacing:-0.7pt; line-height:140%; font-size:25px; }
.business_list .bs_txt b{color:#203c92; font-size:22px;}
.business_list .bs_txt h3:after{ content:'';}
.business_list .bs_txt p{padding:20px 20px 0 0px; line-height:28px; font-size:17px;}
.business_list .bs_txt p img{width:100%}
/****** desktop ******/
@media screen and (min-width:899px) and (max-width:1200px){
/* 사업소개 */
.business_list .bs_txt{padding:30px 0px 0 20px}
.business_list .bs_img{width:450px; }
.business_list .bs_txt{float:left;width:calc(100% - 450px);padding:50px 0px 0 20px}
.business_list .bs_txt h3{font-size:28px;line-height:38px}
.business_list .bs_txt h3:after{display:none}
.business_list .bs_txt h3 br{display:none}
.business_list .bs_txt p{padding:20px 20px 20px 0px}
}
/****** tablet ******/
@media screen and (min-width:691px) and (max-width:899px){
.business_list .bs_img{width:100%;overflow:hidden}
.business_list .bs_txt{width:100%;padding:30px 0px 20px 20px}
.business_list .bs_img img{height:100%}
.business_list .bs_txt h3{font-size:28px;line-height:38px}
.business_list .bs_txt h3:after{display:none}
.business_list .bs_txt h3 br{display:none}
.business_list .bs_txt p{padding:20px 20px 20px 0px}
}
@media screen and (max-width:690px){
/******* mobile ******/
.business_list .bs_img{width:100%;overflow:hidden}
.business_list .bs_img img{height:100%}
.business_list .bs_txt{width:100%;padding:30px 0px 0 20px}
.business_list .bs_txt h3{font-size:28px;line-height:38px}
.business_list .bs_txt h3:after{display:none}
.business_list .bs_txt h3 br{display:none}
.business_list .bs_txt p{padding:20px 20px 20px 0px}
}
/* content01 */
/* 인증서 */
.certificate {position:relative; width:100%; text-align:center; max-width:1280px; margin:50px auto 0;}
.certificate .box-wrap {width:100%; font-size:0;}
.certificate .box-wrap li {width:48%; margin-left:2%; padding-bottom:40px; display:inline-block; vertical-align:top;}
.certificate .box-wrap li:first-child {margin-left:0;}
.certificate .box-wrap li:nth-child(3) {margin-left:0;}
.certificate .box-wrap li:nth-child(7) {margin-left:0;}
.certificate .box-wrap li p {color:#333; font-size:16px; text-align:left; line-height:25px; }
.certificate .box-wrap li .pic img {width:100%; border:1px solid #CCC; margin-bottom:10px;}
.certificate .box-wrap li h3{position:relative;font-size:22px; padding:20px 20px 20px 0px; letter-spacing:-1px;color:#222;font-weight:500}
@media all and (max-width: 768px) {
.certificate .box-wrap li {width:45%; margin:1% !important; padding-bottom:40px; display:inline-block; vertical-align:top;}
.certificate .box-wrap li p {font-size:14px; line-height:18px;}
}
@media all and (max-width: 480px) {
.certificate .box-wrap li {width:100%; margin:0% !important; padding-bottom:30px;}
}
.table_style{width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #333; border-left:1px solid #ddd; }
.table_style th{border-bottom:1px solid #ddd; font-size:14px; text-align:left; background:#f5f5f5; color:#333; font-weight:500; letter-spacing:-0.25pt;padding:8px 20px; border-right:1px solid #ddd; }
.table_style td{border-bottom:1px solid #ddd; font-size:14px; text-align:left; letter-spacing:-0.25pt; padding:8px 20px; border-right:1px solid #ddd; font-weight:300; }
.table_style td.left{text-align:left; font-size:16px; padding:18px 15px;}
.table_style td.tit{font-weight:500; color:#333; }
/* 인증서 */
.certificate {position:relative; width:100%; text-align:center; max-width:1280px; margin:10px auto;}
.certificate .box-wrap {width:100%; font-size:0;}
.certificate .box-wrap li {width:48%; margin-left:2%; padding-bottom:10px; display:inline-block; vertical-align:top;}
.certificate .box-wrap li:first-child {margin-left:0;}
.certificate .box-wrap li:nth-child(2) {margin-right:0;}
.certificate .box-wrap li:nth-child(7) {margin-left:0;}
.certificate .box-wrap li p {color:#333; font-size:16px; text-align:left; line-height:25px; }
.certificate .box-wrap li .pic img {width:100%; border:1px solid #CCC; margin-bottom:10px;}
.certificate .box-wrap li h3{position:relative;font-size:22px; padding:20px 20px 20px 0px; letter-spacing:-1px;color:#222;font-weight:500}
@media all and (max-width: 768px) {
.certificate .box-wrap li {width:45%; margin:1% !important; padding-bottom:40px; display:inline-block; vertical-align:top;}
.certificate .box-wrap li p {font-size:14px; line-height:18px;}
}
@media all and (max-width: 480px) {
.certificate .box-wrap li {width:100%; margin:0% !important; padding-bottom:30px;}
}