@charset "utf-8"

.main { } 
.main .visual { position: relative; height: 460px; overflow: hidden; position: relative; display: grid; grid-template-columns: 95% 5%; } 

.main .visual .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: .6s ease;
}

.main .visual .mainSwiper { width:100%; border-radius: 0 0 222px 0; } 
.main .visual .bg { width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.0)); position: absolute; left: 0; top: 0; z-index: 5; } 
.main .visual .mainText { position: absolute; bottom: 130px; left: 150px; z-index: 10; color: #fff; text-shadow: 0px 0px 30px #000; } 
.main .visual .mainText p { font-size: var(--fs45); line-height: 1.2; font-weight: 800; margin-top: 10px; } 
.main .visual .text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } 
.main .visual .text p { writing-mode: vertical-rl; text-orientation: upright; color:#BDBDBD; margin-top:40px; letter-spacing: 4px; font-size: var(--fs15); line-height: 1; } 
.main .visual .scroll { position: absolute; right: 25px; bottom: 0; display: flex; align-items: center; gap:10px; font-size: var(--fs13); color: var(--base3); font-weight: 700; z-index: 99; } 


/*공지사항*/
.main .topWrap { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 70px; } 
.main .topWrap>div { border:1px solid var(--line); border-radius: 30px; transition:.5s; overflow: hidden; } 
.main .topWrap>div:hover { box-shadow: 25px 25px 30px 0 rgba(0, 0, 0, 0.05); } 

.main .topWrap .notice .title { padding: 30px 50px; padding-right:0; border-bottom:1px solid var(--line); line-height: 1; } 
.main .topWrap .notice .title .tab-btn.on { color:var(--base1); } 
.main .topWrap .notice .tab-content { display: none; } 
.main .topWrap .notice .tab-content.on { display: block; } 

.main .topWrap .notice .title a { position: relative; font-weight: 600; transition: .2s; } 
.main .topWrap .notice .title a:hover { color: var(--base1); } 
.main .topWrap .notice .title a+a { margin-left:20px; } 
.main .topWrap .notice .title a+a::before { content: ""; position: absolute; left: -15px; top: 8px; width: 5px; height: 5px; border-radius: 100px; background: var(--gray); } 

.main .topWrap .subTit { background: url(/images/main/bell.svg) no-repeat center left 50px; background-size: 45px; padding:40px 50px 40px 115px; line-height: 1; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs20); font-weight: 600; } 
.main .topWrap .subTit a { font-size: var(--fs14); color: var(--ftgray); } 
.main .topWrap .notice ul { padding:0 40px; } 
.main .topWrap .notice ul li a { font-weight: 300; width: 100%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; line-height: 1; } 
.main .topWrap .notice ul li a:hover { color: var(--base1); } 
.main .topWrap .notice ul li+li { margin-top:18px; } 


/*갤러리*/
.main .gallery { position: relative; } 
.main .gallery .swiper-slide img { display: block; width: 100%; height: 275px; object-fit: cover; } 
.main .gallery .conWrap { padding:30px 50px; } 
.main .gallery .conWrap h3 { font-size: var(--fs20); transition: .3s; width: 100%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; line-height: 1; } 
.main .gallery:hover .conWrap h3 { color: var(--base1); } 
.main .gallery .conWrap span { padding-top:10px; font-size: var(--fs16); color: #666; width: 100%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; line-height: 1; } 

.main .gallery .swiper-button-next, .main .gallery .swiper-button-prev { color: transparent !important; width:32px; height:32px; border-radius: 100px; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10); } 
.main .gallery .swiper-button-next { right: -40px; background: #fff url(/images/main/gallery_next.svg) no-repeat center; } 
.main .gallery .swiper-button-prev { left: -30px; background: #fff url(/images/main/gallery_prev.svg) no-repeat center; } 

.main .gallery .slidebuttonWrap { position: absolute; right: 70px; bottom:120px; z-index: 1; } 


/*캘린더*/
.main .calendar { text-align: center; padding-top:25px } 
.main .calendar p { font-size: var(--fs22); font-weight: 600; margin-bottom: 20px; } 
.main .calendar p a { display: inline-block; text-indent: -9999px; overflow: hidden; width: 30px; height: 17px; background: url(/images/main/calendar_btn.svg) no-repeat center right; transition: .2s; } 
.main .calendar p a:hover { width:33px; } 

.main .calendar .bottom { font-size: var(--fs16); padding: 15px; border-top:1px solid var(--line); line-height: 1.4; } 
.main .calendar .bottom span { color: #8B0304; display: block; } 

.main .calendar .calTable { padding: 0 50px 25px; } 
.main .calendar .calTable table { width:100%; font-size:var(--fs14); color:#000; } 
.main .calendar .calTable table thead { } 
.main .calendar .calTable table tr { } 
.main .calendar .calTable table tr>* { padding:4px 0; font-weight:500; } 
.main .calendar .calTable table tr th { width:60px; } 
.main .calendar .calTable table tr td { text-align: center !important; } 
.main .calendar .calTable .select a { display:inline-block; color: #fff; width: 30px; height: 30px; border-radius: 100px; background: var(--base1); line-height: 30px; }  

.main .calendar .c_red { color: #8B0304; } 
.main .calendar .c_blue { color: #3069B8; } 


/*퀵메뉴*/
.main .quickWrap ul { margin: 50px 0 70px 0; display: grid; grid-template-columns: repeat(5, 1fr) auto auto; gap:15px; } 
.main .quickWrap ul li { border-radius: 10px; transition: .3s; } 
.main .quickWrap ul li:hover { transform: translateY(-8px); } 
.main .quickWrap ul li a { width: 100%; display: inline-block; padding:30px; } 
.main .quickWrap ul li a span { display: block; color:var(--ftgray); font-size: var(--fs14); } 
.main .quickWrap ul li:nth-child(1) { background:#F8F9FB url(/images/main/ico_info.svg) no-repeat center right 30px; } 
.main .quickWrap ul li:nth-child(2) { background:#F8F9FB url(/images/main/ico_sponsor.svg) no-repeat center right 30px; } 
.main .quickWrap ul li:nth-child(3) { background:#F8F9FB url(/images/main/ico_facilities.svg) no-repeat center right 30px; } 
.main .quickWrap ul li:nth-child(4) { background:#F8F9FB url(/images/main/ico_map.svg) no-repeat center right 30px; } 
.main .quickWrap ul li:nth-child(5) { background:var(--base3) url(/images/main/ico_people.svg) no-repeat center right 30px; color: #fff; } 
.main .quickWrap ul li:nth-child(5) span { color: #fff; } 
.main .quickWrap ul li:nth-child(6) { background:var(--base1) url(/images/main/ico_call.svg) no-repeat center right 30px; color: #fff; padding-right:60px; } 
.main .quickWrap ul li:nth-child(6) span { font-size: var(--fs16); color: #fff; } 
.main .quickWrap ul li:nth-child(7) { background: var(--base2); } 


/*관련 기관 배너*/
.main .sponsorWrap { border-top:1px solid #eaeaea; border-left:0; border-right:0; } 
.main .sponsorWrap .swiper-wrapper { height:90px; } 
.main .sponsorWrap .swiper-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; } 

.main .sponsorWrap .swiper-button-next, .main .sponsorWrap .swiper-button-prev { color: transparent !important; width:42px; height:42px; border:1px solid var(--line); border-radius: 100px; top: 24px; } 
.main .sponsorWrap .swiper-button-next { background: #fff url(/images/main/gallery_next.svg) no-repeat center; right:0; } 
.main .sponsorWrap .swiper-button-prev { background: #fff url(/images/main/gallery_prev.svg) no-repeat center; left:0; } 

.main .sponsorWrap .sponsor .screen > div { width:50px; height:40px; background:#fff; position:absolute; z-index:2; } 
.main .sponsorWrap .sponsor .screen > .left { left:0; top:26px; } 
.main .sponsorWrap .sponsor .screen > .right { right:0; top:26px; } 



/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) { 
 .main .visual { grid-template-columns: calc(100% - 70px) 70px; height: 420px; } 
 .main .visual .text p { margin-top: 65px; font-size: var(--fs14); letter-spacing: 3px; } 
 .main .visual .mainText { left: 30px; } 
 .main .visual .scroll { right: 20px; } 

 .main .quickWrap ul { grid-template-columns: repeat(4, 1fr); } 
 .main .sponsorWrap>div { padding: 0 30px; } 

 .main .topWrap, .main .quickWrap { margin: 0 30px; } 
 .main .topWrap .notice .title { padding: 20px; } 
 .main .topWrap .subTit { background: url(/images/main/bell.svg) no-repeat center left 35px; padding: 40px 50px 40px 95px; } 
 .main .gallery .conWrap { padding: 30px 30px; } 
 .main .calendar .calTable { padding: 0 30px 25px; } 
}


/* ************************ 모바일 (~991) ************************ */
@media screen and (max-width:991px) {
 .main .topWrap { grid-template-columns: repeat(2, 1fr); } 
 .main .topWrap .notice .title { padding: 20px 30px; } 
 .main .gallery .swiper-slide img { height: 255px; } 

 .main .calendar .bottom { padding: 20px 0; } 

 .main .topWrap .calendar { grid-column: 1 / span 2; } 
 }


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) {

    .main .visual .scroll { display: none; } 
    .main .visual .mainSwiper { border-radius: 0; } 

    .main .quickWrap ul { grid-template-columns: repeat(2, 1fr); } 
    .main .quickWrap ul li:last-child { grid-column: span 2; }
    .main .quickWrap ul li:hover { transform: translateY(0px); } 
    .main .quickWrap ul li:last-child a {display: flex; justify-content: center;}
    .main .quickWrap ul li img { width: 60%; } 

    .main .topWrap { display: flex; flex-direction: column; } 
    .main .topWrap .notice ul { padding-bottom: 35px; } 
}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {
    .main .quickWrap ul li a { padding: 20px; line-height: 1.2;} 
    .main .visual .text { } 
    .main .visual .mainText { bottom: 30px; } 
    .main .visual .mainText p {padding-right: 20px; font-size: 28px;}

    .main .topWrap, .main .quickWrap { margin: 0 20px; } 

    .main .visual .text p { display: none; } 
    .main .visual { display: block; } 

    .main .topWrap { padding-top: 40px; gap: 30px; } 
    .main .topWrap .notice .title { padding: 0; padding-bottom: 10px; border: 0; } 

    .main .topWrap>div { border-radius: 20px; } 
    .main .topWrap>div.notice { border-radius: 0; border: 0; } 
    .main .topWrap>div:hover { box-shadow: none; } 

    .main .topWrap .notice ul { padding: 0; } 
    .main .topWrap .subTit { background: url(/images/main/bell.svg) no-repeat center left; background-size: 32px; padding: 20px 10px 20px 45px; margin-bottom: 10px; } 
    .main .topWrap .notice ul li+li { margin-top: 10px; } 

    .main .quickWrap ul li a span {line-height: 1.2;}

    .main .quickWrap ul li:nth-child(1) { background: #F8F9FB url(/images/main/ico_info.svg) no-repeat right 20px bottom 20px; } 
    .main .quickWrap ul li:nth-child(2) { background:#F8F9FB url(/images/main/ico_sponsor.svg) no-repeat right 20px bottom 20px; } 
    .main .quickWrap ul li:nth-child(3) { background:#F8F9FB url(/images/main/ico_facilities.svg) no-repeat right 20px bottom 20px; } 
    .main .quickWrap ul li:nth-child(4) { background:#F8F9FB url(/images/main/ico_map.svg) no-repeat right 20px bottom 20px; } 
    .main .quickWrap ul li:nth-child(5) { background:var(--base3) url(/images/main/ico_people.svg) no-repeat right 20px bottom 20px; color: #fff; }
    .main .quickWrap ul li:nth-child(6) { background:var(--base1) url(/images/main/ico_call.svg) no-repeat right 20px bottom 20px; color: #fff; padding-right:60px; } 
    
    .main .sponsorWrap .swiper-wrapper {height: 60px;}
    .main .sponsorWrap .swiper-button-next, .main .sponsorWrap .swiper-button-prev {width: 35px; height: 35px; top: 13px;}

}