@charset "utf-8";

.subImg{display:inline-block;background-image:url(../../images/sub/img_sub_320.png);-webkit-background-size:44px 1000px;background-size:44px 1000px;font-size:0;line-height:0;overflow:hidden;text-indent:-9999px;vertical-align:top}
.location,.location a,.location a:first-child,.snb button,.snb li.current a,.snb li.current a:hover,.snb li:first-child a,.snb li:first-child a:hover,.snb li:first-child.current a,.snb li:first-child.current a:hover{background:url(../../images/common/bg_navi_320.png) no-repeat 0 0;-webkit-background-size:500px 196px;background-size:500px 196px}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.subImg{background-image:url(../../images/sub/img_sub_320.png)}
.location,.location a,.location a:first-child,.snb button,.snb li.current a,.snb li.current a:hover,.snb li:first-child a,.snb li:first-child a:hover,.snb li:first-child.current a,.snb li:first-child.current a:hover{background-image:url(../../images/common/bg_navi_640.png);}
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.subImg{background-image:url(../../images/sub/img_sub_320.png)}
.location,.location a,.location a:first-child,.snb button,.snb li.current a,.snb li.current a:hover,.snb li:first-child a,.snb li:first-child a:hover,.snb li:first-child.current a,.snb li:first-child.current a:hover{background-image:url(../../images/common/bg_navi_640.png);}
}

#navi{position:relative;height:46px;overflow:hidden}
.location{position:absolute;top:0;left:0;width:50%;height:46px;background-position:100% 0;overflow:hidden}
.snb{position:absolute;top:0;right:0;}


.locaWrap{padding-right:23px;}
.location a,.location span{float:left;display:block;height:46px;line-height:46px;}
.location a{color:#fff;font-size:16px;font-weight:600}
.location span{display:none;color:#777;font-family:Roboto;font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase}
.location a:first-child{display:none;width:46px;padding:0;text-indent:-9999px}
.customoverlay{/*background:#fff; padding:15px 20px 12px; border-radius:10px; box-shadow:0 0 6px 2px rgba(0,0,0,0.2);*/}
.customoverlay img{width:125px; height:50px; max-width:inherit;}


.snb button{display:block;width:100%;height:46px;background-position:0 100%;color:#fff;font-size:16px;font-weight:600;line-height:46px; padding-left:15px;}
.snb ul{display:none;height:54px;overflow:hidden}
.snb:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.snb li{float:left;margin-left:0;border-left:1px solid #404040}
.snb li:first-child{margin-left:0;border-left:0}
.snb li a{display:block;height:46px;background:url(../../images/common/bg_navi.gif);color:#fff;text-align:center;padding:0;font-size:16px;line-height:46px;}
.snb li a:hover{background-image:url(../../images/common/bg_footer.gif);}
.snb li.current a{font-weight:600}
.snb li:first-child a,.snb li:first-child a:hover{background-position:100% -50px;}
.snb li.current a,.snb li.current a:hover,.snb li:first-child.current a{background-position:100% -100px;}
.snb .snb-2018 li{background:url(../../images/sub/bg-2018.png)}


#contWrap{margin-top:5px;border:1px solid #dfd8dc;border-top:0;background:url(../../images/common/bg_sec.gif);}

.side{position:relative;padding-top:23px;}
.article{min-height:560px;padding:6%;}
.side .title{padding:5% 0 4%;background:url(../../images/common/dot.gif) repeat-x 0 100%;text-align:center}
.side .title h2{padding:2% 0;color:#716b6f;font-size:18px;font-weight:400}
.side .title .titImg{max-width:50%; max-height:50px;}
.side .title .iconImg{display:none}
.side .title img{vertical-align:middle}

.side .tel{padding:12% 0;background:url(../../images/common/dot.gif) repeat-x 0 100%;text-align:center}
.side .tel,.side .tel a{color:#716b6f;font-family:Roboto,"나눔고딕",Gulim,Sans-serif;letter-spacing:1px}
.side .tel ul{width:145px;margin:0 auto;}
.side .tel ul li{position:relative;padding-left:25px;font-size:11px;height:20px;line-height:20px;text-align:left}
.side .tel ul li.mainTel{height:32px;padding:0;text-align:center;}
.side .tel ul li strong{font-size:24px;font-weight:normal;letter-spacing:1px;font-weight:500}
.side .tel ul li span{position:absolute;top:3px;left:0;width:16px;height:16px;}

.side .customer ul{background:url(../../images/common/dot.gif) repeat-x 0 100%;}
.side .customer ul:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.side .customer ul li{position:relative;float:left;width:47%;padding:8% 0 40%;text-align:center;}
.side .customer ul li.estimate{width:53%;background:url(../../images/common/dot.gif) repeat-y 100% 100%}
.side .customer ul li a{display:block;position:absolute;top:50%;left:50%;width:84px;height:30px;margin:-42px 0 0 -42px;padding-top:54px;color:#716b6f;}
.side .customer ul li strong{font-size:12px;font-weight:400;text-align:center}
.side .customer .mainImg{position:absolute;top:14px;left:50%;margin:0 0 0 -16px;width:32px;height:32px;}
.estimate .mainImg{background-position:0 -36px;}
.vaisian .mainImg{background-position:-38px -36px;}

.side .vcs a{display:block;position:relative;width:100%;padding-bottom:10%;text-align:center;background:url(../../images/common/dot.gif) repeat-x 0 100%;}
.side .vcs strong{display:block;padding-top:10%;color:#3444ac;font-size:14px;font-weight:400}
.side .vcs .mainImg{position:absolute;top:30%;left:50%;width:72px;height:32px;margin:0 0 0 -36px;background-position:-114px -36px;}
.side .vcs p{padding-top:20%;color:#9b9699;font-size:9px;text-transform:uppercase;font-weight:400;font-family:Roboto,"나눔고딕",Gulim,Sans-serif;letter-spacing:2px}

/* Table */
.tbZebra{margin-top:10px;border-top:2px solid #e0e0d5;border-bottom:2px solid #e0e0d5}
.tbZebra table{width:100%;border-collapse:collapse;border:none;border-spacing:0;}
.tbZebra caption{width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;z-index:-1}
.tbZebra th,.tbZebra td{border:0;border-left:2px solid #fff;}
.tbZebra th{background:#fafaf5;color:#617384;font-size:17px;font-weight:700;text-align:center}
.tbZebra thead th{padding:11px 0 10px;border-bottom:2px solid #fff;}
.tbZebra tbody th{color:#716b6f;font-size:14px;font-weight:700}
.tbZebra td{padding:11px 0 10px;background:#fafaf5;text-align:center;}
.tbZebra th.gray{border-top:3px solid #9c969a}
.tbZebra th.yellow{color:#ff8f16;border-top:3px solid #ffa13c}
.tbZebra th.cyan{color:#0096c8;border-top:3px solid #01b2d6}
.tbZebra th.blue{color:#425bcd;border-top:3px solid #586ed3}
.tbZebra th.pink{color:#ed317e;border-top:3px solid #f64689}
.tbZebra .line th{background:#f0f0eb;}
.tbZebra .line th,.tbZebra .line td{border-top:2px solid #fff}

@media all and (min-width:320px) and (max-width:500px) {
.snb li a{display:block;height:32px;padding:6px 0;font-size:13px;line-height:16px;vertical-align:middle;}
.location a{background:none;}
}

@media all and (min-width:500px) and (max-width:760px) {
.snb li a{font-size:14px;}
}

@media all and (max-width:760px) {
.location a{width:100%;text-align:center}
.snb ul{position:absolute;top:51px;right:0;}
.tel,.customer,.vcs{display:none}
.sideWrap{background:url(../../images/common/bg_cont_top_m.png) no-repeat 50% 0;}
}


@media all and (min-width:760px) {
#navi{margin-top:10px;}
.location{width:25%;}
.location a{padding:0 0 0 20%;background-position:-46px 0;}
.location a:first-child{display:block}
.snb button{display:none}
.snb ul{display:block;height:46px;}
.snb li{margin-left:1px;border:0}
.snb li a:hover{background-color:#7c7779;font-weight:600}
.snb li.current a,.snb li.current a:hover{height:46px;border:0;background-position:right 100%;color:#fff;font-weight:600;line-height:46px;}
.snb li:first-child a{height:46px;padding-left:23px;border:0;background-position:0 -50px;line-height:46px;}
.snb li:first-child a:hover{background-position:0 -100px;}
.snb li:first-child.current a,.snb li:first-child.current a:hover{border:0;background-position:0 100%;}
#contWrap:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.sideWrap{float:left;width:25%;padding-top:23px;background:url(../../images/common/bg_cont_top.png) no-repeat 100% 0;}
.atcWrap{float:left;width:75%;padding-top:23px;background:url(../../images/common/bg_cont_top.png) no-repeat 0 0;}
.side{padding-top:17%;}
.article{padding:6% 10% 12%;background:url(../../images/common/dot.gif) repeat-y 0 0;}
.side .title{padding:0 0 13% 0;}
.side .title h2{padding:5% 0;font-weight:600}
.side .title .titImg{max-width:70%}
.side .title .iconImg{display:inline}

}

@media all and (min-width:1200px) {
.location a{padding:0 4% 0 12%;}
.location span{display:block;}
.side  .title .titImg{max-width:100%}
.side .tel ul{width:176px;}
.side .tel ul li{font-size:12px;height:24px;line-height:24px}
.side .tel ul li.mainTel{height:40px;}
.side .tel ul li strong{font-size:30px;letter-spacing:2px}
.side .tel ul li span{top:5px}
.side .customer ul li{padding:8% 0 34%;}
.side .customer ul li a{width:100px;height:40px;margin:-50px 0 0 -50px;padding-top:60px;}
.side .customer ul li strong{font-size:14px;font-weight:400;}
.side .customer .mainImg{top:18px}
.side .vcs a{padding-bottom:12%;}
.side .vcs strong{padding-top:9%;font-size:18px;}
.side .vcs .mainImg{position:absolute;top:0;left:50%;width:160px;height:44px;margin:22% 0 0 -80px;background-position:0 -74px;}
.side .vcs p{padding-top:24%;font-size:10px}
}

/* Making */
.feature .titBox{position:relative;height:200px;margin-bottom:50px;background:rgba(235,238,239,.5) url(../../images/sub/bg_feature.png) no-repeat 100% 100%}
.feature .titBox img{position:absolute;top:50%;margin:-45px 0 0 10%}
.feature .paragraph{margin-bottom:60px}
.feature .paragraph h3{position:relative;padding:22px 0 15px;font-size:20px;line-height:1.2;font-weight:600}
.feature .paragraph h3 span{display:block;position:absolute;top:0;left:0;padding:0 4px;border-left:1px solid #d02c47;border-right:1px solid #d02c47;color:#f64689;font-size:12px;font-family:Roboto;font-weight:400;line-height:12px}
.feature .paragraph p{color:#716b6f;font-size:14px;line-height:1.6;text-align:justify}
@media all and (min-width:760px) {
.feature .paragraph h3{font-size:24px;}
.feature .paragraph p{line-height:1.8;}
}
@media all and (min-width:1200px) {
.feature .paragraph{margin-bottom:80px}
.feature .paragraph h3{padding:7px 0 20px 23%;font-size:30px;font-weight:600;}
.feature .paragraph h3 span{width:16%;top:12px;padding:7px 0 0 0;border:0;border-top:3px solid #ff5793;font-size:14px;line-height:18px}
.feature .paragraph p{padding-left:23%;}
}

.process:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.process .titBox{position:relative;height:200px;margin-bottom:50px;background:rgba(235,238,239,.5) url(../../images/sub/bg_process.png) no-repeat 100% 100%}
.process .titBox img{position:absolute;top:50%;margin:-37px 0 0 5%}
.process li{float:left;width:30.3333333%;margin:1.5%;}
.process li .box{position:relative;width:220px;height:200px;margin:0 auto;padding-top:20px;background:url(../../images/sub/circle.png) no-repeat;text-align:center;overflow:hidden}
.process li .box h3{font-size:18px;font-weight:700;line-height:24px}
.process li .box h3 span{display:block;width:30px;margin:0 auto 10px;border-bottom:1px solid #ff5793;color:#ff5793;font-size:28px;font-family:Roboto;font-weight:400;line-height:30px;text-align:center}
.process li .box .icon{position:absolute;top:45%;left:50%;margin-left:-51px;width:102px;height:88px;background:url(../../images/sub/img_process.png) 50% 0 no-repeat;}
.process li.step1 .icon{background-position:50% 0;}
.process li.step2 .icon{background-position:50% -88px;}
.process li.step3 .icon{background-position:50% -176px;}
.process li.step4 .icon{background-position:50% -264px;}
.process li.step5 .icon{background-position:50% -352px;}
.process li.step6 .icon{background-position:50% -440px;}
.process li.step7 .icon{background-position:50% -528px;}
.process li.step8 .icon{background-position:50% -616px;}
.process li.step8 .icon{background-position:50% -704px;}

.tab_price{margin-bottom:50px;}
.tab_price:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.tab_price li{float:left;width:33%;margin-left:0.5%}
.tab_price li:first-child{margin:0}
.tab_price li a{display:block;position:relative;height:70px;border:3px solid #586ed3}
.tab_price li a:hover,.tab_price li a:focus{border:3px solid #1e0797}
.tab_price li.current a{height:90px;border:0;background:url(../../images/sub/bg_tab.png) 50% 0 no-repeat;}
.tab_price li a h3{padding:12px 0 0 35%;font-size:18px;color:#586ed3;font-weight:700}
.tab_price li a:hover h3,.tab_price li a:focus h3{color:#1e0797}
.tab_price li.current a h3{padding-top:15px;color:#fff}
.tab_price li a h3 span{display:block;padding-left:2px;font-size:12px;font-weight:400;font-family:Roboto;letter-spacing:1px}
.tab_price li a .subImg{position:absolute;top:19px;left:30px;width:32px;height:32px;}
.tab_price li.current a .subImg{top:22px}
.tab_price li.price_site .subImg{background-position:50% -650px;}
.tab_price li.price_site a:hover .subImg{background-position:50% -800px;}
.tab_price li.current.price_site .subImg,.tab_price li.current.price_site a:hover .subImg{background-position:50% -500px;}
.tab_price li.price_mall .subImg{background-position:50% -700px;}
.tab_price li.price_mall a:hover .subImg{background-position:50% -850px;}
.tab_price li.current.price_mall .subImg,.tab_price li.current.price_mall a:hover .subImg{background-position:50% -550px;}
.tab_price li.price_mobile .subImg{background-position:50% -750px;}
.tab_price li.price_mobile a:hover .subImg{background-position:50% -900px;}
.tab_price li.current.price_mobile .subImg,.tab_price li.current.price_mobile a:hover .subImg{background-position:50% -600px;}


.homepage .paragraph,.mall .paragraph,.mobile .paragraph{position:relative;margin-top:80px}
.paragraph .title{position:absolute;top:0;left:0;width:120px;height:120px;background:url(../../images/sub/circle.png) 0 -220px no-repeat;overflow:hidden}
.paragraph .title h4{padding-top:25px;font-size:30px;font-weight:700;text-align:center}
.paragraph .title h4 span{display:block;font-size:16px;font-weight:400;font-family:Roboto;}
.paragraph.cyan .title{background-position:0 -250px;color:#01b2d6}
.paragraph.blue .title{background-position:0 -400px;color:#586ed3}
.paragraph.pink .title{background-position:0 -550px;color:#ff5793}
.paragraph .detail{padding:20px 0 0 25%}
.paragraph .detail p{font-size:14px;line-height:24px}
.paragraph .detail p strong{display:block;font-size:24px;font-weight:700}
.paragraph .detail .info{margin-top:20px;}
.paragraph .detail .info:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.paragraph .detail .info h5{float:left;width:12%;margin-right:3%;font-size:14px;font-weight:700;line-height:22px;background:url(../../images/sub/img_sub_320.png) 100% -395px no-repeat;}
.paragraph.cyan .detail .info h5{background-position:100% -395px;}
.paragraph.blue .detail .info h5{background-position:100% -345px;}
.paragraph.pink .detail .info h5{background-position:100% -295px;}
.paragraph .detail .info ul,.paragraph .detail .info p{float:left;width:85%;font-size:13px;line-height:22px}

.mobile_price .paragraph:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.mobile_price .img{float:left;width:34%;padding-right:5%}
.mobile_price ul{float:left;width:61%}
.mobile_price li{position:relative;padding-bottom:25px;line-height:22px;}
.mobile_price li .num{position:absolute;top:7px;left:0;width:48px;height:48px;color:#9c969a;line-height:48px;text-align:center;background:url(../../images/sub/circle.png) 100% -250px no-repeat;font-family:Roboto;font-size:20px;font-weight:400}
.mobile_price li .cont{display:block;padding:0 0 0 65px;font-size:14px}
.mobile_price li .cont strong{font-size:18px;line-height:36px;color:#f64689}

.sianList{font-size:14px}
.sianList li{margin-bottom:100px}
.sianList li:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.sianList .img{float:left;width:45%;padding-right:5%}
.sianList .info h3{margin-bottom:25px;font-size:18px}
.sianList .info dl{margin-bottom:10px;overflow:hidden}
.sianList .info dl:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.sianList .info dt{float:left;clear:both;padding-right:10px;border-right:1px solid #ccc;line-height:14px}
.sianList .info dd{float:left;padding-left:10px;line-height:14px}
.sianList .info dl.code{color:#ff5793}
.sianList .info a.more{display:inline-block;height:36px;margin-top:25px;padding:0 25px 0 12px;border:1px solid #a9a6a8;border-radius:3px;background:#fff url(../../images/sub/img_sub_320.png) no-repeat 100% -957px;color:#716b6f;line-height:36px}

/* Service */
.service ul:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.service li{float:left;width:42%;height:320px;padding:0 4% 80px}
.service li span{display:block;width:125px;height:125px;margin:0 auto;background:url(../../images/sub/img_service.png) no-repeat;text-indent:-9999px}
.service li.sv1 span{background-position:0 0;}
.service li.sv2 span{background-position:0 -130px;}
.service li.sv3 span{background-position:0 -260px;}
.service li.sv4{padding-bottom:120px;}
.service li.sv4 span{background-position:0 -390px;}
.service li.sv5 span{background-position:0 -520px;}
.service li.sv6 span{background-position:0 -650px;}
.service li p{padding-top:25px;font-size:14px;text-align:justify}
.service li p strong{display:block;padding-bottom:20px;font-size:24px;font-weight:600;text-align:center}

.tab_publish{margin-bottom:50px;}
.tab_publish:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.tab_publish li{float:left;width:33%;margin-left:0.5%}
.tab_publish li:first-child{margin:0}
.tab_publish li a{display:block;position:relative;height:70px;border:3px solid #586ed3}
.tab_publish li a:hover,.tab_price li a:focus{border:3px solid #1e0797}
.tab_publish li.current a{height:90px;border:0;background:url(../../images/sub/bg_tab.png) 50% 0 no-repeat;}
.tab_publish li a h3{padding-top:12px;font-size:18px;color:#586ed3;font-weight:700;text-align:center}
.tab_publish li a:hover h3,.tab_price li a:focus h3{color:#1e0797}
.tab_publish li.current a h3{padding-top:15px;color:#fff}
.tab_publish li a h3 span{display:block;padding-left:2px;font-size:12px;font-weight:400;font-family:Roboto;letter-spacing:1px}

.publish{font-size:14px;text-align:justify;line-height:24px}
.publish h4{padding-bottom:30px;font-size:24px;font-weight:700;}
.publish .paragraph{margin-bottom:70px}
.publish .para1 img{float:left;margin:0 35px 30px 0}
.publish .para1 strong{display:block;padding:3% 4%;border:2px dashed #ddd;background:#f9f9f9;color:#01b2d6;font-size:18px;font-weight:700;line-height:1.8}
.publish .para2 li{position:relative;padding-bottom:25px;line-height:22px;}
.publish .para2 li .num{position:absolute;top:7px;left:0;width:48px;height:48px;color:#9c969a;line-height:48px;text-align:center;background:url(../../images/sub/circle.png) 100% -250px no-repeat;font-family:Roboto;font-size:20px;font-weight:400}
.publish .para2 li .cont{display:block;padding:0 0 0 65px;font-size:14px}
.publish .para2 li .cont strong{font-size:18px;line-height:36px;color:#f64689}
.publish strong.highlight{padding:3px;border-bottom:1px dotted #ff5793;color:#ff5793}
.publish .boxWrap{display:block;margin-top:15px;padding:2% 3%;border:2px dashed #ddd;background:#f9f9f9;}
.publish .boxWrap strong{color:#01b2d6;}
.publish .boxWrap a{color:#01b2d6}

/*.maintenance li{position:relative;margin:10px 0;}
.maintenance li .num{position:absolute;top:0;left:0;width:36px;height:36px;color:#9c969a;line-height:36px;text-align:center;background:url(../../images/sub/circle.png) 100% -400px no-repeat;font-family:Roboto;font-size:16px;font-weight:500}
.maintenance li .cont{display:block;height:36px;padding:0 0 0 50px;font-size:16px;line-height:36px}
.maintenance li .cont strong{font-size:18px;line-height:36px;color:#f64689;}
.maintenance .tbZebra{margin-top:40px}*/

.maintenance ul:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.maintenance li{position:relative;min-height:130px;margin-bottom:60px;}
.maintenance li span{position:absolute;top:0;left:0;display:block;width:125px;height:125px;background:url(../../images/sub/img_service.png) no-repeat;text-indent:-9999px}
.maintenance li.sv1 span{background-position:0 -780px;}
.maintenance li.sv2 span{background-position:0 -910px;}
.maintenance li.sv3 span{background-position:0 -1040px;}
.maintenance li.sv4 span{background-position:0 -1170px;}
.maintenance li p{padding-left:150px;font-size:14px;line-height:1.7}
.maintenance li p strong{display:block;padding-bottom:10px;font-size:24px;font-weight:600;}
.maintenance li em{font-weight:bold;color:#00a4cd}

.solution{font-size:14px}
.solution h3{position:relative;color:#f64689;height:36px;padding:0 0 0 50px;font-size:16px;line-height:36px}
.solution h3 span{position:absolute;top:0;left:0;width:36px;height:36px;color:#9c969a;line-height:36px;text-align:center;background:url(../../images/sub/circle.png) 100% -400px no-repeat;font-family:Roboto;font-size:16px;font-weight:500}
.solution ul{padding:0 0 50px 50px}
.solution ul li{line-height:30px;}

.responsive h3{font-size:30px;text-align:center}
.responsive h3 span{color:#f64689}
.responsive p{font-size:15px;line-height:30px}
.responsive p.img{padding:40px 0 30px;text-align:center}
.responsive h4{margin-top:50px;font-size:18px;color:#f64689}
.responsive li{position:relative;margin:20px 0;}
.responsive li .num{position:absolute;top:0;left:0;width:36px;height:36px;color:#9c969a;line-height:36px;text-align:center;background:url(../../images/sub/circle.png) 100% -400px no-repeat;font-family:Roboto;font-size:16px;font-weight:500}
.responsive li .cont{display:block;height:24px;padding:6px 0 6px 50px;font-size:15px;line-height:24px}
.responsive li .cont strong{font-size:18px;line-height:36px;color:#f64689;}

/* Portfolio */
.portfolio{padding:10px 0}
.portfolio a{text-decoration:none}
.portfolio:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.portfolio li{float:left;width:20%;}
.portfolio li a{display:block;height:200px;position:relative;border-width:0 1px 1px 0;border-style:solid;border-color:#e1e1e1;background:#fff;text-align:center}
.portfolio li a .portImg{display:block;padding-top:25px}
.portfolio li a .portInfo{position:absolute;top:0;left:0;right:0;bottom:0;color:#2d2828;font-size:13px;line-height:18px;text-align:center; overflow:hidden;}
.portfolio li a .portInfo span{position:absolute;top:75%;left:0;right:0;bottom:0;}
.portfolio li a .portInfo em{display:none;color:#fff;font-family:Roboto;font-size:11px}
.portfolio li a .portInfo img{display:none}
.portfolio li a:hover .portImg{display:none}
.portfolio li a:hover .portInfo img{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:auto;}
.portfolio li a:hover .portInfo span{top:70%;padding-top:5%;background:url(../../images/common/bg_gnb.png);color:#fff;font-weight:600}
.portfolio li a:hover .portInfo em{display:block;}
.portfolio .no_link{cursor:inherit;}

@media all and (max-width:1200px) {

}
@media all and (max-width:1000px) {
.portfolio li{width:25%;}
}
@media all and (max-width:800px) {
.portfolio li{width:33.333333%;}
}
@media all and (max-width:600px) {
.portfolio li{width:50%;}
.service li{width:94%; height:auto; padding:0 3% 50px;}
.service li p{text-align:left;}
.service li.sv4{padding-bottom:50px;}

.paging a.first,
.paging a.last{display:none;}
.paging a.prev{margin-right:5px;}
.paging a.next{margin-left:5px;}


}
@media all and (max-width:400px) {
.portfolio li{width:100%;}
}

/* Customer */
.notice{}
.boardList{margin-bottom:60px}
.boardList li{position:relative;display:block;margin-top:60px}
.boardList li:first-child{margin-top:0}
.boardList li .date{position:absolute;top:8px;left:0;color:#a9a6a8;font-family:Roboto;}
.boardList li .date .num{color:#716b6f;font-size:52px;font-weight:300;line-height:56px}
.boardList li .list{padding-left:15%}
.boardList li .list p.tit a{display:block;padding:15px 0;color:#514e50;font-size:20px;}
.boardList li .list p.tit a:hover{color:#f64689;text-decoration:underline}
.boardList li .list p{color:#716b6f;font-size:14px;line-height:24px;}

.paging{margin:20px 0;text-align:center;}
.paging a,.paging em{display:inline-block;width:36px;height:36px;color:#716b6f;font-size:18px;font-weight:normal;font-family:Roboto;line-height:36px;}
.paging a:hover{text-decoration:underline}
.paging em.current{color:#fff;background:url(../../images/sub/img_sub_320.png) 50% -150px;}
.paging a.btn{background:url(../../images/sub/bg_btn.png) 0 0 no-repeat;font-family:"Nanum Gothic",Sans-serif;color:#716b6f;font-size:13px;text-align:left}
.paging a:hover.btn{text-decoration:none}
.paging a.first{width:53px;padding-left:38px;background-position:0 -50px;}
.paging a.prev{width:42px;padding-left:32px;background-position:-91px -50px;}
.paging a.next{width:56px;padding-left:18px;background-position:0 -100px;}
.paging a.last{width:73px;padding-left:18px;background-position:-74px -100px;}

.boardView{border-bottom:2px solid #c9c9c9}
.boardView .title:after{content:".";clear:both;display:block;height:0;visibility:hidden}
/*.boardView .title .date{float:left;width:10%;padding:10px 2% 10px 4%;border-top:5px solid #586ed3;color:#a9a6a8;font-family:Roboto;}
.boardView .title .date .num{color:#716b6f;font-size:52px;font-weight:300;line-height:56px}*/
.boardView .title .tit{float:left;width:94%;padding:30px 2% 0 4%;border-top:5px solid #ff5793;color:#514e50;font-size:22px;}
.boardView .cont{margin:0 4%;padding:40px 0;color:#514e50;font-size:14px;background:url(../../images/common/dot.gif) repeat-x 0 0;line-height:28px}

.btnView{margin:30px 0;text-align:center}
.btnView a{display:inline-block;height:36px;color:#716b6f;font-size:13px;text-align:left;line-height:35px;background:url(../../images/sub/bg_btn.png) 0 0 no-repeat;}
.btnView a.prev{width:41px;padding-left:32px;background-position:0 0;}
.btnView a.list{width:38px;padding-left:35px;background-position:-73px 0;}
.btnView a.next{width:55px;padding-left:19px;background-position:100% 0;}

.faq{position:relative;}
.faq li{padding:4%;margin-bottom:15px;border:1px solid #dedede;background:#fff;}
.faq li p{padding-left:60px;text-align:justify}
.faq li .question{position:relative;padding-bottom:15px;color:#514e50;font-size:16px}
.faq li .answer{position:relative;padding-top:25px;color:#716b6f;font-size:14px;background:url(../../images/common/dot.gif) repeat-x 0 0;line-height:24px}
.faq li p strong{position:absolute;left:0;width:36px;height:36px;background:url(../../images/sub/img_sub_320.png) 50% 0;color:#fff;font-size:20px;line-height:36px;font-family:Roboto;font-weight:400;text-align:center;}
.faq li .question strong{top:-5px;background-position:50% 0;}
.faq li .answer strong{top:18px;background-position:50% -50px;}

.request .titBox{position:relative;height:200px;margin-bottom:50px;background:rgba(235,238,239,.5) url(../../images/sub/bg_request.png) no-repeat 100% 100%}
.request .titBox img{position:absolute;top:50%;margin:-37px 0 0 10%}
.request dl{padding:6px 0;color:#514e50;font-size:14px;line-height:34px;overflow:hidden}
.request dl:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.request dl dt{float:left;width:20%;text-align:right;}
.request dl dd{float:left;width:75%;padding-left:5%;}
.request input[type=text],.request input[type=file],.request select{width:12%;height:32px;padding:0 3px;border-width:1px;border-style:solid;border-color:#d2d2d2 #fff #fff #d2d2d2;background:#f5f5f5;font-size:14px;color:#514e50}
.request input[type=radio] + label{margin:0 25px 0 3px;font-size:13px}
.request textarea{width:87%;height:200px;padding:3px;border-width:1px;border-style:solid;border-color:#d2d2d2 #fff #fff #d2d2d2;background:#f5f5f5;font-size:14px;color:#514e50}
.request .required dt{font-weight:700}
.request .required em{padding-right:3px;color:#f64689;}
.request input.widL{width:80%}
.request input.widMM{width:50%}
.request input.widM{width:25%}
.request input.widS{width:12%}
.request input:focus,.request .required input:focus{border-color:#ff5793}
.request .agreeBox{width:94%;margin:40px auto 0;padding:10px 0;border-top:2px solid #ccc;border-bottom:2px solid #ccc;background:#fff;font-size:13px;line-height:18px;color:#696464}
.request .agreeBox span{display:block;height:150px;padding:3% 4%;background:#fff;overflow-y:scroll}
.request .checkAgree{width:94%;margin:10px auto 0;}
.request .checkAgree input[type=checkbox]{margin-right:6px;}
.request .btnArea{margin-top:50px;text-align:center}
.request input[type=submit]{width:180px;height:48px;color:#fff;font-size:18px;font-weight:700;text-align:center;background:url(../../images/sub/bg_btn.png) 0 -150px no-repeat;}

/* Vaimedia */

.overview .paragraph{position:relative;padding-top:100px;font-size:14px;line-height:1.8;overflow:hidden}
.overview .paragraph:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.overview .paragraph.greet{padding:0;}
.overview h3,.overview p.img{float:left;width:25%;margin:0;}
.overview p,.overview ul{float:left;width:65%;margin-left:10%}
.overview h3{position:relative;border-top:3px solid #ff5793;color:#f64689;font-size:26px;}
.overview span{position:absolute;top:5px;right:0;color:#f64689;font-size:13px;font-family:Roboto;font-weight:400;}
.overview .objective .contBox{float:left;width:65%;margin-left:10%}
.overview .objective .contBox h4{margin-top:50px;color:#f64689}
.overview .objective .contBox h4.first{margin-top:0}
.overview .objective .contBox p{clear:none;width:100%;margin:0}
.overview .business li{display:table;float:left;width:120px;height:120px;margin:20px;background:url(../../images/sub/circle.png) no-repeat 0 -700px;color:#716b6f;text-align:center;font-weight:700;line-height:1.6}
.overview .business li div{display:table-cell;vertical-align:middle;}

/*Utility*/
.utility{line-height:1.8;}
.utility p{margin-bottom:22px;}
.utility .UT_tt{font-size:28px; font-weight:bold; margin-bottom:35px; color:#586ed3;}
.utility h4{  font-size: 20px; font-weight: 700; margin-bottom:12px; margin-top:35px;}
.utility dt{font-weight:700; font-size:15px; margin-bottom:5px;}
.utility dl{margin-bottom:12px;}
.utility .FT_size{font-size:15px;}


@media all and (max-width:1200px) {
.overview h3 span{left:0;top:40px;}
}

.history .paragraph{position:relative;padding-top:100px;font-size:14px;line-height:1.8;overflow:hidden}
.history .first{padding-top:0}
.history h3{position:relative;border-top:3px solid #ff5793;color:#f64689;font-size:26px;}
.history span{position:absolute;top:5px;right:0;color:#f64689;font-size:13px;font-family:Roboto;font-weight:400;}
.history h3{float:left;width:25%;margin:0;}
.history ol{float:left;width:65%;margin-left:10%}
.history ol li{line-height:2.4}
.history ol li span{position:relative;top:0;left:0;padding-right:20px;font-size:15px;font-weight:500;}
.history .contBox{clear:both}
.history .contBox p{text-align:justify}
.history h4{padding:40px 0 5px;font-size:16px}
.history ul li{font-size:13px}


.map .paragraph:after{content:".";clear:both;display:block;height:0;visibility:hidden}
.map .mapArea{width:100%;}
.map .mapArea #map_canvas{width:100%; height:370px;}
.map .info{margin-top:30px;}
.map .info dt{padding-bottom:5px;color:#ed317e;font-size:13px;font-weight:700}
.map .info dd{padding-bottom:20px;font-size:14px;}




/*20180327 추가*/
.atcWrap.actWrap2018{width:100%; float:none; background:none;}
.article.article2018{padding:3% 4% 12% 2%;}

.tel-link{padding-left:3%; font-family:Roboto; font-size:18px; text-align:center; margin-bottom:30px;}
.tel-link div{margin-bottom:10px; font-size:30px;}
.tel-link p{width:40px; height:40px; background:url(../../images/sub/tel2018.png) #514e50 no-repeat 50%; background-size:25px; border-radius:50%; margin:0 auto;}
.tel-link a{color:#514e50;font-size:30px; font-weight:500; display:inline-block; margin:0 10px;}
.tel-link a span{display:inline-block; background:url(../../images/sub/T-P-2018-1.png) no-repeat 0% 50%; background-size:30px; padding-left:35px;}
.tel-link a.tel-h span{background-image:url(../../images/sub/T-P-2018-2.png);}
#main-gallery h2{border-bottom:5px #00214e solid; position:relative; height:97px; margin:0 auto; margin-bottom:64px; width:100%;}
#main-gallery h2 span{display:block; color:#00214e; font-weight:400; font-size:40px; text-align:center; position:absolute; width:400px; left:50%; margin-left:-200px; top:65px;  height:60px;background:#f3f3f3; letter-spacing:-0.015em;}
#main-gallery ul:after{clear:both; content:""; height:0; display:block; visibility:hidden;}
#main-gallery .main-gallery-box{width:100%; margin:0 auto; overflow:hidden;;}
#main-gallery .main-gallery-box ul{width:100%; }
#main-gallery .main-gallery-box ul li{width:33.3%; float:left; margin-bottom:25px;}
#main-gallery .main-gallery-box ul a{display:block; margin-left:5%; position:relative;}
#main-gallery .main-gallery-box ul a img{width:100%;}
.ex-link a{display:inline-block; padding:10px 0px; font-size:14px; background:#e22253; color:#fff; font-weight:bold; width:100%; max-width:800px; text-align:center; vertical-align:middle;}
.ex-link a span{display:inline-block; background:url(../../images/sub/link-ico.png) no-repeat 100% 50%; background-size:20px 15px; padding-right:25px;}
.url_link{text-align:right; padding-bottom:20px;}
.url_link button{display:inline-block; padding:5px 10px;border-radius:3px; border:1px #9c9c9c solid; background:#fff; box-shadow:1px 1px 1px rgba(0,0,0,0.1)}
.url_link span{display:inline-block;  background:url(../../images/sub/link-img.gif) no-repeat 0 50%; background-size:12px; padding-left:16px;}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width:1280px) {
#main-gallery .main-gallery-box{width:100%;}
#main-gallery .main-gallery-box ul{width:103%; margin-left:0; margin-left:-3%;}
#main-gallery .main-gallery-box ul li{width:30.3%; margin-left:3%;}
#main-gallery .main-gallery-box ul a{margin-left:0;}
}

@media (max-width:1024px) {
#main-gallery .main-gallery-box{width:100%;}
#main-gallery .main-gallery-box ul{width:102%; margin-left:-2%;}
#main-gallery .main-gallery-box ul li{width:48%; margin-left:2%;}


}



@media (max-width:740px) {
.article.article2018{padding-left:4%;}
.tel-link{margin-bottom:10px;}
.tel-link p{margin-top:20px;}
.tel-link div{font-size:0px;}
.tel-link a{font-size:20px; margin-top:10px;}
.ex-link a{width:108%; margin:0 -4%;}
#main-gallery .main-gallery-box ul{width:100%; margin-left:0;}
#main-gallery .main-gallery-box ul li{width:100%;margin-bottom:5px;margin-left:0%;}
#main-gallery .more-btn{width:50px; height:50px; line-height:50px; margin-top:10px;}
#main-gallery .more-btn i{font-size:32px;}
#main-gallery h2{height:60px; border-width:3px; margin:0 5%; width:90%; margin-bottom:30px;}
.tel-link{font-size:12px;}
.article.article2018 .notice{margin:-3% -4% 0 -2%;}
.article.article2018 .notice .cont img{width:108%; margin:0 -4%; max-width:800px;}

.paging a.first,
.paging a.last{display:none;}
.paging a.prev{margin-right:5px;}
.paging a.next{margin-left:5px;}
.paging a.btn{font-size:11px;}

.map .mapArea #map_canvas{ height:300px;}
}