header.banner {
  width: 100%;
  height: 100vh;
  background-color: #F8F8F4;
  color: #333;
  overflow: hidden;
}


.banner .line_box {
  height: 30px;
  background-color: #1F2928;
  color: #E6DCAB;
  display: flex;
  font-size: 18px;
  text-transform: uppercase;
width: max-content;
font-family: var(--en_font);
}

/* 각 세트 */
.banner .line_box .text_item {
  display: flex;
  gap: 50px;
  padding-left: 50px;
  animation: auto_slide 15s linear infinite;
}


@keyframes auto_slide {
  100% {
    transform: translateX(-50%);   
  }
}

.banner .banner_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.banner .left_box {
  width: 40%;
  text-align: center;
  font-weight: 300;
  line-height: 1.6;
}

.banner .left_box .top {
  font-size: 28px;
}

.banner .left_box .top span {
  font-size: 32px;
}

.banner .left_box .main {
  font-size: 52px;
  color: var(--main_color);
  font-weight: 700;
  font-family: var(--en_font);
}

.banner .right_box {
  position: relative;
  display: flex;
  width: 50%;
  height: 100%;
}

.banner .right_box .img_box {
  position: absolute;
}

.banner .right_box .item1 {
  right: 0;
  top: 10%;
}

.banner .right_box .item2 {
  top: 50%;
  transform: translateY(-50%);
  width: 350px;
  height: 440px;
}

.banner .right_box .item3 {
  bottom: 10%;
  right: 30%;
}

.banner .right_box .item4 {
  bottom: 13%;
  right: 2%;
}

/* 배너 버튼 그림자 수정 */
.banner .btn_box .cta_btn{
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}


/* @ ----------- Story 스타일 시작 --------- */
section.stroy {
  width: 100%;
  height: 100vh;
}

.story .story_wrap {
  display: flex;
  position: relative;
}

.story .text_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.6;
  font-size: 28px;
  font-weight: 400;
  width: 51%;
}

.story .text_box span.hope {
  font-size: 30px;
  font-weight: 600;
}

/* @ ----------- Story 스타일 끝 --------- */


/* @ ------------- contents 스타일 시작================ */
/* 공통 스타일 */
section.contents {
  width: 100%;
  height: 100vh;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  cursor: grab;
}

.contents .slide_box .inner {position: relative;}

.contents img {border-radius: 10%; cursor: pointer;}

.contents .slide_box {width: 100%;  height: 100%;}

.contents .slide_box .slide_container {
  display: flex;
}


/* 첫번째 텍스트 아이템 */
.contents .main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 50px;
  padding-top: 10%;
}

.contents .main{
  text-align: center;
}

.contents .main .text_box {
  width: 50%;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.6;
}

/* 왼쪽 상단 제이홉 이미지 */
.contents .main .img_box {position: absolute;}
.contents .main .img_box:nth-child(2) {
  width: 160px;
  height: 200px;
  top: 15%;
  left: 20%;
  rotate: -3deg;
  border-radius: 10%;
}

.contents .main .img_box:nth-child(3) {
  width: 230px;
  height: 180px;
  top: 18%;
  left: 35%;
  rotate: -10deg;
}

.contents .main .img_box:nth-child(4) {
  width: 155px;
  height: 190px;
  top: 15%;
  left: 55%;
  rotate: 5deg;
}

/* 슬라이드 각각의 아이템 스타일 */
/* human hope 아이템 */
.contents .item{width: 100%; height: 100%;}

.contents .item .img_box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 80%;}
.contents .item .img_box img{position: absolute;  transition: 0.3s;}
.contents .item .img_box:hover img:nth-child(2){opacity: 0;}

.contents .item .text_box{width: 30%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: absolute; right: -2%; gap: 20px;}
.contents .item .text_box .name{font-size: 32px; font-weight: 700;}
.contents .item .text_box .desc{font-size: 18px; line-height: 1.6; font-weight: 400; color: #F8F8F4;}
.contents .item .text_box li{position: relative; padding-left: 30px;}
.contents .item .text_box li::after{content: '-'; position: absolute; border-radius: 5px; top: 50%; left: 2%; transform: translateY(-50%);}

/* @ ------------- contents 스타일 끝================ */

/* @---------- event 스타일 시작 -------- */
section.event {
  width: 100%;
  height: 100vh;
}

.event .text_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.event .text_box .main_title {font-size: 96px; font-weight: 700; font-family: var(--en_font);}
.event .text_box .main_title span {color: var(--main_color);}
.event .text_box .sub_title {font-size: 24px; font-weight: 500;}
.event .text_box .desc {font-size: 18px; font-weight: 400;}


/* 아이템 카드를 담는 초록색 박스 */
.event .slide{
  width: 100%;
  height: 600px;
  background-color: #283730;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 100px;
  position: absolute;
}

.event .slide .title{text-align: center; font-size: 32px; font-weight: 700; color: #E6DCAB; padding-top: 30px; font-family: var(--en_font);}

/* 내부 이미지 레이아웃 */
.item_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 80%;
}

.event .photocard .img_box{width: 320px;  height: 400px;}

.event .goods .img_box{width: 240px; height: 300px;}

.event .poster .img_box{width: 335px; height: 470px;}

.event .photocard img, 
.event .goods img{border-radius: 30px;}

/* @--------event 스타일 끝 */

/* @@@@---------- info 스타일 시작 ---------- */
section.info_section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* 좌우 카드 사이 간격 */
    padding: 50px;
}

/* @ ----- 왼쪽: 프로모션 카드 ----- */
.promo_card {
    width: 50%;
    background-color: #fafafa;
    border-radius: 60px; /* 둥근 모서리 */
    padding: 80px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 왼쪽 상단 로고 이미지 */
.promo_card .card_logo {
    position: absolute;
    top: -60px; /* 카드 밖으로 튀어나가게 */
    left: 30px;
    width: 120px;
    rotate: -10deg;
}

.promo_card .card_text {
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 40px;
    font-weight: 500;
}

/* @ ----- 오른쪽: 아코디언 리스트 ----- */
.accordion_list {
    width: 45%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.acc_item {
    width: 100%;
    border-radius: 40px; 
    overflow: visible; 
    transition: 0.3s;
    position: relative;
}

/* 헤더 (클릭 영역) */
.acc_header {
    padding: 25px 40px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* 우측 상단 튀어나온 아이콘 */
.acc_icon {
    position: absolute;
    right: 0;
    top: -20px;
    width: 60px;
    height: 60px;
}
.acc_icon img {
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
    object-fit: contain;
}

/* 내용 (숨겨진 영역) */
.acc_body {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
    padding: 0 40px;
    opacity: 0;
}

/* 내용 안의 텍스트 스타일 */
.acc_body p, .acc_body li {
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 20px;
}
.acc_body .notice_list li {
    margin-bottom: 5px;
}
/* info_section 버튼 그림자 수정 */
.info_section .btn_box .cta_btn{
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}


/* @ ----- 아코디언 색상별 테마 ----- */

/* 1. Red Type */
.acc_item.red { background-color: #df281e; color: #fafafa; text-align: center;}
.acc_item.red .acc_icon{top: -30px; width: 80px; right:-15px;}
.acc_item.red a{border-bottom: 1px solid; color: #fff; font-weight: 500;} 

/* 2. White Type */
.acc_item.white { background-color: #e6e6e6; color: #333; text-align: center;}

/* 3. Green Type */
.acc_item.green { background-color: #61a84d; color: #333; text-align: center;}
.acc_item.green a{border-bottom: 1px solid; color: #111; font-weight: 500;}

/* 4. Yellow Type */
.acc_item.yellow { background-color: #fcbd13; color: #333; }


/* @ ----- Active 상태 (열렸을 때) ----- */

.acc_item.active .acc_body {
    max-height: 500px; /* 충분한 높이 */
    opacity: 1;
    padding-top: 10px; /* 헤더와 간격 */
    padding-bottom: 30px;
}