/* 메인슬라이더 */
#visual{width:100%; min-width:1200px; height:750px; margin:0 auto; position:relative; overflow:hidden; visibility:hidden;}
a{cursor:pointer}

#visual .sliderbx{ z-index:10;width:100% !important; height:750px; position:relative;}
#visual #slogan{ text-align:center; width:100%; color:#fff; background:rgba(255,255,255,0); padding:20px 20px 0 20px; position:absolute; top:30%; left:50%; transform:translate(-50%, -50%); z-index:998;
 text-shadow:0px 0px 4px rgba(0,0,0,0.3);}
#visual #slogan .img01{ font-size:3.7em; font-weight:500; letter-spacing:-2px; line-height:2em; visibility:hidden;}
#visual #slogan .img01.big{ font-size:4.5em; }
#visual #slogan .img02{ font-size:2.2em; font-weight:400; display:block;}
#visual #slogan .img03{margin-top:30px;}
#visual #slogan .img03 img{width:680px; height:auto;}
#visual #slogan .mt{ font-weight:100; font-size:1.7em; visibility:hidden; line-height:1.5em; padding-top:15px; letter-spacing:-1.7px; }
#visual .sliderbx li{ width:100% !important; height:750px; background-repeat:no-repeat; background-position: center top;}
#visual .sliderbx li.mv01{background-image:url(../img/main/mvisual01.jpg)}
#visual .sliderbx li.mv02{background-image:url(../img/main/mvisual02.jpg)}
#visual .sliderbx li.mv03{background-image:url(../img/main/mvisual03.jpg)}
#visual .sliderbx li.mv04{background-image:url(../img/main/mvisual04.jpg)}
#visual .sliderbx li a{ display:block; width:100%;}
#visual div.bx-pager{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:101;}
#visual div.bx-pager div{ float:left; margin:0 4px;}
#visual div.bx-pager div a{ display:block; width:13px; height:5px; text-indent:-9999px; background:#fff;}
#visual div.bx-pager div a.active{ width:40px;}
#visual div.bx-controls-direction a{ 
display:block; width:50px; height:50px; border-bottom:3px solid #FFF; border-left:3px solid #FFF; border-radius:0 0 0 5px; text-indent:-9999px; position:absolute; top:50%; margin-top:-25px !important; z-index:9999;} /*좌우버튼동시선택*/
#visual a.bx-prev{ transform:translateY(-50%) rotate(45deg); left:40px;}
#visual a.bx-next{ transform:translateY(-50%) rotate(-135deg); right:40px;}	
#visual div.bx-controls-auto{position:absolute; width:40px; top:30px; z-index:2; left:50%; margin-left:470px; }
#visual div.bx-controls-auto a{	float:left; margin-right:3px; width:12px; height:12px; border-radius:9px; color:#FFF; text-align:center; line-height:12px; font-size:12px; text-indent:-9999px;	} /*플레이스탑버튼동시선택*/
#visual div.bx-controls-auto a.bx-start{background:url(../img/common/btn_play.png) no-repeat 50% 50% #4C5365;}
#visual div.bx-controls-auto a.bx-stop{background:url(../img/common/btn_stop.png) no-repeat 50% 50% #4C5365;}
@media (max-width: 1200px) {
#visual{width:100%; min-width:100%; height:300px;}
#visual #slogan{ width:100%; top:50%; transform:translateY(-50%); margin-left: inherit;left:inherit;  padding:20px; }
#visual #slogan .img01{font-size:1.7em; line-height:1.4em; letter-spacing:-1px; }
#visual #slogan .img01.big{ font-size:2.2em; }
#visual #slogan .img02{font-size:1.1em;}
#visual #slogan .img03{margin-top:15px;}
#visual #slogan .img03 img{width:80%; height:auto;}
#visual #slogan .mt{ font-size:1em; letter-spacing:-1px; padding-top:5px; }
#visual .sliderbx li{ width:100% !important; height:300px; background-position:center top; background-size:cover;}
#visual div.bx-pager{bottom:15px;  margin-left:0;}
#visual div.bx-pager div{ margin:0 2px;}
#visual div.bx-pager div a{ width:8px; height:8px; border-width:3px;}
#visual div.bx-controls-direction{ display:none;}
}


/* 제품소개 */
#area_product{position:absolute; padding:0; background:none; top: 750px; left: 50%; transform: translate(-50%,-375px); z-index: 1;}
#area_product .in{width:1000px; margin:0 auto;}
#area_product .in h3{font-size:3em; font-weight:500; color:#000; line-height:1.5em; margin-bottom:40px; text-align:center; display: none;}
#area_product .list{}
#area_product .list li{float:left; padding:0; width:calc(25% - 90px); margin-right:120px; text-align:center; border-radius:20px; background:#fff; box-shadow: 0px 5px 28.5px 1.5px rgba(0, 0, 0, 0.05);transition:all 0.3s ease; }
#area_product .list li:last-child{margin:0;}
#area_product .list li a{display: block; padding:0 10px;  border-radius:20px; background: #fff;}
#area_product .list li span{display:block; padding:20px 0; font-size:1.5em; font-weight:500;}
#area_product .list li .area_more{position:absolute; left:50%; bottom:-45px; z-index:5; padding:4px 15px !important;font-size:0.8em; font-weight:500; letter-spacing:1px; opacity:0; color:#fff; box-sizing:border-box; border-radius:6px; background:#0082d7;transform:translateX(-50%); transition:all 0.3s ease;}
#area_product .list li:hover{padding:4px; background:linear-gradient(90deg, #0082d7, #ff0014); transform:translateY(-100px); box-sizing: border-box;}
#area_product .list li:hover a{background:#fff;}
#area_product .list li:hover .area_more{opacity:1;}

#area_product .list li img{
    width: 85%;
}
@media (max-width: 1200px) {
#area_product{padding:40px 0; position: relative; top: unset; left: unset; transform: none;}
#area_product .in{width:100%;}
#area_product .in h3{font-size:1.6em;margin-bottom:20px; display: block;}
#area_product .list{}
#area_product .list li{width:calc(50% - 16px); margin:8px;padding:8px; }
#area_product .list li:last-child{margin:8px;}
#area_product .list li a{padding:12px;}
#area_product .icon_wrap img{width:100%;}
#area_product .list li span{padding:10px 0; font-size:1.1em;}
#area_product .list li .area_more{position:absolute; left:50%; bottom:-10px; z-index:5; padding:4px 15px !important;font-size:0.9em; font-weight:500; letter-spacing:1px; opacity:0; color:#fff; box-sizing:border-box; border-radius:6px; background:#39C; transform:translateX(-50%); transition:all 0.3s ease;}
#area_product .list li:hover{padding:2px; background:linear-gradient(90deg, #2f99a6, #0062a7); transform:translateY(0);}
#area_product .list li:hover a{background:#fff;}
#area_product .list li:hover .area_more{opacity:1;}
}


/*2배너*/
.section01 {padding:60px 0 60px 0; }
.section01 ul {overflow:hidden; width:1500px; margin:0 auto;}
.section01 ul li.box {width:50%; float:left; color:#fff; position:relative;}
.section01 ul li.box dl {color:#fff; position:absolute; padding:85px 65px;}
.section01 ul li.box dl dt {font-size:2.3em; font-weight:500; margin:0 0 20px 0; letter-spacing:0.5px;}
.section01 ul li.box dl dt span{display:block; font-size:0.7em; font-weight:400; color:cornsilk;}
.section01 ul li.box dl dd {margin: 0 0 50px 0; font-size:1.15em; line-height:1.5em; font-weight:300; }
.section01 ul li.box dl dd.btn {display:inline-block; border:1px solid #fff;  transition:0.5s; margin:0; padding:12px 32px; letter-spacing:2px; font-size:0.95em; font-weight:600;}
.section01 ul li.box01, .section01 ul li.box02 {transition:0.5s;}
.section01 ul li.box01 dl {bottom:0;}
.section01 ul li.box01 img {width:100%;}
.section01 ul li.box02 img {width:100%;}
.section01 ul li.box01:hover dd.btn {background:#fff; color:#222; transition:0.5s;}
.section01 ul li.box02:hover dd.btn {background:#fff; color:#222; transition:0.5s;}
.section01 ul:hover li.box01 {margin-top:-45px; transition:0.5s;}
.section01 ul:hover li.box02 {margin-top:35px; transition:0.5s;}
@media (max-width: 1400px) {
.section01 {padding:40px 20px 40px 20px; }
.section01 ul {width:100%;}
.section01 ul:hover li.box01 {margin-top:-35px; transition:0.5s;}
.section01 ul:hover li.box02 {margin-top:35px; transition:0.5s;}
.section01 ul li.box dl {padding:77px 65px;}
.section01 ul li.box dl dt {font-size:2em; }
.section01 ul li.box dl dt span{display:none;}
.section01 ul li.box dl dd {margin: 0 0 30px 0; font-size:1em; }
.section01 ul li.box dl dd.btn {padding:10px 18px; font-size:0.7em;}
}

@media (max-width: 1000px) {
.section01 ul li.box dl {padding:40px 30px;}
}

@media (max-width: 900px) {
.section01 {padding:0; }
.section01 ul li.box {width:100%;}
.section01 ul li.box dl {padding:20px; width:100%;}
.section01 ul li.box01 dl {bottom:10px;}
.section01 ul:hover li.box01 {margin-top:0; transition:0.5s;}
.section01 ul:hover li.box02 {margin-top:0; transition:0.5s;}
.section01 ul li.box dl dt {font-size:1.3em; }
.section01 ul li.box dl dd {margin: 0 0 20px 0; font-size:0.9em; }
.section01 ul li.box dl dd.btn {padding:8px 15px; font-size:0.65em;}
}


/* 제작사례추출 */
#bbs_area{width:100%; padding:80px 0; border-top:1px solid #EEE;}
#bbs_area .in{width:1300px; margin:0 auto; }
#bbs_area .in h2{font-size:3em; font-weight:500; color:#000; line-height:1.5em; margin-bottom:40px; text-align:center;}
@media (max-width: 1200px) {
#bbs_area{ padding:40px 0; border-top:none;}
#bbs_area .in{width:100%;}
#bbs_area .in h2{font-size:1.6em; margin-bottom:0;}
}



/*하단 회사소개 배너*/
#business {width:100%; background:#000 url(../img/main/back01.jpg) no-repeat center;  color:#fff; text-align:center; background-attachment: fixed; padding:100px 0 0;}
#business h2.title{font-size:2.8em; color:#fff; text-align:center;  font-weight:300;}
#business h2.title strong{font-weight:600; margin-left:8px;}
#business h2.title span{ display:block; margin:30px 0; font-size:0.55em; line-height:1.5em; font-weight:300; color:rgba(255,255,255,0.7);}
#business .sec03_ul{overflow:hidden; text-align:center;}
#business .sec03_ul li{display:inline-block; margin:20px; text-align:center;}
#business .sec03_ul li .ic{border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); width:120px; height:120px; font-size:4em; padding-top:35px; border-radius:50%;}
#business .sec03_ul li .svg-inline--fa{font-size:0.8em;}
#business .sec03_ul li span{display:block; margin-top:15px; font-size:1.18em;}
#business .sec03_link{overflow:hidden; text-align:center; margin-top:70px; position: relative; bottom: 0;}
#business .sec03_link a{display:inline-block;transition: all 0.3s;vertical-align:top; width:20%; padding:1em 1.8em;font-size:1.3em; font-weight:400;color:#FFF;margin-bottom:40px; text-align: center;}
#business .sec03_link a:nth-child(1){
    background: #0082d7;
}
#business .sec03_link a:hover{color:#FFF; transition: all 0.3s;}
@media (max-width: 1200px) {
#business {padding:35px 0;}
#business h2.title{font-size:1.3em;}
#business h2.title span{margin:15px; font-size:0.5em;}
#business .sec03_ul li{margin:15px;}
#business .sec03_ul li .ic{width:80px; height:80px; font-size:2em; padding-top:25px;}
#business .sec03_ul li span{margin-top:10px; font-size:0.85em;}
#business .sec03_link{margin-top:15px;}
#business .sec03_link a{max-width: inherit; padding:5px 15px; font-size:0.9em;  width:50%;}
}