.banner{width: 100%; height: 100vh;}
.video_container{width: 100%; height: 100vh;  position: relative;}
.video_container video{width: 100%; height: 100%; position: absolute; top: 0; left: 0;object-fit: cover;}

.video_container::before{content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: 2;}

.banner_text{width: 50%; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 3; line-height: 1.5; text-align: center;}
.banner_text p{font-size: 20px; color: var(--main_white_fa);}
.banner_text span{font-size: 26px; font-weight: 500; color: var(--main_white_fa);}

/* 독도 역사 스타일 시작 */
.history{width: 100%; background: url(../img/banner_background.png) no-repeat center/cover; 
  height: 100vh; display: flex;}
.history .container{display: flex; align-items: center; justify-content: center; gap: 60px; margin-top: 0;}
.history .item{width: 400px; text-align: center; padding: 30px; transition: 0.5s;}
.history .img_box{width: 310px; height: 250px; margin: 10px;}
.history .text_box{width: 100%; background-color: var(--sub_black_4a); padding: 10px;}
.history .item p{font-size: 15px; color: var(--white_text_f9); line-height: 1.6; }
.history .item span{font-size: 18px; font-weight: 600; color: var(--main_white_fa);}

.history .item:nth-child(2n){transform: translateY(-20%);}
.history .item:nth-child(2n-1){transform: translateY(20%);}
/* 독도 역사 스타일 끝 */


/* 독도 뉴스 스타일 시작 */
.news{width: 100%; background-color: var(--main_white_fa);}
.news .container{display: flex; gap: 100px; margin-top: 70px; flex-wrap: wrap; justify-content: space-between;}
.news .container .item{width: 340px; height: 400px; position: relative;}
.news .container .item .img_box{width: 100%; height: 100%;}
.news .container .item .text_box{width: 50%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white_text_f9); line-height: 1.5;}
.news .container img{transition: linear 0.5s;  border-radius: 10px; position: relative;}
.news .container img:hover{border-radius: 120px; filter: brightness(0.3); color: var(--main_white_fa);}
/* 독도 뉴스 스타일 끝 */


/* 디스토리 스타일 시작 */
.dstory{width: 100%; height: 100vh; background-color: #F6E7D4; }
.dstory .dstory_wrap{padding: 50px 50px}
.dstory .inner{margin-top: 0;}
.slide_box{width: 60%; overflow: hidden;}
.slide_box .slide_container .item{scale: 0.8; transition: scale 2s;}
.slide_box .slide_container .item_title{width: 100%; text-align: center; background-color: var(--main_white_fa); font-size: 18px; color: var(--main_color); border-radius: 20px; padding: 5px; margin-bottom: 10px; opacity: 0; transition: 1s;}
.slide_box .slide_container .item_text{width: 100%; line-height: 1.5; opacity: 0; transition: 1s;}
.slide_box .slide_container .item_text .user_id{color: var(--sub_black_4a); font-size: 16px; font-weight: 400; margin-top: 10px;}
.slide_box .slide_container .item_text p{font-size: 16px; font-weight: 400; color: var(--main_black_1b);}

/* 스와이퍼 효과 스타일  */
.dstory .swiper-slide.swiper-slide-active{scale: 1;}
.dstory .swiper-slide.swiper-slide-active .item_title,
.dstory .swiper-slide.swiper-slide-active .item_text{opacity: 1; transition: 1s;}
/* 디스토리 스타일 끝 */


/* 행사일정 스타일 시작 */
/* 행사일정 위, 왼쪽 박스 디자인 */
.event{width: 100%; height: 100vh;}
.event .sub_title{display: flex; align-items: center; gap: 10px; font-size: 22px; margin-top: 45px;}
.event .date{font-size: 22px; color: var(--dark_text3); font-weight: 600;}
.event .sub_title .control_btn{display: flex; flex-direction: column; } 
.event .sub_title .control_btn span{font-size: 32px; transition: 0.3s; cursor: pointer;}
.event .container{margin-top: 45px; display: flex; width: 100%; height: 100%; gap: 100px;}
.event .left_box{width: 60%;}
.event .left_box .week{display: flex; justify-content: space-between;}
.event .sub_title .control_btn span:hover{color: var(--main_color);}

/* 달력 디자인 시작 */

.left_box table{width: 100%; height: 70%; border-collapse: collapse;}
.left_box table th{font-family: var(--sub_font); color: var(--dark_text3); font-weight: 600;}
.left_box table td{width: calc(100% / 7); vertical-align: text-top; position: relative; color: var(--dark_text6); font-weight: 600; font-size: 16px; border: 1px solid; padding-left: 10px;}


.left_box table .tr1 td:nth-child(4)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr2 td:nth-child(2)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr2 td:nth-child(3)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr3 td:nth-child(4)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr3 td:nth-child(6)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr4 td:nth-child(2)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr4 td:nth-child(5)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}
.left_box table .tr5 td:nth-child(3)::after{content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main_color); position: absolute; top: 25%; left: 8%;}

.left_box table .tr3 td:nth-child(6){color: #FF0606; border:#000;}

/* 달력 디자인 끝 */

/* 행사일정 오른쪽 박스 디자인 */
.event .right_box{width: 42%;}
.event .right_box .event_title{width: 80%;  position: relative; color: var(--dark_text1c); font-size: 20px; font-weight: 500;}
.event .right_box .event_list{width: 100%; margin-top: 80px; }
.event .right_box .event_list .list_title{margin-bottom: 50px; font-size: 20px; color: var(--dark_text3); font-weight: 500; position: relative;}
.event .right_box .event_list .list_title::after{content: ''; width: 80%; height: 1px; background-color: var(--main_color); position: absolute; left: 0; top: -100%;}

.event .right_box .event_list .list_item{width: 100%; display: flex; flex-direction: column; gap: 30px; padding-left: 3%;}
.event .right_box .event_list .list_item .text_box{width: 80%; position: relative; color: var(--dark_text3); font-size: 18px; font-weight: 400;}
.event .right_box .event_list .list_item .text_box::before{
  content: 'emergency';
  font-family: 'Material Symbols Outlined';
  width: 10px; height: 10px; position: absolute; top: 55%; left: -5%; transform: translateY(-100%); color: var(--dark_text9);
}

.event .right_box .event_list .list_item .text_box:nth-child(5){color: var(--dark_text1c); font-weight: 500;}
.event .right_box .event_list .list_item .text_box:nth-child(5)::before{color: var(--main_color);}

/* 행사일정 스타일 끝 */


/* 매거진 스타일 시작 */
.magazine{background-color: var(--sec_color2);}
.magazine .main_title{text-align: center; font-family: var(--sub_font); font-weight: 600; padding-top: 80px;}
.magazine .magazine_slide{width: 100%; height: 100vh; overflow: hidden;}
.magazine .slide_container{display: flex; width: 200%; gap: 40px; margin-top: 50px; flex-grow: 1;}
.magazine .slide_container.top {animation: auto_slide 40s linear infinite ;}
.magazine .slide_container.bottom {animation: auto_slide 40s linear infinite  reverse;}
.magazine .item .img_box{width: 300px; height: 360px; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);}
.magazine .item img{border-radius: 10px;}
.magazine .item .item_text{text-align: end;}

.magazine .slide_container:hover{animation-play-state: paused;}

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

/* 매거진 스타일 끝 */

/* 갤러리 스타일 시작 */
.gallery{width: 100% ;background-color: var(--sec_color4); padding-bottom: 2%;}
.gallery .inner{margin-top: 0; padding-top: 80px;}
.gallery .top_box .main_title{font-family: var(--sub_font); color: var(--main_white_fa); text-align: center;}
.gallery .grid_container{
  width: 90vw;
  margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery .grid_container .item{overflow: hidden; border-radius: 20px;}

.gallery .btn_box{color: var(--main_white_fa);}

.gallery .grid_container .item1{height: 800px;}
.gallery .grid_container .item2{height: 500px;}
.gallery .grid_container .item3{height: 500px;}
.gallery .grid_container .item4{height: 500px;}
.gallery .grid_container .item5{height: 800px; transform: translateY(-300px);}
.gallery .grid_container .item6{height: 500px; transform: translateY(-300px);}
.gallery .grid_container .item7{height: 600px;transform: translateY(-300px);}
.gallery .grid_container .item8{height: 700px;transform: translateY(-300px);}
.gallery .grid_container .item9{height: 700px;transform: translateY(-600px);}
.gallery .grid_container .item10{height: 500px;transform: translateY(-400px);}
.gallery .grid_container .item11{height: 700px;transform: translateY(-300px);}
.gallery .grid_container .item12{height: 700px;transform: translateY(-600px);}
.gallery .grid_container .item13{height: 700px;transform: translateY(-600px);}
.gallery .grid_container .item14{height: 700px;transform: translateY(-300px);}
.gallery .grid_container .item15{height: 700px;transform: translateY(-600px);}
.gallery .grid_container .item16{height: 700px;transform: translateY(-600px);}
.gallery .grid_container .item17{height: 700px;transform: translateY(-300px);}
.gallery .grid_container .item18{height: 700px;transform: translateY(-600px);}

.gallery .grid_container .item img{transition: 1s;}
.gallery .grid_container .item:hover>img{transform: scale(1.1);}

/* 갤러리 스타일 끝 */

/* Q&A 스타일 시작 */
.dokdo_qna{width: 100%; background: url(../img/sec5_qna_background.png) no-repeat center/cover; padding-top: 5px; margin-bottom: 120px;}
.dokdo_qna .top_box{margin-bottom: 130px;}
.dokdo_qna .qna_container{width: 80%; margin: 50px auto;}
.dokdo_qna input{display: none;}
.dokdo_qna label{display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer;}
.dokdo_qna .question, .dokdo_qna .title{height: 100px; display: flex; align-items: center; justify-content: space-between;}
.dokdo_qna .question{gap: 50px;}
.dokdo_qna .question .number{font-size: 30px; font-weight: 500; color: var(--dark_text9);}
.dokdo_qna .question .text{font-size: 18px; font-weight: 400; color: var(--dark_text6);}
.dokdo_qna .icon{position: relative;}
.dokdo_qna .icon span{position: absolute; font-size: 35px; color: var(--dark_text6); transition: 0.2s;}
.dokdo_qna .description{position: relative; font-weight: 400; width: 100%; position: relative; max-height: 0; overflow: hidden; transition: max-height 1s;}
.dokdo_qna .description p{padding: 50px 100px; color: var(--dark_text3);}
.dokdo_qna .description::after{content: ''; width: 2px; height: 60%; position: absolute; background-color: var(--main_color); top: 15%; left: 5%; opacity: 0.5;} 

.qna_container input:checked+label .description{max-height: 200px;}
.qna_container input:checked+label .icon>span:nth-child(1){opacity: 0;}
.qna_container input:checked+label .icon>span:nth-child(2){color: var(--main_color);}
.qna_container input:checked+label .number{color: var(--main_color);}
.qna_container input:checked+label .text{color: var(--dark_text1c);}
.qna_container input:checked+label .btn_box{display: flex;}

.dokdo_qna .btn_box{margin: 0; padding-bottom: 15px; justify-content: start; margin-left: 100px; display: none; }
/* Q&A 스타일 끝 */