@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.fz18 {font-size:18px !important;}
.fz20 {font-size:20px !important;}
.fz22 {font-size:22px !important;}
.fz24 {font-size:24px !important;}
.fz30 {font-size:30px !important;}
.fz34 {font-size:34px !important;}
.fz40 {font-size:40px !important;}

.doc-tit {font-size:26px; color:#333; letter-spacing:-.03em; line-height:1.3em; display:block;}

.doc-cnt10 {margin-bottom:10px !important;}
.doc-cnt15 {margin-bottom:15px !important;}
.doc-cnt20 {margin-bottom:20px !important;}
.doc-cnt30 {margin-bottom:30px !important;}
.doc-cnt50 {margin-bottom:50px !important;}
.doc-cnt75 {margin-bottom:75px !important;}
.doc-cnt100 {margin-bottom:100px !important;}

.fw500 {font-weight:500 !important;}
.fw600 {font-weight:600 !important;}

.c1 {color:#219e97 !important;}
.c2 {color:#3cd5cc !important;}

.about .item {margin-bottom:200px; display:flex;}
.about .item:last-child {margin-bottom:0;}
.about .img {flex:1;}
.about .cnt {padding-left:80px; flex:1; background-image:url('../images/sub/aboutbg.png'); background-size:contain; background-repeat:no-repeat; background-position:50% 100%;} 
.about strong {margin:35px 0 20px; font-weight:600; color:#242424; letter-spacing:-.03em; display:block; line-height:1.2em;}
.about .item:nth-child(even) .img {order:2;}
.about .item:nth-child(even) .cnt {padding-left:0;}
.about p {line-height:1.7em;}

.history .slide-btn {width:15px; height:25px; display:block; background-size:contain; position:absolute; top:50%; transform:translateY(-50%); background-repeat:no-repeat; background-position:50% 50%;} 
.history .slide-btn.prev {left:-60px; background-image:url('../images/bbs/year-prev.png');}
.history .slide-btn.next {right:-60px; background-image:url('../images/bbs/year-next.png');}
.history .slide-btn.prev:hover {background-image:url('../images/bbs/year-prev-on.png');}
.history .slide-btn.next:hover {background-image:url('../images/bbs/year-next-on.png');}
.history, .history .year {position:relative; text-align:center;}
.history:before, .history:after {position:absolute; content:''; top:0;  bottom:0; background-color:#ddd; width:1px;} 
.history:before {left:0;}
.history:after {right:0;}
.history .line {position:absolute; top:50%; left:0; right:0; background-color:#ddd; height:1px;}
.history .year a {padding-top:40px; line-height:1.4em; color:#979797; font-weight:500; display:block; position:relative;}
.history .year li:hover a,
.history .year li.active a {font-weight:600; color:#219e97;}
.history .year li a:before {width:7px; height:7px; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#979797; border-radius:100%; position:absolute; content:'';}
.history .year li:hover a:before,
.history .year li.active a:before {background-color:#219e97;}
.history .year li:hover a:after,
.history .year li.active a:after {width:16px; height:16px; border:1px solid #219e97; border-radius:100%; top:50%; left:50%; transform:translate(-50%, -50%); position:absolute; content:'';}

.history-flex {display:flex; align-items:flex-start;}
.history-flex .thumb {position:relative; padding-bottom:61%; overflow:hidden;}
.history-flex .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.history-cnt {flex:1 810px; max-width:810px; width:1%; margin-right:30px;}
.history-cnt .cnt {margin-top:45px;}
.history-cnt .title {font-size:24px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd; font-weight:600; color:#242424; letter-spacing:-.03em; line-height:1.3em;}

.history-nav {padding:7px 25px; max-height:595px; overflow:hidden; background-color:#f8f8f8; color:#686868; flex:1;}
.history-nav .item {padding:25px 0; border-bottom:1px solid #ddd; display:flex;}
.history-nav li:nth-child(4n) .item {border-bottom:0;}
.history-nav .image {width:155px; margin-right:15px; position:relative;}
.history-nav .title {line-height:1.38em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis; overflow:hidden;}
.history-nav .cnt {flex:1;}

.history-nav li {cursor:pointer; -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; box-sizing:border-box;}
.history-nav li.on .thumb:after {position:absolute; content:''; top:0; left:0; right:0; bottom:0; border:2px solid #3cd5cc;}
.history-nav li.on .title {color:#3cd5cc;}

.solution-top {height:880px; background-size:cover; background-repeat:no-repeat; background-position:50% 50%;}
.solution-top.bg1 {background-image:url('../images/sub/solutiontopbg1.jpg');}
.solution-top.bg2 {background-image:url('../images/sub/solutiontopbg2.jpg');}
.solution-top .contain {display:flex; height:100%; max-width:1460px; position:relative;}
.solution-top .flex {width:100%; justify-content:space-between; display:flex; align-items:flex-end;}
.solution-top .col-l {display:flex; justify-content:flex-end; height:100%; order:2;}
.solution-top .col-l p {color:#fff; line-height:1.4em;}
.solution-top .inner {display:flex; flex-direction:column; justify-content:center;}
.solution-top .tit {font-size:70px; letter-spacing:-.03em; line-height:1.3em; color:#fff;}
.solution-top .in-txt {flex:1;}
.solution-top .since {bottom:50px; right:30px; letter-spacing:-.03em; color:#fff; position:absolute; opacity:.6;}

.solution-top.bg1 .flex {justify-content:flex-end;}
.solution-top.bg1 .tit strong {font-size:76px;}
.solution-top.bg1 .col-l {position:absolute; left:30px; top:50%; transform:translateY(-50%);}
.solution-top.bg1 .col-r {margin-right:210px; order:2;}
.solution-top.bg2 .tit strong {font-size:90px;}
.solution-top.bg2 .col-l {text-align:right;}
.solution-top .col-r {margin-bottom:-70px;}

.solution-depth {position:absolute; left:30px; top:50px; z-index:100;}
.solution-depth span {font-size:14px; padding:0 15px; line-height:1.4em; letter-spacing:-.03em; display:inline-block; color:#fff; position:relative;}
.solution-depth span.last {padding-right:0;}
.solution-depth span.home {padding-left:0;}
.solution-depth span.home i {width:13px; height:12px; margin:-3px 6px 0 0; vertical-align:middle; background-image:url('../images/sub/home.png'); background-size:contain; background-repeat:no-repeat; background-position:50% 50%; display:inline-block;}
.solution-depth span.home:before {display:none !important;}
.solution-depth span:before {width:7px; height:12px; left:-3px; top:3px; background-image:url('../images/sub/sol-depth.png'); background-size:contain; background-repeat:no-repeat; position:absolute; content:'';}

.solution-depth.ty2 {max-width: 1660px; width: 100%; left: 50%; transform: translateX(-50%);}
.solution-depth.ty2 span {color: #242424; font-weight:500;}
.solution-depth.ty2 span.home i {background-image:url('../images/sub/home-bk.png');}


.platform-1 {padding:200px 0 150px; max-width:1920px; margin:0 auto;}
.platform-1 .flex {display:flex;}
.platform-1 .img {order:2;}
.platform-1 .cnt {flex:1; display:flex; align-items:center; background-image:url(../images/sub/platform-1bg.png); background-size:contain; background-repeat:no-repeat; background-position:-5% 100%;}
.platform-1 .inner {margin-left:260px; flex:1;}
.platform-1 strong {line-height:1.38em; display:block; color:#242424;}
.platform-1 p {line-height:1.7em;}

.platform-2 {position:relative; line-height:0;}
.platform-2 video {object-fit:cover; width:100%;}

.platform-3 {padding-bottom:80px; background-color:#fcfcfc;}

.platform-4 {background-color:#219e97; color:#fff;}
.platform-4 .contain {max-width:1260px;}
.platform-4 .m-tit strong {color:#fff;}
.platform-4 ul {display:flex; flex-wrap:wrap; text-align:center; color:#fff;}
.platform-4 ul li.wid33 {margin:95px 0; width:33.3333%;}
.platform-4 ul li.wid50 {width:50%;}
.platform-4 ul li p {margin-top:20px; letter-spacing:-.03em; line-height:1.67em;}

.platform-5 {padding-bottom:100px;}
.platform-5 .contain {max-width:1260px;}
.platform-5 div.fz18 {color:#686868; line-height:1.78em;}
.platform-5 ul {display:flex; margin:0 -15px;}
.platform-5 ul li {padding:0 15px; width:33.3333%; font-weight:700; text-align:center;}
.platform-5 .box {border-radius:30px; overflow:hidden;}
.platform-5 .image {min-height:445px; justify-content:center; align-items:center; display:flex; background-color:#f8f8f8;}
.platform-5 .fz24 {background-color:#219e97; color:#fff; letter-spacing:-.03em;}
.platform-5 .fz20 {color:#219e97; letter-spacing:-.03em; position:relative;}
.platform-5 .fz20:after {position:absolute; content:''; top:0; left:0; right:0; bottom:0; border:1px solid #219e97; border-radius:0 0 30px 30px;}
.platform-5 .txt {padding:16px 0;}

.customize {background-image:url('../images/sub/customizebg.png'); background-size:contain; background-repeat:no-repeat; background-position:50% 101%;}
.customize ul {display:flex; margin:0 -15px; text-align:center;}
.customize ul li {padding:0 15px;}
.customize ul li p {margin-top:25px; font-weight:600; color:#242424; letter-spacing:-.03em; line-height:1.3em;}

.production-wrap {background-image:url('../images/sub/production-casebg.png'); background-size:contain; background-repeat:no-repeat; background-position:50% 101%;}
.production-case {margin:0 -15px -30px; display:flex; flex-wrap:wrap;}
.production-case li {padding:0 15px; margin-bottom:30px; width:33.3333%; line-height:0;}
.production-case li video {width:100%;}
.production-case .box {position:relative;padding-bottom:67%;height:0;overflow:hidden;background:#000;}
.production-case .box iframe,
.production-case .box object,
.production-case .box embed,
.production-case .box video{position:absolute;top:0;left:0;width:100%;height:100%;}

.application .wrap {height:400px; display:flex; justify-content:space-between;}

.application .box {margin-right:30px; border:1px solid #ddd; border-radius:10px; width:50%; display:flex; flex-direction:column; justify-content:center; position:relative; transition:all 0.4s;}
.application .inner {text-align:center; transition:all 0.4s; opacity:1;}
.application .inner p {margin:25px 0 50px; line-height:1.3em;}
.application .view-more {bottom:50px; left:50px; width:170px; height:50px; padding:0 30px; display:none; align-items:center; position:absolute; color:#fff; background-color:#3cd5cc; border-radius:50px; justify-content:space-between;}
.application .view-more i {width:22px; height:12px; vertical-align:middle; display:inline-block; background-image:url('../images/sub/app-viewmore.png'); background-size:contain; background-repeat:no-repeat; background-position:50% 50%;}
.application .big-ico {right:50px; bottom:50px; position:absolute; display:none;}
.application .box:last-child {margin-right:0;}

.application .over-cnt {left:50px; top:50px; position:absolute; display:none; width:calc(100% - 6rem);}
.application .over-cnt .title {font-size:28px; margin-bottom:25px; font-weight:600; letter-spacing:-.03em; line-height:1.3em; color:#242424;}

.application .box.on {width:60%; flex-shrink:0;}
.application .box.on .view-more {display:flex;}
.application .box.on .inner {opacity:0; z-index:-2;}
.application .box.on .over-cnt {display:block; animation:mybottom1 0.4s 1 linear forwards;}
.application .box.on .big-ico {display:block; animation:myleft1 0.4s 1 linear forwards;}

@keyframes mybottom1 {
	from {transform:translateY(0.6rem); opacity:0;}
	to {transform:translateY(0); opacity:1;}
}
@keyframes myleft1 {
	from {transform:translateX(-0.6rem); opacity:0;}
	to {transform:translateX(0); opacity:1;}
}

@media (max-width:767px) {
	.application .wrap {flex-wrap:wrap; height:auto;}
	.application .box {width:100%; margin-right:0;}
	.application .inner {opacity:0 !important; z-index:-2 !important;}
	.application .over-cnt {display:block !important; animation:none !important;}
	.application .big-ico {right:30px; bottom:30px; display:block !important; animation:none !important;}
	.application .big-ico img {height:150px;}
	.application .box.on {width:100%;}
}

.application-video {color:#242424; position:relative;}
.application-video .txt {padding:0 30px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:1660px; width:100%; z-index:1;}
.application-video .txt .tt {letter-spacing:.3em;}
.application-video .txt strong {font-size:70px; margin:10px 0 35px; line-height:1.15em; letter-spacing:-.03em; display:block;}
.application-video .txt p {line-height:1.6em; font-weight:500;} 
.application-video .video {line-height:0; position:relative;}
.application-video .video:before {background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.15) 30%); position:absolute; content:''; top:0; left:0; right:0; bottom:0;}
.application-video video {object-fit:cover; width:100%;}

.root_daum_roughmap {width:100% !important; border-radius:20px;}
.root_daum_roughmap_landing {border-radius:20px;}
.root_daum_roughmap .wrap_controllers {border-radius:0 0 20px 20px !important;}

.local {display:flex; flex-wrap:wrap;}
.local .item {margin-bottom:30px; align-items:center; display:flex; width:50%;}
.local .one-item {margin-bottom:0 !important; width:100% !important;}
.local .item strong {margin-bottom:5px; display:block; line-height:1.4em; color:#242424;}
.local .cnt {padding-left:20px; flex:1;}
.local i {width:66px; height:66px; background-size:contain; background-repeat:no-repeat; background-position:50% 50%; display:inline-block;}
.local i.addr {background-image:url('../images/sub/local-addr.png');}
.local i.tel {background-image:url('../images/sub/local-tel.png');}
.local i.mail {background-image:url('../images/sub/local-mail.png');}
.local i.fax {background-image:url('../images/sub/local-fax.png');}