@charset "utf-8";
/* 2026.05 YOU Design theme header/footer Style */
.shop-wrapper {width:100%; margin-top: 186px; /*처음 상태: 탑배너(100px) + 헤더(86px) */}
body:not(:has(.main-header)) .shop-wrapper { margin-top: 0;} /* header가 없을 경우 */


/* header style */
.main-header {width: 100%; left: 0; top: 0; display: block; position: fixed;}
.main-header .top-banner { position: relative; width: 100%; overflow: hidden; height:100px; }
.main-header .top-banner .close-btn { position: absolute; z-index: 10; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.main-header .top-banner .content {position: relative;width: 100%;height:100%; overflow:hidden; background:#82C13B;text-align: center;}
.main-header .top-banner .content a {display: block;height: 100%;}
.main-header .header-wrap {position:relative;width: 100%;height:86px;background: #fff;border-bottom: 1px solid #E7E7E7;}
.main-header .header-wrap .content {position: relative;width: 1400px;display: flex;align-items: center;height: 100%;margin: 0 auto;justify-content: space-between;}
.main-header .header-wrap .content ul{display: flex;align-items: center;gap: 0px 15px;}
.main-header .header-wrap .content ul li.logo {width: 160px; margin-right: 100px;}
.main-header .header-wrap .content ul li.logo a { display:block;}
.main-header .header-wrap .content ul li.nav {font-size:18px;font-weight:700;color:#2C2C2C;display: flex;gap: 0 80px;}
.main-header .header-wrap .content ul.mamber li a {display:block;}
.main-header .header-wrap .content ul li.nav a.on { color:#82C13B;}
.main-header .header-wrap .content ul li.nav a.on::after {content:"";width:100%;height: 3px;background:#82C13B;position: absolute;bottom: -33px;left: 0;}
.main-header .header-wrap .content ul.mamber li.search-box .search {height: 40px;padding: 0 15px;background: #efefef;border-radius: 20px;display: flex;align-items: center;}
.main-header .header-wrap .content ul.mamber li.search-box .search input {height: 30px;background: #efefef;border: 0;box-shadow: none;padding: 0;width: 150px;}

.main-header .header-wrap .content .nav-icon { display:none; }
/* footer style */
.footer-box.mbox { display: none; }
.footer-box {margin-top:200px;position: relative; display: flex; width: 100%; height: 238px; background: #3c3c3c; justify-content: center;}
.footer-box .content { width: 1400px; padding: 56px 0; display: flex;justify-content:space-between;align-content:flex-start;}
.footer-box .content ul.conbox-right { text-align: right; width: 750px;}
.footer-box .content ul li {color: #e4e4e4;font-size: 12px;}
.footer-box .content ul li p {color: #e4e4e4;}
.footer-box .content ul li.tel {font-size: 32px;font-weight: 700;}
.footer-box .content ul li.cs-center { font-size: 16px; margin: 17px 0;}
.footer-box .content ul li.cs-center p { margin-top: 5px;}
.footer-box .copy {font-size: 12px;}
.footer-box .sns-group { display: flex;justify-content: flex-end;gap: 8px;}
.footer-box .sns-group a { display: block; width: 18px; height: 18px;}
.footer-box .corp-service { display: flex;column-gap: 35px; justify-content: flex-end; margin: 10px 0;}
.footer-box .corp-service a {display: block;}
.footer-box .content ul li.corp-info {display: flex; flex-direction: row; flex-wrap: wrap;gap: 5px 10px;justify-content: flex-end;margin-top: 49px;}
.footer-box .content ul li.corp-info p {font-size: 12px;}
.footer-box .content ul li.corp-info p {color: #949494;}
.footer-box .content ul li.corp-info p span {color: #e4e4e4; font-size: 12px; margin-left: 5px;}
/* mobile menu */
.menu-overlay { position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 99999;display: none;/*기본은 숨김 */}
.menu-mbox {position: absolute;right: 0;top: 0;width: 95%;height: 100%;background: #fff;display: flex;flex-direction: column;}
.menu-header-blue {background: #82C13B;color: #fff;}
.menu-header-blue .close-btn {text-align: right;padding: 20px 15px;}
.menu-header-blue .close-btn > img { width:7%;}
.menu-header-blue .login-name {font-size: 16px;padding: 0px 30px;}
.menu-header-blue .login-name a {display: flex;align-items: center;color: #fff;font-size: 18px;text-decoration: none;}
.menu-header-blue .login-name a img {margin-left: 15px;}
.menu-header-blue .nav-icons {display: flex;flex-direction: row;padding: 30px 0;}
.menu-header-blue .nav-icons li { width:33.33%;}
.menu-header-blue .nav-icons a {display: flex;flex-direction: column;align-items: center;}
.menu-header-blue .nav-icons img {width: 30px;margin-bottom: 10px;}
.menu-header-blue .nav-icons p {font-size: 14px;color: #fff;}
/* 카테고리 타이틀 */
.category-section .txt-group {display: flex;justify-content: space-between;align-items: center;padding: 10px 30px;border-bottom: 5px solid #F2F2F2;}
.category-section .txt-group .title {font-size: 16px;font-weight: 700;color: #333;}
.category-section .txt-group a{ text-align: right;}
.category-section .txt-group a > img {width: 84%;}
/* 카테고리 그리드 (3칸씩) */
.category-grid {display: flex;flex-wrap: wrap;border-top: 1px solid #E7E7E7;border-bottom: 5px solid #F2F2F2;}
.category-grid li {width: 33.333%;border-right: 1px solid #E7E7E7;border-bottom: 1px solid #E7E7E7;text-align: center;box-sizing: border-box;}
.category-grid li > a {display:flex;flex-direction: column;align-items: center;padding: 20px 0;}
.category-grid li:nth-child(3n) {border-right: none;}
.category-grid li span {font-size: 14px;margin-top: 13px;}
/*메뉴 footer*/
.menu-footer-wrap {margin-top: auto;}
.menu-footer-wrap .menu-footer {display: flex;border-top: 5px solid #F2F2F2; /* 아래쪽 선 추가 */ }
.menu-footer-wrap .menu-footer li {width: 50%;border-right: 1px solid #E7E7E7;border-top: 1px solid #E7E7E7;border-bottom: 1px solid #E7E7E7;}
.menu-footer-wrap .menu-footer li:last-child { border-right: none; }
.menu-footer-wrap .menu-footer li a {display: flex;align-items: center;justify-content: flex-start;font-size: 14px;padding: 10px 30px;}
.menu-footer-wrap .menu-footer li a img {margin-right: 8px;width: 14px;}
.menu-footer-wrap .menu-bottom-links {display: flex;justify-content: center;align-items: center;background-color: #F2F2F2; padding: 15px 0;}
.menu-footer-wrap .menu-bottom-links li {position: relative;padding: 0 10px;}
.menu-footer-wrap .menu-bottom-links li::after {content: "";position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 1px;height: 10px;background-color: #ccc;}
.menu-footer-wrap .menu-bottom-links li:last-child::after {display: none; }
.menu-footer-wrap .menu-bottom-links li a {font-size: 12px;}
/* 그외 */
#turnNotice { padding:0;}
#turnNotice .inner, #registerSelect .inner, #turnRegister .turnRegInner { position: relative;top: 83px; padding:0;}
#turnNotice .title { font-size: 30px;font-weight: 700;text-align: center;margin-bottom: 55px;}



/* 플로팅 TOP 버튼 기본 스타일 */
.floating-top-btn {
    position: fixed;
    bottom: 50px; /* 바닥에서의 높이 (1400px 브라우저 고려해서 적당한 위치) */
    right: 40px;  /* 우측 여백 */
    z-index: 999; /* 최상단 배치 */
    
    width: 50px;
    height: 50px;
    border-radius: 50px; /* 완벽한 원형 */
    border: 1px solid #E7E7E7;
    background-color: #ffffff;
    color: #333333;
    
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* 부드러운 그림자 */
    
    /* 화면 표시 전환 및 애니메이션 효과 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    transform: translateY(10px); /* 처음에 살짝 아래에 내려가 있음 */
}

/* 🌟 스크롤 내렸을 때 버튼이 나타나는 클래스 (스크립트로 제어) */
.floating-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* 제자리로 슥 올라오면서 나타남 */
}


/* 반응형 */
@media screen and (max-width: 1399px) {
/* header style */
.main-header .header-wrap .content {width:1200px;}
/* footer style */
.footer-box .content { width: 1100px; padding:56px 30px; }
.footer-box .content ul li.cs-center {font-size:14px; }

}

@media screen and (max-width: 1099px) {
.shop-wrapper {width:100%; margin-top: 166px; /*처음 상태: 탑배너(100px) + 헤더(86px) */}
/* header style */
.main-header .top-banner{ height: 80px; } /* 배너 높이 살짝 축소 */
.main-header .top-banner .content a img {width: 50%;} 
.main-header .top-banner .close-btn { right: 15px; }
.main-header .top-banner .close-btn > img { width: 80%; }
.main-header .header-wrap .content ul li.logo { width: 100%; }
.main-header .header-wrap .content ul li.logo > a > img { width: 90%; }
.main-header .header-wrap .content ul.mamber, .main-header .header-wrap .content ul li.nav { display: none; }
.main-header .header-wrap .content .nav-icon { display: block; cursor: pointer; }
.main-header .header-wrap .content { width: 90%; }

/* footer style */
.footer-box {display: none;}
.footer-box.mbox {display: block;height: auto;}
.footer-box .content {width: 100%;padding: 30px 20px;margin: 0 auto;flex-direction: column;align-items: flex-start; }
.footer-box .content ul li.tel { font-size:28px;}
.footer-box .content ul li.cs-center {font-size:14px; }
.footer-box .content ul li.corp-info {justify-content: flex-start; margin-top:25px;}
.footer-box .content.corp-box {width: 100%;padding: 20px;background: #494949;}
.footer-box .content.corp-box > li,
.footer-box .content.corp-box > li a {color: #e4e4e4; font-size:12px;}
.footer-box .corp-service {display: flex;column-gap: 15px;justify-content: flex-end;margin: 0px 0 5px;}
.footer-box.mbox .sns-group { position: absolute;top: 30px;right: 40px; }

}

@media screen and (max-width: 767px) {
.shop-wrapper {margin-top: 140 px; } 
/* header style */
.main-header .header-wrap { height:80px}
.main-header .top-banner { height: 60px; } /* 모바일 배너 높이 축소 */
.main-header .top-banner .content a img { width:80%;}
.main-header .top-banner .close-btn { right: 10px; }
.main-header .top-banner .close-btn > img { width: 70%; }
.main-header .header-wrap .content ul li.logo > a > img {width: 80%;}
/* 햄버거아이콘 */
.nav-icon > img {width: 90%; }
}


/* 다른 화면 비율 정리*/
@media (min-width: 1921px) {
.shop-wrapper #turnMypage .inner { max-width:1400px;     padding-top: 10rem; width: 90%;}
.shop-wrapper #turnCart .inner {max-width:1400px;     padding-top: 10rem; width:90% }
.shop-wrapper #turnLogin .inner { max-width:1400px;     padding-top: 10rem; width:90%}
#turnNotice .inner, #registerSelect .inner, #turnRegister .turnRegInner { max-width:1400px; margin:0 auto; width:90%}

}