@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.fz17 {font-size:17px !important;}
.fz18 {font-size:18px !important;}
.fz22 {font-size:22px !important;}

.doc-cnt50 {margin-bottom:50px !important;}
.doc-cnt60 {margin-bottom:60px !important;}

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

.c1 {color:#b4252a !important;}

.overview-wide {padding-bottom:150px; position:relative; max-width:1920px; margin:0 auto; overflow:hidden;}
.overview-wide .txt {position:absolute; bottom:0; left:0; z-index:100;}

.overview {display:flex;}
.overview .col-l {position:relative;}
.overview .col-l:before {position:absolute; content:''; top:120px; left:-100%; bottom:-100%; right:120px; z-index:-1; background-color:#f4f4f4;}
.overview .cnt {margin-left:70px; flex:1;}
.overview ul li {height:60px; align-items:center; border-bottom:1px solid #ddd; display:flex;}
.overview ul li:last-child {border-bottom:0;}
.overview ul li strong {width:145px; color:#242424; display:block;}
.overview ul li p {flex:1; font-weight:500;}

.img-shadow {border-top-left-radius:100px; border-bottom-right-radius:100px; box-shadow:1px 3px 10px rgba(0,0,0,.3);}

.greeting {text-align:center;}
.greeting strong {font-size:27px; display:block; color:#242424;}
.greeting p {margin-top:30px; line-height:1.8em;}
.greeting p:last-child {margin-top:70px;}
.greeting .last {font-size:24px; font-weight:600; color:#242424; letter-spacing:-.02em; text-align:right;}
.greeting .last span {font-size:45px; padding-left:10px; font-family:'InkLipquid'; font-weight:400;}

.history .year {font-size:35px; line-height:1.3em; text-align:center; color:#242424; letter-spacing:-.02em;}
.history .wrap {display:flex;}
.history .cnt {margin-left:75px; flex:1;}
.history .item {padding:0 0 100px 90px; position:relative;}
.history .item:last-child {padding-bottom:0;}
.history .item:last-child:before {display:none;}
.history .item:before {width:1px; top:10px; left:0; bottom:-10px; position:absolute; content:''; border:1px dashed #ddd;}
.history .item:after {width:26px; height:26px; left:-13px; top:0; background-image:url('../images/sub/hisdot.png'); background-size:contain; background-repeat:no-repeat; position:absolute; content:'';}
.history .month {margin-bottom:12px; position:relative; font-weight:700; color:#242424; letter-spacing:-.02em;}
.history .month:before {left:-90px; top:12px; width:70px; position:absolute; content:''; border:1px dashed #ddd;}
.history .item p {line-height:1.69em;}

.certification {margin:0 -15px; display:flex; flex-wrap:wrap; text-align:center;}
.certification li {padding:0 15px; margin-bottom:30px; width:25%;}
.certification li a {display: block;}
.certification .thumb {position:relative; padding-bottom:126%; margin-bottom:20px; overflow:hidden;}
.certification .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;}
.certification .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.certification .tit {font-weight:500; letter-spacing:-.02em;}

.root_daum_roughmap {width:100% !important;}
.local {display:flex; text-align:center;}
.local .item {width:25%; position:relative;}
.local .item:after {height:35px; position:absolute; content:''; right:0; background-color:#ddd; width:1px; top:50%; transform:translateY(-50%);}
.local .item:last-child:after {display:none;}
.local i {width:100px; height:100px; margin:0 auto; display:block; background-size:contain; background-repeat:no-repeat; background-position:50% 50%;}
.local .item:nth-child(1) i { background-image:url('../images/sub/local_ico1.png');}
.local .item:nth-child(2) i { background-image:url('../images/sub/local_ico2.png');}
.local .item:nth-child(3) i { background-image:url('../images/sub/local_ico3.png');}
.local .item:nth-child(4) i { background-image:url('../images/sub/local_ico4.png');}
.local strong {margin:17px 0 10px; font-weight:600; color:#242424; display:block; letter-spacing:-.02em;}

.industry .top {padding:55px 0; margin-bottom:80px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center;}
.industry .top strong {font-size:30px; margin-bottom:20px; display:inline-block; position:relative;}
.industry .top strong:after {height:25px; position:absolute; content:''; bottom:-3px; left:0; right:0; z-index:-1; background-color:#f7e5e5;}
.industry .top p {letter-spacing:-.02em;}

.industry .group {display:flex; align-items:center;}
.industry .group:nth-child(even) .img {order:2;}
.industry .group .cnt {padding-left:80px; flex:1;}
.industry h2 {font-size:27px; margin-bottom:15px; letter-spacing:-.02em; color:#242424; line-height:1.3em; display:block;}
.industry .group p {line-height:1.88em;}

.state {font-size:14px; min-width:70px; max-width:70px; line-height:30px; display:inline-block; margin:0 auto; text-align:center; font-weight:500; letter-spacing:0; color:#fff; border-radius:5px;}
.state.ty1 {background-color:#c0272d;}
.state.ty2 {background-color:#010632;}

.recruit {padding:80px 135px 130px; min-height:670px; text-align:center; color:#fff; background-image:url('../images/sub/recruitbg.jpg'); background-size:cover; background-repeat:no-repeat; background-position:50% 50%;}
.recruit .cnt b {font-size:37px; padding-bottom:12px; margin-bottom:30px; position:relative; border-bottom:1px solid #fff; line-height:1.3em; display:inline-block; letter-spacing:-.02em;}
.recruit .cnt p {font-size:20px; line-height:2.25em;}
.recruit .cnt b:after {position:absolute; content:''; bottom:-7px; left:0; right:0; background-color:#fff; height:1px;}

.gloock-box {height:170px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.7); position:relative;}
.gloock-box strong {font-size:70px; font-family:'Gloock', serif; letter-spacing:.03em; font-weight:300; line-height:1em;}
.gloock-box .dot {width:14px; height:14px; position:absolute; border-radius:100%; background-color:#e42b32;}
.gloock-box .dot.left {left:-7px;}
.gloock-box .dot.right {right:-7px;}
.gloock-box .dot.top {top:-7px;}
.gloock-box .dot.bottom {bottom:-7px;}