body{font-family: var(--main_font);}
#header{position: relative;}
#header .img_box{position: absolute; top: 2%; width: 150px; left: 50%; transform: translateX(-50%);}

nav.navi{display: flex; align-items: center; justify-content: space-between; font-family: var(--sub_font); color: var(--title_text); text-transform: uppercase; margin: 0 auto;}
.navi .menu, .util, .logo_box{width: calc(100% / 3); display: flex; gap: 50px;}
.navi .logo_box{width: 105px; height: 105px;}
.navi .util{justify-content: end;}
.navi .menu li, 
.navi .util li{transition: 0.3s;}
.navi .menu li:hover,
.navi .util li:hover{color: var(--main_color); font-weight: 600;}
.banner{width: 100%; height: 100vh; position: relative;}
.banner .video_box video{width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; position: absolute;}
/* 헤더 스타일 끝 */


/* decades 스타일 시작 */
section.decades{width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #F7F3EC; font-family: var(--sub_font); color: var(--title_text);}
.decades .decades_wrap{width: 100%; display: flex; flex-direction: column; gap: 100px;}
.decades .top{width: 100%; display: flex; gap: 30px; flex-direction: column;}
.decades .top .top_text{font-size: 18px; font-weight: 400; color: var(--main_color); }
.decades .top .main_text, .sub_text{font-size: 44px; font-weight: 700;}
.decades .top .sub_text{color: var(--main_color);}
.decades .bottom .desc{margin: 0 auto; width: 55%;  font-size: 20px; font-weight: 400; line-height: 1.6; font-family: var(--main_font);}

/* decades 스타일 끝 */

/* ------------------------------- */

/* kate 스타일 시작 */
.kategorie p{font-size: 96px; color: var(--body_text); text-align: end; margin-top: 15px; transition: 0.5s ease; position: absolute; opacity: 0; font-weight: 600;
}

.kategorie .text_man,
.kategorie .text_woman,
.kategorie .text_vintage{
  bottom: 20%; right: 10%;
}

.kategorie .top_box{display: flex; width: 100%; height: 100vh; justify-content: space-between;}
.kategorie .man, .woman{width: 49%; height: 90%; position: relative;}
.kategorie .bottom_box{width: 100%; height: 75vh;}
.kategorie .bottom_box .vintage{width: 100%; height: 100%; position: relative;}


/* 공통 이미지 스타일 + 기본은 살짝 어둡게 */
.kategorie .man img,
.kategorie .woman img,
.kategorie .bottom_box .vintage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  transition: filter 0.4s ease;
}

/* hover 시 이미지 밝게 */
.kategorie .man:hover img,
.kategorie .woman:hover img,
.kategorie .bottom_box .vintage:hover img {
  filter: brightness(1);
}

/* hover 시 텍스트 컬러 변경 */
.kategorie .man:hover p,
.kategorie .woman:hover p,
.kategorie .bottom_box .vintage:hover p {
  color: var(--body_text_w);
  opacity: 1;
}

/* 마우스 올렸을 때 손가락 커서 */
.kategorie .man,
.kategorie .woman,
.kategorie .bottom_box .vintage {
  cursor: pointer;
}
/* kate 스타일 끝 */

/* ------------------------------- */

/* better for you */
section.better {
  padding: 100px 0;
  height: 90vh;
}

.better p {
  text-align: center;
  text-transform: uppercase;
  color: var(--body_text);
  margin-top: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.better .item_wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.better .item_box {
  width: 16.66%;
  cursor: pointer;
}

.better .img_box {
  width: 100%;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

/* PC 이미지 (기본 보이는 이미지) */
.better .img_box img:nth-child(2) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 1;
}


/* hover 시 이미지 나타남 */
.better .img_box:hover img:nth-child(1) {
  opacity: 1;
}

.better .img_box:hover img:nth-child(2) {
  opacity: 0;
}
/* hover 시 텍스트 색 변경 */
.better .item_box:hover p {
  color: var(--main_color);
  transition: color 0.4s ease;
}

/* ------------------------------- */


/* ccollection 스타일 시작*/
/* 공통 스타일 */
section.collection{padding: 100px 0;}
.collection_wrap{display: flex; flex-direction: column; gap: 200px;}
.collection .main_title{margin-bottom: 0;}
.collection .barbour, .bluetab{width: 100%; position: relative;}
.collection .slide_box {
  width: 100%;
  height: 520px;
  margin-top: 40px;
  overflow: hidden; 
}
.collection .slide_box .container{display: flex; cursor: pointer;}
.collection .slide_box .container .item{width: 40%; height: 100%;   display: flex;  flex-direction: column;}
.collection .slide_box .container .item .img_box{width: 100%; height: 100%; position: relative; flex: 1 1 auto;}
.collection .slide_box .container .item .img_box img{position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease; }
.collection .slide_box .container .item .desc{color: var(--body_text); margin-top: 10px;  transition: color 0.3s ease; text-align: center;
}
.collection .slide_box .container .item .desc .name{font-size: 18px;}



/* 컬렉션 메인이미지 스타일 */
.collection .main_img{width: 25%; position: absolute; z-index: 1;}
.collection .main_img img{border: 1px solid rgba(0, 0, 0, 0.4);}
.collection .main_img .text_box{position: absolute; font-size: 44px;font-weight: 800; text-shadow: 4px 4px 4px #000;}
.collection .main_img .text_box a{font-size: 16px; color: var(--body_text_w); transition: 0.5s;}

/* ---------barbour--------- 스타일 */
.collection .barbour .main_img{top: -3%; left: 50%;}
.collection .barbour .main_img .text_box{bottom: 15%; left: 10%;  color: #B87333; }

/* ---------bluetab 스타일----------- */
.collection .bluetab .main_img {top: -5%; left: 15%;}
.collection .bluetab .main_img .text_box{bottom: 10%; right: 8%; color: var(--pt_color_b);}


/* 기본 이미지(두 번째 이미지) → 보임 */
.collection .slide_box .img_box img:nth-child(2) {
  opacity: 1;
}

/* hover 이미지(첫 번째 이미지) → 숨김 */
.collection .slide_box .img_box img:nth-child(1) {
  opacity: 0;
}

/* hover 시 전환 효과 */
.collection .slide_box .swiper-slide:hover .img_box img:nth-child(1) {
  opacity: 1;
}

.collection .slide_box .swiper-slide:hover .img_box img:nth-child(2) {
  opacity: 0;
}

/* 기본 텍스트 스타일 */

/* hover 시 텍스트 컬러 변경 */
.collection .slide_box .swiper-slide:hover .desc .name,
.collection .slide_box .swiper-slide:hover .desc .price {
  color: #B50004;
}

.collection .main_img a:hover{color: var(--main_color);}
/* ccollection 스타일 끝*/

/* --------------------------------------- */

/* new 스타일 시작 */
section.new{width: 100%; height: 100vh; padding: 100px 0; position: relative; margin: 100px auto 0; display: flex; align-items: center; justify-content: center; overflow: hidden;}
/* 슬라이드 스타일 */
.new .banner_slide{display: flex; flex-direction: column; gap: 50px; padding: 100px 0;}
.new .banner_slide .banner_img {
  display: flex;
  white-space: nowrap;
}
.new .banner_slide .banner_img img{padding: 10px;}

.new .banner_slide .top_line,
.new .banner_slide .bottom_line {
  animation: slide 15s linear infinite;
}
.new .banner_slide .center_line{animation: main_slide 15s linear infinite;}

/* 아이템 스타일 */
.new .item_box{
  width: 30%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.new .item_box .img_box{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease; 
}

/* 슬라이드 애니메이션 */
@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes main_slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

/* 현재 활성 이미지 */
.new .item_box .img_box.active{
  opacity: 1;
}

/* new 스타일 끝 */

/* --------------------------------------- */

/* story 스타일 시작 */
section.story{height: 100vh; padding: 100px 0; background:url(img/image\ 1175.png) no-repeat center/cover; overflow: hidden;}
.story .inner{display: flex; height: 100%; align-items: center; justify-content: space-between; margin: 0 auto;}

/* 텍스트 박스 스타일 */
.story .left_box{width: 50%; height: 100%; display: flex; justify-content: center; flex-direction: column; gap: 75px; color: var(--body_text_w);}
.story .left_box .top_en{font-size: 32px; line-height: 1.5; font-weight: 400; font-family: var(--sub_font);}
.story .left_box .bottom_kr{width: 100%; font-size: 20px; line-height: 1.5;}

/* 비디오 박스 스타일 */
.story .right_box{width: 45%; height: 100%;}
.story .right_box .video_box{ position: relative; width: 100%; height: 100%; }
.story .right_box .video_box video{position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%;}
/* story 스타일 끝 */

/* --------------------------------------- */

/* vintage 스타일 시작 */
section.vintage{width: 100%; height: 100vh; background-color: #F7F3EC;}
.vintage .vintage_wrap{padding: 100px 0;}
.vintage .slide_box{width: 80%; margin-right: 0;}
.vintage .slide_box .slide_container{width: 200%; height: auto; display: flex; overflow: visible;}
.vintage .slide_box .slide_item{ position: relative;}

.vintage .slide_item .img_box{
  position: relative;
  width: 100%;
  height: 420px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.vintage .slide_item .img_box img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}
section.vintage p{color: var(--body_text); font-size: 18px;}


/* 기본 이미지는 두 번째 이미지 */
.vintage .slide_item .img_box img:nth-child(2) { opacity: 1; }
/* hover용 이미지는 첫 번째 이미지 */
.vintage .slide_item .img_box img:nth-child(1) { opacity: 0; }

/* hover 시 이미지 스왑 */
.vintage .slide_item:hover .img_box img:nth-child(1) { opacity: 1; }
.vintage .slide_item:hover .img_box img:nth-child(2) { opacity: 0; }


.vintage .slide_item .text_box p {
  font-size: 18px;
  color: var(--body_text);
  transition: color 0.3s ease;
}

.vintage .slide_item:hover .text_box p {
  color: var(--main_color);
}

.vintage .slide_item .text_box{
  margin-top: 12px;
}

/* vintage 스타일 끝 */

/* --------------------------------------- */

/* lookbook 스타일 시작 */
section.lookbook{background-color: #F1EFED;}
.lookbook .text_wrap{width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* how about this denim? 공통 스타일 */
.lookbook .text_wrap .top_text, .left_text{font-size: 200px; color: var(--pt_color_b); font-weight: 500; font-family: var(--sub_font); letter-spacing: -2.2px;}

.lookbook .text_wrap .bottom_text{display: flex; justify-content: center; align-items: center; gap: 180px;}
.lookbook .bottom_text .right_text{width: 26%; font-size: 24px;}

/* selvedge 스타일 */
.selvedge{width: 100%; height: 90vh; display: flex; background-color: #D9ECFB; position: relative;}
.selvedge img{object-fit: contain;}

/* 이미지 스타일 */
.selvedge .left_box{display: flex; width: 50%; align-items: center; gap: 50px;}
.selvedge .left_box .img_box{position: absolute; top: 0%; left: 5%; z-index: 2;}
.selvedge .left_box .img_box:nth-child(2){top: 20%; left: 30%; width: 20%;}

/* 텍스트 스타일 */
.selvedge .right_box{width: 42%; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding-left: 5%; position: relative;}

.selvedge .right_box::after{content: ''; background-color: #999; width: 1px; height: 30%; position: absolute; left: 5%;}
/* selvedge 스타일 끝 */

/* clothe 스타일 시작 */
.clothes{width: 100%; height: 80vh; display: flex; background-color: #c6cfe7; position: relative; justify-content: space-between;}

/* 텍스트 스타일 */
.clothes .left_box{display: flex; width: 40%; flex-direction: column; justify-content: center; gap: 30px; position: relative; text-align: end; padding-left: 8%;}

/* 이미지 스타일 */
.clothes .right_box{position: relative; width: 50%;}
.clothes .right_box .img_box{width: 20%; position: absolute; top: 10%; right: 60%; z-index: 2;}
.clothes .right_box::after{content: ''; background-color: #a9b4cc; width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 80%;}  
.clothes .right_box .img_box:nth-child(2){top: -10%; width: 25%; right: 25%;}

.clothes .left_box::before{content: ''; background-color: #999; width: 1px; height: 30%; position: absolute; right: -10%;}

/* clothes 스타일 끝 */

/* tracey 스타일 시작 */
.tracey{background-color: #26385e; height: 100vh; position: relative;}
.tracey .inner{margin: 0 auto; display: flex; height: 100%; gap: 100px;}
/* 왼쪽 이미지  */
.tracey .left_img{width: 35%; height: 100%;}
.tracey .left_img .img_box{width: 100%; height: 100%;}
.tracey .left_img .img_box img{object-fit: contain; }

/*  right_wrap */
.tracey .right_wrap{display: flex; width: 50%; position: relative;}

/* 중간 텍스트 */
.tracey .center_text{display: flex; font-size: 18px; color: var(--body_text_w); line-height: 1.6; font-weight: 300; position: absolute; bottom: 20%; left: -15%; }
.tracey .center_text .desc{position: relative; width: 65%;}

.tracey .center_text .desc::after{content: ''; width: 1px; height: 100%; position: absolute; background-color: #999;
top: 0; left: -5%;}


/* 오른쪽 이미지 */
.tracey .right_img{display: flex; flex-direction: column; gap: 10px; position: absolute; right: -10%; top: 10%;}
.tracey .right_img .right_top{display: flex; gap: 10px;}
.tracey .right_img .right_bottom{display: flex; align-items: center; justify-content: end;}

/* tracey 스타일 끝 */


/* 룩북 공통 텍스트 */
section.lookbook{ 
  border-top: 1px solid rgba(102, 102, 102, 0.5);
  border-bottom: 1px solid rgba(102, 102, 102, 0.5);}
section.lookbook .top_text{font-size: 24px; font-weight: 500; font-family: var(--sub_font); color: var(--title_text);}
section.lookbook .bottom_text{font-size: 20px; font-weight: 300; color: var(--body_text); line-height: 1.6;}
section.lookbook .shop_now{width: 10%; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-family: var(--sub_font); color: var(--body_text); margin: 0 auto;}

.shop_now a{transition: 0.3s;}
.shop_now:hover a{color: var(--main_color); font-weight: 600;}

/* lookbook 스타일 끝 */

/* --------------------------------------- */

/* faq 스타일 시작 */
section.faq{width: 100%; height: 90vh;}
.faq .main_title{text-align: center; width: 25%; font-size: 42px;}

.faq .text_wrap{display: flex; justify-content: center; gap:100px; margin-top: 70px;}

.faq .left_box, .faq .right_box{display: flex; flex-direction: column; gap: 50px; width: 30%; text-align: center;}

.faq .item{color: var(--body_text); border: 1px solid rgba(51, 51, 51, 0.5); padding: 30px; position: relative;}

.faq .item .q_text::after{content: 'arrow_circle_down'; position: absolute; top: 35%; right: 5%; transform: translateY(-50%); font-family: 'Material Symbols Outlined'; font-size: 24px;}


.faq .item .q_text{font-size: 18px; font-weight: 300; position: relative;}
.faq .item .a_text_inner{
  width: 100%; 
max-height: 0; overflow: hidden; transition: 1s;
}
.faq .item .a_text{font-size: 18px; font-weight: 300;  padding: 30px;}

.faq .item .a_text::after{content: ''; position: absolute; top: 35%; left: 50%; background-color: #999; width:0%; height: 1px; transform: translateX(-50%); opacity: 0;}


.faq input:checked+label .a_text_inner{max-height: 200px; color: var(--main_color);} 
.faq input:checked+label .q_text::after{rotate: 180deg; top: -50%; color: var(--main_color);}
.faq input:checked+label .a_text::after{width: 80%; opacity: 1;}
/* faq 스타일 끝 */

/* --------------------------------------- */

/* show 전체 영역 */
section.show{
  width: 100%;
  height: 80vh;
  border-top: 1px solid rgba(102, 102, 102, 0.5);
  border-bottom: 1px solid rgba(102, 102, 102, 0.5);
  overflow: hidden; /* 바깥으로 튀는 부분 가리기 */
}

/* 텍스트 영역 */
.show .text_box{
  text-align: center;
  font-family: var(--sub_font);
  color: var(--title_text);
  font-weight: 600;
  line-height: 1.6;
  margin: 40px auto;
}
.show .text_box .top{font-size: 18px;}
.show .text_box .mid{font-size: 24px;}
.show .text_box .bottom{font-size: 20px; position: relative;}
.show .text_box .bottom::after{content: ''; width: 0%; height: 1px; background-color: var(--main_color); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: 0.5s;}
.show .text_box .bottom:hover::after{opacity: 1; width: 10%;}

/* 슬라이드 박스 */
.show .slide_box{
  overflow: hidden;
}

/* 가로로 흐르는 트랙 */
.show .slide_box .container{
  display: flex;
  gap: 40px;
  animation: showMarquee 30s linear infinite;
will-change: transform;  
width: max-content;
}

/* 개별 카드(이미지 + 유저명) */
.show .slide_box .item{
  flex: 0 0 260px; 
  display: flex;
  flex-direction: column;
}

/* 이미지 박스 */
.show .slide_box .item .img_box{
  width: 100%;
  height: 360px;
  overflow: hidden;
}

/* 이미지 자체 */
.show .slide_box .item .img_box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 유저 아이디 텍스트 */
.show p.user{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--sub_font);
  color: var(--body_text);
  text-align: center;
}

/* 오른쪽 → 왼쪽으로 끊김 없이 흐르는 애니메이션 */
@keyframes showMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
 } 

/* add 스타일 끝 */

/* --------------------------------------- */

/* 푸터 스타일 */
footer{background-color: #E8C1C1; padding: 100px 0 50px; color: #333;}
footer .ft_wrap{margin-top: 0; margin-bottom: 0;}
footer .logo_box{width: 120px; height: 120px;}
footer .store{padding: 15px 0; font-size: 18px; font-weight: 500;}
footer .list{display: flex; gap: 30px; padding: 0 0 40px; border-bottom: 1px solid rgba(102, 102, 102, 0.5); font-size: 16px;}

footer .ft_bottom{display: flex; justify-content: space-between; padding: 30px 0 15px; font-size: 16px;}
footer .bt_left{display: flex; flex-direction: column; gap: 30px;}
footer .bt_right{display: flex; flex-direction: column; justify-content: space-between;}
footer .bt_right .map{display: flex; gap: 35px;}

footer .btn_box{display: flex; justify-content: end;}
footer .ft_btn{width: 70px; height: 70px; border-radius: 35px; background-color: #EFEAEA; display: flex; flex-direction: column; align-items: center; justify-content: center;}