@charset "utf-8";
@import 'font.css';


/*서비스페이지*/
.serV-wrap { position: relative;min-height: 950px;}
.serV { position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.serV-form { position: absolute;left: 50%;top: 88%;margin-left: -80px; background: #fff;border-radius: 30px;font-size: 16px;color: #39D66D;font-weight: 600;width: auto;height: 45px;line-height: 45px;text-align: center;transition: transform 0.3s ease, background 0.3s ease;padding: 0 25px;}
.serV-form a { color: #39D66D;width: 100%;height: 100%;display: inline-block;}
.serV-form:hover { background: #111;transform: translateY(-8px);box-shadow: 0px 0px 30px rgba(0,255,84,0.4);}
.serV img { width: 100%;height: 100%;}
.khwrap.container { padding: 100px 0;}


.serOur { background: #111;clear: both;min-height: 950px;}
.serOur-body { position: relative;clear: both;}
.sercard-wrap { display: flex; gap: 20px; justify-content: center; padding: 70px 12%;}
.sercard { position: relative; flex: 1; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; cursor: pointer;}
.sercard img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease;}
.sercard-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); transition: background 0.4s ease;}
.sercard-top { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 28px; z-index: 2;}
.sercard-top span.num { font-size: 18px;width: 48px;height: 48px;line-height: 48px;border-radius: 100%;background: rgba(255,255,255,0.25);text-align: center;}
.sercard-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 20px; color: #fff; z-index: 2; transform: translateY(100%); transition: transform 0.4s ease;}
.sercard-bottom h3 { font-size: 20px; font-weight: 700; margin: 0 0 15px 0; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.3);}
.sercard-bottom p { opacity: 1; margin: 6px 0 0 0; line-height: 1.6;}
.sercard:hover .sercard-overlay { background: linear-gradient(  to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100% );}
.sercard:hover img { filter: blur(12px);}
.sercard:hover .sercard-bottom { transform: translateY(0); }

/*serList-wrap*/
.serList-wrap { clear: both;position: relative;}
.serList-wrap.secPlace { padding: 0;}
.serList-wrap .tac { position: absolute; left: 50%; top: 100px; width: 100%; transform: translate(-50%, 0%);z-index: 100;}

.serListr-body { position: relative;}
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back1,
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back2,
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back3,
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back4,
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back5 {padding-top: 300px;padding-bottom: 150px; }

.serBig-swiper .swiper-wrapper .swiper-slide.serList-back1 { background: #111 url(../../../../img/serList-back.png);min-height: 950px;background-size: cover;}
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back2 { background: #111 url(../../../../img/serList-back2.png);min-height: 950px;background-size: cover;}
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back3 { background: #111 url(../../../../img/serList-back3.png);min-height: 950px;background-size: cover;}
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back4 { background: #111 url(../../../../img/serList-back4.png);min-height: 950px;background-size: cover;}
.serBig-swiper .swiper-wrapper .swiper-slide.serList-back5 { background: #111 url(../../../../img/serList-back5.png);min-height: 950px;background-size: cover;}

/* 큰 Swiper */
.serBig-swiper { position: relative; width: 100%;min-height: 950px;background-size: cover;}
.serBig-swiper > .swiper-wrapper > .swiper-slide { width: 100%; }

/* 섹션 상단 */
.serList-top {display: flex; justify-content: space-between; align-items: flex-start; padding: 60px 12% 15px;}
.serList-ttl { font-size: 34px; font-weight: 700; color: #fff;}
.serList-ttl span { display: block; color: rgba(255,255,255,0.6); margin-top: 5px;font-size: 16px; font-weight: 400; }

/* 카테고리 태그 */
.serList-category { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 10px;background: rgba(57,214,109,0.25);height: 40px;border-radius: 10px;}
.serList-category span { border-right: 1px solid rgba(57,214,109,1); color: #fff; padding: 3px 12px;font-size: 16px;}
.serList-category span:last-child { border-right: none;}
/* 전체보기 + nav */
.serList-slide-top { display: flex; justify-content: space-between; align-items: center; padding: 0 12%;}
.serList-more { display: inline-block; color: #111; padding: 8px 20px; border-radius: 30px;background: #fff;}
.serList-more:hover { background: rgba(57,214,109,1);}

/* nav 버튼 */
.serList-nav { display: flex; gap: 10px;}
.serList-nav .swiper-button-prev { position: static; width: 44px; height: 44px; border-radius: 50%; background:url(../../../../img/seL-left-arrow.png) center no-repeat rgba(255,255,255,0.3) !important; margin: 0; flex-shrink: 0;}
.serList-nav .swiper-button-next { position: static; width: 44px; height: 44px; border-radius: 50%; background:url(../../../../img/seL-right-arrow.png) center no-repeat rgba(255,255,255,0.3) !important; margin: 0; flex-shrink: 0;}

.serList-nav .swiper-button-prev::after,
.serList-nav .swiper-button-next::after { font-size: 14px; color: #fff;}

/* 작은 Swiper */
.serList-swiper { overflow: hidden; padding:30px 0 0 0;}
.serList-swiper .swiper-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block;}
.serList-swiper .swiper-slide p { color: #fff; font-size: 24px; margin-top: 10px;}


/*The Difference*/
.mDiffer-wrap { background: url(../../../../img/mdiff-back.png) center no-repeat;width: 100%; min-height: 950px;padding-top: 100px;}
.mDiffer-wrap .container { position: relative;}
.mDiffer-title { color: #1A2636;font-size: 40px;font-weight: 800;line-height: 150%;padding: 30px 0;}
.mDiffer-title span { color: #39D66D;font-size: 40px;font-weight: 800;}
.option-wrap { padding: 30px 30px 0;}
.mDiffer-box:hover { background: #39D66D;cursor: pointer;transition: all 0.1s ease-in;}
.mDiffer-box:hover .mb-ttl,
.mDiffer-box:hover .mb-ttl span,
.mDiffer-box:hover .mb-txt { color: #fff;transition: all 0.2s ease-in;}
.mDiffer-conts { display: flex;height: 500px;clear: both; position: relative;}
.mDiffer-box { background: rgba(255,255,255,1);outline: 3px dashed #666; outline-offset: 0px;box-shadow: 0 0 10px 5px rgba(0,0,0,0.1);}
.mDiffer-box.active { border: 2px dashed #39D66D; /* 클릭 시 경계 색상 변경 */}
.mb-ttl { font-size: 24px;color: #111;font-weight: 300;margin-top: 10px;}
.mb-ttl span { color: #111;font-size: 24px;font-weight: 700;}
.mb-txt { font-size: 20px; line-height: 120%;padding: 10px 0;color: #666;}
.mDiffer-posi1,
.mDiffer-posi2,
.mDiffer-posi3,
.mDiffer-posi4 { width: 410px;height: 185px;}

.mDiffer-posi1 { position: absolute;left: 0;top: 45%;}
.mDiffer-posi1::before { content: ''; position: absolute;right: 0;top: 0;width: 60px;height: 60px;background: #39D66D url(../../../../img/mdiff-ic1.png) center no-repeat;background-size: cover;background-size: 35px 35px;}
.mDiffer-posi2 { position: absolute;left: 22%;top: 10%;z-index: 100;}
.mDiffer-posi2::before { content: ''; position: absolute;right: 0;top: 0;width: 60px;height: 60px;background: #39D66D url(../../../../img/mdiff-ic2.png) center no-repeat;background-size: cover;background-size: 35px 35px;}
.mDiffer-posi3 { position: absolute;left: 42%;top: 54%;}
.mDiffer-posi3::before { content: ''; position: absolute;right: 0;top: 0;width: 60px;height: 60px;background: #39D66D url(../../../../img/mdiff-ic3.png) center no-repeat;background-size: cover;background-size: 35px 35px;}
.mDiffer-posi4 { position: absolute;left: 73%;top: 65%;}
.mDiffer-posi4::before { content: ''; position: absolute;right: 0;top: 0;width: 60px;height: 60px;background: #39D66D url(../../../../img/mdiff-ic4.png) center no-repeat;background-size: cover;background-size: 35px 35px;}


/*serTools-wrap*/
.serTools-wrap { position: relative;background: #111;padding: 150px 0;}
.serTools-wrap .mcontent-txt p { color: #fff;letter-spacing: 0;}
.serTools-top { display: flex;}
.serTools-top .left { width: 60%;}
.serTools-top .right-box { background:#D9D9D9;border-radius: 20px;flex-shrink: 0;padding-left: 30px;width: 40%;min-height: 360px;}
.serTools-conts { clear: both;background: #F5F5F5;border-radius: 20px;margin-top: 60px;height: 100px;display: flex; align-items: center; justify-content: space-around;}
.serTools-conts span { display: inline-block;}

/*subSer-wrap*/
.subSer-wrap {background: #111;}
.subSer-wrap .trust-slider-wrap::before { content: ''; position: absolute; left: 0;top: 0; width: 45%; height: 100%; background: linear-gradient(to right, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.0)); z-index: 1000;}
.subSer-wrap .trust-slider-wrap::after { content: '';position: absolute;right: 0;top: 0; width: 45%;height: 100%;background:linear-gradient(to right, rgba(17,17,17,0.0), rgba(17,17,17,1));z-index: 1000;}

/*serProven-wrap*/
.serProven-wrap { background: #000;clear: both;padding-top: 150px;padding-bottom: 150px;}
.serProven-body { margin-top: 100px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 60px 0; background: #111; border-radius: 20px; color: #fff;    text-align: center;}
.serProven-body > div { flex: 1; position: relative;text-align: left;padding-left: 60px;}
.serProven-body > div:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 140px; background: linear-gradient(to bottom, transparent, #39D66D, transparent);}
.serProven-body div p:first-child { font-size: 24px; color: #eee; margin-bottom: 15px; font-weight: 400;}
.serProven-body div p:last-child { font-size: 60px; font-weight: 800; color: #39D66D; margin: 0; display: flex; align-items: baseline; justify-content: flex-start; gap: 8px;}
.serProven-body div p:last-child span { font-size: 28px; color: #999; font-weight: 500;}







@media (max-width: 768px) {
    .serProven-body {
        flex-direction: column;
        gap: 40px;
    }
    .serProven-body > div::before {
        display: none; /* 모바일에서는 구분선 숨김 */
    }
}