/* 전역 */
body{
  font-family:'Campton','Montserrat', 'Pretendard',sans-serif; 
}
a{color: black;}
img{vertical-align: middle;}

/* 헤더 */

.head-wrap{
  position: fixed;
  width: 100%;
  text-align: center;
  height: 150px;
  z-index: 9999;
  transition: 0.3s;
}
.head-wrap.scrolled{
  background: rgba(255,255,255,0.7);
  height: 110px;
  backdrop-filter: blur(5px);
}
.head-banner{
  height: 38px;
  background: #007572;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: height 0.3s,opacity 0.3s;
}
.head-banner.hide{
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.head-banner a{
  color: white;
  font-size: 12px;
  font-weight: 500;
}

header{
  display: flex;
  height: 120px;width: calc(100% - 100px);
  margin: 0 auto;
  justify-content: space-between;
  transition: 0.3s;
}
.logo{display: flex;align-items: center;}
.logo img{height: 35px;}
.menu{display: flex;align-items: center;width: 35%;}
.right{justify-content: end;}
.menu > ul{display: flex; align-items: center; gap: 50px;}
.menu > ul > li{
  font-size: 16px;font-weight: 500;
}
.icon{margin-left: 46px;gap: 32px;}
.icon li a{
  display: flex;
  width: 24px;height: 24px;
  align-items: center;
  justify-content: center;
}
.basket{
  background: #1C3E36;
  border-radius: 100%;
}
.basket a{
  color: white;
  font-size: 10px;
  
}
.search a{
  background-image: url(img/ico-search.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

.menu > ul > li{position: relative;}
.sub{
  position: absolute;
  padding: 20px;
  width: max-content;;
  background-color: white;
  border-radius: 12px;
  left: 50%;
  transform: translate(-50%,-10px);
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
  top: 30px;
}
.sub.active{
  display: block;
  visibility: visible;
  transform: translate(-50%,0px);
  opacity: 1;
}
.subMenu{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.subMenuList{
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
}
.head-space{height: 160px;}

/* 모바일 메뉴 */

.gnb{display: none;}
.gnb-wrap{
  position: fixed;
  width: 100%;height: 100%;
  background: white;
  visibility: hidden;
  opacity: 0;
  transition: .3s ease;
  z-index: 500;
}
.gnb-wrap.show{
  visibility: visible;
  opacity: 1;
}
.gnb-inner{
  margin-top: 130px;
  padding: 0 23px 10px;
  transition: 0.3s;
}
.gnb-inner.scrolled{margin-top: 90px;}

.user-menu ul{display: flex; gap: 25px; font-size: 12px;font-weight: 500;padding-bottom: 70px;}

.accordian-menu{
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.accordian-title{
  display: inline-flex;
  gap: 8px;
  font-size: 21px;
  font-weight: 600;
  align-items: center;
  cursor: pointer;
  opacity: 0.2;
  transition: 0.3s;
}
.accordian-title.active{
  opacity: 1;
}
.accordian-title span{
  font-size: 12px;
  color: #818285;
  font-weight: 300;
}
.accordian-content{
  max-height: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: 0.5s;
  opacity: 0;
}
.accordian-content.active{
  transform: translateY(0);
  max-height: 600px;
  opacity: 1;
}
.accordian-content ul{
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 0 8px;
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 500;
}

/* 본문영역 */

.contents{
  width: 95%;
  margin: 0 auto;
}
.main-box{
  margin-top: 45px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 150px;
}
.product-title{
  font-size: 28px;
  font-weight: 600;
  padding: 40px 0;
}

.product-wrap{
  display: flex;
  width: 100%;
  padding-top: 14px;
  justify-content: space-between;
}
.product-item{width: 23.5%;}
.product-item a img{width: 100%;}
.product-desc{margin-top: 20px;text-align: center;color: #555;}
.product-desc a{
  color: #555;
  font-size: 15px;
  font-weight: 600;
}
.product-review,.product-price{font-size: 12px;}
.product-review{margin-top: 16px;}
.product-review strong{font-weight: 700;}
.product-price{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.n-price{text-decoration: line-through;}
.sale{
  font-size: 13px;
  background: #1c3e36;
  color: white;
  padding: 5px 11px;
  border-radius: 14px;
  font-weight: 500;
}
.sale-price{
  font-size: 13px;
  color: #008BCC;
  font-weight: 700;
}

/* 푸터 */

footer{
  width: 100%;
  position: relative;
  margin-top: 100px;
}
footer::after{
  content: '';
  border-top: 1px solid #ddd;
  position: absolute;
  width: 100%;
  overflow: hidden;
  top: 0;
}


.footer-wrap{
  display: flex;
  flex-direction: column;
  padding: 100px 0 60px;
  margin: 0 50px;
}
.footer-row1,.footer-menu,.info-box>ul,.copyright{display: flex; gap: 147px;}
.footer-row1>div{width: auto;margin-bottom: 55px;}
.center,.bank{
  display: flex;
  flex-direction: column;
  gap: 20px;font-size: 11px;
}
.center>h3{font-size: 20px;font-weight: 600;}
.center-btn{
  width: 110px;height: 37px;
  border: none;
  background: #1C3E36;
  color: white;
  
  border-radius: 5px;
}
.bank>h3{font-size: 18px;}
.info-box{display: flex;flex-direction: column;gap: 6px;margin: 12px 0;}
.info-box>ul,.footer-menu{gap: 15px;font-size: 12px;}
.copyright{
  justify-content: space-between;
  font-size: 10px;
  opacity: 0.2;
}

/* 버튼영역 */

.floating-group {
  position: fixed;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  right: 24px;
  bottom: 0;
  width: 64px;
  height: 100%;
  z-index: 5000;
}

.floating-scroll button {
  width: 44px;
  height: 44px;
  border: none;
  background: #0c4a3f;
  color: #fff;
  cursor: pointer;
  margin: 0.5px;
}
.btn-top{border-radius: 25px 25px 0 0;}
.btn-bottom{border-radius: 0 0 25px 25px;}

.show-on-scroll {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.floating-group > button{
  border: none;
  /* background: none; */
}
.floating-scroll {
  position: absolute;
  bottom: 50%;
  left: 10px;
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
}

.btn-extra {
  position: absolute;
  bottom: 40%;
  left: 10px;
  width: 44px;
  background: yellow;
  padding: 12px;border-radius: 15px;
}

.btn-help {
  position: absolute;
  bottom: 20px;
  width: 100%;
  background: none;
}
.btn-help img{border-radius: 23px;width: 48px;}


@media (min-width:1700px){
  header,.contents{width: 1680px;}
  .footer-wrap{width: 1680px;margin: 100px auto 0;}
}

@media (max-width: 800px){
  header{height: 70px;width: calc(100% - 40px);}
  .head-wrap.scrolled{
    background: rgba(255,255,255,0.7);
    height: 70px;
    backdrop-filter: blur(5px);
  }
  .head-space{height: 110px;}
  .logo img{height: 26px;}
  .menu > ul:nth-child(1){display: none;}
  .menu ul{gap: 20px;}
  .left{display: none;}
  .gnb{width: 24px;height: 24px;display: flex;position: relative;}
  .gnb a{
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 18px;
    visibility: hidden;
    
  }
  .gnb a.active{visibility: visible;}
  .gnb-btn{
    background-image: url(img/ico-gnb.svg);
  }
  .gnb-btn-close{
    background-image: url(img/ico-close.svg);
  }
  .item-empty{display: none;}
  .product-wrap{gap: 15px;}
  .product-item{width: auto;}
  .product-price{flex-wrap: wrap;}
  footer::after{display: none;}
  .footer-wrap{margin: 0 20px;padding-top: 0;}
  .footer-row1{flex-direction: column;gap: 0;}
  .copyright{flex-direction: column;gap: 10px;}

}