@font-face {
    font-family: 'Taenada';
    src: url('../font/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.woff2') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Medium.woff2') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-SemiBold.woff2') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.woff2') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Black.woff2') format('woff');
    font-weight: 800;
    font-display: swap;
}


* {padding: 0; margin: 0;  font-family: 'Pretendard'; font-weight: 700; }
html {overflow-x : hidden; font-size: 10px;}

ul li {list-style: none;}
a { color: #1c1c1c; text-decoration: none;}

.blind{
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

/* 메인 */
.main_container {background-color: #B36BD0; width: 100%; height: 100vh; padding-bottom: 80px; box-sizing: border-box; position: fixed;}
/* 헤더 */
header {position: fixed; z-index: 999; display: flex; justify-content: space-between; left: max(0px, calc((100vw - 1300px)/2)); }
header h1 a {width: 204px; height: 70px; border-radius: 15px; background-color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 40px; border: 1.2px solid #B7B7B7;}
header h1 a:hover {background-color: #FFD942;}
header h1 a img {width: 168px; height: 32px; }

/* 네비 */
nav {display: flex; margin-top: 40px; position: fixed; z-index: 999 ; right: max(0px, calc((100vw - 1300px)/2)); }
nav ul {display: flex; background-color: #fff; padding: 3px 52px; box-sizing: border-box; border-radius: 40px; align-items: center; justify-content: center; gap: 20px; border: 1.2px solid #B7B7B7;}
nav ul > li a { padding: 20px 20px; box-sizing: border-box;}
nav ul li a p {font-size: 2rem; font-weight: 800; position: relative;}
/* 밑줄 효과 */
nav ul li a p::after {content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 2px; background-color: #1c1c1c; transform: scale(0); transition: transform 0.5s; transform-origin: left;}
nav ul li a:hover > p::after {transform: scale(1); transform-origin: left;}

nav .buy {border: none; border-radius: 40px; width: 132px; height: 70px; background-color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .1s; border: 1.2px solid #B7B7B7;}
nav .buy a {font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
nav .buy a img {transition: transform 0.5s; width: 30px; height: 30px;}
nav .buy:hover img {transition: transform 0.5s; animation: scaling .3s ease-in-out; transform: scale(1.05);}
nav .buy:hover {background-color: #FFD942; transition: .1s;}

@keyframes scaling {
    from {
    transform: scale(0.8);
    }
    to {
    transform: scale(1.05);
    }
}

/* 드롭다운 */
nav ul li {display: flex; flex-direction: column; position: relative;}
nav ul li:hover {transition-duration: 0.5s;}
nav ul li:hover .submenu {display: flex; max-height: 300px; visibility: visible; transform: translateY(0); transition: max-height 0.3s ease-in-out;}
nav ul li:hover .submenu li a p { opacity: 1; transition-duration: .5s;}

.submenu {visibility: hidden; flex-direction: column; justify-content: start; gap: 5px; border-radius: 20px; position: absolute; width: auto; max-height: 0; top: 90%; padding: 10px 10px; box-sizing: border-box; background-color: #fff; border: none; transform: translateY(-5px); transition: all 0.3s ease-in-out; border: 1.2px solid #1c1c1c;}
.submenu li {position: relative; top: 0;}
.submenu li a {padding: 10px 10px;}
.submenu li a p {font-weight: 500; font-size: 1.9rem; color: #272727; line-height: 150%; white-space: nowrap; opacity: 0;}
.submenu li a p::after {content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 2px; background-color: #272727; transform: scale(0); transition: transform 0.5s; transform-origin: left;}
.submenu li a:hover > p::after {transform: scale(1); transform-origin: left;}

/* nav ul li:hover .submenu { transition: max-height 0.3s ease-in-out; display: flex; max-height: 300px; visibility: visible; -webkit-transition: max-height 0.3s ease-in-out; -moz-transition: max-height 0.3s ease-in-out; -ms-transition: max-height 0.3s ease-in-out; -o-transition: max-height 0.3s ease-in-out; }
nav ul li:hover .submenu li a p { opacity: 1;transition-duration: 0.5s;} */



/* 햄버거 */

input[id="icon"] {
    display:none;
} 

input[id="icon"] + label{
    position: fixed;
    top: 0;
    right: 0;
    display:none;
    margin: 0 auto;
    width:70px;
    height:70px;
    cursor:pointer;
    background-color: #fff;
    border-radius: 20px;
    border: 1.2px solid #b7b7b7;
    margin-top: 40px;
    margin-right: 100px;
    /* place-items: center; */
    z-index: 999;
} 

input[id="icon"] + label > span {
    position: absolute;
    display:block;
    margin: 0 auto;
    width:70%;
    height:5px;
    border-radius:30px;
    background:#000;
    transition: all 0.35s;  /* 진행되는 과정들을 천천히 보여줄 수 있다. 0.35초 동안 진행됨 */
    z-index:2;
    left: 15%;
    transform: translateY(-15%);
}

input[id="icon"] + label > span:nth-child(1) {
    top:15px;
}

input[id="icon"] + label > span:nth-child(2) {
    top:50%;
    transform: translateY(-50%);  /* 엘리먼트를 변형할 때 쓴다. 비틀거나 구부리거나 돌릴 때 . 여러가지로 모양을 바꿀 때 */
}

input[id="icon"] + label > span:nth-child(3) {
    bottom:15px;
}


input[id="icon"]:checked + label > span:nth-child(1) {
    top:50%;
    transform:translateY(-50%) rotate(45deg);
}

input[id="icon"]:checked + label > span:nth-child(2) {
    opacity: 0;
}

input[id="icon"]:checked + label > span:nth-child(3) {
    bottom:50%;
    transform:translateY(50%) rotate(-45deg);
}

#icon + label + #header {
    position:fixed;  /* 스크롤을 내리더라도 같은 위치에서 붙어다닌다. */
    width:400px;
    height:100%;
    background:#1c1c1c;
    top:0px;
    padding:160px 50px 50px 50px;
    box-sizing:border-box;
    right:-400px;
    z-index:55;
    transition: all 0.35s;
    border-radius: 60px 0 0 60px;
}

#icon:checked + label + #header {
    right: 0px;
}

#icon:checked + label + #header > ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#icon:checked + label + #header > ul > li > a {
    color: #fff;
    font-size: 3rem;
    
}

#icon:checked + label + #header .buy {
    display: inline-block;
    background-color: #fff;
    border-radius: 40px;
    margin: 0 auto;
    padding: 3px 30px;
    box-sizing: border-box;
    margin-top: 80px;
}

#icon:checked + label + #header .buy a {
    font-size: 2.8rem;
    color: #1c1c1c;
}

/* 햄버거 서브 */
.hbg_submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    opacity: 0;
    background: #2c2c2c;
    border-radius: 10px;
    padding-left: 10px 0;
}

.hbg_submenu.open {
    opacity: 1;
    margin-top: 10px;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
}

.hbg_submenu li a {
    display: block;
    color: #fff;
    font-size: 1.8rem;
    padding: 10px 0;
    transition: color 0.2s;
    font-weight: 500;
}

.hbg_submenu li a:hover {
    color: #FFD942;
}

/* 메인 비주얼 */
.main_vs {max-width: 1300px; height: 700px; background-color: #fff; border-radius: 40px; margin: 0 auto; margin-top: 80px; display: flex; justify-content: center; align-items: center; position: relative; top: 50%; transform: translateY(-50%);}
.main_vs .main_img {display: flex; align-items: center;}
.main_vs .main_img img {width: 381px; height: 661px;}
.main_vs .letter {margin-right: 50px; display: flex; flex-direction: column; align-items: flex-end; position: relative;}
.main_vs .letter .txt_wrap {text-align: right;}
.main_vs .letter .txt_wrap p {font-size: 10.2rem; line-height: 100% ; display: inline-block;}
.main_vs .letter .txt_wrap p:first-child {animation: fadeInUp 1.2s;}
.main_vs .letter .txt_wrap p:last-child {animation: fadeInUp 1.8s;}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: riseUp 0.6s forwards;
}

@keyframes riseUp {
    to {
    opacity: 1;
    transform: translateY(0);
    }
}
.main_vs .letter .cont {font-size: 2rem; font-weight: 500; color: #6C6C6C; margin-top: 180px; text-align: right; width: 720px; height: auto; line-height: 150%; animation: fadeInUp 1.7s;}
.main_vs .letter a { display: flex; align-items: center; gap: 8px;}
.main_vs .letter .more_btn p {font-size: 2rem; font-weight: 500; position: relative;}
.main_vs .letter .more_btn {margin-top: 20px; cursor: pointer; animation: fadeInUp 2s;}
.main_vs .letter .more_btn:hover .btn {animation: moved .6s ease-in-out infinite; }
.main_vs .letter .more_btn p::after {content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 2px; background-color: #1c1c1c; transform: scale(0); transition: transform 0.3s; transform-origin: left;}
.main_vs .letter .more_btn:hover p::after {transform: scale(1); transform-origin: left;}
.main_vs .letter .more_btn:hover p {font-weight: 600; transition: transform .3s;}

@keyframes moved {
    from {
    transform: translateX(0px);
    }
    50% {
    transform: translateX(5px);
    }
    to {
    transform: translateX(0px);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}
.main_vs .letter .more_btn .btn {width: 29px; height: 29px; border-radius: 30px; background: #1c1c1c url(../images/arrow_moreview.png) no-repeat center center; transition: translateX .6s;}
.main_vs .letter .prd_name {font-size: 1.6rem; color: #B7B7B7; font-weight: 500; position: relative; right: 730px; top: 20px;}




/* 제품 */
.content {width: 100%; height: 1200px; border-radius: 80px 80px 0 0; background-color: #A2E0E2; position: absolute; top: 1080px; left: 50%; margin-left: -50%;}
.Products .tit {font-size: 4.8rem; font-weight: 800; text-align: center; margin-top: 160px; margin-bottom: 20PX;}

.Products .items {width: auto; margin: 0 auto; position: relative ; z-index: 99;}
.Products .slider {display: flex; max-width: 970px; margin: 0 auto;}
.Products .slider li {opacity: 0; transition: transform .6s; transform: translateY(60px); transition: opacity 1s ease, transform 1s ease;}
.Products .slider li.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.Products .slider li a {width: 310px; height: 480px; background-color: #fff; display: flex; flex-direction: column; border-radius: 40px; margin: 0 auto; transition: transform .15s ease;}
.Products .slider li img {width: 194px; margin: 30px auto;}
.Products .slider li a > div {display: flex; gap: 8px; position: absolute; bottom: 25px; margin-left: 25px;}
.Products .slider li a > div p {font-size: 1.8rem; font-weight: 600; padding: 7px 20px; box-sizing: border-box; border-radius: 30px; border: 1px solid #B7B7B7; display: flex; align-items: center; justify-content: center;}
.Products .slider li a > div p:first-child {background-color: #fff; }
.Products .slider li a > div p:last-child {background-color: #46CCD3; color: #fff;}

.Products .indi {max-width: 1200px; display: flex; justify-content: space-between; margin: 0 auto; position: relative; top: 290px;}
.Products .indi li {width: 63px; height: 63px; background-color: #fff;; border-radius: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .3s;}

.Products .indi li:last-child img {margin-left: 5px;}
.Products .indi li:hover {animation: scailing2 0.3s; transform:  scale(.9);}

.Products .more_btn a {width: 172px; height: 54px; background-color: #1c1c1c; border-radius: 30px; display: flex; align-items: center; justify-content: center; margin: 60px auto; font-size: 2rem; text-align: center; color: #fff; transition: transform .8s; }
.Products .more_btn a:hover {animation: scaling2 .3s ease-in-out; transform: scale(.9);}

@keyframes scaling2 {
    from {
    transform: scale(1);
    }
    to {
    transform: scale(.9);
    }
}

/* --- 카드 뒤집힘 효과 --- */
.flip-card {
    width: 310px;
    height: 530px;
    perspective: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}


.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    border-radius: 40px;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 40px;
    overflow: hidden;
}

/* 앞면 기존 스타일 유지 */
.flip-front {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

/* 뒷면 */
.flip-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.flip-back a {background: linear-gradient(325deg, #10979e, #56d6dd,  #c4fcff); display: flex; justify-content: center;}

.flip-back .back-content {
    padding: 30px;
}

.flip-back a h3 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #ffffff;
}



/* 기존 hover 효과 제거 (겹침 방지) */
.Products .slider li a:hover img {
    transform: none;
}



/* 왜 리스테린? */
.reason_wrap {width: 100%; height: 980px; background: #169056; border-radius: 80px; position: absolute; margin-top: 80px; overflow: hidden; left: 50%; margin-left: -50%;}

.reason {max-width: 1300px; margin: 0 auto; display: flex; flex-direction: column;}
.reason .tit {font-size: 6.4rem; font-family: 'Taenada'; color: #FFF5CE; margin-top: 13%; opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 2s;}
.reason .tit.active {opacity: 1; transform: translateY(0);}

.reason .tit span {font-size: 8rem; font-family: 'Taenada'; color: #FFF5CE;} 
.reason .cont {display: flex; gap: 40px; flex-direction: column; margin-top: 100px;}
.reason .cont .num {display: flex; gap: 30px;}
.reason .cont span {font-family: 'Taenada'; font-size: 6.8rem; color: #FFF5CE;}
.reason .cont .num > div {display: flex; flex-direction: column;}

/* 글씨 주르륵 효과 */
.reason .cont .num > div p {
    display: inline-block;
    background-color: #fff;
    color: #1c1c1c;
    font-size: 2.2rem;
    font-weight: 600;
    padding: 4px 15px;
    opacity: 0;
    clip-path: inset(0 100% 0 0);  /* 오른쪽부터 잘라내기 */
    transition: clip-path 0.8s ease-out, opacity 0.8s ease-out;
}

.reason .cont .num > div p.active {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

@keyframes width {
    0% {
        width: 0;
    }
    50% {
        width: 50%;
    }
    100% {
        width: 100%;
    }
}

.reason .cont > div p:last-child {margin-top: 10px;}
.reason .more_btn a {width: 206px; height: 54px; background-color: #1c1c1c; border-radius: 30px; display: flex; align-items: center; justify-content: center; margin: 110px auto; font-size: 2rem; text-align: center; color: #fff; transition: transform .3s; position: relative;}
.reason .more_btn a:hover {animation: scaling2 .3s ease-in-out; transform: scale(.9);}
.Circle {animation: circle 20s linear infinite; transform-origin: 50% 50%; position: absolute; bottom: -100px; right: 0;}

@keyframes circle {
    100% {transform: rotate(360deg);}
}

/* 구강 케어 */
.oral_care {width: 100%; height: 100vh; margin-top: 1000px;}
/* .oral_care .img {width: 100%; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.327), rgba(0, 0, 0, 0.3)), url(../images/last_img.webp) no-repeat center; background-attachment: fixed; background-size: cover; } */

.oral_care .img {
    width: 100%;
    height: 100vh;
}
.oral_care .img::before {
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    background: linear-gradient(rgba(0, 0, 0, 0.327), rgba(0, 0, 0, 0.3)), url(../images/last_img.webp) no-repeat center;
    background-size: cover;
}

.oral_care .letter {text-align: center; position: relative; bottom: 50%; transform: translateY(-50%); }
.oral_care .letter .text-container {font-size: 10rem; font-weight: 800; color: #fff; position: relative; display: inline-block; overflow: hidden;}
#text { display: block; font-size: 10rem; text-align: center; font-weight: 800;}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: riseUp 0.6s forwards;
    font-size: inherit !important;
    font-weight: inherit !important;
}
.char.space {
    display: inline-block;
    width: 0.2em; /* 원하는 공백 크기 */
    opacity: 1; /* 공백은 애니메이션 없이 바로 보이도록 */
    transform: none;
    animation: none;
}

@keyframes riseUp {
    to {
    opacity: 1;
    transform: translateY(0);
    }
}
.oral_care .letter a span {font-size: 2rem; color: #fff; font-weight: 500;}
.oral_care .arrow a {width: 64px; height: 64px; background-color: #000; display: flex; align-items: center; justify-content: center; border-radius: 40px; margin: 0 auto; margin-top: 20px;}
.oral_care .letter:hover .arrow { animation: moved2 .6s ease-in-out infinite;}
.oral_care .arrow a img {margin-left: 5px;}

@keyframes moved2 {
    from {
    transform: translateX(0px);
    }
    50% {
    transform: translateX(10px);
    }
    to {
    transform: translateX(0px);
    }
}

/* 푸터 */
footer {width: auto; height: 700px; background-color: #1c1c1c; border-radius: 80px 80px 0 0 ; position: relative; bottom: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
footer .sns {margin-bottom: 60px; display: flex; gap: 50px; align-items: center;}
footer .sns a {transition: transform .3s;}
footer .sns a:hover {animation: scaling2 .3s ease-in-out; transform: scale(.9);}

footer .sns a img:first-child {width: 90px; width: 90px;}
footer .sns a img:last-child {width: 80px; height: 80px;}
footer a, footer .tit {color: #fff; text-align: center;}

footer .site {display: flex; gap: 450px;}
footer .site .tit {margin-bottom: 45px;}
footer .tit {font-size: 4rem; font-weight: 800;}
footer .site > div ul {text-align: center;}
footer .site > div ul li {margin-bottom: 20px;}
footer a {font-size: 2rem; font-weight: 500; text-align: center; transition: .3s;}
footer a:hover {font-weight: 700; transition: .3s;}

footer p {font-size: 1.8rem; font-weight: 500; color: #919191; text-align: center;}  
footer .site {display: flex;}
footer .copyright {margin-top: 100px;}
footer .copyright p {margin-top: 5px;}





/* 서브 1 */
.sub_01_sc {background-color: #F9F6EB; height: auto; padding: 270px 0 ; box-sizing: border-box;}
.sub_01_sc .tit_wrap {margin: 0 auto; text-align: center;}
.sub_01_sc .tit_wrap .tit {font-size: 7.2rem; font-weight: 800; color: #1c1c1c; position: relative; display: inline-block; overflow: hidden; font-family: 'Taenada';}
#sub_tit { display: inline-block; font-size: 7.2rem; text-align: center; font-family: 'Taenada';}

.charr {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: riseUp 0.6s forwards;
    font-family: 'Taenada';
}
.charr.space {
    display: inline-block;
    width: 0.2em; /* 원하는 공백 크기 */
    opacity: 1; /* 공백은 애니메이션 없이 바로 보이도록 */
    transform: none;
    animation: none;
}

.sub_01_sc .tit_wrap p {font-size: 1.8rem; font-weight: 500;}


/* 제품 카테고리 */
.sub_01_sc .prd-menu { max-width: 1300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; margin-top: 80px;}
.sub_01_sc .prd-menu ul {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.sub_01_sc .prd-menu a {font-size: 2rem; font-weight: 600; text-align: center; background-color: #fff; border-radius: 30px; border: 1px solid #BFBFBF; padding: 10px 20px; box-sizing: border-box; transition: 0.3s;;}
.prd-menu a.active {background-color: #1c1c1c; color: #fff; border-color: #1c1c1c;}



/* 제품 리스트 */
.sub_01_sc .prd {max-width: 1300px; margin: 0 auto; margin-top: 50px;}
.sub_01_sc .prd .card {max-width: 640px; min-height: 366px; background-color: #fff; display: flex; align-items: center; border-radius: 40px; border: 2px solid #E2E2E2;}
.sub_01_sc .prd .card .img { width: 257px; height: 336px; background-color: #E2E2E2; margin-left: 12px; border-radius: 40px; display: flex; align-items: center; justify-content: center;}
.sub_01_sc .prd .card img {width: 170px; height: 298px;}
.sub_01_sc .prd .card p {font-size: 3.2rem; color: #1c1c1c; margin-bottom: 120px; font-weight: 600;}
.sub_01_sc .prd .card span {font-size: 2rem; color: #4E4E4E; background-color: #fff; border-radius: 30px; border: 1px solid #BFBFBF; padding: 3px 15px; box-sizing: border-box; font-weight: 600;}
.sub_01_sc .prd .card span:last-child {background-color: #E5E5E5; color: #303030;}
.sub_01_sc .prd .letter {margin-left: 20px;}
.sub_01_sc .prd .letter > div {display: inline-block; flex-direction: column;}
.sub_01_sc .flavor {display: flex; gap: 8px;}
.sub_01_sc .prd .letter .carename {display: inline-block; font-size: 2rem; font-weight: 500; color: #fff; padding: 3px 15px; box-sizing: border-box; background-color: #B36BD0; border-radius: 30px; border: 1px solid #BFBFBF; margin-top: 10px;}

.prd ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 */
    gap: 20px;
}

@media only screen and (max-width: 1240px) {
    .prd ul {
        grid-template-columns: 1fr; /* 모바일 1열 */
    }
}

.sub_footer {bottom: 0; margin-top: -60px;}


/* 서브_02 */
.sub_02 {background-color: #EEEEEE; height: auto; padding-bottom: 160px; box-sizing: border-box;}

/* 서브02 메인 비주얼 */
.sub_02 .vs {
    display: flex;
    max-width: 1300px; 
    margin: 0 auto;  
    display: flex;
    align-items: flex-start; /* 높이 변화에 따라 이미지가 밀리지 않도록 */
    gap: 120px;
}
.prd_vs_wrap {width: auto; height: auto; margin-top: 230px; display: flex; gap: 80px;}
.sub_02 .prd_vs {width: 640px; height: 630px; border-radius: 40px; background: url(../images/prd_detail.webp) no-repeat center center; box-shadow: 0 0 10px rgba(0, 0, 0, 20%); background-size: cover; background-position: center bottom -75px;}
.sub_02 .vs .letter {display: flex; flex-direction: column; margin-top: 80px;}
.sub_02 .vs .letter span {font-size: 2rem; font-weight: 600; border: 1px solid #5B5B5B; border-radius: 40px; padding: 3px 15px; box-sizing: border-box; color: #5B5B5B; margin-right: 8px;}
.sub_02 .vs .letter > div:first-child {margin-bottom: 20px;}
.sub_02 .vs .letter > div:last-child {margin-top: 100px; margin-left: 150px;}
.sub_02 .vs .letter > div:last-child a {font-size: 2.2rem; color: #2f2f2f; text-decoration: underline; }
.sub_02 .vs .letter > div:last-child img {margin-left: 8px;}
.sub_02 .vs .letter .tit {font-size: 3.2rem; margin-bottom: 80px;}
.sub_02 .vs .letter ul {display: flex; flex-direction: column; gap: 10px;}
.sub_02 .vs .letter li a {font-size: 2rem; font-weight: 500; color: #424242; display: flex; gap: 8px;}
.sub_02 .vs .letter li a .img {background-color: #424242; width: 22px; height: 22px; border-radius: 30px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease;}


/* 아코디언 효과 */
.sub_02 .vs .letter ul.accordion {
    display: flex;
    flex-direction: column;
}

.sub_02 .vs .letter li {
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 아코디언 헤더 */
.sub_02 .vs .letter li > a {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #424242;
    text-decoration: none;
    cursor: pointer;
}


.sub_02 .vs .letter li.active .img {
    transform: rotate(90deg);
}

/* 아코디언 내용 */
.sub_02 .vs .letter li .acc_cont {
    max-width: 540px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background-color: #fff; display: inline-block; border-radius: 10px;
}

.sub_02 .vs .letter li:last-child .acc_cont {display: flex; align-items: center; justify-content: center;}
.sub_02 .vs .letter li:last-child .acc_cont img {
    width: 530px; height: 512px;
}

.sub_02 .vs .letter li.active .acc_cont {
    margin-top: 10px;
    max-height: 600px !important;
    transition: .6s;
}

.sub_02 .vs .letter li .acc_cont p {
    width: 100%;
    font-size: 1.8rem;
    color: #555;
    margin-top: 15px;
    line-height: 2;
    margin: 20px 20px;
    font-weight: 500;
}

/* 서브02 내용 */
.sub_02_cont {max-width: 1300px; margin: 0 auto; background-color: #fff; border-radius: 40px; padding: 80px 80px; box-sizing: border-box; margin-top: 80px;}
.sub_02_cont .dt_wrap {margin-bottom: 80px;}
.sub_02_cont .dt_wrap p:first-child {font-size: 3.2rem; margin-bottom: 20px; line-height: 150%;}
.sub_02_cont .dt_wrap p:last-child {font-size: 1.8rem; color: #6C6C6C; font-weight: 500;}
.sub_02_cont .border {font-size: 2rem; background-color: #1c1c1c; color: #fff; border-radius: 40px; padding: 7px 20px; box-sizing: border-box;}
.sub_02_cont .use {margin-bottom: 80px;}
.sub_02_cont .use > div {margin-top: 30px; display: flex; flex-direction: column; gap: 40px;}
.sub_02_cont .use > div span {color: #202020; font-size: 2rem;}
.sub_02_cont > div > div p {font-size: 1.8rem; color: #6C6C6C; font-weight: 400;}
.sub_02_cont .DD {margin-top: 20px;}
.sub_02_cont .danger > div {margin-top: 28px; }
.sub_02_cont .danger > div p {line-height: 200%;}
.sub_02_cont .danger p > span {color: #979797; font-weight: 400; font-size: 1.8rem;}
.sub_02_cont .last {font-size: 1.8rem; color: #4e4e4e; font-weight: 500; line-height: 180%; margin-top: 80px;}
.sub_02_cont .last a {font-weight: 600; font-size: 1.8rem; color: #4e4e4e;}


/* 반응형 */
@media only screen and (max-width: 1400px) {
    nav ul {
        gap: 0px;
        padding: 3px 42px;
    }
    .main_container {
        padding: 0 100px;  box-sizing: border-box;
    }
    nav {
        right: 100px;
    }
    header {
        left: 100px;
    }
    /* 메인비주얼 */
    .main_vs {height: 700px; margin-top: 50px;}
    .main_vs .main_img img {width: 300px; height: auto;}
    .main_vs .letter .prd_name {right: 900px;}
    .main_vs .letter .cont {margin-top: 150px; display: block; width: 100%;}
    .main_vs .letter .txt_wrap p {font-size: 9rem;}
    .main_vs .letter .cont p { display: block; word-break: keep-all; text-align: center;}
    .main_vs .letter .more_btn .btn {width: 20px; height: 20px;}
    .main_vs .letter {position: relative; right: 0;}
    .main_vs .letter .prd_name {display: none;}
    .Products .tit {margin-top: 100px;}
    /* 제품 */
    .content {padding: 0 50px; box-sizing: border-box; height: 1000px;}
    .Products .slider {max-width: 850px; }
    .Products .slider li a {width: 270px; height: 418px;}
    .Products .slider li a img {transform: scale(.8); margin-top: -15px;}
    .Products .slider li a:hover img {transform: scale(.8);}
    .flip-card {width: 270px; height: 448px;}
    .Products .indi {padding: 0 50px; box-sizing: border-box; top: 250px;}
    .Products .slider li a > div {gap: 5px;bottom: 15px; margin-left: 15px;}
    .Products .items {margin-top: -50px;}
    /* 왜? */
    .reason_wrap {padding: 0 100px; box-sizing: border-box;}
    /* 구강 */
    .content {padding: 0 0;}
    /* 서브01 */
    .sub_01_sc {padding-right: 100px;  padding-left: 100px;}
    .sub_01_sc .prd .card {
        padding: 15px 20px 15px 0; box-sizing: border-box;
    }
    .sub_01_sc .prd .card .img {
        width: 222px;
    }
    /* sub_02 */
    .sub_02 {
        padding: 0 100px 160px 100px;
    }
    .prd_vs_wrap {
        display: flex;
    }
    .sub_02 .prd_vs {
        width: 500px;
        height: 492px;
    }
    .prd_vs_wrap {
        gap : 60px;
    }
}

@media only screen and (max-width: 1290px) {
    .Products .indi {padding: 0 100px;}
    /* sub02 */
    .sub_02 .vs .letter li .acc_cont {
        width: 410px;
    }
    .sub_02 .vs .letter li:last-child .acc_cont img {
        width: 400x;
        height: 386px;
    }
    .sub_02 .prd_vs {
        width: 400px;
        height: 394px;
    }
    .prd_vs_wrap {
        margin: 0 auto;
        margin-top: 230px;
    }
    .sub_02 .vs .letter .acc_cont li {
        width: 410px;
        height: 396px;
    }
    .sub_02 .vs .letter li .acc_cont img {
        width: 400x;
        height: 386px;
    }
    .sub_02 .vs .letter > div:last-child {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 1240px) {
    /* sub01 */
    .prd ul {
        gap: 20px;
        justify-items: center; /* 그리드 아이템을 가로 중앙 정렬 */
        align-items: start;
    }

    .sub_01_sc .prd .card .img {
        width: 257px;
    }

/* 각 그리드 항목(리스트 아이템) 내부에서 카드가 중앙에 위치하도록 강제 */
    .prd ul li {
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* 카드 너비를 일정하게 유지 (기존 max-width 유지) */
    .sub_01_sc .prd .card {
        width: 100%;
        max-width: 640px; /* 카드 최대 너비 */
        box-sizing: border-box;
    }
}

/* 탭 */
@media only screen and (max-width: 1200px) {
    /* 네비 */
    nav {
        display: none;
    }
    input[id="icon"] + label {
        display: block;
    }
    /* 제품 */
    .content {border-radius: 60px 60px 0 0;}
    .Products .slider {max-width: 600px; }
    .Products .slider li a {width: 600px; height: 400px;}
    .flip-card {width: 600px; height: 440px;}
    .Products .slider li a > div {gap: 8px; bottom: 25px; margin-left: 25px;}
    /*  왜? */
    .reason_wrap {border-radius: 60px 60px 60px 60px}
    /* 푸터 */
    footer .site {
        gap: 300px;
        border-radius: 60px 60px 0 0;
    }
    footer {
        padding: 0 100px;
    }
    /* 서브01 */
    .sub_01_sc .prd .card {
        max-width: 800px;
    }
    .sub_01_sc {
        padding-top: 230px;
    }
    .sub_01_sc .prd-menu ul {
        gap: 40px 10px;
    }
    .sub_01_sc .prd .card span {
        white-space: nowrap;
    }
    .sub_01_sc .flavor {gap: 10px 8px;}
    /* sub02 */
    .prd_vs_wrap {
        gap : 40px;
    }
    .sub_02_cont {
        padding: 40px 40px;
    }
}

@media only screen and (max-width: 1075px) {
    .main_vs {height: 700px; margin-top: 50px;}
    .main_container {
        padding: 0 80px;
    }
    header {
        left: 80px;
    }
    .main_vs .letter .cont {
        margin-top: 100px;
    }
    input[id="icon"] + label {
        margin-right: 80px;
    }
    /* why */
    .reason_wrap {
        padding: 0 80px;
    }
    /* 서브01 */
    .sub_01_sc {padding-right: 80px;  padding-left: 80px;}
    /* sub02 */
    .prd_vs_wrap {
        flex-direction: column;
        margin-top: 200px;
        gap: 0;
    }
    .sub_02 .vs .letter {
        margin-top: 40px;
    }
    .sub_02 .vs .letter .tit {
        margin-bottom: 40px;
    }
    .sub_02 .vs .letter > div:last-child {
        margin-left: 110px;
    }
    .sub_02 {
        padding: 0 80px 160px 80px;
    }
}

@media only screen and (max-width: 980px) {
    /* 제품 */
    .Products .slider {max-width: 300px; }
    .Products .slider li a {max-width: 300px; height: 465px;}
    .flip-card {max-width: 300px; height: 465px;}
    .Products .indi {padding: 0 120px;}
    .Products .slider li img {margin-top: 30px;}
    /* 왜? */
    .reason_wrap {
        margin-top: 0;
    }
    /* 구강 */
    .oral_care {
        margin-top: 950px;
    }
}

@media only screen and (max-width: 910px) {
    .main_container {
        padding: 0 50px;
    }
    input[id="icon"] + label {
        margin-right: 50px;
    }
    header {
        left: 50px;
    }
    /* 메인비주얼 */
    .main_vs {flex-direction: column; height: 830px; position: relative; transition: all 0.3s ease;}
    .main_vs .main_img img {
        width: 300px;
        height: auto;
        position: relative;
        transform: scale(0.9);
        top: 10px;
        z-index: 50;
        transition: all 0.3s ease;
    }
    .main_vs .letter {
        text-align: left;
        display: flex;
        position: absolute;
        top: 50px;
        margin: 0 40px;
        align-items: center;
    }
    .main_vs .letter .txt_wrap {
        text-align: left;
    }
    .main_vs .letter .txt_wrap p {
        font-size: 10rem;
    }
    .main_vs .letter .cont {
        text-align: center;
        margin-top: 420px;
    }
    /* why */
    .reason_wrap {
        padding: 0 50px;
    }
    /* sub_01 */
    .sub_01_sc {padding-right: 50px;  padding-left: 50px;}
    .sub_02 {
        padding: 0 50px 160px 50px;
    }

}

@media only screen and (max-width: 810px) {
    /* 메인비주얼 */
    .main_vs {height: 940px; position: relative; transition: all 0.3s ease;}
    .main_vs .main_img img {
        width: 300px;
        height: auto;
        position: relative;
        z-index: 50;
        transition: all 0.3s ease;
        top: 60px;
        transform: scale(.9);
    }
    .main_vs .letter .cont {
        margin-top: 420px;
    }
}

@media only screen and (max-width: 768px) {
    .main_container {
        padding: 0 50px;
    }
    input[id="icon"] + label {
        margin-right: 50px;
    }
    /* 메인비주얼 */
    .main_vs {flex-direction: column; height: 950px; position: relative; transition: all 0.3s ease;}
    .main_vs .main_img img {
        top: 40px
    }
    .main_vs .letter {
        text-align: left;
        display: flex;
        position: absolute;
        top: 50px;
        margin: 0 40px;
        align-items: center;
    }
    .main_vs .letter .txt_wrap {
        text-align: left;
    }
    .main_vs .letter .txt_wrap p {
        font-size: 10rem;
    }
    .main_vs .letter .cont {
        text-align: center;
        margin-top: 420px;
    }
    /* 제품 */
    .Products .indi {
        max-width: 500px;
        padding: 0 0;
    }
    .Products .slider li img {
        margin-top: 30px;
    }
    /* 왜? */
    .Circle {display: none;}
    .reason_wrap {height: 1050px;}
    .reason .tit {margin-top: 20%;}
    /* 푸터 */
    footer .site {
        gap: 90px;
    }
    /* 서브01 */
    .sub_01_sc {padding-right: 50px; padding-left: 50px;}
    .sub_01_sc .prd .card .img {
        width: 222px;
    }

}


@media only screen and (max-width: 600px) {
    .main_container {
        padding: 0 24px;
    }
    input[id="icon"] + label {
        margin-right: 24px;
    }
    nav {
        right: 24px;
    }
    header {
        left: 24px;
    }
    /* 메인비주얼 */
    .main_vs { height: 700px;}
    .main_vs .main_img img {
        display: none;
    }
    .main_vs .letter .txt_wrap {
        margin-top: 20px;
    }
    .main_vs .letter .cont {
        font-size: 2.4rem;
        margin-top: 100px;
    }
    .main_vs .letter .more_btn p {
        font-size: 2.4rem;
    }
    .main_vs .letter .more_btn .btn {
        width: 28px;
        height: 28px;
    }
    .main_vs .letter .txt_wrap p {
        font-size: 9rem;
    }
    /* 제품 */
    .content {
        border-radius: 40px 40px 0 0;
    }
    /* why */
    .reason_wrap {
        padding: 0 24px;
        border-radius: 40px 40px 40px 40px;
    }
    /* footer */
    footer {
        padding: 0 24px;
        border-radius: 40px 40px 0 0 ;
    }
    /* sub01 */
    .sub_01_sc {padding-right: 24px; padding-left: 24px; padding-top: 200px;}
    .sub_01_sc .prd .card {
        flex-direction: column;
        align-items: center;
        padding: 0px 15px;
        max-width: 500px;
    }
    .sub_01_sc .prd .card .img {
        max-width: 400px;
        margin-left: 0;
        margin: 0 auto;
        margin-top: 30px;
    }
    .sub_01_sc .prd .card p {
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .sub_01_sc .prd .card p br {
        display: none;
    }
    .sub_01_sc .prd .letter > div {
        margin-bottom: 40px;
    }
    .sub_01_sc .prd .letter {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .sub_01_sc .prd .letter > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sub_01_sc .prd-menu ul {
        gap: 30px 5px;
    }
    .sub_01_sc .prd .card p {
        font-size: 2.8rem;
    }
    .sub_01_sc .prd .card span {
        font-size: 1.8rem;
    }
    .sub_01_sc .prd .letter .carename {
        font-size: 1.8rem;
    }
    #sub_tit {
        font-size: 5rem;    
    }
    .sub_01_sc .prd-menu a {
        font-size: 1.8rem;
        padding: 8px 15px;
    }
    /* sub02 */
    .sub_02 {
        padding: 0 24px 160px 24px;
    }
}

/* 모바일 */
@media only screen and (max-width: 520px) {
    .main_vs .letter .txt_wrap p {
        font-size: 6rem;
    }
    .main_vs .letter .cont {
        margin-top: 100px;
        font-size: 1.8rem;
    }
    #icon + label + #header {
        width:300px;
        right:-300px;
    }
    #icon:checked + label + #header > ul > li > a {
        font-size: 2.8rem;
    }
    /* 메인비주얼 */
    .main_vs {
        height: 600px;
    }

    .main_vs .letter .txt_wrap {
        margin-top: 20px;
    }
    .main_vs .letter .cont {
        margin-top: 80px;
        font-size: 2rem;
    }
    .main_vs .letter .more_btn p {
        font-size: 2rem;
    }
    .main_vs .letter .more_btn .btn {
        width: 28px;
        height: 28px;
    }
    /* 재품 */
    .content {
        height: 1100px;
    }
    .Products .items {
        margin-top: -90px;
    }
    .Products .indi {
        padding: 0 24px;
        top : 540px;
        justify-content: center;
        gap: 10px;
    }
    .Products .more_btn a {
        margin: 30px auto;
        margin-top: 100px;
    }
    /* why */
    .reason_wrap {
        margin-top: 60px;
        height: 1000px;
    }
    .reason .tit {
        font-size: 4rem;
    }
    .reason .tit span {
        font-size: 6rem;
    }
    .reason .cont span {
        font-size: 6rem;
    }
    .reason .cont .num > div p {
        padding: 4px 8px;
        font-size: 2rem;
    }
    .reason .cont {
        margin-top: 60px;
    }
    .reason .more_btn a {
        margin: 50px auto;
    }
    .reason .tit {
        margin-top: 25%;
    }
    .reason .cont .num {
        gap: 15px;
    }
    /* 구강 */
    #text {
        font-size: 5rem;
    }
    .oral_care .letter {padding: 0 24px; box-sizing: border-box;}
    .oral_care .letter a span {
        font-size: 2rem;
        line-height: 150%;
    }
    /* footer */
    footer {
        padding: 0 24px;
    }
    footer .sns {
        margin-top: 90px;
        gap: 30px;
    }
    footer .sns a img {
        transform: scale(0.9);
    }
    footer .tit {
        font-size: 3.5rem;
    }
    footer .site {
        gap: 40px;
    }
    footer .copyright {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    /* sub02 */
    .sub_02 .prd_vs {
        width: 300px;
        height: 295px;
        margin: 0 auto;
    }
    .sub_02 .vs .letter .tit {
        font-size: 2.8rem;
    }
    .sub_02 .vs .letter span {
        font-size: 1.8rem;
    }
    .sub_02_cont .dt_wrap p:first-child {
        font-size: 2.8rem;
    }
    .sub_02_cont .border {
        font-size: 1.8rem;
    }
    .sub_02_cont .use > div span {
        font-size: 1.8rem;
    }
    .sub_02 .vs .letter li .acc_cont {
        width: 310px;
    }
    .sub_02 .vs .letter li:last-child .acc_cont img {
        width: 300px;
        height: 290px;
    }
    .sub_02 .vs .letter .acc_cont li {
        width: 310px;
        height: 300px;
    }
    .sub_02 .vs .letter li .acc_cont img {
        width: 300x;
        height: 2906px;
    }
    .sub_02_cont .last a {
        word-break: break-all;
    }
    .sub_02 .vs .letter > div:last-child {
        margin-left: 70px;
    }
    
}

@media only screen and (max-width: 390px) {
    /* 메인 비주얼 */
    .main_vs .letter .cont {
        font-size: 1.8rem;
    }
    .main_vs .letter .txt_wrap p {
        font-size: 5rem;
    }
    /*  제품 */
    .Products .tit {
        font-size: 4rem;
        margin-top: 80px;
    }
    .Products .more_btn a {
        margin-top: 120px;
    }
    /* 왜? */
    .reason .tit span {
        font-size: 4rem;
    }
    .reason .cont span {
        font-size: 4rem;
    }
    .reason .cont .num > div p {
        font-size: 1.8rem;
    }
    /* 구강 */
    .oral_care .letter a span {
        font-size: 1.8rem;
    }
    /* 푸터 */
    footer .tit {
        font-size: 2.8rem;
    }
    footer a {
        font-size: 1.8rem;
        line-height: 200%;
    }
    footer .copyright p {
        font-size: 1.4rem;
    }
}