/* 메인 */
.visual-wrap{background-color:#000;margin-top:100px;}
.inner{max-width:1200px;margin:0 auto;padding:0 100px;position:relative;}
.visual-wrap .inner{background:url('../img/tmain-visual.png') no-repeat center 80px;height:920px;}
.visual-wrap .visual-txt{width:620px;margin-right:auto;margin-left:auto;padding-top:555px;}
.visual-wrap .visual-txt h2{font-size:48px;line-height:60px;font-weight:700;color:#fff;margin-bottom:25px;text-align:center;}
.visual-wrap .visual-txt p{font-size:24px;line-height:36px;font-weight:350;color:#fff;text-align:center;word-break:keep-all;}
.visual-wrap .visual-txt p strong{font-weight:350;color:#ff4040;}
.visual-wrap .visual-txt p em{font-weight:350;color:#ffcf40;font-style:normal;}

 
 




.introduce{padding-bottom:140px;border-bottom:1px solid #ccc;}
span.sub-tit{display:block;font-size:18px;line-height:1.8em;font-weight:350;color:#333;padding:100px 0 10px;}
.left-title{width:260px;text-align:left;}
.right-title{width:210px;text-align:right;float:right;}
h2{font-size:60px;line-height:72px;font-weight:700;color:#333;letter-spacing:-0.07em;}
h2 a{color:#333;}
h2 a:hover, h2 a:active{color:#4093ff;}

span.image{display:block;position:absolute;background-repeat:no-repeat;}
.introduce .image{width:742px;height:800px;background-image:url('../img/img-introduce.png');left:calc(50% - 371px);top:50px;}
.introduce .image i{font-style:normal;font-size:12px;line-height:30px;font-weight:350;color:#333;letter-spacing:0;text-align:right;position:absolute;right:0;top:85px;transform:skew(-24deg, 24deg);}

#intro-system{padding-bottom:140px;}
#intro-system .sub-tit, #intro-system h2{text-align:center;}

.wrap-system{margin-top:80px;}
.left-system{float:left;width:420px;height:280px;margin-right:80px;background-color:#333;text-align:center;position:relative;}
.right-system{float:left;width:500px;}
.wrap-system .image{width:313px;height:240px;background-image:url('../img/img-system.jpg');left:calc(50% - 156px);top:calc(50% - 120px);}
#intro-system h3{font-size:24px;line-height:32px;font-weight:700;color:#333;margin-top:20px;margin-bottom:15px;}
#intro-system p{font-size:18px;line-height:32px;font-weight:350;color:#808080;margin-bottom:30px;word-break:keep-all;}
a.more{display:inline-block;font-size:18px;line-height:32px;font-weight:350;color:#4093ff;position:relative;}
a.more::after{content:'';width:5px;height:10px;background:url('../img/img-more.png') no-repeat;position:absolute;right:-15px;top:11px;}
.list-mode{margin-top:80px;}
.list-mode li{float:left;width:50%;text-align:center;position:relative;}
.list-mode li:first-child{padding-right:65px;}
.list-mode li:last-child{padding-left:65px;}
.list-mode li:first-child::after{content:'';width:1px;height:340px;background-color:#ccc;position:absolute;right:0;top:0;}
.list-mode li span{display:block;width:160px;height:160px;border-radius:20px;background-color:#4093ff;background-repeat:no-repeat;background-position:center;margin:20px auto 50px;}
.list-mode li:first-child span{background-color:#ff4040;background-image:url('../img/ico-mode01.png');}
.list-mode li:last-child span{background-image:url('../img/ico-mode02.png');}

#intro-design{background-color:#000;height:680px;}
.design-wrap{width:450px;}
.design-wrap span, .design-wrap h2{color:#fff;}
.design-wrap h2{margin-bottom:25px;}
.design-wrap p{font-size:18px;line-height:32px;font-weight:350;color:#fff;margin-bottom:30px;word-break:keep-all;}
#intro-design .image{width:360px;height:562px;background-image:url('../img/img-design.png');right:100px;top:60px;}
.view-point{position:absolute;left:600px;top:275px;height:395px;}
.view-point::before{content:'';width:1px;height:100%;background-color:#fff;position:absolute;left:7px;top:10px;}
.view-point li{font-size:12px;line-height:20px;font-weight:350;color:#fff;padding-left:25px;position:relative;}
.view-point li::before{content:'';background:url('../img/circle-point.png');width:15px;height:15px;position:absolute;left:0;top:3px;}
.view-point li::after{content:'';height:1px;background-color:#fff;position:absolute;left:95px;top:10px;}
.view-point li:first-child{margin-bottom:150px;}
.view-point li:nth-child(2){margin-bottom:60px;}
.view-point li:first-child::after{left:98px;width:100px;}
.view-point li:nth-child(2)::after{width:140px;}
.view-point li:nth-child(3)::after{width:200px;}

#intro-module{padding-bottom:140px;}
#intro-module span.image{position:relative;float:left;width:580px;}
#intro-module span.image.module01{background-image:url('../img/img-module01.png');height:490px;top:150px;}
#intro-module span.image.module02{background-image:url('../img/img-module02.png');background-position:right top;width:560px;height:325px;top:190px;}
.wrap-module{float:left;width:420px;}
.wrap-module.module02{width:440px;}
.wrap-module h3{font-size:24px;line-height:32px;font-weight:700;color:#333;margin-top:20px;margin-bottom:15px;}
.wrap-module p{font-size:18px;line-height:32px;font-weight:350;color:#808080;margin-bottom:30px;word-break:keep-all;}

#intro-use{background:url('../img/bg-use.jpg') no-repeat center;background-size:cover;height:500px;}
.left-use{float:left;width:420px;margin-right:80px;}
.right-use{float:left;width:500px;padding-top:120px;}
#intro-use span.sub-tit{color:#fff;}
#intro-use h2{color:#fff;margin-bottom:30px;}
#intro-use h3{font-size:24px;line-height:32px;font-weight:700;color:#fff;margin-top:20px;margin-bottom:15px;}
#intro-use p{font-size:18px;line-height:32px;font-weight:350;color:#fff;margin-bottom:30px;word-break:keep-all;}

.intro-service{text-align:center;padding-bottom:150px;}
.list-as{margin-top:75px;}
.list-as li{float:left;width:50%;height:160px;border:1px solid #ccc;text-align:center;}
.list-as li:first-child{border-right:none;position:relative;}
.list-as li:first-child::after{width:1px;height:calc(100% + 2px);background-color:#4093ff;position:absolute;right:-1px;top:-1px;}
.list-as li:first-child:hover::after{content:'';}
.list-as li:hover{border-color:#4093ff;}
.list-as li a{display:block;padding:30px 10px;}
.list-as li h3{font-size:24px;font-weight:700;color:#333;position:relative;margin-bottom:30px;}
.list-as li h3::after{content:'';width:40px;height:1px;background-color:#ccc;position:absolute;left:calc(50% - 20px);bottom:-10px;}
.list-as li p{font-size:18px;font-weight:350;color:#808080;}
.list-as li:hover h3, .list-as li:hover p{color:#4093ff;}
.list-as li:hover h3::after{background-color:#4093ff;}

.pc-block{display:block;}
.tab-block{display:none;}
.mobile-block{display:none;}


/*서브 비주얼*/
.sub_visual{position:relative;max-width:2560px;margin:0 auto;height:280px;background-repeat:no-repeat;background-position:center top; text-align:center}
.sub_visual.visual01 .bg{background-image:url(../img/sub_visual01.jpg)}
.sub_visual.visual02 .bg{background-image:url(../img/sub_visual02.jpg)}
.sub_visual.visual03 .bg{background-image:url(../img/sub_visual03.jpg)}
.sub_visual.visual04 .bg{background-image:url(../img/sub_visual04.jpg)}
.sub_visual.visual05 .bg{background-image:url(../img/sub_visual05.jpg)}
.sub_visual.visual06 .bg{background-image:url(../img/sub_visual06.jpg)}
.sub_visual.visual07 .bg{background-image:url(../img/sub_visual07.jpg)}
.sub_visual.visual08 .bg{background-image:url(../img/sub_visual08.jpg)}
.sub_visual.visual09 .bg{background-image:url(../img/sub_visual09.jpg)}
.sub_visual h3{position:relative;z-index:2;font-size:40px;font-weight:600; letter-spacing:-0.8px; color:#FFF;text-align:center; line-height:90px}
.sub_visual .sub_title{font-size:1.000em;text-align:center;filter:alpha(opacity=60);position:relative;font-weight:500; color:#FFF;z-index:2;opacity:.8; letter-spacing:10px; padding-top:18px}
.sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual_cover.png) center bottom no-repeat; opacity:.8;z-index:1}
.sub_visual .bg{ width:100%; height:280px; position:absolute;  top:0; background-position:center top;background-repeat:no-repeat;/*-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;*/z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}

/*서브 상단메뉴*/
.sub_navi { overflow: hidden; clear: both; position: relative;  display:inline-block; bottom:-247px; z-index:2}
.sub_navi li{margin: 0px -1px 0px 0px; float: left; box-sizing: border-box; color:#fff; width:140px;}
.sub_navi li a{background-color:#000; text-align: center; color:#fff; padding:0 10px; line-height: 60px; font-size: 16px; display: block;}
.sub_navi li a:hover{background:#039; color:#fff; }
.sub_navi li a.on{background:#333; color:#fff; font-weight:bold;}
.sub_navi li a:last-child {margin:0 1px 0 0;}


/*서브 기본 상단*/
.content { width:100%; margin:auto;}
.content h3 {margin:65px 0 33px 0; text-align:center; font-size:30px; color:#000; font-weight:800;}
.content .subTxt1 { margin-top:27px;  text-align:center; font-size:14px; line-height:30px; color:#999; letter-spacing:1px}
.content .subTxt1:before { content:""; display:block; height:1px; width:30px; margin:0 auto 15px; background-color:#000;}
.content .txtCon { max-width:1200px;  margin:50px auto 50px auto; padding:10px; font-size:16px; line-height:1.6; color:#615e5d; letter-spacing:-0.5px}
.content .txtCon:after {content: " "; visibility: hidden; display: block; height: 0; clear: both; padding-bottom:50px}
.content .board {max-width:1200px; margin:50px auto 50px auto; font-size:15px}


/*게시판 헤더관리*/
#head-edit-form {display:none;border:2px solid tomato;padding:2em;background-color:#fff;border-radius:6px;}
#head-edit-form h3 { font-size:20px; margin-bottom:20px}
#head-edit-form .line {margin:5px 0; padding-bottom:7px}
#head-edit-form .line label {font-size:14px; color:#930; width:150px; display:inline-block; vertical-align:middle;}
#head-edit-form .line textarea {width:400px;height:100px;line-height:20px;border:1px solid #ccc;}
#head-edit-form .line input[type=text] {border:1px solid #ccc;line-height:20px;height:40px;}
#head-edit-form .line #bo_head_bg_class { width: 150px; height:40px }
#head-edit-form .line #bo_head_sub_title { width: 350px; }
#head-edit-form .btn_submit{width:160px; background: #000; text-decoration: none; display:inline-block; border:0; color: #fff; vertical-align: middle;  padding:15px 0 15px 0; line-height:1.1; cursor:pointer; box-sizing:border-box;}
#btn-mng-head {position:absolute;z-index:100; bottom:2px;right:2px;background-color:tomato; color:#fff; font-size:14px; border:0; height:24px; line-height:24px; padding:0 0.5em; border-radius:12px;}

/*내용관리 헤더관리*/
#head-edit-form .line #co_head_bg_class { width: 150px; height:40px }
#head-edit-form .line #co_head_sub_title { width: 350px; }
#head-edit-form .tc {text-align:center; margin-top:1em;}




/*푸터*/
.footer .nav_warp{width:100%;background-color:#f5f5f5 }
.footer .nav_warp .content{max-width:1200px;margin:0 auto;padding:35px 0;position:relative;}
.footer .content h5{position:absolute;right:0;top:85px;background:url('../img/b-logo.png') no-repeat center;width:210px;height:50px;font-size:0;color:transparent;}
.footer .content address{font-size:12px;line-height:24px;color:#333;font-weight:350;font-style:normal;letter-spacing:0;margin-bottom:20px;}
.footer .content p{font-size:12px;line-height:24px;color:#333;font-weight:350;letter-spacing:0;}
.footer .content p.copyright{font-weight:700;}
.footer .content .list-foot span{font-size:12px;line-height:24px;color:#333;font-weight:350;letter-spacing:0;position:relative;margin-right:10px;letter-spacing:-0.05em;}
.footer .content .list-foot span:last-child{margin-right:0;}
.footer .content .list-foot span::after{content:'';width:1px;height:14px;background-color:#333;position:absolute;right:-7px;top:3px;}
.footer .content .list-foot span:last-child::after{display:none;}

/* 푸터팝업*/
.tl_pop_con{background:#fff;} 
.tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;background:#076aa3;font-size:20px;color:#fff;}
.tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;}
.tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;}
.f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;}
.f_pop_wrap strong {color:#00a19a;font-weight:normal;}
.f_pop_wrap p { color:#333; padding:40px 50px; line-height:1.6;}
.mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/btn_close.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; }
.mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; }
button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }


/*회원가입*/
#fregister { max-width:1200px; margin:0 auto; padding:20px 0}
#fregisterform { max-width:1200px; margin:0 auto; padding:20px 0}

.content.bbsContent{padding:140px 0;}

/* 메인 반응형 태블릿 */
@media screen and (max-width:1280px){
  .pc-block{display:none;}
  .tab-block{display:block;}
  h2{font-size:48px;line-height:60px;}
  .inner{max-width:700px;padding:0;}
  .introduce .image{width:700px;height:754px;background-image:url('../img/timg-introduce.png');left:calc(50% - 350px);top:170px;z-index:0;}
  .introduce .image i{top:75px;}
  .left-title{width:210px;}
  .right-title{margin-top:185px;position:relative;z-index:1;}
  .left-system{width:270px;height:270px;margin-top:30px;}
  .wrap-system .image{width:260px;height:199px;background-image:url('../img/timg-system.jpg');left:calc(50% - 130px);top:calc(50% - 100px);}
  .right-system{width:350px;}
  #intro-system h3{margin-top:0;}
  .list-mode li span{width:120px;height:120px;}
  .list-mode li:first-child{padding-right:80px;}
  .list-mode li:last-child{padding-left:80px;}
  .list-mode li:first-child span{background-size:53px auto;}
  .list-mode li:last-child span{background-size:75px auto;}
  .list-mode li:first-child::after{height:400px;}
  #intro-design{height:800px;}
  #intro-design .image{background-image:url('../img/timg-design.png');width:270px;height:420px;right:0;top:100px;}
  .design-wrap{width:290px;}
  .view-point{left:350px;top:250px;height:540px;}
  .view-point li:first-child{margin-bottom:120px;}
  .view-point li:nth-child(2){margin-bottom:40px;}
  .view-point li:first-child::after{width:50px;}
  .view-point li:nth-child(2)::after{width:40px;}
  .view-point li:nth-child(3)::after{width:100px;}
  #intro-module span.image.module01{background-image:url('../img/timg-module01.png');width:430px;height:343px;top:300px;}
  #intro-module span.image.module02{background-image:url('../img/timg-module02.png');width:400px;height:227px;top:150px;}
  .wrap-module{width:270px;}
  .wrap-module.module02{width:300px;margin-top:-100px;}
  .wrap-module.module02 span.sub-tit{padding-top:0;}
  .left-use{width:270px;}
  .right-use{width:350px;}
  .list-as li{height:180px;}
  .footer .nav_warp .content{max-width:700px;}
  .footer .content h5{background-image:url('../img/tb-logo.png');width:160px;height:38px;}
  .content.bbsContent{padding-right:20px;padding-left:20px;}
}

/* 레이아웃 반응형 모바일 */
@media screen and (max-width:720px) {
  .tab-block{display:none;}
  .mobile-block{display:block;}
  .visual-wrap{margin-top:75px;}
  .inner{max-width:280px}
  .visual-wrap .inner{height:650px;background-image:url('../img/mmain-visual.png');background-position:center 40px;}
  .visual-wrap .visual-txt{width:280px;padding-top:245px;}
  .visual-wrap .visual-txt h2{font-size:30px;line-height:40px;}
  .visual-wrap .visual-txt p{font-size:18px;line-height:32px;}
  span.sub-tit{font-size:15px;padding-top:40px;}
  h2{font-size:30px;line-height:40px;}
  .left-title{width:130px;}
  .right-title{width:115px;margin-top:80px;}
  .introduce .image{width:280px;height:302px;background-image:url('../img/mimg-introduce.png');left:calc(50% - 140px);top:150px;}
  .introduce .image i{display:none;}
  .introduce{padding-bottom:70px;}
  .wrap-system{margin-top:0;}
  .left-system{margin-right:0;}
  .left-system, .right-system{float:none;width:100%;}
  .right-system{margin-top:35px;}
  #intro-system{padding-bottom:0;}
  #intro-system h3{margin-top:15px;font-size:18px;line-height:24px;}
  #intro-system p, a.more, .design-wrap p, .wrap-module p, #intro-use p, .list-as li p{font-size:15px;line-height:27px;}
  .list-mode{margin-top:40px;}
  .list-mode li{float:none;width:100%;padding:40px 0 20px;}
  .list-mode li:first-child{padding-right:0;}
  .list-mode li:last-child{padding-left:0;}
  .list-mode li:first-child::after{width:100%;height:1px;top:auto;bottom:0;}
  .list-mode li span{margin:0 auto;}
  #intro-design{height:auto;padding-bottom:90px;}
  #intro-design .image{position:relative;top:auto;background-image:url('../img/mimg-design.png');background-position:center 80px;width:280px;height:518px;}
  .view-point{display:none;}
  .standard-module{position:relative;}
  .wrap-module, #intro-module span.image{float:none;width:100%;}
  .wrap-module h3{font-size:18px;line-height:24px;}
  #intro-module span.image{position:absolute;}
  #intro-module span.image.module01{width:100%;background-image:url('../img/mimg-module01.png');height:274px;top:240px;}
  #intro-module span.image.module02{width:100%;background-image:url('../img/mimg-module02.png');height:182px;top:200px;}
  .wrap-module.module01 h3{margin-bottom:350px;}
  .wrap-module.module02{margin-top:50px;}
  .wrap-module.module02 h3{margin-bottom:260px;}
  #intro-module{padding-bottom:70px;}
  #intro-use{height:auto;padding-bottom:120px;}
  #intro-use h3{font-size:18px;line-height:32px;}
  .left-use{margin-right:0;float:none;width:100%;}
  .right-use{padding-top:0;float:none;width:100%;}
  .left-use a.more{position:absolute;bottom:-50px;}
  .intro-service{padding-bottom:70px;}
  .list-as{margin-top:40px;}
  .list-as li{float:none;width:100%;height:140px;}
  .list-as li:first-child{border-right:1px solid #ccc;border-bottom:none;}
  .list-as li:first-child:hover{border-right:1px solid #4093ff;}
  .list-as li:first-child::after{width:calc(100% + 2px);height:1px;background-color:#4093ff;position:absolute;right:-1px;top:auto;bottom:-1px;}
  .list-as li a{padding:15px 10px;}
  .list-as li h3{font-size:18px;line-height:24px;margin-bottom:20px;}
  .list-as li h3::after{width:20px;left:calc(50% - 10px);}
  .footer .nav_warp .content{max-width:280px;}
  .footer .content .list-foot span.company{display:block;}
  .footer .content .list-foot span.last{margin-right:0;}
  .footer .content .list-foot span.company::after, .footer .content .list-foot span.last::after{display:none;}
  .footer .nav_warp .content{padding-bottom:100px;}
  .footer .content h5{top:auto;right:auto;bottom:40px;}
  
}



@media screen and (max-width:960px) {
.main-carousel .owl-nav { display:none}
.main-carousel .li .copy_area h2:after { margin-top:20px}
.middle_content_warp ul li { width:46%; margin-right: 2%; margin-left: 2%;}
.middle_content_warp ul li:last-child { margin-right: 2%; margin-left: 2%;}
.middle_content_warp ul li h2 { font-size:19px}
.middle_content_warp ul li p { font-size:15px}
.company_services_warp dl { width:46%;margin-right: 2%; margin-left: 2%;}
.company_services_warp dl:nth-child(3n+3) {}
.center_banner_warp h2  { font-size:30px}
.center_banner_warp p { font-size:12px}
.bottom_contact_wrap .left_box { width:100%; padding-right:0}
.bottom_contact_wrap .right_box { width:100%; padding-left: 10px;}
.bottom_contact_wrap h2 { font-size:30px}

.sub_visual .sub_navi { display:none}
.sub_visual .sub_title { padding-top:120px}
.sub_visual h3 { font-size:30px}
.sub_navI_warp {width:90%; height:62px; margin:auto; top:-32px;  clear:both; background-attachment:scroll; position:relative; background-color:#000; z-index:3; display:block}
.sub_navI_warp .all-wrap .loca-wrap .loca-area { float:none;}
.sub_navI_warp .all-wrap .loca-wrap .loca-area > a {width:10%;}
.sub_navI_warp .all-wrap .loca-wrap .share-area { display:none}
.sub_navI_warp .all-wrap .loca-wrap .loca-area > ul {width:100%;}
.sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li { width:50%; border-left:1px solid #666}
.sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li:first-child { border:0}
.sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button {width:100%;}
.sub_navI_warp .all-wrap .loca-wrap .loca-area i { display:none}
.sub_navI_warp .all-wrap .loca-wrap .loca-area>ul>li button { border-right:0}
.sub_navI_warp .all-wrap .loca-wrap .loca-area>ul>li div ul { border-top:1px solid #666}
.sub_navI_warp .all-wrap .loca-wrap .loca-area>ul>li div ul li a { background-color:#000; border-bottom:1px solid #333;}

}



.video{width:100%;max-width:1000px;margin:40px auto;}
.video_container{position:relative;padding-bottom:56.25%;padding-top:0px;height:0;overflow:hidden;}
.video_container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}
@media screen and (max-width:768px) {
	.video{margin-top:0;}
}