@charset "UTF-8";

:root {
      --gap: 20px;/* 카드 사이 간격 */
      --col-min: 100rem;
      --col-max: 250rem;
      --col-width: clamp(var(--col-min), 31.5%, var(--col-max));

      --mask-fade: 100rem; /* 상하단 페이드 영역(px) */
      --bg: #FFF6ED;
      --card-bg: #FFEFE0;
      --card-radius: 10rem;
      --card-pad: 0;
      --card-shadow: none;
      --speed-default: 2000;  /* px/sec (기본 속도) */
}

h2 {font-size: 36rem; font-weight: bold; color: var(--p_color);}
h2 + p {font-size: 20rem; margin-top: 10rem;}
h3 {font-size: 24rem; font-weight: bold; margin-bottom: 30rem;}
h4 {font-size: 18rem; font-weight: bold; margin-bottom: 12rem;}
@media all and (max-width: 768px) {
    h2 {font-size: 32rem;}
    h2 + p {font-size: 18rem;}
    h3 {font-size: 22rem; margin-bottom: 20rem;}
}
@media all and (max-width: 480px) {
    h2 {font-size: 30rem;}
    h2 + p {font-size: 16rem;}
    h3 {font-size: 20rem;}
}

#visual {height: 100vh; padding: 80rem 0;}
#visual > .wrap {height: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}

.vis_gallery {width: 50%; max-width: 790rem; height: 100%;}
.vis_gallery .mimg {display: none; border-radius: 10rem;}
.masonry-slider, .cols, .col, .track {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* --- 슬라이더 래퍼 --- */
.masonry-slider {
    width: 100%;
    height: 100%;
    background: #FFF6ED;
    overflow: hidden;
    position: relative;
}

/* 상하단 페이드 마스크 */
.masonry-slider::before,
.masonry-slider::after {
    content: "";
    position: absolute;
    left:0; right:0;
    height: var(--mask-fade);
    pointer-events: none;
    z-index: 3;
}
.masonry-slider::before { top:0; background: linear-gradient(180deg, #FFF6ED, rgba(255,246,237,0)); }
.masonry-slider::after  { bottom:0; background: linear-gradient(0deg, #FFF6ED, rgba(255,246,237,0)); }

/* --- 컬럼들 --- */
.cols {
    position: absolute; inset: 0;
    display: flex; align-items: stretch; justify-content: center; gap: var(--gap);
    overflow: hidden;
    z-index: 1;
}

.col {
    flex: 1 1 var(--col-width);
    min-width: var(--col-min);
    max-width: var(--col-max);
    overflow: hidden;
    position: relative;
    border-radius: 18px;
}

.col::before, .col::after {
    content: ""; position:absolute; left:0; right:0; height: var(--mask-fade); z-index:2; pointer-events:none;
}
.col::before { top:0; background: linear-gradient(180deg, rgba(255,246,237,.9), rgba(255,246,237,0)); }
.col::after  { bottom:0; background: linear-gradient(0deg, rgba(255,246,237,.9), rgba(255,246,237,0)); }

.vis_gallery .track,
.vis_gallery .track__clone {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: layout paint;
  animation: none;
  transition: none !important;
}

.col:hover .track { animation-play-state: paused; }

.card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-pad);
    display: grid; gap: 8px;
    overflow: hidden;
    margin:0;
    box-sizing:border-box;
}
.card.spacer { padding:0; border:0; background:transparent; }
.card img { display:block; width:100%; height:auto; }

@keyframes flowY {
  from { transform: translateY(var(--start, 0)); }
  to   { transform: translateY(calc(var(--start, 0) - var(--segment, 600px))); }
}

@media all and (prefers-reduced-motion: reduce) {
    .track { animation: none; }
}

@media all and (max-width: 1420px) {
  .cols { gap: 14px; }
  :root { --gap: 14px; }
  .vis_gallery .cols { justify-content: center; }
  .vis_gallery .col { display: none; }
  .vis_gallery .col:nth-child(-n+2) { display: block; }
}
@media all and (max-width: 1024px) {
    .cols { gap: 12px; }
    :root { --col-min: 100px; --col-max: 300px; --gap: 12px; }
}
@media all and (max-width: 768px) {
    :root { --col-min: 100%; --col-max: 100%; }
    .vis_gallery .col:nth-child(1) { display: block; }
}

.display {width: 45%; max-width: 655rem; display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 100rem 0; margin: 50rem 0;}
.display > .dpbox {width: 100%;}
.display .title {font-size: 40rem; font-weight: bold; color: var(--p_color); line-height: 1.3;}
.display .title_sub {font-size: 18rem; margin-top: 26rem; padding-bottom: 45rem; border-bottom: 1px solid #978E85;}
.display .banner_wrap {margin-top: 26rem; display: flex; flex-wrap: wrap; gap: 20rem;}
.display .banner_wrap > a {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: var(--p_color); font-weight: bold;  border: 1px solid var(--p_color); border-radius: 10rem; padding: 20rem; text-align: center; transition: all 0.2s; position: relative;}
.display .banner_wrap > a.icon01 {width: calc(50% - 20rem);color: #ffffff;background: #5D9F00;background: linear-gradient(135deg, rgba(93, 159, 0, 1), rgba(27, 99, 56, 1), rgba(27, 99, 56, 1), rgba(93, 159, 0, 1));background-size: 400% 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); animation: gradient 10s ease infinite;}
.display .banner_wrap > a.icon02 {width: calc(25% - 10rem)}
.display .banner_wrap > a.icon03 {width: calc(25% - 10rem)}
/* .display .banner_wrap > a.icon01:hover {background-position: 99% 50%;} */
/* .display .banner_wrap > a:hover {background: #5D9F00; background: linear-gradient(135deg,rgba(93, 159, 0, 1) 0%, rgba(27, 99, 56, 1) 100%);} */
.display .banner_wrap > a > span {display: flex;  flex-wrap: wrap; align-items: center; justify-content: center;}
.display .banner_wrap > a > span::before {content: ''; display: block; width: 24rem; height: 24rem; background: url(../img/banner.png) no-repeat left center/300%; margin-right: 10rem;}
.display .banner_wrap > a.icon02 > span::before {background-position-x: center;}
.display .banner_wrap > a.icon03 > span::before {background-position-x: right;}
.display .banner_wrap > a > .sub {position: absolute; font-size: 14rem; font-weight: bold; border-radius: 60rem; background: #ffffff; padding: 4rem 20rem; margin: 10rem 10rem 0; color: var(--p_color); top: -50rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); animation: balloon 1.2s infinite; transition: 0.1s;}
.display .banner_wrap > a > .sub::before {content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 8px 0 8px; border-color: #FFFFFF transparent transparent transparent; position: absolute; bottom:-10px; left: 50%; transform: translateX(-50%);}
.display .scroll {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-weight: bold; color: var(--p_color);}
.display .scroll::after {content: ''; width: 18rem; height: 16rem; display: block; background: url(../img/scroll.png) no-repeat 0 0/contain; margin: 6rem auto 0;}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 99% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media all and (max-width: 1530px) {
    .display .banner_wrap > a.icon02 > span::before, .display .banner_wrap > a.icon03 > span::before {margin-left: 10rem; margin-bottom: 6rem;}
}
@media all and (max-width: 1420px) {
    .vis_gallery {width: 40%;}
    .display {max-width: none; width: 55%;}
    .display .banner_wrap > a.icon02 > span::before, .display .banner_wrap > a.icon03 > span::before {margin-left: 0; margin-bottom: 0;}
}
@media all and (max-width: 1260px) {
    .display .banner_wrap > a.icon02 > span::before, .display .banner_wrap > a.icon03 > span::before {margin-left: 10rem; margin-bottom: 6rem;}
}
@media all and (max-width: 936px)
 {
   .display .banner_wrap > a.icon01 {width: 100%;}
   .display .banner_wrap > a.icon02, .display .banner_wrap > a.icon03 {width: calc(50% - 10rem);}
   .display .banner_wrap > a.icon02 > span::before, .display .banner_wrap > a.icon03 > span::before {margin-left: 0; margin-bottom: 0;}
}
@media all and (max-width: 680px) {
    :root {
      --mask-fade: 20rem;
    }
    #visual > .wrap {align-items: flex-start;}
    .vis_gallery {width: 100%; height: auto; margin-bottom: 20rem;}
    .vis_gallery .masonry-slider {display: none;}
    .vis_gallery .mimg {display: block;}
    .display {width: 100%; padding-top: 0; padding-bottom: 90rem; margin-top: 0;}
    .display .title {font-size: 32rem;}
    .display .title_sub {padding-bottom: 30rem;}
    .display .banner_wrap > a > .sub {margin-top: 0;}
    .display .scroll {bottom: 30rem;}
    .display .scroll::after {width: 16rem; height: 14rem; margin: 4rem auto 0;}
}
@media all and (max-width: 480px) {
    .display .title {font-size: 30rem;}
    .display .title_sub {font-size: 14rem;}
    .display .scroll {bottom: 20rem;}
}

.vis_gallery .card.spacer.endgap {
  visibility: hidden;
  pointer-events: none;
  padding: 0;
  border: 0;
  background: transparent;
}

#cont01 {background-color: #EFF2DB; background-image: url(../img/cont01_bg1.png), url(../img/cont01_bg2.png); background-repeat: no-repeat; background-position: bottom left, top right; background-size: 60%, 35%; padding: 120rem 0;}
#cont01 > .wrap::after {content: ''; display: block; clear: both;}
#cont01 article {margin-top: 50rem;}
#cont01 article.time {float: left; width: 50%; max-width: 790rem;}
#cont01 article.time > .box {padding: 1px; position: relative; z-index: 0; border-radius: 10rem;}
#cont01 article.time > .box::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; border-radius: 10rem; z-index: -1; top: 0; left: 0; background: #D8E134; background: linear-gradient(135deg, rgba(216, 225, 52, 1), rgba(93, 159, 0, 1), rgba(93, 159, 0, 1), rgba(216, 225, 52, 1)); background-size: 400% 100%; background-position: 0% 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transition: all 0.4s;}
#cont01 article.time > .box:hover::before {background-position: 100% 50%;}
#cont01 article.time .schedule {display: flex; flex-wrap: wrap; background-color: #FFFEEE; border-radius: 10rem; height: 366rem;}
#cont01 article.time .schedule > div {width: 50%; padding: 0 35rem 25rem;}
#cont01 article.time h4 {font-size: 16rem; color: #ffffff; background: var(--p_color); display: inline-block; padding: 10rem 34rem; border-radius: 0 0 10rem 10rem; line-height: 1; margin-bottom: 16rem;}
#cont01 article.time dl {display: flex; flex-wrap: wrap; padding-top: 8rem; font-size: 18rem;}
#cont01 article.time dl dt {font-weight: bold; width: 160rem; display: flex;}
#cont01 article.time dl dt::before {content: ''; display: block; width: 4px; height: 4px; background: var(--p_color); border-radius: 50%; margin-right: 10rem; margin-top: 12rem;}
#cont01 article.time .weekend dl:nth-of-type(4) {padding-bottom: 8rem; margin-top: 12rem; margin-bottom: 8rem; border-top: 1px dashed #7AA654; border-bottom: 1px dashed #7AA654;}
#cont01 article.time .weekday {border-left: 1px solid #D8E4CD; background: url(../img/cont01.png) no-repeat bottom -3rem right 35rem;}
#cont01 article.video {float: right; width: 45%; max-width: 655rem; position: relative;}
#cont01 article.video .youtube {border-radius: 10rem; overflow: hidden; height: 368rem;}
#cont01 article.video .youtube iframe {display: block;}
#cont01 article.video .go_channer {position: absolute; top: 0; right: 0; padding: 6rem 10rem; background: #FF0033; color: #ffffff; font-weight: bold; border-radius: 4rem;}
#cont01 article.video .go_channer span {display: flex; align-items: center;}
#cont01 article.video .go_channer span::before {content: ''; display: block; width: 22rem; height: 16rem; background: url(../img/youtube_icon.png) no-repeat center/100%; margin-right: 8rem;}
@media all and (max-width: 1420px) {
    #cont01 article.time {width: 40%; max-width: none;}
    #cont01 article.time .schedule {height: auto;}
    #cont01 article.time .schedule > div {width: 100%;}
    #cont01 article.time .weekday {border-top: 1px solid #D8E4CD; border-left: none; background: none;}
    #cont01 article.video {width: 55%; max-width: none;}
}
@media all and (max-width: 980px) {
    #cont01 article {width: 100% !important;}
    #cont01 article.time .schedule > div {width: 50%;}
    #cont01 article.time .weekday {border-top: none; border-left: 1px solid #D8E4CD; background: url(../img/cont01.png) no-repeat bottom -3rem right 35rem;}
    #cont01 article.video .youtube {height: auto;}
}
@media all and (max-width: 768px) {
    #cont01 {padding: 100rem 0;}
}
@media all and (max-width: 640px) {
    #cont01 article.time .schedule > div {width: 100%;}
    #cont01 article.time .weekday {border-top: 1px solid #D8E4CD; border-left: none; background: none;}
}
@media all and (max-width: 520px) {
    #cont01 article.video .youtube iframe {height: 250rem;}
}

#cont02, #cont03 {padding-top: 120rem;}
#cont02 .wrap, #cont03 .wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
.cont_head {width: 385rem; padding-right: 115rem;}
.cont_wrap {display: flex; flex-wrap: wrap; width: calc(100% - 405rem); justify-content: space-between;}
#cont02 ul, #cont03 ul {margin-bottom: 25rem;}
#cont02 li, #cont03 li {display: flex; margin: 10rem 0;}
#cont02 li a:hover, #cont03 li a:hover {font-weight: bold;}
#cont02 li::before, #cont03 li::before {content: ''; display: block; width: 4px; height: 4px; background: var(--p_color); border-radius: 50%; margin-right: 10rem; margin-top: 12rem; transition: all 0.4s;}
#cont02 .cont_wrap .box h3, #cont03 .cont_wrap .box h3 {transition: all 0.4s;}
#cont02 .cont_wrap .box:hover h3, #cont03 .cont_wrap .box:hover h3 {color: #631b1b;}
#cont02 .cont_wrap .box:hover li::before, #cont03 .cont_wrap .box:hover li::before {background: #9f0000;}
@media all and (max-width: 1420px) {
    .cont_head, .cont_wrap {width: 100%;}
    .cont_head {padding-right: 0;}
    .cont_wrap {margin-top: 45rem;}
}
@media all and (max-width: 768px) {
    #cont02, #cont03 {padding-top: 100rem;}
}

#cont02 .cont_wrap .box {width: calc((100% - 40rem)/3); padding: 1px; border-radius: 10rem; position: relative; z-index: 0;}
#cont02 .cont_wrap .box::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; border-radius: 10rem; z-index: -1; top: 0; left: 0; background: #E0BB95; background: linear-gradient(135deg,rgba(224, 187, 149, 1), rgba(151, 142, 133, 1), rgba(151, 142, 133, 1), rgba(224, 187, 149, 1)); background-size: 400% 100%; background-position: 0% 50%; transition: all 0.4s;}
#cont02 .cont_wrap .box:hover::before {background-position: 100% 50%;}
#cont02 .cont_wrap .box .inside {background-color: #F8EEE5; padding: 45rem 45rem 25rem; border-radius: 10rem; width: 100%; height: 100%; transition: all 0.3s;}
#cont02 .cont_wrap .box .inside::before {content: ''; display: block; width: calc(100% - 40rem); max-width: 135rem; height: 135rem; background: url(../img/cont02.png) no-repeat left center/300%; margin: 0 auto 40rem;}
#cont02 .cont_wrap .box:hover .inside {background-color: #f5e8dc;}
#cont02 .cont_wrap .box:nth-of-type(2) .inside::before {background-position-x: center;}
#cont02 .cont_wrap .box:nth-of-type(3) .inside::before {background-position-x: right;}
@media all and (max-width: 980px) {
    #cont02 .cont_wrap .box .inside {padding: 35rem 35rem 15rem;}
}
@media all and (max-width: 680px) {
    #cont02 .cont_wrap .box {width: 100%; margin-bottom: 20rem;}
    #cont02 .cont_wrap .box:last-of-type {margin-bottom: 0;}
    #cont02 .cont_wrap .box .inside {position: relative; padding-left: 170rem;}
    #cont02 .cont_wrap .box .inside::before {position: absolute; left: 35rem; width: 100rem; height: 100rem;}
}

#cont03 .cont_wrap .box { background-color: #FAF0E7; border-radius: 10rem; padding: 45rem 0; transition: all 0.3s;}
#cont03 .cont_wrap .box:hover {background-color: #f5e8dc;}
#cont03 .cont_wrap .box:nth-of-type(1) {display: flex; flex-wrap: wrap; width: calc(((100% - 40rem)/3) * 2 + 20rem);}
#cont03 .cont_wrap .box:nth-of-type(1) > div {width: 50%; padding: 0 45rem;}
#cont03 .cont_wrap .box:nth-of-type(1) .right {border-left: 1px dashed #E0BB95;}
#cont03 .cont_wrap .box:nth-of-type(1) .right h3:nth-of-type(2) {margin-top: 50rem;}
#cont03 .cont_wrap .box:nth-of-type(2) {width: calc((100% - 40rem)/3); padding: 45rem 45rem 190rem; background-image: url(../img/cont03.png); background-repeat: no-repeat; background-position:bottom center}
@media all and (max-width: 980px) {
    #cont03 .cont_wrap .box {padding: 35rem 0;}
    #cont03 .cont_wrap .box:nth-of-type(1) > div {padding: 0 35rem;}
    #cont03 .cont_wrap .box:nth-of-type(2) {padding: 35rem 35rem 190rem;}
}
@media all and (max-width: 680px) {
    #cont03 .cont_wrap .box {width: 100% !important; margin-bottom: 20rem;}
    #cont03 .cont_wrap .box:nth-of-type(2) {margin-bottom: 0; padding-bottom: 35rem; padding-right: 150rem; background-position: bottom -20rem right 35rem; background-size: 100rem;}
}
@media all and (max-width: 480px) {
    #cont03 .cont_wrap .box {padding: 35rem;}
    #cont03 .cont_wrap .box:nth-of-type(1) > div {width: 100%; padding: 0;}
    #cont03 .cont_wrap .box:nth-of-type(1) .right {border-top: 1px dashed #E0BB95; border-left: none; padding-top: 30rem;}
}