@charset "utf-8";

@font-face {
  font-family: 'Pretendard-Thin';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-ExtraLight';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Light';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://fastly.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-Medium';
  src: url('https://fastly.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-SemiBold';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Bold';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-ExtraBold';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Black';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  display: block;
  color: inherit;
  text-decoration: none;
}

ul li {
  list-style: none;
}

.tit {
  display: -webkit-box;            /* Flexbox 형태로 처리 */
  -webkit-box-orient: vertical;    /* 수직 방향으로 배치 */
  overflow: hidden;                /* 넘치는 부분을 숨김 */
  -webkit-line-clamp: 2;           /* 두 줄로 제한 */
  line-clamp: 2;                   /* 표준 속성으로 두 줄로 제한 */
  text-overflow: ellipsis;         /* 넘친 텍스트를 '...'으로 표시 */
  padding: 0 4px;
}

.price {
  display: flex;
  gap: 4px;
  padding: 0 4px;
  font-weight: bold;
  font-size: 18px;
}

.price p:first-child {
  color: #F11150;
}

.sOut {
  display: block;
  width: 60px;
  font-size: 10px;
  color: #F11150;
  margin: 0 auto;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid #F11150;
  line-height: normal;
}

/* .pop, .newIn에 대한 구체적인 클래스 설정 */
.pop .indicator,
.new .indicator {
  display: flex;
  justify-content: space-between;
  width: 64px;
  height: 8px;
  margin: 0 auto;
  align-items: center;
}

.pop .dot, .new .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #7B7B7B;
}

/* 활성화된 점 색상 */
.pop .dot.active, .new .dot.active {
  background-color: #555555;
}

/* 4번째 이후 점을 숨기는 부분을 각 인디케이터에 맞게 수정 */
.dot:nth-child(n+4) {
  display: none;
}

.more {
  width: 952px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
}

.more button {
  background: none;
  border: none;
  outline: none;
}

.more i {
  font-size: 24px;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 8px;
  border: 1px solid #9D9D9D;
  border-radius: 50%;
  transition-duration: .3s;
}

.more i:hover {
  background-color: #E9E9E9;
}

.more p {
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  width: 360px;
  height: 40px;
  border: 1px solid #9D9D9D;
  border-radius: 24px;
  transition-duration: .3s;
}

.more p:hover {
  background-color: #E9E9E9;
}

.label {
  display: flex;
  gap: 4px;
}

h3 {
  font-family: 'Pretendard-Bold';
  font-size: 22px;
}

hr {
  border: 1px solid #C4C4C4;
}

body {
  background-color: #fff;
  color: #262626;
  font-family: 'Pretendard-Medium';
  font-size: 16px;
  line-height: 24px;
}

.finalWrap {
  display: flex;
  flex-direction: column;
}

.wrap {
  /* display: flex;
  flex-direction: column; */
  height: calc(3860px - 330px);
}

header {
  width: 100%;
  height: 200px;
}

.head {
  width: 1280px;
  height: 150px;
  margin: 0 auto;
  padding: 25px 0;
}

.upHeader {
  height: 100px;
  padding: 25px 0;
}

.upHeadCon {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lssk {
  width: 879px;
  display: flex;
  justify-content: space-between;
}

.lss {
  width: 803px;
  display: flex;
  justify-content: space-between;
}

.logo {
  width: 100px;
}

.logo img {
}

.category {
  width: 109px;
  margin: auto 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search {
  width: 466px;
  height: 50px;
  margin: auto 0;
  display: flex;
  justify-content: space-between;
  border: 2px solid #FC5B83;
  padding: 11px 13px;
  border-radius: 8px;
  color: #555555;
}

.search input {
  width: 100%;
  outline: none;
  border: none;
  font-size: 16px;
  line-height: 24px;
  height: 24px;
  font-family: 'Pretendard-Medium';
  color: #555;
}

.search input:focus {
  outline: none; /* focus 시 나타나는 기본 아웃라인 제거 */
  border: none;  /* focus 시 나타나는 기본 보더 제거 (선택적) */
  color: #262626;
}

.search button {
  outline: none;
  border: 0;
  background: none;
}

/* .search button i {
  font-size: 24px;
  color: #555555;
  cursor: pointer;
  } */
  
.submit i {
  font-size: 24px;
  /* color: #555555; */
  color: #7B7B7B;
  cursor: pointer;
}

.lank {
  margin: auto 0;
  width: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.setting {
  width: 120px;
  display: flex;
  justify-content: space-between;
}

.setting a {
  width: 24px;
  height: 24px;
}

.setting a:first-child {
  display: none;
}

.setting i {
  font-size: 24px;
  line-height: 24px;
  float: right;
  color: #FC5B83;
}

.downHeader {
  height: 50px;
  display: flex;
}

nav {
  width: calc(100% - 200px);
}

.gnb {
  display: flex;
  width: calc(150px * 4);
}

.gnb>li>a {
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
}

.gnb>li>a:hover {
  font-family: 'Pretendard-Bold';
  color: #FC5B83;
  border-bottom: 3px solid #FC5B83;
}

.spot {
  width: 200px;
  margin: auto 0;
  color: #555555;
}

.text {
  float: right;
  display: flex;
}

.slide {
  margin: 0 auto;
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.slist {
  width: 300%;
  display: flex;
}

.slist a {
  width: calc(100% / 3);
  height: 100%;
}

.sIndi {
  font-family: 'Pretendard-Medium';
  position: absolute;
  background-color: rgba(0, 0, 0, .7);
  border-radius: 40px;
  width: 64px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) ;
  display: flex;
  gap: 4px;
}

.current {
  font-weight: bold;
}

.slide img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.link {
  margin: 0 auto;
  padding: 40px 0;
  width: 1280px;
  height: 250px;
  display: flex;
}

.link a {
  width: 152px;
  height: 168px;
  text-align: center;
  padding: 16px 8px;
}

.link img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: center;
  transition-duration: .3s;
}

.upL {
  display: flex;
}

.downL {
  display: flex;
}

.con {
  margin: 0 auto;
  width: 100%;
  height: calc(1090px + 1090px + 390px);
}

.con a {
  transition-duration: .3s;
}

.pop {
  padding: 80px 0;
  height: 1090px;
  background-image: url(../img/014\ Amy\ Crisp.png);
  background-size: cover;
  background-position: center;
}

.popBox {
  width: 1280px;
  height: 100%;
  margin: 0 auto;
}

.pop hr {
  margin: 24px 0;
}

.popFinal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.popIn {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.popInT {
  display: flex;
  justify-content: space-between;
}

.popInB {
  display: flex;
  justify-content: space-between;
}

.popIn a {
  width: 236.8px;
  height: 364.8px;
  background-color: #fff;
  border-radius: 16px;
}

.popIn img {
  width: 100%;
  height: 236.8px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px 16px 0 0;
  margin-bottom: 8px;
}

.pop .more i {
  font-size: 24px;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 8px;
  border: 1px solid #fff;
  background-color: rgba(245, 245, 245, .5);
  border-radius: 50%;
}

.pop .more i:hover {
  background-color: rgba(245, 245, 245, .9);
}

.pop .more p {
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  width: 360px;
  height: 40px;
  border: 1px solid #fff;
  background-color: rgba(245, 245, 245, .5);
  border-radius: 24px;
}

.pop .more p:hover {
  background-color: rgba(245, 245, 245, .9);
}

.new {
  height: 1090px;
  padding: 80px 0;
}

.newBox {
  width: 1280px;
  height: 100%;
  margin: 0 auto;
}

.new hr {
  margin: 24px 0;
}

.newFinal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newIn {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.newInT {
  display: flex;
  justify-content: space-between;
}

.newInB {
  display: flex;
  justify-content: space-between;
}

.newIn a {
  width: 236.8px;
  height: 364.8px;
  background-color: #fff;
  border-radius: 16px;
}

.newIn img {
  margin-bottom: 8px;
  width: 100%;
  height: 236.8px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

.commu {
  height: 400px;
  padding: 80px 0;
}

.commuBox {
  width: 1280px;
  height: 100%;
  margin: 0 auto;
}

.commu hr {
  margin: 24px 0;
}

.commuIn {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.commuIn a {
  width: 236.8px;
  height: 160px;
  border-radius: 16px;
}

.commuIn img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  transition-duration: .3s;
}

.bodyImg{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.bodyImg img{
  width: 100%;
}

footer {
  width: 100%;
  height: 330px;
  font-size: 14px;
  line-height: 18px;
  color: #555555;
}

footer hr:first-child {
  border: 1px solid #FC5B83;
}

.bmenu {
  width: 1280px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.bmenu a {
  height: 18px;
  padding: 0 8px;
  border-left: 1px solid #555;
}

.bmenu a:first-child {
  padding-left: 0;
  border: 0;
}

.footIn {
  width: 1280px;
  height: 280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.flogo {
  width: 140px;
  height: 200px;
}

.copy {
  width: 780px;
  height: 200px;
  display: flex;
  gap: 16px;
  padding-top: 15.375px;
}

.c1 {
  width: 50%;
}

.c2 {
  width: 50%;
}

.sns {
  width: 168px;
  height: 200px;
  padding-top: 15.375px;
}

.sns p {
  color: #262626;
  float: right;
}

.snsIn {
  float: right;
  display: flex;
  gap: 8px;
}

.snsIn i {
  font-size: 32px;
}



@media only screen and (min-width:769px) {
  .wrap, footer {
    min-width: 1440px;
  }
}

@media only screen and (max-width:768px) {

  body {
    font-size: 14px;
  }

  .wrap {
    height: 2869px;
  }

  footer {
    height: 180px;
  }

  .footIn {
    height: 180px;
  }

  .copy {
    height: 100px;
    line-height: 14px;
    text-align: center;
  }

  .c1, .c2 {
    height: 56px;
  }

  h3 {
    font-size: 18px;
  }

  .pop .more, .new .more {
    width: 100%;
  }

  .pop .more p, .new .more p {
    /* width: 300px; */
    width: 240px;
  }
  
  header, .head, .upHeader, .upHeadCon, .gnb, .lss, .link, .slide, .con, .popBox, .popIn, .newBox, .newIn, .more, .commuBox, .commuIn, footer, .bmenu, .footIn {
    width: 100%;
  }
  
  .category {
    display: none;
  }

  .lank {
    display: none;
  }

  .setting {
    width: 88px;
    display: flex;
    gap: 8px;
  }

  .setting a:nth-child(2), .setting a:nth-child(3) {
    display: none;
  }

  .setting a:first-child {
    display: block;
  }

  .spot {
    display: none;
  }

  nav {
    width: 100%;
  }

  header {
    height: 100px;
    padding: 0 16px;
  }

  .head, .upHeader {
    padding: 0;
  }

  .head {
    height: 100%;
  }

  .upHeader {
    justify-content: space-between;
    height: 50px;
  }

  .downHeader {
    height: 50px;
    align-items: center;
  }

  .lss{
    display: block;
    height: 50px;
  }

  .search {
    display: none;
  }

  .gnb {
    height: 50px;
  }

  .gnb>li {
    width: 25%;
  }

  .gnb>li>a {
    width: 100%;
  }

  .slide {
    height: 200px;
  }

  .slide img {
    width: 100%;
    height: 200px;
  }

  .sIndi {
    width: 48px;
    height: 24px;
    font-size: 11px;
  }

  .link {
    flex-wrap: wrap;
    height: 267px;
    padding: 8px 16px;
  }
  
  .link a {
    font-weight: bold;
    /* width: calc(25% - 16px);  */
    width: 93.5px;
    height: 125.5px;
    padding: 8px;
  }
  
  .link img {
    width: 77.5px;
    height: 77.5px;
  }
  
  .upL, .downL {
    width: 100%;
    height: 125.5px;
    justify-content: space-between;
  }
  
  .upL {
    padding-bottom: 0;
  }

  .downL {
    padding-top: 0;
  }

  .con {
    height: 2302px;
  }

  .pop, .new, .commu {
    /* padding: 32px 0; */
    padding: 48px 0;
  }

  .pop hr, .new hr, .commu hr {
    margin: 16px 0;
  }

  /* .pop, .new {
  }

  .pop a, .new a {
  }

  .pop img, .new img {
  } */

  .pop, .new {
    height: 992px;
  }

  .commu {
    height: 318px;
  }

  .popBox, .newBox, .commuBox {
    padding: 0 16px;
  }

  .indicator {
    width: 80px; /* 인디케이터의 전체 너비 */
  }
  
  .dot:nth-child(n+4) {
    display: block;
  }

  .popInT a:nth-child(n+3), .popInB a:nth-child(n+3), .newInT a:nth-child(n+3), .newInB a:nth-child(n+3), .commuIn a:nth-child(5) {
    display: none;
  }

  .popInT, .popInB, .newInT, .newInB, .commuIn {
    gap: 16px;
  }

  .popInT a, .popInB a, .newInT a, .newInB a {
    width: 50%;
  }

  footer {
    padding: 0 16px;
    font-size: 10px;
  }

  .bmenu {
    /* justify-content: center; */
    justify-content: space-evenly;
  }

  .bmenu a {
    border: 0;
  }

  .bmenu a:first-child, .bmenu a:last-child {
    padding: 0;
  }

  footer .logo, footer .sns {
    display: none;
  }

  .c1, .c2 {
    padding: 0 16px;
    line-height: 14px;
    height: 100%;
  }

}