@charset "utf-8";

h3 {margin-bottom: 2.9rem; color: #222; font-size: 3.6rem; font-family: var(--font-elicedx);}
h3 strong {color: #20067B;}

#main-visual {position: relative; padding-top: 7.4rem; overflow: hidden;}
#main-visual::before {content:''; position: absolute; z-index: -1; top: 0; left: 50%; width: 192rem; transform: translateX(-50%); height: 50rem; background: url(../img/main/bg_main_visual01.jpg) no-repeat center/cover;;}
#main-visual .txtbox {position: relative; padding-right: 64rem;}

#main-visual .slogan {padding-top: 4rem; padding-left: 12rem; color: #2B324A; font-family: var(--font-estab); font-size: 3.5rem;}
#main-visual .slogan span {display: inline-block; font-size: 4.8rem; line-height: normal;}
#main-visual .slogan .txt01 {background: linear-gradient(90deg, #0091AA 7.08%, #003CAA 100%);  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#main-visual .slogan .txt02 {background: linear-gradient(90deg, #E56C01 7.08%, #EF3A03 100%);  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#main-visual .slogan .txt03 {color: #152A75;}

#main-visual .headman {position: absolute; z-index: 1; top: 0; right: 0; padding: 2.5rem 3.5rem 41rem 45.6rem; background: url(../img/main/pic_main_visual_headman02.png) no-repeat left 8rem top / 44.5rem;}
#main-visual .headman p {display: inline-block; font-size: 2.2rem; font-weight: 500; line-height: 1.44; background: linear-gradient(281deg, #06107B 30.1%, #1D4BBE 64.77%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--font-elicedx);}
#main-visual .headman p strong {display: block; font-size: 4.4rem;}
#main-visual .link-plan {display: flex; align-items: end; justify-content: space-between; margin-top: 8.4rem; border-radius: 10rem 10rem 10rem 2.8rem; background: linear-gradient(281deg, #06107B 30.1%, #1D4BBE 64.77%);}
#main-visual .link-plan .link-wrap ul {position: relative; display: flex; align-items: stretch; flex-wrap: wrap; width: 57.3rem;}
#main-visual .link-plan .link-wrap ul::before {content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translateX(-50%); width: 50rem; height: 1px; background: #000; opacity: 0.28;}
#main-visual .link-plan .link-wrap ul::after {content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translateY(-50%); width: 1px; height: 30rem; background: #000; opacity: 0.28;}
#main-visual .link-plan .link-wrap ul li {width: 50%;}
#main-visual .link-plan .link-wrap ul li a {display: block; text-align: center; color: #fff; font-family: var(--font-elicedx); padding: 12.5rem 0 5rem; background-repeat: no-repeat; font-weight: 400; background-position: top 5rem center;}
#main-visual .link-plan .link-wrap ul li a:hover,
#main-visual .link-plan .link-wrap ul li a:focus {text-decoration: underline; text-underline-position: under;}
#main-visual .link-plan .link-wrap ul li.sns a {background-image: url(../img/main/ico_main_visual_link01.svg);}
#main-visual .link-plan .link-wrap ul li.wish a {background-image: url(../img/main/ico_main_visual_link02.svg);}
#main-visual .link-plan .link-wrap ul li.pledge a {background-image: url(../img/main/ico_main_visual_link03.svg);}
#main-visual .link-plan .link-wrap ul li.media a {background-image: url(../img/main/ico_main_visual_link04.svg);}
#main-visual .link-plan .plan-wrap {position: relative; z-index: 2; display: flex; align-items: stretch; position: relative; flex-grow: 1; padding: 2.8rem 0 2.8rem 4rem; border-radius: 10rem 0 0 0; font-family: var(--font-elicedx); background: #fff;}
#main-visual .link-plan .plan-wrap .bar {position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 1px; background: #000;}
#main-visual .link-plan .plan-wrap .bar::before,
#main-visual .link-plan .plan-wrap .bar::after {content:''; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #000;}
#main-visual .link-plan .plan-wrap .bar::before {left: 0;}
#main-visual .link-plan .plan-wrap .bar::after {right: 0;}
#main-visual .link-plan .plan-wrap::before {content:''; position: absolute; z-index: 1; top: 0; right: 100%; width: 10.3rem; height: 100%; background: url(../img/main/pic_main_visual_plan01.svg) no-repeat right bottom;}
#main-visual .link-plan .plan-wrap .left {display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 1rem; width: 13.6rem; padding: 0.7rem 0;}
#main-visual .link-plan .plan-wrap .left p {font-size: 1.8rem; line-height: 1.1; font-weight: 500; color: #333;}
#main-visual .link-plan .plan-wrap .left strong {display: flex; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; font-size: 3rem; line-height: 1; color: #fff; border-radius: 5rem; background: #290673;}
#main-visual .link-plan .plan-wrap .left span {line-height: 1.1; font-size: 1.6rem; font-weight: 500; color: #777;}
#main-visual .link-plan .plan-wrap .right {text-align: center; position: relative; flex-grow: 1;}
#main-visual .link-plan .plan-wrap .right .tit {display: inline-block; text-align: center; margin-bottom: 1.2rem; font-size: 2.8rem; font-weight: 500; color: #222; padding-right: 4.5rem;}
#main-visual .link-plan .plan-wrap .right a {position: absolute; z-index: 1; top: 0.3rem; left: 50%; margin-left: 5.6rem; width: 3.5rem; height: 3.5rem; border-radius: 3rem; background: #f5f5f5 url(../img/main/ico_main_plus01.svg) no-repeat center;}
#main-visual .link-plan .plan-wrap .right .info {text-align: left; height: 9rem; overflow-y: auto;border-radius: 1.2rem; padding: 2rem 2.8rem; background: #F5F5F5}
#main-visual .link-plan .plan-wrap .right .info .name {font-size: 1.7rem; line-height: 1.1; color: #444;}
#main-visual .link-plan .plan-wrap .right .info .time {color: #666; line-height: 1.1; font-size: 1.5rem;}
#main-visual .link-plan .plan-wrap .right .info .time span {line-height: 1.1;}
#main-visual .link-plan .plan-wrap .right .info .time span::after {content: '|'; display: inline-block; color: #ddd; line-height: 1.1; margin: 0 0.4rem;}
#main-visual .link-plan .plan-wrap .right .info p + p {margin-top: 1.4rem;}

#main-photo {padding-top: 6rem;}
#main-photo > div {position: relative;}
#main-photo .board-con .photo-swiper-wrap .swiper-slide {display: flex; align-items: stretch; justify-content: space-between; gap: 4rem;}
#main-photo .board-con .photo-swiper-wrap .big {flex-shrink: 0; width: 57.3rem; background: #F8F8F8; border-radius: 2.5rem;}
#main-photo .board-con .photo-swiper-wrap .big a {display: block; width: 100%; height: 100%; border-radius: 2.5rem;}
#main-photo .board-con .photo-swiper-wrap .big .img {height: 38.2rem; border-radius: 2.5rem 2.5rem 0 0; overflow: hidden;}
#main-photo .board-con .photo-swiper-wrap .big .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
#main-photo .board-con .photo-swiper-wrap .big .txt {padding: 3.6rem 2.8rem; border-radius: 0 0 2.5rem 2.5rem;}
#main-photo .board-con .photo-swiper-wrap .big .txt p {font-size: 2rem; width: 100%; font-weight: 700; color: #222; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#main-photo .board-con .photo-swiper-wrap .big .txt span { color: var(--krds-light-color-text-subtle);}
#main-photo .board-con .photo-swiper-wrap .big a:hover .txt p,
#main-photo .board-con .photo-swiper-wrap .big a:focus .txt p {text-decoration: underline; text-underline-position: under;}
#main-photo .board-con .photo-swiper-wrap .big .txt span {display: block; margin-top: 1.2rem; font-size: 1.7rem;}
#main-photo .board-con .photo-swiper-wrap ul {flex-grow: 1; height: 52.2rem; overflow: hidden;}
#main-photo .board-con .photo-swiper-wrap ul li {width: 100%;}
#main-photo .board-con .photo-swiper-wrap ul li + li {margin-top: 2.1rem;}
#main-photo .board-con .photo-swiper-wrap ul li a {position: relative; display: flex; align-items: center; gap: 3.2rem; border-radius: 1.4rem; background: #F8F8F8; width: 100%; overflow: hidden;}
#main-photo .board-con .photo-swiper-wrap ul li a .img {flex-shrink: 0; width: 24rem; height: 16rem; border-radius: 1.4rem; overflow: hidden;}
#main-photo .board-con .photo-swiper-wrap ul li a .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
#main-photo .board-con .photo-swiper-wrap ul li a:hover .txt p,
#main-photo .board-con .photo-swiper-wrap ul li a:focus .txt p {text-decoration: underline; text-underline-position: under;}
#main-photo .board-con .photo-swiper-wrap ul li a:focus {outline: 0; box-shadow: none;}
#main-photo .board-con .photo-swiper-wrap ul li a::before {content: ''; position: absolute; z-index: 1; top: 0.1rem; left: 0.1rem; width: calc(100% - 0.2rem); height: calc(100% - 0.2rem); border: 0.2rem solid var(--krds-light-color-border-primary); border-radius: 1.4rem; opacity: 0;}
#main-photo .board-con .photo-swiper-wrap ul li a:focus::before {opacity: 1;}
#main-photo .board-con .photo-swiper-wrap ul li a .txt {flex-grow: 1; max-width: 100%; min-width: 0;}
#main-photo .board-con .photo-swiper-wrap ul li a .txt p {font-size: 2rem; font-weight: 700; color: #222; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#main-photo .board-con .photo-swiper-wrap ul li a .txt span {display: block; margin-top: 1rem; color: var(--krds-light-color-text-subtle);}

#main-now {padding-top: 6rem; padding-bottom: 6rem;}
#main-now > div {position: relative;}
#main-now .now-swiper {overflow: hidden}
#main-now .now-swiper ul li {border-radius: 1.6rem;}
#main-now .now-swiper ul li a {display: block; width: 100%; height: 100%; border-radius: 1.6rem; overflow: hidden;}
#main-now .now-swiper ul li:focus {outline: 0; box-shadow: none;}
#main-now .now-swiper ul li a:focus {outline: 0; box-shadow: none;}
#main-now .now-swiper ul li a::before {content: ''; position: absolute; z-index: 1; top: 0.1rem; left: 0.1rem; width: calc(100% - 0.2rem); height: calc(100% - 0.2rem); border: 0.2rem solid var(--krds-light-color-border-primary); border-radius: 1.4rem; opacity: 0;}
#main-now .now-swiper ul li a:focus::before {opacity: 1;}

#main-now .now-swiper ul li a .img {height: 28.4rem; }
#main-now .now-swiper ul li a .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
#main-now .now-swiper ul li a .txt {padding: 2.8rem; background: #F8F8F8;}
#main-now .now-swiper ul li a:hover .txt p,
#main-now .now-swiper ul li a:focus .txt p {text-decoration: underline; text-underline-position: under;}
#main-now .now-swiper ul li a .txt p {font-size: 2rem; color: #222; font-weight: 700; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#main-now .now-swiper ul li a .txt span {display: block; margin-top: 1.2rem; color: var(--krds-light-color-text-subtle);}


/********************************************************************************** 반응형*********************************************************************/

@media (max-width: 1400px) {
	#main-visual .headman {padding-left: 43.6rem;}
}
@media (max-width: 1300px) {
	#main-visual .headman {padding-left: 28.6rem; background-position: left 1rem bottom -1rem; background-size: 42.6rem;}
}

@media (max-width: 1199px) {
	#main-visual .headman {background-position: right -1rem bottom 3rem; background-size: 35.6rem;}
	#main-visual .slogan {padding-left: 0;}

	#main-photo .board-con .photo-swiper-wrap .big {width: 50%;}
}

@media (max-width: 1025px) {
	#main-visual::before {height: 47.1rem;}
	#main-visual .headman {padding-top: 1rem;}
	#main-visual .txtbox {padding-right: 40rem;}
	#main-visual .link-plan .link-wrap ul {width: 35rem;}
	#main-visual .link-plan .link-wrap ul::before {width: 90%;}
	#main-visual .link-plan .link-wrap ul::after {height: 90%;}
	#main-visual .link-plan .plan-wrap .left {width: 9.6rem;}

	#main-photo .board-con .photo-swiper-wrap ul li a .img {width: 44%;}
}

@media (max-width: 767px) {
	#main-visual {padding-top: 0; background: url(../img/main/bg_main_visual01_m.jpg) no-repeat top center/100%;}
	#main-visual::before {display: none;}
	#main-visual > div {padding-left: 0; padding-right: 0;}
	#main-visual .txtbox {padding-right: 0;}
	#main-visual .txtbox::after {content: ''; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 20rem; background: linear-gradient(281deg, #06107B 30.1%, #1D4BBE 64.77%);}
	#main-visual .slogan {text-align: center;}
	#main-visual .headman {position: relative; z-index: 2; margin-top: 0; width: 100%; padding: 8rem 3.7rem 26.4rem 0; text-align: right; background-position: top left -10.4rem; background-size: 59.6rem;}
	#main-visual .headman p {text-align: left;}
	#main-visual .link-plan {margin: 0; flex-direction: column; align-items: flex-start; border-radius: 0;}
	#main-visual .link-plan .link-wrap {order: 1; width: 100%;}
	#main-visual .link-plan .link-wrap ul {width: 100%;}
	#main-visual .link-plan .link-wrap ul::before {width: 100%;}
	#main-visual .link-plan .link-wrap ul::after {height: 75%;}
	#main-visual .link-plan .link-wrap ul li a {line-height: 1.2; padding-top: 15.5rem; padding-bottom: 6.3rem; background-position: top 6.3rem center;}
	#main-visual .link-plan .plan-wrap {order: 0; width: 100%; border-radius: 0; padding: 3.5rem 1.5rem;}
	#main-visual .link-plan .plan-wrap::before {display: none;}
	#main-visual .link-plan .plan-wrap .bar {display: none;}
	#main-visual .link-plan .plan-wrap .left {width: 33.6%; gap: 1.2rem; padding: 0; max-width: 16.7rem;}
	#main-visual .link-plan .plan-wrap .left strong {width: 8.8rem; height: 8.8rem;}
	#main-visual .link-plan .plan-wrap .right .tit {display: block; margin-bottom: 1.5rem; text-align: right; padding-right: 5.6rem;}
	#main-visual .link-plan .plan-wrap .right .info {padding: 1.6rem 3.5rem 1rem;}
	#main-visual .link-plan .plan-wrap .right .info .time {margin-top: 1.7rem;}
	#main-visual .link-plan .plan-wrap .right a {margin-left: 0; left: auto; right: 0; width: 4.3rem; height: 4.3rem;}

	h3 {margin-bottom: 2.5rem;}

	#main-photo {padding-top: 3.6rem;}
	#main-photo .board-con .photo-swiper-wrap .big {width: 100%;}
	#main-photo .board-con .photo-swiper-wrap .big .txt {padding: 4.5rem 3.5rem;}
	#main-photo .board-con .photo-swiper-wrap .big .txt span {margin-top: 1.5rem;}
	#main-photo .board-con .photo-swiper-wrap .swiper-slide {flex-direction: column; align-items: flex-start; gap: 1.5rem;}
	#main-photo .board-con .photo-swiper-wrap .swiper-slide .big .img {height: 50.4rem;}
	#main-photo .board-con .photo-swiper-wrap .swiper-slide ul {width: 100%;}
	#main-photo .board-con .photo-swiper-wrap ul {height: 62rem;}
	#main-photo .board-con .photo-swiper-wrap ul li + li {margin-top: 1.5rem;}
	#main-photo .board-con .photo-swiper-wrap ul li a {border-radius: 2rem; gap: 4rem; padding-right: 2rem;}
	#main-photo .board-con .photo-swiper-wrap ul li a .img {width: 30rem; height: 19.6rem; border-radius: 2rem;}
	#main-photo .board-con .photo-swiper-wrap ul li a .txt span {margin-top: 1.2rem;}

	#main-now {padding-top: 3.6rem; padding-bottom: 3.6rem;}
	#main-now .now-swiper {margin-right: -2rem; width: calc(100% + 2rem);}
	#main-now .now-swiper ul li a .img {height: 34.9rem;}
	#main-now .now-swiper ul li a .txt {padding: 3.5rem;}
	#main-now .now-swiper ul li a .txt span {margin-top: 1.5rem;}

}

@media (max-width: 640px) {
	#main-visual {background-size: 80rem;}
}

@media (max-width: 600px) {
	#main-visual .headman {margin-top: 1.2rem; text-align: center; padding-top: 0; padding-right: 0; padding-bottom: 33rem; background-position: top 9.6rem center; background-size: 56rem;}
	#main-visual .headman p {text-align: center;}
	#main-visual .txtbox::after {height: 13.5rem;}
}

@media (max-width: 480px) {
	#main-visual {padding-top: 3.9rem; background-image: url(../img/main/bg_main_visual02_m.jpg); background-size: 60rem;}
	#main-visual .headman {position: relative; z-index: 2; margin-top: 1.2rem; width: 100%; padding: 0 0 34.4rem; text-align: center; background-position: top 10rem center; background-size: 58rem;}
	#main-visual .headman p {text-align: center;}

	h3 {margin-bottom: 6.8rem; text-align: center;}

	#main-photo .board-con .photo-swiper-wrap .big .txt {padding: 2.5rem 3.5rem;}
	#main-photo .board-con .photo-swiper-wrap .big .txt span {margin-top: 0.5rem;}
	#main-photo .board-con .photo-swiper-wrap .swiper-slide .big .img {height: 33rem;}
	#main-photo .board-con .photo-swiper-wrap .swiper-slide ul {width: 100%;}
	#main-photo .board-con .photo-swiper-wrap ul {height: 35.5rem;}
	#main-photo .board-con .photo-swiper-wrap ul li a {gap: 2.5rem;}
	#main-photo .board-con .photo-swiper-wrap ul li a .img {width: 18.1rem; height: 10.9rem;}
	#main-photo .board-con .photo-swiper-wrap ul li a .txt span {margin-top: 0.5rem;}

	#main-now .now-swiper ul li a .txt {padding: 2.5rem 3.5rem;}
	#main-now .now-swiper ul li a .txt span {margin-top: 0.5rem;}

}


@media (max-width: 376px) {
	#main-visual {background-position: left top; background-size: 53.5rem;}
	#main-visual .link-plan .plan-wrap .right .info {padding: 1.6rem 2rem 1rem;}
	#main-visual .link-plan .plan-wrap .right .info .time {margin-top: 1.7rem;}
}