.sec_tit {margin-bottom: 60px}
.sec_tit .big {font-size: 5rem; font-weight: 700;}
.sec_tit .small {font-size: 1.25rem; color: #555; margin-top: 20px}

/* main */
.main_top {
    width: 100%; min-height: 100vh; height: max-content; background: url('../img/bg_top.webp') no-repeat center center / cover; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.main_top .title {text-align: center;}
.main_top .title .big {font-size: 7rem; font-weight: 700}
.main_top .title .small {color: #555; font-size: 1.5rem; margin-top: 40px;}
.main_abt .inner {max-width: unset; width: 100%;}
.main_abt .sec_box {display: flex; gap: 80px; align-items: stretch;}
.main_abt .img_box {display: flex; gap: 10px; width: calc(50% - 40px);}
.main_abt .img_box .img {height: 100%; overflow: hidden; font-size: 0;}
.main_abt .img_box .img img {width: 100%; height: 100%; object-fit: cover;}
.main_abt .img_box .img1 {flex: 2;}
.main_abt .img_box .img2 {flex: 1;}
.main_abt .cont_box {width: 100%; max-width: 640px; padding: 50px 0; margin-right: 5%;}
.main_abt .cont_box .tit {font-size: 5rem; font-weight: 700;}
.main_abt .cont_box .descrip {font-size: 1.25rem; color: #555; margin-top: 20px}
.main_biz {background: var(--mainBeige)}
.main_biz .list {display: flex; gap: 20px;}
.main_biz .item {background: #fff; padding: 40px; display: flex; flex-direction: column; gap: 40px; width: 100%;}
.main_biz .item .tit {font-size: 1.5rem; font-weight: 700;}
.main_biz .item .descrip {margin-top: 10px; font-size: 1.125rem; color: #555}
.main_biz .item .icon {width: 70px; aspect-ratio: 1/1; font-size: 0; margin-left: auto}
.main_biz .item .icon img {width: 100%; height: 100%; object-fit: contain}
.main_prc {background: var(--mainBeige)}
.main_prc .sec_box {display: flex; gap: 80px; align-items: stretch;}
.main_prc .sec_box .img {width: 100%; overflow: hidden; flex: 3;}
.main_prc .sec_box .img img {width: 100%; height: 100%; object-fit: cover;}
.main_prc .list {flex: 4; border-top: 1px solid var(--border);}
.main_prc .item {width: 100%; padding: 30px 0; border-bottom: 1px solid var(--border); display: flex; gap: 40px; align-items: flex-start;}
.main_prc .item .number {color:var(--mainSend); font-size: 3.75rem; font-weight: 700; width: 70px; flex-shrink: 0; margin-top: -23px}
.main_prc .item .cont .tit {font-size: 1.5rem; font-weight: 700;}
.main_prc .item .cont .descrip {font-size: 1.125rem; color: #555; margin-top: 10px}

.main_ct .sec_box {display: flex; flex-wrap: wrap; gap: 80px 60px;}
.main_ct .info {width: calc(50% - 60px);}
.main_ct .info .title {font-size: 5rem; font-weight: 700; margin-bottom: 60px;}
.main_ct .info .list {display: flex; flex-direction: column; gap:20px;}
.main_ct .info .list li {display: flex; gap: 20px; font-size: 1.125rem;}
.main_ct .info .list .gu {width: 115px; flex-shrink: 0; color: #999;}
.main_ct .form_wrap {width: 50%;}
.main_ct .map {width: 100%; height: 500px;}
.main_ct .map iframe {width: 100%; height: 100%}

.main_pj {overflow: hidden;}
.main_pj .swiper {overflow: unset}


/* faq */
.faq_list {border-top: 1px solid var(--border)}
.faq_item {border-bottom: 1px solid var(--border);}
.faq_item .ask,
.faq_item .answer {padding: 30px 20px;}
.faq_item .ask {display: flex; gap: 10px; justify-content: space-between; font-size: 1.25rem; cursor: pointer;}
.faq_item .ask::after {
    display: block; content: ""; width: 24px; aspect-ratio: 1/1; background: url('../img/icon_faq_arr.png') no-repeat center center / contain;
} 
.faq_item .answer {background: #f5f5f5; font-size: 1.125rem; color: #555; display: none;}
.faq_item .ask.on::after {rotate: -180deg;}


/* project */
.pj_item {aspect-ratio: 1/1; overflow: hidden; position: relative; cursor: pointer;}
.pj_item .img {width: 100%; height: 100%; position: absolute; top: 0; left: 0}
.pj_item .img img {width: 100%; height: 100%; object-fit: cover; transition: all .3s;}
.pj_item .cont {
    position: relative; z-index: 1; padding: 40px; width: 100%; height: 100%;
    color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
    background: linear-gradient(180deg, rgba(43, 36, 28, 0.00) 0%, rgba(43, 36, 28, 0.80) 70.19%);
    opacity: 0; transition: all .3s; 
}
.pj_item .cont .tit {font-size: 1.5rem; font-weight: 700;}
.pj_item .cont .descrip {font-size: 1.125rem}
.pj_item .cont .info {display: none;}
.pj_item:hover .cont {opacity: 1;}
.pj_item:hover .img img {scale: 1.1;}


/* popup */
#popProject {
    width: 100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,.9);
    position: fixed; top: 0; left: 0; z-index: 998; display: none;
}
#popProject.on {display: block;}
#popProject .pop_inner {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#popProject .layer {display: flex; width: max-content; width: 1000px; height: 600px; position: relative;}
#popProject .close {
    width: 36px; aspect-ratio: 1/1; border-radius: 100px; text-indent: -9999px;
    background: url('../img/icon_close_w.png') no-repeat center center / 18px auto rgba(0,0,0,.8);
    position: absolute; right: 0; top: -46px; cursor: pointer;
}
#popProject .cont {background: #fff; flex: 1 0 0; height: 100%; overflow-y: auto; padding: 40px 30px; flex-shrink: 0; display: flex; flex-direction: column; }
#popProject .cont .tit {font-size: 1.75rem; font-weight: 700}
#popProject .cont .descrip {font-size: 1rem; margin-top: 10px; color: #555;}
#popProject .cont .line {background: var(--mainSend); width: 40px; height: 3px; margin:25px 0;}
#popProject .cont .info {padding-top:10px; margin-top: auto; font-size: 0.875rem;}
#popProject .cont .info li {display: flex; gap: 7px; font-weight: 500; margin-top: 5px;}
#popProject .cont .info .gu {min-width: 70px; color: #777}
#popProject .img {aspect-ratio: 1/1; overflow: hidden;}
#popProject .img img {width: 100%; height: 100%; object-fit: cover;}