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

.product02-wrap { clear: both;background: #F5F5F5;}
.product02-proven .BGBlack { background: #F5F5F5 !important;}
.product02-proven .BGBlack .trust-slider-wrap::before 
{ content: '';position: absolute;left: 0;top: 0; width: 40%;height: 100%;background:linear-gradient(to right, rgba(245,245,245,1), rgba(245,245,245,0.0));z-index: 1000;}
.product02-proven .BGBlack .trust-slider-wrap::after 
{ content: '';position: absolute;right: 0;top: 0; width: 40%;height: 100%;background:linear-gradient(to right, rgba(245,245,245,0.0), rgba(245,245,245,1));z-index: 1000;}
.product02-proven .whitetxt,
.product02-proven .whitetxt span.lightgraytxt,
.product02-proven .whitetxt span.blacktxt { color: #111 !important;}


/* 탭 메뉴 스타일 */
.proType-tab { display: flex; gap: 20px; justify-content: center; justify-content: space-between;margin:100px 0 50px;}
.proType-btn { display: flex; flex-direction: column;flex: 1; padding: 30px 20px; background: #fff; border-radius: 20px; cursor: pointer; border: 2px solid #D9D9D9; transition: all 0.3s ease; text-align: left;}
.proType-btn.active { background: #000; color: #fff; box-shadow: 0 0px 20px rgba(57,214,109,0.5);transform: translateY(-20px);border: 4px solid #39D66D;}
.proType-btn dl dt { font-size: 28px; font-weight: 700; margin-bottom: 10px;}
.proType-btn dl dd { font-size: 16px; margin: 5px 0;font-weight: 800;}
.proType-btn dl dd > ul { margin-top: 15px;}
.proType-btn dl dd > ul > li { position: relative;padding-left: 15px;font-weight: 300;line-height: 130%;}
.proType-btn dl dd > ul > li::before { content: 'ㆍ'; position: absolute;left: 0;top: 0;}
.proType-price { float: right;text-align: right;margin-top: auto;}
.proType-price .vat { font-weight: 300;}
.proType-price .won { font-size: 26px; font-weight: 800; color: #666;font-family: 'Paperlogy';margin-top: 5px;}
.proType-btn.active .won { color: #2ecc71;}
.proType-conts { display: none; gap: 20px;}
/* 내용 표시용 클래스 */
.proType-conts.active { display: flex;}
.proType-left { flex: 3.5; position: relative; }
.proType-right { flex: 6.5; text-align: left; background: #fff; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.proType-key { }
.proType-key span { position: absolute; top: -15px; left: -10px;background: #111; color: #39D66D; padding: 10px 22px; border-radius: 7px; font-size: 20px; font-weight: 700; border: 0px solid #39D66D; letter-spacing: 0.5px; transform: rotate(-2deg); box-shadow: inset 0 0 0 4px #111, inset 0 0 0 6px #39D66D;display: inline-block;}
.proType-img img { width: 100%; border-radius: 20px; }
/* 구성품 리스트 - 자동으로 flex wrap */
.proTypeR-conts { padding: 0 35px;}
.proTypeR-conts ul { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px;}
.proTypeR-conts > ul > li { flex: 1 1 0; min-width: 160px; background: #F5F5F5; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;border: 1px solid #DEDEDE;}
.proType-theme { font-size: 24px;font-weight: 700;}
/* li가 4개일 때 자동으로 4칸 */
.proTypeR-conts ul li:first-child:nth-last-child(4),
.proTypeR-conts ul li:first-child:nth-last-child(4) ~ li { flex: 1 1 calc(25% - 15px);}
/* li가 2개일 때 */
.proTypeR-conts ul li:first-child:nth-last-child(2),
.proTypeR-conts ul li:first-child:nth-last-child(2) ~ li { flex: 1 1 calc(50% - 15px);}
/* 우측 상단 구성품 제목 바 */
.proTypeR-top { display: flex; justify-content: space-between; align-items: center; background: #2ecc71; color: #fff; padding: 15px 35px;min-height: 70px; border-radius: 20px 20px 0 0;    margin-bottom: 30px;}
.proTypeVAT-price span:nth-of-type(2) { font-size: 40px; font-weight: 800; color: #111;font-family: 'Paperlogy';}
/* 하단 버튼 스타일 */
.proTypeR-targetbtn { display: flex; gap: 10px; margin-top: 30px;}
.proTypeR-targetbtn a { flex: 1; padding: 15px; border-radius: 10px;text-align: center; text-decoration: none; font-weight: 700;min-width: 200px;font-size: 20px;}
.proTypeR-targetbtn a:first-child { background: #ddd; color: #666; }
.proTypeR-targetbtn a:last-child { background: #2ecc71; color: #fff; }
/* 구성품 제목 */
.proTypeR-conts ul li dl dt { font-weight: 700; margin-bottom: 5px; color: #111;}
/* bullet 리스트 */
.proTypeR-conts ul li dl dd ul { display: flex; flex-direction: column; gap: 6px; padding: 0;}
.proTypeR-conts ul li dl dd ul li { flex: none; min-width: auto; background: none; border-radius: 0; padding: 0; font-size: 16px; color: #666;position: relative;padding-left: 15px;}
.proTypeR-conts ul li dl dd ul li::before { content: '·'; color: #111; font-weight: bold;position: absolute;left: 5px;top: 0;}
/* 가격 */
.proTypeR-price {display: flex; align-items: center; justify-content: flex-end; }
.proTypeR-price .vat { font-size: 16px; color: #999;margin-right: 5px;}
.proTypeR-price .won { font-size: 16px; font-weight: 800; color: #39D66D; margin: 3px 0 0;font-family: 'Paperlogy'; text-align: right;}
.proTypeR-price .won span { font-size: 15px; font-weight: 500;margin-left: 5px;letter-spacing: 0;}
/* TARGET 영역 */
.target-title { font-size: 16px;font-family: 'Paperlogy';color: #111;text-transform: uppercase;font-weight: 800;padding-bottom: 10px;}
.proTypeR-target { display: flex; border-top: 1px solid #eee; justify-content: space-between; align-items: flex-end;margin: 30px 35px 0;padding-top: 30px;}
.proTypeR-target ul { }
.proTypeR-target ul li { font-size: 16px; color: #666;line-height: 130%;position: relative;padding-left: 15px;}
.proTypeR-target ul li::before { content: '·'; color: #111; font-weight: bold;position: absolute;left: 5px;top: 0;}





/*메인슬라이드 애니*/
.compV .swiper-slide:not(.swiper-slide-active) [data-aos]:not(.aos-animate) { opacity: 0 !important; transform: translate3d(0,100px,0) !important; }
.compV .swiper-slide.swiper-slide-active [data-aos].aos-animate { opacity: 1 !important; transform: translateZ(0) !important; }
.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);}

/*서브상단비주얼*/
.compVT-wrap { position: absolute;left: 13%;top: 50%; transform: translate( 0, -50%); }
.compVT-wrap h3 { font-size: 65px;color: #fff;text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-h3 { font-size: 20px;color: rgba(255,255,255,0.6);text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-wrap .subVT-title { font-size: 60px;color: #fff;padding-top: 50px;}
.compVT-wrap .subVT-title span { display: block;}
.subVT-txt { font-size: 20px;color: rgba(255,255,255,0.8);margin-top: 10px;}

/* about */
.about-dot { text-align: center; position: relative;}
.about-dotline { width: 2px;height: 80px;;background:linear-gradient(rgba(57,214,109,1), rgba(57,214,109,0.0));margin: 0 auto;}
.adot-main { font-size: 24px; color: #39D66D;font-weight: 700;padding-top: 10px;padding-bottom: 30px;font-family: 'Paperlogy';/*text-transform: uppercase;*/}
.adot-sub { font-size: 60px; color: #fff;font-weight: 700;}
.adot-sub span.light { font-weight: 300;}
.adot-txt { font-size: 20px;color: #F5F5F5;padding-top: 10px;}
.adot-txt p { font-weight: 200;line-height: 150%;}

/*타이틀*/
.comp-txt { font-size: 50px;font-weight: 700;color: #111;}
.comp-txt span { font-weight: 300;}


.proSystem-wrap {  position: relative; padding: 100px 0; clear: both; background: linear-gradient(to bottom, #000000, #00270D); }
.proSystem-top { display: flex; justify-content: space-between; margin: 80px 0;}
.proSystem-top .left { position: relative; width: 37%; }
.proSystem-top .left::before { content: ''; position: absolute;left: -40px;top: 7px;background: url('../../../../img/proSystem-ic1.png') right bottom no-repeat;width: 69px;height: 69px;z-index: 100;}
.proSystem-top .left::after { content: ''; position: absolute;right: 90px;bottom: 20px;background: url('../../../../img/proSystem-ic2.png') right bottom no-repeat;width: 69px;height: 69px;z-index: 100;}
.proSystem-top .left p { position: absolute; width: 100%;  }
.proSystem-top .left p span {  display: flex; align-items: center; justify-content: center; width: 380px; height: 72px; border-radius: 40px; font-weight: 600; font-size: 24px;}
/* 중앙 화살표 라인 */
.proSystem-top .center { flex: 1; display: flex; justify-content: center; align-items: center; margin-right: 7%;}
.proSystem-top .center .line { width: 160px; height: 2px; background: linear-gradient(to left, rgba(255,255,255,0.8), rgba(255,255,255,0.0));position: relative; }
.proSystem-top .center .line::after { content: ''; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; background: #fff; border-radius: 50%;}

.proSystem-top .left .item-1 { top: 0; left: 0; z-index: 3; transform: rotate(3deg);}
.proSystem-top .left .item-1 span { background: #39D66D; color: #000; }
.proSystem-top .left .item-2 { top: 70px; left: 0px; z-index: 222; transform: rotate(-3deg);}
.proSystem-top .left .item-2 span { background: #fff; color: #000; }
.proSystem-top .left .item-3 { top: 145px; left: 0px; z-index: 1; transform: rotate(1deg);}
.proSystem-top .left .item-3 span { background: rgba(17,17,17,0); border: 1px solid rgba(255,255,255,0.4); color: #39D66D; }

/* 오른쪽 메시지 박스 */
.proSystem-top .right { width: 46%; height: 230px; background: #fff url('../../../../img/proSystem-img1.png') right bottom no-repeat; border-radius: 40px; display: flex; align-items: center; padding-left: 50px;}
.proSystem-top .right .msg-box { color: #333; line-height: 1.5; font-size: 24px; }
.proSystem-top .right .msg-box strong { color: #000; font-weight: 800; }

/* 하단 텍스트 */
.proSystem-bottom { padding-top: 60px; }
.proSystem-bottom .tac { position: relative;z-index: 100; font-size: 40px; font-weight: 600; word-break: keep-all; letter-spacing: -1px;color: rgba(255,255,255,0.8);}

/*proProduct-wrap*/
.proProduct-wrap { clear: both; background: url(../../../../img/proSystem-arrow.png) center top no-repeat;padding-top: 300px;}
.proProduct-wrap .adot-sub { padding-top: 20px;} 
.proProduct-wrap .about-dot { position: sticky; top: 0;  z-index: 100; padding-top:100px; margin-bottom: 50px; text-align: center;}
/*slide stack*/
.stack-section { position: relative;margin: 0px 0 0 0;}
.card-block { position: sticky; top: 40vh; margin-bottom: 0;}
.card-scroll-space {height: 100vh; }
.card { border-radius: 28px; padding: 56px 120px; display: grid; gap: 40px; align-items: center; min-height: 460px; position: relative; overflow: hidden;
  box-shadow: 0 0px 20px rgba(0,0,0,0.2); transform: translateY(60px); opacity: 0; transition: transform 0.75s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease;}
.card.in-view { transform: translateY(0); opacity: 1;}

/*slide stack 배경색 */
.card-block:nth-child(1) .card { background: url(../../../../img/stack-slide1.png) center top no-repeat; }
.card-block:nth-child(2) .card { background: url(../../../../img/stack-slide2.png) center top no-repeat; }
.card-block:nth-child(3) .card { background: url(../../../../img/stack-slide3.png) center top no-repeat; }
.card-block:nth-child(4) .card { background: url(../../../../img/stack-slide4.png) center top no-repeat; }

/* slide stack 하이라이트 */
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 25%, rgba(200,160,255,0.18) 0%, transparent 55%); pointer-events: none;
  border-radius: 28px;}
.card-text { z-index: 1; }
.badge { width: 48px; height: 48px; border-radius: 50%; background: rgba(17,17,17,0.95); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;  margin-bottom: 22px;float: left; color: #39D66D;font-family: 'Paperlogy';margin-right: 10px;}
.card-text h3 { font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 18px;color: #111;}
.card-text p { clear: both; line-height: 150%;}
.card-text p:nth-of-type(1) { font-size: 20px;color: #111;font-weight: 600;}
.card-text p:nth-of-type(2) { font-size: 20px;color: rgba(17,17,17,0.75);font-weight: 400;}
.card-text p a { border-radius: 30px;background: #111;color: #fff;height: 43px;line-height: 43px;padding: 0 20px;font-size: 16px;display: inline-block;}
.card-text p a:hover { background: #39D66D;color: #111;}
.card-visual { z-index: 1; position: relative; height: 120px; display: flex; align-items: center; justify-content: space-around;background: rgba(57,214,109,0.95);border-radius: 20px;}
.card-box { position: relative;}
.card-box::after { content: '';left: 100%;top: 0; width: 1px;height: 100%;background: #111;position: absolute;margin-left: 24%;}
.card-box:last-child:after { content: '';background: none;}
.card-box span { display: block;}
.card-box span:first-child { font-size: 20px;font-weight: 900;color: rgba(17,17,17,0.5);}
.card-box span:last-child { font-size: 28px;font-weight: 700;color: rgba(17,17,17,1);}


/* The Difference*/
.proDiffer-wrap { background: url(../../../../img/proDiffer-back.png) center top no-repeat; padding: 100px 0;  color: #fff; overflow: hidden;}
.proDiffer-wrap .about-dot { text-align: left;}
.proDiffer-box { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-top: 100px; position: relative;}
.diff-item { flex: 0 0 31%; background: #000; border-top: 1px solid rgba(78,78,78,0.9);border-right: 1px solid rgba(78,78,78,0.5);border-left: 1px solid rgba(78,78,78,0.5); border-radius: 15px; padding: 20px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);    position: relative;  z-index: 2;text-align: center;}
.diff-item:nth-child(1) { margin-top: 0; }      /* 첫 번째: 가장 높음 */
.diff-item:nth-child(2) { margin-top: 60px; }     /* 두 번째: 중간 */
.diff-item:nth-child(3) { margin-top: 120px; }    /* 세 번째: 가장 낮음 */
.diff-item:hover { background: #39D66D; transform: translateY(-15px); border-color: #39D66D; box-shadow: 0 20px 40px rgba(57,214,109,0.1);}
.diff-item:hover .txt { color: #000; font-weight: 700;}
.diff-item .txt { display: inline-block; padding-top: 30px; padding-bottom: 10px; font-size: 24px;line-height: 130%;}
.proDiffer-wrap .adot-sub b { font-weight: 600;}

/*proContact-Wrap*/
.proContact-Wrap {background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,39,13,1));position: relative;min-height: 900px;}
.proContact-Wrap .about-dot { text-align: left; }
.proContact-body { display: flex;margin-top: 50px;}
.proCont-left { flex: 1.5;padding-top: 20px;}
.proCont-left b { font-weight: 600;}
.proCont-left .txt { font-size: 20px;color: #F5F5F5;padding: 25px 0 0 0;font-weight: 300;}
.proContact-body .media { background: #fff;border-radius: 20px; width: 80%;flex: 1;}
.proContact-body .media span { display: flex;align-items: center;justify-content: center;min-height: 360px;width:100%;font-size: 24px;}
.proContact-case { text-align: left; width: 100%;margin-top: 40px;}
.proContact-case .main-title { color: #fff;  font-size: 32px; font-weight: 700; margin-bottom: 30px;}
.button-container { display: flex; gap: 15px;}
.proContact-case .btn { flex: 1; display: flex; align-items: center; padding: 50px 35px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius:20px; color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 18px; transition: all 0.3s ease; position: relative;height: 100px;}
.proContact-case .btn:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.9); color: #fff;}
.proContact-case .icon { margin-right: 10px; font-size: 18px;}
.proContact-case .arrow { margin-left: auto; font-size: 20px; font-weight: 300;}




/* 반응형 처리 */
@media (max-width: 1024px) {
    
    
}




@media (max-width: 768px) {

  .proDiffer-box {
        flex-direction: column;
        align-items: center; /* 모바일에서는 중앙 정렬 */
    }
    .diff-item {
        flex: 0 0 100%;
        margin-bottom: 30px;
        /* 모바일에서는 계단 스타일을 초기화합니다. */
        margin-top: 0 !important; 
    }
    
    .compMember-container { display: grid; grid-template-columns: repeat(2, 1fr); }

}