:root {

  /* color */
  --color-point-light: #00A93A;
  --color-point: #0F8D5B;
  --color-point-deep: #1D3877;
  --color-bk1: #000;
  --color-bk2: #222;
  --color-gr1: #808080;
  --color-gr2: #7B7B7B;
  --color-gr3:#ddd;
  --color-gr4:#717171;
  --color-gradient: linear-gradient(90deg, #3567DC 0%, #1C3776 100%);
  --color-wt: #fff;
  --color-yl: #FFEB3C;

  /* font size */
  --fs-base: 16px;

  /* width */
  --max-frame-w: 1360px;

  /* height */
  --h-full: 100dvh;

  /* padding */
  --frame-pd-pc: 40px;
  --frame-pd-mo: 20px;

  /* gap */
  --gap-default: 30px;

  /* border radius */
  --round-md: 12px;

  --line-h: 130%;

  /* Swiper */
  --swiper-pagination-bullet-width: 6px;
  --swiper-pagination-bullet-active-width: 20px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-border-radius: 10px;
  --swiper-pagination-bullet-inactive-color: #000000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;

}

/** COMMON **/
.inner-sec{margin:0 auto;}
a, svg, div, svg path, span {transition:all .2s ease-in;}
.point-accent-y{color:var(--color-yl);}
select::-ms-expand { 
	display: none;
}
.scroll-hidden{overflow:hidden;}

/** 헤더 **/
.header-wrap.fixed .shopmenu-sec {position:fixed; top:0;left:0; right:0; z-index: 5; background-color: rgba(255,255,255,.9); backdrop-filter: blur(3px);}

.header-wrap .top-area {display: flex; align-items: center; justify-content: space-between; max-height:96px; padding-top:20px; padding-bottom: 20px; }
.header-wrap .top-area .top-inner{gap:40px; flex:1;}
.header-wrap .top-area > div{display: flex; align-items: center;}
.header-wrap .top-area .logo{width: 130px; }
.header-wrap .top-area .logo a,
.header-wrap .top-area .logo img{display: block; width: 100%;}
.header-wrap .btn-menu{cursor: pointer;background:none; border:none; outline:none;}

.header-wrap .top-area .search-wrap{width:100%;}
.header-wrap .top-area .search-box{display: flex; width:100%; justify-content: space-between; align-items: center; padding:12px 20px; background-color: #FAFAFA; border:1px solid var(--color-gr3); border-radius: 300px;}
.header-wrap .top-area .search-box .input-sec{display:flex; align-items: center; gap:15px;}
.header-wrap .top-area .search-box .input-sec select{font-size:var(--fs-base); background-color: transparent; font-weight: 600; width:110px; padding-right: 15px; border:none; border-right: 1px solid var(--color-gr3);}
.header-wrap .top-area .search-box .input-sec input[type=text]{border:none; background-color: transparent; color:var(--color-bk2); font-size:var(--fs-base); font-weight: 500;}
.header-wrap .top-area .search-box .input-sec input[type=text]::placeholder{color:var(--color-gr2);}
.header-wrap .top-area .search-box button{cursor: pointer;background:none; border:none; outline:none;}

.header-wrap  .nav-member {display: flex; align-items: center; gap:20px;}
.header-wrap  .nav-member a{font-size: 15px; font-weight: 500; color:var(--color-gr1); display: flex; align-items: center; gap:20px;}
.header-wrap  .nav-member a:not(:last-child)::after{content: ''; display: block; width: 1px; height:10px; background-color: var(--color-gr3);}
.header-wrap  .nav-member a:hover{opacity: .7;}

.header-wrap .shopmenu-sec{ border-top: 1px solid var(--color-gr3); border-bottom: 1px solid var(--color-gr3);}
.header-wrap:not(.fixed) .shopmenu-sec .inner-sec .btn-menu{ display: none;}
.header-wrap .shopmenu-sec .inner-sec{display: flex; align-items: center; justify-content: space-between; height: 55px;}
.header-wrap .shopmenu-sec nav{display: flex; align-items: center;}
.header-wrap .shopmenu-sec a{color: var(--color-bk2); font-weight: 600; font-size:var(--fs-base);}
.header-wrap .shopmenu-sec a:hover{opacity: .7;}

.header-wrap .shopmenu-sec .order{gap:50px;}
.header-wrap .shopmenu-sec .mall{gap:20px;}
.header-wrap .shopmenu-sec .mall .brandmall{display: flex; align-items: center; gap:12px; padding: 8px 8px 8px 14px; border-radius: 100px; background: linear-gradient(90deg, var(--color-point-light) 0%, var(--color-point) 100%); color:#fff; }
.header-wrap .shopmenu-sec .mall .brandmall span{background-color: #fff; border-radius: 100%; width:24px; height:24px; display:flex; align-items: center; justify-content: center;}
.header-wrap .shopmenu-sec .mall .brandmall span img{width: 13px;;}

/** SIDE MENU **/
.sidebar{width:100%; height:100dvh; position:fixed; top:0; left:0; right:0; bottom: 0; z-index: 300; opacity: 0; visibility: hidden; transition: opacity 0.2s ease .1s;}
.sidebar.on{opacity: 1; visibility: visible;}
.sidebar .bg{position: fixed; top:0; left:0; right:0; bottom: 0; background-color: rgba(0, 0, 0, 0.85);}

.sidebar .inner-menu {max-width:400px; position: sticky; top:0; height: 100dvh; overflow-y: auto; z-index: 2; background-color: #fff;}
.sidebar .inner-menu .title{font-size: 17px; font-weight: 700;  line-height: var(--line-h); letter-spacing: -0.085px; color:var(--color-bk2);}
.sidebar .inner-menu .title a{color:var(--color-bk2);}
.sidebar .inner-menu .member{display: flex; height:96px; align-items: center; justify-content: space-between; padding:15px 20px;}
.sidebar .btn-close{display: flex; justify-content: center; align-items: center; width:40px; height:40px; cursor: pointer;background:none; border:none; outline:none;}
.sidebar .btn-close img{width:20px; height:20px;}
.sidebar .inner-menu .category{padding:30px 20px 15px 20px; border-top:5px solid #F3F3F3;}

.sidebar .menu {padding:0 20px;}
.sidebar .menu .list .item{ overflow:hidden; transition:all .2s ease-in; border-bottom:1px solid #EBEBEB;}
.sidebar .menu .list .item > a{display: flex; align-items: center; justify-content: space-between; height: 47px;  font-size: 16px; font-style: normal; font-weight: 500; line-height: var(--line-h); letter-spacing: -0.08px; color:#636363;}
.sidebar .menu .list .item:hover > a{color:var(--color-point);}
.sidebar .menu .list .item .icon-more {display: none; width:14px;}
.sidebar .menu .sub-nav {display: flex; flex-direction:column; gap:16px; height:0; transition:all .2s ease-out;}
.sidebar .menu .list .item:hover .sub-nav{padding:8px 10px 15px; height:auto;}
.sidebar .menu .sub-nav a{color:var(--color-gr1); font-size: 15px; font-style: normal; font-weight: 400; line-height: normal;}
.sidebar .menu .sub-nav a:hover{color:var(--color-bk);}

.contents .title{color: var(--color-bk2); font-size: 32px; margin-bottom:30px; font-style: normal; font-weight: 700; line-height: 140%;}

/** SWIPER **/
.swiper-utils .btn-wrap .btn{width:50px; height:50px; aspect-ratio: 1/1; border:1px solid transparent; border-radius: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.swiper-utils .btn-wrap .btn-prev{left:0; transform: rotate(-180deg);}
.swiper-utils .btn-wrap .btn-next{right:0;}
.swiper-utils .btn-wrap.default .btn{border-color:var(--color-gr3); background-color: #fff;}
.swiper-utils .btn-wrap.default .btn:hover{background-color: var(--color-point); border-color: var(--color-point);}
.swiper-utils .btn-wrap.default .btn:hover svg path{fill:#fff;}

.swiper-button-disabled{pointer-events: none; opacity: .6;}
.swiper-pagination-bullets{display: flex; align-items: center; justify-content: center; gap:8px;;}
.swiper-pagination-bullet{width: 6px !important; height: 6px !important; opacity: 1 !important; aspect-ratio: 1/1; border-radius: 10px; background: rgba(0, 0, 0, 0.20) !important;}
.swiper-pagination-bullet-active{width: 20px !important; background: #fff !important;}


/** 푸터 **/
.footer-wrap{border-top:1px solid rgba(221, 221, 221, 0.87); padding:var(--frame-pd-pc) 0;}
.footer-wrap .ft-menu{display: flex; align-items: center; gap: 40px; margin-bottom: 40px;}
.footer-wrap .ft-menu a{color: var(--color-bk2); font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.14px;}
.footer-wrap .ft-menu a:hover{opacity: .7;}

.footer-wrap .footer-inner{display:flex; gap:40px; justify-content: space-between;}
.footer-wrap .logo{width:180px;}
.footer-wrap .logo img{display: block; width:100%;}
.footer-wrap .info-area{flex:1; display: flex; flex-direction: column; gap:20px;}
.footer-wrap .info-area .info{display: flex; flex-direction: column; gap:6px;}
.footer-wrap .info-area .list{display: flex; align-items: center; gap:14px;}
.footer-wrap .info-area .list .item {display: flex; align-items: center; gap:10px; position: relative; color: #202020; font-size: 14px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.28px; }
.footer-wrap .info-area .list .item span{color: #626262;}
.footer-wrap .info-area .list .item:not(:last-child)::after{content:''; width:1px; height:10px; background-color: var(--color-gr3); margin-left: 4px;}
.footer-wrap .copy{color: #626262; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%;}
.footer-wrap .c-logo {display: flex; align-items: center; gap: 20px;}


/* 사이드 quick link */
.side-quick-link{position:fixed; bottom:24px; right:30px; z-index: 98; display: flex; flex-direction: column; gap:20px; align-items: center;}

.side-quick-link .recent-prd-wrap{ width: 100px; background-color: #fff; border:1px solid var(--color-gr3); border-radius: 12px; overflow: hidden; padding-top:20px;}
.side-quick-link .recent-prd-wrap .title{color: #383838; text-align: center; margin-bottom:12px; font-size: 14px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.28px;}
.side-quick-link .recent-prd{display: flex; flex-direction: column; width:100%; overflow: hidden; padding: 0 12px;}
.side-quick-link .recent-prd ul {height:162px;}
.side-quick-link .recent-prd ul li{border-radius: 12px; height:76px !important;}
.side-quick-link .recent-prd ul li a{display: block; width:76px; aspect-ratio: 1/1; overflow: hidden; box-sizing: border-box; border-radius: 12px;}
.side-quick-link .recent-prd ul li img{object-fit: cover; object-position: center;}
.side-quick-link .recent-prd-wrap .btn-wrap{display: flex; margin-top:20px; width: 100%; align-items: stretch; box-sizing: border-box;  background-color: #fff; height:40px; border-top:1px solid var(--color-gr3);}
.side-quick-link .recent-prd-wrap .btn-wrap .btn2 {flex:1; display: flex; align-items: center; justify-content: center; }
.side-quick-link .recent-prd-wrap .btn-wrap .btn-prev{transform: rotate(180deg); border-left: 1px solid var(--color-gr3); box-sizing: border-box;}

.side-quick-link .other-prd{display: flex; align-items: center; justify-content: center; color: #FFF; text-align: center; font-size: 14px;  font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.28px; width: 100px; height: 140px; padding: 20px 12px; background:#00A93A url('../img/certification_bg.png') top right no-repeat; background-size: contain; border-radius: var(--round-md);}
.side-quick-link .inquiry{text-align: center;}
.side-quick-link .inquiry .icon-box{display: flex; border-radius: 100%; width: 70px; height: 70px; flex-direction: column; justify-content: center; align-items: center; gap: 10px;   background: linear-gradient(128deg, #5AA657 26.05%, #099041 79.99%);}
.side-quick-link .inquiry .label{padding: 4px 10px; border-radius: 100px; background-color: #429F50; color: #FFF; text-align: center; font-size: 14px; font-style: normal;  font-weight: 600; line-height: 140%; letter-spacing: -0.28px;}



@media screen and (min-width: 1301px) {
  /** COMMON **/
  .inner-sec{max-width: var(--max-frame-w); padding:0 var(--frame-pd-pc);}
  .header-wrap .top-area .search-wrap{max-width:540px;}
}



@media screen and (max-width: 1300px) {
  /** COMMON **/
  html, body { width:100%; min-width:var(--max-frame-w);}
  .inner-sec{padding:0 var(--frame-pd-mo); min-width:var(--max-frame-w); width:calc(100% - var(--frame-pd-mo)*2); margin: 0 auto;}

}