@charset "utf-8";
/*메인*/
.main_visual .bx-wrapper { margin:0 auto; padding: 0px; position: relative; width:100%; overflow:hidden ; position:relative; }
.main_visual .bx-wrapper img { }
.main_visual .bx-wrapper .bx-viewport { border: 0px solid #000; height:auto } /*영역*/
.main_visual .bx-wrapper .bx-pager {text-align: center; bottom: 25px; position: absolute; z-index:1000 } /*라운드영역*/
.main_visual .bx-wrapper .bx-controls-auto { width: 100%; bottom: -30px; position: absolute;} /*재생정지영역*/
.main_visual .bx-wrapper .bx-loading { background: url("../images/bx_loader.gif") no-repeat center rgb(255, 255, 255); left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 100; min-height: 50px; }/*로딩*/
.main_visual .bx-wrapper .bx-pager { text-align: center; color:#F00; padding-top: 20px; font-family: Arial; font-size: 0.85em; font-weight: bold; }
.main_visual .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; }
.main_visual .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; }
.main_visual .bx-wrapper .bx-default-pager.bx-pager a { background: #fff; margin: 0px 3px; outline: 0px; border-radius: 50%; width: 5px; height: 5px; text-indent: -9999px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border:1px solid rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1); padding:4px; } /*라운드,글자*/
.main_visual .bx-wrapper .bx-default-pager.bx-pager a:hover { }
.main_visual .bx-wrapper .bx-default-pager.bx-pager a.active { background:#71be54; background:rgba(136, 32, 32, 0); padding:1px ; border:5px solid rgba(173, 18, 62, 0.9); }
.main_visual .bx-wrapper .bx-prev { background: url("../img/main/controls.png") no-repeat 0px -100px; left: 0px; } /*화살표*/
.main_visual .bx-wrapper .bx-next { background: url("../img/main/controls.png") no-repeat -100px -100px; right: 0px; } /*화살표*/
@media screen and (max-width:1400px){
.main_visual .bx-wrapper .bx-pager { bottom: 20px; }
.main_visual .bx-wrapper .bx-prev { display:none} /*화살표*/
.main_visual .bx-wrapper .bx-next { display:none} /*화살표*/
}
@media screen and (max-width:1000px){
.main_visual .bx-wrapper .bx-default-pager.bx-pager a { width: 5px; height: 5px; padding:2px; }
.main_visual .bx-wrapper .bx-default-pager.bx-pager a.active { border:3px solid rgba(198, 50, 44, 0.9); }
.main_visual .bx-wrapper .bx-pager { bottom: 10px; } /*라운드영역*/
}
@media screen and (max-width:460px){
.main_visual .bx-wrapper .bx-pager { bottom: 5px; } /*라운드영역*/
}
.main_visual .bx-wrapper .bx-prev:hover { background-position: 0px 0px; }
.main_visual .bx-wrapper .bx-next:hover { background-position: -100px 0px; }
.main_visual .bx-wrapper .bx-controls-direction a { outline: 0px; top: 50%; width: 100px; height: 100px; text-indent: -9999px; margin-top: -50px; position: absolute; z-index: 9999; }/*화살표글자*/
.main_visual .bx-wrapper .bx-controls-direction a.disabled { display: none; }
.main_visual .bx-wrapper .bx-controls-auto { text-align: center; } /*재생정지*/
.main_visual .bx-wrapper .bx-controls-auto .bx-start { background: url("../img/main/controls.png") no-repeat -86px -11px; margin: 0px 3px; outline: 0px; width: 10px; height: 11px; text-indent: -9999px; display: block;}/*재생*/
.main_visual .bx-wrapper .bx-controls-auto .bx-start:hover { background-position: -86px 0px; }
.main_visual .bx-wrapper .bx-controls-auto .active.bx-start { background-position: -86px 0px; }
.main_visual .bx-wrapper .bx-controls-auto .bx-stop { background: url("../img/main/controls.png") no-repeat -86px -44px; margin: 0px 3px; outline: 0px; width: 9px; height: 11px; text-indent: -9999px; display: block; }/*정지*/
.main_visual .bx-wrapper .bx-controls-auto .bx-stop:hover { background-position: -86px -33px; }
.main_visual .bx-wrapper .bx-controls-auto .active.bx-stop { background-position: -86px -33px; }
.main_visual .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-pager { width: 100%; text-align: center; } /*라운드영역*/
.main_visual .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-controls-auto { width: 35px; right: 0px; } /*재생정지영역*/
.main_visual .bx-wrapper .bx-caption { background: rgba(80, 80, 80, 0.75); left: 0px; width: 100%; bottom: 0px; position: absolute; }
.main_visual .bx-wrapper .bx-caption span { padding: 10px; color: rgb(255, 255, 255); font-family: Arial; font-size: 0.85em; display: block; }
.main_visual ul li { text-align:center; position:relative; height:580px ; clear:both }
.main_visual ul li div.bg{max-width:1200px; margin:0 auto; width:100%; position:relative; color:#fff; height:100%}
.main_visual ul li div.bg p{position:absolute; top:0; left:0; z-index:102; }
.main_visual ul li .img_pa{position:absolute; top:0; left:0; width:100%; height:100%; /* background:#000; opacity:0;*/ z-index:100; background:url(../img/main/dot.png) repeat }
.main_visual ul li .img_pa2{position:absolute; top:0; left:0; width:100%; height:100%; /* background:#000; opacity:0;*/ z-index:100; background:url(../img/main/dot2.png) repeat }
.main_visual ul li .img_pa3{position:absolute; top:0; left:0; width:100%; height:100%; /* background:#000; opacity:0;*/ z-index:100; background:url(../img/main/dot3.png) repeat }
.main_visual ul li div.bg p .h2{ display: block; font-size:38px; text-transform:uppercase; font-weight:600; line-height:1.1em; letter-spacing:-2px; text-shadow: #444 1px 1px 2px; margin-bottom:20px}
.main_visual ul li div.bg p span{ font-size:16px; text-shadow: #555 1px 1px 2px; color:rgba(255,255,255,0.9)}
.main_visual ul li div.bg p span a{ font-size:14px; text-align:center; padding:10px 30px; border:1px solid rgba(255,255,255,0.5); border-radius:3px; display:inline-block; margin-top:20px; text-shadow:none}
.main_visual ul li.v_01 div.bg p{ padding-top:10%;width:90%; text-align:left; left:5%; }
.main_visual ul li.v_02 div.bg p{ padding-top:10%;width:90%; text-align:left; left:50%; margin-left:-45%}
.v_01{background: url(../img/main/visual01.jpg) top center no-repeat; }
.v_02{background: url(../img/main/visual04.jpg) top center no-repeat; }
@media screen and (max-width:1000px){
.main_visual ul li { height:350px }
.v_01, .v_02{ background-size: auto 100% }
.main_visual ul li div.bg p .h2{ font-size:25px; letter-spacing:-0.5px; margin-bottom:10px }
.main_visual ul li div.bg p span{ font-size:16px; }
}
@media screen and (max-width:640px){
.main_visual ul li { height:280px }
.main_visual ul li div.bg p .h2{ font-size:18px; }
.main_visual ul li div.bg p{line-height:1em }
.main_visual ul li div.bg p span{ font-size:12px; line-height:1em }
}
/*
.v_02{background: url(../img/main/visual02.jpg) top center no-repeat; transform: matrix(1.01, 0, 0, 1.01, 0, 0);}
.v_03{background: url(../img/main/visual03.jpg) top center no-repeat; transform: matrix(1.01, 0, 0, 1.01, 0, 0);}
.v_04{background: url(../img/main/visual04.jpg) top center no-repeat; transform: matrix(1.01, 0, 0, 1.01, 0, 0);}
*/
/*메인컨텐츠*/
.main_container{ width:100%; min-height:100px; padding:0 0 0 0;}
@media screen and (max-width:640px){
.main_container{ padding:0 0;}
}
/*a메인컨텐츠1영역*/
.main_con1{ max-width:1200px; margin:0 auto; padding:70px 0}
.main_con1 .box_list{ margin-left:-25px; overflow: hidden; *width:100%; }
.main_con1 .box_list > li{ float:left; width:33.33%; }
.main_con1 .box_list > li:first-child{ margin-left:0}
.main_con1 .box_list > li > div { margin-left:25px; position:relative; overflow:hidden; padding:35px; box-sizing:border-box;/* line-height:1.2em;*/} /*박스*/
.main_con1 .box_list li > div .tit{ position:relative; margin-bottom:25px; } /*타이틀*/
.main_con1 .box_list li > div .tit:after{ clear:both; display:block; content:"";}
.main_con1 .box_list li > div h2{ font-size:1.3em; font-weight:600}
.main_con1 .box_list li > div span.more{ position:absolute; top:0; right:0;}
.main_con1 .box_list li > div.news{ height:237px; border:0px solid #dadada} /*선*/
.main_con1 .box_list li > div.product{ border:1px solid #dadada; height:491px; }
.main_con1 .box_list li > div.lab,
.main_con1 .box_list li > div.pr,
.main_con1 .box_list li > div.recruit{ height:237px; background:#CCC} /*면*/
.main_con1 .box_list li > div.news,
.main_con1 .box_list li > div.pr{ margin-bottom:20px} /*마진*/
.main_con1 .box_list li > div.news,
.main_con1 .box_list li > div.lab,
.main_con1 .box_list li > div.recruit,
.main_con1 .box_list li > div.pr { color:#fff}
.news p.hot{ font-size:1.1em;}
.news p.hot a{ width:90%; display:inline-block; overflow:hidden ; text-overflow:ellipsis; word-wrap:break-word; white-space:nowrap;}
.news p.hot span.new{ display:inline-block; float:right; margin-top:-2px}
.news ul.notice_list{ margin-top:15px; border:0; width:100%} /*뉴스리스트*/
.news ul.notice_list li{clear:both; background: url(../img/main/notice_dot.gif) no-repeat 1px 6px;line-height:15px; margin:0 0 5px 0; display:block; position:relative; width:100%; text-align:left; color:#666 }
.news ul.notice_list li .date{ color:#999; float:right; font-size:13px}
.news ul.notice_list li a{ padding-left:8px; width:70%; height:18px; display:inline-block; overflow:hidden ; text-overflow:ellipsis; word-wrap:break-word; white-space:nowrap; font-size:0.9em }
.main_con1 .box_list li > div.news {background:url(../img/main/bn_business.jpg) no-repeat; background-size:cover ;}
.main_con1 .box_list li > div.lab{ background:url(../img/main/lab_bg.jpg) no-repeat; }
.main_con1 .box_list li > div.pr{ background:url(../img/main/pr_bg.jpg) no-repeat; }
.main_con1 .box_list li > div.recruit{ background:url(../img/main/bn_network.jpg) no-repeat; background-size:cover }
@media screen and (max-width:1200px){
.main_con1 .box_list li > div.lab, .main_con1 .box_list li > div.pr, .main_con1 .box_list li > div.recruit{ background-size:cover; background-position: top center }
}
.main_con1 .box_list li > div.pr p{ border-bottom:3px solid #FFF; text-align:center}
/*제품슬라이드*/
.product { }
.product .bx-wrapper { padding: 0px; height:auto!important; }
.product .bx-wrapper .bx-viewport { }
.product .bx-wrapper .bx-pager { position:absolute; top:35px; right:40px; z-index:10000; }
.product .bx-wrapper .bx-controls-auto { display:none}
.product .bx-wrapper .bx-pager { }
.product .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; }
.product .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; }
.product .bx-wrapper .bx-prev { background: url("../img/moad/prev.png") no-repeat top; top:0; left: 5%; width:51px; height:51px; display:none;}
.product .bx-wrapper .bx-next { background: url("../img/moad/next.png") no-repeat top; top:0; right: 5%;width:51px; height:51px; display:none;}
.product .bx-wrapper .bx-controls-direction a { text-indent: -9999px; position: absolute; z-index: 9999; }
.product .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-pager { }
.product .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-controls-auto { }
.product .bx-wrapper .bx-caption { left: 0px; width: 100%; bottom: 0px; position: absolute; }
.product .bx-wrapper .bx-caption span { padding: 10px; color: rgb(255, 255, 255); font-family: Arial; font-size: 0.85em; display: block; }
.product .bx-wrapper .bx-default-pager.bx-pager a {margin: 0px 2px; background:#a1a1a1; border:0px solid #fff;
width: 10px; height: 10px; text-indent: -9999px; display: block;border-radius: 10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; } /*라운드,글자*/
.product .bx-wrapper .bx-default-pager.bx-pager a:hover { background:#ad123e; border:0px solid #fff; }
.product .bx-wrapper .bx-default-pager.bx-pager a.active { background:#ad123e; border:0px solid #fff; }
#main_pro li{ margin:0; padding:0; }
#main_pro dl{ margin:0 ; padding:0;overflow:hidden}
#main_pro dl dt{ text-align:center}
#main_pro dl dt a{ height:100% }
#main_pro dl dt img{ max-width:100% }
#main_pro dl dd{ margin-top:5px; text-align:center; color:#777/*filter: alpha(opacity=70); -webkit-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; overflow:hidden*/ }
#main_pro dl dd p.pro_name{ /*color:#c6322c;*/ color:#ad123e; font-size:1.1em; font-weight:600}
#main_pro dl dd p.pro_co{ margin-top:10px}
#main_pro dl dd p span.p_more{ margin-top:13px; margin-bottom:2px; border:1px solid #ad123e; border-radius:3px; display: inline-block; font-size:13px; background:#ad123e; color:#fff}
#main_pro dl dd p span.p_more a{ padding:4% 25px; display:block}
@media screen and (max-width:1200px){
.main_con1 .box_list{ margin-left:-20px; }
.main_con1 .box_list > li > div { margin-left:20px;}
}
@media screen and (max-width:1000px){
.main_con1 .box_list{ margin-left:-0px; }
.main_con1 .box_list > li{ width:100%; margin-bottom:0}
.main_con1 .box_list > li > div { margin-left:0px; margin-bottom:0 !important}
.main_con1 .box_list > li > div{ float:left; width:50%}
.main_con1 .box_list > li > div.product{ width:100%; height:auto; border-top:none; border-bottom:none}
#main_pro dl dt{ width:40% ; float:left}
#main_pro dl dd{ width:50%; float:right; text-align:left}
}
@media screen and (max-width:500px){
.main_con1 .box_list > li > div{ float:left; width:100%}
}
@media screen and (max-width:460px){
.main_con1 .box_list > li > div {}
#main_pro dl dt{ width:100% ; }
#main_pro dl dd{ width:100%; text-align:center}
}
.main_con2{background:url(../img/main/patten_b.gif) repeat; color:#fff; text-align:center; padding:70px 0; overflow:hidden}
.main_con2 h2{ font-size:1.3em; font-weight:600; margin-bottom:50px; line-height:1.3em}
.main_con2 h2 span{/* color:#cd2323*/ color:#b51f46}
.main_con2 .bn_list li p{ font-size:1.05em}
.main_con2 .bn_list li h2{ font-size:1.3em; margin-bottom:20px; font-weight:600}
.main_con2 .bn_list li{ float:left; width:50%; padding:8% 30px; box-sizing:border-box}
.main_con2 .bn_list li span.btn_more{ display:block; margin-top:20px }
.main_con2 .bn_list li span.btn_more a{border:1px solid #FFF; border-radius:3px; padding:2% 45px; display:inline-block}
.bn_business{ background:url(../img/main/bn_business.jpg) no-repeat; background-size:cover ; }
.bn_network{ background:url(../img/main/bn_network.jpg) no-repeat; background-size:cover }
@media screen and (max-width:1200px){
.main_con2 h2{ margin-bottom:30px; font-weight:normal}
}
@media screen and (max-width:600px){
.main_con2 .bn_list li{ float:left; width:100%; padding-top:15%; padding-bottom:15%}
}
@media screen and (max-width:1200px){
.main_con1, .main_con2{padding:40px 0;}
}
@media screen and (max-width:640px){
.main_con1, .main_con2{padding:30px 0;}
}
/*레이어팝업*/
#layer {display:none; position:fixed; top:50%; left:50%; transform:translate(-52%,-50%); z-index:9999999999999; padding:50px; background: #fff;}
#layer #player {display:block;}
#layer .inner {position:relative;}
#layer .inner .cont {text-align:center;}
#layer .inner .cont h3 {font-size:18px; font-weight:500; margin:0 0 20px 0;}
#layer .inner .cont p {text-decoration:underline; font-weight:500; margin:0 0 5px 0;}
#layer .inner .close {display:block; background:#414546; border:1px solid #414546; color:#fff !important; margin:40px auto 0; text-align:center; width:100px; padding:5px 0; }
.dim {display:none; position:fixed; top:0;left:0; background:rgba(0,0,0,.7); width:100%; height:100%; -moz-opacity:0.4; z-index:999999;}
@media screen and (max-width:1000px) {
#layer #player {width:700px; height:400px;}
}
@media screen and (max-width:740px) {
#layer {width:50%; text-align:center;}
#layer #player {width:90%; display:inline-block;}
#layer .inner .close {right:5%;}
}
@media screen and (max-width:640px) {
#layer #player {height:300px;}
}
@media screen and (max-width:480px) {
#layer #player {height:200px;}
}