@charset "UTF-8";
.main-hero .swiper {
  width: 100%;
  position: relative;
}
.main-hero .swiper-wrapper {
  height: var(--slider-height);
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-wrapper {
    --slider-height: 85vh;
  }
}
.main-hero .swiper-slide {
  position: relative;
}
.main-hero .swiper-slide .slide-img {
  display: flex;
  height: 100%;
  background-size: cover;
  transition: transform 1.5s ease-in-out;
  transform: scale(1.2);
}
.main-hero .swiper-slide .slide-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
.main-hero .swiper-slide .slide-txt {
  position: absolute;
  z-index: 1;
  color: var(--white);
  top: 40%;
  width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-slide .slide-txt {
    top: 30%;
  }
}
.main-hero .swiper-slide .slide-txt h1 {
  font-size: var(--fs60);
  margin-bottom: 20rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-slide .slide-txt h1 {
    font-size: var(--fs40);
  }
}
.main-hero .swiper-slide .slide-txt p {
  font-size: var(--fs22);
  margin-bottom: 30rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-slide .slide-txt p {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.main-hero .swiper-slide .slide-txt .tag {
  display: flex;
  align-items: center;
  gap: 10rem;
}
.main-hero .swiper-slide .slide-txt .tag-cat {
  color: var(--white);
  padding: 5rem 10rem;
  border-radius: 3rem;
  font-weight: 500;
}
.main-hero .swiper-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  z-index: 1;
}
.main-hero .swiper-progress-bar {
  width: 0%;
  height: 100%;
  background-color: var(--primary2);
  transition: width 0.3s linear;
}
.main-hero .swiper-button-prev,
.main-hero .swiper-button-next {
  color: var(--white);
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-button-prev,
  .main-hero .swiper-button-next {
    top: 79%;
    /* bottom: 10%; */
  }
}
.main-hero .swiper-button-prev:after,
.main-hero .swiper-button-next:after {
  font-size: 20px;
}
.main-hero .swiper-button-prev {
  left: 120rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-button-prev {
    left: 15%;
  }
}
.main-hero .swiper-button-next {
  right: 120rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-hero .swiper-button-next {
    left: 24%;
    /* right: auto; */
  }
}
.main-hero .swiper-pagination {
  display: flex;
  justify-content: flex-start;
  gap: 5rem;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}
.main-hero .swiper-pagination-bullet {
  background: white;
  transition: all 0.4s;
}
.main-hero .swiper-pagination-bullet-active {
  width: 20rem;
  border-radius: 10rem;
  transition: all 0.4s;
}
.main-hero .swiper .zoom-in {
  transform: scale(1);
}
.main-category {
  margin: 50rem 0rem;
}
.main-category .swiper-wrapper {
  align-items: stretch;
  height: 100%;
}
.main-category .swiper-slide {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: stretch;
  height: auto;
}
.main-category .swiper-button-next,
.main-category .swiper-button-prev {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: auto;
  right: auto;
  color: var(--grey8);
  /* top: auto; */
}
.main-category .swiper-button-next::after,
.main-category .swiper-button-prev::after {
  font-size: var(--fs20);
}
/* @media screen and (min-width: 320px) and (max-width: 767px) {
  .main-category .swiper-button-next,
  .main-category .swiper-button-prev {
    top: auto;
  }
} */
.main-category .swiper-button-next {
  order: 2;
}
.main-category .swiper-button-prev {
  order: 1;
}
.main-category .swiper-pagination {
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 5rem;
}
.main-category .swiper-pagination-bullet {
  border-radius: 0;
  width: 25rem;
  height: 3rem;
}
.main-category .swiper-pagination-bullet-active {
  background: var(--secondary);
}
.main-category .cat-slider {
  padding-bottom: 40rem;
}
.main-category .cat-header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 10rem;
  position: relative;
  margin-bottom: 20rem;
  padding-left: 20px;
}
.main-category .cat-header h1 {
  font-size: var(--fs36);
  font-weight: 700;
  color: var(--grey8);
  position: relative;
}
.main-category .cat-header h1::before {
  content: "";
  width: 10rem;
  height: 10rem;
  background: var(--secondary);
  position: absolute;
  left: -20rem;
  top: 60%;
}
.main-category .cat-arrow {
  display: flex;
  position: relative;
  width: auto;
}
.main-category .cat-card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}
.main-category .cat-card .img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: auto;
  aspect-ratio: 3/3.2;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-category .cat-card .img {
    aspect-ratio: 4/3;
  }
}
.main-category .cat-card .info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  padding: 20rem;
  color: var(--white);
}
.main-category .cat-card .info .cat {
  color: var(--white);
  font-weight: 700;
}
.main-category .cat-card .info h1 {
  font-size: var(--fs26);
  font-weight: 700;
  margin-block: 20rem;
}
.main-news .grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 30rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-news .grid {
    grid-template-columns: 1fr;
  }
}
.main-news .grid-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30rem;
  align-items: stretch;
  position: relative;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-news .grid-col {
    grid-template-columns: 1fr;
  }
}
.main-news .grid-col:before {
  content: "";
  width: 1rem;
  height: 100%;
  position: absolute;
  left: 50%;
  display: block;
  background: var(--grey2);
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-news .grid-col:before {
    display: none;
  }
}
.main-news .grid-col > div:last-child {
  display: flex;
  align-items: stretch;
}
.main-news .news-spot {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.main-news .news-spot img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 4/2.5;
}
.main-news .news-spot .news-title {
  font-size: var(--fs22);
}
.main-news .news-spot .news-title:hover {
  color: var(--primary);
}
.main-news .news-spot .date {
  font: var(--fs14) "Noto Sans KR";
}
.main-news .news-list {
  display: flex;
  flex-wrap: nowrap;
  /* flex-grow: 1; */
}
.main-news .news-list a {
  display: grid;
  padding: 10rem;
  width: 100%;
  row-gap: 10rem;
}
.main-news .news-list a h3 {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.main-news .news-list a .date {
  font: var(--fs14) "Noto Sans KR";
}
.main-news .news-list a:hover {
  color: var(--primary);
}
.main-news .news-list:nth-child(even) a {
  background: var(--grey1);
}
.main-news .news-list2 {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}
.main-news .news-spot2 {
  display: flex;
  gap: 30rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-news .news-spot2 {
    flex-direction: column;
  }
}
.main-news .news-spot2 img {
  width: calc(33.3333333333% - 15rem);
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 4/2.7;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-news .news-spot2 img {
    width: 100%;
  }
}
.main-news .news-spot2 .news-title {
  font-size: var(--fs22);
  margin-block: 20rem;
}
.main-news .news-spot2 .news-title:hover {
  color: var(--primary);
}
.main-news .news-spot2 .date {
  font: var(--fs14) "Noto Sans KR";
}
.main-news ul {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between;
  align-items: stretch; */
  width: 100%;
}
.main-news .contact {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}
.main-news .contact .box {
  display: flex;
  flex-direction: column;
  gap: 30rem;
  position: -webkit-sticky;
  position: sticky;
  top: 23%;
}
.main-news .contact-box,
.main-news .contact-fav {
  display: flex;
  flex-direction: column;
  background: var(--grey1);
  padding: 20rem;
  border-radius: 10rem;
}
.main-news .contact-box {
  text-align: center;
}
.main-news .contact-fav a {
  color: var(--primary);
  margin: 10rem 0;
}
.main-news .contact .photo {
  width: 170rem;
  height: 170rem;
  border-radius: 170rem;
  border: 5px solid var(--white);
  overflow: hidden;
  margin: 0 auto;
}
.main-news .contact .title {
  font-size: var(--fs20);
  margin: 10rem 0;
}
.main-news .contact .ph {
  font-size: var(--fs18);
  font-weight: 600;
  margin: 10rem 0;
}
.main-news .contact .ph-no {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}
.main-news .contact .ph-no i {
  background: var(--white);
  width: 32rem;
  height: 32rem;
  border-radius: 32rem;
  border: 1px solid var(--grey2);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 50rem;
}
.main-news .list-news {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.main-news .list-news ul {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main-news .list-news ul {
    gap: 30rem;
  }
}
.main-news .list-news ul li {
  display: flex;
  gap: 10rem;
}
.main-news .list-news ul li img {
  width: auto;
  height: 85rem;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
  object-fit: cover;
}
.main-news .list-news ul li a {
  display: grid;
  width: 100%;
}
.main-news .list-news ul li a h3,
.main-news .list-news ul li a p {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.main-news .list-news ul li a .date {
  font: var(--fs14) "Noto Sans KR";
}
.main-news .list-news ul li a:hover {
  color: var(--primary);
}
.main .tile-news {
  margin-block: 50rem;
  padding: 100rem 0;
  background: var(--grey1);
}
.main .tile-news .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30rem;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .main .tile-news .grid-4 {
    grid-template-columns: 1fr;
  }
}
.main .tile-news .news-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.main .tile-news .news-box img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 4/3;
  -o-object-position: center 60%;
  object-position: center 60%;
}
.main .tile-news .news-box .title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding: 10px 0px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.main .tile-news .news-box .title h1 {
  font-size: var(--fs18);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.main .tile-news .news-box .title h1:hover {
  color: var(--primary);
}
.main .tile-news .news-box .title p {
  width: 100%;
  white-space: initial;
}
.main .tile-news .news-box .title .date {
  font: var(--fs14) "Noto Sans KR";
}
.main .open-yt {
  cursor: pointer;
}
.main .news-box.open-yt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.5); /* Overlay hitam transparan */
  opacity: 0;
  transition: opacity 0.3s ease;
  aspect-ratio: 4/3;
}
.main .news-box.open-yt::after {
  content: "▶"; /* Ikon Play */
  font-size: 50px;
  color: white;
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.main .news-box.open-yt:hover::before,
.main .news-box.open-yt:hover::after {
  opacity: 1;
}
.main .news-section {
  font-size: var(--fs24);
  color: #e64946;
  margin-bottom: 20rem;
}
.main .bgwhite {
  background: var(--white);
}
.main .bgblue {
  background: #788ee4;
}
.main .bggreen {
  background: #093b46;
}
.main .bgred {
  background: #e47878;
}
.main .bggrey {
  background: #9bacba;
}
.main .bgblk {
  background: var(--grey);
}
.main .bgorg {
  background: #e4cb78;
}

.yt-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.yt-content {
  background: #fff;
  padding: 20px;
  position: relative;
  width: 80%;
  max-width: 900px;
  text-align: center;
  border-radius: 8px;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.yt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  background: #f00;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 50%;
  z-index: 99;
}

#player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.grid-2 {
    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}
.grid-2 .news-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.grid-2 .news-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: all .4s ease;
}
.grid-2 .news-box img:hover {
    width: 120%;
    height: 100%;
    scale: 1.02;
    -o-object-fit: cover;
       object-fit: cover;
}
.grid-2 .news-box .title {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 0px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
    justify-content: space-between;
}
.grid-2 .news-box .title h1 {
  font-size: var(--fs22);
}
.grid-2 .news-box .title h1:hover {
    color: var(--primary);
}

@media screen and (min-width: 320px) and (max-width: 767px) {
.grid-2 {
    grid-template-columns: 1fr;
    gap: 20px;
}
}