@charset "UTF-8";

main {position: relative; margin-top: -80px; padding-top: 120px; width: 100%; height: 560px; background-color: #D0E8FB;}
main::before, main::after {position: absolute; display: block; content: ""; width: 306px; height: 306px; border: 60px solid transparent; border-radius: 9999px; background-origin: border-box; background-clip: content-box, border-box;} 
main::before {top: 40px; background-image:linear-gradient(#D0E8FB, #D0E8FB),linear-gradient(200deg, rgba(255,255,255,.7) 0%, transparent 100%);}
main::after {right: -40px; bottom: 0; background-image:linear-gradient(#D0E8FB, #D0E8FB),linear-gradient(15deg, rgba(255,255,255,.45) 0%, transparent 100%);}
main .swiper-container {position: relative; overflow: hidden; height: 470px; border-radius: 12px; box-shadow: 0px 0px 10px 2px rgba(81, 81, 81, 0.17);}
main .swiper-container .swiper-slide img {display: block; width: 100%;}
main .swiper-control {position: absolute; z-index: 1; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; padding: 10px .5rem 10px 1.25rem; background: rgba(0,0,0,.5); border-radius: 999px;}
main .swiper-control .swiper-count {color: #ddd; margin-right: 8px;}
main .swiper-control .swiper-count .current {color: #fff; font-weight: 600;}
main .swiper-control .swiper-button {display: flex; gap: 2px;}
main .swiper-control .swiper-button .btn-control {color: #fff; padding: 0;}
main .swiper-control .swiper-button .btn-control.play {display: none;}
main .swiper-control .swiper-button .swiper-button-lock, main .swiper-control .swiper-pagination-lock {display: block;}

.area-title {font-family: var(--font-title); font-size: 1.25rem;}
.title-wrap {margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;}
section.main-section {margin-top: 4.38rem; margin-bottom: 6rem;}
.main-row {display: flex; justify-content: space-between; align-items: end; gap: 2rem;}

.row1 .col1 {flex: 0 0 42.42%;}
.row1 .col1 .area-title {margin-bottom: 1rem;}
.row1 .col1 .info-list {display: flex; align-items: center; justify-content: center; gap: 2rem; height: 240px; background-color: #EDF7FF; border-radius: 10px;}
.row1 .col1 .info-list a {display: flex; flex-direction: column; align-items: center;}
.row1 .col1 .info-list a .icon-box {position: relative; width: 5.75rem; height: 5.75rem; background-color: #fff; border-radius: 12px;}
.row1 .col1 .info-list a .icon-box img {position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px;}
.row1 .col1 .info-list a span {display: block; width: 5.75rem; margin-top: 1.25rem; color: #656A83; font-weight: 500; text-align: center; line-height: 1.25;}
.row1 .col1 .info-list li:last-of-type {margin-top: 1.25rem;}
.row1 .col2 {flex: 0 0 33.64%; width: 444px;}
.row1 .col2 .title-group {display: flex; align-items: center;}
.row1 .col2 .title-group .area-title {margin-bottom: 0;}
.row1 .col2 .swiper-count {width: auto; margin-left: .45rem; color: #817A7A;}
.row1 .col2 .swiper-count .current {color: #77C926; font-weight: 600;}
.row1 .col2 .swiper-button {display: flex; gap: 2px;}
.row1 .col2 .swiper-button .btn-control {color: #4D4D4D; padding: 0;}
.row1 .col2 .swiper-button .swiper-button-lock {display: block; color: #aaaaaa;}
.row1 .col2 .swiper-button .btn-control.play {display: none;}
.row1 .col2 .swiper-container {height: 240px; border-radius: 10px; overflow: hidden;}
.row1 .col2 .swiper-container .swiper-slide a {display: block;}
.row1 .col2 .swiper-container .swiper-slide img {display: block; width: 100%;}
.row1 .col3 .link-list {flex: 0 0 19.09%; display: flex; flex-direction: column; gap: 10px; width: 252px; height: 240px;}
.row1 .col3 .link-list .link-box {display: flex; align-items: center; justify-content: space-between; border: 1px solid; border-radius: 10px; padding: 1rem; padding-left: 3.63rem; background: no-repeat left 1rem center/2rem auto;}
.row1 .col3 .link-list .link-box p {color: #606060; font-size: .93rem; font-weight: 500; letter-spacing: -.5px; line-height: 1.28;}
.row1 .col3 .link-list .link-box span {padding: 8px 10px; background-color: #fff; border-radius: 999px; color: #777; font-size: 12px;}
.row1 .col3 .link-list .link-box.youtube {background-image: url(/img/center/icon-youtube.png); border-color: #F0C8C8; background-color: #fef5f5;}
.row1 .col3 .link-list .link-box.kakao {background-image: url(/img/center/icon-kakao.png); border-color: #F4EA9B; background-color: #fffce6;}
.row1 .col3 .link-list .link-box.blog {background-image: url(/img/center/icon-naver-blog.png); border-color: #BFEABF; background-color: #f0fcf1;}

.row2 {margin-top: 2.25rem;}
.row2 .main-board {width: 526px; height: 329px; border: 1px solid #e0e0e0; border-radius: 12px; padding: 1.38rem;}
.row2 .main-board .title-wrap {margin-bottom: 1.13rem;}
.row2 .main-board .title-wrap .btn-more {width: 1.5rem; height: 1.5rem; color: #fff; background-color: #e0e0e0; border-radius: 999px;}
.row2 .main-board .board-list li {padding: 1rem 4px; border-top: 1px solid #e0e0e0;}
.row2 .main-board .board-list li a {display: flex; justify-content: space-between; letter-spacing: -.5px; }
.row2 .main-board .board-list .board-title {width: 77%; display: flex; align-items: center;}
.row2 .main-board .board-list .board-title p {color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.row2 .main-board .board-list .board-title .badge-new {margin-left: .25rem;  flex-shrink: 0; display: block; font-family: "lexend", "pretendard", sans-serif; color: #fff; font-size: .65rem; text-align: center; line-height: 1rem; width: 1rem; height: 1rem; border-radius: 4px; background: linear-gradient(138deg, #79C941 6.35%, #6BB8FF 76.51%);}
.row2 .main-board .board-list .board-date {color: #999;}

.row2 .col3 {width: 204px;}
.row2 .col3 .center-info {width: 100%; height: 116px; background-color: #EDF7FF; border-radius: 10px; padding: 1rem;}
.row2 .col3 .center-info h4 {padding-left: 2.5rem; background: url(/img/center/icon-call.png) no-repeat left center/2.35rem auto; font-family: var(--font-title); color: #51a5f1; font-size: 1.19rem; text-align: center;}
.row2 .col3 .center-info h4 span {display: block; font-size: 1rem; letter-spacing: -.5px;}
.row2 .col3 .center-info .center-time {margin-top: 10px; color: #656A83; font-size: .88rem; line-height: 1.25; letter-spacing: -.25px;}
.row2 .col3 .center-info strong {margin-right: .2rem;}
.row2 .col3 .logo-list {display: flex; flex-direction: column; gap: 10px; margin-top: 10px;}
.row2 .col3 .logo-list a {display: block; width: 100%; height: 60px; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden;}
.row2 .col3 .logo-list a img {width: 100%;}

/* 개별 센터 메인 */
body.CT001 .row2 .col3 .center-info h4 {background-size: 2rem auto;}