/* 
이전 색상 #960c1c
*/
/* section01 */
#section01{ overflow: hidden; position: relative; width: 100%; height: 100vh; }
#section01 .videoWrap{position:relative; width: 100%; height:100%; top: 0; left: 0; margin:0; pointer-events: none;}
#section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
    width: auto;
    height: auto;
    min-width: 150%;
    min-height: 150%;
    display: block;

 }
#section01 .control{ z-index: 1; font-size: 0; position: absolute; bottom: 100px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center; z-index: 100;}
#section01 .control li{ display: inline-block; padding: 0 5px;}
#section01 .control li a{ display: block; font-size: 18px; color: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; border: 1px solid #fff;}
#section01 .control li i{ color: #fff; position: relative; }
#section01 .scroll-down{ position: absolute; width: 34px; height: 23px; z-index: 10; bottom: 30px; left: 0; right: 0; margin: 0 auto;}
#section01 .play-pause a.hide{ display: none;}
#section01 .control .mute-onoff a.hide{ display: none;}
.vidbox .ratio iframe, .end-video .videoWrap iframe, #cutvideo1, #cutvideo2{pointer-events: none;}
.m-play{ display: none;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  /* #section01 { width: 100%; height:100.00vw; padding-top: 0; margin-top: 50px; } */
  /* #section01 { width: 100%; height:50.00vw; padding-top: 0; margin-top: 50px; } */
  #section01 { width: 100%; height:auto; aspect-ratio:16/10; padding-top: 0; margin-top: 50px; }
  #section01 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0;  }
  #section01 .videoWrap, #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ pointer-events: unset;}
  #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{opacity: 1; }
  #section01 .control{ bottom: 25px; }
  #section01 .control li a{ display: block; font-size: 12px; width: 28px; height: 28px; line-height: 29px; }
}


#section02{ width: 100%; position: relative; padding: 80px 0; text-align: left; overflow: hidden;}
#section02 > .wrap1400 > h3{ padding-bottom: 12px;}
#section02 .swiper-area{ width: 100%; overflow: hidden;}
#section02 .swiper-area .event-swiper{ width: 100%; overflow: visible;}
#section02 .swiper-area .event-swiper .swiper-slide{ opacity: .2; pointer-events: none;}
#section02 .swiper-area .event-swiper .swiper-slide.swiper-slide-visible{ opacity: 1; pointer-events: inherit;}
#section02 .swiper-area .event-swiper .img-wrap{ width: 100%; height: 456px; position: relative; overflow: hidden; margin-bottom: 10px;}
#section02 .swiper-area .event-swiper .text-wrap h3{ padding-bottom: 5px;}
#section02 .swiper-area .event-swiper .text-wrap div.con{ text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#section02 .swiper-area .event-swiper .text-wrap .more-btn{ width: 100%; height: 48px; line-height: 46px; padding: 0 20px; border: 1px solid #960c1c; margin-top: 20px; transition: .3s;}
#section02 .swiper-area .event-swiper .text-wrap .more-btn i{ line-height: 46px; font-size: 32px;}
#section02 .swiper-area .event-swiper .swiper-slide:hover .text-wrap .more-btn{ background-color: #960c1c; color: #fff;}
#section02 .swiper-area .event-swiper .swiper-slide:hover .text-wrap .more-btn i{ color: #fff;}
#section02 .event-next{ top: 208px; right: -104px;}
#section02 .event-prev{ top: 208px; left: -104px;}
/* =================== 1440px =================== */
@media (max-width: 1440px) {
  #section02 .swiper-area .event-swiper .img-wrap{ height: 31.67vw }
  #section02 .event-next{ top: 14.44vw; }
  #section02 .event-prev{ top: 14.44vw; }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ padding: 60px 0 100px;}
  #section02 > .wrap1400 > h3{ text-align: center; }
  #section02 .swiper-area .wrap1400{ padding: 0 65px;}
  #section02 .swiper-area .event-swiper .img-wrap{ height: 60.80vw;}
  #section02 .swiper-area .event-swiper .text-wrap h3{ padding-bottom: 6px;}
  #section02 .swiper-area .event-swiper .text-wrap p.con{ -webkit-line-clamp: 3; }
  #section02 .swiper-area .event-swiper .text-wrap .more-btn{ width: 100%; height: 36px; line-height: 34px; padding: 0 10px;}
  #section02 .swiper-area .event-swiper .text-wrap .more-btn i{ line-height: 34px; font-size: 26px;}
  #section02 .event-next{ top: 25.87vw; right: 17px;}
  #section02 .event-prev{ top: 25.87vw; left: 17px;}
}


#section03{ overflow: hidden;}


#section04{ position: relative; padding: 120px 0;}
#section04 .text-wrap{ width: 456px; height: 346px; justify-content: center; align-items: flex-start; flex-wrap: wrap; flex-direction: column;}
#section04 #map{ width: 810px; height: 346px; background-color: beige;}
#section04 .text-wrap h3{ padding-bottom: 12px;}
#section04 .text-wrap p{ text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
#section04 .text-wrap .more-btn{ width: 100%; height: 48px; line-height: 46px; padding: 0 20px; border: 1px solid #960c1c; margin-top: 20px; transition: .3s;}
#section04 .text-wrap .more-btn i{ line-height: 46px; font-size: 32px;}
#section04 .text-wrap .more-btn:hover{ background-color: #960c1c; color: #fff;}
#section04 .text-wrap .more-btn:hover i{ color: #fff;}
/* =================== 1440px =================== */
@media (max-width: 1440px) {
  #section04 .text-wrap{ width: calc(100% - 56.25vw); padding-right: 9.31vw;}
  #section04 #map{ width: 56.25vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section04{ position: relative; padding: 45px 0 100px;}
  #section04 .text-wrap{ width: 100%; height: auto; padding-bottom: 40px; align-items: center; padding-right: 0; text-align: center;}
  #section04 #map{ width: 100%; height: 76.80vw; }
  #section04 .text-wrap h3{ padding-bottom: 12px;}
  #section04 .text-wrap p{ -webkit-line-clamp: 5; }
  #section04 .text-wrap .more-btn{ width: 100%; height: 36px; line-height: 34px; padding: 0 10px; margin-top: 40px; text-align: left; }
  #section04 .text-wrap .more-btn i{ line-height: 34px; font-size: 26px;}
}



#section05{ width: 100%; height: 37.37vw; position: relative;}
#section05 .videoWrap{ width: 100%; height: 100%; position: relative; overflow: hidden;}
#section05 .videoWrap iframe{ position: absolute; top: -25%; left: -25%; width: 150%; height: 150%;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section05{ height: 100vw;}
  #section05 .videoWrap iframe{ position: absolute; top: -45%; left: -45%; width: 190%; height: 190%;}
}



#section06{ padding: 40px 0; overflow: hidden;}
#section06 .marquee_wrap { white-space: nowrap; display: flex; align-items: center; will-change: transform; width: 100%}
#section06 .marquee_box { will-change: transform; animation: marquee 30s linear infinite; }
@keyframes marquee {
  from { transform: translateZ(0) }
  to { transform: translate3d(-100%,0,0) }
}



#section07{ overflow: hidden; position: relative; width: 100%; }
#section07 > .flex-wrap{ align-items:flex-start;}
#section07 .left{ background-color: #fff; width: 25%; border-right: 1px solid #960c1c;}
#section07 .left .top{ height: 229px; background-color: #960c1c; display: flex; align-items: center; justify-content: center; }
#section07 .left ul{ background-color: #fff;}
#section07 .left .mo-top{ display: none;}
#section07 .left li{ cursor: pointer; line-height: 60px; height: 60px; padding: 0 20px; border-bottom: 1px solid #960c1c; display: flex; justify-content: space-between; align-items: center; transition: .3s;}
#section07 .left li i{ font-size: 32px;}
#section07 .left li:hover{ color: #fff; background-color: #960c1c;}
#section07 .left li.active{ color: #fff; background-color: #960c1c;}
#section07 .right{ width: 75%; background-color: #960c1c; height: 100%; position: relative;}
#section07 .right .rooms{ opacity: 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#section07 .right .rooms.active{ opacity: 1; pointer-events: inherit;}
#section07 .right .slide-wrap{ width: 100%; height: 661px; position: relative;}
#section07 .right .text-wrap{ width: 100%; height: calc(100% - 661px); background-color: #960c1c; padding: 0 20px; }
#section07 .right .text-wrap h3{ padding-bottom: 4px;}
#section07 .right .text-wrap li{ display: inline-block; position: relative; padding-right: 10px;}
#section07 .right .text-wrap li:after{ content: '•'; color: #fff; font-size: 16px; position: absolute; right: 0; top: 0;}
#section07 .right .text-wrap li:last-child:after{ content: '';}
#section07 .right .more-btn{ width: 240px; height: 48px; line-height: 46px; padding: 0 20px; border: 1px solid #fff; /* margin-top: 20px; */ transition: .3s;}
#section07 .right .more-btn i{ line-height: 46px; font-size: 32px;}
#section07 .right .more-btn:hover{ background-color: #fff; color: #960c1c;}
#section07 .right .more-btn:hover i{ color: #960c1c;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section07 > .flex-wrap{ flex-direction: column;}
  #section07 .left{ width: 100%; border-right: unset;}
  #section07 .left .top{ height: 33.33vw; }
  #section07 .left .mo-top{ display: flex; padding: 0 15px; height: 60px; justify-content: space-between; align-items: center; border-bottom: 1px solid #960c1c;}
  #section07 .left .mo-top i{ font-size: 26px;}
  #section07 .left ul{ background-color: #fff;}
  #section07 .left li{ padding: 0 15px; }
  #section07 .left li i{ font-size: 26px;}
  #section07 .right{ width: 100%; height: calc(100vw + 240px); position: relative;}
  #section07 .right .rooms{ opacity: 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  #section07 .right .rooms.active{ opacity: 1; pointer-events: inherit;}
  #section07 .right .slide-wrap{ height: calc(100vw + 16px); position: relative;}
  #section07 .right .text-wrap{ height: calc(100% - 100vw); padding: 0 15px; justify-content: center; align-items: flex-start; flex-wrap: wrap; flex-direction: column;}
  #section07 .right .text-wrap h3{ padding-bottom: 10px;}
  #section07 .right .text-wrap li{ display: block; padding-right: 0;}
  #section07 .right .text-wrap li:after{ content: ''; }
  #section07 .right .more-btn{ width: 100%; height: 36px; line-height: 34px; padding: 0 10px; margin-top: 30px; }
  #section07 .right .more-btn i{ line-height: 34px; font-size: 26px;}
}

#section09{ width: 100%; height: 56.25vw; position: relative; font-size: 0;}
#section09 .videoWrap{ width: 100%; height: 100%; position: relative; overflow: hidden;}
#section09 .videoWrap iframe{ position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section09{ height: 100vw;}
  #section09 .videoWrap iframe{ position: absolute; top: -45%; left: -45%; width: 190%; height: 190%;}

}