@charset "utf-8";

.greetings {display: flex; align-items: center;}
.greetings .img {width: 42.5%; margin-right: 80px;}
.greetings .txt {flex:1 1 auto; min-width:0; width:1%;}
.greetings .txt h2 {font-size: var(--font-size-26); letter-spacing: -.03em; line-height: 1.54em; font-weight: 600; color: #222;}
.greetings .txt h2 span {color: var(--color-primary);}
.greetings .txt p {margin-top: 25px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.88em; color: #666;}
.greetings .ceo {margin-top: 30px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.2em; color: #222;}
.greetings .ceo span {margin-left: 20px; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #222;}

.intro-top ul {display: flex; margin:0 -10px; text-align: center;}
.intro-top li {width: 25%; padding:0 10px;}
.intro-top .box {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 250px; border: 1px solid #ddd; border-radius: 16px;}
.intro-top .tt {margin:35px 0 15px; font-size: var(--font-size-24); font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; color: #222;}
.intro-top .tt span {position: relative; padding-left: 10px; margin-left: 10px;}
.intro-top .tt span::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background-color: #ddd;}
.intro-top .tt2 {font-size: var(--font-size-16); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: var(--color-primary);}
.intro {display: flex; margin-top: 80px;}
.intro .tbl {width: 53.3%; margin-right: 60px;}
.intro table { width: 100%; border-collapse: collapse; border-spacing: 0px; border-top: 2px solid var(--color-primary);}
.intro tr {border-bottom: 1px solid #eee;}
.intro th {text-align: left; padding: 12px 10px; color: var(--color-primary); font-weight: bold;  vertical-align: top;}
.intro td { padding: 12px 10px; color: #666; line-height: 1.88em;}
.info h3 {font-weight: 600; font-size: var(--font-size-16);}
.info .mg-t-h3 {margin-top: 25px;}
.info p {padding-left: 7px;line-height: 1.88em;}
.intro .img {flex:1 1 auto; min-width:0; width:1%;}

.history {border-top: 2px solid var(--color-primary); margin-top: 80px;}
.history .group {display: flex; padding: 30px 40px; border-bottom: 1px solid #ddd;}
.history .year {width: 195px; font-size: var(--font-size-40); letter-spacing: -.03em; line-height: 1.2em; font-weight: 700; color: #222;}
.history ul {flex: 1 1 auto; min-width: 0; width: 1%;}
.history li {display: flex;align-items: center; margin-top: 30px;}
.history li:first-child {margin-top: 10px;}
.history .month {position: relative; padding-left: 30px; font-size: var(--font-size-20); letter-spacing: -.03em; line-height: 1.2em; font-weight: 600; color: #222;}
.history .month::before {content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 100%; background-color: var(--color-primary);}
.history li p {margin-left: 60px; font-size: var(--font-size-18); letter-spacing: -.03em;  line-height: 1.2em; color: #666;}

.philo {text-align: center;}
.philo h2 {font-size: var(--font-size-26); letter-spacing: -.03em; line-height: 1.2em; color: var(--color-primary);}
.philo p {margin: 20px 0 55px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.2em; color: #666;}

.direct .tit {text-align: center;}
.direct h2 {padding: 0 23px; height: 40px; border-radius: 20px;  background-color: var(--color-primary); color: #fff; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; margin-bottom: 40px; display: inline-flex; align-items: center; justify-content: center;}
.direct .info {display: flex; border: 1px solid #ddd; border-top: 0; border-radius: 0 0 16px 16px;}
.direct .info li {width: 25%; text-align: center; border-right: 1px solid #ddd;}
.direct .info li:last-child {border-right: 0;}
.direct .box {height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.direct .tt {margin:25px 0 15px; font-size: var(--font-size-16); line-height: -.03em; line-height: 1.2em; font-weight: 600; color: var(--color-primary);}
.direct .tt2 {font-size: var(--font-size-17); line-height: -.03em; line-height: 1.2em; font-weight: 600; color: #222;}
.direct.direct02 {margin-top: 80px;}
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont,
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {display: none;}

.area li {border-top: 1px solid #ddd;}
.area li:last-child {border-bottom: 1px solid #ddd;}
.area .box {display: flex; align-items: center; padding:55px 40px;}
.area .tit {display: flex; align-items: center;}
.area .num {display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-16); font-weight: 600; letter-spacing: -.03em; width: 40px; height: 40px; border-radius: 100%; background-color: var(--color-primary); color: #fff;}
.area h3 {width: 190px; margin: 0 90px 0 40px; font-size: var(--font-size-28); font-weight: 600; letter-spacing: -.03em; color: #222; line-height: 1.5em;}
.area p {font-size: var(--font-size-16); letter-spacing: -.03em; color: #666; line-height: 1.88em;}
.area p span {font-weight: 600;}

.business-tabs ul {display: flex; justify-content: center; align-items: center; margin-bottom: 80px;}
.business-tabs li {padding:0 5px;}
.business-tabs a {text-align: center; font-size: var(--font-size-16); line-height:1.2em; letter-spacing: -.03em; color: #666; font-weight: 600; background-color: #f5f5f5; display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 48px; border-radius: 24px;}
.business-tabs .active a {background-color: var(--color-primary); color: #fff;}

.field .items {display: flex; flex-wrap: wrap; margin: 0 -20px -40px;}
.field .item {width: 33.33%; text-align: center; padding: 0 20px; margin-bottom: 40px;}
.field .tit {display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 50px; margin-top: 30px; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 24px; font-size: var(--font-size-18); line-height:1.2em; font-weight: 700; letter-spacing: -.03em;}
.field h3 {position: relative; margin:0 0 30px 20px; padding-left: 20px; font-size: var(--font-size-24); letter-spacing: -.03em; line-height: 1.2em; color: #222;}
.field h3::before {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 100%; background-color: var(--color-primary);}
.field02 {margin-top: 75px;}

.clients ul {display: flex; flex-wrap: wrap; margin: -20px;}
.clients li {width: 33.33%; padding:20px ;}

.rd_vision .group {display: flex; border-bottom: 1px solid #ddd;padding:55px 40px;}
.rd_vision .group:first-child {border-top: 1px solid #ddd;}
.rd_vision .tit {width: 21%; margin-right: 95px; display: flex; align-items: center;}
.rd_vision h2 {margin-left: 40px; font-size: var(--font-size-28); letter-spacing: -.03em; line-height:1.2em; color: var(--color-primary);}
.rd_vision .list {flex: 1 1 auto; min-width: 0; width: 1%;}
.rd_vision .box:not(:first-child) {margin-top: 50px;}
.rd_vision h3 {margin-bottom: 20px; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height:1.2em; color:#222;}
.rd_vision ul li {position: relative; padding-left: 10px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height:1.88em; color:#666;}
.rd_vision ul li::before {content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; border-radius: 100%; background-color: #666;}

.certification {display: flex; flex-wrap: wrap; text-align: center; }
.certification .tit {display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 50px; margin-top: 30px; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 24px; font-size: var(--font-size-18); line-height:1.2em; font-weight: 700; letter-spacing: -.03em;}

.iso {justify-content: center; margin: -20px;}
.iso .item {padding:20px;}

.patents {margin:0 -20px -50px;}
.patents .item {width: 25%; padding: 0 20px; margin-bottom: 50px;}