@charset "utf-8";



#full_navi {z-index:99; position:fixed; left:80px; top:0%; height:100%; display:none;}
#full_navi .line {width:1px; height:100%; background:rgba(255,255,255,0.3);  position:absolute; left:10px; top:0px;  z-index:0;}
#full_navi ul { position:relative;  z-index:1; padding-top:350px; width:120px; }
#full_navi ul li {position:relative; padding:0px 0px; height:25px; line-height:16px; margin:25px 0px; overflow:hidden; transition: all 0.3s;}
#full_navi ul li .dot {position:absolute; left:7px; top:3px;width:7px; height:7px; border-radius:7px; background:rgba(255,255,255,0.6);   vertical-align:middle; transition: all 0.3s;}
#full_navi ul li .text {display:inline-block; margin-left:25px;; vertical-align:middle;font-size:15px; position:relative; transition: all 0.3s; color:#fff; opacity:0.8}
#full_navi ul li.active  {margin:12px 0px;}
#full_navi ul li.active .dot {width:12px; height:12px; border-radius:12px;  left:5px; background:#fff;}
#full_navi ul li.active .text{color:#fff; opacity:1;  font-weight:bold;}
/*#full_navi ul li:hover .dot{width:12px; height:12px; border-radius:12px;  left:5px; background:#fff;}
#full_navi ul li:hover .text{color:#fff;  opacity:1}*/


#full_navi.on ul li a{color:#999;}
#full_navi.on ul li.active a{color:#fff;}
#full_navi.on .line {background:rgba(0,0,0,0.1);}

#full_navi.on ul li .dot { background:rgba(0,0,0,0.3); }
#full_navi.on ul li.active .dot { background:#000; }
#full_navi.on ul li .text{color:#a4a4a4; }
#full_navi.on ul li.active .text{color:#000;}






#section01 {}
#section02 {}
#section03 { background:url(../images/main/section03_new_new.jpg) center top no-repeat; background-size:cover; }






.main_visiaul_wrap {position:relative;   height: 100vh; overflow:hidden; z-index:0 !important;}
.main_visiaul_wrap #main_videos {position:relative; z-index:0;}
.main_visiaul_wrap .bg {width:100%; height:100%; position:absolute; left:0px; top:0px; background:rgba(0,0,0,0.4);z-index:999; }


.main_visiaul_wrap .main_visual_text {position:absolute; width:100%; height: 100vh; top:0px;  color:#fff; z-index:9999;    }
.main_visiaul_wrap .main_visual_text .text {position:relative; z-index:1;  padding-top:350px; color:#fff; text-align:center; }
.main_visiaul_wrap .main_visual_text .t1 {font-size:80px;  letter-spacing:-2px; line-height:80px; color:#fff;  font-family: 'ChosunNm';}
.main_visiaul_wrap .main_visual_text .t2 {font-size:30px;  letter-spacing:-1px; line-height:30px; margin-top:20px;  font-family: 'ChosunNm';}
.main_visiaul_wrap .main_visual_text ul {margin-top:40px;}
.main_visiaul_wrap .main_visual_text ul li {font-size:18px; margin:5px; color:#fff;}



.main_business {margin:0 10%;}
.main_business .title{margin-top:15%; font-size:40px; font-weight:bold; color:#000; position:relative;  text-align:center;}
.main_business .title .info {margin-top:10px; font-weight:normal; font-size:17px; color:#888;display:block; vertical-align:middle;}
.main_business #main_business_pager {margin-top:30px; text-align:center; }
.main_business #main_business_pager a{display:inline-block; font-size:15px; color:#000; font-weight:normal; margin-left:-1px;  border:1px #ddd solid;  padding:0 40px; line-height:50px;}
.main_business #main_business_pager a.cycle-pager-active{background:#483d33; border-color:#483d33; color:#fff;}


.main_business .list_wrap{margin-top:80px;}

.main_business ul li {width:100% !important;}
.main_business ul li .col_box{display:block; width:100%; table-layout:fixed;}
.main_business ul li .col_box .col {display:table-cell; vertical-align:middle; }
.main_business ul li .col_box .col.text {padding-left:120px; position:relative;}
.main_business ul li .col_box .col.photo {width:50%;}
.main_business ul li .col_box .col.photo img{vertical-align:middle; max-width:100%; border-radius:20px;}
.main_business ul li .col_box .col.text .text_box{background:#fff; }
.main_business ul li .col_box .col.text dl{background:#fff; }
.main_business ul li .col_box .col.text dl dt{font-size:30px; color:#000; font-weight:bold;}
.main_business ul li .col_box .col.text dl dd{font-size:17px; margin-top:20px; color:#000;}
.main_business ul li .col_box .col.text dl dd .box {margin-top:20px;}
.main_business ul li .col_box .col.text dl dd .box a{display:inline-block; margin-right:10px; font-size:14px; color:#999}
.main_business ul li .col_box .col.text .more {margin-top:50px;}
.main_business ul li .col_box .col.text .more a{display:inline-block; line-height:50px; border:1px #666 solid; padding:0 20px;}




.main_member {}
.main_member .title {padding-top:11%; font-size:40px; font-weight:bold; color:#fff; line-height:60px; margin:0 10%; position:relative;}
.main_member .title span {display:block; font-size:18px; font-weight:normal; margin-top:0px; line-height:30px; color:rgba(255,255,255,0.6)}

.main_member ul {text-align:center; margin-top:50px; margin-left:10%;}
.main_member ul li{display:inline-block; width:330px; margin-right:30px; position:relative; overflow:hidden; vertical-align:top;}
.main_member ul li .ov_bg{background:#483d33; opacity:0.6; position:absolute; left:0px; bottom:0px; width:100%; height:0;  transition:all 1s; border-radius:20px;}
.main_member ul li:hover .ov_bg{ z-index:2;  height:100%;; transition:all 0.3s; }
.main_member ul li.last{margin-right:0px;}
.main_member ul li .icon {background-position:center top; background-repeat:no-repeat; background-size:cover; height:400px;  border-radius:20px; position:relative;}
.main_member ul li .icon img{vertical-align:middle;}

.main_member ul li .type {position:absolute; width:100%; text-align:center; left:0px; bottom:20px; display:none;}
.main_member ul li .type span{display:inline-block; background:#483d33; color:#fff; padding:0 10px;}

.main_member ul li .box {padding:30px; position:relative; z-index:1;  min-height:100px; text-align:center;}
.main_member ul li .box .t1{color:#fff; font-size:33px; font-weight:bold; line-height:22px}
.main_member ul li .box .t1 span{ font-weight:normal; font-size:16px; color:#fff; ;margin-top:7px;}

.main_member ul li .btn {text-align:center; color:#e60012;display:none; }

.main_member .main_member_btn {position:absolute; right:0%; top:240px;}
.main_member .main_member_btn#mobile_member_btn {display:none;}
.main_member .main_member_btn a{float:left; width:50px; height:50px; margin-left:10px; background:url(../images/main/main_member_arrow.png) left top no-repeat;opacity:1}
.main_member .main_member_btn a:hover{opacity:1}
.main_member .main_member_btn a.main_member_next{background-position:right top; float:right;}





/*사례*/

#section04 { background:#e3e4e3 }


.main_recognize {margin:0% 10%; padding-top:11%; overflow:hidden;}
.main_recognize .lay_col {overflow:hidden;}
.main_recognize .lay_col .col_list {float:left; width:46%;}
.main_recognize .lay_col .col_list.right {float:right;}
.main_recognize .title { font-size:30px; font-weight:bold; color:#483d33; line-height:30px;  position:relative;}
.main_recognize .title .text {display:block; font-size:16px; font-weight:normal; margin-top:0px; line-height:25px; color:rgba(0,0,0,0.6)}
.main_recognize .title a.more {position:absolute; right:0px; top:0px; width:49px; height:49px; border-radius:49px; background:#483d33; text-align:center; line-height:49px;}

.main_recognize .title a.more span:before, 
.main_recognize .title a.more span:after {position: absolute;top:15px; left:23px;content:' ';height:15px;width:1px;background-color: #fff;}
.main_recognize .title a.more span:before {transform: rotate(0deg);}
.main_recognize .title a.more span:after {transform: rotate(-90deg);}



.main_recognize  .lay_col ul {text-align:left; margin-top:20px;border-top:1px #ccc solid; }
.main_recognize  .lay_col ul li{border-bottom:1px #ccc solid; position:relative; overflow:hidden; vertical-align:top; padding:30px 0px;}
.main_recognize  .lay_col ul li .t1 {font-size:22px; color:#000; }
.main_recognize  .lay_col ul li .col_box {margin-top:10px; font-size:15px; color:#000;}
.main_recognize  .lay_col ul li .col_box .col{display:inline-block; margin-right:20px; }
.main_recognize  .lay_col ul li .col_box .col span{color:#777}
.main_recognize  .lay_col ul li .col_box .col strong{display:inline-block;margin-left:3px;}



.main_tube { padding-top:40px; }
.main_tube .info .title { position:relative;}
.main_tube .info .title .t1{font-size:30px; color:#000; font-weight:bold;  display:inline-block;     }
.main_tube .info .title .t2{font-size:16px; color:#333; line-height:18px; display:inline-block;  margin-left:30px; }
.main_tube .info .title .t3{position:absolute; right:0px; top:0px; }
.main_tube .info .title .t3 a{display:inline-block;padding:0 35px; line-height:50px;font-size:15px; color:#000;  border:1px #000 solid; background:#fff; }
.main_tube .info .title .t3 a:hover  {background:#000; border-color:#000; color:#fff; transition:all 1.2s;}



.main_tube ul {overflow:hidden; margin-top:50px;  z-index:1;}
.main_tube ul li {width:360px; margin-right:33px; text-align:center;  overflow:hidden;border-radius:20px;}
.main_tube ul li .box {position:relative;}
.main_tube ul li .pic {overflow:hidden;  background-position:center -50px; background-repeat:no-repeat; background-size:100%; padding-top:200px; width:100%; transition: all 0.4s;}
.main_tube ul li:hover .pic {transform: scale(1.2);}

.main_tube ul li .text {position:absolute; left:0px; bottom:0px; width:100%; padding:15px 0px; font-size:16px;  background: linear-gradient(
            to bottom,
            rgba(20, 20, 20, 0) 10%,
            rgba(20, 20, 20, 0.25) 25%,
            rgba(20, 20, 20, 0.5) 50%,
            rgba(20, 20, 20, 0.75) 75%,
            rgba(20, 20, 20, 1) 100%
          ); color:#fff;}

.main_tube .main_blog_btns {display:inline-block; margin-right:5px;}
.main_tube .main_blog_btns a{display:inline-block; margin:0px 1px;width:33px; height:33px; border-radius:33px;  line-height:33px; text-align:center; border:1px #00cb49 solid;  text-align:center; color:#04a83f; }

.main_tube .main_blog_btns a span{display:inline-block; vertical-align:middle; }
.main_tube .main_blog_btns a:hover {background:#00cb49; color:#fff;}









.section_last {height: auto !important; background:#000; }
.section_last .fp-tableCell {height:auto !important;}



.section_last .fp-tableCell	 #footerGroup {position:relative; background:#222; /* padding-bottom:30px;  padding-top:30px; */}

.section_last .fp-tableCell	 #footerGroup .f_util {overflow:hidden; position:relative; border-bottom:1px rgba(0,0,0,,0.1) solid;}
.section_last .fp-tableCell	 #footerGroup .f_util ul{overflow:hidden; text-align:center;}
.section_last .fp-tableCell	 #footerGroup .f_util li{display:inline-block; font-weight:normal;  font-size:15px; }
.section_last .fp-tableCell	 #footerGroup .f_util li a{margin-right:13px;  padding-right:13px; line-height:50px; display:block;color:#fff;  background:url(../images/common/f_util_dot.png) right 50% no-repeat;}
.section_last .fp-tableCell	 #footerGroup .f_util li.last a{background:none;}


.section_last .fp-tableCell	 #footerGroup .footer {/*margin-top:5px; padding-top:15px;*/ margin-top:0px; padding-top:0px; text-align:center; font-size:13px; position:relative;   color:rgba(255,255,255,0.8); }
.section_last .fp-tableCell	 #footerGroup .footer span{display:inline-block; padding-right:8px;}







@media all and (max-width:1024px) {










#header h1#logo a.mobile_ver {display:none;}

#header.on_scroll h1#logo a.pc_ver {display:inline-block;}
#header.on_scroll h1#logo a.mobile_ver {display:none;}




#header.on_scroll_etc {background:none;}
#header.on_scroll_etc h1#logo a.pc_ver {display:inline-block;}
#header.on_scroll_etc h1#logo a.mobile_ver {display:none;}

#full_navi {display:none;}



.section {height: auto !important;}
.section .fp-tableCell {height:auto !important;}






/*메인비주얼*/



.main_visiaul_wrap .main_visual_text .text { padding-top:250px;  }
.main_visiaul_wrap .main_visual_text .t1 {font-size:40px;  letter-spacing:-2px; line-height:40px; ;}
.main_visiaul_wrap .main_visual_text .t2 {font-size:20px;  letter-spacing:-1px; line-height:30px; margin-top:0px; }





.main_common_box {height:500px !important;}




.main_business {margin:0 20px; padding-bottom:60px;}
.main_business .title{margin-top:60px; font-size:30px; }
.main_business .title .info {margin-top:10px;  font-size:15px; }
.main_business #main_business_pager {margin-top:20px; text-align:center; }
.main_business #main_business_pager a{font-size:14px;padding:0 20px; line-height:40px;}



.main_business .list_wrap{margin-top:30px;}

.main_business ul li {width:100% !important;}
.main_business ul li .col_box{display:block; }
.main_business ul li .col_box .col {display:block;  }
.main_business ul li .col_box .col.text {padding-left:0px; position:relative; margin-top:20px;}
.main_business ul li .col_box .col.photo {width:auto;}
.main_business ul li .col_box .col.photo img{width:100%; border-radius:10px;}




.main_member {padding-bottom:60px;}
.main_member .title {padding-top:60px; font-size:30px;  line-height:30px; margin:0 20px; }
.main_member .title span {font-size:15px;  line-height:20px;}

.main_member ul { margin-top:50px; margin-left:20px;}
.main_member ul li{ width:220px; margin-right:10px;}
.main_member ul li .ov_bg{ border-radius:10px;}
.main_member ul li.last{margin-right:0px;}
.main_member ul li .icon {height:240px;  border-radius:10px; position:relative;}



.main_member ul li .box {padding:10px; position:relative; z-index:1;  min-height:auto;}
.main_member ul li .box .t1{ font-size:20px; line-height:22px}
.main_member ul li .box .t1 span{ font-weight:normal; font-size:14px; margin:0px 0px 0px 4px}



.main_member .main_member_btn {position:relative; right:0%; top:auto; display:none;}
.main_member .main_member_btn#mobile_member_btn {display:block; text-align:center; margin-top:30px;}
.main_member .main_member_btn a{float:none; display:inline-block; margin:0px 10px;}

.main_member .main_member_btn a.main_member_next{float:none;}





/*사례*/

#section04 { background:none }


.main_recognize {margin:0%; overflow:hidden; padding-top:0px;}
.main_recognize .lay_col {overflow:hidden;margin-bottom:10px;}
.main_recognize .lay_col .col_list {float:none !important; width:auto;  padding:0% 20px 60PX;  background:#e3e4e3; padding-top:60px;}

.main_recognize .lay_col .col_list.right {margin-top:0px; background:#fff; }


.main_recognize .title {font-size:25px;  line-height:30px; }
.main_recognize .title .text {display:block; font-size:16px;}
.main_recognize .title a.more {position:absolute; right:0px; top:0px; width:39px; height:39px; border-radius:39px; line-height:39px;}



.main_recognize  .lay_col ul li{border-bottom:1px #ccc solid; position:relative; overflow:hidden; vertical-align:top; padding:20px 0px;}
.main_recognize  .lay_col ul li .t1 {font-size:18px; color:#000; }
.main_recognize  .lay_col ul li .col_box {margin-top:5px; font-size:14px; color:#000;}
.main_recognize  .lay_col ul li .col_box .col{display:inline-block; margin-right:20px; }
.main_recognize  .lay_col ul li .col_box .col span{color:#777}
.main_recognize  .lay_col ul li .col_box .col strong{display:inline-block;margin-left:3px;}



.main_tube { padding-top:0px; padding:0 20px 60px; }
.main_tube .info .title { position:relative;}
.main_tube .info .title .t1{font-size:20px;  }
.main_tube .info .title .t2{font-size:14px; }




.main_tube ul {overflow:hidden; margin-top:0px;  z-index:1;}
.main_tube ul li {width:200px; margin-right:10px; border-radius:10px;}
.main_tube ul li .box {position:relative;}
.main_tube ul li .pic {overflow:hidden;  background-position:center -20px; padding-top:110px;}
.main_tube ul li:hover .pic {transform: scale(1.2);}

.main_tube ul li .text {padding:15px 10px; font-size:12px;  }



}



@media all and (min-width:1025px) and (max-width:1440px) {

.main_business ul li .col_box .col.photo {vertical-align:top;}

.main_business {margin:0 20px;}
.main_business ul li .col_box .col.text {padding-left:60px;}


.main_member .title {margin:0 20px; font-size:30px; padding-top:18%;}
.main_member ul {margin-left:20px; margin-top:20px;}

.main_member .main_member_btn {top:200px;}

.main_recognize {margin:0 20px; padding-top:16%;}

.main_recognize .lay_col ul li .col_box .col {    overflow: hidden;    white-space: nowrap; display:block;    text-overflow: ellipsis;}

}




