@charset "utf-8";

.icon-list li::before,
.center-con h4::before,
.location .info dt::before {background: url(../img/sub/ic-con.svg) no-repeat 0 0 / 40rem;}
.krds-btn:not(.primary, .secondary, .tertiary, .icon, .text, .text-line, .icogo-line) { color: #2C4DD3; border: 1px solid #2C4DD3; background: #F2F5FF; }
.krds-btn:not(.primary, .secondary, .tertiary, .icon, .text, .text-line, .icogo-line) .svg-icon { background-color: #2C4DD3; }
.krds-btn:not(.primary, .secondary, .tertiary, .icon, .text, .text-line, .icogo-line):hover { background: #D5DFF7; }
.krds-btn:has(span):not(.primary, .secondary, .tertiary, .icon, .text, .text-line, .icogo-line) { border: none; }
.krds-btn > span { border-bottom: 1px solid #2C4DD3; }
.box-group-area + .box-group-area,
.box-group-area li+li{margin-top: 1rem;}

.bl01 {position: relative; padding-left: 1.8rem; margin-bottom: 1.5rem; font-size: 2.2rem; font-weight: 500;}
.bl01::after {content: ''; position: absolute; left: 0; top: 0.7rem; width: 0.8rem; height: 2rem; border-radius: 3rem; background: linear-gradient(270deg, #0095D6 0%, #29C1A9 98.92%);}

p.bl02,
.bl02 > li {position: relative; margin-top: 2rem; padding-left: 2.4rem; font-weight: 500;}
p.bl02::before,
.bl02>li::before {content: ''; position: absolute; left: 0; top: 0.4rem; width: 1.4rem; height: 1.4rem; border: 2px solid #3F6FE0; border-radius: 50%; background-position: -3.8rem -11.3rem; box-sizing: content-box;}

[class$="-ic"]::before,
.header-search-box input[type=submit],
#tmenu ul li.select a::before,
p.bl02::before,
.bl02 > li::before,
#lnb .lnb-box > ul > li > a::before,
.conbtn > span::before {content: ''; position: absolute; background-image: url(../img/sub/ic.svg); background-repeat: no-repeat; background-size: 77rem;}

.center-con ul li {display: flex; flex-direction: column; justify-content: center; height: 19rem; padding: 0 4rem 0 19rem; background-color: #F2F6FA; background-repeat: no-repeat; background-position: left 4rem center; border-radius: 0.8rem;}
.center-con ul li + li {margin-top: 1rem;}
.center-con ul li h4 {font-size: 1.8rem; color: #000;}
.center-con ul li .txt {margin-top: 1rem; font-size: 1.6rem;}
.center-con ul li.ct01 {background-image: url(../img/sub/center01.svg);}
.center-con ul li.ct02 {background-image: url(../img/sub/center02.svg);}
.center-con ul li.ct03 {background-image: url(../img/sub/center03.svg);}
.center-con ul li.ct04 {background-image: url(../img/sub/center04.svg);}

.facility {display: flex; flex-wrap: wrap; gap: 3rem;}
.facility > li {width: calc(50% - 1.5rem); border-radius: 1rem; background: #F6F6F6; overflow: hidden;}
.facility > li .img {display: flex; align-items: center; width: 100%; aspect-ratio:1/.615; overflow: hidden;}
.facility > li .img img {width: 100%; height: 100%; object-fit: cover;}
#detail_con .facility > li .sub-sec {margin-top: 0; padding: 2.6rem;}
#detail_con .facility > li .sub-sec h4 {font-size: 1.8rem;}
#detail_con .facility > li .des-sec {margin-top: 1.6rem;}
#detail_con .facility > li .des-sec > .info-list {gap: 1.6rem;}
.facility > li .tit {font-size: 2rem; font-weight: 600;}
.facility > li .bl02 {display: flex; flex-direction: column; gap: 3rem; margin-left: 1rem;}
.facility > li .bl02 > li {margin-top: 0;}
.facility.col3 > li {width: calc(32% - 1.5rem); border-radius: 1rem; background: #F6F6F6; overflow: hidden;}

.greeting {padding-bottom: 8rem;}
.greeting .tbox {position: relative; padding: 5rem 50rem 5rem 5rem; margin-bottom: 3rem; background: linear-gradient(90deg, #F0F4FF 0%, #E6F8FF 100%), #F0F0F0; border: 0; border-radius: 2rem;}
.greeting .tbox::after {content: ''; position: absolute; right: 5rem; bottom: 0; width: 44.4rem; height: 26.1rem; background-image: url(../img/sub/greeting.png); background-position: center bottom; background-repeat: no-repeat; background-size: 100%;}
.greeting .tbox h3 {margin-bottom: 2rem; font-size: 3.2rem; font-weight: 600;}
.greeting .tbox h3 strong {color: #2C4DD3; font-weight: 600;}
.greeting .tbox p {font-size: 1.8rem;}
.greeting .con {margin: 0 auto; padding-left: 2rem; padding-right: 2rem;}
.greeting .con p {margin-top: 1.4rem; font-size: 1.6rem;}
.greeting.committee .tbox::after {background-image: url(../img/sub/committee.png);}
.greeting.committee .tbox strong {color: #2C4DD3;}

.intro {display: flex; align-items: stretch; gap: 5rem;}
.intro .img {position: relative; flex: 0 0 auto; display: flex; justify-content: center; width: 40rem; line-height: 0; border-radius: 1rem; overflow: hidden;}
.intro .img span {position: absolute; right: 1rem; bottom: 1rem; padding: 1rem; color: #fff; line-height: 1.5rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.5);}
.intro .img img {width: 100%; height: 100%; object-fit: cover;}
.intro .img img.hwasu2 {width: 100%;}
.intro .tit {position: relative;}
.intro .tit::after {content: ''; position: absolute; right: 0; top: calc(50% - 0.3rem / 2); width: 100%; height: 0.3rem; background: #3F6FE0; z-index: -1;}
.intro .tit span {display: inline-block; padding-right: 3rem; color: #3F6FE0; font-size: 5rem; font-weight: 800; font-family: var(--sb); background: #fff;}
.intro .con p {margin-top: 5rem; padding-top: 5rem; font-size: 1.7rem; border-top: 1px dashed #D3D3D3;}
.intro .con p:first-child {padding-top: 0; border-top: none;}
.intro .con p strong {display: block; margin-bottom: 1rem; font-size: 2.2rem;}

.present-history > li {display: flex; align-items: flex-start; gap: 4rem; padding: 2rem 3rem; border-radius: 1rem; overflow: hidden;}
.present-history > li:nth-child(odd) {background: #F6F6F6;}
.present-history > li:nth-child(even) {background: #fff;}
.present-history > li > strong {flex-shrink: 0; font-size: 2rem; color: #1A2E7E; font-weight: 800; min-width: 11.4rem; text-align: center;}
.present-history > li .info > div {display: flex; align-items: flex-start; gap: 1.5rem;}
.present-history > li .info > div * {font-size: 1.6rem;}
.present-history > li .info > div strong {flex-shrink: 0; font-weight: 600; color: #1A2E7E}
.present-history > li .info-list.dash > li {color: var(--krds-light-color-text-subtle);}
.present-history > li .info-list.decimal > li:before {width: 0.4rem; height: 0.4rem; background-color: var(--krds-light-color-text-subtle)}
.present-history > li .info-list.dash > li:before {color: var(--krds-light-color-text-subtle);}

.location {margin-bottom: 13rem; border: 1px solid #D3D3D3; border-radius: 1rem; overflow: hidden;}
.location .mapBox {width: 100%; height: 50rem; border-radius: 1rem 1rem 0 0; overflow: hidden;}
.location .info {display: flex; justify-content: center; padding: 3rem 0; border-radius: 0 0 1rem 1rem; background: #F6F6F6;}
.location .info dl {display: flex; gap: 2rem; padding: 0 2rem;}
.location .info * {font-size: 1.8rem;}
.location .info dt {position: relative; padding-left: 4rem; font-weight: 600;}
.location .info dt::before {content: ''; position: absolute; left: 0; top: -0.3rem; width: 3.5rem; height: 3.5rem;}
.location .info .addr {padding-right: 5rem;}
.location .info .addr dt:before {background-position: 0 -6.5rem;}
.location .info .tel {padding-left: 5rem; border-left: 1px solid #D3D3D3;}
.location .info .tel dt:before {background-position: -3.5rem -6.5rem;}

.icon-list {display: flex; flex-wrap: wrap; gap: 2rem;}
.icon-list li {display: flex; align-items: center; position: relative; padding: 4rem 4.5rem 4rem 11rem; font-size: 1.7rem; background: #F6F6F6; border-radius: 1rem; font-weight: normal;}
.icon-list li::before {content: ''; position: absolute; left: 2.5rem; top: calc(50% - 6.5rem / 2); width: 6.5rem; height: 6.5rem;}
.bl02 .icon-list {margin-top: 1.5rem; margin-left: -2.2rem;}
.register1 li:nth-child(2)::before, .register2 li:nth-child(2)::before {background-position: -6.5rem 0;}
.register2 li:nth-child(1)::before {background-position: -13rem 0;}

.step-wrap {gap: 2rem 1.6rem;}
.step-wrap.col04 li {width: calc((100% - 4.8rem)/4);}

.rules .decimal :where(ul, ol) :where(ul, ol){margin-top:10px; margin-left:10px; margin-bottom: 5px;}
.rules .decimal ul ol.order,
.rules .decimal ol ul.order{margin-left: 1.5rem;}


/* PC 데스크톱 스타일 (min-width: 1025px) */
@media screen and (min-width: 1025px) {
  .greeting .tbox p:only-child {padding-top: 3rem; padding-bottom: 3rem; margin-bottom: 0;}
}

@media screen and (max-width: 1400px) {
	.greeting .tbox {padding-right: 50%;}
	.greeting .tbox::after {width: 45%;}
}

/* 모바일/태블릿 반응형 (max-width: 1024px) */
@media screen and (max-width: 1024px) {
	.facility > li {width: 100%;}
	.facility.col3 > li {width: calc(50% - 1.5rem)}

	.greeting .tbox {text-align: center; margin-top: 8rem; padding-top: 16rem; padding-right: 7rem;}
  .greeting .tbox::after {left: 0; top: -12rem; bottom: auto; margin: 0 auto; width: 40rem;}

	.intro {flex-direction: column;}
  .intro .img {align-items: center; width: 100%; height: 30rem;}
  .intro .img img {width: 100%;}

	.location .info {flex-direction: column;}
  .location .info dl {justify-content: center;}
  .location .info .tel {padding: 1rem 0 0 0;}
}

@media screen and (max-width: 768px) {

.step-wrap.col04 li {width: calc((100% - 2rem) / 2);}
}
/* 소형 모바일 반응형 (max-width: 500px) */
@media screen and (max-width: 500px) {
  .facility > li .img {height: auto;}
  .facility > li .bl02 {flex-direction: column;}
  .facility > li .bl02 > li {width: 100%;}

	.greeting .tbox {margin-top: 0;}
	.greeting .tbox::after {width: 30rem;}

	.center-con ul li {min-height: 19rem; height: auto; padding: 4rem 4rem 4rem 15rem; background-position: left 2rem center; background-size: 11rem}

	.present-history > li {flex-direction: column; align-items: flex-start; gap: 1rem;}
	.present-history > li > strong {width: 100%; text-align: left;}
}