@charset "utf-8";
/* 도깨비 pj 메인 페이지 CSS - main.css */

/* 외부 CSS 불러오기 */
@import url(./reset.css);
@import url(./core.css);

/* 12그리드 css */
@import url(./grid_12_flex.css);

/* 공사중 표시 */
body * {
    outline: 2px dashed #ccc;
}

 /************************ 메인 CSS  ************************/
 /************************ 1. 상단영역  ************************/
 /* 상단영역 최상위 부모박스 */
 #top-area{
    /* 상단영역이 항상 위로 오기 */
     position: relative;
     z-index: 999;
 }

 .top-area{
    height: 122px;
    
 }
/* 상단영역 flex 부모박스  */
 .top-area .cont-box{
    justify-content: space-between;
 }
/* 로고박스 */
.logo-box{
  width: 130px;
  text-align: center;
  padding: 10px 0;

}

/*메뉴박스 */
.menu-box{
    padding-right: 10px;
}
/* 질문: 배너제외한 모든 바디에 그냥 좌우 패딩 10px 넣으면 안되나여? -> 이게 정석인데 (공통은 공통처리)
지금 연습중이라 한파트씩 만들다보니...*/

 /* 메뉴그룹 플렉스 */
 .menu-group{
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: space-evenly;
     height: 100%;
 }

 /* 상단영역 메뉴 공통 플렉스 */
 .menu-group ul{
     display: flex;

 }

/* 탑메뉴 */
.top-menu ul{
    font-size: 1.6rem;
    gap: 2rem;
}
/* GNB메뉴 */
.gnb-menu ul{
    font-size: 1.8rem;
    gap: 3.2rem;

}

/* 상위메뉴 li 오버시 a요소 글자 빨간색 */
.gnb-menu > ul > li:hover > a{
color: #f92f2f;
}

/* 서브메뉴 */
.sub-menu {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    /* 서브메뉴를 숨기기 위해 넘치는 자식 숨기기 */
    overflow: hidden;
    /* 높이값을 0으로 하면 자식요소가 숨겨짐 
    -> 단 여기에 위아래 패딩을 줄경우 숨겨지지 않는다!!!!!!!!!!!!!!그래서 패딩박스를 추가로만들엇어 */
    max-height: 0;
    /* 트랜지션 */
    transition: .4s ease-out;
}
/* 부모 li에 마우스 오버시 .sub-menu 높이값 변경하기 */
.gnb-menu > ul > li:hover .sub-menu{
    max-height: 400px;
/* 최대높이값을 컨텐츠 높이값보다 조금더 크게 잡으면
오버시 높이값이 내용만큼만 커지게 된다 
-> 이때 처음(.sub-menu)에 최대높이값세팅(max-height: 0;)이 필수다!그래야 트랜지션 먹는다 */
}

/* 패딩만 내부에 다른 블록요소를 사용함 
-> 자식요소 숨기기 부모박스엔 패딩을 줄 수 없다!*/
.padding-box{
    padding: 5vw;

}

/* 타이틀바 */
.title-bar{
    display: flex;
   justify-content: space-between;
   /* 글자크기 */
   font-size: 3.6rem;
   margin-bottom: 2.4rem;
    
}
/* 서브리스트 ul */
.sub-list ul{
    display: flex;
flex-direction: column;  
  flex-wrap: wrap;
  /* height: 100px; */

  /* 글자크기 */
  font-size: 1.6rem;
}
/* 서브리스트 li */
.sub-list li {
    /* 가로크기 제한 */
    width: calc(100% / 5);
    /* 한줄짜리말줄임표시 3가지세팅!!! */
    /* 줄바꿈방지 */
   white-space: nowrap;
   /* 넘치는자식숨기기 */
  overflow: hidden;
  /* 넘치는 글자 말줄임표시 */
  text-overflow: ellipsis;
}

/* 서브리스트의 ul별로 높이값 셋팅 */
/* 두줄 클래스 */
.two-line{
    height: 8rem;
}
/* 세줄 클래스 */
.three-line{
      height: 13.8rem;
}



 /************************ 1.5. 드라마파트 메뉴  ************************/
 /************************ 2. 메인영역  ************************/
 /************************ 2-1. 배너 영역  ************************/
 .banner-part{
    /* 비율세팅: 배너 이미지 크기 비율임! */
    aspect-ratio: 1360/592;
    background: url(../images/도깨비배너1-1.png) no-repeat center/cover;
 }
 /************************ 2-2. 캐릭터소개 영역  ************************/
 .character-part{
    height: 188px;
 }
 /************************ 2-3. 드라마소개 영역 ************************/
 .intro-part{
     height: 500px;
 }
 /************************ 2-4. 미리보기 영역  ************************/
 .preview-part{
     height: 660px;
 }
 /************************ 2-5. 현장포토 영역  ************************/
 .field-part{
     height: 906px;
 }
 /************************ 2-6. 대표포스터 영역 ************************/
 .poster-part{
    height: 654px;
}
 /************************ 2-7. 최신동영상 영역  ************************/
 .video-part{
    height: 409px;
}
 /************************ 3. 하단영역  ************************/
 .bottom-area{
    height: 391px;
}