@charset "utf-8";


main {display: flex; flex-wrap: wrap; gap: 150px; justify-content: center;}
main section {width: 100%;}
main section:last-child {padding-bottom: 150px;}
.btn_more {font-size: 1rem; font-weight: 500; color: #E94E1B; padding: .875rem 3.125rem .875rem 1.875rem; border: 1px solid #E94E1B; border-radius: 100px; position: relative; transition: .3s;}
.btn_more::before {content: ""; width: 10px; height: 10px; background: url(/resources/images/icon/ico_arrow_right_up.svg) center no-repeat; background-size: cover; position: absolute; right: 1.875rem; top: 50%; transform: translateY(-50%); transition: .3s;}
.btn_more:hover {background: #E94E1B; color: #fff;}
.btn_more:hover::before {background: url(/resources/images/icon/ico_arrow_right_up_w.svg) center no-repeat; background-size: cover;}
.sc_head {display: flex; justify-content: space-between; padding-bottom: 2.5rem;}
.sc_head h3 {font-size: 2.375rem; font-weight: 700;}

@media (max-width: 1023px) {
    main {gap: 100px;}
    main section:last-child {padding-bottom: 100px;}
}

@media (max-width: 500px) {
    main {gap: 50px;}
    main section:last-child {padding-bottom: 50px;}
}


/* main visual */
.main_visual {width: 100%; overflow: hidden; position: relative;}
.main_visual .slide {display: block; width: 100%; height: 0; padding-top: calc(100vh - 136px); position: relative;}
.main_visual .slide::before {content: ""; position: absolute; inset: 8px; border: 2px dashed #d01d33; opacity: 0; z-index: 22; pointer-events: none;}
.main_visual .slide:focus-visible::before {opacity: 1;}
.main_visual .slide::after {content: ""; width: 100%; height: 100%; background: linear-gradient(transparent, transparent, #000); position: absolute; left: 0; top: 0; opacity: .5; z-index: 0;}
.main_visual .slide img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.main_visual .main_txt {width: calc(100% - 2.5rem); position: absolute; bottom: 15%; z-index: 10;}
.main_visual .main_txt h2 {font-size:  3.375rem; font-weight: 800; color: #fff; opacity: 0; transform: translateY(20px); filter: blur(6px); transition: .8s ease;}
.main_visual .main_txt p {display: block; font-size: 1.5rem; font-weight: 600; color: #fff; margin: 20px 0 40px; opacity: 0; transform: translateY(20px); filter: blur(6px); transition: .8s ease .3s;}
.main_visual .swiper-slide-active .main_txt h2,
.swiper-slide-active .main_txt p {opacity: 1; transform: translateY(0); filter: blur(0);}
.main_visual .controls {display: flex; justify-content: center;}
.main_visual .controls .wrapper {width: 100%; position: absolute; bottom: 8%; z-index: 10; display: flex; align-items: center; gap: 30px;}
.main_visual .controls .pagination {width: auto!important; display: flex; gap: 20px;}
.main_visual .controls .pagination .swiper-pagination-bullet {width: 3.125rem; height: 3.125rem; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 50%; position: relative; opacity: .4; transition: .3s;}
.main_visual .controls .pagination .swiper-pagination-bullet::before {content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main_visual .controls .pagination .swiper-pagination-bullet-active {border: 1px solid #fff; opacity: 1;}
.main_visual .controls .btn_play {display: flex; align-items: center; justify-content: center;}

@media (max-width: 1023px) {
    .main_visual .slide {padding-top: 60%;}
}

@media (max-width: 767px) {
    .main_visual .main_txt h2 {font-size: 2.5rem;}
    .main_visual .main_txt p {font-size: 1.25rem;}
}

@media (max-width: 500px) {
    .main_visual .main_txt h2 {font-size: 2rem;}
    .main_visual .main_txt p {font-size: 1.0625rem; margin: 10px 0;}
    .main_visual .controls .pagination {gap: 5px;}
    .main_visual .controls .pagination .swiper-pagination-bullet {width: 22px; height: 22px;}
    .main_visual .controls .btn_play img {width: 12px;}
}


/* section01 */
.sc01 .notice_list {display: flex; flex-wrap: wrap; gap: 20px;}
.sc01 .notice_list .swiper-slide {width: calc((100% - 40px) / 3);}
.sc01 .notice_list .swiper-slide a {padding: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; background: #f7f7f7; border-radius: 20px;}
.sc01 .notice_list .swiper-slide a h4 {font-size: 1.3125rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; background: linear-gradient(90deg, #222 50%, #E94E1B 50%) 0 0; background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.4s ease;}
.sc01 .notice_list .swiper-slide a:hover h4 {background-position: -100% 0;}
.sc01 .notice_list .swiper-slide a p {height: 51px; font-size: 1.0625rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5;}
.sc01 .notice_list .swiper-slide a span {font-size: .9375rem; color: #787878; font-weight: 500;}
.sc01 .notice_slide .swiper-pagination {display: none;}
.sc01 .notice_slide .swiper-pagination-bullet-active {background: #E94E1B!important;}

@media (max-width: 1024px) {
    .sc01 .notice_list {flex-wrap: nowrap; gap: 0; padding-bottom: 50px;}
    .sc01 .notice_list .swiper-slide {width: auto;}
    .sc01 .notice_slide .swiper-pagination {display: block;}
}


/* section02 */
.sc02 .wrapper {display: flex; align-items: flex-start;}
.sc02 .wrapper > div {padding: 2.5rem; border-radius: 20px; overflow: hidden; color: #fff; display: flex; gap: 2.5rem; min-height: 270px;}
.sc02 .wrapper > div h4 {font-size: 1.75rem; font-weight: 700;}
.sc02 .contact {width: 100%; background: url(/resources/images/main/sc02_01.jpg) center no-repeat; background-size: cover; flex-direction: column; justify-content: center;}
.sc02 .contact ul {display: flex; flex-direction: column; gap: 10px;}
.sc02 .contact ul li {padding-left: 34px;}
.sc02 .contact ul li.tel {background: url(/resources/images/icon/ico_tel_w.svg) left center no-repeat;}
.sc02 .contact ul li.mail {background: url(/resources/images/icon/ico_mail_w.svg) left center no-repeat;}
.sc02 .contact ul li span {font-size: 1.125rem; font-weight: 500;}
.sc02 .quick {width: 100%; background: url(/resources/images/main/sc02_02.jpg) center no-repeat; background-size: cover; margin: 40px 0 0 -40px; justify-content: space-between;}
.sc02 .quick h4 {padding-top: 20px;}
.sc02 .quick ul {display: flex; flex-direction: column; gap: 10px;}
.sc02 .quick ul li a {display: block; padding: 20px 120px 20px 20px; font-size: 1rem; color: #fff; border: 1px solid #fff; border-radius: 50px; position: relative; transition: .3s;}
.sc02 .quick ul li a::after {content: ""; width: 15px; height: 15px; border-radius: 30px; padding: 10px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: .3s ease-in-out;}
.sc02 .quick ul li a.link::after {background: #fff url(/resources/images/icon/ico_link_b.svg) center no-repeat; background-size: 10px;}
.sc02 .quick ul li a.down::after {background: #fff url(/resources/images/icon/ico_down_b.svg) center no-repeat; background-size: 12px;}
.sc02 .quick ul li a:hover {background: #fff; color: #333;}
.sc02 .quick ul li a:hover::after {border: 1px dashed #333;}

@media (max-width: 1023px) {
    .sc02 .wrapper {flex-direction: column; gap: 20px;}
    .sc02 .quick {margin: 0;}
}

@media (max-width: 767px) {
    .sc02 .wrapper > div {min-height: inherit; padding: 2rem;}
    .sc02 .quick {flex-direction: column;}
    .sc02 .quick h4 {padding-top: 0;}
}


/* section03 */
.sc03 {overflow: hidden;}
.sc03 .sc_head {text-align: center;}
.sc03 .sc_body {display: flex; align-items: center;}
.sc03 .sc_body .box {width: 457px; height: 500px; padding: 100px 100px 100px 40px; background: #f7f7f7; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-evenly;}
.sc03 .sc_body .box > div {display: flex; flex-wrap: wrap; gap: 20px;}
.sc03 .sc_body .box .controls {width: 100%; display: flex; align-items: center; gap: 20px;}
.sc03 .sc_body .box .controls .pagination {width: auto!important;}
.sc03 .sc_body .box .controls .btn_play img {width: 12px;}
.sc03 .sc_body .box h4 {width: 100%; font-size: 1.5rem; font-weight: 700; text-overflow: ellipsis; overflow: hidden; line-height: 1.5;}
.sc03 .sc_body .box .date {font-size: 1rem; font-weight: 500; color: #565656;}
.sc03 .sc_body .gallery_slide {width: calc(100% - 35%); overflow: hidden; position: absolute; right: 0;}
.sc03 .sc_body .gallery_slide::after {content: ""; background: linear-gradient(to right, transparent, #fff); width: 40%; height: 100%; position: absolute; right: 0; top: 0; z-index: 2;}
.sc03 .sc_body .gallery_slide.swiper-empty {max-width: 1420px;width: 100%; position: relative;}
.sc03 .sc_body .gallery_slide .swiper-slide {position: relative; border-radius: 20px; overflow: hidden;}
.sc03 .sc_body .gallery_slide .swiper-slide a {display: block; width: 100%; height: 0; padding-top: 100%; position: relative;}
.sc03 .sc_body .gallery_slide .swiper-slide a img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; filter: grayscale(88%); transform: scale(1); transition: transform .4s ease;}
.sc03 .sc_body .gallery_slide .swiper-slide.swiper-slide-active a img {filter: none; transform: scale(1.15);}
.sc03 .sc_body .box .swiper-pagination-bullet-active {background: #E94E1B!important; padding-left: 20px; border-radius: 20px;}

@media (max-width: 1420px) {
    .sc03 .sc_body .box {width: 350px; height: 400px; padding: 50px 50px 50px 30px;}
}

@media (max-width: 768px) {
    .sc03 .sc_body {justify-content: center; flex-direction: column-reverse; gap: 20px;}
    .sc03 .sc_body .box {width: 100%; height: 230px; padding: 80px 30px 30px; margin-top: -80px; gap: 20px;}
    .sc03 .sc_body .box h4 {height: auto; -webkit-line-clamp: 1; text-align: center;}
    .sc03 .sc_body .box .date {width: 100%; text-align: center;}
    .sc03 .sc_body .gallery_slide {position: relative;}
    .sc03 .sc_body .box > div:last-child,
    .sc03 .sc_body .box .controls {justify-content: center}
    .sc03 .sc_body .gallery_slide::after {display: none;}
}