@charset "utf-8";

header {position: absolute; border-color: #fff;}
.sub-content {padding-top: 8rem; padding-bottom: 15rem;}

/* sub title */
.sub-title {position: relative; margin-bottom: 6rem; padding-top: 4.8rem; text-align: center;}
.sub-title::before {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4rem; height: 4rem; background: url("/img/page/subtitle.png") center/contain no-repeat;}
.sub-title h3 {font-size: 3.2rem; font-weight: 600;}


/* content title */
.content-title {margin-bottom: 4.2rem;}
.content-title h4 {text-align: center; color: #333; font-size: 3.2rem; font-weight: 700;}
.content-title h5 {position: relative; margin-bottom: 6rem; padding-left: 5.8rem; text-align: left; color: #333; font-size: 2.4rem; font-weight: 700;}
.content-title h5::before {content: ""; position: absolute; top: -0.7rem; left: 0; width: 4.6rem; height: 4rem; background: url("/img/page/h5_bg.png") center/contain no-repeat;}
.content-title p {text-align: center; color: #555; font-size: 2rem; font-weight: 500;}


/* 준비중 */
.ready-container {padding: 10rem 0; text-align: center;}
.ready-container h5 {position: relative; display: inline-block; margin-bottom: 1rem; font-size: 3rem; font-weight: 700;}
.ready-container h5::before {content: ""; display: block; width: 7rem; height: 6rem; margin: 0 auto 1.6rem; background: url("/img/page/ready.png") center/contain no-repeat;}
.ready-container h5 span {color: var(--col-red);}


/* 회사 개요 */
.overview .calligraphy {width: 26rem; aspect-ratio: 263/168; margin: 0 auto; background: url("/eng/img/page/logo_main.png") center/contain no-repeat;}
.overview .banner {width: 100%; margin: 6.7rem auto 0; background: url("/img/page/overview_ban.jpg") center/cover no-repeat; padding: 9rem 2rem; border-radius: 1.6rem; overflow: hidden;}
.overview .banner p {text-align: center; color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1.4;}
@media (max-width: 992px) {
    .overview .banner p br {display: none;}
}
@media (max-width: 768px) {
    .overview .banner p {font-size: 2rem;}
}


/* 회사 특허 */
.patent-list {display: flex; flex-wrap: wrap; margin-left: 1px; border-top: 1px solid var(--col-gray);}
.patent-list > li {width: 25%; margin-left: -1px; border: 1px solid var(--col-gray); border-top: 0;}
.patent-list > li .img {padding: 6.2rem 2rem; text-align: center;}
.patent-list > li .img img {width: 22rem;}
.patent-list > li .name {display: flex; justify-content: center; align-items: center; text-align: center; min-height: 8.5rem; padding: 2rem 1rem; background: #ECECEC; color: #333; font-size: 1.8rem; font-weight: 500;}
@media (max-width: 992px) {
    .patent-list > li {width: 33.33%;}
    .patent-list > li .img {padding: 2rem;}
}
@media (max-width: 576px) {
    .patent-list > li {width: 50%;}
}

/* 프로젝트 개요 */
.sub-intro {position: relative; margin-bottom: 17rem;}
.sub-intro p {position: absolute; left: -1px; bottom: -10rem; width: calc(100% - 20rem); padding: 5rem 5.5rem; background: #fff; font-size: 2rem; font-weight: 500; line-height: 1.5;}

.project-history {text-align: center;}
.project-history p {margin-top: 5rem; padding: 6rem 3rem; border-radius: 3.2rem; background: #F1F1F1; font-size: 1.8rem; font-weight: 500; line-height: 1.5;}

.flow-list {display: flex; gap: 2rem;}
.flow-list > li {width: calc(33.33% - 1.3rem); min-height: 64.5rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem 4.7rem; background-size: cover; background-position: center; background-repeat: no-repeat;}
.flow-list > li:nth-child(1) {background-image: url(/img/page/flow01.jpg);}
.flow-list > li:nth-child(2) {background-image: url(/img/page/flow02.jpg);}
.flow-list > li:nth-child(3) {background-image: url(/img/page/flow03.jpg);}
.flow-list > li .name {margin-bottom: 3.5rem; color: #fff; font-size: 2.8rem; font-weight: 700;}
.flow-list > li ul {min-height: 14rem;}
.flow-list > li ul li {color: #fff; font-weight: 500;}
.flow-list > li ul li + li {margin-top: 1.6rem;}
@media (max-width: 992px) {
    .project-history p br {display: none;}
    .flow-list {flex-direction: column;}
    .flow-list > li {width: 100%; min-height: 32rem;}
}
@media (max-width: 768px) {
    .sub-intro {margin-bottom: 7rem;}
    .sub-intro p {position: relative; bottom: -100%; width: 100%; padding: 3rem 2rem;}
}
@media (max-width: 576px) {
    .flow-list > li {padding: 3rem;}
}



/* 프로젝트 CI */
.ci-wrap {display: flex; border: 1px solid var(--col-gray);}
.ci-wrap > * {flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 28rem; text-align: center;}
.ci-wrap .ci-box {padding: 3rem; background: url("/img/page/ci_bg.png") center/cover no-repeat;}
.ci-wrap .txt div {margin-bottom: 1.6rem; font-size: 2.4rem; font-weight: 600;}
.ci-wrap .txt p {font-size: 1.8rem;}
.ci-wrap .txt p + p {margin-top: 1rem;}
.ci-container {text-align: right;}
@media (max-width: 768px) {
    .ci-wrap {flex-direction: column;}
    .ci-wrap > * {min-height: 21rem;}
}



/* ============================================================
* business
* ============================================================ */
/* 소개 */
.business-intro {display: flex; border: 1px solid var(--col-gray);}
.business-intro .img {flex: 0 0 auto; width: 37%; max-width: 55rem; aspect-ratio: 550/537; background-size: cover; background-position: center; background-repeat: no-repeat;}
.smartcube .business-intro .img {width: 40%; max-width: 60rem; aspect-ratio: 604/408;}

.business-intro .txt {display: flex; flex-direction: column; justify-content: center; padding: 4rem;}
.business-intro .txt div {margin-bottom: 6rem; font-size: 2rem; font-weight: 700;}
.business-intro .txt p {font-weight: 500; line-height: 1.75;}
@media (min-width: 992px) and (max-width: 1400px) {
    .business-intro .txt p br {display: none;}
}
@media (max-width: 992px) {
    .business-intro {flex-direction: column;}
    .business-intro .img {width: 100% !important; margin: 4rem auto 0;}
}
@media (max-width: 768px) {
    .business-intro .txt p br {display: none;}
}
@media (max-width: 576px) {
    .business-intro .img {margin: 0 auto;}
    .business-intro .txt {padding: 4rem 2rem;}
    .business-intro .txt div {margin-bottom: 3rem;}
}


/* 특징 아이콘 */
.feature-list {display: flex; justify-content: center; gap: 2rem;}
.feature-list > li {flex: 1 0 0; position: relative; padding: 3rem 2rem 2.2rem; border: 1px solid var(--col-gray); text-align: center;}
/*
.feature-list > li::before {content: ""; display: block; width: 7rem; height: 7rem; margin: 0 auto 3rem; background-size: contain; background-position: center; background-repeat: no-repeat;}
*/
.feature-list > li div {margin-bottom: 1.8rem; font-size: 1.8rem; font-weight: 700;}
.feature-list > li p {line-height: 1.4;}

/*
.airdome .feature-list > li:nth-child(1)::before {background-image: url(/img/page/project/airdome/icon01.png);}
.airdome .feature-list > li:nth-child(2)::before {background-image: url(/img/page/project/airdome/icon02.png);}
.airdome .feature-list > li:nth-child(3)::before {background-image: url(/img/page/project/airdome/icon03.png);}
.airdome .feature-list > li:nth-child(4)::before {background-image: url(/img/page/project/airdome/icon04.png);}
.airdome .feature-list > li:nth-child(5)::before {background-image: url(/img/page/project/airdome/icon05.png);}

.smartcube .feature-list > li:nth-child(1)::before {background-image: url(/img/page/project/smartcube/icon01.png);}
.smartcube .feature-list > li:nth-child(2)::before {background-image: url(/img/page/project/smartcube/icon02.png);}
.smartcube .feature-list > li:nth-child(3)::before {background-image: url(/img/page/project/smartcube/icon03.png);}
.smartcube .feature-list > li:nth-child(4)::before {background-image: url(/img/page/project/smartcube/icon04.png);}
.smartcube .feature-list > li:nth-child(5)::before {background-image: url(/img/page/project/smartcube/icon05.png);}
*/
@media (max-width: 992px) {
    .feature-list {flex-wrap: wrap;}
    .feature-list > li {flex: 0 0 auto; width: calc(33.33% - 1.4rem);}
}
@media (max-width: 576px) {
    .feature-list > li {width: calc(50% - 1rem); padding: 3rem 1rem 2.2rem;}
}


/* 테두리 이미지  */
.busin-img-list {display: flex; justify-content: center; margin-top: 5rem; margin-left: 1px;}
.busin-img-list > li {flex: 1 0 0; margin-left: -1px; border: 1px solid var(--col-gray); text-align: center;}
@media (max-width: 576px) {
    .busin-img-list {flex-wrap: wrap; gap: 2rem;}
    .busin-img-list > li {flex: 100%;}
}


/* 에어돔 */
.experience-banner {background: url(/img/page/exp_ban01.jpg) center/cover no-repeat; border-radius: 3.2rem; overflow: hidden;}
.experience-banner p {padding: 5rem 2rem; text-align: center; color: #fff; font-size: 1.8rem; font-weight: 500; line-height: 1.5;}

.experience-list {display: flex; justify-content: center; gap: 2rem; margin-top: 4rem;}
.experience-list > li {flex: 1 0 0; aspect-ratio: 480/602; padding: 4.4rem 4rem; border-radius: 2.4rem; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; font-size: 2.4rem; font-weight: 700;}
.experience-list > li:nth-child(1) {background-image: url(/img/page/project/airdome/experience01.jpg);}
.experience-list > li:nth-child(2) {background-image: url(/img/page/project/airdome/experience02.jpg);}
.experience-list > li:nth-child(3) {background-image: url(/img/page/project/airdome/experience03.jpg);}

@media (max-width: 768px) {
    .experience-banner p br {display: none;}
    .experience-list {flex-wrap: wrap;}
    .experience-list > li {flex: 100%; aspect-ratio: auto;}
}

/* 스마튜큐브 - 테이블 */
.smartcube .tb-basic {border-top: 2px solid #A3C388;}
.smartcube .tb-basic thead th {background: #EEF4E9;}

@media (max-width: 576px) {
    .smartcube .tb-basic td::before {margin-right: 3rem;}
}


/* 스마트팜 특징 */
.farm-list {display: flex; flex-wrap: wrap; gap: 2rem;}
.farm-list > li {width: calc(33.33% - 2rem);}
.farm-list > li img {width: 100%;}
.farm-list > li .txt {padding: 3rem 2rem 4rem; background: #F3F3F3;}
.farm-list > li .txt div {margin-bottom: 2rem; text-align: center; font-size: 2.4rem; font-weight: 700;}
.farm-list > li .txt p {font-size: 1.8rem;}
@media (max-width: 768px) {
    .farm-list > li {width: 100%;}
    .farm-list > li .txt p {word-break: break-all;}
}


/* 유통/커머스 */
.sale-wrap {text-align: center;}
.sale-wrap > p {margin-bottom: 5rem; text-align: center; font-size: 2rem; font-weight: 500; line-height: 1.35;}
.sale-wrap > div {margin-top: 11rem; padding: 4rem 2rem; background: #F2F2F2; border-radius: 10rem; text-align: center; font-size: 2rem; font-weight: 500;}
.caption-list {display: flex; justify-content: center; margin-top: 5rem; margin-left: 1px;}
.caption-list > li {flex: 1 0 0; margin-left: -1px; padding: 5rem 6rem 3rem; border: 1px solid var(--col-gray); text-align: center;}
.caption-list > li p {margin-top: 2rem; font-size: 1.8rem; font-weight: 500;}
@media (max-width: 992px) {
    .caption-list > li {padding: 3rem 2rem;}
}
@media (max-width: 576px) {
    .sale-wrap > div {border-radius: 4rem;}
    .caption-list {flex-wrap: wrap; gap: 2rem;}
    .caption-list > li {flex: 100%;}
}