@charset "utf-8";

/* main_visual */
.main_visual {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1;}
.main_visual .item {background-image:url(../images/main_vis01.jpg); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}

.main_container {padding:4.375rem 0; position:relative;}

.title_wrap {font-size:2.25rem; line-height:1.3; text-align:center;}
.title_wrap .title {font-family:'SEBANG_Gothic_Bold', serif;}
.title_wrap .title strong {display:block; font-size:3rem; color:#005128;}
.title_wrap .title .text i {animation: txtfade .6s ease infinite alternate; opacity:0.4;}
.title_wrap .title::after {content:''; display:block; background:#232323; width:27px; height:1px; margin:0.625rem auto;}
.title_wrap .info {font-size:1.5rem; font-weight:600;}
.d_day {display:inline-block; background:linear-gradient(to right, #37ac67, #028bc4); border-radius:10px; color:#fff; font-size:1.875rem; font-weight:700; padding:4px 10px; margin-top:0.938rem;}

.title_wrap .title .text i:nth-child(2) {animation-delay:.1s;}
.title_wrap .title .text i:nth-child(3) {animation-delay:.2s;}
.title_wrap .title .text i:nth-child(4) {animation-delay:.3s;}

@keyframes txtfade {
	100% {opacity:1;}
}

.date_info {margin-top:2.25rem;}
.date_info .title {display:flex; justify-content:center; align-items:center; background:linear-gradient(to right, #37ac67, #028bc4); border-radius:50rem; font-size:1.25rem; font-weight:700; color:#fff; height:48px; max-width:210px; text-align:center; position:relative; margin-left:38px;}
.date_info .cont {background:#333; border-radius:var(--bnround); padding:2.5rem 2rem 2rem; margin-top:-24px;}
.date_info .cont .item {color:#fff;}
.date_info .cont .item span {display:block;}
.date_info .cont .item strong {color:#68f099; font-size:1.5rem;}

.conwrap {margin-top:2.25rem;}
.intro_bn {background:#55af81 url(../images/main_introbox_bg.jpg) 50% 50% no-repeat; background-size:cover; border-radius:var(--bnround); color:#fff; display:flex; align-items:center; justify-content:center; padding:1.875rem; text-align:center;}
.intro_bn .desc {margin-top:10px; font-size:0.875rem; line-height:1.5; max-height:4.5em; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;}

.more {border:1px solid rgba(255,255,255,0.8); display:inline-flex; color:#fff; margin-top:1.25rem;}
.more .text {padding:10px 15px}
.more .arr {border-left:1px solid rgba(255,255,255,0.8); display:flex; align-items:center; width:45px; overflow:hidden; position:relative;}
.more .arr i {display:block; width:90px; position:absolute; right:0; display:flex; align-items:center; transition:all 0.4s;}
.more .arr i::before, .more .arr i::after {content:'\eac9'; font-family: 'Material Icons Outlined'; font-size:18px; display:block; width:45px; height:100%;}
.more:hover .arr i {animation:arrAni 0.5s 0.1s both; animation-iteration-count:infinite;}

@keyframes arrAni{
  0% {right:0}
  100% {right:-100%}  
}

/* notice */
.notice {background:#fff; border-radius:var(--bnround); height:70px; display:flex; padding:10px 25px;}
.notice h3 {font-size:1.25rem; color:var(--color); display:flex; align-items:center; padding-right:15px; margin-right:15px; position:relative;}
.notice h3::after {content:''; background:#ccdcd4; width:1px; height:25px; position:absolute; right:0;}
.notice .slider {overflow:hidden; flex:1; padding-right:50px;}
.notice .swiper-slide a {display:flex; align-items:center; height:100%;}
.controlbox .slide_button {display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #aaa; width:24px; height:24px; position:relative; transition: .3s;}
.controlbox .slide_button + button {margin-top:-1px;}
.controlbox .slide_button::after {content:'\e316'; font-family: 'Material Icons Outlined'; font-size:24px;}
.controlbox .slide_prev::after {transform: rotate(180deg);}
.controlbox .slide_button:hover {background:#aaa; color:#fff;}

/* link_bn */
.link_bn {display:flex; margin:1% -1% -1%;}
.link_bn > li {flex:1; margin:1%;}
.link_bn > li .wrap {background:linear-gradient(to bottom right, #37ac67, #028bc4); border-radius:var(--bnround); overflow:hidden; text-align:center;}
.link_bn > li .wrap a .icon {display:block; background:rgba(255,255,255,0.2); padding:15px 0; transition: .4s;}
.link_bn > li .wrap a:hover .icon {background:rgba(255,255,255,0);}
.link_bn > li .wrap a .icon i {display:flex; align-items: center; justify-content: center; width:35%; max-width:80px; margin:0 auto; position:relative; transition: .4s; transform: translateX(0);}
.link_bn > li .wrap a:hover .icon i {transform: translate(0, 7px);}
.link_bn > li .wrap a .icon i::before {content:''; display:block; padding-bottom:100%;}
.link_bn > li .wrap a .icon i::after {content:''; display:flex; align-items:center; justify-content:center; background-position:50% 50%; background-repeat:no-repeat; background-size:contain; position:absolute; width:100%; height:105%;}
.link_bn > li.mn01 .wrap a .icon i::after {background-image: url(../images/linkbn_icon01.png);}
.link_bn > li.mn02 .wrap a .icon i::after {background-image: url(../images/linkbn_icon02.png);}
.link_bn > li.mn03 .wrap a .icon i::after {background-image: url(../images/linkbn_icon03.png);}
.link_bn > li .wrap strong {display:block; color:#fff; padding:10px; height:70px; display:flex; align-items: center; justify-content: center;}

.foot_bn {position:relative; background:#fff; padding:30px 0;}
/* host */
.host_bn > .innerwrap {max-width:1200px; margin:0 auto;}
.host_bn h3, .foot_bn h3 {color:var(--color); font-size:1.375rem; display:flex; align-items:center; justify-content:center; margin-bottom:15px; text-align:center;}
.host_bn .slider {overflow:hidden;}
.host_bn .swiper-slide span {border:1px solid #ddd; display:flex; justify-content:center; align-items:center; position:relative; height:45px;}
.host_bn .swiper-slide span img {display:block; max-width:calc(100% - 20px); max-height:calc(100% - 10px); margin:0 auto; object-fit:contain;}

/* collab */
.collab .slider {overflow:hidden; position:relative; padding:0 35px;}
.collab .list {overflow:hidden;}
.collab .list .swiper-slide span {display:flex; justify-content:center; align-items:center; position:relative; height:45px;}
.collab .list .swiper-slide span img {display:block; max-width:calc(100% - 20px); max-height:calc(100% - 10px); margin:0 auto; object-fit:contain;}
.collab .swiper-button-next:after, .collab .swiper-button-prev:after {color:#333; font-size:20px;}

/* main_layer_popup */
.main_layer_popup {position:absolute; background:#fff; box-shadow:rgba(134, 134, 134, 0.1) 3px 4px 5px; z-index:9;}
.main_layer_popup .popup_cnt {max-height:500px; overflow:auto; padding:10px;}
.popup_func {background:#232323; color:#fff; font-weight:bold; display:flex; justify-content:space-between; align-items:center; padding:5px 10px; min-width:250px;}
.popup_func .close {background:none; font-size:13px; font-weight:bold; color:#fff;}
.today_close.chkbox label {color:#fff; font-size:13px; padding-left:23px;}
.today_close.chkbox i {border-color:transparent; width:18px; height:18px;}
.today_close.chkbox input:checked+i {border-color:transparent;}

/* main_slide_popup */
.popup_slide {position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.7); z-index:9;}
.popup_slide .wrap { width:90%; max-width:500px; box-shadow:rgba(134, 134, 134, 0.1) 3px 4px 5px; border-radius:1rem; position:absolute; z-index:10; overflow:hidden;}
.popup_slide .popup_cnt {background:#fff; position:relative;}
.popup_slide .popup_cnt .pager {position:absolute; top:10px; left:auto; right:10px; bottom:auto; width:45px; background:rgba(0,0,0,0.45); border-radius:50rem; color:#fff; font-size:12px; padding:2px 0; text-align:center; z-index:1;}
.popup_slide .popup_func {background:#fff; border-top:1px solid #ccc; display:flex; padding:0;}
.popup_slide .popup_func button {flex:1; background:#fff; color:#333; font-size:0.875rem; font-weight:bold; padding:17px 5px;}
.popup_slide .popup_func button + button {border-left:1px solid #ccc;}
.popup_slide .slide_button {background:rgba(0,0,0,0.5); width:22px; height:36px; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; margin-top:-18px; z-index:1;}
.popup_slide .slide_button::after {content:'\e5e0'; font-family: 'Material Icons Outlined'; color:#fff; font-size:18px;}
.popup_slide .slide_prev {left:0;}
.popup_slide .slide_next {right:0;}
.popup_slide .slide_next::after {transform: rotate(180deg);}
.popup_slide .swiper-button-disabled {opacity:0.3;}

/* main_popup_notice */
.popup_notice {box-shadow:0px 4px 12px rgba(0,0,0,0.07); border-radius:12px; position:absolute; top:100px; left:0; width:100%; max-width:450px; overflow:hidden; z-index:9;}
.popup_notice h3 {background:#454545; border-bottom:1px solid #e5e5e5; color:#fff; padding:10px 10px;}
.popup_notice .popup_cnt {background:#fff; padding:20px; max-height:320px; overflow:auto;}
.popup_notice .list > li + li {border-top:1px solid #eee;}
.popup_notice .list a {display:flex; align-items:center; padding:7px;}
.popup_notice .list a .date {display:flex; justify-content:center; align-items:center; flex-direction:column; width:60px; height:50px; background:#ffc240; border-radius:5px; color:#fff; font-size:13px; font-weight:500; font-family: "Roboto", sans-serif; line-height:1.3; padding:3px; margin-right:10px; position:relative; text-align:center;}
.popup_notice .list a .date::before {content:''; background:#fff; width:9px; height:9px; position:absolute; bottom:0; right:0;}
.popup_notice .list a .date::after {content:''; display:block; position:absolute; right:4px; bottom:0; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:7px solid #d1a649; transform: rotate(45deg);}
.popup_notice .list a .date strong {font-size:15px;}
.popup_notice .list a .title {width:calc(100% - 70px);}
.popup_notice .list a .title strong {display:block; color:#2d2d2d; font-size:0.938rem; font-weight:600; max-width:100%; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.popup_notice .popup_func {background:#f7f7f7; border-top:1px solid #e5e5e5; color:#333;}
.popup_notice .today_close.chkbox i {background-color:#eee;}
.popup_notice .today_close.chkbox label, .popup_notice .popup_func .close {color:#333;}

@media (min-width: 769px) and (max-width: 1024px) {
.host_bn .slider .swiper-slide, .collab .list .swiper-slide {width: calc(25% - 10px);}
}


@media all and (min-width:1025px) {
.conwrap {display:grid; grid-template-columns: 40% 60%;}
.intro_bn {grid-row:1 / 3; margin-right:2.25rem;}

.host_bn .slider .swiper-slide, .collab .list .swiper-slide {width: calc(20% - 10px);}

/* main_layer_popup */
.popup_wrap {position:absolute; top:100px; left:40px; z-index:9;}
.main_layer_popup {display:inline-block; position:relative; top:0 !important; left:0 !important; max-width:450px; margin:3px; vertical-align:top;}
}

@media all and (min-width:769px) {
.date_info .cont {display:flex;}
.date_info .cont .item {flex:1; padding:0 10px;}
.date_info .cont .item + .item {border-left:1px solid rgba(255,255,255,0.15); padding-left:3rem;}

/* host */
.foot_bn > .innerwrap > div {display:flex;}
.host_bn .slider .swiper-wrapper,
.collab .list .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.host_bn .slider .swiper-slide,
.collab .list .swiper-slide {
	display:flex; align-items:center; justify-content:center; height:55px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; padding:15px; transition:all 0.3s ease;
}
.host_bn h3, .foot_bn h3 {width:170px; justify-content:flex-start; align-items:flex-start; padding-top:10px; margin-bottom:0;}

.host_bn .slider {flex:1;}
.host_bn .swiper-slide span {border:0; height:38px;}
.host_bn .swiper-slide span img {max-width:100%; max-height:100%;}

/* collab */
.collab {border-top:1px solid #eaeaea; margin-top:25px; padding-top:25px;}
.collab > div {flex:1;}
.collab .list .swiper-slide span {height:54px; min-width:70px;}
.collab .slider {padding:0;}
.collab .swiper-button-next, .collab .swiper-button-prev {display:none !important;}
}

@media screen and (max-width:1024px) {
.conwrap > div + div {margin-top:2.25rem;}

/* link_bn */
.link_bn {margin-top:1.25rem;}

/* layerPopup */
.main_layer_popup {max-width:600px; top:53px !important; left:10px !important; right:10px; margin:10px 0;}
}

@media screen and (max-width:768px) {
.title_wrap {font-size:1.625rem;}
.title_wrap .title strong {font-size:2.25rem;}
.title_wrap .info {font-size:1.125rem;}

.date_info {margin-top:3rem;}
.date_info .title {height:40px; max-width:160px; font-size:1.125rem;}
.date_info .cont {margin-top:-20px; padding:30px 20px 20px;}
.date_info .cont .item {padding:10px;}
.date_info .cont .item + .item {border-top:1px solid rgba(255,255,255,0.15);}
.date_info .cont .item strong {font-size:1.25rem;}
.d_day {font-size:1.625rem;}

.foot_bn > .innerwrap {max-width:600px;}
.foot_bn > .innerwrap > div + div {margin-top:2.5rem;}
}

@media screen and (max-width:480px) {
/* link_bn */
.link_bn {flex-wrap:wrap;}
.link_bn > li {width:100%; flex:none; margin:0;}
.link_bn > li + li {margin-top:0.625rem;}
.link_bn > li a {display:flex; align-items:center;}
.link_bn > li .wrap a .icon {width:90px;}
.link_bn > li .wrap a .icon i {width:50%;}
}