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


 /* common */
.sub-strong {font-size: 30px; line-height: 1.333em; font-weight: 600; letter-spacing: -0.01em;} 

.doc-tit {margin: 0 0 60px; text-align: center;} 
.doc-tit h2 {font-size: 35px; color: #242424; letter-spacing: -0.01em; line-height: 1em;} 
.doc-tit.type2 {margin-bottom: 0;} 
.doc-tit.type2 p {font-size: 20px; letter-spacing: -0.01em;} 
.doc-cnt {padding-top: 100px;} 

.doc-sub-cnt {margin-bottom: 60px;} 
.doc-sub-cnt:last-child {margin-bottom: 0;} 

.pb0 {padding-bottom:0 !important;} 

/* greeting */
.greeting .group-txt {padding-top: 50px;} 
.greeting .group-txt .txt-area {padding-left: 20px;} 
.greeting .group-txt p span {font-weight: 500;} 
.greeting .sign {display: flex; align-items: center; justify-content: end;} 
.greeting .sign .name {margin-right: 12px;} 
.greeting .sign .name span {color: #242424; font-size: 18px; font-weight: 600;} 

/* about */
.about {position: relative; padding-bottom: 30px;} 
.about .group-flex {display: flex;} 
.about .group-flex > div {width: 50%;} 
.about::after {content: ''; width: 355px; height: 303px; background: url(../images/sub/about-bg.png) no-repeat 50% 100%/contain; position: absolute; bottom: -100px; right: -360px;} 
.about .group-flex .txt-area {padding-left: 48px;} 
.about .txt-area .txt {padding-top: 80px;} 
.about .txt-area .txt .desc {color: #a8a8a9; line-height: 1.625em; font-size: 16px; text-indent: -6em; margin-left: 6em;} 
.real-cont.about {padding-bottom: 130px;} 

/* .history */
.history .img {max-width: 106px; width: 100%; margin: 0 auto;} 
.history .tab-contents {border: none;} 
.history .con2 {position:relative; padding-top: 60px;} 
.history .con2:after {content:''; width:1px; height:100%; background-color: #ddd; position: absolute; left:50%; top:0;} 
.history .con2 .row {display:flex; padding-bottom:80px; flex-direction:row-reverse;} 
.history .con2 .row .img {width:50%;} 
.history .con2 .row .col {width:50%; padding-left: 40px;} 
.history .con2 .row .col .year {color: #0055a9; font-size: 30px; font-weight:700; margin-bottom:25px; position:relative;} 
.history .con2 .row .col .year:before {content:''; width:21px; height:20px; background: url(../images/sub/diamond.png) no-repeat 100%/contain; position: absolute; left: -50px; top:5px; z-index:1;} 
.history .con2 .row .col .info .wrap {display:flex;} 
.history .con2 .row .col .info .wrap .month {min-width: 54px; font-size: 19px; color: #242424; font-weight: 600; line-height: 1.842em;} 
.history .con2 .row .col .info .wrap ul {min-width:0; width:1%; flex:1 1 auto;} 
.history .con2 .row .col .info .wrap ul li {line-height:2em;} 
.history .con2 .row:nth-child(even) {text-align:right; flex-direction: row;} 
.history .con2 .row:nth-child(even) .col {padding-left:0; padding-right:40px;} 
.history .con2 .row:nth-child(even) .col .year:before {left:auto; right: -51px;} 
.history .con2 .row:nth-child(even) .col .info .wrap {flex-direction:row-reverse;} 
.history .con2 .row:nth-child(even) .col .info .wrap li:before {left:auto; right:0;} 

/* management */
.management .intro {padding: 50px 0; margin-bottom: 0;} 
.management .intro p {font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5em; text-align: center;} 

.bg-grey {background-color: #f8f8f8;} 

.box-wrap {max-width: 1000px; width: 100%; margin: 0 auto; margin-top: -80px;} 
.box-list1 ul {display: flex; position: relative; background-color: #fff;} 
.box-list1 ul li {width: 33.333%; position: relative; padding: 60px 0 100px; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;} 
.box-list1 ul li::after {content: ""; position: absolute; top: 80px; right: 0; width: 1px; height: 90px; background-color: #ddd;} 
.box-list1 ul li:last-child::after {display: none;} 

.box-list1 ul li .img {margin-bottom: 20px;} 
.management .box ul li p {font-size: 18px; font-weight: 500; line-height: 1.444em; letter-spacing: -0.04em; text-align: center;} 

.box-list2 ul {display: flex; margin: 0 -15px;} 
.box-list2 ul li {width: 33.333%; padding: 0 15px;} 
.box-list2 ul li .cnt {padding: 60px 0; background-color: #fff; border-top-right-radius: 50px; border-bottom-left-radius: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center;} 
.box-list2 ul li .img {margin-bottom: 25px;} 
.box-list2 ul li p {font-size: 20px; font-weight: 500; color: #242424;} 


.img-list ul {display: flex; margin: -20px -15px; flex-wrap: wrap;} 
.img-list ul li {width: 33.333%; padding: 20px 15px;} 
.img-list ul li .img {margin-bottom: 20px;} 
.img-list ul li p {font-size: 20px; font-weight: 500; text-align: center;} 

/* product */
.sub-title.type2 {margin: 80px 0 50px;} 
.product-tab {margin-bottom: var(--margin-100-40);} 
.product-tab ul {display: flex; justify-content: center;} 
.product-tab ul li a {font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 5px; display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 50vh; border: 1px solid #ddd; width: 210px;} 
.product-tab ul li.active a {background-color: #0055a9; color: #fff;} 
.product-slide {position: relative;} 
.product-slide .slider {max-width: 1200px; width: 100%; margin: 0 auto; overflow: hidden;} 
.product-slide .slick-list {overflow:visible;} 
.product-slide .box {display:flex; max-height:245px; height: 100%; position:relative;} 
.product-slide .box .img {position:relative; width: 100%;} 
.product-slide .items {margin: 0 -10px;} 
.product-slide .items .item {padding: 0 10px;} 
.product-slide .slick-current .box {transform:scale(1); transition:.4s; transition-delay:.6s;} 
.product-slide .slick-current .box:after {opacity:0; z-index:-1; transition:.4s; transition-delay:.6s;} 
.product-slide .slick-arrow {display:block; position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 37px; background-repeat: no-repeat; background-size: 100%; background: none; border: none; font-size: 0; background-position: center; background-size: cover;} 
.product-slide .arrows .slick-prev {background-image: url(../images/sub/slide-prev.png); left: -60px;} 
.product-slide .arrows .slick-next {background-image: url(../images/sub/slide-next.png); right: -60px;} 
.product-slide .arrows .slick-prev:hover {background-image: url(../images/sub/slide-prev-on.png);} 
.product-slide .arrows .slick-next:hover {background-image: url(../images/sub/slide-next-on.png);} 

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #868686; line-height:1em; letter-spacing: -0.01em;} 
.table-style table th {padding: 16px; border: 1px solid #ddd; border-top: 0; font-weight: 500; background: #f8f8f8; color: #242424;} 
.table-style table td {padding: 16px; text-align:center; border:1px solid #ddd; border-top:0; color: #454545;} 
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;} 
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;} 

.etc .img {width: 100%; max-width: 311px; margin: 0 auto;} 

/* process */
.process-list ul {display: flex; flex-wrap: wrap; margin: -35px -20px;} 
.process-list ul li {width: 33.333%; padding: 35px 20px;} 
.process-list ul .li06 {order: 1;} 
.process-list ul .li05 {order: 2;} 
.process-list ul .li04 {order: 3;} 
.process-list ul .li07 {order: 4;} 
.process-list ul .li08 {order: 5;} 
.process-list ul li .img {position: relative;} 
.process-list ul li .img::after {content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -26px; width: 10px; height: 18px; background: url(../images/sub/arrow-grey-next.png) no-repeat 100%/contain;} 
.process-list ul li.li03 .img::after,
.process-list ul li.li06 .img::after {right: auto; left: 50%; transform: translateX(-50%) rotate(90deg); top: auto; bottom: -104px;} 
.process-list ul li.li04 .img::after,
.process-list ul li.li05 .img::after {transform: rotate(180deg); right: auto; left: -26px;} 


.process-list ul li:last-child .img::after {display: none;} 
.process-list ul li .txt {text-align: center; margin-top: 10px;} 
.process-list ul li .txt p {font-size: 20px; line-height: 1.3em; letter-spacing: -0.01em;} 

.table-style span {display: block; margin-left: auto; width: 100%; max-width: 100px; letter-spacing: -0.02em; font-size: 16px;} 

/* philosophy */
.philosophy {text-align: center;} 
.philosophy .idiom {padding-bottom: 100px;} 
.philosophy .idiom .chinese {font-size: 70px; line-height: 1em; letter-spacing: -0.06em; font-family: 'Ma Shan Zheng'; margin-bottom: 30px; color: #242424;} 

/* .philosophy */
.txt1 {font-size: 20px; color: #242424; letter-spacing: -0.01em; margin-bottom: 20px;} 
.mission {color: #fff; position: relative; padding: 100px 0;} 
.mission::after {content: ""; width: 100vw; max-height: 260px; height: 100%; background: url(../images/sub/mission.jpg) no-repeat 50% 100%/cover; top: 0; left: 50%; transform: translateX(-50%); position: absolute; z-index: -1;} 
.mission .doc-tit h2, .mission .doc-tit p {color: #fff;} 
.mission .doc-tit p {margin-top: 15px;} 
.box-list1.type2 ul li {padding: 0;} 
.box-list1.type2 ul li .txt1 {margin-bottom: 15px;} 
.box-list1.type2 ul li::after {top: 50%; transform: translateY(-50%); height: 60px;} 
.box-list1.type2 ul li:last-child::after {display: block;} 
.box-list1.type2 ul li:first-child::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 60px; background-color: #ddd;} 

/* 인증현황 */
.certification-list ul {display: flex; margin: 0 -20px;} 
.certification-list ul li {width: 25%; padding: 0 20px; text-align: center;} 
.certification-list ul li .img {margin-bottom: var(--margin-20-10);} 
.certification-list ul li .tit {font-weight: 500; letter-spacing: -0.02em; font-size: var(--font-size-18-14); line-height:1.444em;} 


/* 주요 고객사 */
.client-list {background-color: #f8f8f8; margin-top:var(--margin-60-40); padding:var(--padding-60-40) 0 var(--padding-100-60);} 
.client-list .contain {max-width: 1260px;} 
.client-list ul {display: flex; flex-wrap: wrap; margin: -20px -15px;} 
.client-list ul li {width: 25%; padding: 20px 15px; text-align: center;} 
.client-list ul li .img {margin-bottom: var(--margin-20-10);} 
.client-list ul li .tit {font-weight: 500; letter-spacing: -0.02em; line-height:1em;} 


/* .bg {position: relative;} 
.bg::after {position: absolute; width: 100vw; background-color: #f8f8f8; content: ""; max-height: 546px; height: 100%; left: 50%; transform: translateX(-50%); bottom: -100px; z-index: -1;} */

/* recruit */
.intro {text-align: center;} 
.intro p {font-weight: 500; font-size: 28px; letter-spacing: -0.02em; color: #242424;} 
.intro .quote {font-family:'Noto Sans KR';} 

.table-style.type2 table th {padding: 20px 25px;} 
.table-style.type2 table td {text-align: left; padding: 20px 25px;} 

.doc-tit p {font-size: 15px; letter-spacing: -0.01em; color: #808080; margin-top: 20px;} 

/* contact */
.box-list2.type2 ul li .cnt {background-color: #f8f8f8; padding: 80px 0 70px;} 
.box-list2.type2 ul li .cnt span {font-size: 18px; color: #242424; line-height: 1.333em; letter-spacing: 0; display: block; margin-top: 10px;} 

 /* way */
.way .map {margin-bottom: 30px;} 
.root_daum_roughmap {width:100% !important; height:500px !important;} 
.root_daum_roughmap .wrap_map {height:500px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.roughmap_lebel_text:after {content:"아이테크"; font-size:12px; line-height:15px;} 
.way .table-style.type2 table th {background: none; border-right: none; padding: 20px 35px;} 
.way .table-style.type2 table td {border-left: none; padding: 20px 15px;} 

.m-br {display: none;} 

/* 제품소개 */
.product-wrap .tit {margin-bottom:var(--margin-20-10); font-weight:700; font-size: var(--font-size-30-20); line-height:1em; color: #0055a9;} 
.product-wrap .desc {line-height:1.75em;} 
.product-wrap .box-list {margin-top:var(--margin-30-16);} 
.product-wrap .box-list ul {display:flex; margin:0 -15px;} 
.product-wrap .box-list ul li {display:flex; flex-direction: column; justify-content: center; align-items: center; width:calc(50% - 30px); margin:0 15px; height:150px; background-color: #f8f8f8;} 
.product-wrap .box-list ul li .t1 {margin-bottom:15px; font-weight:500; font-size: var(--font-size-18-16); color: #242424;} 
.product-wrap .tag-wrap span {display:inline-block; margin-right:10px;  padding:0 10px; background-color: #333; color: #fff; font-weight:500; border-radius: 5px; line-height:32px;} 
.product-wrap .tag-wrap span:last-child {margin-right:0;}