@charset "utf-8";

.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 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 70px;height: 300px;}
.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.active .proType-price .won { color: #39D66D;}
.proType-btn dl dt { font-size: 26px; font-weight: 700; margin-bottom: 10px;}
.proType-btn dl dd { font-size: 16px; margin: 5px 0;font-weight: 400;}
.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-btn.active .won { color: #2ecc71;}
.proType-conts { display: none; }
/* 내용 표시용 클래스 */
.proType-conts.active { display: grid;grid-template-columns: 3fr 7fr; grid-template-rows: auto auto; gap: 20px; align-items: stretch;}
.proType-left { flex: 3; position: relative; }
.proType-left img { display: block;width: 100%; height: auto;}
.proType-right { flex: 7; text-align: left; background: #fff; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.05);padding-bottom: 25px;}
.proType-key { position: absolute; width: 100%; left: 50%; top: 90%; transform: translate(-50%, -50%); text-align: center; z-index: 10;}
.proType-key a { background: #111; color: #fff; padding: 10px 22px; border-radius: 30px; font-size: 16px; font-weight: 500; letter-spacing: 0.5px;display: inline-block;transition: all 0.2s ease-out;}
.proType-key a:hover { background: #111;transform: translateY(-8px);box-shadow: 0px 0px 30px rgba(0,255,84,0.4);}
.proType-img { height: 100%;}
.proType-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.proType-left { grid-column: 1; grid-row: 1; }
.proType-right { grid-column: 2; grid-row: 1; }
/* 동일 타입 디자인*/
.styleType-other { grid-column: 1 / -1; grid-row: 2; padding: 100px 0 0px;position: relative;border-radius: 20px;overflow: hidden;}
.styleType-wrap { position: relative;z-index: 100;}
.styleType-title { text-align: center; font-size: 24px;font-weight: 700; color: #111;border-top: 2px solid #39D66D;border-bottom: 2px solid #ccc;padding: 15px 0;}
.styleType-grid { padding: 40px 15px;z-index: 100;}
.styleType-grid ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 40px;}
.styleType-grid li { overflow: hidden; }
.styleType-grid .thumb { display: block; width: 100%; aspect-ratio: 1; overflow: hidden;background: #fff; border-radius: 20px;padding: 20px;}
.styleType-grid .thumb img { width: 100%; height: 100%; object-fit: fill; display: block; transition: transform 0.3s ease;}
.styleType-grid li:hover .thumb img { transform: scale(1.04);}
.styleType-grid .label { display: block; padding: 20px 16px; font-size: 20px; font-weight: 700; color: #111; }
.styleType-btn { text-align: center;} /* 버튼 */
.styleType-btn a { display: inline-block; padding: 14px 36px; background: #111; color: #39D66D; font-weight: 500; transition: opacity 0.2s;border-radius: 30px;transition: all 0.5s ease;}
.styleType-btn a:hover { opacity: 1;transform: translateY(-4px);box-shadow: 0px 0px 30px rgba(0,255,84,0.4);}


/* 구성품 리스트 컨테이너 */
.proTypeR-conts { padding: 0 35px; }
.proTypeR-conts > ul {  display: flex; align-items: stretch; gap: 15px; margin-bottom: 10px; width: 100%;align-items: center;}
/* 모든 li 기본 설정 */
.proTypeR-conts > ul > li {  min-width: 0; display: flex; flex-direction: row; padding: 15px 20px; border-radius: 20px; box-sizing: border-box; background: #F9F9F9;border: 1px solid #DEDEDE; 
}
/* [핵심] 왼쪽 박스: 7 비율 */
.proTypeR-conts > ul > li:nth-child(1) { flex: 7 1 0; justify-content: flex-start; gap: 40px;}
.proTypeR-conts > ul > li:nth-child(2) { flex: 3 1 0; flex-direction: column; justify-content: flex-start;}
.proTypeR-conts > ul > li:nth-child(1) .website-theme { flex: 1;}
.proTypeR-conts dl { display: flex; margin:10px 0; font-size: 16px;}
.proTypeR-conts dt {  width: 90px; font-weight: 800; color: #111; flex-shrink: 0;}
.proTypeR-conts dd {  margin: 0; color: #444; }
/* dd 내부의 ul 리스트 (단순복사, 자사소유 등) */
.proTypeR-conts dd ul { list-style: none; padding: 0;}
.proTypeR-conts dd ul li::before { content: '· '; font-weight: bold;}
/* --- 상단바 및 가격 --- */
.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; }
.proType-theme { font-size: 24px; font-weight: 700; }
.proTypeVAT-price span:nth-of-type(2) { font-size: 40px; font-weight: 800; color: #111; font-family: 'Paperlogy'; }
.designsett-list { background: #fff !important;}
.designsett-list > dl { display: block;}





/* 하단 버튼 스타일 */
.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: #F5F5F5; color: #666; }
.proTypeR-targetbtn a:last-child { background: #2ecc71; color: #fff; }
.proTypeR-targetbtn a:first-child:hover { background: #e6e6e6;color: #111;}
.proTypeR-targetbtn a:last-child:hover { background: #111;color: #39D66D;}
/* 구성품 제목 */
.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 { float: right; text-align: right;margin-top: auto;}
.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;}
.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;}
/* 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 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;}

.proTypeR-conts.proType-gover > ul > li,
.proTypeR-conts.proType-Ai > ul > li { background: #F5F5F5; border: 1px solid #DEDEDE; }
.CMS-form {display: flex;justify-content: center !important; align-items: center;}
.CMS-form span { display: block;text-align: center;}
.CMS-form a { font-weight: 700;position: relative;font-size: 18px;line-height: 120%;}
.CMS-form a::before { content: '+';  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 20px; background: #39D66D; border: 1px solid #F5F5F5; margin: 0 auto 10px; }
.CMS-form:hover { background: #ede6e6;}


/*메인슬라이드 애니*/
.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: #111;text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-h3 { font-size: 20px;color: rgba(0,0,0,0.6);text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-wrap .subVT-title { font-size: 60px;color: #111;padding-top: 50px;}
.compVT-wrap .subVT-title span { display: block;}


/*productOther*/
.productOther { clear: both;background: #fff;padding-bottom: 100px;}
.slide-horizontal { margin: 80px auto; padding: 0 20px;}
.slideH-accordion { display: flex; width: 100%;height: 500px; gap: 15px;margin-top: 60px;}
.section-item { position: relative; flex: 1; /* 기본적으로 동일한 너비 */ height: 100%; border-radius: 20px; overflow: hidden; transition: all 0.5s ease-in-out; cursor: pointer; background-size: cover; background-position: center;}
/* 첫 번째 아이템(s1)의 초기 상태를 확장된 상태(flex: 3)로 고정 */
.section-item:first-child { flex: 3;background: url('../../../../img/slide-himg2.png') center/cover no-repeat !important;}
.section-item:first-child::before { background: rgba(0, 0, 0, 0);}
.section-item:first-child .item-description { display: block; opacity: 1;}
.slideH-accordion:hover .section-item:first-child { flex: 1; }
.slideH-accordion:hover .section-item:first-child::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg1-back.png) left bottom no-repeat;background-size: cover;transition: background 0.3s;}
.slideH-accordion:hover .section-item:first-child .item-description { display: none; opacity: 0;}
.section-item:hover { flex: 3 !important; }
.section-item:hover::before { background: rgba(0, 0, 0, 0.3) !important;}
.section-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F5F5F5; transition: background 0.3s;}
.item-content { position: absolute; left: 30px;top: 50px; width: calc(100% - 60px); color: #fff; z-index: 2;}
.item-content h3 { font-size: 40px; color: #666; font-weight: 800; transition: 0.3s; }
/*활성화시 br태그*/
.item-content h3 br {display: block;}
.section-item:hover h3 br { display: none;}
.section-item:first-child h3 br { display: none; }
.slideH-accordion:hover .section-item:first-child h3 br { display: block;}
.section-item:hover h3 br { display: none !important;}
.section-item:hover h3 { white-space: nowrap; }

/* 각 섹션별 가상 배경색 (실제 이미지 경로로 대체 가능) */
.section-item.s1::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg1-back.png) left bottom no-repeat;background-size: cover; }
/*.section-item.s2::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg2-back.png) left bottom no-repeat;background-size: cover; }*/
.section-item.s3::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg3-back.png) left bottom no-repeat;background-size: cover; }
.section-item.s4::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg4-back.png) left bottom no-repeat;background-size: cover; }
.section-item.s1:hover { background: url(../../../../img/slide-himg1.png) center no-repeat;background-size: cover; }
.section-item.s2:hover { background: url(../../../../img/slide-himg2.png) center no-repeat;background-size: cover; }
.section-item.s3:hover { background: url(../../../../img/slide-himg3.png) center no-repeat;background-size: cover; }
.section-item.s4:hover { background: url(../../../../img/slide-himg4.png) center no-repeat;background-size: cover; }

.item-content h3 span { display: block; font-size: 16px; color: #fff; font-weight: 600; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #666;    border-radius: 100%; margin-bottom: 10px; transition: 0.3s;}
.section-item:first-child h3 { font-size: 32px; color: #fff; font-weight: 700;}
.section-item:first-child h3 span { background: #fff; color: #111; }
.slideH-accordion:hover .section-item:first-child h3 { font-size: 40px; color: #7E7E7E; font-weight:800;}
.slideH-accordion:hover .section-item:first-child h3 span { background: #666; color: #fff;}
.section-item:hover h3 { font-size: 40px !important; color: #fff !important; font-weight: 700 !important;}
.section-item:hover h3 span { background: #fff !important; color: #111 !important;}
.item-description { display: none; opacity: 0; transition: 0.3s; }
.section-item:hover .item-description { display: block !important; opacity: 1 !important;}
.section-item:hover .item-description h3 br { display: block;}
.item-description ul { margin-top: 15px;}
.item-description ul li:nth-child(1) { font-size: 24px; font-weight:500;padding: 2px 0;color: rgba(255,255,255,0.75);}
.item-description ul li:nth-child(2) { font-weight: 200;padding: 5px 0;color: rgba(255,255,255,0.75);}
.item-description ul li.list { text-align: left; font-size: 16px; white-space: nowrap; background: rgba(255,255,255,0.9); border-radius: 12px; box-shadow: 5px 7px 18px rgba(0, 77, 26, 0.3); padding: 20px; display: inline-block; position: relative; padding-left: 30px;}
.item-description ul li.list::before { content: '';position: absolute;left: 20px;width: 2px;height: 73%;background: #111;}
.item-description ul li.list span { display: block;font-size: 20px;color: #111;font-weight: 600;margin: 3px 0;}
.item-description .link a { display: inline-block; color: #fff; text-decoration: none; background: #39D66D;height: 40px;line-height: 40px;text-align: center;font-weight: 600;display:block; border-radius: 30px;color: #fff;margin: 20px 0 30px;}
.section-item.s1 .link a { width: 165px;color: #111;}
.section-item.s2 .link a { width: 210px;color: #111;}
.section-item.s3 .link a { width: 125px;color: #111;}
.section-item.s4 .link a { width: 125px;color: #111;}



/* 반응형 처리 */
@media (max-width: 1024px) {
    
    .styleType-grid ul {  grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 768px) {

    .styleType-title {
        font-size: 20px;
    }

    .styleType-grid ul {
        grid-template-columns: 1fr;
    }

  .proTypeR-conts > ul > li:first-child:nth-last-child(4) ~ li:nth-child(2) { flex: 0 0 85px; }
  .proTypeR-conts > ul {
        gap: 10px; /* 간격 살짝 줄임 */
    }

    .proTypeR-conts > ul > li {
        flex: 1 1 calc(50% - 10px); /* 모바일에서 2단 배열 (한 줄에 2개씩) */
        /* 또는 아예 한 줄에 하나씩 나오게 하려면 flex: 1 1 100%; */
    }

    /* 모바일에서는 85px 고정을 풀고 다른 박스와 크기를 맞춤 */
    .proTypeR-conts > ul > li:first-child:nth-last-child(4) ~ li:nth-child(2) {
        flex: 1 1 calc(50% - 10px); 
        width: auto; /* 고정 너비 해제 */
    }
  
}