/********** 공통 **********/
.sec-tit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 45px; }
.more-btn-st1 { flex-shrink: 0; }
.tit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }



/*** more-btn ***/
.more-btn-st1 { position: relative; padding-right: 70px; font-family: var(--head-font); font-weight: 600; font-size: 18px; }
.more-btn-st1::after { content:""; position: absolute; top: 50%; left: calc(100% - 50px); display: block; width: 50px; height: 2px; background: #000; }
.more-btn-st1:hover::after { animation: width 1s ease infinite; }
@keyframes width {
  0% {
    width: 50px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 50px;
  }
}
.more-btn-st2 svg { transition: transform 0.4s ease; }
.more-btn-st2:hover svg { transform: rotate(90deg); }




/* section1 */
.section1 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 0.45fr 0.55fr; border-bottom: 2px solid #000; }
.section1 .main-swiper { grid-row: 1 / span 2; grid-column: 1; width: calc(100vw - 380px); height: 832px; }
.section1 .main-swiper .swiper-slide { position: relative; display: flex; align-items: flex-end; background: no-repeat top left / cover; }
.section1 .main-swiper .swiper-slide::before { content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to top, #000, #00000000); }
.section1 .main-swiper .swiper-slide .txt-wrap { width: 100%; padding: 10rem 10rem calc(10rem + 30px) 10rem; color: #fff; }
.section1 .main-swiper .swiper-control-st1 { position: absolute; left: 10rem; bottom: 8rem; z-index: 1; }

.section1 .mypg-wrap { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; width: 380px; padding: 40px; border-bottom: 2px solid #000; }
.section1 .mypg-wrap .prof { display: flex; align-items: center; gap: 20px; }
.section1 .mypg-wrap .prof .img-wrap { position: relative; width: 94px; height: 94px; border-radius: 100%; background: url(../img/common/prof-bg.svg) no-repeat center center / cover; overflow: hidden; }
.section1 .mypg-wrap .prof .img-wrap img { position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px; }
.section1 .mypg-wrap .prof .txt-wrap em {  }
.section1 .mypg-wrap .prof .txt-wrap em strong { margin-right: 4px; font-weight: 600; font-size: 3rem; }
.section1 .mypg-wrap .btn-ce { gap: 10px; }
.section1 .mypg-wrap .info ul { display: flex; align-items: center; justify-content: space-between; }
.section1 .mypg-wrap .info ul li { text-align: center; }
.section1 .mypg-wrap .info ul li span { display: block; margin-bottom: 10px; font-weight: 600; }
.section1 .mypg-wrap .info ul li span em { margin-right: 5px; font-family: var(--head-font); font-weight: 600; font-size: 3.6rem; }

.section1 .notice-wrap { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; width: 380px; padding: 40px; }
.section1 .notice-wrap .notice-list {  }
.section1 .notice-wrap .notice-list li {  }
.section1 .notice-wrap .notice-list li + li { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--gray-e5); }
.section1 .notice-wrap .notice-list li a { display: block; }
.section1 .notice-wrap .notice-list li a strong { height: 61px; margin: 14px 0 10px; }
.section1 .notice-wrap .notice-list li a:hover strong { text-decoration: underline; }


.section2 { padding: 9rem 0; }
.section2 .perform-list .item { display: block; padding: 50px 15px 15px; border: 2px solid #000; }
.section2 .perform-list .item .cate-st1 { position: absolute; top: 0; right: 0; }
.section2 .perform-list .item .txt-wrap { margin: 20px 0 30px; }
.section2 .perform-list .item .img-wrap { position: relative; width: 100%; height: 0; padding-bottom: 70%; }
.section2 .perform-list .item .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all .4s ease-in; }
.section2 .perform-list .swiper-slide:nth-child(2n) .item { background: #000; }
.section2 .perform-list .swiper-slide:nth-child(2n) .item .cate-st1 { right: -1px; }
.section2 .perform-list .swiper-slide:nth-child(2n) .txt-wrap strong { color: #fff; }
.section2 .perform-list .swiper-slide:nth-child(2n) .txt-wrap .info-st1 li { color: var(--gray-e5); }
.section2 .perform-list .item:hover .txt-wrap strong { text-decoration: underline; }
.section2 .perform-list .item:hover .img-wrap img { transform: scale(1.1); }


.section3 .shortcut-list { display: flex; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.section3 .shortcut-list .item { flex: 1 1 20%; }
.section3 .shortcut-list .item + .item { border-left: 2px solid #000; }
.section3 .shortcut-list .item a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; min-height: 250px; padding: 10px; text-align: center; }


.section4 .marquee { padding: 10px 0; }
.section4 .marquee .txt { display: flex; flex-wrap: nowrap; align-items: center; gap: 40px; width: fit-content; animation: marquee 50s linear infinite; }
.section4 .marquee .txt strong { display: block; font-family: var(--head-font); font-weight: 400; font-size: 8.8rem; color: var(--gray-dd); letter-spacing: -0.3px; white-space: nowrap; }
.section4 .marquee .txt strong:nth-child(2n) { font-weight: 500; }
@keyframes marquee {
	from { transform: translateX(0); }
  	to { transform: translateX(-50%); }
}


.section5 { padding: 9rem 0; }


@media only screen and (max-width: 1200px) {
	.section1 .main-swiper .swiper-slide .txt-wrap { padding: 5rem 5rem calc(5rem + 30px) 5rem; }
	.section1 .main-swiper .swiper-control-st1 { left: 5rem; bottom: 4rem; }

	.section3 .shortcut-list { flex-wrap: wrap; }
	.section3 .shortcut-list .item { flex: 1 1 33.3%; }
	.section3 .shortcut-list .item:nth-child(4) { border-left: 0; }
	.section3 .shortcut-list .item:nth-child(n+4) { border-top: 2px solid #000; }
}
@media only screen and (max-width: 1023px) {
	.section1 { grid-template-columns: auto auto; grid-template-rows: auto auto; }
	.section1 .main-swiper { grid-column: 1 / span 2; grid-row: 1; width: 100%; height: 400px; }
	.section1 .mypg-wrap { grid-column: 1; grid-row: 2; width: unset; border-right: 2px solid #000; border-bottom: 0; }
	.section1 .notice-wrap { grid-column: 2; grid-row: 2; width: unset; }
	.section1 .notice-wrap .notice-list li a strong { height: 51px; }
	
	.section2 .perform-list .swiper-slide { max-width: 280px; }

	
}

@media only screen and (max-width: 767px) {
	.section1 { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
	.section1 .main-swiper { grid-column: 1; }
	.section1 .main-swiper .swiper-slide .txt-wrap { padding: 2rem 2rem calc(2rem + 30px) 2rem }
	.section1 .main-swiper .swiper-control-st1 { left: 2rem; bottom: 2rem; }
	.section1 .mypg-wrap { gap: 20px; border-right: 0; border-bottom: 2px solid #000; }
	.section1 .notice-wrap { grid-column: 1; grid-row: 3; }
	
	.section3 .shortcut-list .item { flex: 1 1 50%; }
	.section3 .shortcut-list .item a { gap: 10px; min-height: 160px; }
	.section3 .shortcut-list .item:nth-child(odd) { border-left: 0; }
	.section3 .shortcut-list .item:nth-child(4) { border-left: 2px solid #000; }
	.section3 .shortcut-list .item:nth-child(n+3) { border-top: 2px solid #000; }

	.section4 .marquee .txt { gap: 10px; }
	.section4 .marquee .txt strong { font-size: 6rem; }
}
@media only screen and (max-width: 470px) {
	.section1 .mypg-wrap { padding: 20px; }
	.section1 .mypg-wrap .prof .img-wrap { width: 74px; height: 74px; }
	.section1 .notice-wrap { gap: 20px; padding: 20px; }
	
	.section4 .marquee .txt strong { font-size: 4rem; }
}