@charset "utf-8";

/* common */
#container { position:relative; width:100%; min-height:850px; margin:0; }
.inner { max-width:1200px; margin:0 auto; }
.tit_h3 { color:#111; font-size:1.875rem; font-family:'S-Core Dream 8'; letter-spacing:-0.05em; line-height:1.6; }

.slide-content { text-align: center; color: #fff; }
.slide-content h1 { font-size: 3.75rem; letter-spacing: -0.038rem; }
.slide-content h2 { margin-top: 3.1%; font-size: 3.438rem; font-weight: 300; letter-spacing: -0.172rem; }
.slide-content h2 b { font-weight: 700; }

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next { left: 4%; }
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev { right: 4%; }


/* 타이틀 배너 */
#vis { margin-top: 0; }
#vis #titler { height: 597px; }

/* 레이아웃: #vis */
#vis { }

#vis_wrap { position:relative; height: 755px; }
#vis #slider .swiper-slide {background-position: center center;background-repeat: no-repeat;background-size: cover;overflow:hidden;}
#vis #slider .swiper-slide > img {display: block; margin: auto; opacity: 0; max-height: 755px;}
#vis #slider .swiper-slide-active .slide-content {/* animation: slideTop 1s; */}
#vis #slider .swiper-controller { position:absolute; bottom:3.75rem; left:50%; transform:translateX(-50%); min-width:140px; height:45px; background:rgba(99, 99, 99, 0.26); border-radius:1.438rem; z-index:1; }
#vis #slider .swiper-pagination { top:50%; left:35px; min-width:45px; transform:translateY(-50%); }
#vis #slider .swiper-pagination-bullet { margin:0 5px; width:7px; height:7px; background: none; border:1px solid #fff; opacity:1; vertical-align:middle; }
#vis #slider .swiper-pagination-bullet-active { width:18px; background:#fff; border-radius:4px; }

#vis #slider .swiper-button-pause { position:absolute; top:50%; right:25px; transform:translateY(-50%); width:auto; font-size:0.625rem; }
#vis #slider .swiper-button-pause span { cursor:pointer; }
#vis #slider .swiper-button-pause span i { color:#fff; vertical-align:middle; }

#vis .slide-content { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); max-width:1200px; width:100%; }

#vis .vis_img {  }
#vis .vis_img > img { width:100%; max-height:755px; object-fit:cover; }
#vis .visual_txt { text-align:center; }
#vis .visual_txt .img_txt { margin-bottom:50px; }
#vis .visual_txt .txt { font-size:1.75rem; font-weight:700; letter-spacing:-0.03em; line-height:1.3; }
#vis .visual_txt .txt.date { max-width:544px; height:61px; margin:0 auto; padding:12px 50px; background-color:#273247; color:#fff; border-radius:37px; }
#vis .visual-item { position:absolute; }
#vis .visual-item img { display:block; width:100%; margin:0 auto; opacity: 1;visibility: visible; }
#vis .visual-item.item01 { top:-4.188rem; left:calc(50% - 25.375rem); width:7rem; }
#vis .visual-item.item02 { top:0.938rem; right:calc(50% - 27.75rem); width:6.438rem; }
#vis .visual-item.item03 { top:13.313rem; left:calc(50% - 33.938rem); width:8.063rem; }
#vis .visual-item.item04 { top:18.5rem; right:calc(50% - 32rem); width:6rem; }
#vis .visual-item.item05 { bottom:-7.5rem; left:calc(50% - 23.125rem); width:6.063rem; }

#vis .visual_txt_2 {  text-align:center; }
#vis .visual_txt_2 .txt { padding:0 30px; font-size:3.438rem; letter-spacing:-0.02em; line-height:1.7; color:#fff; word-break:keep-all; }
#vis .visual_txt_2 .txt strong { font-weight:700; }

.updown { animation:updown 2s linear infinite; -webkit-animation:updown 2s linear infinite; transform-origin: center; -webkit-transform-origin: center; }
.rotate01 { animation: rotate01 2s linear infinite; -webkit-animation: rotate01 2s linear infinite; }
.rotate02 { animation: rotate02 2s linear infinite; -webkit-animation: rotate02 2s linear infinite; }
.shake { animation:shake 2s linear infinite; -webkit-animation:shake 2s linear infinite; }
.swing { animation: swing 5s ease infinite; transform-origin: top center; }
.delay { animation-delay:1s; -webkit-animation-delay:1s; }
@keyframes updown{
	0% { transform: translateY(0); }
	50% { transform: translateY(15px); }
	100% { transform: translateY(0); }
}
@keyframes rotate01{
	0% { transform: rotate(0deg); }
	50% { transform: rotate(15deg); }
	100% { transform: rotate(0deg); }
}
@keyframes rotate02{
	0% { transform: rotate(0deg); }
	50% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
}
@keyframes shake{
	0%{ transform:translateX(15px); }
	50%{ transform:translateX(-25px); }
	100%{ transform:translateX(15px); }
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

@-webkit-keyframes slideTop {
    0% {
        -webkit-transform: translate(-50%, -25%);
        transform: translate(-50%, -25%);
    }

    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@keyframes slideTop {
    0% {
        -webkit-transform: translate(-50%, -25%);
        transform: translate(-50%, -25%);
    }

    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

/* 공지사항_자주찾는메뉴_포스터 */
.noti_service { position:relative; margin-top:80px; padding-bottom:50px; z-index:1; }
.noti_service::after { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%; min-height:440px; background:#F9F9F9; border-radius:200px 0 0 0; z-index:-1; }
.noti_service .tit_h3 { margin-bottom:20px; }
.noti_service .inner { display:flex; justify-content:space-between; }
.noti_service .left_con { width:685px; }
.noti_service .right_con { width:483px; }

/* 단오제유튜브_축제앨범 */
.youtube_gall { display: flex; background-color:#F9F9F9; }
.youtube_gall .tit_h3 { margin-bottom:0; color:#111; font-size:2.25rem; }
.youtube_gall .btn-link { background:#fff; border:1px solid #0B5B6E; }
.youtube_gall .btn-link:hover { text-decoration: none; background:#0b5b6e; color: #fff; }
.youtube_gall .btn-link i { font-size:0.75rem; }
.youtube_gall .btn-link i::before { line-height:1; vertical-align:sub; }
.main-gall-title { display: flex; justify-content: space-between; align-items:center; padding-bottom:60px; }
.main-gall-content { width: 100%; max-width:520px; }
.youtube_gall .main-youtube { width: 50%; padding:85px 50px; /* background: url("../images/main/main_youtube.png") center / cover no-repeat; */ }
.youtube_gall .main-youtube .main-gall-content { margin: 0 0 0 auto; }
.youtube_gall .main-gallery { width: 50%; padding:85px 50px; /* background: url("../images/main/main_gallery.png") center / cover no-repeat; */ }
.youtube_gall .main-gallery .main-gall-content { margin: 0 auto 0 0; }

/* 하단 배너 */
.bot_banner { width:100%; padding:38px 0 32px; border-top:1px solid #D8D8D8; }
.bot_banner .inner { display:flex; align-items:center; /* justify-content: space-between; */ }
.bot_banner .tit { margin:0 32px 0 0; color:#454545; font-size:1.563rem; font-weight:700; letter-spacing:-0.05em; word-break:keep-all; }


/* Media Query (PC First) */
@media (max-width:1920px) {
	
}

@media (max-width: 1400px) {

}

@media (max-width: 1300px) {

}
@media (max-width: 1200px) {
	/* common */
	.inner { max-width:none; width:100%; padding:0 20px; }
	#container { padding:0; }

	/* 공지사항_자주찾는메뉴_포스터 */
	.noti_service .left_con { width:57%; }
	.noti_service .right_con { width:40%; }

	/* 레이아웃: #vis */
	#vis .slide-content { max-width:none; width:100%; }
	#vis .visual_txt { width:50%; margin:0 auto; }
	#vis .visual_txt .img_txt img { width:100%; height:100%; }

}

@media (max-width: 992px) {
	/* 레이아웃: #vis */
	#vis .visual_txt .txt { font-size:1.375rem; }
	#vis .visual_txt .txt.date { max-width:none; width:100%; height:auto; padding:12px 30px; }
	#vis .visual-item.item01 {top: -3.188rem;left: calc(50% - 21.375rem);width: 6.188rem;}
	#vis .visual-item.item02 {top: 0.938rem;right: calc(50% - 22.75rem);width: 5.563rem;}
	#vis .visual-item.item03 {top: 12.313rem;left: calc(50% - 25.938rem);width: 6.813rem;}
	#vis .visual-item.item04 {top: 16.5rem;right: calc(50% - 25rem);width: 5.625rem;}
	#vis .visual-item.item05 {bottom: -12rem;left: calc(50% - 18.125rem);width: 5.313rem;}

	/* 공지사항_자주찾는메뉴_포스터 */
	.noti_service { margin-top:35px; padding-bottom:0; }
	.noti_service::after { display:none; }
	.noti_service .inner { flex-wrap:wrap; }
	.noti_service .left_con,
	.noti_service .right_con { width:100%; }
	.noti_service .right_con { max-width:484px; width:100%; margin:35px auto 0; }

	/* 단오제유튜브_축제앨범 */
	.main-gall-title { display:block; padding-bottom:30px; }
	.youtube_gall .tit_h3 { margin-bottom:13px; }
	.youtube_gall .main-youtube,
	.youtube_gall .main-gallery { padding:40px 20px 40px; }

	/* 하단 배너 */
	.bot_banner { padding:27px 0 24px; }
}

@media (max-width: 768px) {
	/* 레이아웃: #vis */
	#vis_wrap { max-height: 550px; }
	#vis #slider .swiper-slide > img { max-height: 550px; }
	#vis .slide-content { transform:translate(-50%, -70%); }
	#vis .visual_txt { width:60%; }
	#vis .visual_txt .img_txt { margin-bottom:30px; }
	#vis .visual_txt .txt { font-size:1.25rem; }
	#vis .visual_txt .txt.date { padding:12px 20px; }
	#vis .visual-item.item01 {top: -3.188rem;left: calc(50% - 16.375rem);width: 4.625rem;}
	#vis .visual-item.item02 {top: -0.062rem;right: calc(50% - 18.75rem);width: 4.188rem;}
	#vis .visual-item.item03 {top: 14.313rem;left: calc(50% - 20.938rem);width: 5.125rem;}
	#vis .visual-item.item04 {top: 15.5rem;right: calc(50% - 20.5rem);width: 4.188rem;}
	#vis .visual-item.item05 {bottom: -10rem;left: calc(50% - 13.125rem);width: 4rem;}
	#vis .visual_txt_2 .txt { font-size:2.188rem; }

	/* 공지사항_자주찾는메뉴_포스터 */
	.noti_service .tit_h3 { margin-bottom:13px; font-size:1.375rem; }

	/* 단오제유튜브_축제앨범 */
	.youtube_gall { display:block; }
	.youtube_gall .tit_h3 { font-size:1.375rem; }
	.youtube_gall .main-youtube,
	.youtube_gall .main-gallery { width:100%; padding:30px 20px; }
	.youtube_gall .main-gallery { border-top:1px dashed #ddd; }
	.youtube_gall .main-youtube .main-gall-content,
	.youtube_gall .main-gallery .main-gall-content { margin:0 auto; }

	/* 하단 배너 */
	.bot_banner { padding:7px 0; }
	.bot_banner .tit { display:none; }
}

@media (max-width: 576px) {
	/* 레이아웃: #vis */
	#vis_wrap { max-height: 400px; }
	#vis #slider .swiper-slide > img { max-height: 400px; }
	#vis #slider .swiper-controller { min-width:100px; height:30px; }
	#vis #slider .swiper-pagination { left:15px; }
	#vis #slider .swiper-button-pause { right:20px; }
	#vis .visual_txt .txt { font-size:1rem; }
	#vis .visual_txt .txt.date { padding:12px 0; }
	#vis .visual-item.item01 {top: -1rem;left: calc(50% - 11.375rem);width: 3.125rem;}
	#vis .visual-item.item02 {top: -0.062rem;right: calc(50% - 12.75rem);width: 2.813rem;}
	#vis .visual-item.item03 {top: 11.313rem;left: calc(50% - 13.938rem);width: 3.438rem;}
	#vis .visual-item.item04 {top: 13.5rem;right: calc(50% - 14.5rem);width: 2.813rem;}
	#vis .visual-item.item05 {bottom: -7rem;left: calc(50% - 8.125rem);width: 2.688rem;}
	#vis .visual_txt_2 .txt { font-size:1.75rem; }
	.swiper-button-prev,
	.swiper-button-next { background-size: 20px 30px; }
}

@media (max-width: 486px) {
	/* 레이아웃: #vis */
	#vis .visual_txt { width:80%; }
	#vis .visual_txt .txt.date { width:80%; }
	#vis .visual_txt .img_txt { margin-bottom:20px; }
	#vis .visual_txt_2 .txt { font-size:1.375rem; }
	#vis .visual-item.item01 {top: -2rem;left: calc(50% - 10rem);width: 2.688rem;}
	#vis .visual-item.item02 {top: -1rem;right: calc(50% - 10rem);width: 2.6rem;}
	#vis .visual-item.item03 {top: 12rem;left: calc(50% - 12rem);width: 3rem;}
	#vis .visual-item.item04 {top: 15rem;right: calc(50% - 11rem);width: 2.375rem;}
	#vis .visual-item.item05 {bottom: -8rem;left: calc(50% - 7rem);width: 2.1rem;}
}

@media (max-width: 360px) {
	/* 레이아웃: #vis */
	#vis .visual-item { display:none; }
	#vis .visual_txt { width:75%; }
	#vis .visual_txt .txt.date { width:100%; }
}

@media (max-width: 320px) {
	/* 하단 배너 */
	.bot_banner { display:none; }
}