*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body {background: #fdf9ed;}

/* =====================
    메인 슬라이드
===================== */
/* Mainslide */
#mainVisual {position:relative; }
#mainVisual:after{ position:absolute; bottom:-35px; width:100%; height:60px;}

/* 슬라이드마다 배경 이미지를 각각 지정 (이미지 3개, 텍스트 3개 1:1 매치) */
#mainVisual .main_slide {position:relative; width:100%;}
#mainVisual .swiper-wrapper {height:100%;}
#mainVisual .swiper-slide {position:relative; background-repeat:no-repeat; background-position:0; background-size:cover; filter: brightness(90%);}

/* 배경을 ::before로 분리 → 텍스트는 그대로 두고 이미지만 은은하게 확대(켄번즈 효과) */
#mainVisual .swiper-slide:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transform:scale(1.08); transition:transform 7s ease-out;}
#mainVisual .swiper-slide-active:before {transform:scale(1);}

#mainVisual .swiper-slide.slide01 {background-image:url('/images/new/main/main_img01.jpg');}
#mainVisual .swiper-slide.slide02 {background-image:url('/images/new/main/main_img02.jpg');}
#mainVisual .swiper-slide.slide03 {background-image:url('/images/new/main/main_img03.jpg');}

#mainVisual .main_txt {position:absolute; top:0; z-index:101; text-align:left; width: 90%; max-width: 1200px; margin: 0 auto; left: 0; right: 0; }


/* Pager */
#mainVisual .pager {display:flex; justify-content:center; gap:15px;}
#mainVisual .pager button {opacity:1; position:relative; display:flex; justify-content:center; align-items:center; width:auto; height:auto; border-radius:50%; color:#1c2530; cursor:pointer; background:transparent; transition:.2s;}
#mainVisual .pager button:after {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:5px; height:5px; border-radius:50%; background-color:#1c2530; content:""; transition:all .2s;}
#mainVisual .pager button.on:after {opacity:0;}
#mainVisual .pager .progress {transform:rotate(-90deg);}
#mainVisual .pager .circle-origin {fill:transparent; stroke:rgb(28, 37, 48); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:all .2s;}
#mainVisual .pager button.on .circle-origin {animation:progress 4.5s ease;}

[data-aos^=fade][data-aos^=fade] {opacity: 1;}

@keyframes progress{from{stroke-dashoffset:-38}to{stroke-dashoffset:0}}

/* 모션 최소화 설정 사용자를 위한 배려 */
@media (prefers-reduced-motion: reduce) {
    #mainVisual .swiper-slide:before {transform:none; transition:none;}
    #mainVisual .main_txt p {opacity:1; transform:none; transition:none;}
}

@media (max-width:767px) {
#mainVisual .main_slide {height:400px;}
#mainVisual .swiper-slide {height:400px;}
#mainVisual .main_txt {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#mainVisual .main_txt p {font-size: 30px; color: #1c2530; font-weight: 500; line-height: 1.4; margin-bottom: 15px;}
#mainVisual .main_txt p.ss {font-size: 26px; font-weight: 700;}
#mainVisual .main_txt p.ss:after {content: ""; display: block; width: 20px; height: 2px; background-color: #b98742; margin-top: 10px;}
#mainVisual .main_txt span {font-size: 22px; color: #1c2530;}
}

@media (min-width:768px) and (max-width:1199px) {
#mainVisual .main_slide {height:600px;}
#mainVisual .swiper-slide {height:600px;}
#mainVisual .main_txt {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#mainVisual .main_txt p {font-size: 30px; color: #1c2530; font-weight: 500; line-height: 1.4; margin-bottom: 15px;}
#mainVisual .main_txt p.ss {font-size: 28px; font-weight: 700;}
#mainVisual .main_txt p.ss:after {content: ""; display: block; width: 20px; height: 2px; background-color: #b98742; margin-top: 10px;}
#mainVisual .main_txt span {font-size: 24px; color: #1c2530;}
}

@media (min-width:1200px){
#mainVisual:after {bottom:0px; height:35px;}
#mainVisual .main_slide {height:741px;}
#mainVisual .swiper-slide {height:741px;}
#mainVisual .main_txt {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#mainVisual .main_txt p {font-size: 30px; color: #1c2530; font-weight: 500; line-height: 1.4; margin-bottom: 15px;}
#mainVisual .main_txt p.ss {font-size: 32px; font-weight: 700;}
#mainVisual .main_txt p.ss:after {content: ""; display: block; width: 20px; height: 2px; background-color: #b98742; margin-top: 10px;}
#mainVisual .main_txt span {font-size: 24px; color: #1c2530;}
}

/* =====================
    메인 공통 css
===================== */
.section_inner {width: 90%; margin: 0 auto;}

/* 헤더: 제목 + 더보기 */
.section-head {display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 60px;}
.section-more {position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #1c2530; text-decoration: none; white-space: nowrap;}
.more-ico {width: 26px; height: 26px; border-radius: 50%; background: #1c2530; display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s, transform 0.25s;}
.section-more:hover .more-ico {background: #b98742; transform: translateX(3px);}

@media (max-width:767px) {
section {width: 100%; padding: 80px 0 0 0;}
.section-head {display: block; width: 100%; margin-bottom: 30px;}
.section-title {font-size: 30px; font-weight: 800; letter-spacing: 0.01em; color: #1c2530; margin: 0; text-align: center; margin-bottom: 20px;}
.section-more {position: unset; display: flex; justify-content: center; width: 90px; margin: 0 auto;}
}

@media (min-width:768px) and (max-width:1199px) {
section {width: 100%; padding: 80px 0 0 0;}
.section-title {font-size: 36px; font-weight: 800; letter-spacing: 0.01em; color: #1c2530; margin: 0; text-align: center;}
}

@media (min-width:1200px){
section {width: 100%; padding: 120px 0 0 0;}
.section_inner {width: 1200px; margin: 0 auto;}
.section-title {font-size: 46px; font-weight: 800; letter-spacing: 0.01em; color: #1c2530; margin: 0; text-align: center;}
}

/* =====================
    업무분야
===================== */

.areas {width: 100%;}
.area_con a .ar_img {width: 100%; aspect-ratio: 1 / 1; background: #f1e9d4; border-radius: 50%; margin-bottom: 20px; overflow: hidden;}
.area_con a .ar_img img {width: 100%;}
.area_con a:hover .ar_img {transform: scale(.92); transition: .5s;}
.area_con a:hover p {color: #b98742; transition: .5s;}
.area_con a p {text-align: center; color: #000; font-weight: 700;}

/* ----- 공통 레이아웃 (flex-wrap + 행 간격) ----- */
.area_con {width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.area_con a {display: flex; flex-direction: column; align-items: center;}

@media (max-width:767px) {
.area_con {column-gap: 4%; row-gap: 28px; justify-content: flex-start;}
.area_con a {width: 30.6%;}          /* (100 - 4%*2) / 3 */
.area_con a .ar_img {margin-bottom: 14px; width: 80%;}
.area_con a p {font-size: 15px; line-height: 1.35;}
}

@media (min-width:768px) and (max-width:1199px) {
.area_con {column-gap: 24px; row-gap: 40px; justify-content: flex-start;}
.area_con a {width: calc((100% - 72px) / 4);}   /* 4열, gap 24px × 3 */
.area_con a .ar_img {margin-bottom: 18px; width: 80%;}
.area_con a p {font-size: 19px; line-height: 1.4;}
}

@media (min-width:1200px){
.area_con {justify-content: space-between;}
.area_con a {width: calc((100% - 220px) / 7);}
.area_con a p {font-size: 22px; line-height: 1.4;}

}

/* =====================
    주요사례
===================== */
.cases_box {background: #fff; border-radius: 20px; box-shadow: 2px 3px 32px rgba(0, 0, 0, 0.25);  box-sizing: border-box; transition: transform 0.35s ease;}
.cases_box:hover {transform: translateY(-6px);}
.cases_box ul li {color: #000;}
.cases_box ul li span { font-weight: 400;}
.cases_box ul li:first-child {margin-bottom: 20px;}

@media (max-width:767px) {
.cases_con {display: flex; flex-direction: column;}
.cases_box {width: 100%; margin-bottom: 30px; padding: 30px;}
.cases_box .cate {margin: 0 0 10px 0; background: #b98742; color: #fff; font-size: 16px; font-weight: 500; padding: 2px 0; width: 75px; border-radius: 45px; text-align: center;}
.cases_box ul li:first-child {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; font-weight: 700;}
.cases_box ul li:last-child {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.cases_box .cases_date {width: 100%; font-size: 16px; color: #555; font-weight: 400; display: flex; align-items: flex-start; gap: 8px;}
}

@media (min-width:768px) and (max-width:1199px) {
.cases_con {width: 100%; display: flex; gap: 20px;}
.cases_box {width: calc((100% - 40px) / 3); padding: 30px;}
.cases_box .cate {margin: 0 0 10px 0; background: #b98742; color: #fff; font-size: 16px; font-weight: 500; padding: 2px 0; width: 75px; border-radius: 45px; text-align: center;}
.cases_box ul li:first-child {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; font-weight: 700;}
.cases_box ul li:last-child {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.cases_box .cases_date {width: 100%; font-size: 16px; color: #555; font-weight: 400; display: flex; align-items: flex-start; gap: 8px;}
}

@media (min-width:1200px){
.cases_con {width: 100%; display: flex; gap: 30px;}
.cases_box {width: calc((100% - 60px) / 3); padding: 30px;}
.cases_box .cate {margin: 0 0 10px 0; background: #b98742; color: #fff; font-size: 18px; font-weight: 500; padding: 2px 0; width: 78px; border-radius: 45px; text-align: center;}
.cases_box ul li:first-child {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; font-weight: 700;}
.cases_box ul li:last-child {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.cases_box .cases_date {width: 100%; font-size: 16px; color: #555; font-weight: 400; display: flex; align-items: flex-start; gap: 8px;}
}

/* =====================
    구성원
===================== */
.partners-swiper {overflow: hidden; padding: 10px 0 0 0 !important;}
.partner-card {text-align: center;}
.partner-photo {width: 95%; aspect-ratio: 1 / 1; border-radius: 50%; background: #2c3a48; overflow: hidden; margin-bottom: 26px; transition: transform 0.35s ease, box-shadow 0.35s ease;}
.partner-photo img {position: relative; height: 100%; object-fit: cover; display: block; transform: translateX(-50%); left: 50%;}
.partner-card:hover .partner-photo {transform: translateY(-6px); box-shadow: 0 18px 36px rgba(28,37,48,0.22);}
.partner-name {font-size: 26px; font-weight: 700; color: #000; margin: 0 0 8px;}
.partner-role {font-size: 18px; font-weight: 500; color: #000; margin: 0;}

@media (max-width: 767px) {
.partner-photo {width: 80%; margin: 0 auto; margin-bottom: 25px;}
.partner-name {font-size: 20px;}
.partner-role {font-size: 16px;}
}

@media (min-width: 768px) and (max-width: 1199px) {
.partner-name {font-size: 23px;}
.partner-role {font-size: 16px;}
}

@media (min-width: 1200px) {
}

/* =====================
    푸터
===================== */
.dec_sol {position:relative; display:block; word-break: keep-all; margin-top: 5px; left: 30px;}
.dec_sol .dot {position:absolute; left:-30px;}

.footer_box h2 {color: #c99c58; font-size: 22px; font-weight: 800; margin-bottom: 25px;}
.footer_box li b {font-weight: 800; font-size: 20px;}
.footer_box .dl {width: 80%; background: #fff; border-radius: 45px; display: flex; justify-content: space-between; padding: 10px 20px; box-sizing: border-box; margin-bottom: 10px;}
.footer_box .dl p {color: #1e3454; font-size: 15px; font-weight: 700;}
.footer_box .dl:hover {background: #c99c58; transition: 0.4s;}
.footer_box .dl:hover p {color: #fff; transition: 0.4s;}

.footer_box .fl {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.footer_box .fl li {width: calc(100% / 2); margin-bottom: 5px;}
.footer_box .fl li a {color: #fff; font-size: 15px;}
.footer_box .fl li a:hover {color: #c99c58; transition: 0.4s;}

@media (max-width:767px) {
.footer_wrap {background: #374353; margin-top: 80px; padding: 40px 0;}
.footer_con {display: block; width: 100%;}
.footer_box {width: 100%; color: #fff; font-size: 15px; line-height: 1.5; word-break: keep-all; margin-bottom: 60px;}
.footer_box:last-child {margin-bottom: 0;}
.footer_box .fl li {width: calc(100% / 3); margin-bottom: 5px;}
.footer_box li br {display: none;}
}

@media (min-width:768px) and (max-width:1199px) {
.footer_wrap {background: #374353; margin-top: 80px; padding: 60px 0;}
.footer_con {display: flex; justify-content: space-between; flex-wrap: wrap;}
.footer_box {width: calc((100% - 60px) / 2); color: #fff; font-size: 15px; line-height: 1.5; word-break: keep-all;}
.footer_box:nth-child(1), .footer_box:nth-child(2) {margin-bottom: 60px;}
.footer_box li br {display: none;}
}

@media (min-width:1200px){
.footer_wrap {background: #374353; margin-top: 120px; padding: 80px 0;}
.footer_con {display: flex; justify-content: space-between; gap: 20px;}
.footer_box {width: calc((100% - 60px) / 4); color: #fff; font-size: 15px; line-height: 1.5; word-break: keep-all;}
}