@charset "utf-8"; /* XEICON CDN */
@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100; 200; 300; 400; 500; 600; 700; 800; 900&family=Noto+Sans+KR:wght@300; 500; 700; 900&display=swap'); @font-face { font-family: 'Pretendard-Black'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff'); font-weight: 900; font-style: normal; } 
@font-face { font-family: 'Pretendard-Medium'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } 
@font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } 
@font-face { font-family: 'Pretendard-ExtraLight'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; } 
/* Pretendard Variable */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); /* Reset CSS */
* { margin: 0; padding: 0; box-sizing: border-box; } 
html, body { padding: 0; margin: 0; box-sizing: border-box; } 
body { font-family: 'Pretendard-Regular', 'Noto Sans KR', sans-serif; font-weight: 400; } 
a { text-decoration: none; color: #222; } 
button, input { outline: none; } 
h1,h2,h3,h4,h5,h6 { font-family: 'Pretendard-Regular', 'Noto Sans KR', sans-serif; margin-top: 0; font-weight: normal; line-height: 1.5em; } 
ul { margin: 0; padding: 0; } 
li { list-style: none; text-decoration: none; } 
button, input { outline: none; } 
body { -ms-overflow-style:none; /* 인터넷 익스플로러 */
 scrollbar-width: none; /* 파이어폭스 */ } 
body::-webkit-scrollbar { display:none; } /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
/* 공통 */
.jiWrap { position: relative; margin: auto; width: 100%; max-width: 1300px; padding: 5px 15px; } 
.SBtween { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 0.9rem; } 

#jiMainWrap { position: relative; display: block; margin: auto; width: 100%; height: 100%; } 
#sub-container { position: relative; margin: 0 auto; width: 100%; max-width: 1300px; padding: 30px 0; min-height: calc(100vh - 500px); } 
#sub-container:after { content: ''; display: block; clear: both; } 

/*퀵메뉴*/
#jiQuick { position: fixed; top: 45%; right: 3.75rem; transform: translateY(-50%); padding: 2rem 1.25rem 2.2rem; font-size: 1.06rem; border: 1px solid #dcdcdc; border-radius: 1.25rem; background: #FFF; box-shadow: 0 0 20px rgba(159, 159, 159, 0.3); z-index: 3; } 
#jiQuick article > div { display: block; margin-bottom: 2.2rem; text-align: center; } 
#jiQuick article > div:last-of-type { margin-bottom: 0; } 
#jiQuick article > div img { display: block; margin: auto; width: 40px; } 
#jiQuick article > div span { display: block; padding-top: 1rem; font-size: 0.95rem; color: #6a6a6a; } 
#jiQuick article > a { position: absolute; bottom: -130px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 50%; box-shadow: 3px 3px 20px rgba(159,159,159,0.3); } 
#jiQuick article > a img { width: 100%; } 

/*모바일 퀵메뉴*/
@media screen and (max-width:1500px){
 #jiQuick { display: none; } 
 }

/*최상단메뉴*/
 #jiHeader { display: block; text-align: right; display: flex; align-items: center; width: 100%; height: 48px; border-bottom: 1px solid #e8e8e8; } 
 #jiHeader .jiWrap { max-width: 1300px; padding: 0; } 
 #jiHeader a { display: inline-block; padding: 0 12px; font-size: 13px; position: relative; } 
 #jiHeader a:not(:first-of-type)::after { display: inline-block; content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; margin-top: -5px; background: #000; } 

 /* #jiHeader { display: none; } 
@media screen and (max-width:1023px){
 #jiHeader { display: block; text-align: right; display: flex; align-items: center; width: 100%; height: 50px; font-size: 0.9rem; } 
 #jiHeader .jiWrap { max-width: 1200px; margin-bottom: 10px; font-size: 1rem; } 
 #jiHeader a { display: inline-block; padding: 0 5px; } 
 }
@media screen and (max-width:500px){
 #jiHeader .class_none { display: none; } 
#jiHeader a { font-size: 0.8rem; } 
 }
@media screen and (max-width:400px){
 #jiHeader .display_no2 { display: none; } 
 }*/

/*검색*/
#searchBox { display: flex; align-items: center; height: 150px; border-bottom: 1px solid #e8e8e8; } 
#searchBox .jiWrap { display: flex; justify-content: space-between; align-items: center; } 
#searchBox .jiWrap .logo { display: block; width: 240px; } 
#searchBox .jiWrap .logo > img { width: 100%; max-width: 100%; } 
#searchBox > div > img { display: inline-block; margin-right: 2rem; padding-top: 5px; max-width: 200px; } 
#searchBox button { border: none; background: #f5f5f5; } 
#searchBox .searchWrap p { color: #f5f5f5; opacity: 80%; margin-top: 10px; } 
/* #searchBox .searchWrap { margin-left: 30px; } */
#searchBox .search { display: flex; width: 300px; height: 48px; border-radius: 44px; padding: 0 30px; background: #f5f5f5; justify-content: space-between; } 
/* #searchBox .search { display: flex; width: 300px; height: 55px; border: 2px solid #B7C800; border-radius: 44px; padding: 0 30px; background: #FFF; justify-content: space-between; }  */
/* #searchBox .search { display: flex; width: 508px; height: 55px; border: 2px solid #B7C800; border-radius: 44px; padding: 0 30px; background: #FFF; justify-content: space-between; } */
#searchBox .search i.xi-search { display: inline-block; font-size: 1.5rem; cursor: pointer; color: #707070; } 
#searchBox .search > input { width: 90%; border: none; font-family: 'Pretendard-Regular'; color: #333; font-size: 16px;background: #f5f5f5; } 
#searchBox .search > input::placeholder { font-family: 'Pretendard-Regular'; color: #6a6a6a; font-size: 18px; opacity: 0.8; }
#searchBox .left {width: 300px;} 
#searchBox .left .notice {padding-top: 16px;height: 60px;} 
#searchBox .left .notice .title {font-weight: 600;font-size: 0.85rem;color: #333;} 
#searchBox .left .notice-slider {margin-top: 8px;height:20px;} 
#searchBox .left .notice-slider a {display: flex;align-items: center;} 
#searchBox .left .notice-slider a p {width: calc(100% - 60px);font-size: 0.85rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #555;} 
#searchBox .left .notice-slider a .date {display: block;width: 60px;color: #777;} 
@media screen and (max-width:1023px) { /* #searchBox .jiWrap { justify-content: space-evenly; } */ } 
@media screen and (max-width:900px) { /* #searchBox .jiWrap { flex-direction: column; gap: 15px; } */
 /* #searchBox .jiWrap > a > img { width: 100px; } */
 #searchBox .searchWrap { margin: 0; /*margin-top: 30px; */ } 
 }
@media screen and (max-width:640px){
 #searchBox .search { width: 400px; } 
 }
@media screen and (max-width:500px){
 #searchBox .jiWrap { flex-direction: column; } 
 #searchBox .jiWrap a { } 
 #searchBox .jiWrap a img { } 
 #searchBox .searchWrap { display: none; } 
 #searchBox .search { width: 300px; margin: 0 auto; } 
 #searchBox #popular { width: 300px; } 
 }

/* 상단메뉴 */
.top-btn { display: flex; gap: 20px; } 
.top-btn > a { font-size: 24px; color: #555; display: block; width: 24px; height: 24px; position: relative; transition: all 0.3s ease; } 
.top-btn > a::after { color: #007CCF; font-size: 14px; display: block; position: absolute; width: max-content; transform: translateX(-50%); left: 50%; bottom: -24px; opacity: 0; padding-top: 8px; transition: all 0.3s ease; } 
.top-btn > a.btn-adm::after { content: '관리자'; } 
.top-btn > a.btn-mypage::after { content: '마이페이지'; } 
.top-btn > a.btn-login::after { content: '로그인'; } 
.top-btn > a.btn-join::after { content: '회원가입'; } 
.top-btn > a.btn-logout::after { content: '로그아웃'; } 
.top-btn > a.btn-cart::after { content: '장바구니'; } 
.top-btn > a.btn-qna::after { content: '1:1 문의'; } 
.top-btn > a:hover { color: #007CCF; } 
.top-btn > a:hover::after { opacity: 1; } 
@media screen and (max-width:1023px){
 .top-btn { display: none; } 
 }

/*메뉴*/
#jiNav { height: 60px; border-bottom: 1px solid #e8e8e8; position: relative; } 
#jiNav .jiWrap { display: flex; align-items: center; max-width: 1300px; height: inherit; padding:0; } 
#jiNav .category { position: absolute; top: 0; left: 0; margin: 0; width: 208px; } 
#jiNav .category a { position: relative; color: #FFF; display:block } 
#jiNav .category > li { background: #103398; transition: all 0.3s ease; } 
#jiNav .category li:hover { background: #103398; } 
#jiNav .category > li > a { position: relative; padding-left: 75px; height: 60px; line-height: 60px; font-size: 1.125rem;; } 
#jiNav .category > li > a:before { content:''; position: absolute; top: 50%; left: 35px; transform: translateY(-50%); display: block; width: 16px; height: 14px; background: url('../img/hamburger.svg') no-repeat center center / cover; z-index: 1; } 
#jiNav .category > li ul { position: absolute; top: 60px; left: 0; width: 208px; z-index: -1; font-size: 1rem; visibility: hidden; opacity: 0; transition: all 0.3s ease; } 
#jiNav .category > li:hover ul { visibility: visible; opacity: 1; z-index: 2; } 
#jiNav .category > li ul li { padding-left: 2rem; height: 48px; line-height: 48px; border-top: 1px solid #4a76f7; background: #2D5DE9; transition: all 0.3s ease; } 
#jiNav .menu { display: flex; justify-content: center; margin: auto; width: 100%; height:100%; } 
/* #jiNav .menu { display: flex; justify-content: center; margin: auto; width: 55%; height:100%; } */
#jiNav .menu > li { position:relative; /*width: calc(100% / 10); */ flex: 1; } 
/* #jiNav .menu > li:nth-child(n+11) { display: none; } */
/* #jiNav .menu > li { position:relative; display: inline-block; } */
/* #jiNav .menu > li:not(:first-of-type)::after { content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:30px; border-left: 1px solid #dedede; } */
#jiNav .menu > li > a { display:block; width:100%; height:100%; padding: 0 10px; font-size: 1.125rem; line-height:60px; color: #000; transition: all 0.3s ease; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
/* #jiNav .menu > li > a { display:block; width:100%; height:100%; padding: 0 3rem; font-size: 1.125rem; line-height:60px; color: #000; transition: all 0.3s ease; } */
#jiNav .menu > li:hover > a { color:#007CCF; } 

/*메뉴 - 2depth*/
#jiNav .sub-menu { display:none; position:absolute; top:60px; left:50%; transform:translateX(-50%); width:200px; padding:1.5rem 0 0.5rem; z-index:10; background-color:#fff; border:1px solid #e8e8e8; border-top:none; } 
/* #jiNav .sub-menu { display:none; position:absolute; top:60px; left:50%; transform:translateX(-50%); width:200px; padding:1.5rem 0 0.5rem; z-index:10; background-color:#fff; border:1px solid #e8e8e8; border-top:none; } */
/* #jiNav .sub-menu { display:none; position:absolute; top:60px; left:50%; transform:translateX(-50%); width:100%; padding:1.5rem 0 0.5rem; z-index:10; background-color:#fff; border:1px solid #e8e8e8; border-top:none; } */
#jiNav .menu > li:hover .sub-menu { display:block; } 
#jiNav .menu > li:hover .sub-menu:not(:has(li)) { display:none; } 
#jiNav .sub-menu li { width:100%; padding: 0 1rem 1rem; } 
#jiNav .sub-menu li a { display:block; width:100%; height:100%; font-size: 1.1rem; text-align:center; color: #000; transition: all 0.3s ease; } 
#jiNav .sub-menu li:hover > a { color:#007CCF; } 
#jiNav .logo { position: absolute; right: 0; } 

/*모바일 메뉴*/
#jiNavMobile { display: none; } 
#jiNavMobile .ham-btn { display: block; width: 50px; height: 50px;background:none;border:0;cursor:pointer;} 
#jiNavMobile .ham-btn::before { content:''; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); display: block; width: 18px; height: 16px; background: url('../img/hamburger_black.svg') no-repeat center center / cover; z-index: 1; } 
#jiNavMobile .m-logo { position: inherit; display: block; height: 28px; padding-left: 1rem; } 
#jiNavMobile .m-logo img { width: auto; height: 100%; } 
#jiSideBar { position: fixed; top: 0; right:-80%; display: block; width:80%; height: 100%; background: #FFF; z-index: 1000;overflow:hidden auto;box-shadow: 10px 5px 15px -10px gray; transition:right .3s;} 
#jiSideBar.active {right:0;}
#jiSideBar::after { content:''; position: absolute; top: 0; right: 100%; display: block; width: 50%; height: 100%; background: black; z-index: 1000; opacity: 0.8; } 
#jiSideBar > h2 { height: 60px; background: #00438c; } 
#jiSideBar > h2 img { padding: 1rem 0 0 1rem; width: 60%; } 
#jiSideBar > ul li a,
#jiSideBar > ul li button {position:relative;display: block; padding-left: 1.5rem; width: 100%; height: 50px; line-height: 50px;text-align:left;font-size: 1rem;background:none;border:0;} 
#jiSideBar > ul li a.active { font-weight: bold; background: #E9F2FF; } 
#jiSideBar > ul li:hover .hover_a { background: #E9F2FF; } 
#jiSideBar > ul li .btn-toggle i {position:absolute;right:1.5rem;top:calc(50% - 8px);}
#jiSideBar > ul li .btn-toggle.active i {transform:rotate(180deg);}
#jiSideBar > ul li .sub-menu {display:none;}
#jiSideBar > ul li .sub-menu li a {padding-left:3rem;height:40px;line-height:40px;}
#jiSideBar .sideBarClose { display: flex; align-items: center; width: 40px; height: 60px;background:none;border:0;cursor:pointer;} 
#jiSideBar .sideBarClose img { display: block; padding: 0; width: 50%; } 
#jiSideBar .Quick_sb_bar { display: flex; justify-content: flex-start; padding: 30px 0 10px 20px; background-color: #fff; margin-bottom: 30px; } 
#jiSideBar .Quick_sb_bar a { border: none; padding: 0 30px 0 30px; background:linear-gradient(105deg, #00427C 13.68%, #002F58 89.45%); color: #fff; text-align: center; margin-bottom: 10px; height: auto; border-radius: 40px; white-space: nowrap; } 
.jiSideBar_bg {position:fixed;left:0;top:0;z-index:999;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;cursor:pointer;}

.quick-menu {position:fixed;right:30px;bottom:40px;;z-index:10;}
.quick-menu li + li {margin:10px 0 0;}
.quick-menu li a {position:relative;display:flex;width:55px;height:55px;white-space:nowrap;}
.quick-menu li .text {position:absolute;right:0;top:0;z-index:1;display:inline-flex;align-items:center;width:55px;height:55px;font-size:14px;border-radius:28px;overflow:hidden;transition:.5s;}
.quick-menu li a:hover .text {padding-inline:10px 55px;width:auto;transition:.3s;}
.quick-menu li .mark {position:absolute;right:0;top:0;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:55px;height:55px;border-radius:50%;}
.quick-menu li.naver .text,
.quick-menu li.naver .mark {background:#3fb044;color:#fff;}
.quick-menu li.kakao .text,
.quick-menu li.kakao .mark {background:#efd923;color:#371c1d;}
.quick-menu li.naver img {width:25px;}
.quick-menu li.kakao img {width:35px;}

@media screen and (min-width:1241px){
	.jiSideBar_bg,
	#jiSideBar {display:none !important;}
}

@media screen and (min-width:851px){
	.srh-btn,
	.search-wrap {display:none !important;}
}

@media screen and (max-width:1240px){
 #jiNav { height: 50px; } 
 #jiNav .jiWrap { display: none; } 
 #jiNavMobile { display: block; display: flex;align-items: center; } 
  #jiNavMobile .srh-btn {width:50px;height:48px;margin-left:auto;font-size:1.5rem;background:#fff;border:0;}
  .search-wrap {position:absolute;left:0;top:98px;z-index:5;width:100%;height:40px;background:#fff;}
  .search-wrap .search {display:flex;width:100%;}
  .search-wrap .search .input {width:calc(100% - 40px);padding:5px 10px;background:#fff;border:0;}
  .search-wrap .search .goSearch {width:40px;height:40px;font-size:1.2rem;background:#f0f0f0;border:0;}
 #jiNavMobile .ham-btn { display: block; width: 50px; height: 50px; line-height: 50px; z-index: 1000; } 
 #jiNav .menu { width: calc(100% - 100px); } 
 #jiNav .menu li a { width: auto; height: 24px; line-height: 24px; } 
#jiNav .menu li a::before { display:none; } 
 }
@media screen and (max-width:850px){
 #jiHeader .jiWrap .display_no { display: none; } 
#jiNav .menu > li > a { padding: 0 1rem; } 
#searchBox { display: none; } 
 }
 @media screen and (max-width:500px){
	#jiNav .menu { width: calc(100% - 50px); margin-right: 0; justify-content: flex-end; } 
	#jiNav .menu li { padding: 0 0.5rem; } 
	#jiNav .menu li a { font-size: 0.9rem; } 
	#jiNav .menu > li > a { padding: 0; } 

	.quick-menu {right:15px;bottom:15px;}
	.quick-menu li + li {margin:7px 0 0;}
	.quick-menu li a,
	.quick-menu li .text {width:40px;height:40px;font-size:12px;border-radius:20px;}
	.quick-menu li a:hover .text {padding-inline:7px 40px;}
	.quick-menu li .mark {width:40px;height:40px;}
	.quick-menu li.naver img {width:16px;}
	.quick-menu li.kakao img {width:26px;}
 }

/*비쥬얼*/
#jiVisual { } 
#jiVisual .jiWrap { max-width: 100%; height: auto; overflow: hidden; padding: 0; } 
#jiVisual .jiWrap img { width: 100%; } 
#jiVisual .jiWrap img.pc { display: block; } 
#jiVisual .jiWrap img.mob { display: none; } 

.main-banner { position:relative; max-width: 1920px; margin: 0 auto; } 
.main-slider .swiper-slide { text-align: center; } 
.main-slider .swiper-slide img.pc { max-width: 100%; } 
.main-btn-wrap { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:1400px; z-index:5; } 
.main-btn-prev { border:none; background-color:transparent; color:#fff; } 
.main-btn-next { border:none; background-color:transparent; color:#fff; } 

.main-pagination { bottom:15px !important; } 
.main-pagination .swiper-pagination-bullet { width:10px; height:10px; border-radius:10px; } 
.main-pagination .swiper-pagination-bullet-active { width:20px; background-color:#fff; } 

@media screen and (max-width:768px){
 #jiVisual .jiWrap img.pc { display: none; } 
 #jiVisual .jiWrap img.mob { display: block; } 
.main-btn-prev { display:none; } 
.main-btn-next { display:none; } 
 }

/*중간 2배너*/
#jiMiddleBanner { margin: 30px auto 0; } 
#jiMiddleBanner .jiWrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; } 
#jiMiddleBanner .jiWrap a { flex: 1 1 40%; } 
#jiMiddleBanner .jiWrap a img { width: 100%; } 
@media screen and (max-width: 900px){
 #jiMiddleBanner .jiWrap { gap: 10px; } 
 }
@media screen and (max-width: 500px){
 #jiMiddleBanner .jiWrap { flex-direction: column; } 
 #jiMiddleBanner .jiWrap a { flex: 1 1 auto; } 
 }

/* 베스트 아이템 */
.best_bg { background:#fafafa; padding:70px 0; } 
.itemList { margin-top: 60px; } 
.itemList h2 { display: block;text-align:center;font-family: 'Pretendard Variable'; font-weight: 700; font-size: 2.2rem; line-height: 1; } 
.itemList article { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 30px; gap:20px; } 
.itemList article > div { display: block; width: calc((100% - 60px)/4); } 
.itemList article > div > b { display: block; } 
.itemList article > div > b.td_img { width: 100%; overflow: hidden; position: relative; /*border-radius: 1.25rem; */border: 1px solid #e4e4e4; } 
.itemList article > div > b.td_img::after { content: ""; display: block; padding-bottom: 100%; } 
.itemList article > div > b.td_img img { display: block; width: 100%; height: 100%; position: absolute; } 
.itemList article > div > b.name {margin-top:0.7rem; font-family: 'Pretendard Variable'; font-weight: 800; font-size: 1.125rem; color: #333;line-height:24px;max-height:48px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow:hidden;} 
.itemList article > div > b.price { margin-top: 0.2rem; font-family: 'Pretendard Variable'; font-weight: 400; font-size: 1.25rem;line-height:1;color: #b71423; } 
.itemList article > div > b.price > small { font-weight: 400; font-size: 1rem; } 
.itemList article > div > b.price .sale {color:#1488ce;}
.itemList article > div > b.no-sale {margin-top: 0.2rem; font-family: 'Pretendard Variable'; font-weight: 400;font-size:1rem;line-height:1;text-decoration: line-through;color: #bdbdbd; } 
.itemList article > div > b.no-sale > small { font-weight: 400; font-size:1rem; } 
.itemList article > div > p.desc { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-top: 0.5rem; font-family: 'Pretendard Variable'; font-weight: 400; font-size: 0.9rem; color: #505050; } 
@media screen and (max-width:1240px){
 .itemList h2 { font-size: 1.5rem; } 
 }
@media screen and (max-width:900px){
 .itemList article > div { width: calc(50% - 10px); } 
 }
@media screen and (max-width:500px){
	 .itemList article { gap:20px 14px; } 
	 .itemList article > div { width: calc(50% - 7px); } 
	 .itemList article > div > b.td_img {border-radius:15px;}
	 .itemList article > div > b.name {margin-top:0.5rem;font-size:1rem;line-height:22px;max-height:44px;}
 }

/* 핫세일 */
.itemBannerList { margin-top: 60px;margin-bottom: 60px; } 
.itemBannerList h2 { display: block;text-align:center;font-family: 'Pretendard Variable'; font-weight: 700; font-size: 2.2rem; line-height: 1; } 
.itemBannerList article { display: flex; justify-content: space-between; align-items:flex-start;margin-top: 30px; gap: 40px; } 
.itemBannerList article > div { display:flex;flex-wrap:wrap;width:100%; } 
.itemBannerList article > div.product-banner img { width:100%; height:100%; object-fit:cover; } 
.itemBannerList article > div.item-list { display:flex; justify-content:space-between; gap:20px; } 
.itemBannerList article > div.item-list div { width: calc((100% - 60px) / 4); } 
.itemBannerList article > div b { display: block; } 
.itemBannerList article > div b.td_img { width: 100%; overflow: hidden; position: relative; /*border-radius: 1.25rem; */border: 1px solid #e4e4e4; } 
.itemBannerList article > div b.td_img::after { content: ""; display: block; padding-bottom: 100%; } 
.itemBannerList article > div b.td_img img { display: block; width: 100%; height: 100%; position: absolute; } 
.itemBannerList article > div b.name {margin-top:0.7rem; font-family: 'Pretendard Variable'; font-weight: 800; font-size: 1.125rem; color: #333;line-height:24px;max-height:48px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow:hidden;} 
.itemBannerList article > div b.price { margin-top: 0.2rem; font-family: 'Pretendard Variable'; font-weight: 400; font-size: 1.25rem;line-height:1;color: #b71423; } 
.itemBannerList article > div b.price > small { font-weight: 400; font-size: 1rem; } 
.itemBannerList article > div b.price .sale {color:#1488ce;}
.itemBannerList article > div b.no-sale {margin-top: 0.2rem; font-family: 'Pretendard Variable'; font-weight: 400;font-size:1rem;line-height:1;text-decoration: line-through;color: #bdbdbd; } 
.itemBannerList article > div b.no-sale > small { font-weight: 400; font-size:1rem; } 
.itemBannerList article > div p.desc { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-top: 0.5rem; font-family: 'Pretendard Variable'; font-weight: 400; font-size: 0.9rem; color: #505050; } 

.product-banner {width:1290px;max-height:250px;border-radius:30px;overflow:hidden;margin:40px auto 0;} 

@media screen and (max-width:1354px){
	.product-banner {width:calc(100% - 30px);border-radius:20px;margin-top:25px;}
 }
@media screen and (max-width:900px){
	.itemBannerList article { flex-direction:column; } 
	.itemBannerList article > div.item-list div { width: calc(50% - 10px); }
 }
 @media screen and (max-width:768px){
	.product-banner {max-height:none;}
 }
@media screen and (max-width:500px){
	.itemBannerList article > div.item-list { gap: 20px 14px; } 
	.itemBannerList article > div.item-list div { width: calc(50% - 7px); } 
	.itemBannerList article > div b.td_img {border-radius:15px;}
	.itemBannerList article > div b.name {margin-top:0.5rem;font-size:1rem;line-height:22px;max-height:44px;}
 }

/*아이템 리스트3*/
.best_bg { background:#fafafa; padding:70px 0; } 
.itemList3 { margin-top: 60px; margin-bottom: 60px; } 
.itemList3 h2 { display: block; font-family: 'Pretendard Variable'; font-weight: 700; font-size: 2.2rem; line-height: 1; text-align: center; } 
.itemList3 section { margin-top: 60px; } 
.itemList3 section article { width: 100%; } 
.itemList3 .left a { display: block; } 
.itemList3 .left a img { width: auto; object-fit: cover; height: 100%; max-width: 100%; } 
.itemList3 .right { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } 
.itemList3 .right > div { display: block; width: calc((100% - 60px) / 4); } 
.itemList3 .right > div > b { display: block; } 
.itemList3 .right > div > b.td_img { width: 100%; overflow: hidden; position: relative; /*border-radius: 1.25rem; */border: 1px solid #e4e4e4; } 
.itemList3 .right > div > b.td_img::after { content: ""; display: block; padding-bottom: 100%; } 
.itemList3 .right > div > b.td_img img { display: block; width: 100%; height: 100%; position: absolute; } 
.itemList3 .right > div > b.name { margin-top:0.7rem; font-family: 'Pretendard Variable'; font-weight: 800; font-size: 1.125rem; color: #333;line-height:24px;max-height:48px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow:hidden;} 
.itemList3 .right > div > b.price {margin-top: 0.2rem;font-family: 'Pretendard Variable'; font-weight: 400; font-size:1.2rem;line-height:1;color: #b71423; } 
.itemList3 .right > div > b.price > small { font-weight: 400; font-size: 1rem; } 
.itemList3 .right > div > b.price .sale {color:#1488ce;}
.itemList3 .right > div > b.no-sale {margin-top: 0.2rem;font-family: 'Pretendard Variable'; font-weight: 400;font-size:1rem;line-height:1;text-decoration: line-through;color: #bdbdbd; } 
.itemList3 .right > div > b.no-sale > small {font-size:1rem;} 
.itemList3 .right > div > p.desc { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-top: 0.5rem; font-family: 'Pretendard Variable'; font-weight: 400; font-size: 0.9rem; color: #505050; } 
@media screen and (max-width:1240px){
	.itemList3 h2 { font-size: 1.5rem; }
}
@media screen and (max-width:900px){
	.itemList3 section article { width: 100%; } 
	.itemList3 .left a img { width: 100%; } 
	.itemList3 .right > div { width: calc(50% - 10px); } 
}
@media screen and (max-width:500px){
	 .itemList3 .right { gap:20px 14px; } 
	 .itemList3 .right > div { width: calc(50% - 7px); } 
	 .itemList3 .right > div > b.td_img {border-radius:15px;}
	 .itemList3 .right > div > b.name {margin-top:0.5rem;font-size:1rem;line-height:22px;max-height:44px;}
}

/* 더보기 버튼 */
.btn-wrap { margin-top: 4rem; } 
.more-btn { display: block; padding: 18px 30px; border: 1px solid #cfcfcf; width: fit-content; margin: 0 auto; } 
.more-btn span { font-family: 'Pretendard Variable'; font-weight: 400; font-size: 1.125rem; margin-right: 3rem; color: #6a6a6a; } 
.more-btn i { font-size: 1.125rem; color: #6a6a6a; } 
@media screen and (max-width:1240px){
 .btn-wrap { margin-top: 2rem; } 
 .more-btn span { margin-right: 1.5rem; } 
 }


/*아래 배너*/
#jiBottomBanner { margin: 4rem 0; } 
#jiBottomBanner .jiWrap { overflow: hidden; } 
.img-wrap { display: block; } 
.img-wrap img { width: 100%; } 
.img-wrap img.pc { display: block; } 
.img-wrap img.mob { display: none; } 
@media screen and (max-width:1240px){
 #jiBottomBanner { margin: 2rem 0; } 
 }
@media screen and (max-width:768px){
 .img-wrap img.pc { display: none; } 
 .img-wrap img.mob { display: block; } 
 }

/*푸터*/
#jiFooter { background: #484848; /*position: absolute; width: 100%; bottom: 0; height: 335px; */ } 
#jiFooter .footerTop {display: flex;justify-content: space-between;}
#jiFooter .footerTop .insta-link {width: 40px;height: 40px;background-color: #fff;display: flex;justify-content: center;align-items: center;border-radius: 50%;transition: .3s;}
#jiFooter .footerTop .insta-link:hover {background-color: #eee;transition: .3s;}
#jiFooter .footerTop .insta-link img {display: block;width: 20px;height: 20px;object-fit: contain;}
#jiFooter .jiWrap { padding: 40px 5px 75px; margin-bottom: 0; } 
#jiFooter .logo { max-width: 200px; } 
#jiFooter .logo > img { max-width: 100%;width: 100%;height: auto; } 
#jiFooter .footerInfo { width: 100%; }
#jiFooter .footerInfo ul {display: flex;flex-wrap: wrap;margin-top: 24px;max-width: 1000px;gap: 0 20px;} 
#jiFooter .footerInfo ul li {color: #fff;font-size: 13px;line-height: 1.5;position: relative;} 
#jiFooter .footerInfo ul li:not(:last-child, :nth-child(4))::after {content: '';display: block;width: 1px;height: 8px;background: #e8e8e8;position: absolute;top: 5px;right: -10px;} 
#jiFooter .footerInfo p {color: #fff;font-size: 13px;line-height: 1.5;margin-top: 16px;} 
#jiFooter .footerInfo article big { color: #B7C800; font-size: 2.5rem; font-family: 'Pretendard-Black'; white-space: nowrap; } 
#jiFooter .footerInfo article span { display: inline-block; width: 60px; } 
#jiFooter .footerInfo article big > small { color: #fff; opacity: 0.68; font-size: 1rem; font-family: 'Pretendard-Medium'; margin-left: 0.6rem; } 
#jiFooter .footerInfo > article > p { font-family: 'Pretendard-Medium'; color: #fff; line-height: 1.5; font-size: 13px; margin-top: 24px; } 
#jiFooter .modal-btn { margin-top: 24px; color: #fff; } 
#jiFooter .modal-btn > a { cursor: pointer; color: #fff; font-size: 16px; padding: 0 10px; } 
#jiFooter .modal-btn > a:first-of-type { padding-left: 0; } 
#jiFooter .modalstyle { display: none; max-width: 600px; max-height: 600px; padding: 50px 50px; background-color: #fefefe; border: 1px solid #888; border-radius: 3px; word-break: keep-all; overflow-y: scroll; } 
#jiFooter .modalstyle > a { position: absolute; top: 15px; right: 15px; cursor: pointer; font-weight: bold; color: #333; } 
#jiFooter .modalstyle h1 { font-size: 18px; font-weight: bold; } 
#jiFooter .modalstyle p { font-size: 16px; line-height: 30px; margin-top: 20px;color: #505050; } 
@media screen and (max-width:1000px){
    #jiFooter .jiWrap { min-height: auto; } 
    #jiFooter .footerTop {flex-direction: column;align-items: center;row-gap: 16px;}
    #jiFooter .logo { margin: 0 auto; } 
    #jiFooter .SBtween { display: flex; flex-direction: column; align-items: center; } 
    #jiFooter .footerInfo { margin-top: 10px; width: auto; } 
    #jiFooter .footerInfo ul {margin: 24px auto 0;justify-content: center;gap: 0 10px;max-width: none;}
    #jiFooter .footerInfo ul li {text-align: center;}
    #jiFooter .footerInfo ul li:not(:last-child, :nth-child(4))::after {display: none;} 
    #jiFooter .footerInfo p {text-align: center;} 
    #jiFooter .footerInfo article big > small { text-align: center; display: block; } 
    #jiFooter .footerInfo .SBtween p { white-space: nowrap; text-align: center; } 
    /* #jiFooter .footerInfo article { text-align: center; padding: 0 20%; }  */
    #jiFooter .modal-btn { text-align: center; } 
    #jiFooter .modalstyle { max-width: none; max-height: none; width: 95%; text-align: left; padding: 40px 24px; height: 70vh; } 
}
@media screen and (max-width:480px){
    #jiFooter .jiWrap { padding: 40px 5px; }
    #jiFooter .logo { max-width: 160px;} 
    #jiFooter .footerInfo { display: flex; flex-direction: column-reverse; } 
    #jiFooter .footerInfo ul {width: 100%;margin-top: 0;}
    /* #jiFooter .footerInfo article {padding: 0;} */
    #jiFooter .modal-btn { display: flex;justify-content: space-evenly;align-items: center;height: 40px; } 
    #jiFooter .modal-btn > a { padding: 0; } 
}

/* 탭 메뉴 */
.tab-menu { } 
.tab-menu-list { display: flex;justify-content:center;margin-top: 30px; gap: 16px; flex-wrap: wrap; } 
.tab-menu-list li button { font-size: 1.1rem; padding: 10px 20px;border:0;border-radius: 20px; background: #fff; color: #2D5DE9; display: block; transition: all 0.3s ease; text-align: center; } 
.tab-menu-list li:hover button, .tab-menu-list li.on button { background: #2D5DE9; color: #fff; } 
.tab-banner { margin-top: 30px; } 
.tab-banner a { display: block; } 
.tab-banner a img { width: 100%; } 
.tab-content { display: none; } 
.tab-content.on { display: block; } 
@media screen and (max-width: 480px){
	.tab-menu-list li { width: calc(50% - 16px); } 
	.tab-menu-list li button {width:100%;}
 }

 /* 중간배너 */
.middle-banner { max-width: 1920px; margin: 0 auto; } 
.middle-banner a { display: block; } 
.middle-banner a img { width: 100%; max-width: 100%; } 

/* 건강칼럼 */
.main-column { height: 500px; background: #f5f5f5; } 
.main-column .jiWrap { height: 100%; padding: 60px 0; } 
.main-column .left { display: flex; max-width: 938px; background: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.15); } 
.main-column .left .text { padding: 50px; width: 45%; } 
.main-column .left .text h6 { font-size: 36px; } 
.main-column .left .text p { font-size: 18px; margin-top: 10px; } 
.btn-default { display: block; font-size: 16px; font-weight: 400; margin-top: 24px; padding: 16px 32px; background: #2d5de9; color: #fff; width: fit-content;height: fit-content; } 
.main-column .left .bg-img { width: 55%; background: url('../img/column_bg.png') no-repeat center center; background-size: cover; } 
.main-column .left > a img { max-width: 100%;width: 100%;height: auto; } 
.main-column .left > a img.mob { display: none;  } 
.main-column .right { position: absolute; right: 0; bottom: 60px; width: 409px; height: 229px; } 
@media screen and (max-width: 1024px){
 .main-column { height: auto; } 
 .main-column .jiWrap { padding: 0; } 
 .main-column .left { max-width: none; } 
 .main-column .right { position: static; width: 100%; height: 300px; } 
 }
@media screen and (max-width: 768px){
 .main-column .left .text h6 { font-size: 24px; } 
 }
@media screen and (max-width: 640px){
    .main-column .left > a img.pc { display: none; } 
    .main-column .left > a img.mob { display: block; } 
 }
@media screen and (max-width: 480px){
 .main-column .left { flex-direction: column-reverse; } 
 .main-column .left .text, .main-column .left .bg-img { width: 100%; } 
 .main-column .left .bg-img { height: 300px; } 
 }

/* 푸터 상단 */
#footer-top { border-top: 1px solid #e8e8e8; } 
#footer-top .jiWrap { display: flex; padding: 0; } 
#footer-top article { width: calc(100% / 3); padding: 50px 40px; border-left: 1px solid #e8e8e8; } 
#footer-top article:last-child {border-right: 1px solid #e8e8e8; }
#footer-top article h5 { font-size: 18px; } 
#footer-top article h6 { font-size: 28px; line-height: 1.3; margin-top: 15px;word-break: keep-all; } 
#footer-top article p { font-size: 14px; color: #505050; margin-top: 15px; line-height: 1.5; } 

@media screen and (max-width: 768px){
 #footer-top .jiWrap { flex-wrap: wrap; } 
 #footer-top article { width: 100%; border-left: 0; border-top: 1px solid #e8e8e8;position: relative;} 
 /* #footer-top article .text { width: calc(100% - 120px);}  */
 #footer-top article h6 br {display: none;}
 #footer-top article .btn-default {margin-top: 0;position: absolute;bottom: 50px;right: 40px;font-size: 14px;padding: 8px 16px;}
 /* #footer-top article:not(:last-of-type) { width: 50%; }  */
 /* #footer-top article:last-of-type { width: 100%; border-left: 0; border-top: 1px solid #e8e8e8; }  */
}
@media screen and (max-width: 480px){
    #footer-top article { padding: 40px 20px; } 
    #footer-top article h5 { font-size: 14px; } 
    #footer-top article h6 { font-size: 20px;} 
    /* #footer-top article p br { display: none;}  */
    /* #footer-top article p { width: calc(100% - 144px);word-break: keep-all;}  */
    #footer-top article .btn-default {top: 40px;right: 20px;padding: 8px;}

 /* #footer-top article:not(:last-of-type) { width: 100%; border-left: 0; border-top: 1px solid #e8e8e8; }  */
 }




/* 상품 리뷰 */
.product-review {margin-bottom: 60px;}
.product-review h2 {font-weight: 700;font-size: 2.2rem;line-height: 1;text-align: center;}
.review-wrap {position: relative;}
.review-slider {margin-top: 60px;width: 100%;height: 100%;}
.review-slider .swiper-slide {}
.review {border: 1px solid #e5e5ec;}
.review-thumb {position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-bottom:1px solid #e5e5ec;}
.review-thumb img {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:100%;}
.review-text {padding:20px;}
.review-text .star img {display: block;}
.review-text > p {margin: 24px 0;font-size: 0.95rem;line-height: 1.3;color: #555;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.review-writer {display: flex;align-items: center;column-gap: 10px;}
.review-writer > li {font-size: 0.9rem;color: #777;}
.review-writer li:first-child {display: flex;align-items: center;column-gap: 10px;}
.review-writer li:first-child::after {content: '';display: block;width: 1px;height: 10px;background-color: #e5e5ec;}
.review-product {margin-top: 16px;padding-top: 16px;border-top: 1px solid #e5e5ec;}
.review-product > a {display: flex;align-items: center;column-gap: 12px;}
.review-product .product-img {width: 40px;height: 40px;border:1px solid #ddd;border-radius: 50%;overflow: hidden;}
.review-product .product-img img {display: block;width: 100%;height: 100%;object-fit: cover;}
.review-product .product-name {width: calc(100% - 52px); font-size: 0.9rem;color: #777;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.review-btn {width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: #fff;box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);border: none;z-index: 10;}
.review-btn > i {font-size: 1rem;color: #333;}
.review-btn-prev {position: absolute;top: 50%;left: 0;transform: translate(-50%,-50%);}
.review-btn-next {position: absolute;top: 50%;right: 0;transform: translate(50%,-50%);}
@media screen and (max-width: 1300px) {
    .review-btn-prev {position: absolute;top: 50%;left: 0;transform: translate(0,-50%);}
    .review-btn-next {position: absolute;top: 50%;right: 0;transform: translate(0,-50%);}
}
@media screen and (max-width: 500px) {
	.review-slider {margin-inline:-15px;padding-left:15px;width:calc(100% + 30px);}
    .review-btn-prev,
    .review-btn-next {display:none;}
}