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


/*서비스페이지*/
.serV-wrap { position: relative; }
.serV {position: relative; width: 100%;min-height: 950px;background: url(/theme/uriwon/img/serV-img.png) center top no-repeat;background-size: cover; }
.serV img { 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);}
.khwrap.container { padding: 100px 0;}
.subVT-h3 { font-size: 20px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; font-family: 'Paperlogy';}

.serOur { background: #111;clear: both;min-height: 950px;}
.serOur-body { position: relative;clear: both;}
.sercard-wrap { display: flex; gap: 20px; justify-content: center; padding: 50px 12% 90px;}
.sercard { position: relative; flex: 1; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; cursor: pointer;isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black);}
.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: 45px 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;width: 40%;max-height: 360px;overflow: hidden;}
.right-box p video { width: 100%;height: 100%;}
.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: 100;}
.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: 100;}

/*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 Query*/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width: 1400px) {
    .service .container { padding: 0 10px;}
    .serV { width: 100%;min-height: 750px;}
    .serVT-wrap .serVT-title { font-size: 32px;padding-top: 50px;}
}


@media (max-width: 1024px) {
    .serV { width: 100%;min-height: 550px;}
    .subVT-wrap { width: 40%;}
    .subVT-wrap h3 { font-size: 45px;}
    .subVT-wrap .subVT-title { font-size: 24px;padding-top: 50px;}
    .subVT-txt { line-height: 120%;padding-top: 5px;font-size: 16px;}
    .serVT-wrap { left: 50px;}

    .serOur { min-height: auto;}

    .serList-swiper .swiper-slide p { font-size: 20px;}

    .serTools-conts {overflow: hidden; justify-content: flex-start; gap: 0; }
    .serTools-conts span { animation: toolsScroll 8s linear infinite; white-space: nowrap; flex-shrink: 0;padding: 0 15px; }

    @keyframes toolsScroll {
        0%   { transform: translateX(0vw); }
        100% { transform: translateX(-100%); }
    }

}

@media (max-width: 768px) {
    .serV { background: url(/theme/uriwon/img/serV-img.png) -170px top no-repeat;background-size: cover; }
    .serVT-txt {margin-top: 0; padding-top: 10px;}
    .serVT-h3 { font-size: 16px;}

    .sercard-wrap { display: flex; gap: 5px; justify-content: center; padding: 40px 0 70px;}
    .sercard,
    .sercard:focus {border-radius: 10px;overflow: hidden;}
    .sercard-top { font-size: 24px;top: 12px;}

    .serList-top { display: block;padding: 0 30px 30px;}
    .serList-slide-top { padding: 0 30px;}
    .serList-swiper .swiper-slide p { font-size: 18px;}
    .serList-ttl span { font-size: 14px;}
    .serList-ttl { font-size: 26px;}
    .mDiffer-wrap .mcontent-subject.greentxt, .mDiffer-wrap .mcontent-subject span.greentxt { margin-left: 0;}
    .mb-txt { font-size: 18px;}
    .mDiffer-posi1,
    .mDiffer-posi2,
    .mDiffer-posi3,
    .mDiffer-posi4 { width: 100%;height: 185px;position: relative;left: 0;top: auto; margin-bottom: 20px;}
    .mDiffer-conts { display: block;padding-top: 20px;height: auto;padding-bottom: 35px;}
    .mb-ttl,
    .mb-ttl span { font-size: 20px;font-weight: 700;}    
    .mb-txt,
    .mb-txt span { font-size: 18px;}
    .serTools-conts { text-align: center;}
    .serTools-conts span img { width: 100%;}
    .serProven-body { flex-direction: column; gap: 40px; padding: 30px 0 10px;margin-top: 50px;}
    .serProven-body > div::before { display: none; }
    .serProven-body > div {padding-left: 0px;position: relative;width: 100%;text-align: center;display: flex; align-items: center; justify-content: center;padding-bottom: 30px;}
    .serProven-body > div::after { content: '';position: absolute;width: 90%;height: 1px;background: rgba(0,255,84,0.2);left: 5%;bottom: 0;}
    .serProven-body > div:last-child:after { background: none;}
    .serProven-body div p:first-child {margin-bottom: 0px; margin-right: 10px;}
    .serProven-body div p:last-child { font-size: 40px;}
    .mDiffer-posi1::before,
    .mDiffer-posi2::before,
    .mDiffer-posi3::before,
    .mDiffer-posi4::before {width: 50px; height: 50px;background-size: 25px 25px;border-radius: 0 0 0 10px;}
    .mDiffer-posi1, .mDiffer-posi2, .mDiffer-posi3, .mDiffer-posi4 {height: auto;padding-bottom:20px;border-radius: 12px;margin-bottom: 10px;}
    .option-wrap {padding: 20px 20px 0;}

    .subVT-wrap { left: 50%;width: 48%;}
    
}

@media (max-width: 480px) {
    .subVT-wrap { left: 10px;width: 70%;}
    .subVT-wrap h3 {font-size: 36px;}
    .subVT-h3 { font-size: 14px;}
    .subVT-wrap .subVT-title {font-size: 20px; padding-top: 20px;}
    .serV { background: url(/theme/uriwon/img/serV-img.png) left top no-repeat;background-size: cover; }
    .subVT-txt { font-size: 14px; padding-top: 0;}

    .serOur .mcontent-title p { font-size: 20px; }
    .sercard-wrap { display: block;}
    .sercard { margin-bottom: 10px;aspect-ratio: 2.2 / 1;}
    .serList-ttl { font-size: 22px;}
    .serTools-top { display: block;}
    .serTools-top .left,
    .serTools-top .right-box { width: 100%;}
    .serTools-top .right-box { margin-top: 20px;}
    .serTools-wrap .mcontent-subject.greentxt, .serTools-wrap .mcontent-subject span.greentxt { margin-left: 0;}

    .sercard-top span.num {width: 32px; height: 32px; line-height: 32px;}
    .sercard-bottom p br { display: none;}
    .sercard-bottom h3 {margin: 0 0 10px 0;padding-bottom: 5px;font-weight: 400;}
    .mDiffer-box { outline: 2px dashed #666;}
    .serTools-conts {margin-top: 20px;}

    .serProven-body { text-align: center;}
    .serProven-body > div { display: block;}
    .serProven-body div p:last-child {justify-content: center;}
    .serProven-body div p:last-child { font-size: 30px;}

    .serList-swiper .swiper-slide p {font-size: 14px; text-align: center;padding: 0 5px;}
    .serList-top,
    .serList-slide-top { padding: 0 15px 30px}
    .serList-category { justify-content: center;}
    .serList-category span { font-size: 14px;padding: 5px 10px 5px 5px;}

}

@media (max-width: 360px) {    
    .subVT-wrap h3 {font-size: 30px;}
    .subVT-h3 {font-size: 12px;}
    .subVT-txt {font-size: 14px; width: 85%;}

}