@charset "utf-8";

#container {font-family: var(--font-suite);}

#contents {overflow-x: hidden;}
#contents a:active,
#contents a:focus,
#contents a:hover,
#contents button:active,
#contents button:focus,
#contents button:hover{text-decoration: underline; text-underline-position: under;}

.main-visual {position: relative;}
.main-visual::before {content:''; position: absolute; z-index: -1; left: 50%; margin-left: -118.1rem;; top: 0; width: 186.4rem; height: calc(100% + 10rem); background: url(../img/bg_main_visual01.png) no-repeat left 0 top -58.5rem /100%;}
.main-visual .top {position: relative; }
.main-visual .top::before {content:''; position: absolute; z-index: 1; top: 0; right: calc(50% - 5rem); width: calc(50% + 5rem); height: 100%;border-radius: 0 50rem 50rem 0; background: url(../img/bg_main_visual_deco01.svg) , linear-gradient(137deg, #547CDD 1.97%, #31419C 98.03%) no-repeat top center;}
.main-visual .top > div {position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between;}
.main-visual .title {width: calc(50% + 5rem); padding-top: 8rem; color: #fff; background: url(../img/pic_main_visual_deco01.png) no-repeat bottom right 18.7rem/60rem;border-radius: 0 50rem 50rem 0; }
.main-visual .title h3 {display: block; margin-bottom: 1rem; font-family: var(--font-jalnan); font-size: 5rem; font-weight: 300; line-height: 1.2;}
.main-visual .title p {font-size: 2.4rem;}
.main-visual .go-link {display: flex; align-items: stretch; gap: 1.5rem; width: 62rem; flex-wrap: wrap; padding: 8rem 0 8.1rem;}
.main-visual .go-link li {width: calc((100% - 3rem)/3); height: 18.5rem; background-repeat: no-repeat; background-position: bottom right; background-size: cover; border-radius: 1rem;}
.main-visual .go-link li.location {background-image: url(../img/bg_main_golink01.jpg);}
.main-visual .go-link li.info {background-image: url(../img/bg_main_golink02.jpg);}
.main-visual .go-link li.counsel {background-image: url(../img/bg_main_golink03.jpg);}
.main-visual .go-link li.certificate {background-image: url(../img/bg_main_golink04.jpg);}
.main-visual .go-link li.call {background-image: url(../img/bg_main_golink05.jpg);}
.main-visual .go-link li a {display: block; font-weight: 700; width: 100%; height: 100%; font-size: 1.9rem; padding-top: 3rem; padding-left: 3rem;}
.main-visual .go-link li.location a,
.main-visual .go-link li.info a {color: #fff;}
.main-visual .go-link li.two {flex: 2; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 1rem; padding-left: 3rem;}
.main-visual .go-link li.two dl dt {font-size: 1.9rem; background-repeat: no-repeat; background-position: left center; padding-left: 2.5rem;}
.main-visual .go-link li.two dl.call dt {background-image: url(../img/ico_main_golink_call01.svg);}
.main-visual .go-link li.two dl.time dt {background-image: url(../img/ico_main_golink_time01.svg);}
.main-visual .go-link li.two dl dd {font-size: 2.2rem; font-weight: 700;}
.main-visual .btm {padding: 8rem 0;}
.main-visual .btm ul {display: flex; align-items: center; justify-content: center; gap: 3rem;}
.main-visual .btm ul li {width: 13.7rem;}
.main-visual .btm ul li a {display: block; height: 100%; font-size: 1.9rem; padding-top: 10rem; text-align: center; background-repeat: no-repeat; background-position: top center;}
.main-visual .btm ul li.greeting a {background-image: url(../img/ico_main_btm_greeting01.svg);}
.main-visual .btm ul li.status a {background-image: url(../img/ico_main_btm_status01.svg);}
.main-visual .btm ul li.civil a {background-image: url(../img/ico_main_btm_civil01.svg);}
.main-visual .btm ul li.seal a {background-image: url(../img/ico_main_btm_seal01.svg);}
.main-visual .btm ul li.family a {background-image: url(../img/ico_main_btm_family01.svg);}
.main-visual .btm ul li.resident a {background-image: url(../img/ico_main_btm_resident01.svg);}
.main-visual .btm ul li.defense a {background-image: url(../img/ico_main_btm_defense01.svg);}
.main-visual .btm ul li.waste a {background-image: url(../img/ico_main_btm_waste01.svg);}

#main-news {position: relative; padding-top: 15rem; padding-bottom: 15rem;}
#main-news::before {content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: calc(100% - 10rem); height: 100%; background: #F2F8FD url(../img/bg_main_news01.svg) no-repeat left center; border-radius: 50rem 0 0 50rem;}
#main-news > div {position: relative;}
#main-news .news-head {display: flex; align-items: center; gap: 3rem; margin-bottom: 3rem;}
#main-news .news-head h3 {font-size: 4rem;}
#main-news .news-head h3 strong {color: #2C8DCB;}
#main-news .news-head .tablist {display: flex; align-items: center; background: rgba(255,255,2558,0.6); border-radius: 50rem;}
#main-news .news-head .tablist button {font-size: 1.9rem; height: 4.9rem; padding: 0 3rem; border-radius: 50rem;}
#main-news .news-head .tablist button.select {background: #2C8DCB; color: #fff; font-weight: 700;}
#main-news .news-list {display: flex; align-items: stretch; gap: 2.4rem;}
#main-news .news-list li {flex: 1; min-width: 0; background: #FFF; border-radius: 1rem;}
#main-news .news-list li:has(a:focus),
#main-news .news-list li:hover {box-shadow: 0 0.4rem 3rem 0 rgba(25, 90, 139, 0.10);}
#main-news .news-list li a {display: block; width: 100%; height: 100%; border-radius: 1rem; padding: 5rem 3rem;}
#main-news .news-list li a strong {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 2.4rem; overflow: hidden;}
#main-news .news-list li a p {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 2.4rem 0; font-size: 1.6rem; height: 7.4rem; overflow: hidden;}
#main-news .news-list li a span {display: block; font-size: 1.5rem; padding-left: 2.6rem; background: url(../img/ico_news_date01.svg) no-repeat left center;}
#main-news .more-btn {position: absolute; z-index: 1; top: 0.5rem; right: var(--krds-contents-padding-x); display: inline-block; text-indent: -999.9rem; width: 5rem; height: 5rem; background: #2C8DCB url(../img/ico_more_btn01.svg) no-repeat center/cover; border-radius: 5rem;}

#program {padding: 8rem 0;}
#program > div {position: relative;}
#program h3 {font-size: 4rem;}
#program h3 strong {color: #4666D2;}
#program .program-swiper {padding-top: 5.2rem; overflow-x: hidden;}
#program .program-swiper .swiper-slide {position: relative; border: 0.1rem solid var(--krds-light-color-border-gray-light); border-radius: 1rem;}
#program .program-swiper .swiper-slide::after {opacity: 0; content:''; position: absolute; z-index: 1; bottom: 0; right: 0; width: 5.4rem; height: 4.4rem; background: url(../img/ico_prgoram_swiper_link01.svg) no-repeat bottom right; transition: all .3s ease;}
#program .program-swiper .swiper-slide a {position: relative; display: block; width: 100%; height: 100%; padding: 5rem 3rem 4.8rem; border-radius: 1rem;}
#program .program-swiper .swiper-slide a span {position: absolute; z-index: 1; top: -2.2rem; left: 2rem; color: #fff; font-size: 1.5rem; padding: 0.5rem 3rem; border-radius: 0.5rem; background: #547CDD; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.10);}
#program .program-swiper .swiper-slide a span::before {content:''; position: absolute; z-index: 1; bottom: -0.9rem; left: 50%; transform: translateX(-50%); width: 1.7rem; height: 1.7rem; background: url(../img/ico_program_ing01.svg) no-repeat center;}
#program .program-swiper .swiper-slide a strong {display: block; font-size: 2.4rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#program .program-swiper .swiper-slide a div {margin-top: 2.4rem;}
#program .program-swiper .swiper-slide a div dl {display: flex; align-items: center; gap: 0.6rem;}
#program .program-swiper .swiper-slide a div dl + dl {margin-top: 1.2rem;}
#program .program-swiper .swiper-slide a div dl dt,
#program .program-swiper .swiper-slide a div dl dd {line-height: 1.4;}
#program .program-swiper .swiper-slide a div dl dt {padding-left: 2.2rem; background: url(../img/ico_main_program_date01.svg) no-repeat left center;}

#program .program-swiper .swiper-slide a:hover,
#program .program-swiper .swiper-slide a:focus {box-shadow: inset 0 0 0 0.2rem #547CDD}
#program .program-swiper .swiper-slide:has(a:hover)::after,
#program .program-swiper .swiper-slide:has(a:focus)::after {opacity: 1;}
#program .pg-control {display: flex; align-items: center; gap: 0.5rem; position: absolute; z-index: 1; top: 0.5rem; right: var(--krds-contents-padding-x);}
#program .pg-control > * {width: 5rem; height: 5rem; border-radius: 5rem;}
#program .pg-control > button {position: relative; border: 0.1rem solid var(--krds-light-color-border-gray-light);}
#program .pg-control > button::before {content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; mask-repeat: no-repeat; mask-position: center; background: #6D7882;}
#program .pg-control > .swiper-button-disabled {cursor: default;}
#program .pg-control > .swiper-button-disabled::before {background: var(--krds-light-color-border-disabled);}
#program .pg-control > .prev-btn::before {mask-image: url(../img/ico_swiper_arrow01.svg);}
#program .pg-control > .next-btn::before {mask-image: url(../img/ico_swiper_arrow02.svg);}
#program .pg-control .more-btn {text-indent: -999.9rem; background: #2C8DCB url(../img/ico_more_btn01.svg) no-repeat center/cover;}

/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1500px) {
	.main-visual .title {width: 50rem; background-position: left bottom; border-radius: 0 53rem 53rem 0;}
	.main-visual .top::before {width: 52.4rem; right: auto; left: 0;}
}

@media (max-width: 1200px) {
	.main-visual .title {width: 40rem; background-size: 90%}
	.main-visual .top::before {width: 42.4rem; right: auto; left: 0;}
	.main-visual .go-link {width: 55rem;}

	.main-visual .btm ul {flex-wrap: wrap;}
}

@media (max-width: 1023px) {
	.main-visual .top > div {flex-direction: column; align-items: center; padding-left: 0; padding-right: 0;}
	.main-visual .top::before {display: none;}
	.main-visual .top .title {text-align: center; width: 100%; padding-top: 5rem; padding-bottom: 50rem; background: url(../img/bg_main_visual_m.jpg) no-repeat center/cover; border-radius: 0;}
	.main-visual .go-link {width: 100%; padding: 3rem 2.4rem;}

	#main-news {background: #F2F8FD;}
	#main-news .news-list {flex-wrap: wrap;}
	#main-news::before {display: none;}
	#main-news .news-list li {flex: none; width: calc(50% - 1.2rem);}
}

@media (max-width: 767px) {
	.main-visual::before {display: none;}
	.main-visual .top .title {padding-top: 6.2rem; padding-bottom: 21.5rem;}
	.main-visual .title h3 {display: inline-block; text-align: left; line-height: 1.12;}
	.main-visual .go-link {gap: 1.2rem;}
	.main-visual .go-link li {width: calc(50% - 0.6rem); height: 14.7rem; background-size: cover;}
	.main-visual .go-link li a {padding: 2.5rem 0 0 2.5rem;}
	.main-visual .go-link li.location {background-image: url(../img/bg_main_golink01_m.jpg);}
	.main-visual .go-link li.info {background-image: url(../img/bg_main_golink02_m.jpg);}
	.main-visual .go-link li.counsel {background-image: url(../img/bg_main_golink03_m.jpg);}
	.main-visual .go-link li.certificate {background-image: url(../img/bg_main_golink04_m.jpg);}
	.main-visual .go-link li.call {height: 19.8rem; background-image: url(../img/bg_main_golink05_m.jpg);}
	.main-visual .go-link li.two dl dt {padding-left: 2.8rem; background-size: 2.1rem; background-position: top 0.3rem left;}

	.main-visual .btm {padding-top: 0; padding-bottom: 0;}
	.main-visual .btm ul {gap: 1.2rem; padding-left: 4.7rem; padding-right: 4.7rem; padding-bottom: 3.7rem;}
	.main-visual .btm ul li {width: calc(50% - 0.6rem);}

	#main-news {padding-top: 6.2rem; padding-bottom: 6.2rem;}
	#main-news .news-head {flex-direction: column; align-items: flex-start; margin-bottom: 1.2rem;}
	#main-news .news-head .tablist {width: 100%;}
	#main-news .news-head .tablist button {width: 50%; padding: 0; text-align: center; height: 5.5rem;}
	#main-news .news-head .tablist button.select {width: calc(50% + 1.9rem);}
	#main-news .news-list {flex-direction: column;}
	#main-news .news-list li:has(a:focus),
	#main-news .news-list li:hover {box-shadow: 0 0.5rem 3.7rem 0 rgba(25, 90, 139, 0.10);}
	#main-news .news-list li {width: 100%;}
	#main-news .news-list li a {padding: 3.8rem 2.4rem;}
	#main-news .news-list li a p {height: 8.6rem;}
	#main-news .news-list li a span {padding-left: 3.2rem; background-position: top 0.1rem left;}
	#main-news .more-btn {top: 1.1rem; width: 3.7rem; height: 3.7rem;}

	#program {padding: 6.1rem 0;}
	#program > div {display: flex; flex-direction: column; align-items: center; padding-left: 3rem; padding-right: 3rem;}
	#program h3 {text-align: center; order: 0; margin-bottom: 1.2rem;}
	#program .program-swiper {order: 2; overflow: visible; width: 100%; padding-top: 6.5rem; clip-path: inset(0 -3.7rem 0 0)}
	#program .pg-control {order: 1; position: static;}
	#program .pg-control > * {width: 3.7rem; height: 3.7rem;}
	#program .pg-control > button::before {mask-size: cover;}

	#program .program-swiper .swiper-slide a {padding: 3.7rem 2.5rem;}
	#program .program-swiper .swiper-slide a span {padding: 0.6rem 2.5rem;}
	#program .program-swiper .swiper-slide a div dl dt {padding-left: 3rem; background-size: 2.5rem;}
	#program .program-swiper .swiper-slide a div dl dt,
	#program .program-swiper .swiper-slide a div dl dd {line-height: 1.55;}
}

@media (max-width: 450px) {
	.main-visual .top .title { background-position: bottom center}
}