@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
/* sub01_01 */
.wrap-greeting {background:linear-gradient(90deg, rgba(214,221,238,0.45), rgba(255,255,255,0.45));}
.greeting {padding-bottom:100px;}
.greeting .col {display:flex;}
.greeting .col>div {width:100%;}
.greeting .txt-box {padding-left:18px;}
.greeting .txt-box h3 {font-size:30px; font-weight:800; color:#333; line-height:1.3em; margin-bottom:80px;}
.greeting .txt-box h3 span {color:#698ec9;}
.greeting .txt-box p {font-size:18px; color:#454545; line-height:1.5em; margin-bottom:30px;}
.greeting .txt-box p strong {font-size:22px; line-height:1.4em; color:#555;}
/* sub01_02 */
.history .wrap {position:relative;}
.history .head {margin-bottom:80px; background:url('../images/sub/history-bg.jpg') center center no-repeat; background-size:cover; height:300px;}
.history .head .tit {display:flex; height:100%; align-items:center;}
.history .head .tit h3 {font-size:26px; color:#333333; line-height:1.5em;}
.history .head .tit h3 strong {color:#698ec9; font-weight:800;}
.history .item {padding:0 25px;}
.history .year {font-size:18px; line-height:1.6em; color:#333333; margin-bottom:40px;}
.history .row {display:flex; position:relative; padding-bottom:25px; font-family:'Noto Sans KR';}
.history .row:before {content:''; width:1px; height:100%; background:#ddd; position:absolute; left:3px; top:11px;}
.history .row:last-child {padding-bottom:0;}
.history .row:last-child:before {display:none;}
.history .row .month {width:80px; padding-left:40px; font-size:16px; line-height:1.8em; color:#999999; position:relative; font-weight:700;}
.history .row:first-child .month:before {content:''; width:5px; height:5px; background:#698ec9; border-radius:50%; position:absolute; left:1px; top:11px;}
.history .row:last-child .month:before {content:''; width:5px; height:5px; background:#698ec9; border-radius:50%; position:absolute; left:1px; top:11px;}
.history .row ul {width:1%; flex:1 1 auto; padding-left:20px;}
.history .row ul li {font-size:16px; color:#454545; line-height:1.6em;}
.history .slick-arrow {position:absolute; top:0; width:41px; height:11px; border:0; font-size:0; background-color:transparent; background-size:cover; background-repeat:no-repeat;}
.history .slick-prev {background-image:url('../images/sub/history-prev.png'); left:-70px;}
.history .slick-next {background-image:url('../images/sub/history-next.png'); right:-70px;}

/* 인증현황 */
.certi .sub-tabs ul {display:flex; justify-content:center;}
.certi .sub-tabs ul li {max-width:120px; width:50%; margin-right:8px;}
.certi .sub-tabs ul li a {color:#888; font-size:18px; font-weight:500; line-height:1.4em; letter-spacing:-.03em; display:flex; justify-content:center; align-items:center; height:45px; border-radius:22.5px;border:1px solid #698ec9;}	
.certi .sub-tabs ul li a.active {color:#fff; background:#698ec9;}
.certi .lst {margin-top:40px;}
.certi .lst ul {display:flex; flex-wrap:wrap; margin:-16px;}
.certi .lst ul li {width:25%; padding:16px;}
.certi .lst ul li .thumb {padding-bottom:141.3%; position:relative; overflow:hidden;}
.certi .lst ul li .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;}
.certi .lst ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.certi .lst ul li .tit {text-align:center; margin:18px 0 13px; color:#242424; font-size:18px; font-weight:500; letter-spacing:-.03em; line-height:1.4em;}
.certi .lst ul li .txt {word-break:break-all; /* overflow:hidden; text-overflow:ellipsis; white-space:normal;  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;  */color:#888; font-size:18px; font-weight:500; letter-spacing:-.03em; line-height:1.389em;}
.viewing .fancybox-close {position:absolute; right:-20px; top:-20px; border-radius:100%; border:3px solid #fff; background:#698ec9 url("../images/sub/close.png") 50% 50% no-repeat;  width:38px; height:38px;}
.viewing {max-width:800px !important; width:90vw !important;}
.viewing .fancybox-skin {background:none !important; max-width:800px !important; width:90vw !important; -webkit-box-shadow:none !important;  -moz-box-shadow:none !importan; box-shadow:none !importan;}
.viewing .fancybox-outer {max-width:800px !important; width:90vw !important;}
.viewing .fancybox-inner {max-width:800px !important; width:90vw !important; height:auto !important;}
.viewing .fancybox-inner img {height:auto;}
.fancybox-overlay {background:rgba(0,0,0,.8) !important;}
.pop-certi {color:#fff}


/* sub01_03 */
.ci .cnt .tit {text-align:center; margin-bottom:36px;}
.ci .cnt .tit h3 {font-size:26px; line-height:1.3em; color:#333333;}
.ci .cnt01 {position:relative; padding-bottom:90px; margin-bottom:90px;}
.ci .cnt01:before {content:''; width:100%; height:395px; background:#f8f8f8; position:absolute; bottom:0; left:0;}
.ci .cnt01 .img-box {margin-bottom:46px;}
.ci .cnt01 .col {display:flex;}
.ci .cnt01 .row {width:100%;}
.ci .cnt01 .row h4 {font-size:23px; color:#333333; line-height:1.3em; font-weight:800;}
.ci .cnt01 .row-flex {display:flex; justify-content:flex-end;}
.ci .cnt01 .row-flex ul {width:45%;}
.ci .cnt01 .row-flex ul li {font-size:18px; line-height:1.6em; color:#454545; font-weight:700; display:flex;}
.ci .cnt01 .row-flex ul li .tt1 {white-space:nowrap;}
.ci .cnt01 .row-flex ul li .tt1 span {color:#698ec9;}
.ci .cnt02 .col {border:1px solid #ddd; padding:50px 20px; display:flex; justify-content:center;}
.ci .cnt02 .row {max-width:450px; width:100%; margin:0 20px; height:145px; padding:20px;}
.ci .cnt02 .row1 {background:#698ec9;}
.ci .cnt02 .row2 {background:#656767;}
.ci .cnt02 .inner {display:flex; color:#fff; font-size:18px; line-height:1.5em; font-weight:800; height:100%; align-items:flex-end; justify-content:space-between;}
/* sub01_04 */
.directions {position:relative; padding-bottom:100px;}
.directions:before {content:''; background:#f8f8f8; width:100%; height:440px; position:absolute; bottom:0; left:0;}
.directions .maps {margin-bottom:40px;}
.directions .root_daum_roughmap {width:100% !important; height:300px !important;}
.directions .root_daum_roughmap .wrap_map {height:300px !important;}
.directions .roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.directions .roughmap_lebel_text:after {content:"(주)성무이엔지"; font-size:12px; line-height:15px;}
.directions .col {display:flex; flex-wrap:wrap; justify-content:space-between;}
.directions .tit {margin-bottom:40px;}
.directions .tit h3 {font-size:24px; color:#333333; line-height:1.3em; font-weight:800; padding-right:40px;}
.directions .txt ul {display:flex; margin:0 -25px;}
.directions .txt ul li {padding:0 25px; position:relative; font-size:16px; line-height:1.8em; color:#454545; font-family:'Noto Sans KR';}
.directions .txt ul li:after {content:''; width:1px; height:14px; background:#999999; position:absolute; right:0; top:50%; margin-top:-7px;} 
.directions .txt ul li:last-child:after {display:none;}
.directions .logo {position:absolute; bottom:-60px; right:0; opacity:0.05;}
/* sub02 */
.business .wrap {padding-bottom:30px;}
.business .col {display:flex; margin-bottom:30px;}
.business .img-box {max-width:520px; width:100%;}
.business .txt-box {width:1%; flex:1 1 auto; padding-left:100px;}
.business .txt-box h3 {font-size:24px; color:#333333; line-height:1.3em; font-family:'NanumSquare'; margin-bottom:26px; padding-bottom:14px; border-bottom:1px solid #ddd;}
.business .txt-box p {font-size:16px; line-height:1.6em; color:#454545;}
.business .arrow-box {max-width:520px; width:100%;}
.business .arrow-box .arrow {display:flex; justify-content:center; position:relative;}
.business .arrow-box .arrow:before {content:''; width:1px; height:16px; background:#ddd; position:absolute; top:50%; left:50%; margin-top:-8px;} 
.business .arrow-box .arrow .slick-arrow {margin:0 60px; width:41px; height:32px; background-repeat:no-repeat; background-size:cover; transition:all 0.3s; border:0; background-color:transparent; font-size:0;}
.business .arrow-box .arrow .slick-prev {background-image:url('../images/sub/business-prev.png');}
.business .arrow-box .arrow .slick-next {background-image:url('../images/sub/business-next.png');}
.business .arrow-box .arrow .slick-prev:hover {background-image:url('../images/sub/business-prev-on.png');}
.business .arrow-box .arrow .slick-next:hover {background-image:url('../images/sub/business-next-on.png');}
/* sub03 */
.laboratory {padding-bottom:14px; position:relative;}
.laboratory .logo {position:absolute; top:0; left:-130px; opacity:0.05; z-index:-1;}
.laboratory .col {display:flex; align-items:center;}
.laboratory .txt-box {width:1%; flex:1 1 auto;}
.laboratory .txt-box h3 {font-size:30px; color:#333333; line-height:1.3em; margin-bottom:20px;}
.laboratory .txt-box h3 strong {font-weight:800; color:#698ec9;}
.laboratory .txt-box p {font-size:22px; line-height:1.5em; color:#333333;}
.laboratory .img-box {max-width:591px; width:100%;}
/* sub04_02 */
.guide .head h3 {font-size:34px; font-weight:800; line-height:1.2em; color:#333333; margin-bottom:24px;}
.guide .cnt {padding:100px 0;}
.guide .cnt-tit {text-align:center; margin-bottom:40px;}
.guide .cnt-tit h3 {font-size:28px; font-weight:800; line-height:1.3em; color:#333333;}
.guide .cnt01 .col {display:flex; margin:0 -20px;}
.guide .cnt01 .row {width:25%; padding:0 20px;}
.guide .cnt01 .row .img-box {margin-bottom:26px;}
.guide .cnt01 .row .txt-box h4 {font-size:24px; line-height:1.3em; color:#333333; margin-bottom:16px;}
.guide .cnt01 .row .txt-box p {font-size:18px; line-height:1.5em; color:#454545;}
.guide .cnt02 ol {display:flex; margin:0 -25px;}
.guide .cnt02 ol li {padding:0 25px; width:20%; position:relative;}
.guide .cnt02 ol li:after {content:''; width:29px; height:18px; top:50%; margin-top:-9px; right:-15px; background:url('../images/sub/guide-arrow.png') 0 0 no-repeat; background-size:cover; position:absolute;}
.guide .cnt02 ol li:last-child:after {display:none;}
.guide .cnt02 .inner {position:relative; padding:22px 0 0 22px; height:100%;}
.guide .cnt02 .inner span {position:absolute; top:0; left:0; display:block; width:60px; line-height:60px; background:#698ec9; text-align:center; color:#fff; font-weight:800; font-size:24px; border-radius:10px;}
.guide .cnt02 .inner .box {background:#fff; padding:30px 0 0; text-align:center; height:179px;}
.guide .cnt02 .inner .box .icon {margin-bottom:24px;}
.guide .cnt02 .inner .box p {font-size:18px; line-height:1.6em; font-weight:700; color:#333333;}
.guide .cnt03 .col {display:flex; flex-wrap:wrap; border-top:1px solid #242424;}
.guide .cnt03 .row {border:1px solid #ddd; padding:40px 30px; text-align:center; position:relative;}
.guide .cnt03 .row33 {width:33.333333%; border-top:0; border-right:0;}
.guide .cnt03 .row50 {width:50%;border-top:0; border-right:0;}
.guide .cnt03 .bdr {border-right:1px solid #ddd;}
.guide .cnt03 .row  h4 {font-size:22px; color:#333333; line-height:1.3em; margin-bottom:24px;}
.guide .cnt03 .row ul {display:flex; flex-wrap:wrap; text-align:left; margin:0 -5px -6px;}
.guide .cnt03 .row ul li {font-size:16px; line-height:1.6em; color:#454545; font-family:'Noto Sans KR'; width:50%; padding:0 5px; margin-bottom:6px; padding-left:14px; position:relative;}
.guide .cnt03 .row ul li:before {content:''; width:5px; height:5px; border-radius:50%; background:#698ec9; position:absolute; top:10px; left:0;}
.guide .cnt03 .row .icon {position:absolute; top:30px; left:30px;}
.guide .cnt04 .tit {margin-bottom:56px;}
.guide .cnt04 .tit h3 {font-size:40px; font-weight:800; color:#333333; line-height:1.2em;}
.guide .cnt04 .col {display:flex;}
.guide .cnt04 .img-box {max-width:561px; width:100%;}
.guide .cnt04 .txt-box {width:1%; flex:1 1 auto; padding-left:80px; padding-top:40px;}
.guide .cnt04 .txt-box h4 {font-size:32px; color:#333333; line-height:1.3em; margin-bottom:30px;}
.guide .cnt04 .txt-box p {font-size:18px; line-height:1.5em; color:#454545;}
.guide .cnt05 .col {display:flex; margin:0 -35px;}
.guide .cnt05 .row {width:33.33333%; padding:0 35px;}
.guide .cnt05 .row:nth-child(2) {padding-top:100px;}
.guide .cnt05 .img-box {margin-bottom:36px;}
.guide .cnt05 .txt-box h3 {font-size:32px; color:#333333; line-height:1.2em; margin-bottom:26px; font-weight:800;}
.guide .cnt05 .txt-box p {font-size:18px; color:#454545; line-height:1.5em;}