@charset "utf-8";

/* Desktop Device */
#maincontent {position: relative;}
#mainvisual {position: relative;margin: 0 auto;}
#mainvisual > img {width: 100%;object-fit: cover;}
#mainvisual .mainvisual_title {position: absolute;top: 80px;left: calc(50% - 600px);font-size: 18px;}
.mainvisual_title button {border-radius: 12px;padding: 16px 20px;background: #00529c;color: #fff;}
.mainvisual_title .visual_title {margin-bottom: 20px;font-size: 32px;font-weight: 500;}
.mainvisual_title .visual_title span {font-size: 60px;font-weight: 600;color: #0083cb;}
.mainvisual_title .visual_subtitle {color: #525252;margin-bottom: 20px;}
.btn_mnb_open {position: absolute;bottom: 20px;right: calc(50% - 600px);padding: 14px 110px 14px 20px;border-radius: 40px;background: rgba(0, 0, 0, 0.8);color: #fff;z-index: 10;}
.btn_mnb_open:before {position: absolute;content: '';display: block;width: 100px;height: 94px;right: 0;bottom: -4px;background: url('/asset26/images/common/new_img/icon_mnb_botton.png') no-repeat 50% 50%;}
.main_banner {position: absolute;bottom: 20px;right: calc(50% - 600px);width: 340px;height: 340px;opacity: 0;transform: translateY(100%);}
.main_banner.open {opacity: 1;transform: translateY(0);transition: all 0.3s ease;}
.main_banner a {display: inline-block;}
.main_banner button {border-radius: 20px;height: 340px;overflow: hidden;}
.main_banner button img {width: 100%;height: auto;object-fit: cover;}
.main_banner .m_banner_btn {position: absolute;display: flex;flex-direction: row;left: 0;bottom: 0;width: 100%;padding: 8px 20px 8px 70px;background: rgba(0, 0, 0, 0.5);border-radius: 0 0 20px 20px;z-index: 9;}
.main_banner .m_banner_btn a + a {margin-left: 4px;}
.main_banner .btn_mnb_close {color: transparent;position: absolute;top: -48px;right: 0;background: #000;width: 44px;height: 44px;border-radius: 50%;transform: rotate(45deg);z-index: 10;}
.main_banner .btn_mnb_close:before {position: absolute;content: '';display: block;width: 2px;height: 14px;top: calc(50% - 7px);left: 50%;background: #fff;border-radius: 50%;}
.main_banner .btn_mnb_close:after {position: absolute;content: '';display: block;width: 2px;height: 14px;top: calc(50% - 7px);left: 50%;background: #fff;border-radius: 50%;transform: rotate(90deg);}
.web_banner.open {opacity: 1;transform: translateY(0);transition: all 0.3s ease;}
.mob_banner {position: fixed;bottom: 0;left: 0;width: 100%;height: 340px;opacity: 0;transform: translateY(100%);z-index: 22;}
.mob_banner.open {opacity: 1;transform: translateY(0);transition: all 0.3s ease;}
.mob_banner_bg {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.5);z-index: 21;}
.mob_banner_bg.open {display: initial;}
#eventSlides .slidesjs-previous,
#eventSlides .slidesjs-next,
#eventSlides .slidesjs-play,
#eventSlides .slidesjs-stop {position: relative;width: 44px;height: 44px;background: rgba(255, 255, 255, 0.8);border-radius: 50%;font-size: 0;vertical-align: top;color: transparent;}
#eventSlides .slidesjs-previous:before {position: absolute;content: '';display: block;width: 10px;height: 10px;border: 2px solid #525252;border-top: none;border-right: none;transform: rotate(45deg);top: calc(50% - 5px);left: calc(50% - 4px);}
#eventSlides .slidesjs-next:before {position: absolute;content: '';display: block;width: 10px;height: 10px;border: 2px solid #525252;border-left: none;border-bottom: none;transform: rotate(45deg);top: calc(50% - 5px);right: calc(50% - 4px);}
#eventSlides .slidesjs-stop::before {position: absolute;content: '';display: block;width: 4px;height: 14px;border: 3px solid #525252;border-top: none;border-bottom: none;top: calc(50% - 7px);left: calc(50% - 5px);}
#eventSlides .slidesjs-play::before {position: absolute;content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 8px 0px 8px 10px;border-color: transparent transparent transparent #525252;top: calc(50% - 8px);left: calc(50% - 4px);}
#eventslidesjs-log {position: absolute;left: 20px;bottom: 8px;font-size: 16px;line-height: 44px;color: #fff;z-index: 11;}
#eventSlidesjs-slide-number {font-weight: 600;color: #ff7736;}

.main_box {position: relative;background: #f2f2f2;padding: 80px 0;}
.main_box2 {position: relative;display: flex;gap: 40px;max-width: 1200px;margin: 0 auto;padding: 80px 0;}
.maincont_list {position: relative;max-width: 1200px;margin: 0 auto;}
.maincont_list .sub_text {font-size: 20px;line-height: 32px;text-align: center;}
.maincont_list h2 {margin-bottom: 40px;font-size: 40px;line-height: 60px;text-align: center;color: #00529c;}
.maincont_list .swiper-wrapper-box {position: relative;margin-bottom: 30px;}
.maincont_list .swiper ul {align-items: center;height: auto;}
.maincont_list .swiper ul li {height: auto;aspect-ratio: 100 / 125;display: flex;align-items: center;}
.maincont_list .swiper ul li > a {overflow: hidden;display: block;margin: 0 auto;width: 100%;height: 90%;text-align: left;border: 1px solid #d2d2d2;border-radius: 12px;background: #fff;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.maincont_list .swiper ul li.swiper-slide.swiper-slide-active > a {height: 100%;}
.maincont_list .swiper ul li > a .main_img {position: relative;display: block;overflow: hidden;width: 100%;height: 100%;}
.maincont_list .swiper ul li > a span.icon {position: absolute;display: block;right: 12px;bottom: 12px;width: 50px;height: 50px;color: transparent;border-radius: 50%;}
.maincont_list .swiper ul li.swiper-slide.swiper-slide-active > a span.icon {bottom: 12px;}
.maincont_list .swiper ul li > a span.icon_facebook {background: url('/asset26/images/common/new_img/icon_mn_facebook.png') no-repeat 50% 50%;}
.maincont_list .swiper ul li > a span.icon_youtube {background: url('/asset26/images/common/new_img/icon_mn_youtube.png') no-repeat 50% 50%;}
.maincont_list .swiper ul li > a span.icon_instagram {background: url('/asset26/images/common/new_img/icon_mn_instagram.png') no-repeat 50% 50%;}
.maincont_list .swiper ul li > a .main_img img {width: 100%;height: 100%;-webkit-transition: transform 0.2s;transition: transform 0.2s;object-fit: cover;object-position: top;}
.maincont_list .swiper ul li > a:hover .main_img img {transform: scale(1.1);-webkit-transform: scale(1.1);}
.maincont_list .swiper-wrapper-box .swiper-pagination {bottom: -30px;}
.maincont_list .swiper-wrapper-box .sns-button-next,
.maincont_list .swiper-wrapper-box .sns-button-prev {position: absolute;top: 50%;width: 52px;height: 52px;background: #fff;border-radius: 50%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);z-index: 5;cursor:pointer}
.maincont_list .swiper-wrapper-box .sns-button-prev {left: -26px;}
.maincont_list .swiper-wrapper-box .sns-button-next {right: -26px;}
.maincont_list .swiper-wrapper-box .sns-button-next:before,
.maincont_list .swiper-wrapper-box .sns-button-prev:before {position: absolute;content: '';display: block;width: 10px;height: 10px;top: calc(50% - 5px);left: calc(50% - 5px);border: 2px solid #525252;border-top: none;border-right: none;transform: rotate(45deg);}
.maincont_list .swiper-wrapper-box .sns-button-next:before {top: calc(50% - 6px);left: calc(50% - 8px);transform: rotate(225deg);}
.maincont_list .swiper-wrapper-box .sns-controls {display: flex;align-items: center;gap: 10px;justify-content: center;margin-top: 20px;position: absolute;width: 100%;}
.maincont_list .swiper-wrapper-box .sns-controls .sns-button-toggle {width: 30px;height: 30px;text-indent: -9999px;background: url(/asset26/images/common/new_img/slide_stop.png) no-repeat center / 12px 16px;filter: invert(67%) sepia(180%) saturate(1200%) hue-rotate(177deg) brightness(91%) contrast(87%);}
.maincont_list .swiper-wrapper-box .sns-controls .sns-button-toggle.play {background: url(/asset26/images/common/new_img/slide_play.png) no-repeat center / 18px 21px;}
.maincont_list .swiper-wrapper-box .sns-controls .swiper-pagination {position: static;width: auto;}
.maincont_list .swiper-wrapper-box .sns-controls .swiper-pagination .swiper-pagination-bullet {background: #06377b;width: 10px;height: 10px;margin: 0 7px;}
.maincont_list .swiper-wrapper-box .sns-controls .swiper-pagination .swiper-pagination-bullet-active {background: #0083ca;}
.main_link {flex: 1;}
.main_link ul {display: grid;grid-template-columns: repeat(2, 1fr);flex-wrap: wrap;justify-content: center;gap: 20px;}
.main_link ul li a {position: relative;display: inline-block;width: 100%;height: 170px;padding: 32px;font-size: 18px;background: #f2f2f2;border-radius: 20px;}
.main_link ul li a:after {position: absolute;content: '';display: block;clear: both;width: 90px;height: 70px;right: 20px;bottom: 27px;filter: drop-shadow(0 0 10px rgba(0, 82, 156, 0.2));animation: up_y 3s infinite;}
.main_link ul li a:hover:after {filter: drop-shadow(0 0 10px rgba(82, 173, 255, 0.8));}
.main_link ul li a.link_img01:after {background: url('/asset26/images/common/new_img/icon_link01.png') no-repeat 50% 50%;}
.main_link ul li a.link_img02:after {background: url('/asset26/images/common/new_img/icon_link02.png') no-repeat 50% 50%;}
.main_link ul li a.link_img03:after {background: url('/asset26/images/common/new_img/icon_link03.png') no-repeat 50% 50%;}
.main_link ul li a.link_img04:after {background: url('/asset26/images/common/new_img/icon_link04.png') no-repeat 50% 50%;}
.main_link ul li a:hover {font-size: 20px;background: #00529c;color: #fff;text-decoration: underline dotted;}
.main_news {position: relative;width: 540px;flex: 1;}
.main_news h2 {padding: 4px 0;font-size: 40px;line-height: 52px;margin-bottom: 40px;}
.main_news .btn_more {position: absolute;display: block;top: 0;right: 0;padding: 0 52px 0 8px;height: 44px;line-height: 44px;color: #525252;}
.main_news .btn_more:after {position: absolute;content: '';display: block;width: 18px;height: 18px;top: 12px;right: 12px;background: url('/asset26/images/common/new_img/icon_more.png') no-repeat 50% 50%;}
.main_news .btn_more:before {position: absolute;content: '';display: block;width: 44px;height: 44px;top: 0;right: 0;background: #f2f2f2;border-radius: 50%;}
.main_news ul li a {position: relative;display: block;font-size: 16px;line-height: 52px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main_news ul li a:hover {text-decoration: underline dotted;}

@keyframes up_y {
	0% {transform: translateY(-4%);}
	50% {transform: translateY(8%);}
	100% {transform: translateY(-4%);}
}

/* Tablet Device */
@media all and (max-width: 1280px) {
	#mainvisual .mainvisual_title {top: 40px;left: 40px;right: 40px;font-size: 16px;}
	.btn_mnb_open {right: 40px;}
	.main_banner {width: 280px;height: 280px;right: 20px;}
	.main_banner button {height: 280px;}
	.maincont_list .swiper-wrapper-box .sns-button-prev {left: 0;}
	.maincont_list .swiper-wrapper-box .sns-button-next{right: 0;}
}
@media all and (max-width: 1200px) {
	#mainvisual > img {height: 100%;min-height: 400px;}
	.mainvisual_title .visual_title {font-size: 24px;}
	.mainvisual_title .visual_title span {font-size: 40px;}
	.main_box2 {display: inherit;padding: 40px 20px;}
	.main_link ul {grid-template-columns: repeat(4, 1fr);}
	.main_link ul li a {height: 186px;}
	.maincont_list {padding: 0 20px;}
	.main_news {width: 100%;padding: 40px 0 0 0;}
	.main_news h2 {margin-bottom: 20px;}
	.main_news .btn_more {top: 48px;}
}

/* Mobile Device */
@media all and (max-width: 767px) {
	#mainvisual a.btn_mvisual {display: block;overflow: hidden;border-radius: 20px;}
	#mainvisual a.btn_mvisual > img {display: none;}
	#mainvisual a.btn_mvisual .m_mvisual {display: inherit;}
	.main_banner {width: 460px;height: 460px;bottom: 0;right: calc(50vw - 230px);left: initial;}
	.main_banner button {height: auto;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
	.main_banner .m_banner_btn {border-radius: 0;}
	.main_link ul {grid-template-columns: repeat(2, 1fr);}
}

@media all and (max-width: 460px) {
	.main_banner {width: 100%;height: auto;left: 0;}
	.maincont_list .sub_text {font-size: 16px;}
	.maincont_list h2 {line-height: 40px;font-size: 34px;}	
	.maincont_list .swiper ul li > a span.icon {width: 30px;height: 30px;background-size: contain;}
	.main_link ul {grid-template-columns: repeat(1, 1fr);gap: 8px;}	
	.main_link ul li a {height: auto;min-height: 120px;font-size: 16px;padding-right: 100px;}
	.main_link ul li a:hover {font-size: 18px;}
	.main_link ul li a:after {bottom: 20px;}
	.main_news h2 {padding: 0;line-height: 52px;font-size: 34px;}
	.main_news ul li a {line-height: 46px;}
}