@charset "utf-8";

.sub-wrapper {margin-top: 98px;}

.sub-top {padding: clamp(60px, 6.94vw, 100px) 0;}

.sub-visual {padding: clamp(30px, 5.56vw, 80px) 0; background-color: var(--color-bg);}
.sub-visual .inner-s {display: flex; flex-direction: column; row-gap: 10px;}

.sub-tab {border-top: 1px solid var(--color-border); border-bottom:1px solid var(--color-border);}
.sub-tab .swiper-slide {width:auto !important; flex-shrink:0;}
.sub-tab .swiper-slide a {display:block; color:var(--color-text-3); padding: 16px 0; border-bottom: 1px solid transparent; white-space:nowrap; transition:var(--transition);}
.sub-tab .swiper-slide.active a,
.sub-tab .swiper-slide:hover a {border-color: var(--color-text-main); color:var(--color-text-main);}

.sub-tab-b {width: 100%; display: flex;}
.sub-tab-b > a,
.sub-tab-b > button {width: 50%; border-bottom: 2px solid var(--color-border); background-color: var(--color-white); transition: var(--transition); padding: 18px 0; color: var(--color-text-3); text-align: center;}
.sub-tab-b > a.active,
.sub-tab-b > a:hover,
.sub-tab-b > button.active,
.sub-tab-b > button:hover {border-color: var(--color-text-main); color: var(--color-text-main);} 

.sub-container .main-tit {margin-bottom: 60px;}

.sub-container .check {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid rgba(61, 107, 74, 0.2); background-color: #EDF3EF;}

.sub-cont-pd {padding: clamp(60px, 6.94vw, 100px) 0;}
.sub-cont-flex {display: flex; flex-direction: column; row-gap: 100px;}

.common-tab-content {display: none;}
.common-tab-content.active {display: flex;}
.common-tab-content > div {width: 100%;}

/* for buyers */
/* why-one-thera */
.why-thera-cont .sub-top .common-flex {row-gap: 10px;}
.why-thera-cont .sub-top .common-flex .bullet {color: var(--color-text-2);}
.why-thera-cont .sub-title .img-wrap {height: 300px;}

.section-buyers .inner-s {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 100px;}
.section-buyers .buyers-l {display: flex; flex-direction: column; row-gap: 20px;}
.section-buyers .buyers-info {display: flex; border: 1px solid var(--color-border);}
.section-buyers .buyers-info li {width: 100%; min-width: 160px; display: flex; flex-direction: column; row-gap: 8px; padding: 10px 18px; border-right: 1px solid var(--color-border);}
.section-buyers .buyers-info li:last-child {border-right: none;}

.section-value {background-color: var(--color-text-main);}
.section-value .main-tit h2 {color: #fff;}
.section-value .main-tit span {font-size: 14px; letter-spacing: 0.2em; color: var(--color-text-3);}
.section-value .value-grid {display: flex; flex-wrap: wrap; gap: 3px;}
.section-value .value-item {position: relative; padding: 40px; background: rgba(255,255,255,.04);}
.section-value .value-item.lg {width: calc(50% - 1.5px); min-height: 420px;}
.section-value .value-item:not(.lg) {width: calc((100% - 6px) / 3); min-height: 430px;}
.section-value .value-item .value-top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 45px;}
.section-value .value-item .value-top .num {font-size: 14px; color: var(--color-text-4);}
.section-value .value-item .value-top .label {padding: 6px 16px; border: 1px solid var(--color-border); font-size: 14px; letter-spacing: 0.2em; color: var(--color-text-3);}
.section-value .value-item .value-info {display: flex; flex-direction: column; row-gap: 20px;}
.section-value .value-item .value-info h6 {margin-bottom: 14px; font-weight: 500; line-height: 1.4; color: #fff;}
.section-value .value-item .value-info p {padding-bottom: 20px; border-bottom: 1px solid var(--color-border); font-size: 14px; line-height: 1.6; color: var(--color-text-5);}
.section-value .value-item .value-info ul {display: flex; flex-direction: column; row-gap: 8px;}
.section-value .value-item .value-info ul .bullet {line-height: 1.6; letter-spacing: 0; color: #fff;}
.section-value .value-item .value-info ul .bullet span:not(.primary) {width: 14px;}

/* target-consumer */
.section-profile .main-tit h2,
.section-profile .main-tit h2 span {line-height: 1.3;}
.section-profile .profile-list {display: flex; column-gap: 72px;}
.section-profile .profile-list > li {width: calc(100% / 3); border: 1px solid var(--color-border); background-color: var(--color-bg);}
.section-profile .profile-list > li .profile-thumb {position: relative; height: 280px;}
.section-profile .profile-list > li .profile-thumb .profile-label {position: absolute; top: 20px; left: 20px; display: block; padding: 3px 9px; border: 1px solid var(--color-border); background-color: var(--color-bg); font-size: 14px; letter-spacing: 0.2em; color: var(--color-text-2);}
.section-profile .profile-list > li .profile-info {display: flex; flex-direction: column; row-gap: 20px; padding: 40px 32px;}
.section-profile .profile-list > li .profile-info .profile-eng {font-size: 14px; letter-spacing: 0.2em; color: var(--color-text-4);}
.section-profile .profile-list > li .profile-info h6 {font-weight: 500; line-height: 1.4;}
.section-profile .profile-list > li .profile-info .profile-text {font-size: 16px; line-height: 1.7; color: var(--color-text-2);}
.section-profile .profile-list > li .profile-info .profile-tags {display: flex; gap: 12px;}
.section-profile .profile-list > li .profile-info .profile-tags span {padding: 6px 16px; border: 1px solid var(--color-border); font-size: 14px; color: var(--color-text-2);}
.section-profile .profile-list > li .profile-info .line {display: block; width: 100%; height: 1px; background-color: var(--color-border);}
.section-profile .profile-list > li .profile-info .profile-bullet {display: flex; flex-direction: column; row-gap: 12px;}

.section-emotion .emotion-wrap {display: flex; justify-content: space-between; align-items: flex-start; column-gap: 120px;}
.section-emotion .main-tit {row-gap: 22px;}
.section-emotion .main-tit h2 {color: #fff;}
.section-emotion .main-tit .common-desc {color: var(--color-text-5);}
.section-emotion .main-tit .bullet {color: var(--color-text-3);}
.section-emotion .main-tit .bullet span {background-color: var(--color-text-3);}
.section-emotion .emotion-list {max-width: 548px; display: flex; flex-direction: column; row-gap: 20px;}
.section-emotion .emotion-list .emotion-item {display: flex; column-gap: 20px; padding: 40px 36px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);}
.section-emotion .emotion-list .emotion-item .emotion-num {flex-shrink: 0; font-size: 24px; line-height: 1.4; color: var(--color-text-3);}
.section-emotion .emotion-list .emotion-item .emotion-eng {font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-3);}
.section-emotion .emotion-list .emotion-item .emotion-info h5 {font-weight: 500; color: #fff;}
.section-emotion .emotion-list .emotion-item .emotion-info .common-desc {font-size: 14px; color: var(--color-text-3);}
.section-emotion .emotion-list .emotion-item .emotion-quote {padding-left: 18px; border-left: 2px solid rgba(255,255,255,.12); font-size: 14px; line-height: 1.6; color: var(--color-text-disabled);}

.section-stats .main-tit {margin-bottom: 0;}
.section-stats .stats-wrap {display:flex; flex-direction:column; row-gap:60px;}
.section-stats .stats-list-lg {display:flex;}
.section-stats .stats-list-lg .stats-item {width:calc(100% / 3); padding:56px 44px; border:1px solid var(--color-border); display: flex; flex-direction: column; row-gap: 16px;}
.section-stats .stats-list-lg .stats-item + .stats-item {border-left:none;}
.section-stats .stats-list-lg .stats-item .stats-label {font-size:14px; letter-spacing:0.2em; color:var(--color-text-2);}
.section-stats .stats-list-lg .stats-item .stats-value {display: flex; align-items: flex-end; column-gap: 14px;}
.section-stats .stats-list-lg .stats-item .stats-value strong {font-size:72px; font-weight:500; line-height:1;}
.section-stats .stats-list-lg .stats-item .stats-value span {font-size:18px;  font-weight:500; line-height:1.7;}
.section-stats .stats-list-lg .stats-item .stats-source {font-size:14px; letter-spacing:0.2em; color:var(--color-text-3);}
.section-stats .stats-list-sm {display:flex;}
.section-stats .stats-list-sm .stats-mini {width:calc(100% / 4); display: flex; flex-direction: column; row-gap: 12px; padding:28px 24px; border:1px solid var(--color-border); background-color: #fff;}
.section-stats .stats-list-sm .stats-mini + .stats-mini {border-left:none;}
.section-stats .stats-list-sm .stats-mini strong {display:block; font-size:24px; font-weight:500;}
.section-stats .stats-list-sm .stats-mini .common-desc {font-size:14px;}
.section-stats .stats-list-sm .stats-mini .stats-source {font-size:14px; letter-spacing:0.2em; color:var(--color-text-3);}

.section-formula-focus .formula-focus-wrap {display:flex; justify-content:space-between; align-items:flex-start; column-gap:120px;}
.section-formula-focus .formula-focus-l {max-width:473px;}
.section-formula-focus .formula-list {width:100%; max-width:560px; display:flex; flex-direction:column; row-gap:8px;}
.section-formula-focus .formula-list .formula-item {display:flex; align-items:center; column-gap:20px; padding:14px 20px; background-color:var(--color-bg);}
.section-formula-focus .formula-list .formula-item .formula-code {width:60px; flex-shrink:0; text-align: center; font-size:16px; color:var(--color-text-4);}
.section-formula-focus .formula-list .formula-item .formula-info {display: flex; flex-direction: column; row-gap: 4px; flex:1;}
.section-formula-focus .formula-list .formula-item .formula-info h6 {font-size:16px; line-height: 1.7;}
.section-formula-focus .formula-list .formula-item .formula-info .common-desc {font-size:14px; line-height: 1.6;}
.section-formula-focus .formula-list .formula-item .formula-value {width:60px; display:flex; flex-direction:column; align-items:center; row-gap:8px; flex-shrink:0;}
.section-formula-focus .formula-list .formula-item .formula-value strong {font-size:14px; font-weight:500; color:var(--color-text-main); text-align:center; line-height:1.6;}
.section-formula-focus .formula-list .formula-item .formula-value span {position:relative; width:3px; height:44px; background-color:var(--color-border); border-radius:999px; overflow:hidden;}
.section-formula-focus .formula-list .formula-item .formula-value span::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:var(--percent); background-color:var(--color-text-4); border-radius:999px;}

.section-ingredient .inner-s {display:flex; justify-content:space-between; align-items:flex-start;}
.section-ingredient .ingredient-l {max-width:350px;}
.section-ingredient .ingredient-check-list {display:flex; flex-direction:column; row-gap:10px;}

.section-ingredient .ingredient-r {width:100%; max-width:720px; display: flex; flex-direction: column; row-gap: 40px;}
.section-ingredient .ingredient-head {display:flex; align-items:center; justify-content: space-between; border-bottom:1px solid var(--color-border);}
.section-ingredient .ingredient-head span {font-size:14px; color:var(--color-text-3); padding: 10px 18px;}
.section-ingredient .ingredient-head span:nth-child(1) {width: 100%; max-width: 70px;}
.section-ingredient .ingredient-head span:nth-child(2) {width: 100%; max-width: 130px;}
.section-ingredient .ingredient-head span:nth-child(3) {width: 100%; max-width: 220px;}
.section-ingredient .ingredient-head span:nth-child(4) {width: 100%; max-width: 120px;}
.section-ingredient .ingredient-list {display:flex; flex-direction:column; row-gap: 10px;}
.section-ingredient .ingredient-list > li {display:flex; align-items:center; justify-content: space-between; padding:10px 0; border-bottom:1px solid var(--color-border);}
.section-ingredient .ingredient-code {width: 100%; max-width: 70px; height: 36px; border:1px solid var(--color-border); font-size: 14px; text-align:center; color:var(--color-text-4); background-color: #F5F1EB; display: flex; align-items: center; justify-content: center;}
.section-ingredient .ingredient-name {width: 100%; max-width: 130px; font-size:14px; line-height:1.6;}
.section-ingredient .ingredient-role {width: 100%; max-width: 220px; font-size:14px; line-height:1.8; color:var(--color-text-2);}
.section-ingredient .ingredient-effect {width: 100%; max-width: 120px; display:flex; flex-direction:column; row-gap:10px; align-items: center;}
.section-ingredient .ingredient-effect strong {font-size:14px; color: var(--color-text-3);}
.section-ingredient .ingredient-effect span {padding:3px 8px; border: 1px solid rgba(61, 107, 74, 0.2); background-color: #EDF3EF; font-size:14px; color:var(--color-text-6); line-height: 1.6;}
.section-ingredient .ingredient-disclosure {display:flex; column-gap:20px; padding: 24px 28px; border: 1px solid var(--color-border);}
.section-ingredient .ingredient-disclosure strong {color:var(--color-text-4); font-size: 14px; flex-shrink: 0;}
.section-ingredient .ingredient-disclosure .common-desc {font-size: 14px; line-height: 1.6;}

.section-document .inner-s {display:flex; justify-content:space-between; align-items:flex-start; column-gap:120px;}
.section-document .document-l {max-width:340px;}
.section-document .document-list {width:100%; max-width:760px; display:flex; flex-direction:column; row-gap:4px;}
.section-document .document-list li {display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border:1px solid var(--color-border); background:#fff;}
.section-document .document-list li .document-check {display: flex; align-items: center; column-gap: 14px;}
.section-document .document-list li .document-info {display:flex; flex-direction:column; row-gap:2px;}
.section-document .document-list li .document-eng {font-size:14px; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-text-3);}
.section-document .document-list li strong {font-size:14px; line-height: 1.6;}
.section-document .document-list li .document-status {display:flex; align-items:center; justify-content:center; padding: 6px 16px; line-height: 1.6; border: 1px solid rgba(61, 107, 74, 0.2); background-color: #EDF3EF; font-size:14px; color:var(--color-text-6);}

.contact-cont.sub-top {border-bottom: 1px solid var(--color-border);}
.section-inquiry .inner-s {display:flex; justify-content:space-between; align-items:flex-start; column-gap:120px;}
.section-inquiry .inquiry-info {max-width:380px;}
.section-inquiry .inquiry-info .common-desc {font-size: 14px;}
.section-inquiry .inquiry-check {display:flex; flex-direction:column; row-gap:12px;}
.section-inquiry .inquiry-check li {font-size:14px; align-items: center;}
.section-inquiry .inquiry-check li .check {background-color: #F5F1EB; border: 1px solid var(--color-border);}
.section-inquiry .inquiry-form-wrap {width:100%; max-width:606px; padding:52px 48px; border:1px solid var(--color-border); background:#fff;}
.section-inquiry .inquiry-form {display:flex; flex-direction:column; row-gap:42px;}
.section-inquiry .form-row {display:flex; width:100%;}
.section-inquiry .form-row.half {column-gap:32px;}
.section-inquiry .form-row.half .form-item {width:calc(50% - 16px);}
.section-inquiry .form-item {width:100%; display:flex; flex-direction:column; row-gap:8px;}
.section-inquiry .form-label {font-size:14px; color:var(--color-text-2);}
.section-inquiry .form-label em {font-style:normal; color:var(--color-primary);}
.section-inquiry input,
.section-inquiry select,
.section-inquiry textarea {width:100%; height: 43px; border:none; border-bottom: 1px solid var(--color-border); background:var(--color-bg); padding: 10px; font-size:14px; color:var(--color-text-2); outline: none;}
.section-inquiry input::placeholder,
.section-inquiry textarea::placeholder {color:var(--color-text-3);}
.section-inquiry select {appearance:none; background:var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%239B948B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center;}
.section-inquiry textarea {height:120px; resize:none; line-height:1.7;}
.section-inquiry .form-bottom {display:flex; justify-content:space-between; align-items:center; padding-top:32px; margin-top: 32px; border-top:1px solid var(--color-border);}
.section-inquiry .form-bottom .common-desc {font-size: 14px;}
.section-inquiry .more-btn {padding: 14px 30px; column-gap: 6px; letter-spacing: 0.1em; font-weight: 500; justify-content:center;}

/* campaign */
/* one-sisters */
.sisters-campaign-cont .sub-title h1 {font-size: 72px;}
.sisters-campaign-cont .sub-bg {position: relative;}
.sisters-campaign-cont .campaign-visual {position:absolute; inset:0;}
.sisters-campaign-cont .campaign-text {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:320px; line-height:1; color:rgba(255,255,255,.6); white-space:nowrap;}
.sisters-campaign-cont .campaign-side-text {position:absolute; bottom: 30px; right:97px; writing-mode:vertical-rl; text-orientation:mixed; font-size:14px; letter-spacing:0.2em; color:var(--color-text-5)}

.section-campaign-story .campaign-list {display:flex; flex-direction:column; row-gap:10px;}
.section-campaign-story .campaign-item {display:flex; border:1px solid var(--color-border); background-color:#fff;}
.section-campaign-story .campaign-l {width:30%; min-width:395px; padding:50px 30px; border-right:1px solid var(--color-border); background-color: var(--color-bg);}
.section-campaign-story .campaign-l .campaign-num {font-size:24px; color:var(--color-primary);}
.section-campaign-story .campaign-tags {display:flex; flex-direction:column; row-gap: 6px;}
.section-campaign-story .campaign-tags li {width:fit-content; padding:6px 16px; border:1px solid var(--color-border); background-color:#fff; font-size:14px; line-height: 1.6; color:var(--color-text-3);}
.section-campaign-story .campaign-r {flex:1; display:flex; flex-direction:column; row-gap:30px; padding:50px 30px;}
.section-campaign-story .campaign-r > span {font-size: 18px; font-weight:500; line-height:1.7;}
.section-campaign-story .campaign-bullet {display:flex; flex-direction:column; row-gap:14px;}
.section-campaign-story .campaign-bullet .bullet-text span {display: block; flex-shrink: 0; width: 6px; height: px; border-radius: 50%; background-color: #C4907A; flex-shrink:0; margin-top: 8px;}
.section-campaign-story .campaign-note {padding:16px 20px; border-left:2px solid var(--color-text-4); background-color:var(--color-bg); font-size:14px; line-height:1.6; color:var(--color-text-2);}

.section-brand-promise > div {width: 50% !important;}
.section-brand-promise.sub-top-flex {height: 815px; column-gap: 0; background-color: var(--color-text-main);} 
.section-brand-promise.sub-top-flex .sub-title .bullet,
.section-brand-promise.sub-top-flex .sub-top .sub-title-desc {color: var(--color-text-3);}
.section-brand-promise.sub-top-flex .sub-top .sub-title-desc {font-size: 16px;}
.section-brand-promise.sub-top-flex .sub-title .bullet span:not(.primary) {background-color: var(--color-text-3);}
.section-brand-promise.sub-top-flex .sub-title h1 {color: var(--color-text-5); font-size: 48px;}
.section-brand-promise.sub-top-flex .sub-title h1 span {color: var(--color-text-disabled);}
.section-brand-promise.sub-top-flex .campaign-text {font-size: 220px;}
.section-brand-promise.sub-top-flex .sub-title {padding-left: 160px;}
.section-brand-promise.sub-top-flex .box-wrap-2 li strong {font-size: 32px; color: var(--color-text-5);}
.section-brand-promise.sub-top-flex .box-wrap-2 li span {color: var(--color-text-disabled);}

/* impact */
.section-impact {background-color: var(--color-bg);}
.section-impact .impact-list {display:flex; flex-wrap:wrap; gap:10px;}
.section-impact .impact-item {display: flex; flex-direction: column; row-gap: 12px; width:calc(50% - 5px); padding: 30px; background-color:#fff;}
.section-impact .impact-num {display:block; font-size: 18px; color:var(--color-text-4);}
.section-impact h6 {font-weight:500; line-height:1.4;}
.section-impact .impact-tag {width: fit-content; padding:6px 16px; border:1px solid var(--color-border); font-size:14px; line-height: 1.6; color:var(--color-text-4);}

/* press contact */
/* press kit */
.press-kit-cont .press-keyword {display:flex; align-items:center; column-gap:16px;}
.press-kit-cont .press-keyword span {font-size:14px; letter-spacing:0.2em; color:var(--color-text-3); text-transform:uppercase;}
.press-kit-cont .press-keyword span:nth-child(2) {width:24px; height:1px; background:var(--color-border);}

.press-kit-cont .sub-cont .bullet {margin-bottom: 30px;}
.section-press-highlight .highlight-list {display:flex; column-gap:24px;}
.section-press-highlight .highlight-list .highlight-item {width:calc(100% / 3); padding:40px 30px; background:var(--color-bg);}
.section-press-highlight .highlight-list .highlight-item .highlight-date {font-size:14px; letter-spacing:0.2em; color:var(--color-text-2);}
.section-press-highlight .highlight-list .highlight-item span:not(.highlight-date) {word-break: keep-all; font-size:18px; font-weight:500; line-height:1.7;}
.section-press-highlight .highlight-list .highlight-item .common-desc {font-size: 14px; color: var(--color-text-3);}
.section-press-highlight .highlight-list .highlight-item .highlight-btn {display: block; width: fit-content; background-color: #fff; padding:6px 16px; border:1px solid var(--color-border); font-size:14px; color:var(--color-text-4); line-height: 1.6;}

.section-assets .asset-list .asset-item {display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid var(--color-border);}
.section-assets .asset-list .asset-item .asset-l {display:flex; flex-direction:column; row-gap:3px;}
.section-assets .asset-list .asset-item .asset-l span {font-size: 16px; font-weight:500; line-height: 1.7;}
.section-assets .asset-list .asset-item .asset-l p {font-size: 14px;}
.section-assets .asset-list .asset-item .asset-btn {display:flex; align-items:center; justify-content:center; column-gap:10px; padding: 10px 24px; border:1px solid var(--color-border); font-size:14px; line-height: 1.6;}

/* contact */
.ready-wrap {display:flex; align-items: flex-start; column-gap: 120px; justify-content: center;}
.ready-wrap .ready-l h4 { font-weight:500;}
.ready-wrap .ready-l .common-desc {font-size:14px;}
.ready-wrap .ready-r {width: 100%; max-width: 400px; padding: 30px; background-color: var(--color-text-main);}
.ready-wrap .ready-r .ready-label {display:block; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color: var(--color-text-3);}
.ready-wrap .ready-r .line {display: block; width: 100%; height: 1px; background-color: var(--color-border-gray);}
.ready-wrap .ready-r .contact-item {display:flex; flex-direction:column; row-gap:0;}
.ready-wrap .ready-r .contact-item strong {font-size:18px; color:#fff; line-height: 1.7; font-weight: 500;}
.ready-wrap .ready-r .contact-item span {font-size:14px; line-height: 1.6; color: var(--color-text-3);}
.support-wrap .bullet {margin-bottom: 30px;}
.support-wrap ul {display:flex; border-top:1px solid var(--color-bg); border-left:1px solid var(--color-bg);}
.support-wrap ul .support-item {width:25%; display: flex; flex-direction: column; row-gap: 8px; padding:30px 20px; border-right:1px solid var(--color-bg); border-bottom:1px solid var(--color-bg);}
.support-wrap ul .support-item .line {display:block; width:20px; height:1px; background-color:var(--color-primary);}
.support-wrap ul .support-item span:not(.line) {font-size:18px; font-weight:500; line-height:1.7;}
.support-wrap ul .support-item p {font-size:14px; line-height:1.6; color:var(--color-text-3);}

/* login */
.login-section {padding: clamp(60px, 8.33vw, 120px) 0;}
.login-section .login-wrap {display:flex; height:100%; column-gap: clamp(30px, 5.56vw, 80px);}
.login-section .login-thumb-swiper {width: clamp(320px, 56%, 748px); height: clamp(420px, 60.61vw, 800px); overflow: hidden;}
.login-section .login-cont {width:44%; display:flex; justify-content: center; padding-top: 60px;}
.login-section .login-cont .login-box {width:100%; max-width:400px;}
.login-section .login-cont form {width: 100%; display: flex; flex-direction: column; row-gap: 20px;}
.login-section .login-cont input {width: 100%; padding: 0 10px 8px 10px; border: 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-14); line-height: 1.6; outline: none;}
.login-section .login-cont input::placeholder {color: var(--color-text-3)}
.login-section .login-cont .input-wrap {position:relative;}
.login-section .login-cont .btn-password-view {position:absolute; bottom: 8px; right: 10px;}
.login-section .login-cont .login-util {display:flex; align-items:center; justify-content:space-between;}

/* mypage */
/* 공통부분 */
.mypage-top {background-color: var(--color-bg);}
.mypage-top .inner-s {display: flex; flex-direction: column; row-gap: 10px;}
.mypage-top h4 {font-weight: 500; text-transform: uppercase;}
.mypage-top p {color: var(--color-text-2); font-size: var(--fs-16); line-height: 1.7;}

.mypage-wrap {display:flex; align-items:flex-start; column-gap:60px;}
.mypage-aside {width:100%; max-width:220px; border:1px solid var(--color-border); flex-shrink:0; z-index: 10;}
.mypage-aside .mypage-label {display:none;}
.mypage-aside .aside-menu li + li {border-top:1px solid var(--color-border);}
.mypage-aside .aside-menu li a {position: relative; background-color: var(--color-white); padding:20px 38px 20px 18px; display:flex; align-items:center; justify-content:space-between;}
.mypage-aside .aside-menu li a::after {position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 12px; height: 8px; background: url(/img/sub/aside-arrow.svg) no-repeat center center / cover; display: block; content: '';}
.mypage-aside .aside-menu li:hover a,
.mypage-aside .aside-menu li.active a {background:var(--color-bg);}

.mypage-content {flex:1; min-width:0; display: flex; flex-direction: column; row-gap: 100px;}

.mypage-wrap .tit-wrap {display:flex; align-items:center; column-gap:20px; margin-bottom: 20px;}
.mypage-wrap .tit-wrap.tit-wrap-sb {justify-content: space-between;}
.mypage-wrap .tit-wrap.tit-wrap-l {flex-direction: column; row-gap: 3px; align-items: flex-start;}

.mypage-head {display: flex; align-items: center; justify-content: space-between; column-gap: 40px; margin-bottom: 20px;}
.mypage-head .tit-wrap {margin-bottom: 0;}

.product-list {display:flex; flex-direction:column;}
.product-item {padding:24px 0; border-bottom:1px solid var(--color-border); display:flex; align-items: flex-start; row-gap: 24px; column-gap: clamp(10px, 2.08vw, 40px);}
.product-item .product-item-t {width: 100%; display: flex; align-items: flex-start; column-gap: clamp(10px, 2.08vw, 40px);}
.product-item .thumb-wrap {width: clamp(68px, 6.25vw, 120px); height: clamp(68px, 6.25vw, 120px); flex-shrink:0; border:1px solid var(--color-border); background-color: #fff;}
.product-item .product-info-wrap {width: 100%; display: flex; flex-direction: column; row-gap: 18px;}
.product-item .product-info-wrap .info-wrap {flex:1; display:flex; flex-direction:column; row-gap:24px;}
.product-item .product-info-wrap .product-info {display:flex; flex-direction:column;}
.product-item .product-info-wrap .product-info .date {margin-top: 10px;}
.product-item .product-info-wrap .product-bottom {display:flex; align-items:center; justify-content: space-between; column-gap:20px;}
.product-item .product-info-wrap .price-wrap {display:flex; align-items:center; column-gap: 16px;}
.product-item .product-count {display: flex; align-items: center; column-gap: clamp(10px, 2.14vw, 41px); color: var(--color-text-3);}
.product-item .product-count .count {position: relative;}
.product-item .product-count .count::after {position: absolute; width: 1px; height: 14px; background-color: var(--color-border); left: -20px; top: 50%; transform: translateY(-50%); display: block; content: '';}

.product-list .order-detail-box {display:none; width:100%; align-items: flex-start; column-gap:60px;}
.product-list .order-detail-box > div {width: 50%;}
.product-list .order-detail-box .box-tit {display:block; margin-bottom: 6px; color: var(--color-text-4);}
.product-list .order-detail-box .payment-info > ul > li {display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--color-border); padding: 6px 0;}
.product-list .order-detail-box .payment-info > ul > li:not(:last-of-type) {margin-bottom: 6px;}
.product-list .order-detail-box .payment-info > ul > li span {color: var(--color-text-3);}
.product-list .order-detail-box .payment-info > ul > li.total span,
.product-list .order-detail-box .payment-info > ul > li.total span {color: var(--color-text-main);}
.product-list .order-detail-box .delivery-cont {display:flex; flex-direction:column; row-gap:2px;}
.product-list .order-detail-box .delivery-btn-wrap {display:flex; gap:7px; margin-top:20px;}
.product-list .order-detail-box .delivery-btn-wrap .btn-s {min-width: 100px;}
.product-list .product-item.active .order-detail-box {display:flex;}
.product-list .product-item.active .product-info-wrap .product-bottom .btn-order-detail svg {transform: rotate(-180deg);}

.product-list-2 .product-item {flex-direction: column;}
.product-list-2 .product-item .product-info-wrap {width: 100%; flex-direction: row; align-items: flex-start;}
.product-list-2 .product-item .product-info-wrap .product-info {flex:1; min-width:0;}
.product-list-2 .product-item .product-info-wrap .product-info .card-tit {padding: 4px 0;}
.product-list-2 .product-item .product-info-wrap .product-bottom {flex-shrink: 0; flex-direction: column; row-gap: 36px; align-items: flex-start;}
.product-list-2 .product-item .product-info-wrap .product-bottom .btn-area {column-gap: 10px;}
.product-list-2 .product-item .product-info-wrap .product-bottom .btn-default:not(.btn-delete) {min-width: 100px;}
.product-list-2 .product-item .product-info-wrap .product-bottom .btn-order-detail {transition: all 0.3s;}
.product-list-2 .product-item .product-info-wrap .product-bottom span.btn-default {background-color: var(--color-text-disabled);}

.quantity-box {width: fit-content; display:flex; align-items:center; border:1px solid var(--color-border);}
.quantity-box .qty-btn {width:32px; height:32px; font-size: var(--fs-14);}
.quantity-box input {width:32px; height:32px; font-size: var(--fs-14); border: 0; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); text-align:center;}

.sticky-wrap {display:flex; align-items:flex-start; justify-content:space-between; column-gap:60px;}
.sticky-list-area {flex:1; min-width:0;}
.order-summary {width:100%; max-width:362px; background: #fff; position:sticky; top:120px;}
.order-summary .order-toggle-btn {position: absolute; display: none; top: 0; left: 0; width: 100%; justify-content: center; align-items: center; padding: 10px 0; cursor: pointer;}
.order-summary .order-toggle-btn>span {width: 36px; height: 3px; border-radius: 999px; background-color: var(--color-text-disabled);}
.order-summary .summary-tit {font-size: var(--fs-20);}
.order-summary .summary-list {display:flex; flex-direction:column; row-gap:10px;}
.order-summary .summary-row {display:flex; align-items:center; justify-content:space-between;}
.order-summary .summary-row span {font-size:var(--fs-13); color:var(--color-text-2); font-weight: 300;}
.order-summary .summary-row strong {font-size:var(--fs-13);}
.order-summary .summary-row .free {color: var(--color-text-4);}
.order-summary .total-box {display:flex; align-items:center; justify-content:space-between;}
.order-summary .btn-wrap {display:flex; flex-direction:column; row-gap:14px;}
.order-summary-dim {position:fixed; display: none; inset:0; background:rgba(var(--color-text-main-rgb),.4); z-index:99998; transition:.4s;}

/* 장바구니 */
.cart-cont .cart-head {padding-bottom: 16px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between;}
.cart-cont .cart-head .cart-tit {font-weight:500; line-height: 1.4;}
.cart-cont .cart-head .cart-count {font-size:16px; color:var(--color-text-3);}
.cart-cont .product-list .product-item .product-info-wrap .product-bottom .product-util {display:flex; align-items:center; column-gap: 24px;}
.cart-cont .product-list .product-item .product-info-wrap .product-bottom .btn-delete {width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer;}

/* 주문 form */
.summary-coupon {row-gap: 6px;}
.summary-coupon .coupon-form {row-gap: 6px; column-gap: 6px;}
.summary-coupon .coupon-form input {width: calc(100% - 82px) !important;}
.summary-coupon .coupon-form .btn-coupon {max-width: 76px; margin-top: 0;}
.summary-coupon .coupon-result {width: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: 6px;}

.sticky-list-area.input-area {padding: 0; row-gap: 0;}
.sticky-list-area.input-area .input-group {padding: 30px;}

/* 주문내역 */
.order-state-list {display:flex; align-items:center; column-gap: clamp(10px, 1.56vw, 30px);}
.order-state-list li.arrow {display: flex;}
.order-state-list li:not(.arrow) {position:relative; flex:1; max-width: 180px; padding: 10px 0; border:1px solid var(--color-border); display:flex; flex-direction:column; align-items:center; justify-content:center; row-gap: 2px;}

.filter-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.filter-wrap .filter-menu {display: flex; gap: 10px; flex-wrap: wrap;}
.filter-wrap .filter-label {display:none;}
.filter-wrap .active .btn-default,
.filter-wrap .btn-default:hover {border: 1px solid var(--color-text-main); color: var(--color-text-main);}

/* 배송지 관리 */
.address-list {display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.address-list .address-item {display: flex; flex-direction: column; row-gap: 10px; background: #fff; transition: var(--transition); box-shadow: var(--box-shadow);}
.address-list .address-item .address-info {display: flex; flex-direction: column; row-gap: 5px; padding: 10px 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);}
.address-list .address-item .btn-area {display:flex; align-items:center; gap:8px;}
.address-list .address-item .btn-default {min-width:auto;}
.address-list .address-item:hover,
.address-list .address-item.active {border-color:var(--color-primary);}
.address-list .address-item .btn-default:hover,
.address-list .address-item.active .btn-basic {background:var(--color-primary); border-color:var(--color-primary); color: #fff;}
.address-list .address-item .btn-default:hover img,
.address-list .address-item.active .btn-basic img {filter: invert(100%) brightness(200%);}

/* 배송조회 */
.tracking-wrap {display: flex; flex-direction: column; row-gap: 60px;}
.tracking-wrap .input-area {row-gap: 20px;}
.tracking-wrap .input-area .input-bg-box {padding: 24px; row-gap: 10px;}
.delivery-info-list .delivery-info-item {display: flex; column-gap: 20px;}
.delivery-info-list .delivery-label {width: 100%; max-width: 100px;}
.delivery-state-wrap {display:flex; flex-direction:column; row-gap:30px;}
.delivery-state-list {display:flex; justify-content:space-between; position:relative;}
.delivery-state-item {position:relative; display:flex; flex-direction:column; align-items:center; row-gap:12px; z-index:1; flex:1;}
.delivery-state-item::before {content:''; position:absolute; top:clamp(18px, 2.15vw, 22px); left:calc(-50% + clamp(16px, 1.95vw, 20px)); width:calc(100% - clamp(32px, 3.9vw, 40px)); height:2px; background:var(--color-bg); z-index:-1; opacity:1;}
.delivery-state-item:first-child::before {display:none;}
.delivery-state-item.active::before {background-color:var(--color-primary);}
.delivery-state-item .state-circle {width:clamp(32px, 3.9vw, 40px); height:clamp(32px, 3.9vw, 40px); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-bg); border:1px solid var(--color-bg);}
.delivery-state-item.active .state-circle {background:var(--color-primary); border-color:var(--color-primary);}
.delivery-state-item .state-circle svg {width:clamp(16px, 1.95vw, 20px); height:auto; flex-shrink:0;}
.delivery-state-item:not(.active) .state-circle svg path {fill: var(--color-primary);}
.delivery-state-item.active .state-circle svg path {fill: var(--color-white);}
.delivery-state-item span {color:var(--color-text-2);}
.delivery-state-item.active span {color:var(--color-primary);}

/* 회원정보 수정 */
.member-form {padding: 0; row-gap: 0;}
.member-form .input-group {padding: 30px;}
.member-form .btn-member-edit img {width: 14px; height: auto;}
.member-form .agree-list {display:flex; flex-direction:column; row-gap:12px;}
.member-form .agree-item {display:flex; align-items:center; column-gap: 10px; justify-content:space-between; padding:14px 16px; border:1px solid var(--color-border); background:var(--color-bg);}
.member-form .agree-item .agree-info {display: flex; flex-direction: column; row-gap: 2px;}
.member-form .birth-area {display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.member-form .switch {position:relative; width:42px; height:24px; flex-shrink:0;}
.member-form .switch input {display:none;}
.member-form .switch span {display:block; width:100%; height:100%; border-radius:50px; background:var(--color-border); transition:.3s;}
.member-form .switch span::after {content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.3s;}
.member-form .switch input:checked + span {background:var(--color-text-main);}
.member-form .switch input:checked + span::after {left:21px;}
.member-edit-cont .mypage-content {row-gap: 30px;}
.member-edit-cont .btn-area {justify-content: space-between;}
.member-edit-cont .member-btn-wrap {display:none;}
.member-edit-cont .btn-area .common-flex-r {width: 100%;}
.member-edit-cont .btn-area .btn-default {width: 100%; max-width: 100px;}
.member-edit-cont .btn-area > a {flex-shrink: 0;}

/* 리뷰 작성 */
.review-wrap .common-tab-wrap {display:flex; align-items:center; border-bottom:1px solid var(--color-border);}
.review-wrap .common-tab-btn {min-width: 200px; display:flex; align-items:center; column-gap:10px; padding-bottom: 6px; border-bottom: 1px solid transparent; font-size: var(--fs-16); line-height: 1.6; color:var(--color-text-3); transition: var(--transition);}
.review-wrap .common-tab-btn span {display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background: #E8DDD0; font-size: var(--fs-14); color:var(--color-text-4);}
.review-wrap .common-tab-btn.active,
.review-wrap .common-tab-btn:hover {border-color:var(--color-text-main); color:var(--color-text-main);}
.review-wrap .common-tab-content {display:none; flex-direction: column; padding-top:32px;}
.review-wrap .common-tab-content.active {display:block;}
.review-wrap .common-tab-content .tit-wrap {margin-bottom: 0;}
.review-wrap .review-txt {padding: clamp(6px, 0.52vw, 10px) 0;}
.review-wrap .review-product {flex-direction: row; column-gap: clamp(10px, 2.08vw, 40px); border-bottom: 0;}
.review-wrap .review-image-list {display: flex; flex-wrap: wrap; gap: clamp(6px, 0.52vw, 10px);}
.review-wrap .review-image-list .img-wrap {width: clamp(56px, 4.17vw, 80px); height: clamp(56px, 4.17vw, 80px); border: 1px solid var(--color-border);}

.review-write-wrap {display:none;}

.review-rating-wrap {display:flex; align-items:center; column-gap:20px;}
.review-rating {display:flex; align-items:center; column-gap:4px;}
.review-rating .star-btn {padding:0; border:0; background:none; cursor:pointer;}
.review-rating .star-btn img {width:32px; height:32px; display:block;}

.review-star {width:86px; height:14px; display: block; background-repeat:no-repeat; background-position:center; background-size:contain; margin-top:10px;}
.review-star.star-1 {background-image:url('../img/sub/star1.png');}
.review-star.star-2 {background-image:url('../img/sub/star2.png');}
.review-star.star-3 {background-image:url('../img/sub/star3.png');}
.review-star.star-4 {background-image:url('../img/sub/star4.png');}
.review-star.star-5 {background-image:url('../img/sub/star5.png');}


.exchange-return-cont .checkbox-item input[type="checkbox"] {display:none;}
.exchange-return-cont .checkbox-item input[type="checkbox"] + label{position: relative; width: 100%; flex-direction: column; align-items: flex-start; padding: 20px 20px 20px 60px; background-color: var(--color-bg); cursor:pointer;}
.exchange-return-cont .checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; box-sizing: border-box; background-color: var(--color-white); width:20px; height:20px; border:1px solid var(--color-border); border-radius: 3px; left: 20px; top: 50%; transform: translate(0, -50%);}
.exchange-return-cont .checkbox-item input[type="checkbox"] + label:hover:before,
.exchange-return-cont .checkbox-item input[type="checkbox"]:checked + label:before {content:""; background-color: var(--color-primary); border: 1px solid var(--color-primary); background-image: url('/img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}

.exchange-return-cont .input-area .input-bg-box {padding: 24px;}
.exchange-return-cont .input-area .input-bg-box li {display: flex; justify-content: space-between; column-gap: 20px;}

/* 아이디 비번 찾기 */
.find-cont .find-id {width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 12px; padding: 10px;}
.find-cont .member-link {width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 14px;}
.find-cont .pw-step {display:none; flex-direction: column; row-gap: 40px;}
.find-cont .pw-step.active {display:flex;}
.find-cont .id-tab-content {flex-direction: column; row-gap: 60px;}
.find-cont .find-result-box {display:none; flex-direction:column;}

/* 상품 view */
.product-detail-wrap {display:flex; align-items:flex-start; column-gap:clamp(24px,5.2vw,100px);}
.product-detail-l {width:50%; min-width:0;}
.product-detail-r {width:50%; display:flex; flex-direction:column;}
.product-detail-r .product-detail-t {display:flex; flex-direction:column; row-gap:12px;}
.product-detail-r .product-desc {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:keep-all;}
.product-detail-r .product-quantity > span {padding-bottom: 6px;}
.product-detail-r .btn-area {column-gap: 10px;}
.product-detail-swiper {position:relative; overflow:hidden; border:1px solid var(--color-border);}
.product-detail-swiper .img-wrap {height: 700px; aspect-ratio:1/1;}
.product-detail-swiper .swiper-pagination {display: none;}
.product-detail-swiper .swiper-button-prev,
.product-detail-swiper .swiper-button-next {width:clamp(36px,2.08vw,40px); height:clamp(36px,2.08vw,40px); background-color:var(--color-white); border:1px solid var(--color-border); box-shadow:var(--box-shadow); outline:none;}
.product-detail-swiper .swiper-button-prev svg,
.product-detail-swiper .swiper-button-next svg {display:none;}
.product-detail-swiper .swiper-button-prev {left:clamp(12px,1.04vw,20px)!important;}
.product-detail-swiper .swiper-button-next {right:clamp(12px,1.04vw,20px)!important;}

.accordion-list {border-top:1px solid var(--color-border);}
.accordion-item {border-bottom:1px solid var(--color-border);}
.accordion-item .accordion-head {position: relative; width:100%; display:flex; align-items:center; justify-content:space-between; column-gap:20px; padding:clamp(20px,1.56vw,30px) clamp(20px,1.77vw,34px) clamp(20px,1.56vw,30px) 10px; background:none; border:0; cursor:pointer; text-align:left;}
.accordion-item .accordion-head::after {content:''; position:absolute; top:50%; right:10px; width:8px; height:8px; border-right:2px solid var(--color-text-2); border-bottom:2px solid var(--color-text-2); transform:translateY(-65%) rotate(45deg); transition:transform 0.2s;}
.accordion-item.open .accordion-head {padding:clamp(20px,1.56vw,30px) 10px clamp(16px,1.04vw,20px);}
.accordion-item.open .accordion-head::after {transform:translateY(-50%) rotate(225deg);}

.accordion-item .accordion-body {height:0; overflow:hidden; transition:height .3s ease;}
.accordion-item .accordion-body .circle-bullet {font-size: var(--fs-16); column-gap: 10px; word-break: keep-all;}
.accordion-item .accordion-body .circle-bullet span {width: 4px; height: 4px; margin-top: 10px; background-color: var(--color-text-2); flex-shrink: 0;}
.accordion-item .accordion-inner {padding:0 10px clamp(20px,1.56vw,30px);}

.product-detail-tab-wrap {position: sticky; top: 98px;  margin-bottom: 40px;}
.detail-section .detail-image {max-width: 1000px; margin: 0 auto;}
.detail-section .detail-section-tit {margin-bottom:clamp(20px,1.56vw,30px);}
.detail-section .detail-table {border-top: 1px solid var(--color-border);}
.detail-section .detail-table li {display: flex; align-items: flex-start;}
.detail-section .detail-table .detail-label {width: 100%; max-width:clamp(220px,14.58vw,280px); height: stretch; display: block; flex-shrink: 0; padding: 20px; background-color:rgba(var(--color-primary-rgb),.1); border: 1px solid var(--color-border); border-top: 0;}
.detail-section .detail-table .detail-info {width: 100%; display: block; background-color: var(--color-white); padding: 20px; border: 1px solid var(--color-border); border-left: 0; border-top: 0;}

.product-review-wrap .main-tit {row-gap: 12px;}
.product-review-wrap .review-t {display: flex; align-items: center; justify-content: space-between; column-gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-gray);}

.product-review-wrap .review-list {display:flex; flex-direction:column;}
.product-review-wrap .review-item {display:flex; align-items:flex-start; column-gap:clamp(40px,5.2vw,100px); padding: 40px 10px; border-bottom:1px solid var(--color-border);}
.product-review-wrap .review-info {flex:0 0 clamp(140px,14.58vw,280px); display:flex; flex-direction:column; align-items:flex-start; row-gap: 4px;}
.product-review-wrap .review-cont {flex:1; min-width:0;}
.product-review-wrap .review-star {margin-top: 0;}
.product-review-wrap .review-image-list .img-wrap {width:clamp(80px,5.73vw,100px); aspect-ratio:1/1; border:1px solid var(--color-border);}
.product-review-wrap .review-like-btn {display:inline-flex; align-items:center; column-gap:4px; width:fit-content; transition:var(--transition);}
.product-review-wrap .review-like-btn svg path {transition:var(--transition);}
.product-review-wrap .review-like-btn:hover,
.product-review-wrap .review-like-btn.active {color:var(--color-primary);}
.product-review-wrap .review-like-btn:hover svg path,
.product-review-wrap .review-like-btn.active svg path {fill:var(--color-primary);}
.product-review-wrap .btn-area {margin-top:clamp(32px,2.5vw,48px);}

/* 반응형 */
@media screen and (min-width: 1920px) {

}
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1440px) {
    .product-detail-swiper .img-wrap {height: 49vw;}
}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1024px) {

    .order-summary {position: fixed; z-index:99999; top: auto; bottom: 0; left: 0; max-width: 100%; padding: 20px 20px 30px; border-radius: 20px 20px 0 0; row-gap: 0;}
    .order-summary .order-summary-t {display:none;}
    .order-summary .line {margin: 20px 0;}
    .order-summary .total-box {margin-bottom: 30px;}
    .order-summary .order-toggle-btn {display: flex;}
    .order-summary .btn-wrap .btn-line {display: none;}
    .order-summary.active .btn-wrap .btn-line {display: flex;}

    .mypage-aside {max-width: 100%; position: sticky; top: 98px;}
    .mypage-wrap {flex-direction: column; row-gap: 40px;}
    .mypage-aside .mypage-label {position: relative; background-color: var(--color-white); height: 46px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding: 0 10px;}
    .mypage-aside .mypage-label::after {content:''; position:absolute; top:50%; right:10px; width:6px; height:6px; border-right:2px solid var(--color-text-3); border-bottom:2px solid var(--color-text-3); transform:translateY(-65%) rotate(45deg); transition:transform 0.2s;}
    .mypage-aside.active .mypage-label {border-bottom: 1px solid var(--color-border);}
    .mypage-aside.active .mypage-label::after {transform:translateY(-50%) rotate(225deg);}
    .mypage-aside .aside-menu {display:none;}
    .mypage-aside .aside-menu li a {height: 46px; padding: 0 10px;}
    .mypage-aside .aside-menu li a::after {display: none;}

    .mypage-content {width: 100%; row-gap: 40px;}

}
@media screen and (max-width: 768px) {
    .login-section .login-wrap {flex-direction: column; row-gap: clamp(30px, 4.17vw, 60px);}
    .login-section .login-thumb-swiper {width: 100%;}
    .login-section .login-cont {width: 100%; padding-top: 0;}
    .login-section .login-cont .login-box {max-width: 100%; row-gap: clamp(30px, 4.17vw, 60px);}
    .login-section .login-thumb-swiper {height: 48vw;}
    
    .login-section .common-pagination.swiper-pagination {column-gap: 1.4vw; bottom: 5vw !important;}
    .login-section .common-pagination.swiper-pagination .swiper-pagination-bullet {width: 1.2vw; height: 1.2vw;}
    .login-section .common-pagination.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 3.2vw;}

    .product-list-2 .product-item .product-info-wrap {flex-direction: column; row-gap: 10px;}
    .product-list-2 .product-item .product-info-wrap .product-bottom {row-gap: 10px;}
    .product-list .product-item.active .order-detail-box {flex-direction: column; row-gap: 40px;}
    .product-list .order-detail-box > div {width: 100%;}
    
    .address-list {grid-template-columns: repeat(1,1fr);}

    .product-detail-wrap {width: 100%; flex-direction: column; row-gap: 40px; align-items: center; padding: 0 0 80px 0;}
    .product-detail-l {width: 100%;}
    .product-detail-r {width: calc(100% - 40px); row-gap: 24px;}
    .product-detail-r .btn-default {width: 100%;}
    .product-detail-swiper {border: 0; display: flex !important; flex-direction: column; row-gap: 24px;}
    .product-detail-swiper .img-wrap {border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); height: 76vw;}
    .product-detail-swiper .img-wrap img {object-fit: contain;}
    .product-detail-swiper .swiper-button-prev,
    .product-detail-swiper .swiper-button-next {display: none;}
    .product-detail-swiper .swiper-pagination {position: revert; display: flex; align-items: center; justify-content: center; column-gap: 8px;}
    .product-detail-swiper .swiper-pagination .swiper-pagination-bullet {margin: 0 !important; background-color: var(--color-white); border: 1px solid var(--color-primary); opacity: 1 !important;}
    .product-detail-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--color-primary);}

    .detail-section .detail-table li {flex-direction: column;}
    .detail-section .detail-table .detail-label {max-width: 100%; padding: 16px;}
    .detail-section .detail-table .detail-info {padding: 16px; border-left: 1px solid var(--color-border);}

    .product-review-wrap .review-item {flex-direction: column; row-gap: 24px;}
    .product-review-wrap .review-info {flex: 1; flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 12px;}
    .product-review-wrap .review-info .review-score {width: 100%;}
}
@media screen and (max-width: 600px) {

}
@media screen and (max-width: 500px) {
    .order-summary .line {margin: 12px 0;}

    .filter-wrap {flex-direction: row; column-gap: 10px;}
    .filter-wrap .filter-select {position: relative; width: 50%;}
    .filter-wrap .filter-select .filter-label  {position: relative; height: 46px; padding: 0 10px; border: 1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
    .filter-wrap .filter-select .filter-label::after {content:''; position:absolute; top:50%; right:10px; width:6px; height:6px; border-right:2px solid var(--color-text-3); border-bottom:2px solid var(--color-text-3); transform:translateY(-65%) rotate(45deg); transition:transform 0.2s;}
    .filter-wrap .filter-select.active .filter-label {border-bottom: 1px solid var(--color-border);}
    .filter-wrap .filter-select.active .filter-label::after {transform:translateY(-50%) rotate(225deg);}
    .filter-wrap .filter-menu {display:none; position: absolute; width: 100%; z-index: 1;}
    .filter-wrap .filter-menu li {width: 100%; height: 46px; border: 1px solid var(--color-border); border-top: 0;}
    .filter-wrap .filter-menu li .btn-default {width: 100%; height: 100%; justify-content: flex-start; font-size: var(--fs-16) !important; padding: 0 10px; border: 0;}
    .filter-wrap .filter-menu li:hover .btn-default,
    .filter-wrap .filter-menu li.active .btn-default {background-color: var(--color-bg);}

    .order-state-list {column-gap: 2vw;}
    .order-state-list .body-lg {font-size: 3.3vw;}
    .order-state-list .eyebrow {font-size: 2.5vw;}
    .order-state-list li.arrow {height: 3.3vw;}

    .product-list .order-detail-box .delivery-btn-wrap {flex-wrap: wrap;}

    .product-detail-r {width: calc(100% - 32px);}
    .product-detail-swiper .img-wrap {height: 84vw;}
    .product-detail-tab > button {width: calc(100% / 3); font-size: 3.2vw;}

    .mypage-head {flex-wrap: wrap; row-gap: 10px;}
    .member-edit-cont .btn-area {flex-direction: column-reverse; row-gap: 10px; align-items: flex-start;}
    .member-edit-cont .btn-area .btn-default {max-width: 100%;}

    .review-wrap .common-tab-btn {min-width: revert; width: 50%; justify-content: center;}

}
@media screen and (max-width: 375px) {
    .member-form,
    .sticky-list-area.input-area {row-gap: 40px;}
    .member-form .input-group,
    .sticky-list-area.input-area .input-group {padding: 0;}

    .order-state-list {column-gap: 0;}
    .order-state-list li.arrow {display: none;}
    .order-state-list .body-lg {font-size: 4.5vw;}
    .order-state-list .eyebrow {font-size: 3.5vw;}
    .order-state-list li:not(.arrow):not(:last-of-type) {border-right: 0;}

    .product-list .product-item .product-item-t {flex-direction: column; row-gap: 20px;}

    .review-wrap .common-tab-btn {font-size: 4vw;}

    .delivery-state-item span {font-size: 12px;}

}

/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/
/**********/