@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1&family=Nanum+Gothic&family=Noto+Sans+KR:wght@900&display=swap');


.container{
    padding: 0 5%; /* 위아래 0, 좌우 5% */
  }

.navbar{
  background: white;
  padding: 0 !important;
  margin: 0 !important;
  height: 70px !important;
}
.navbar-brand {
  margin-left: -95px !important; /* 왼쪽으로 이동 */
}
.navbar .nav-link {
  display: flex;
  align-items: center;
  gap: 6px; /* 아이콘과 텍스트 간격 */
}

.navbar .nav-link span {
  position: relative;
}

.navbar-brand img {
  max-width: 100px;   /* 부모 크기보다 커지지 않음 */
  max-height: 50px;  /* 네비게이션 바 높이에 맞춰 조정 */
  height: auto;      /* 비율 유지 */
  object-fit: contain; /* 잘림 없이 축소 */
}


.navbar .nav-link span::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.navbar .nav-link:hover span::after {
  transform: scaleX(1);
}



/* ===============================
   2. 드롭다운 메뉴 슬라이드 박스
   =============================== */

/* 드롭다운 메뉴 기본 숨김 상태 */
.navbar .dropdown-menu {
  position: absolute;              /* nav-item 기준으로 절대 위치 */
  top: 85%;                       /* nav-item 바로 아래에 위치 */
  left: 0;                         /* 왼쪽 정렬 */
  opacity: 0;                      /* 처음엔 투명 → 보이지 않음 */
  visibility: hidden;              /* 접근 불가능하도록 숨김 */
  background: #fff;                /* 흰색 배경 */
  border: none;                     /* 테두리 없음 */
  transform: translateY(-10px);    /* 살짝 위로 올려둔 상태 */
  transition: opacity 0.3s ease,   /* 투명도 변경 부드럽게 */
              transform 0.3s ease; /* 위치 이동도 부드럽게 */
}

/* nav-item 에 hover 하면 드롭다운 보이게 */
.navbar .nav-item:hover > .dropdown-menu {
  opacity: 1;              /* 불투명 → 보임 */
  visibility: visible;     /* 접근 가능 */
  transform: translateY(0); /* 원래 위치로 슬라이드 다운 */
}

/* 드롭다운 안의 각 메뉴 항목 */
.dropdown-menu .dropdown-item {
  padding: 8px 20px;  /* 안쪽 여백 → 보기 좋게 */
  color: #333;        /* 글자 색상 (짙은 회색) */
  white-space: nowrap; /* 글자가 길어져도 줄바꿈 없이 한 줄 유지 */
}

/* 드롭다운 항목 hover 시 배경 강조 */
.dropdown-menu .dropdown-item:hover {
  background-color: #f8f8f8; /* 연한 회색 배경 */
}

  .navbar .nav-link {
    color: black;
    font-weight: 600;
    padding: 20px 15px;
    text-decoration: none;
    margin: 15px;
  }

/* 모바일용 서브메뉴가 안보이게 */
#collapsibleNavbar-m{ opacity: 0 !important;}


body{background: #eeeeee;}

#collapsibleNavbar .nav-item:hover .dropdown-menu {
  display: block;
}

#collapsibleNavbar .nav-item .dropdown-toggle::after{
  border:0 !important; 
}
#collapsibleNavbar .nav-item:hover i{
  animation: ani01 0.5s ease-in-out forwards !important;
  
  /* animation-name: ani01; */
  /* animation-duration: 0.5s; */
  /* animation-timing-function: ease-in-out; */
  
  /* 애니메이션 종료후 마지막 상태(last frame) 유지. 원래 상태로 돌아가지 않음. */
  /* animation-fill-mode: forwards;   */
  
}
/* 애니메이션 정의. 이름은 ani01 */
@keyframes ani01 {
  0%{transform: rotate(0deg);} /*처음 상태*/
  100%{transform: rotate(90deg);} /*마지막 상태*/
  
}
.slide h3{font-family: "Noto Sans KR", sans-serif;font-optical-sizing: auto;font-weight: 900;font-style: normal;}
.slide p {font-family: "Gothic A1", sans-serif;font-weight: 700;font-style: normal;}

.slider-pc{display: block !important;}  
.slider-m{display: none !important;}  

.slider-container { 
  max-width: 1500px;
  height: 570px !important;
  margin: 50px auto;
}

.slide{
  position: relative; /* 부모의 position 설정 */
  color: white;
}

.slide .caption, 
.slide .more{
  position: absolute; /* 자식 position:absolute 설정. grouping */
}
.slide .caption{
  left: 5px;
  top:200px;
}

.slide .more{
  left: 5px;
  top:300px;
}

.slider .slide {
  margin: 0 10px; /* 슬라이드 간 간격 */
}

.slider .slide img {
  width: 100%;
  height: 570px;
  border-radius: 10px;
}
.slide .more .btn{
  margin: 20px 0;
  width:300px;
}

.slider .slide .btn{
  background-color: white;
  color: black;
  font-weight: bold;
  padding-left: 50px;
  padding-right: 50px;
  border:none;
  border-radius: 50px;
}

.thumbnail{
  border-radius: 10px !important;
  background: white;
}
.thumbnail img{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 300px;
}


#month-pick{
  padding:0 200px !important;
}
#month-pick h1{
  text-align: center;
  font-family: "Noto Sans KR", sans-serif;font-optical-sizing: auto;font-weight: 900;font-style: normal;
}

#month-pick p{
  text-align: left;
  margin-bottom: 50px;
  color: black;
  font-size: 25px;
  font-family: "Noto Sans KR", sans-serif;font-optical-sizing: auto;font-weight: 100;font-style: normal;
}


#month-pick .thumbnail{
  border-radius: 10px !important;
  background: white;
}
#month-pick .btn{
  position: relative;
  right: 0px;
}
#month-pick .thumbnail img{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 300px;
}

#story .col-md-6 img,
#tomorrow .col-md-6 img{
  width:100%;
  height: 100%;
  border-radius: 10px !important;
}
.thumbnail p{
  padding: 20px;
}
.thumbnail button {
  color: black;
  text-decoration: underline;
  text-decoration-color :black
}

.container{
  padding-top: 50px;
  padding-bottom: 50px;      
}

#story .col-md-6,
#tomorrow .col-md-6
{
  border-radius: 10px !important;
  background: white;
  height:500px !important;
  padding:0; /* 안쪽 여백 없애기. 이미지가 부모에 딱맞게 하기 위해 */
  
}


#tomorrow .row,
#story .row{
  display: flex !important;
  align-items: center !important;
  height: 600px !important;
}
#story .story-text,
#tomorrow .story-text{
  margin: 20px 20px;
  padding: 0 20px;
}
#story .col-md-6:nth-child(1){
  align-self: flex-start !important;     
}
#story .col-md-6:nth-child(2){
  align-self:flex-end !important;
}
#tomorrow .col-md-6:nth-child(1){
  align-self: flex-end !important;     
}
#tomorrow .col-md-6:nth-child(2){
  align-self:flex-start !important;
}

#tomorrow .col-md-6:nth-child(1),
#story .col-md-6:nth-child(1){
  margin-right: -100px !important; /* 왼쪽박스를 기준으로 오른쪽박스를 왼쪽으로 이동해서 겹치게 */
}

#story .col-md-6:nth-child(1){
  z-index: 999;
}

/* #story .col-md-6:nth-child(2),
#tomorrow .col-md-6:nth-child(1){
  width:670px;
} */
#story .btn,
#tomorrow .btn{
  border: 2px solid black;
  width: 300px;
  border-radius: 50px;
  text-align: center;

}
.story-text{
    padding: 90px;
}
.story-text1{
    margin-top: -180px;
    padding: 90px;

}

#story h3, #tomorrow h3 {
  font-family: "Noto Sans KR", sans-serif;font-optical-sizing: auto;font-weight: 100;font-style: normal;
}

#story .row,
#tomorrow .row {
  position: relative; /* 기준점 */
}

#story .row .btn {
  position: absolute;
  bottom: 25%;       /* 박스 높이에 대한 비율 */
  left: 7%;         /* 화면 폭 기준 위치 */
}

#tomorrow .row .btn {
  position: absolute;
  bottom: 25%;
  left: 47%;         /* 화면 폭 기준 위치 */
}


/* brand ***********************************************************************************/
#brand{display: block;}
#brand-m{display: none;} /* mobile용 brand는 안보이게 */

#brand{
  text-align: center !important;
}
#brand .row {
  justify-content: center; /* flex 중앙 정렬 */
  line-height: 230px;
}

.container h1{
  font-family: "Noto Sans KR", sans-serif;font-optical-sizing: auto;font-weight: 100;font-style: normal;
}

.container .btn{
  border: 2px solid black;
  width: 300px;
  border-radius: 50px;
}

.container .btn:hover{
  background: #acacac;
}

#brand .col-md-4{
  background: white;
  box-sizing: border-box;
  margin: 10px;
  transition: 0.5s;
  width:230px;
  height: 230px;
  border-radius: 10px !important;

}

#brand .col-md-4 img{
  width: 100%;  
}

#brand .col-md-4:hover{
  transform: scale(1.05);
}

footer.container-fluid{
  background: black;
} 
footer .container li{
  list-style: none;
  position: relative;
  right: 35px;
}
footer{
  color: white;
}
#footer-pc{display: block;}
#footer-m{display: none;}

#footer-pc .btn .fa-solid{
  margin-right: 10px;
  top: 5px;
  position: relative;
}

#footer-pc .btn{
  border: 2px solid white;
  width: 100px;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* flex 중앙 정렬 */
  left: 500px;
}
#footer-pc h6{
  font-size: 12px;
  text-align: left;
}



/* mobile ################################################################################################################################# */  

@media screen and (max-width:767px) {
  
  /* 모바일용 서브메뉴를 1depth에 마우스 커서가 올라갔을 때(hover) 2depth가 펼쳐지는 방식 그대로 사용할 경우 */
  /* #collapsibleNavbar{
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    background-color: white !important; 
    z-index: 999999999 !important;
    color: black !important;
    top:0;
    left: 0;
    
    } */
    
    
/* 코카콜라아이콘, 햄버거메뉴 위로 올라가게 조정 */
.navbar-brand img {
    max-height: 40px; /* 모바일에서 너무 크지 않게 제한 */
    position: relative;
    left: 100px;
    top: 0px;
  }

nav .container{padding:0 10px !important;}

#collapsibleNavbar-m{ opacity: 1 !important;}

#collapsibleNavbar-m{
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  background-color: white !important; 
  z-index: 999999999 !important;
  color: black !important;
  top:0;
  left: 0;
}

#collapsibleNavbar-m #closeMenu {
  position: absolute; /* 절대 위치 지정 */
  top: -50px;          /* 위에서 20px 아래 */
  right: -200px;        /* 오른쪽에서 20px 안쪽 */
  font-size: 40px;    /* 글자 크기 */
  background: none;   /* 배경 제거 */
  color: black;       /* 색상 */
  z-index: 9999;      /* 다른 요소 위에 표시 */
  border: none;

}
#collapsibleNavbar-m .btn{
  margin-top: 50px;
  background: white;
  color: black;
  width: 450px;
  border-radius: 50px;
  justify-content: center; /* flex 중앙 정렬 */
}


.accordion {
  background:none;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 25px;
  transition: 0.4s;
  position: relative;
  top: 20px;
}
.panel{
position: relative;
top: 20px;
}


.accordion:after {
  /* content: '\002B'; */
  content: '\f054'; /* '>' 화살표 아이콘  */
  font-family: "Font Awesome 7 Free"; /* fontawesom 버젼 7 무료 글꼴*/
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  /* content: "\2212"; */
  content:'\f078'; /* bottom 화살표 아이콘  */
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}



.slide{ text-align: center !important;}

.slider-container,
.slider,
.slider .slide,
.slider .slide img {
  width: 100%;
  height: 700px !important;
  border-radius: 10px;
}

.slider-pc{display: none !important;}  
.slider-m{display: block !important;}   

.slide .caption,
.slide .more{      
  width: 100%;
  
}
.slide .caption{     
  top: 500px !important;
}
.slide .more{     
  top: 600px !important;     
}

.slide #winter{
  color: black;
}

.slide #winter-more .btn{
  background: black !important;
  color: white !important;
}

#month-pick{
  padding: 50px 0  !important;
  margin-bottom: 50px !important;
  height: 500px !important;
  padding-right: 0 !important;
}

#month-pick .thumbnail img{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 300px !important;
}

#story .col-md-6:nth-child(1){
  width:400px !important;
  height: 250px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: -50px !important; /* 아래쪽 박스가 위로 올라와서 겹치게 */
}
#tomorrow .col-md-6{
  height: 250px !important;
  width: 400px !important;
  margin-left: 6% !important;
  margin-right: 6% !important;
}
#tomorrow .col-md-6:nth-child(1){
  width:500px !important;
  height: 200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 150px !important; /* 아래쪽 박스가 위로 올라와서 겹치게 */
}

  #story .row .btn{
    bottom: 370px;          /* 화면이 작아지면 버튼을 위로 */
    left: 50%;             /* 모바일에서는 무조건 가운데 */
    right: auto;           /* right 값 초기화 */
    transform: translateX(-50%); /* 가로 정중앙 맞추기 */
  }
  #tomorrow .row .btn {
    bottom: 10px;          /* 화면이 작아지면 버튼을 위로 */
    left: 50%;             /* 모바일에서는 무조건 가운데 */
    right: auto;           /* right 값 초기화 */
    transform: translateX(-50%); /* 가로 정중앙 맞추기 */
  }
.story-text{
    padding-top: 10px;
}
#brand {display: none;}
#brand-m {
  display: block;
 text-align: center;
}

#brand-m .col-md-6{
  background: white;
  box-sizing: border-box;
  margin: 10px;
  transition: 0.5s;
  width:200px;
  height: 210px;
  border-radius: 10px !important;

}
#brand-m .row {
  line-height: 200px;
}
#brand-m .col-md-6 img{
  width: 100%;  
}

#brand-m .col-md-6:hover{
  transform: scale(1.05);
}



#footer-pc{display: none;}
#footer-m{
  display: block;
  background: black;
  color:white;    
}
#footer-m button,
#footer-m div{
  background: black;
  color:white;
}


#footer-m .accordion:after {
  /* content: '\002B'; */
  content: '\f107'; /* down 화살표 아이콘  */
  font-family: "Font Awesome 7 Free"; /* fontawesom 버젼 7 무료 글꼴*/
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

#footer-m .active:after {
  /* content: "\2212"; */
  content:'\f106'; /* up 화살표 아이콘  */
}
#footer-m img{
margin-top: 20px;
}

#footer-m .btn{
  margin-top: 50px;
  background: black;
  color: white;
  width: 450px;
  border-radius: 50px;
  justify-content: center; /* flex 중앙 정렬 */
}

.footer-hr{
  background-color: white !important;
  border: none;
  height: 5px;
}
#footer-m .accordion{
  font-size: 25px;
  font-family: "Noto Sans KR", sans-serif;font-optical-sizing: auto;font-weight: 100;font-style: normal;
}
#footer-m b{
  font-size: 12px;

}
}