/**
* OLYM Cascading Style Sheets
* File Name : main.css
* Description : 메인 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2018.05.24
* Update : 2024.06.14
* Copyright(c) 2024 OLYM Communications. All Rights Reserved.
*/
@keyframes rotate1 {
  0% { transform: rotate(0deg);}
  50%{transform: rotate(-5deg);}
  100%{transform: rotate(-5deg);}
}

@keyframes rotate2 {
  0% { transform: rotate(0deg);}
  10%{transform: rotate(-3deg);}
  20%{transform: rotate(0deg);}
  100%{transform: rotate(-3deg);}
}

@keyframes rotate3 {
  0% { transform: rotate(0deg);}
  10%{transform: rotate(3deg);}
  20%{transform: rotate(0deg);}
  100%{transform: rotate(3deg);}
}

@keyframes opacity1 {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes rotate4 {
  0% { transform: rotate(0deg);}
  100%{transform: rotate(5deg);}
}
@keyframes updown1 {
  0% { transform: translateY(0) rotate(1deg);}
  100%{transform: translateY(5px) rotate(0deg);}
}

/* main */
#main { height: 580px; position: relative;}
#main .swiper { width: 100%; height: 100%;}
#main .swiper-slide.bg1 { background: url("/project/design/main/main1.png?ver=2") no-repeat center / auto 100%;}
#main .swiper-slide.bg2 { background: url("/project/design/main/main2.png?ver=2") no-repeat center / auto 100%;}
#main .swiper-slide.bg3 { background: url("/project/design/main/main3.png?ver=2") no-repeat center / auto 100%;}
#main .swiper-slide.bg4 { background: url("/project/design/main/main4.png?ver=2") no-repeat center / auto 100%;}
#main .swiper-slide.bg1new { background: url("/project/design/main/main1_new.png?ver=2") no-repeat center / auto 100%; overflow: hidden;}
#main .swiper-slide.bg1new .main_txt_box { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1320px; max-width: 95%; height: 100%; box-sizing: border-box; z-index: 10; pointer-events: none;}
#main .swiper-slide.bg1new .main_txt_top { position: absolute; left: 0; top: 35%; transform: translateY(-58%); opacity: 0; animation: mainTxtUp 1s ease forwards; animation-delay: 0.3s;}
#main .swiper-slide.bg1new .main_year { margin: 0; color: #fff; font-size: 62px; font-weight: 900; font-family: "Noto Sans KR", "Pretendard", sans-serif; letter-spacing: -0.04em; line-height: 1.1;}
#main .swiper-slide.bg1new .main_title { margin: 6px 0 0; color: #c6e63c; font-size: 82px; font-weight: 900; font-family: "Noto Sans KR", "Pretendard", sans-serif; letter-spacing: -0.05em; line-height: 1.12; text-shadow: 3px 3px 0 rgba(0,0,0,.25);}
#main .swiper-slide.bg1new .main_slogan { margin: 14px 0 0; color: #fff; font-size: 38px; font-weight: 700; font-family: "Noto Sans KR", "Pretendard", sans-serif; letter-spacing: -0.03em; line-height: 1.3;}
#main .swiper-slide.bg1new .main_txt_bot { position: absolute; left: 0; bottom: 48px; opacity: 0; animation: mainTxtBotUp 1s ease forwards; animation-delay: 0.9s;}
#main .swiper-slide.bg1new .main_date { margin: 0; color: #fff; font-size: 34px; font-weight: 700; font-family: "Noto Sans KR", "Pretendard", sans-serif; letter-spacing: -0.03em; line-height: 1.4;}
#main .swiper-slide.bg1new .main_date em { color: #c6e63c; font-style: normal; font-weight: 900; text-shadow: 2px 2px 0 rgba(0,0,0,.2);}
#main .swiper-slide.bg1new .main_place { margin: 6px 0 0; color: #fff; font-size: 30px; font-weight: 600; font-family: "Noto Sans KR", "Pretendard", sans-serif; letter-spacing: -0.03em; line-height: 1.4;}
#main .swiper-slide.bg1new .main_dday { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: 250px; z-index: 12; opacity: 0; animation: mainDdayUp 1s ease forwards; animation-delay: 1.3s;}
#main .swiper-slide.bg1new .main_dday .dday_inner { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #ffffff 0%, #f7ffe8 55%, #eef9c4 100%); border: 3px solid #c6e63c; box-shadow: 0 0 0 4px rgba(198,230,60,.22), 0 14px 28px rgba(0,0,0,.18), 0 0 24px rgba(198,230,60,.35); animation: ddayGlow 2.4s ease-in-out infinite;}
#main .swiper-slide.bg1new .main_dday .dday_head { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(90deg, #a8d420 0%, #c6e63c 45%, #dff56a 100%); color: #fff; text-align: center; padding: 10px 12px; line-height: 1.2; position: relative;}
#main .swiper-slide.bg1new .main_dday .dday_head:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);}
#main .swiper-slide.bg1new .main_dday .dday_badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #fff; color: #6b9a00; font-size: 11px; font-weight: 900; font-family: "Montserrat", "Noto Sans KR", sans-serif; letter-spacing: 0.04em;}
#main .swiper-slide.bg1new .main_dday .dday_tit { color: #fff; font-size: 18px; font-weight: 800; font-family: "Noto Sans KR", "Pretendard", sans-serif; letter-spacing: -0.03em; text-shadow: 0 1px 0 rgba(0,0,0,.15);}
#main .swiper-slide.bg1new .main_dday .dday_body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 86px; padding: 12px 14px 14px; position: relative;}
#main .swiper-slide.bg1new .main_dday .dday_body:before { content: ""; position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(198,230,60,.28) 0%, rgba(198,230,60,0) 70%); pointer-events: none;}
#main .swiper-slide.bg1new .main_dday .dday_label { position: relative; z-index: 1; color: #1a1a1a; font-size: 52px; font-weight: 900; font-family: "Noto Sans KR", "Montserrat", sans-serif; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #222 0%, #3a5200 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(198,230,60,.45)); animation: ddayPulse 1.8s ease-in-out infinite;}
#main .swiper-slide.bg1new .main_dday .dday_sub { position: relative; z-index: 1; margin-top: 4px; color: #8aaa20; font-size: 11px; font-weight: 800; font-family: "Montserrat", "Noto Sans KR", sans-serif; letter-spacing: 0.18em;}
#main .swiper-slide.bg1new .main_dday .dday_spark { position: absolute; width: 10px; height: 10px; z-index: 2; background: #fff; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 4px #c6e63c); animation: ddaySpark 1.6s ease-in-out infinite;}
#main .swiper-slide.bg1new .main_dday .dday_spark.s1 { top: -6px; left: 18px; animation-delay: 0s;}
#main .swiper-slide.bg1new .main_dday .dday_spark.s2 { top: -4px; right: 22px; width: 8px; height: 8px; animation-delay: .4s;}
#main .swiper-slide.bg1new .main_dday .dday_spark.s3 { bottom: 10px; left: -6px; width: 9px; height: 9px; background: #dff56a; animation-delay: .8s;}
#main .swiper-slide.bg1new .main_dday .dday_spark.s4 { bottom: 18px; right: -5px; width: 7px; height: 7px; background: #fff59a; animation-delay: 1.1s;}
@keyframes mainTxtUp {
  0% { opacity: 0; transform: translateY(calc(-58% + 40px));}
  100% { opacity: 1; transform: translateY(-58%);}
}
@keyframes mainTxtBotUp {
  0% { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}
@keyframes mainDdayUp {
  0% { opacity: 0; transform: translate(-50%, 40px);}
  100% { opacity: 1; transform: translate(-50%, 0);}
}
@keyframes ddayGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(198,230,60,.22), 0 14px 28px rgba(0,0,0,.18), 0 0 18px rgba(198,230,60,.3);}
  50% { box-shadow: 0 0 0 5px rgba(198,230,60,.32), 0 16px 32px rgba(0,0,0,.2), 0 0 30px rgba(198,230,60,.55);}
}
@keyframes ddayPulse {
  0%, 100% { transform: scale(1);}
  50% { transform: scale(1.04);}
}
@keyframes ddaySpark {
  0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg);}
  50% { opacity: 1; transform: scale(1.15) rotate(18deg);}
}
#main .swiper-pagination1 { position: absolute; bottom: 30px; z-index: 200; width: 100%; text-align: center;}
#main .swiper-pagination-bullet { width: 13px; height: 13px; background: #fff; opacity: 0.5; margin: 0 5px;}
#main .swiper-pagination-bullet-active { opacity: 1;}

/* program_intro */
.program_intro { background: #f7f5f0; padding: 90px 0 80px; margin-top: 0;}
.program_intro_head { text-align: center; margin-bottom: 36px;}
.program_intro_head h3 { font-size: 36px; font-weight: 700; color: #222; font-family: "Cafe24Ssurround"; letter-spacing: -0.04em;}
.program_intro_head p { margin-top: 12px; font-size: 16px; color: #777; letter-spacing: -0.02em;}

.program_intro_tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px;}
.program_intro_tabs li button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 10px; border-radius: 999px; background: #fff; border: 1.5px solid #ddd; color: #333; font-size: 15px; font-weight: 600; letter-spacing: -0.03em; cursor: pointer; transition: .2s ease; white-space: nowrap;}
.program_intro_tabs li .tab_icon { width: 28px; height: 28px; border-radius: 50%; background: #e8e8e8; flex-shrink: 0;}
.program_intro_tabs li .tab_icon.c1 { background: #f4b4c4;}
.program_intro_tabs li .tab_icon.c2 { background: #a8d5a2;}
.program_intro_tabs li .tab_icon.c3 { background: #f5d56a;}
.program_intro_tabs li .tab_icon.c4 { background: #b8c96a;}
.program_intro_tabs li .tab_icon.c5 { background: #9bc8e8;}
.program_intro_tabs li[data-filter="theme1"] button { border-color: #f4b4c4;}
.program_intro_tabs li[data-filter="theme2"] button { border-color: #a8d5a2;}
.program_intro_tabs li[data-filter="theme3"] button { border-color: #f5d56a;}
.program_intro_tabs li[data-filter="theme4"] button { border-color: #b8c96a;}
.program_intro_tabs li[data-filter="theme5"] button { border-color: #9bc8e8;}
.program_intro_tabs li.active button { background: #2c2c2c; border-color: #2c2c2c; color: #fff;}
.program_intro_tabs li.active .tab_icon { background: #fff;}
.program_intro_tabs li:not(.active) button:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06);}

.program_intro_list { overflow: hidden;}
.program_intro_list .swiper-wrapper { align-items: stretch;}
.program_card { height: auto; min-width: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.06);}
.program_card .card_thumb { position: relative; height: 150px; background: #e9e9e9; overflow: hidden;}
.program_card .card_thumb img { width: 100%; height: 100%; object-fit: cover; display: block;}
.program_card .card_badge { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; letter-spacing: -0.03em; z-index: 1;}
.program_card .card_badge.c1 { background: #e8899f;}
.program_card .card_badge.c2 { background: #6db86a;}
.program_card .card_badge.c3 { background: #e0b83a;}
.program_card .card_badge.c4 { background: #8fa63f;}
.program_card .card_badge.c5 { background: #5ba3d0;}
.program_card .card_body { padding: 16px 14px 18px;}
.program_card .card_body h4 { min-height: 44px; font-size: 18px; line-height: 1.25; font-weight: 700; color: #222; letter-spacing: -0.03em; margin-bottom: 10px;}
.program_card .card_desc { background: #f3f3f3; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #555; line-height: 1.45; letter-spacing: -0.02em; margin-bottom: 14px; min-height: 40px; box-sizing: border-box;}
.program_card .card_meta { display: flex; flex-direction: column; gap: 6px;}
.program_card .card_meta li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; letter-spacing: -0.02em;}
.program_card .card_meta li i { font-size: 14px; color: #aaa; flex-shrink: 0;}
.program_intro_list .program_intro_prev,
.program_intro_list .program_intro_next { position: absolute; top: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: rgba(34,34,34,.92); color: #fff; box-shadow: 4px 5px 0 rgba(101,191,161,.45); cursor: pointer; transform: translateY(-50%); transition: background .2s ease, box-shadow .2s ease, transform .2s ease;}
.program_intro_list .program_intro_prev { left: 10px;}
.program_intro_list .program_intro_next { right: 10px;}
.program_intro_list .program_intro_prev:after,
.program_intro_list .program_intro_next:after { display: none !important; content: none !important;}
.program_intro_list .program_intro_prev i,
.program_intro_list .program_intro_next i { font-size: 25px; line-height: 1;}
.program_intro_list .program_intro_prev:not(.swiper-button-disabled):hover,
.program_intro_list .program_intro_next:not(.swiper-button-disabled):hover { background: #65bfa1; box-shadow: 2px 3px 0 rgba(34,34,34,.3); transform: translateY(-50%) translate(2px, 2px);}
.program_intro_list .swiper-button-disabled { opacity: .35;}
.program_intro_list .swiper-button-lock { display: none;}
.program_intro_empty { display: none; padding: 70px 20px; border-radius: 16px; background: #fff; color: #888; font-size: 15px; text-align: center;}

/* schedule */
.schedule { margin-top: 100px; justify-content: space-between; gap: 40px;}
.schedule .left { flex: 2; position: relative;}
.schedule .left h3 { z-index: 200; position: relative; font-size: 34px; color: #222; font-family: "Cafe24Ssurround"; font-weight: 600; letter-spacing: -0.04em;}
.schedule .left h3 span { position: relative;}
.schedule .left h3 span:after { position: absolute; width: 100%; height: 15px; bottom: 0; left: 50%; transform: translate(-50%, 0); display: inline-block; content: ""; background: #65bfa1; z-index: -1;}
.schedule .left h3 p { font-size: 15px; color: #666; letter-spacing: 0;}
.schedule .left > ul {margin-top: 50px;}
.schedule .left > ul > li { margin-bottom: 20px; display: flex; align-items: center; gap: 30px;}
.schedule .left > ul > li span { flex: 1; font-size: 18px; font-weight: 700; color: #1892ad;}
.schedule .left > ul > li p { flex: 5; font-size: 22px; font-weight: 700; color: #000;}
.schedule .left .img_l_sch1 { position: absolute; top: -35px; right: 40px; animation-name: rotate1; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite;}

.schedule .right { flex: 3; display: flex; gap: 30px; justify-content: space-between; }
.schedule .right a { flex: 1; display: block; height: 290px; box-sizing: border-box; padding: 35px 40px; border-radius: 10px 10px 50px 10px; position: relative; overflow: hidden;}
.schedule .right a:hover { box-shadow: 5px 10px 20px rgba(0, 0, 0,0.1);}
.schedule .right a p { position: relative; z-index: 1; font-size: 22px; font-weight: 700; color: #2a2a2a; line-height: 1.35;}
.schedule .right a .sch_icon { position: absolute; right: 8px; bottom: -6px; font-size: 118px; line-height: 1; color: #fff; pointer-events: none; z-index: 0; opacity: 0.88; transform: rotate(-8deg);}
.schedule .right a .naver_badge { position: absolute; top: 30px; right: 30px; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Cafe24Ssurround"; line-height: 1.15; font-size: 14px; border-radius: 100%; width: 60px; height: 60px; background-color: #1bc75e; color: #fff; box-sizing: border-box; padding: 0; padding-top: 2px;}
.schedule .right a.bg1 { background-color: #b4e3e7;}
.schedule .right a.bg2 { background-color: #e5edab;}
.schedule .right a.bg3 { background-color: #b2e6c7;}

/* community */
.community { gap: 75px; margin-top: 100px;}
.community .comm_box { flex: 1; width: 67.8%; gap: 70px;}
.community .comm_box div { flex: 1;}
.community .comm_box h3 { font-size: 26px; font-family: "Cafe24Ssurround"; color: #222; border-bottom: 1px solid #000; position: relative; padding:20px 0 10px 0;  margin-bottom: 10px;}
.community .comm_box h3 span { background: url("/project/design/main/bg_main_btn_more.png") no-repeat center; width: 45px; height: 13px; display: inline-block; position: absolute; right: 0; bottom: 26px; cursor: pointer;}
.community .comm_box h3:before { position: absolute; display: inline-block; top: 0; left: 0; font-size: 13px; font-family: "Montserrat"; font-weight: 500; color: #afafaf; letter-spacing: 0.1rem;}
.community .comm_box .notice h3:before { content: "NOTICE";}
.community .comm_box .news h3:before { content: "NEWS"; }

.community ul li { border-bottom: 1px solid #ddd; box-sizing: border-box; position: relative; height: 90px; line-height: 96px; display: flex; align-items: center; justify-content: space-between;}
.community ul li a { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-size: 18px; width: 325px;}
.community ul li span.cate { color: #fff; font-size: 15px; width: 65px; display: inline-block; text-align: center; margin-right: 10px; height: 28px; line-height: 28px;}
.community ul li span.cate.bg1 { background: #1892ad;}
.community ul li span.cate.bg2 { background: #000;}
.community ul li span.date { font-weight: 400; color: #999; width: 84px; padding-left: 10px; text-align: right;}

.community .link { flex: 0.85; flex-direction: column; gap: 30px;}
.community .link > a { flex: 1; border: 1px solid #f0f0f0; border-radius: 10px; display: flex; align-items: center; gap: 20px; padding: 20px 30px;}
.community .link h3 { font-size: 22px; font-family: "Cafe24Ssurround"; color: #222;}
.community .link p { color: #8e8e8e; padding-top: 5px;}

/* on_exhi */
.on_exhi { position: relative; height: 700px; color: #000; padding: 0; margin-top: 120px;}
.on_exhi:after { font-size: 130px; color: #222; font-weight: 700; font-family: 'Montserrat', sans-serif; position: absolute; left: 50%; bottom: -80px; content: "Online Exhibition"; z-index: 1000; display: inline-block; width: 1320px; transform: translate(-50%, 0);}
.on_exhi .tit_box { position: absolute; z-index: 1000; left: 50%; top: -22px; transform: translate(-50%, 0); display: flex; align-items: center;}
.on_exhi .tit_box h3 { font-size: 30px; font-weight: 700; margin-right: 60px;}
.on_exhi .tit_box .on_exhi_btn ul { display: flex; gap: 40px;}
.on_exhi .tit_box .on_exhi_btn li { cursor: pointer; font-weight: 900; transition: .3s all ease;}
.on_exhi .tit_box .on_exhi_btn li:hover { color: #1892ad; transition: .3s all ease;}
.on_exhi .tit_box .on_exhi_btn li.active { color: #1892ad;}

.on_exhi .swiper { width: 100%; height: 100%;}
.on_exhi .swiper-slide { text-align: center; background: #fff; display: flex; justify-content: center; align-items: center; background: #f5f5f5 url("/project/design/main/bg_on_exhi.jpg") no-repeat center;}
.on_exhi .swiper-slide img { display: block; object-fit: cover; margin: 0 auto;}
.on_exhi .swiper-button-next, .on_exhi .swiper-button-prev { color: #222 !important;}
.on_exhi .page_box { position: absolute; left: 50%; top: 50px; z-index: 1000; transform: translate(-50%, 0);}
.on_exhi .page_box .swiper-pagination { display: flex; justify-content: flex-end;}
.on_exhi .page_box .swiper-pagination-bullet-active { background-color: #000;}

.on_exhi .wrap_box.fx { align-items: center; justify-content: center;}
.on_exhi .wrap_box.fx > div { flex: 1; text-align: left;}
.on_exhi .wrap_box.fx > div.con1 h4 { font-size: 30px; font-weight: 900; color: #222;}
.on_exhi .wrap_box.fx > div.con1 h4 span { font-size: 60px;}
.on_exhi .wrap_box.fx > div.con1 p { color: #666; margin-top: 30px;}
.on_exhi .wrap_box.fx > div.con2 { position: relative; bottom: -75px;}
.on_exhi .wrap_box.fx > div.con3 > span { position: relative; color: #1892ad; padding-bottom: 10px; font-weight: 900;}
.on_exhi .wrap_box.fx > div.con3 > span:after { position: absolute; display: inline-block; content: ""; background: #1892ad; width: 100%; height: 4px; left: 50%; transform: translate(-50%, 0); bottom: 0;}
.on_exhi .wrap_box.fx > div.con3 h5 { font-size: 24px; color: #222; font-weight: 700; margin: 30px 0;}
.on_exhi .wrap_box.fx > div.con3 h5 > span { display: block;}
.on_exhi .wrap_box.fx > div.con3 p { color: #666; margin-bottom: 40px;}
.on_exhi .wrap_box.fx > div.con3 a { font-size: 15px; color: #000; font-weight: 700;}
.on_exhi .wrap_box.fx > div.con3 a i { position: relative; top: 1px;}

/* sns */
.sns { position: relative; margin-top: 100px; background: #f0f9e4; padding: 100px 0; z-index: 0;}
.sns:after { position: absolute; right: 30px; bottom: 0; content: "JIKJI FESTIVAL 2026"; color: #dbecd4; font-weight: 700; font-size: 149px; z-index: -1; font-family: 'Montserrat', sans-serif;}
.sns > .wrap_box { gap: 70px;}
.sns > .wrap_box > div { flex: 1;}
.sns > .wrap_box > div.youtube { flex: 0.81;}
.sns h3 { font-size: 26px; font-family: "Cafe24Ssurround"; color: #222; padding-top: 20px; position: relative; margin-bottom: 20px;}
.sns h3:before { position: absolute; display: inline-block; top: 0; left: 0; font-size: 13px; font-family: "Montserrat"; font-weight: 500; color: #afafaf; letter-spacing: 0.1rem;}
.sns .instagram h3:before { content: "INSTAGRAM";}
.sns .youtube h3:before { content: "YOUTUBE";}

.sns .container_box { gap: 60px;}
.sns .youtube .container_box { position: relative; height: auto; width: 100%; padding-top: 56.25%; border-radius: 20px; overflow: hidden;}
.sns .container { position: relative; width: 50%; border-radius: 20px; overflow: hidden;}
.sns .container .image { display: block; width: 100%; height: auto;}
.sns .container .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(24, 146, 173, 0.8);}
.sns .container .overlay a { color: #fff;}
.sns .container:hover .overlay { opacity: 1;}
.sns .container .text { color: #fff; font-size: 16px; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 8%; box-sizing: border-box;}

.sns .img_c1 { position: absolute; top: -140px; left: -35px;}
.sns .img_c1 .img_c1_1 { position: absolute; top: 72px; left: 21px; animation-name: rotate1; animation-delay: 0.5s; animation-duration: 1.5s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c1 .img_c1_2 { position: absolute; top: 0; left: 94px; animation-name: rotate1; animation-duration: 1.5s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c1 .img_c1_3 { position: absolute; top: 70px; left: 0; animation-name: opacity1; animation-duration: 0.5s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c1 .img_c1_4 { position: absolute; top: 25px; left: 83px; animation-name: opacity1; animation-delay: 0.2s; animation-duration: 0.5s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c1 .img_c1_5 { position: absolute; top: 104px; left: 94px; animation-name: opacity1;  animation-delay: 0.4s; animation-duration: 0.5s; animation-direction: alternate; animation-iteration-count: infinite;}

.sns .img_c2 { position: absolute; top: -82px; left: 248px; animation-name: updown1; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c3 { position: absolute; top: -116px; left: 580px; animation-name: rotate2; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c4 { position: absolute; top: -124px; left: 720px; animation-name: rotate3; animation-delay: 0.5s; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c5 { position: absolute; top: -154px; right: -55px;}
.sns .img_c5 .img_c5_1 { position: absolute; top: 0; right: 0;}
.sns .img_c5 .img_c5_2 { position: absolute; top: 50px; right: 162px; animation-name: rotate4; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns .img_c5 .img_c5_3 { position: absolute; top: 38px; right: 110px; animation-name: updown1; animation-duration: 1s; animation-delay: 0.5s; animation-direction: alternate; animation-iteration-count: infinite;}

/* sns_link */
.sns_link { padding: 80px 0; justify-content: space-between; align-items: center;}
.sns_link h3 { font-size: 26px; font-family: "Cafe24Ssurround"; color: #222; font-weight: 700; position: relative;}
.sns_link h3 .em1 { color: #ec807a;}
.sns_link h3 .em2 { color: #61b0bc;}
.sns_link h3 .img_c6 { position: absolute; top: -45px; right: -15px; animation-name: rotate2; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}
.sns_link ul { gap: 44px;}
.sns_link ul li a { width: 100px; height: 100px; border-radius: 100px; background: #d8d8d8; display: flex; align-items: center; justify-content: center;}
.sns_link ul li a i { color: #222; font-size: 36px;}
.sns_link ul li a:hover i { color: #fff;}

.sns_link ul li:nth-of-type(1) a:hover { background: #03c65a;}
.sns_link ul li:nth-of-type(2) a:hover { background: linear-gradient(#434aeb, #ef3178, #f05337, #edc56d);}
.sns_link ul li:nth-of-type(3) a:hover { background: #ff0000;}
.sns_link ul li:nth-of-type(4) a:hover { background: #fbe300;}
.sns_link ul li:nth-of-type(4) a:hover i { color: #3b1e1e;}
/* .sns_link ul li:nth-of-type(5) a:hover { background: #1877f2;} */
.sns_link ul li:nth-of-type(5) a:hover { background: #ff6f0e;}

.sns_link ul li a i.img_dang { width: 36px; height: 36px; display: flex; background:url("/project/design/main/icon_dang.png") no-repeat center / cover;}
.sns_link ul li a:hover i.img_dang { background:url("/project/design/main/icon_dang_on.png") no-repeat center / cover;}

/* sponsor_box */
.sponsor_box { border-top: 1px solid #eee; padding: 40px 0; box-sizing: border-box;}
.sponsor {display: flex; align-items: center; gap: 20px; overflow: hidden;}
.sponsor .slide_area { position: relative; width: calc(100% - 170px);}
.sponsor .slide_ctrl { flex-basis: 170px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 5px;}
.sponsor .slide_ctrl a { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 40px; height: 40px; border: 1px solid #e7e7e7; box-sizing: border-box; border-radius: 10px; }
.sponsor .slide_ctrl i { font-size: 1.5em; color: #868686; transform: translateY(1px);}
.sponsor .owl-stage {display: flex; align-items: center;}
.sponsor .owl-carousel .owl-stage-outer { width: 100%;}
.sponsor .owl-carousel .owl-item a { display: flex; justify-content: center; max-height: 44px; background: #fff;}
.sponsor .owl-carousel .owl-item a img { width: auto !important; max-height: 44px; mix-blend-mode: luminosity; opacity: .7;}
.sponsor .owl-carousel .owl-item a img:hover { mix-blend-mode: normal; opacity: 1;}

@media all and (max-width:1600px) {
  .sns:after { font-size: 130px;}
}

@media all and (max-width:1400px) {
  .community { gap: 40px;}
  .community .comm_box { gap: 40px;}

  .on_exhi .wrap_box.fx > div.con1,
  .on_exhi .wrap_box.fx > div.con3 { padding: 30px;}
  .on_exhi .wrap_box.fx > div.con1 h4 { line-height: 1.2em;}
  .on_exhi .wrap_box.fx > div.con1 h4 span { display: block; line-height: 1.2em;}
}

@media all and (max-width:1380px) {
  #main { height: 480px;}
  #main .swiper-slide.bg1new .main_year { font-size: 44px;}
  #main .swiper-slide.bg1new .main_title { font-size: 60px;}
  #main .swiper-slide.bg1new .main_slogan { font-size: 24px;}
  #main .swiper-slide.bg1new .main_date { font-size: 20px;}
  #main .swiper-slide.bg1new .main_place { font-size: 17px;}
  #main .swiper-slide.bg1new .main_dday { width: 230px; bottom: 34px;}
  #main .swiper-slide.bg1new .main_dday .dday_label { font-size: 46px;}
  #main .swiper-slide.bg1new .main_dday .dday_body { min-height: 78px;}
  #main .swiper-slide.bg1new .main_txt_bot { bottom: 40px;}
  .program_intro { padding: 70px 0 60px;}
  .program_intro_head h3 { font-size: 30px;}
  .program_card .card_thumb { height: 130px;}
  .program_card .card_body { padding: 14px 12px 16px;}
  .program_card .card_body h4 { font-size: 16px;}
  .schedule { flex-direction: column; margin-top: 60px;}
  .schedule .left {display: flex; gap: 30px; align-items: center;}
  .schedule .left h3 {flex: 1; padding-left: 140px; box-sizing: border-box; font-size: 26px;}
  .schedule .left h3 p { font-size: 14px;}
  .schedule .left > ul { margin-top: 0; flex: 1.5;}
  .schedule .left > ul > li { margin-bottom: 10px;}
  .schedule .left .img_l_sch1 { top: 0; right: auto; left: 0;}
  .schedule .right a { height: 200px;}
  .schedule .right a .sch_icon { font-size: 92px; right: 4px; bottom: -8px;}

  .community { flex-direction: column; margin-top: 60px;}
  .community .comm_box {width: 100%;}
  .community .link { flex-direction: row; gap: 40px;}
  .sns:after { font-size: 120px;}
  .sns > .wrap_box { gap: 30px;}
  .sns .container_box { gap: 30px;}
  .sns_link ul { gap: 20px;}
}

@media all and (max-width:1320px) {
  .on_exhi:after { width: 95%;}
}

@media all and (max-width:1280px) {
  .sns:after { font-size: 110px;}
  .sns > .wrap_box > div.youtube { flex: 0.79;}

  .on_exhi:after { font-size: 120px;}
  .on_exhi .wrap_box.fx > div.con1 h4 span { font-size: 55px;}
}

@media all and (max-width:1200px) {
  .on_exhi .wrap_box.fx > div.con3 p br { display: none;}
}

@media all and (max-width:1150px) {
  .sns { padding: 150px 0 100px 0;}
  .sns:after { font-size: 90px;}
  .sns_link h3 br { display: none;}
  .sns .img_c1 { left: 0;}
  .sns .img_c3 { left: 380px;}
  .sns .img_c4 { left: 450px;}
  .sns .img_c5 { top: -200px; right: 0;}

  .on_exhi:after { font-size: 100px;}
  .on_exhi .wrap_box.fx > div.con1 h4 span { font-size: 50px;}
}

@media all and (max-width:1024px) {
  #main { height: 450px;}
  #main .swiper-slide.bg1new .main_year { font-size: 38px;}
  #main .swiper-slide.bg1new .main_title { font-size: 50px;}
  #main .swiper-slide.bg1new .main_slogan { font-size: 20px; margin-top: 10px;}
  #main .swiper-slide.bg1new .main_date { font-size: 17px;}
  #main .swiper-slide.bg1new .main_place { font-size: 15px;}
  #main .swiper-slide.bg1new .main_dday { width: 200px; bottom: 30px;}
  #main .swiper-slide.bg1new .main_dday .dday_inner { border-radius: 18px;}
  #main .swiper-slide.bg1new .main_dday .dday_head { padding: 8px 10px;}
  #main .swiper-slide.bg1new .main_dday .dday_tit { font-size: 15px;}
  #main .swiper-slide.bg1new .main_dday .dday_badge { height: 18px; font-size: 10px; padding: 0 6px;}
  #main .swiper-slide.bg1new .main_dday .dday_label { font-size: 40px;}
  #main .swiper-slide.bg1new .main_dday .dday_body { min-height: 68px; padding: 10px 12px 12px;}
  #main .swiper-slide.bg1new .main_txt_bot { bottom: 34px;}
  .community .comm_box h3 { font-size: 26px;}
  .community .comm_box h3:before { font-size: 14px;}
  .community ul li { height: 80px; line-height: 86px;}
  .community ul li a { font-size: 16px;}
  .sns h3 { font-size: 26px;}
  .sns h3:before { font-size: 14px;}
  .sns .container .text { font-size: 14px;}
  .sns_link { flex-direction: column; gap: 20px;}
  .sns_link h3 { font-size: 26px;}
  .sns_link h3 .img_c6 { right: -90px;}
  .sns_link ul li a { width: 90px; height: 90px;}
  .sns_link ul li a i { font-size: 30px;}
  .sns_link ul li a i.img_dang { width: 30px; height: 30px;}

  .on_exhi .tit_box h3 { font-size: 26px;}
  .on_exhi .tit_box .on_exhi_btn { position: relative; top: 3px;}
  .on_exhi .wrap_box.fx > div.con1 h4,
  .on_exhi .wrap_box.fx > div.con1 h4 span { font-size: 28px;}
}

@media all and (max-width:960px) {
  .community .comm_box { flex-direction: column;}
  .sns:after { font-size: 80px;}

  .on_exhi { height: 800px;}
  .on_exhi:after { font-size: 90px; width: 95%; box-sizing: border-box; bottom: -60px;}
  .on_exhi .swiper-slide { position: relative; box-sizing: border-box; align-items: flex-start !important;}
  .on_exhi .wrap_box.fx { flex-direction: column; justify-content: flex-start !important; align-items: flex-start !important; height: 100%;}
  .on_exhi .page_box { left: auto; transform: translate(0, 0); right: 40px;}
  .on_exhi .wrap_box.fx > div { flex: 0;}
  .on_exhi .wrap_box.fx > div.con1 { padding: 40px;}
  .on_exhi .wrap_box.fx > div.con2 { position: absolute; bottom: -75px; left: 50%; transform: translate(-50%, 0);}
  .on_exhi .wrap_box.fx > div.con2 img { zoom: 0.75;}
  .on_exhi .wrap_box.fx > div.con3 { padding: 0 40px;}
  .on_exhi .wrap_box.fx > div.con3 h5 { margin: 15px 0;}
  .on_exhi .wrap_box.fx > div.con3 h5 span { display: inline;}
}

@media all and (max-width:900px) {
  .sns:after { font-size: 70px;}
  .sns .img_c3 { top: -166px;left: 280px;}
  .sns .img_c4 { top: -184px; left: 350px;}
  .on_exhi:after { font-size: 80px;}
}

@media all and (max-width:767px) {
  #main { height: 350px;}
  #main .swiper-slide.bg1new .main_year { font-size: 30px;}
  #main .swiper-slide.bg1new .main_title { font-size: 38px; text-shadow: 2px 2px 0 rgba(0,0,0,.25);}
  #main .swiper-slide.bg1new .main_slogan { font-size: 16px; margin-top: 8px;}
  #main .swiper-slide.bg1new .main_date { font-size: 14px;}
  #main .swiper-slide.bg1new .main_place { font-size: 13px;}
  #main .swiper-slide.bg1new .main_dday { width: 160px; bottom: 26px;}
  #main .swiper-slide.bg1new .main_dday .dday_inner { border-width: 2px; border-radius: 14px;}
  #main .swiper-slide.bg1new .main_dday .dday_head { padding: 6px 8px; gap: 5px;}
  #main .swiper-slide.bg1new .main_dday .dday_tit { font-size: 13px;}
  #main .swiper-slide.bg1new .main_dday .dday_badge { display: none;}
  #main .swiper-slide.bg1new .main_dday .dday_label { font-size: 32px;}
  #main .swiper-slide.bg1new .main_dday .dday_sub { font-size: 9px; letter-spacing: 0.12em;}
  #main .swiper-slide.bg1new .main_dday .dday_body { min-height: 54px; padding: 8px 10px 10px;}
  #main .swiper-slide.bg1new .main_txt_bot { bottom: 28px;}
  .program_intro { padding: 50px 0 40px;}
  .program_intro_head { margin-bottom: 24px;}
  .program_intro_head h3 { font-size: 26px;}
  .program_intro_head p { font-size: 14px;}
  .program_intro_tabs { gap: 8px; margin-bottom: 28px;}
  .program_intro_tabs li button { height: 38px; font-size: 13px; padding: 0 14px 0 8px;}
  .program_intro_tabs li .tab_icon { width: 24px; height: 24px;}
  .program_intro_list .program_intro_prev,
  .program_intro_list .program_intro_next { width: 42px; height: 42px;}
  .program_intro_list .program_intro_prev i,
  .program_intro_list .program_intro_next i { font-size: 22px;}
  .program_card .card_thumb { height: 140px;}
  .program_card .card_body h4 { font-size: 16px;}
  .schedule { margin-top: 60px;}
  .schedule .left { flex-direction: column; align-items: flex-start;}
  .schedule .left > ul { width: 100%;}
  .schedule .left .img_l_sch1 { top: -30px;}
  .schedule .right { gap: 20px;}

  .community { margin-top: 50px; gap: 30px;}
  .community .comm_box { gap: 30px;}
  .community .comm_box h3 { font-size: 22px;}
  .community .comm_box h3:before { font-size: 12px;}
  .community ul li { line-height: 76px; height: 70px;}
  .community ul li a { font-size: 15px;}
  .community .link { gap: 20px;}

  .sns:after { font-size: 60px;}
  .sns h3 { font-size: 22px;}
  .sns h3:before { font-size: 12px;}
  .sns > .wrap_box { flex-direction: column;}
  .sns .instagram { margin-top: 30px;}
  .sns .container_box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
  .sns .container { width: 100%;}
  .sns .container .text { font-size: 12px;}
  .sns .img_c2 {z-index: 3; left: 186px;}
  .sns .img_c3 { left: 180px;}
  .sns .img_c4 { left: 250px;}

  .sns_link { padding: 50px 0;}
  .sns_link h3 {font-size: 22px;}
  .sns_link ul { gap:15px;}
  .sns_link ul li a { width: 75px; height: 75px;}
  .sns_link ul li a i { font-size: 26px;}
  .sns_link ul li a i.img_dang { width: 26px; height: 26px;}

  .on_exhi { margin-top: 60px;}
  .on_exhi:after { font-size: 70px; bottom: -40px;}
  .on_exhi .tit_box { top: -15px;}
  .on_exhi .tit_box h3 { font-size: 22px;}
  .on_exhi .wrap_box.fx > div.con1 h4,
  .on_exhi .wrap_box.fx > div.con1 h4 span { font-size: 26px;}
  .on_exhi .wrap_box.fx > div.con1 p { margin-top: 20px;}
  .on_exhi .wrap_box.fx > div.con3 h5 { font-size: 22px;}
}

@media all and (max-width:680px) {
  #main { height: 300px;}
  #main .swiper-slide.bg1new .main_year { font-size: 26px;}
  #main .swiper-slide.bg1new .main_title { font-size: 32px;}
  #main .swiper-slide.bg1new .main_slogan { font-size: 14px;}
  #main .swiper-slide.bg1new .main_dday { width: 140px;}
  #main .swiper-slide.bg1new .main_dday .dday_label { font-size: 28px;}
  #main .swiper-slide.bg1new .main_dday .dday_tit { font-size: 12px;}
  .schedule .right { flex-direction: column;}
  .community .link { flex-direction: column;}
  .sns:after { font-size: 50px;}
  .sns > .wrap_box { flex-direction: column;}
  .sns > .wrap_box > div.youtube { flex: 0.76;}
  .sns .img_c2 { display: none;}
  .sns .img_c3 {  display: none;}
  .sns .img_c4 {  display: none;}

  .on_exhi:after { font-size: 60px; bottom: -40px;}
  .on_exhi .tit_box .on_exhi_btn ul { gap: 30px;}
  .sns_link h3 { padding-top: 50px; text-align: center;}
  .sns_link h3 .img_c6 { right: auto; left: 46%; top: -25px;}
}

@media all and (max-width:600px) {
  .sns:after { font-size: 40px;}

  .sns_link ul { gap:10px;}
  .sns_link ul li a { width: 65px; height: 65px;}
  .sns_link ul li a i { font-size: 24px;}
  .sns_link ul li a i.img_dang { width: 24px; height: 24px;}

  .on_exhi { height: 880px;}
  .on_exhi:after { font-size: 50px; bottom: -30px;}
  .on_exhi .tit_box { flex-direction: column; align-items: flex-start;}
  .on_exhi .tit_box .on_exhi_btn { margin: 25px 0;}
  .on_exhi .page_box { right: 5%; top: 20px; display: none;}
  .on_exhi .wrap_box.fx > div.con1 { padding-top: 100px;}
  .on_exhi .wrap_box.fx > div.con2 img { zoom: 0.65;}
}

@media all and (max-width:480px) {
  #main { height: 220px;}
  #main .swiper-slide.bg1new .main_year { font-size: 22px;}
  #main .swiper-slide.bg1new .main_title { font-size: 26px; text-shadow: 1px 1px 0 rgba(0,0,0,.25);}
  #main .swiper-slide.bg1new .main_slogan { font-size: 13px; margin-top: 4px;}
  #main .swiper-slide.bg1new .main_txt_bot { bottom: 16px;}
  #main .swiper-slide.bg1new .main_date { font-size: 12px;}
  #main .swiper-slide.bg1new .main_place { font-size: 11px;}
  #main .swiper-slide.bg1new .main_dday { display: none;}
  .schedule { margin-top: 30px; }
  .schedule .left h3 { padding-left: 120px; font-size: 21px;}
  .schedule .left h3 p { font-size: 13px;}
  .schedule .left .img_l_sch1 { zoom: 0.8; top: 0;}
  .schedule .left > ul > li { gap: 0; flex-direction: column;}
  .schedule .left > ul > li span { font-size: 16px;}
  .schedule .left > ul > li p { font-size: 18px;}
  .schedule .right a { padding: 25px;}
  .schedule .right a p { font-size: 20px;}
  .schedule .right a .sch_icon { font-size: 84px; right: 2px; bottom: -10px;}
  .schedule .right a .naver_badge { top: 20px; right: 20px; width: 56px; height: 56px; font-size: 13px;}
  .schedule .right a.bg1 { background-color: #b4e3e7;}
  .schedule .right a.bg2 { background-color: #e5edab;}
  .schedule .right a.bg3 { background-color: #b2e6c7;}

  .sns:after { font-size: 30px;}
  .sns .img_c1 { display: none;}
  .sns .img_c5 { right: -10px; zoom:0.9}
  .sponsor {gap: 0;}
  .sponsor .slide_area { width: calc(100% - 160px);}
  .sponsor .slide_ctrl { flex-basis: 160px; }

  .on_exhi { height: 900px;}
  .on_exhi:after { font-size: 40px; bottom: -30px;}
  .on_exhi .tit_box.on_exhi_btn ul { gap: 15px;}
  .on_exhi .tit_box.on_exhi_btn li { font-size: 0.95em;}
}

@media all and (max-width:414px) {
  .sns_link ul { justify-content: flex-start; gap:5px;}
  .sns_link ul li a { width: 50px; height: 50px;}
  .sns_link ul li a i { font-size: 20px;}
  .sns_link ul li a i.img_dang { width: 20px; height: 20px;}

  .on_exhi:after { font-size: 35px; bottom: -25px;}
  .on_exhi .tit_box .on_exhi_btn li { font-size: 0.875em;}
  .on_exhi .wrap_box.fx > div.con2 img { zoom: 0.5;}
}