@charset "UTF-8";

.heading {font-family: 'Yeongdo', sans-serif; font-size: 48rem; font-weight: 400; position: relative;}
.heading::before {content: ''; display: inline-block; width: 15rem; height: 40rem; background: #323232; margin-right: 20rem;}
.btn_more {font-size: 16rem; font-weight: 700; padding: 8rem 20rem; min-width: 140rem; text-box-trim: trim-both; display: inline-block; text-align: center;}
.btn_more.light {background: #323232; color: #ffffff;}
.btn_more.dark {background: #ffffff; color: #323232;}
@media all and (max-width: 1600px) {
  .heading {font-size: 42rem;}
}
@media all and (max-width: 1240px) {
  .heading {font-size: 40rem;}
}
@media all and (max-width: 1024px) {
  .heading {font-size: 38rem;}
}

.display {height: auto;}
.display .sub, .display .sub {margin-bottom: 20rem; font-size: 20rem;}
.display .content {margin-top: 20rem;}
.display .btn_more {margin-top: 20rem;}

#visual {height: 100vh; min-height: 825rem; padding-top: 80rem; background: url(/design2025/usyc/img/main/visual-bg.jpg) no-repeat center bottom/cover;}
#visual > .wrap {position: relative; height: 100%; background: url(/design2025/usyc/img/main/visual.png) no-repeat left bottom/65%; padding-top: 60rem;}
#visual .display .sm {font-size: 28rem; margin-bottom: 8rem; letter-spacing: 0.3rem;}
#visual .display .lg {font-family: 'Yeongdo', sans-serif; font-size: 64rem; line-height: 1.2;}
#popup {position: absolute; width: 400rem; right: 0; top: 80rem; background: #ffffff;}
#popup .top {padding: 10rem 10rem 0 10rem; font-size: 0;}
#popup .slick-slide img {width: 100%;}
#popup .bottom {display: flex; justify-content: space-between; align-items: center; padding: 10rem;}
#popup .length {font-size: 20rem;}
#popup .length .total {color: #DE5C00;}
#popup .control {display: flex; gap: 20rem;}
#popup .control a {display: block; text-indent: -999999rem; width: 24rem; height: 24rem; background: url(/design2025/usyc/img/main/control_popup.png) no-repeat 0 0/400%;}
#popup .control a.play {background-position-x: -24rem; display: none;}
#popup .control a.pause {background-position-x: -48rem;}
#popup .control a.next {background-position-x: -72rem;}
@media all and (max-width: 1240px) {
  #visual .display {margin-top: 80rem;}
  #visual .display .sm {font-size: 20rem;}
  #visual .display .lg {font-size: 52rem;}
  #visual > .wrap {background-size: 57%;}
}
@media all and (max-width: 1024px) {
  #visual {max-height: 760rem; min-height: 760rem;}
}
@media all and (max-width: 930px) {
  #visual {max-height: unset;  min-height: 930rem;}
  #visual .display {margin-top: 0; text-align: center;}
  #visual .display .lg {font-size: 50rem;}
  #popup {position: static; margin: 30rem auto;}
  #visual > .wrap {background: none;}
}
@media all and (max-width: 440px) {
  #visual .display .lg {font-size: 40rem;}
  #popup {width: 100%; max-width: 400rem; }
}

#cont01 {padding: 85rem 0;}
.gallery-layout {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; height: 100%;}
#cont01 .col {display: grid; gap: 20px; height: 100%;}
#cont01 .col-left {grid-template-rows: 2fr 4fr;}
#cont01 .col-center {grid-template-rows: 3fr 3fr;}
#cont01 .col-right {grid-template-rows: 6fr;}
#cont01 .col .img { width: 100%; display: block; position: relative; overflow: hidden;}
#cont01 .col .img img {position: absolute; max-width: 110%; min-width: 100%; min-height: 100%; top: 50%; left:50%; transform: translate(-50%, -50%);}
#cont01 .col .img .info {position: absolute; display: block; width: 100%; height: 100%; padding: 30rem; background: rgba(0,0,0,0.7); color: #ffffff; z-index: 1; top:0; left: 0; opacity: 0; transition: all 0.3s;}
#cont01 .col .img:hover .info {opacity: 1;}
#cont01 .col .img .info .date {font-size: 14rem;}
#cont01 .col .img .info .subject {font-size: 18rem; font-weight: 700;}
#cont01 .col-right .img {height: auto;}
@media (max-width: 1024px) {
  .gallery-layout {grid-template-columns: repeat(2, 1fr);}
  #cont01 .col-right {grid-column: 1 / -1;}
}
@media (max-width: 640px) {
  .gallery-layout {grid-template-columns: 1fr;}
  #cont01 .col-left {order: 1;}
  #cont01 .col-center { order: 2;}
  #cont01 .col-right {grid-column: auto; order: 3;}
}

#cont02 > .wrap {display: flex; flex-wrap: wrap; min-height: 100vh;}
#cont02 .left {width: calc(52% - ((100vw - 100%)/2));}
#cont02 .right {width: calc(100% - (52% - ((100vw - 100%)/2)));}
#cont02 .right > div {height: 50%; padding-left: 157rem;}
.program {position: relative; color: #ffffff; padding-top: 50rem;}
.program::before {content:''; display: block; position: absolute; width: calc(100% + ((100vw - 100%)/2)); height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; top:0;}
.pro01 {height: 100%; background: url(/design2025/usyc/img/main/char01.png) no-repeat bottom left;}
.pro01::before {background-image: url(/design2025/usyc/img/main/program01.jpg); height: 100%; right: 0;}
.pro02::before {background-image: url(/design2025/usyc/img/main/program02.jpg); left: 0;}
.pro03::before {background-image: url(/design2025/usyc/img/main/program03.jpg); left: 0;}
.pro02, .pro03 {position:relative;}
.pro02 a, .pro03 a {position:absolute; bottom:50rem;}
.program .display {padding-bottom: 50rem;}
.pro01 .display { max-width: 520rem;}
.pro01 .display .heading::before {background: #ffffff;}
#cont02 .right > div h2 {font-size: 28rem; font-weight: 600; font-family: 'Yeongdo', sans-serif;}
@media all and (max-width: 1600px) {
  .pro01 {padding-right: 50rem;}
  .pro01 .display {max-width: unset;}
  #cont02 .right > div {padding-left: 50rem;}
}
@media all and (max-width: 1240px) {
  #cont02 .left, #cont02 .right {width: 50%;}
  .pro01 {background-size: 60%;}
}
@media all and (max-width: 768px) {
  #cont02 > .wrap {height: auto;}
  #cont02 .left, #cont02 .right {width: 100%;}
  .pro01 {background: none;}
  .program::before {width: 100vw;}
  .pro01::before {right: -20rem;}
  .pro02::before, .pro03::before {left: -20rem;}
  #cont02 .program {padding: 30rem 0 !important;}
}

#cont03 {padding: 150rem 0;}
#cont03 > .wrap {position: relative;}
.thumb-list {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-top: 20rem;
  width: 42%;
  max-width: 520rem;
  min-width: 0;
  overflow: hidden;
}

.thumb-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ddd;
}

.thumb-list .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #323232;
  z-index: 2;
}

.thumb-slide {
  margin: 0 -10rem;
}

.thumb-slide .slick-list {
  overflow: hidden;
}

.thumb-slide .slick-track {
  display: flex !important;
  width: 100% !important;
  transform: none !important;
  flex-wrap: wrap;
}

.thumb-slide .slick-slide {
  float: none !important;
  width: 25% !important;
  padding: 10rem 10rem 0;
  box-sizing: border-box;
}

.thumb-slide .slick-slide > div {
  width: 100%;
}

.thumb-list .thumb {
  width: 100%;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.thumb-list .thumb.active {
  opacity: 1;
}

.thumb-slide .thumb a {
  display: block;
  position: relative;
  width: 100%;
  height: 100rem;
  overflow: hidden;
}

.thumb-slide .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-slide .thumb a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  transition: opacity 0.3s;
}

.thumb-slide .thumb.active a::after {
  opacity: 0;
}
.class-wrap {display: flex; justify-content: space-between;}
.class-item .display {max-width: 385rem;}
.class-item .img {position: relative; width: 100%;}
.class-item .img_box { overflow: hidden; height: 100%; width: 100%; position: relative;}
.class-item .img_box img {position: absolute; max-width: 700rem; max-height: 700rem; min-width: 100%; min-height: 100%; left: 50%; top:50%; transform: translate(-50%, -50%);}
.class-item .comment {position: absolute; font-size: 14rem; font-weight: 600; max-width: 250rem; padding: 20rem; border-radius: 20rem; background-color: #F2F8E9; z-index: 1; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);}
.class-item .comment::after {content: ''; position: absolute; width: 0; height: 0; border: 2.719em solid transparent; z-index: 1;}
.class-item .right .col-left {padding-bottom: 250rem;}
.class-item .right {width: calc(100% - (52% - ((100vw - 100%)/2)));}
.class-item .right .col {display: grid; gap: 20rem; height: 760rem;}
.class-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20rem;
  align-items: start;
}

.class-layout img {
  height: auto;
  display: block;
}

.class-item .img01 .comment {top: 40rem; left: -100rem;}
.class-item .img01 .comment::after { bottom: 0; left: 65%; border-bottom: 0; border-right: 0;border-top-color: #F2F8E9;margin-left: -0.359em;margin-bottom: -1.819em;rotate: 342deg;}
.class-item .img02 .comment {bottom: -80rem; right: 10%;}
.class-item .img02 .comment::after { top: 0; left: 65%; border-top: 0; border-left: 0; border-bottom-color: #F2F8E9; margin-left: -0.359em; margin-top: -1.819em; rotate: 342deg;}
.class-item .img03 .comment {bottom: 60rem; left: -140rem;}
.class-item .img03 .comment::after { bottom: 0; left: 65%; border-bottom: 0; border-right: 0; border-top-color: #F2F8E9; margin-left: -0.359em; margin-bottom: -1.819em; rotate: 342deg;}
@media all and (max-width: 1500px) {
  .class-item .img01 .comment {left: -180rem;}
  .class-item .img03 .comment {left: -180rem;}
  .thumb-slide .thumb a {height: 120rem;}
}
@media (max-width: 1240px) {
  .class-layout { grid-template-columns: repeat(2, 1fr);}
  .class-wrap {flex-wrap: wrap;}
  .class-wrap > div {width: 100% !important;}
  .class-item .display {max-width: unset; margin-bottom: 40rem;}
  .class-item .display .content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
  .class-item .right .col {height: 600rem;}
  .class-item .right .col-left {grid-template-rows: 4fr; padding-bottom: 200rem;}
  .class-item .right .col-right {grid-template-rows: 2fr 2fr;}
  .class-item .img01 .comment {left: auto; right: -180rem;}
  .class-item .img01 .comment::after {border-left: 0; border-right: 2.719em solid transparent; rotate: 15deg; margin-left: 0; margin-right: -0.359em;}
  .class-item .img02 .comment {bottom: -80rem; right: 10%;}
  .class-item .img03 .comment {bottom: 210rem; left: -180rem;}
  .thumb-list {width: calc(50% - 20rem);}
  .thumb-slide .thumb a {height: 60rem;}
}
@media (max-width: 768px) {
  .class-item .comment {display: none;}
}

@media (max-width: 640px) {
  .class-item .right .col {height: auto;}
  .class-item .right .col-left {padding-bottom: 0; grid-template-rows: 2fr;}
  .class-item .right .col .img_box {height: 250rem;}
  .class-layout {grid-template-columns: 1fr;}
  .thumb-list {width: 100%; bottom: -200rem; max-width: unset;}
}

#cont04 {position: relative; padding-top: 50rem;}
#cont04::after {content: ''; display: block; position: absolute; top: -280rem; left: 50%; width: 353rem; height: 389rem; transform: translateX(-50%); background: url(/design2025/usyc/img/main/char02.png) no-repeat bottom center/contain;}
#cont04 > .wrap {display: flex; justify-content:space-between;}
#cont04 .left {width: 50%; position: relative;}
#cont04 .left::before {content: ''; display: block; position: absolute; width: calc(50% + ((100vw - 100%)/2)); height: 100%; right: 0; top:0; background: url(/design2025/usyc/img/main/cont04-bg.jpg) no-repeat top right/cover;}
#cont04 .right {width: 41%; padding: 80rem 0 50rem;}
#cont04 .txt dl {margin: 100rem 0;}
#cont04 .txt dt {font-weight: 600; font-family: 'Yeongdo', sans-serif; font-size: 30rem;}
#cont04 .task { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; margin-top: 30rem;}
#cont04 .task > div {text-align: center; height: 200rem; padding: 30rem; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 20rem; font-weight: 600; background-repeat: no-repeat; background-position: center; background-size: cover;}
#cont04 .task01 {background-image: url(/design2025/usyc/img/main/task01.jpg);}
#cont04 .task02 {background-image: url(/design2025/usyc/img/main/task02.jpg);}
#cont04 .task03 {background-image: url(/design2025/usyc/img/main/task03.jpg);}
#cont04 .task04 {background-image: url(/design2025/usyc/img/main/task04.jpg);}
#cont04 .btn_wrap {display: flex; justify-content: center;}
#cont04 .btn_more {margin: 35rem auto 0;}
@media all and (max-width: 1500px) {
  #cont04::after {top:18rem; height: 300rem; right: 20rem; left: auto; transform: none;}
}
@media all and (max-width: 1240px) {
  #cont04 > .wrap > div {width: calc((100% - 60rem)/2);}
  #cont04::after {width: 20%; top: 20rem; right: 40rem;}
}
@media all and (max-width: 980px) {
  #cont04 > .wrap > div {width: 100%;}
  #cont04 .left {display: none;}
  #cont04 .right {padding-bottom: 0;}
  #cont04::after {top: 0rem;}
}
@media all and (max-width: 768px) {
  #cont04::after {display: none;}
}

#cont05 > .wrap {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 150rem 0;}
#cont05 article {position: relative;}
#cont05 article .btn_more {position: absolute; top:65rem; right: 0; }
#cont05 .display {margin-bottom: 50rem;}
#notice {width: 50%;}
#notice ul {border-top: 1px solid #323232; border-bottom: 1px solid #323232;}
#notice ul li {display: flex; justify-content: space-between; align-items: center; padding: 10rem; border-bottom: 1px solid #dddddd;}
#notice ul li:last-of-type {border-bottom: 0;}
#notice .subject {font-size: 18rem; font-weight: 600; padding: 8rem 10rem; width: calc(100% - 130rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#notice .date {color: #555555; padding: 8rem 10rem; width: 130rem;}
#schedule {width: 41%;}
#schedule .calendar {max-height: 461rem; overflow-y: scroll;-ms-overflow-style: none; scrollbar-width: none;}
#schedule .calendar::-webkit-scrollbar {display: none;}
#schedule .calendar .day {display: flex; flex-wrap: wrap; border-bottom: 1px dashed #dddddd;}
#schedule .calendar .day:last-of-type {margin-bottom: 0; border-bottom: none;}
#schedule .calendar .date {width: 80rem; font-size: 20rem; text-align: center; padding: 14rem 10rem; font-weight: 700; background: #f7f7f7; line-height: 1.3;}
#schedule .calendar .date.today {background: var(--p_color); color: #ffffff;}
#schedule .calendar .date.today .week {color: #ffffff;}
#schedule .calendar .date .week {font-size: 18rem; color: #555555;}
#schedule .calendar dd {width: calc(100% - 80rem); padding: 0 20rem;}
#schedule .calendar .date.today + dd {border: 1px solid #323232;}
#schedule .calendar .task_list {margin:10rem 0;}
#schedule .calendar .task_list li {position:relative; padding:4rem 0 4rem 15rem;}
#schedule .calendar .task_list li::before { content:''; position:absolute; left:0; top:14rem; width:5rem; height:5rem; border-radius:50%; background:var(--p_color);}
#schedule .calendar .date.today + dd .task_list li {font-weight: 500;}
#schedule .calendar .no_task {margin:14rem 0; color: #555555; font-size: 14rem;}

@media all and (max-width: 1240px) {
  #cont05 article {width: calc((100% - 60rem)/2);}
}
@media all and (max-width: 980px) {
  #cont05 > .wrap {padding-top: 80rem;}
  #cont05 article {width: 100%;}
  #schedule {margin-top: 80rem;}
}