@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.overview{margin-top:60px;}
.overview-tit{font-size:40px;color:#000;font-weight:700;position:relative;margin-bottom:80px;text-align:center;}
.overview-tit:after{content:'';width:378px;height:11px;position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);background:url('../images/sub/shadow.png')no-repeat 50% 50%/contain;}
.story .con{display:flex;align-items:center;}
.story .con .img{width:50%;}
.story .con .txt-box{width:50%;padding-left:60px;}
.story .con .txt-box .viavis{display:flex;margin-bottom:35px;}
.story .con .txt-box .viavis p{font-size:50px;font-weight:800;color:#242424;}
.story .con .txt-box .viavis p:first-child{margin-right:80px;position:relative;}
.story .con .txt-box .viavis p:first-child:after{content:'';width:25px;height:24px;position: absolute;right:-50px;top:50%;transform:translateY(-50%);background:url('../images/sub/icon_plus.png')no-repeat 50% 50% / contain;}
.story .con .txt-box .txt{font-size:18px;line-height:1.444em;}
.story .con .txt-box .txt span{color:#242424;}
.profile{background-color:#f8f8f8;padding:100px 0;margin-top:100px;}
.profile .con{display:flex;flex-wrap:wrap;max-width:1020px;margin:0 auto;}
.profile .con .box{text-align:center;padding:35px 10px 30px;border:1px solid #ddd;margin-right:-1px;margin-top:-1px;width:33.3333%;background-color:#fff;}
.profile .con .box .icon{margin-bottom:10px;}
.profile .con .box .tit{font-size:20px;font-weight:500;color:#242424;}
.profile .con .box .txt{font-size:16px;}
.portfolio{margin-top:100px;}
.portfolio .con-box{display:flex;justify-content:center;}
.portfolio .con{max-width:940px;display:flex;flex-wrap:wrap;margin-right:-20px;}
.portfolio .con .box{width:calc(50% - 20px);margin-right:20px;margin-bottom:20px;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;padding:50px 30px;}
.portfolio .con .box.type1{background-image: url('../images/sub/portfolio_bg1.jpg');}
.portfolio .con .box.type2{background-image: url('../images/sub/portfolio_bg2.jpg');}
.portfolio .con .box.type3{background-image: url('../images/sub/portfolio_bg3.jpg');}
.portfolio .con .box.type4{background-image: url('../images/sub/portfolio_bg4.jpg');}
.portfolio .con .box .tit{font-size:20px;font-weight:500;color:#242424;margin-bottom:10px;}
.portfolio .con .box .txt{font-size:14px;line-height:1.429em;}
.history .row{display:flex;justify-content:space-between;}
.history .row.type1{margin-bottom:100px;}
.history .row.type2{margin-top:100px;}
.history .history-bg{background-color:#f8f8f8;padding:100px 0;}
.history .row .tit-box{width:40.83333%;}
.history .row .tit-box .sub-tit{font-size:20px;color:#3d3d3d;margin-bottom:15px;}
.history .row .tit-box .tit{font-size:50px;color:#f51616;font-weight:700;}
.history .row .info-box{width:59.1666%;}
.history .row .info-box .info{display:flex;margin-bottom:30px;}
.history .row .info-box .info .year{font-size:24px;color:#242424;font-weight:500;margin-right:40px;font-family:'Roboto';}
.history .row .info-box .info ul li{margin-left:20px;line-height:1.875em;position:relative;}
.history .row .info-box .info ul li:before{content:'';width:8px;height:8px;border-radius:50%;background-color:#f51616;position:absolute;left:-22px;top:12px;}
.history .row .info-box .img{margin-left:90px;}
.location{display:flex;}
.location .root_daum_roughmap {max-width:700px !important; height:500px !important;width:100%;}
.location .root_daum_roughmap .wrap_map {height:500px !important;}
.location .roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.location .roughmap_lebel_text:after {content:"비아비스"; font-size:12px; line-height:15px;}
.location .info{margin-left:75px;margin-top:55px;}
.location .info li{display:flex;margin-bottom:15px;}
.location .info li.type1{display:block;margin-bottom:30px;}
.location .info li .tit{position:relative;font-weight:500;font-size:18px;color:#242424;margin-right:30px;}
.location .info li .tit:before{content:'';width:2px;height:14px;background-color:#ff0000;position:absolute;left:-13px;top:8px;}
.location .info li .tit.type1{font-size:26px;margin-bottom:20px;}
.location .info li .tit.type1:before{content:'';width:2px;height:23px;background-color:#ff0000;position:absolute;left:-14px;top:4px;}
.location .info li .txt{line-height:1.625em;}
.location .transport{margin-left:95px;margin-top:70px;}
.location .transport li{display:flex;margin-bottom:10px;}
.location .transport li .tit{position:absolute;color:#242424;font-size:18px;font-weight:500;}
.location .transport li .tit:before{content:'';width:24px;height:24px;background:url('../images/sub/icon_subway.png')no-repeat 50% 50%/contain;position: absolute;left:-35px;top:4px;}
.location .transport li .tit.type1:before{content:'';width:24px;height:24px;background:url('../images/sub/icon_bus.png')no-repeat 50% 50%/contain;position: absolute;left:-35px;top:4px;}
.location .transport li .txt{margin-left:60px;}
.location .transport li .txt span{color:#fff;width:18px;height:18px;display:inline-block;border-radius:50%;background-color: #843bd2;font-size:14px;margin-right:5px;text-align:center;line-height:18px;}
.example{display:flex;flex-wrap:wrap;margin: 0 -20px -60px 0;}
.example .box{width:calc(33.3333% - 20px);margin:0 20px 60px 0;height:461px;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;color:#fff;position:relative;}
.example .box.type1{background-image:url('../images/sub/company_bg.jpg');}
.example .box.type2{background-image:url('../images/sub/military_bg.jpg');}
.example .box.type3{background-image:url('../images/sub/store_bg.jpg');}
.example .box.type4{background-image:url('../images/sub/public_bg.jpg');}
.example .box.type5{background-image:url('../images/sub/apartment_bg.jpg');}
.example .box.type6{background-image:url('../images/sub/education_bg.jpg');}
.example .box.type7{background-image:url('../images/sub/museum_bg.jpg');}
.example .box.type8{background-image:url('../images/sub/prison_bg.jpg');}
.example .box.type9{background-image:url('../images/sub/hospital_bg.jpg');}
.example .box:hover .tit-box{opacity:0;}
.example .box:hover .hover{opacity:1;}
.example .box .tit-box{background-color:rgba(17,17,17,.7);padding:0 50px;position: absolute;bottom:0;left:0;right:0;height:100px;line-height:100px;opacity:1;transition:.3s;}
.example .box .tit-box .tit{font-size:24px;font-weight:500;position:relative;padding-left:43px;}
.example .box .tit-box .tit:before{content:'';width:20px;height:14px;background:url('../images/sub/icon_arrow.png')no-repeat 50% 50%/contain;position:absolute;left:0;top:50%;transform:translateY(-50%);}
.example .box .hover{padding:40px 10px 0 50px;background-color:rgba(17,17,17,.7);position:absolute;left:0;right:0;top:0;bottom:0;display:block;opacity:0;transition:.3s;}
.example .box .hover .tit{font-size:24px;position:relative;padding-left:34px;padding-bottom:18px;margin-bottom:20px;}
.example .box .hover .tit:before{content:'';width:15px;height:20px;position:absolute;left:0;top:5px;background:url('../images/sub/example_icon.png')no-repeat 50% 50%/contain;}
.example .box .hover .tit:after{content:'';width:280px;height:1px;position:absolute;left:0;bottom:0;background:#ddd;}
.example .box .hover ul{overflow:auto;height:340px;}
.example .box .hover ul::-webkit-scrollbar {width: 10px;}
.example .box .hover ul::-webkit-scrollbar-thumb {background-color:rgba(255,255,255,.4);border-radius: 10px;background-clip: padding-box;border: 2px solid transparent;}
.example .box .hover ul::-webkit-scrollbar-track {background-color:rgba(0,0,0,.2);border-radius: 10px;box-shadow: inset 0px 0px 5px white;}

.example .box .hover ul li{font-size:15px;line-height:2em;}
.example .box .hover ul li span{margin-right:5px;}
.solution .pic {margin-bottom:50px;}
.solution .pic img {width:auto !important}
.solution .solution_btn{max-width:230px;height:60px;padding:0 30px;line-height:60px;border-radius:30px;background-color:#ff0000;color:#fff;font-size:19px;font-weight:700;position:relative;display:block;margin:0 auto;box-shadow:7px 7px 7px rgba(0,0,0,.2);}
.solution .solution_btn:after{content:'';width:10px;height:17px;background:url('../images/sub/icon_arrow2.png')no-repeat 50% 50%/contain;position: absolute;right:30px;top:50%;transform:translateY(-50%);}
.customer .lnb-menu{margin-bottom:60px;}
.customer .lnb-menu ul{display:flex;max-width:710px;margin:0 auto;justify-content:center}
.customer .lnb-menu li{max-width:170px;width:100%;margin-right:10px;text-align:center;color: #ff0000;border:1px solid #ff0000;border-radius:30px;height:50px;line-height:50px;padding:0 10px;}
.customer .lnb-menu li.active{color: #fff;background-color: #ff0000;}
.customer .lnb-menu li:last-child{margin-right:0;}