/* Header */
#header {width: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 20; background-color: var(--white-color);}
#header .header-top-btn {display: flex; align-items: center; justify-content: flex-end; gap: 0 15px; padding: 14px 0; font-size: 16px; font-weight: 500;}
/* #header .header-login-in {display: flex;} */
/* #header .header-login-tagbox {padding: 3px 5px; border-radius: 9px; background-color: #f08200; color: var(--white-color); font-size: 12px; font-weight: 500;} */
/* #header .header-login-name {padding-left: 8px; font-size: 16px; font-weight: 500;} */

#header .header-btn-logout {display: flex; align-items: center;}
#header .log-out-icon {width: 13px; aspect-ratio: 13 / 17; display: inline-block; margin-right: 2px; margin-bottom: -3px; background: url('/source/img/header-log-out.png') no-repeat center center / contain;}

#header .header-btns {display: flex; gap: 0 10px;}
#header .header-btns-item {display: block; padding: 6.5px 0; width: 102px; border-radius: 5px; color:hsl(0, 0%, 100%); line-height: normal; font-weight: 500; text-align: center;}
#header .header-btns .first-btn {background-color: var(--point-color);}
#header .header-btns .last-btn {background-color: var(--black-color);}
#header .header-bottom {height: 85px; background-color: var(--white-color); border-top: 2px solid #f5f5f5; border-bottom: 2px solid #f5f5f5;}
#header-bottom-logo {position: relative; top: 0; z-index: 1; margin-right: auto; display: flex; justify-content: space-around; align-items: center; height: 100%;}
.header-logo-link {display: block; width: 197px;}
.header-logo-link img {width: 100%; height: 100%;}
#header .header-bottom-menu {display: flex; align-items: center; justify-content: start; gap: 30px;}

#header-menu {position: relative; width: calc(100% - 197px - 27px - 140px); height: 85px;}
#header-menu .depth1 {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; height: 100%; width: 100%;}
#header-menu .depth1 > li {width: calc(100% / 6); height: 100%; text-align: center;}
#header-menu .depth1 > li > a {display: flex; justify-content: start; align-items: center; height: 100%; font-size: 20px; font-weight: 600; word-break: break-all; word-wrap: break-word; color: var(--black-color); transition: 0.2s;}
#header-menu .depth1 > li > a:is(:hover, :focus), #header-menu .depth1 > li.on {color: var(--point-color);}

.all-menu {position: fixed; top: 145px; z-index: 10; width: 100%; letter-spacing: -0.5px;}
.sub-menu {display: none; padding: 30px 0 73px; border-radius: 0 0 30px 30px; background: var(--white-color) url("/source/img/sub-icon-01.png") no-repeat 13px calc(100% - 27px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.06);}
.all-menu .depth1 {position: relative; display: flex; justify-content: space-between; width: auto; padding-left: calc(197px + 80px + 30px); padding-right: calc(27px + 30px);}
.all-menu .depth1 > li {width: calc(100% / 6); margin: 0 5px; text-align: left;}

.all-menu .depth2 > li ~ li {margin-top: 22px;}
.all-menu .depth2 > li > a {border-bottom: 1px solid transparent; font-weight: 400; font-size: 15px; transition: all 0.2s;}
.all-menu .depth2 > li > button {position: relative; background-color: transparent; border: none; border-bottom: 1px solid transparent; font-size: 15px; text-align: left; letter-spacing: -0.5px;}
.all-menu .depth2 > li > :is(a, button):is(:hover, :focus) {border-color: var(--point-color); color: var(--point-color);}
.all-menu .depth2 button::after {content: ""; display: block; width: 11px; height: 11px; position: absolute; top: 50%; right: -15px; background-image: url("/source/img/sub-icon-02.png"); background-repeat: no-repeat; background-position: center; transform: translateY(-50%);}
.all-menu .depth2 button.active::after {background-image: url("/source/img/sub-icon-03.png");}

.all-menu .depth3 {display: none; margin-top: 10px; padding-left: 5px;}
.all-menu .depth3 > li ~ li {margin-top: 6px;}
.all-menu .depth3 > li > a {display: block; color: #999999; font-size: 13px; transition: color 0.2s;}
.all-menu .depth3 > li > a:is(:hover, :focus) {color: var(--point-color);}

.header-menu-mobile-login {display: none;}
#header .header-menu-side {display: flex; height: 100%;}
#header .header-menu-icon {display: flex; align-items: center; gap: 0 20px;}
#header .header-icon-img.all-menu-btn {width: 27px; transition: 0.2s;}
#header .header-icon-img.all-menu-btn.rotated {transform: rotate(45deg);}
#header .header-icon-img {background-color: transparent; border: none;}
#header .header-menu-icon-item {width: 100%;}

/* Mobile menu */
.mobile-all-menu {display: none; width: 100%; position: fixed; top: 85px; z-index: 10; letter-spacing: -0.5px;}
.mobile-all-menu .wrapper {padding: 0;}
.mobile-all-menu .sub-menu {padding: 20px 30px;}
.mobile-login-out {display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 0px; padding-right: 20px;}
.mobile-login-out .mobile-loge-name {display: flex; display: none;}
.mobile-login-out .header-login-tagbox {padding: 3px 5px; border-radius: 9px; background-color: #f08200; color: var(--white-color); font-size: 12px; font-weight: 500;}
.mobile-login-out .header-login-name {padding-left: 8px; font-size: 16px; font-weight: 500;}
.mo-close-btn-icon {display: none;}

/* 모바일 로그인 버튼 제거 */
.mobile-login-out {padding-left: 20px; padding-right: 20px;}
.mobile-menu-btn-wrap {display: flex; justify-content: flex-end; gap: 10px;}
.mobile-menu-btn {padding: 5px 0; width: 150px; border-radius: 6px; background-color: var(--black-color); color: var(--white-color); text-align: center;}
.back-blue {background-color: var(--point-color);}
.mobile-all-menu .depth1 {display: flex; justify-content: space-between;}
.mobile-all-menu .depth1 > li {width: calc(100% / 6); background: linear-gradient(180deg, rgba(255,255,255,0.8) 40px, transparent 80px); border-right: 1px solid var(--line-color);}
.mobile-all-menu .depth1 > li > .mo-depth1-btn {display: block; width: 100%; padding: 16px 0 10px; border: 1px solid transparent; font-weight: 500; font-size: 18px; letter-spacing: -0.5px; text-align: center; transition: 0.2s;}
.mobile-all-menu .depth2 > li {width: 100%; margin: 10px 0; padding: 0 10px;}
.mobile-all-menu .depth1 > li:last-child {border-right: none;}
.mobile-all-menu .depth2 > li > .mo-depth2-btn {position: relative; max-width: calc(100% - 6px); background: transparent; border: none; border-bottom: 1px solid transparent; color: var(--black-color); font-weight: 400; font-size: 14px; letter-spacing: -0.5px; word-break: break-all; word-wrap: break-word; text-align: left; transition: 0.2s;}
.mobile-all-menu .depth2 > li > .mo-depth2-btn:is(:hover, :focus) {color: var(--point-color); border-color: var(--point-color);}
.mobile-all-menu .depth2 > li > .mo-depth2-btn::after {content: ""; display: block; width: 11px; height: 11px; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); background-image: url("/source/img/sub-icon-02.png"); background-repeat: no-repeat; background-position: center;}
.mobile-all-menu > li > .mo-depth2-btn.active::after {background-image: url("/source/img/sub-icon-03.png");}
.mobile-all-menu .depth2 > li > a {border-bottom: 1px solid transparent; font-weight: 400; font-size: 14px; text-align: left; transition: 0.2s;}
.mobile-all-menu .depth2 > li > a:is(:hover, :focus) {color: var(--point-color); border-color: var(--point-color);}

.mobile-all-menu .depth3 {margin: 10px 0;}
.mobile-all-menu .depth3 > li {line-height: 1; margin-top: 5px;}
.mobile-all-menu .depth3 > li > a {border-bottom: 1px solid transparent; color: var(--gray-color); font-size: 13px; text-align: left; transition: 0.2s;}
.mobile-all-menu .depth3 > li > a:is(:hover, :focus) {color: var(--point-color); border-color: var(--point-color);}
.mobile-all-menu .sub-menu {display: none; top: 145px; padding: 0px 0 73px; border-radius: 0 0 30px 30px; background: var(--white-color) url("/source/img/sub-icon-01.png") no-repeat 13px calc(100% - 27px); box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);}

/* 구글 번역기 */
#header .header-google-btn {width: 32px; height: 32px; border: none; background-color: transparent;}
#header .header-google-btn > img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
#google_translate_element {align-items: center; justify-content: flex-end; width: 1440px; max-width: 100%; height: 40px; margin: 0 auto; padding: 0 10px; background-color: var(--white-color);}
#google_translate_element select {min-width: auto; height: auto; appearance: auto !important; padding: 0; border-radius: 4px; color: var(--black-color); background: none; font-size: 14px !important;}
#header .translation-select {height: 32px; margin-left: 10px; padding: 0 12px 0 6px; background-position: right 12px center; background-size: 10px; background-color: #ffffff;}
body {top: inherit !important;}
body > .skiptranslate {display: none !important;}
.google-button-reset {margin-right: 10px; padding: 2px 8px; border-radius: 4px; background-color: var(--black-color); border: none; color: var(--white-color); font-weight: 500; font-size: 13px;}
.header-menu-mobile-google {display: none;}

/* 헤더 타이머 추가 */
.session-timer-wrap {} 
.session-timer {display: flex; align-items: center; gap: 4px; font-size: 15px; color: #666666; font-weight: 700;}
.session-timer i {color: var(--point-color); font-size: 18px; font-weight: 500;}
.session-timer .time {font-weight: 500; color: var(--point-color);}

/* Footer */
.footer {} 
.footer-top {background-color: #20232d;}
.footer-top-menu {display: flex; align-items: center; font-size: 18px; padding: 25px 0 24px;}
.footer-top-menu-item {font-weight: 500; position: relative; display: block; margin: 0 20px; color: #ffffff;}
.footer-top-menu-item::before {content: ""; width: 2px; height: 14px; background-color: #ffffff; position: absolute; top: 50%; left: -20px; transform: translateY(-50%);}
.footer-top-menu-item:first-child {margin-left: 0; color: var(--point-color);}
.footer-top-menu-item:first-child::before {display: none;}

.footer-bottom {background-color: #282c36; color: #868c98; font-size: 16px;}
.footer-info-tel {color: #868c98;}
.footer-bottom-inner {padding: 54px 0 82px; display: flex;}
.footer-logo {margin-top: 6px; margin-right: 55px;}
.footer-info {display: flex;}
.footer-info span, .footer-info-item {position: relative; display: block; padding: 0 12px; line-height: 1.5;}
.footer-info span::before, .footer-info-item::before {content: ""; display: block; position: absolute; width: 2px; height: 12px; background-color: #868c98; top: 6px; left: 0;}
.footer-info span:first-child, .footer-info-item:first-child {padding-left: 0;}
.footer-info span:first-child::before, .footer-info-item:first-child::before {display: none;}
.footer-copyright {margin-top: 24px;}

.all-menu .depth2 button::after {content: ""; display: block; width: 11px; height: 11px; position: absolute; top: 50%; right: -15px; background-image: url("/source/img/sub-icon-02.png"); transform: translateY(-50%);}

/* Top-move-btn */
#top-move {position: fixed; bottom: 20px; right: 40px; z-index: 20;}
.move-top-btn {width: 50px; height: 50px; background-color: var(--white-color); color: var(--black-color); border: none; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.3s, transform 0.3s; display: flex; align-items: center; justify-content: center; font-size: 25px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);}
.move-top-btn:hover {transform: translateY(-5px);}
.move-top-btn.is-active {opacity: 1;}

/* Main */
.main-contents {} 
.main-section {position: relative;}

.main-visual-img {position: relative; min-height: 400px; overflow: hidden; padding-bottom: 22.415%;}
.main-visual-img img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.visual-img-2, .visual-img-3, .visual-img-a2, .visual-img-a3 {display: none;}

.main-visual-content {position: absolute; top: 200px; z-index: 5; width: 100%;}
/* .main-visual-content-search {position: relative; width: 583px; height: 75px; margin-top: 71px; display: flex; align-items: center;}
.main-visual-content-search img {position: absolute; z-index: 10; left: 25px;} */
/* .main-visual-search-input {width: 100%; height: 100%; border-radius: 10px; border: transparent; position: absolute; top: 0; padding-left: 67px; padding-right: 130px;}
.main-visual-search-btn {position: absolute; right: 25px; color: #ffffff;}
.main-visuaal-search-btn-item {color: #ffffff; background-color: var(--point-color); border-radius: 8px; border: transparent; width: 78px; height: 40px;}
.main-visuaal-search-btn-item:active {background-color: rgba(36, 107, 208, 0.8);}

.main-visual-content-keyword {display: flex; margin-top: 25px; align-items: center; font-size: 14px;}
.main-visual-keyword-box {display: flex; align-items: center;}
.main-visual-content-keyword img {margin-right: 10px;}
.main-visual-keyword-pik {font-weight: 600; padding-right: 15px;}
.main-visual-keyword-txet-box {height: 35px; display: flex; align-items: center;}
.main-visual-keyword-item {height: 100%; border: 1px solid #f5f5f5; border-radius: 17px; font-weight: 300; margin-right: 10px; padding: 0px 10px; line-height: 35px; color: #333333; transition: all 0.2s;}
.main-visual-keyword-item:hover, .main-visual-keyword-item:focus {border-color: var(--black-color); color: var(--white-color); background-color: var(--black-color);} */
.main-visual-ctr {display: flex; align-items: center; gap: 15px; margin-top: 26px; justify-content: flex-end;}

.main-visual-ctr-ul {display: flex; align-items: center; gap: 10px; width: auto!important;}
.main-visual-ctr-li {display: flex; align-items: center; gap: 10px; margin: 0 !important;}
.main-visual-slide-btn {background-color: transparent; border: none; font-size: 14px; font-weight: 400; color: var(--black-color);}
.main-visual-slide-time {position: relative; width: 0; height: 2px; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; transition: .3s;}
.main-visual-slide-time-bar {position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--white-color);}
.main-visual-ctr-li.swiper-pagination-bullet {width: auto; margin: 0; background: none; opacity: 1;}
.main-visual-ctr-li.swiper-pagination-bullet-active {opacity: 1;}
.main-visual-ctr-li.swiper-pagination-bullet-active .main-visual-slide-btn {color: var(--black-color);}
.main-visual-ctr-li.swiper-pagination-bullet-active .main-visual-slide-time {width: 130px; visibility: visible;}

.main-visual-ctr-btns {display: flex; align-items: center; gap: 9px;}
.main-visual-ctr-btns button {border: none; background-color: transparent; width: 9px; height: 11px;}

.main-visual-ctr-btns {display: flex; align-items: center; gap: 10px;}
.main-visual-ctr-btns button {border: none; background-color: transparent;}
.main-visual-ctr-btns .prev {background: url('/source/img/icon-visual-prev.png') no-repeat center;}
.main-visual-ctr-btns .pause {background: url('/source/img/icon-visual-pause.png') no-repeat center;}
.main-visual-ctr-btns .pause.play {background: url('/source/img/icon-visual-play.png') no-repeat center;}
.main-visual-ctr-btns .next {background: url('/source/img/icon-visual-next.png') no-repeat center;}

.main-visual-content-notice {border: 1px solid #ffffff; border-radius: 14px; margin-top: 40px; padding: 0 40px; background-color: rgba(225, 225, 225, .3); display: flex; align-items: center; backdrop-filter: blur(10px);}
.main-visual-notice {width: 100%; display: flex;}
.main-visual-content-notice .swiper-container {height: 88px; flex: 1 1 auto; min-width: 0;}
.main-visual-content-notice .swiper-slide {height: 100%; align-items: center; width: 100%; display: flex; justify-content: space-between;}
.main-notice-slide-text {display: flex; align-items: center; min-width: 0;}
.main-visual-content-notice .notice-title {font-size: 18px; font-weight: 700; color: #ffffff; background-color: var(--point-color); height: 40px; text-align: center; line-height: 2.22; border-radius: 20px; margin-right: 43px; padding: 0 14px;}
.main-visual-content-notice .notice-title-item {font-size: 18px; text-overflow: ellipsis; white-space: nowrap; color: var(--black-color); width: 100%; transition: color 0.2s; overflow: hidden;}
.main-visual-content-notice .notice-title-item:hover, .main-visual-content-notice .notice-title-item:focus {color: var(--point-color);}

.main-visual-content-notice .notice-date {font-weight: 400; width: 100px; flex-shrink: 0; white-space: nowrap; text-align: right;}
.main-slide-notice-btns {display: flex; align-items: center; gap: 15px; padding-left: 25px; flex-shrink: 0; margin-top: -5px;}
.main-slide-notice-btn {border: none; background-color: transparent;}

.main-dashboard-content {display: flex; justify-content: space-between; padding: 79px 0; align-items: center;}
.main-dashboard-left {width: 585px;}
.main-dashboard-left-title {font-family: 'GmarketSans', sans-serif; font-size: 40px; font-weight: 500; color: var(--black-color); line-height: 1.275;}
.main-dashboard-left-point-title {color: var(--point-color);}
.main-dashboard-left-button-wrap {display: flex; flex-wrap: wrap; gap: 18px; margin-top: 31px;}
.main-dashboard-left-button {border: none; width: 182px; height: 102px; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.main-dashboard-left-button.sky {background-color: var(--point-color); transition: background-color 0.2s;}
.main-dashboard-left-button.sky:hover, .main-dashboard-left-button.sky:focus {background-color: rgba(36, 107, 208, 0.9);}
.main-dashboard-left-button.blue {background-color: var(--blue-color); transition: background-color 0.2s;}
.main-dashboard-left-button.blue:hover, .main-dashboard-left-button.blue:focus {background-color:rgba(19, 61, 122,0.9);}
.main-dashboard-left-text-item {color: #ffffff; font-weight: 500; margin-top: 8px; text-align: center; transition: all 0.2s;}
.main-dashboard-left-button:hover .main-dashboard-left-text-item, .main-dashboard-left-button:focus .main-dashboard-left-text-item {margin-top: 13px;}

.main-dashboard-right {width: 721px;}
.main-dashboard-right-text {display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px;}
.main-dashboard-right-titel {font-weight: normal; font-size: 20px; font-weight: 600;}
.main-dashboard-right-but-box {display: flex; height: 100%; align-items: center;}
.main-dashboard-slider-pagination {font-size: 14px; line-height: 1.786; font-weight: 400; text-align: right; width: 50px; height: 100%; color: #666666; letter-spacing: -1.5px;}
.main-dashboard-right-btns {outline: 1px; display: flex; gap: 0 12px; align-items: center; margin-left: 15px; height: 100%; float: left;}
.main-dashboard-right-btns button {border: none; background-color: transparent; background-repeat: no-repeat; background-position: center; width: 9px; height: 11px;}
.main-dashboard-right-btns .next {background-image: url('/source/img/icon-visual-next.png');}
.main-dashboard-right-btns .prev {background-image: url('/source/img/icon-visual-prev.png');}
.main-dashboard-right-btns .pause {background-image: url('/source/img/icon-visual-pause.png');}
.main-dashboard-right-btns .pause.play {background-image: url('/source/img/icon-visual-play.png');}
.main-dashboard-right-banner .swiper-container {width: 100%; border-radius: 18px; overflow: hidden;}
.main-dashboard-right-banner .swiper-wrapper {width: 100%;}
.main-dashboard-right-banner .swiper-slide {}
.main-dashboard-right-banner-item {overflow: hidden; display: block; width: 100%; height: 0; position: relative; padding-bottom: 41.47%;}
.main-dashboard-right-banner-item img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}

.main-check-section-content {display: flex; height: 100%;}
.main-check-content-left {width: 50%; padding-right: 65px; padding-left: calc((100vw - 1440px) / 2); height: 100%; position: relative; background: #d8eaff url("/source/img/main-check-01.png") no-repeat right center / auto;}
.main-check-content-right {width: 50%; padding-left: 65px; padding-right: calc((100vw - 1440px) / 2); position: relative; background: #e5e2ff url("/source/img/main-check-03.png") no-repeat right 12% center / auto;}
.main-check-section-content .text {padding: 74px 0 70px; position: relative; overflow: hidden;}
.main-check-section-content .etc {padding-top: 14px; display: block; color: var(--gray-color);}
.main-check-section-content .etc br {display: none;}
.main-check-link {padding-top: 42px; width: fit-content; display: flex; align-items: center; transition: color 0.2s;}
.main-check-link:hover, .main-check-link:focus {color: var(--point-color);}
.main-check-content-arrow {padding-left: 10px; transition: all 0.3s;}
.main-check-link:hover .main-check-content-arrow, .main-check-link:focus .main-check-content-arrow {filter: invert(30%) sepia(99%) saturate(1487%) hue-rotate(202deg) brightness(87%) contrast(86%); padding-left: 15px;}

.main-news-content {display: flex; padding-top: 98px;}
.main-news-left-title {position: absolute; top: -18px; line-height: normal;}
.main-news-content-left {width: 50%; margin-left: calc(((100vw - 1440px) / 2) - 66px);}
.main-news-text-first-link {transition: color 0.2s;}
.main-news-text-first-link:hover, .main-news-text-first-link:focus {color: var(--point-color);}
.main-news-title-box {display: flex; align-items: center; justify-content: space-between; margin: 14px 0 11px;}
.main-news-title-text {font-size: 20px; font-weight: 600;}
.main-news-text-item:first-child {border-bottom: 1px solid #e7e7e7; margin-bottom: 31px; padding-bottom: 31px;}
.main-news-text-item ~ .main-news-text-item {display: flex; margin-top: 20px; align-items: center; justify-content: space-between;}
.main-news-text-item:last-child {padding-bottom: 0;}
.main-news-text-careers {margin-right: 16px;}
.main-news-title-icon {width: 12px; height: 100%; transition: all 0.2s;}
.main-news-text-first-link:hover .main-news-title-icon, .main-news-text-first-link:focus .main-news-title-icon {filter: invert(30%) sepia(99%) saturate(1487%) hue-rotate(202deg) brightness(87%) contrast(86%);}
.main-news-left-text-box {position: relative; padding: 62px 66px 50px; background-color: #f5f5f5; max-width: 737px; box-sizing: border-box;}
.main-news-text-link {display: block; width: calc(100% - 101px); align-items: center;}
.main-news-text-etc-box {display: flex; justify-content: space-between; align-items: center;}
.main-news-first-etc {color: var(--gray-color); line-height: 1.389; width: 32.5rem; display: block; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-news-text-etc {color: var(--gray-color); display: block; width: calc(100% - 90px); padding-right: 0 !important; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: color 0.2s;}
.main-news-text-etc:hover, .main-news-text-etc:focus {color: var(--point-color);}
.main-news-text-data {font-size: 14px; font-weight: 400; color: #999999;}

.main-news-content-right {width: 50%; margin-right: calc((100vw - 1440px) / 2);}
.main-news-right-cntent {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 30px 23px;}
.main-news-right-item {display: block; width: calc((100% / 2) - 23px); display: flex; flex-direction: column; justify-content: center;}
.main-news-right-img-box {position: relative; margin-bottom: 16px; width: 100%;}
.main-news-right-img-link {width: 100%; display: block; aspect-ratio: 325 / 197; position: relative; overflow: hidden;}
.main-news-right-imgtext {display: block; position: absolute; top: 20px; left: 20px; z-index: 1;}
.main-news-right-img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.main-news-right-figuer-text {font-size: 18px; font-weight: 600; line-height: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s;}
.main-news-right-figuer:hover .main-news-right-figuer-text, .main-news-right-figuer:focus .main-news-right-figuer-text {color: var(--point-color);}
.main-news-right-date {font-size: 14px; font-weight: 400; color: #999999; margin-top: 14px; line-height: normal;}

.main-sns-section {padding: 80px 0 82px;}
.main-sns-content {display: flex; justify-content: space-between; align-items: flex-end; gap: 30px;}
.main-sns-left-title {display: flex; align-items: center; padding-bottom: 40px;}
.main-sns-title {padding-right: 30px;}
.main-sns-btns {display: flex; gap: 0 11px;}
.main-sns-page-btn {border: none;}
.main-sns-page-btn {width: 12px; height: 12px; border-radius: 6px; background-color: #999999; transition: 0.3s;}
.main-sns-page-btn.active {width: 39px; background-color: var(--point-color);}

.main-sns-content-left {width: 682px;}
.main-sns-pause {background-image: url("/source/img/icon-visual-pause.png"); width: 9px; height: 11px; background-repeat: no-repeat; background-position: center; border: none; background-color: transparent;}
.main-sns-pause.play {background-image: url("/source/img/icon-visual-play.png");}

.main-sns-section .swiper-container {width: 100%; border-radius: 18px; overflow: hidden;}
.main-sns-slider-video {overflow: hidden; width: 100%; height: 0; position: relative; padding-bottom: 49.267%;}
.main-sns-slider-video-item {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.main-sns-content-right {width: 728px;}
.main-sns-top-icon {display: flex; justify-content: flex-end; gap: 0 10px; width: fit-content; margin-left: auto; padding-bottom: 40px;}
.main-sns-top-btn {font-size: 0;}
.main-sns-top-btn > img {width: 31px; aspect-ratio: 1 / 1; object-fit: cover;}
.main-sns-banner-img {display: flex; justify-content: flex-end; gap: 0 28px;}
.main-sns-slider-link {border-radius: 18px; display: block; position: relative; overflow: hidden; aspect-ratio: 348 / 336; width: calc(100% - 28px);}
.main-sns-bottom-img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.main-sns-slider-link::after {position: absolute; top: 10px; right: 10px; display: inline-block; width: 31px; height: 31px; font-size: 0; z-index: 1; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.main-sns-slider-link.instagram::after {content: "인스타그램 바로가기"; background-image: url("/source/img/icon-sns-01.png");}
.main-sns-slider-link.facebook::after {content: "페이스북 바로가기"; background-image: url("/source/img/icon-sns-02.png");}
.main-govagency-content {margin-bottom: 100px;}
.main-govagency-btns {display: flex; justify-content: flex-end; gap: 0 7px;}
.main-govagency-btns button {background-repeat: no-repeat; background-position: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e7e7e7; background-color: var(--white-color);}
.main-govagency-prev {background-image: url("/source/img/icon-visual-prev.png");}
.main-govagency-next {background-image: url("/source/img/icon-visual-next.png");}
.main-govagency-stop {background-image: url("/source/img/icon-govag-stop.png");}
.main-govagency-stop.play {background-image: url("/source/img/icon-visual-play.png");}

.main-govagency-slide {margin-top: 25px;}
.main-govagency-content .swiper-container {height: 65px; overflow: hidden;}
.main-govagency-content .swiper-wrapper {width: 100%; height: 100%;}
.main-govagency-content .swiper-slide {border: 1px solid var(--line-color); background-color: #ffffff; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;}

/* Sub */

/* Sub Common */
.main-aside {position: fixed; z-index: 10; top: 50vh; right: 19px; transform: translateY(-50%);}
.mo-aside-icon {display: none;}
.main-aside-icon {padding: 11px 10px; border-radius: 50%; position: absolute; left: 50%; top: -20px; transform: translateX(-50%); background-color: var(--white-color); box-shadow: 0 7px 7px rgba(0, 0, 0, 0.04);}
.main-aside-textbox {border-radius: 11px; background-color: #f2f5fc; padding: 28px 6px 21px; text-align: center;}
.main-aside-back {background-color: var(--white-color); border-radius: 18px; padding: 16px 18px 15px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);}
.main-aside-top-text {padding-bottom: 16px;}
.main-aside-title {font-size: 15px; font-weight: 500; padding-bottom: 6px;}
.main-aside-number .aside-tel {font-family: KohiLearn, sans-serif; color: var(--point-color); font-size: 21px;}
.main-aside-bluebox {font-family: KohiLearn, sans-serif; background-color: var(--point-color); padding: 9px 14px; color: #ffffff; border-radius: 15px; font-size: 14px;}
.main-aside-bottom-text {margin-bottom: 10px;}

.contents_wrap {margin-top: 145px;}
.sb_top {background-image: url("/source/img/sub-com-bg.png"); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sb_top_ct {padding: 89px 0 130px; text-align: center; position: relative;}
.breadcrumb {font-size: 14px; color: var(--gray-color); font-weight: 400; display: flex; justify-content: center; align-items: center;}
.breadcrumb-item:has(.bc-home) {font-size: 0;}
.bc-home {padding-right: 10px; display: inline-block;}
.breadcrumb-item:nth-of-type(2) {position: relative; margin-right: 46px;}
.breadcrumb-item:nth-of-type(2)::after {content: ""; display: block; background: url("/source/img/sub-com-icon02.png") no-repeat; background-position: center; width: 6px; height: 10px; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 22px);}
.sb_title {font-family: "GmarketSans"; font-weight: 700; font-size: 40px; padding-top: 17px; line-height: normal;}
.sb_2menus {position: absolute; top: calc(100% - 37px); width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.07);}
.sb_2menus_wrap {display: flex; justify-content: space-around; width: 100%;}
.sb_2menus_wrap > li {width: 100%; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.07); transition: 0.2s;}
.sb_2menus_wrap > li > a {transition: 0.2s;}
.sb_2menus_wrap > li.act > a {background-color: var(--point-color); color: var(--white-color);}
.sb_2menus-text {font-size: 18px; font-weight: 400; display: block; width: 100%; padding: 22px 0; background-color: var(--white-color); width: 100%; height: 100%; line-height: normal;}
.sb_2menus_wrap > li:not(.act):hover > a {color: var(--point-color);}

.depth3-tab-menu {display: flex; gap: 30px 96px; justify-content: center; flex-wrap: wrap;}
.depth3-tab-link {font-size: 20px; font-weight: 500; position: relative; z-index: 1; position: relative; display: flex; justify-content: center; align-items: center;}
.depth3-tab-link:not(:last-child)::before {content: ""; display: block; width: 1px; height: 20px; background-color: var(--line-color); position: absolute; top: 50%; transform: translateY(-50%); right: -48px;}
.depth3-tab-link::after {content: ""; width: 0%; height: 13px; background-color: #d2e5ff; display: block; position: absolute; bottom: 2px; z-index: -1; border-radius: 6px; left: 50%; transform: translateX(-50%); transition: 0.2s ease-in-out;}
.depth3-tab-link:hover::after {width: 102%;}
.depth3-tab-link.is-active::after {width: 102%; transition: none !important;}

.sub_contents {padding: 100px 0;}
.sub-contents-title {padding-bottom: 36px;}
.sub-title-text-item {font-weight: 700; font-size: 40px;}

.sub-section {} 
.sub-section ~ .sub-section {margin-top: 55px;}
.sub-body-list ~ .sub-body-list {margin-top: 15px;}

.form-length-col-2::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 110px; height: 1px; top: 20px; right: 95px;}
.form-length-col-3::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 218px; height: 1px; top: 20px; right: 95px;}
.form-length-col-4::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 327px; height: 1px; top: 20px; right: 95px;}
.form-length-col-5::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 436px; height: 1px; top: 20px; right: 95px;}

/* 자가검진·상담 채널 > 개인용 자가검진1 */
.sub-form-head, .sub-top-head {text-align: right; padding-bottom: 20px;}
.sub-form-etc, .sub-top-etc {font-weight: 400; color: var(--gray-color);}
.sub-form-body-box {background-color: #f8f8f8; padding: 70px 50px;}
.sub-body-title {text-align: center; padding-bottom: 42px;}
.sub-body-text {font-size: 25px; font-weight: 600;}
.sub-form-body-box .sub-body-wrap {display: flex; flex-wrap: wrap; gap: 30px 18px;}
.sub-form-body-box .article-body-item.check-btn, .sub-form-body-box .article-body-item.radio-btn {background-color: var(--white-color); display: flex; width: 320px; border-radius: 35px; overflow: hidden; outline: 1px solid var(--line-color); color: #333333;}
.sub-form-body-box .article-body-item.on {outline: 3px solid var(--point-color);}
.article-body-item input[type=checkbox], .article-body-item.radio-btn input[type=radio] {margin: 0; appearance: none; position: absolute; opacity: 0; font-size: 0; width: 0; height: 0;}
#personal .article-body-item input[type=checkbox] + label, #personal .article-body-item.radio-btn input[type=radio] + label, #organization .article-body-item input[type=checkbox] + label, #organization .article-body-item.radio-btn input[type=radio] + label {position: relative; cursor: pointer; display: block; font-size: 18px; height: 65px; width: 100%; padding-left: 58px; transition: 0.2s; padding-right: 10px; display: flex; align-items: center;}
.article-body-item input[type=checkbox] + label, .article-body-item.radio-btn input[type=radio] + label {position: relative; cursor: pointer; display: block; font-size: 18px; width: 100%; padding-left: 30px; transition: 0.2s; display: flex; align-items: center;}

#personal .article-body-item:hover input[type=checkbox] + label, #personal .article-body-item.radio-btn:hover input[type=radio] + label, #organization .article-body-item:hover input[type=checkbox] + label, #personal .article-body-item.radio-btn:hover input[type=radio] {color: var(--point-color);}
#personal .article-body-item input[type=checkbox] + label::before, #personal .article-body-item.radio-btn input[type=radio] + label::before, #organization .article-body-item input[type=checkbox] + label::before, #organization .article-body-item.radio-btn input[type=radio] + label::before {content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: #efefef; position: absolute; top: 50%; transform: translateY(-50%); left: 20px;}
.article-body-item input[type=checkbox] + label::before, .article-body-item.radio-btn input[type=radio] + label::before {content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: #efefef; position: absolute; top: 50%; transform: translateY(-50%); left: 0px;}
#personal .article-body-item input[type=checkbox] + label::after, #personal .article-body-item.radio-btn input[type=radio] + label::after, #organization .article-body-item input[type=checkbox] + label::after, #organization .article-body-item.radio-btn input[type=radio] + label::after {content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; top: 50%; transform: translateY(-50%); left: 25px; background-image: none;}
.article-body-item input[type=checkbox] + label::after, .article-body-item.radio-btn input[type=radio] + label::after {content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; top: 50%; transform: translateY(-50%); left: 5px; background-image: none;}
#personal .article-body-item input[type=checkbox]:checked + label::before, #personal .article-body-item.radio-btn input[type=radio]:checked + label::before, #organization .article-body-item input[type=checkbox]:checked + label::before, #organization .article-body-item.radio-btn input[type=radio]:checked + label::before {left: 20px; width: 25px; height: 25px; background-color: var(--point-color);}
.article-body-item input[type=checkbox]:checked + label::before, .article-body-item.radio-btn input[type=radio]:checked + label::before {left: 0px; width: 25px; height: 25px; background-color: var(--point-color);}
.article-body-item input[type=checkbox]:checked + label::after, .article-body-item.radio-btn input[type=radio]:checked + label::after {opacity: 1; background-image: url("/source/img/sub-check-icon.png"); background-repeat: no-repeat; width: 25px; height: 25px; background-color: transparent; background-position: center; left: 0px;}
#personal .article-body-item input[type=checkbox]:checked + label::after, #personal .article-body-item.radio-btn input[type=radio]:checked + label::after, #organization .article-body-item input[type=checkbox]:checked + label::after, #organization .article-body-item.radio-btn input[type=radio]:checked + label::after {opacity: 1; background-image: url("/source/img/sub-check-icon.png"); background-repeat: no-repeat; width: 25px; height: 25px; background-color: transparent; background-position: center; left: 20px;}

.sub-form-box {border-top: 1px solid #444444;}
.sub-form-row {border-bottom: 1px solid var(--line-color); display: flex; align-items: stretch;}
.sub-form-title {font-weight: 400; width: 139px; padding: 20.5px 0; background-color: #f8f8f8; line-height: normal; text-align: center; display: flex; justify-content: center; align-items: center;}
.form_required {position: relative; display: inline-block;}
.form_required::before {content: ""; width: 8px; height: 8px; background-image: url("/source/img/sub-req-icon.png"); background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: -10px;}
.sub-form-radio, .sub-form-tel, .sub-form-text {display: flex; padding: 0 30px; height: 100%; align-items: center;}
.sub-form-text:has(.article-date-box) {flex-wrap: wrap; gap: 5px 0;}
.sub-form-radio {gap: 20px 40px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;}
.sub-form-radio .article-body-item {color: #333333;}
.sub-form-item-text {padding: 0 15px; color: var(--gray-color);}
.article-body-item input[type=text] {border: 1px solid var(--line-color); display: block; height: 100%; padding: 10px 15px; width: 100%;}
.article-body-item input[type=radio] {margin: 0; appearance: none; position: absolute; opacity: 0; font-size: 0; font-size: 0; width: 0; height: 0;}
.article-body-item input[type=radio] + label {position: relative; padding-left: 30px; cursor: pointer;}
.article-body-item input[type=radio] + label::before {position: absolute; content: ""; width: 20px; height: 20px; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); background-color: #efefef;}
.article-body-item input[type=radio] + label::after {position: absolute; content: ""; width: 10px; height: 10px; border-radius: 50%; left: 5px; top: 50%; transform: translateY(-50%); background-color: #ffffff;}
.article-body-item input[type=radio]:checked + label::before {background-color: var(--point-color);}

.sub-form-text .article-body-item {width: 100%;}
.article-item-select {appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 41px; padding: 0 70px 0 17px; background-image: url("/source/img/sub-slec-icon.png"); background-repeat: no-repeat; background-position: right 18px center; border: 1px solid var(--line-color); color: #999999; margin-left: 16px; cursor: pointer;}
.article-item-select > option {color: #666666; font-weight: 300;}
.i-input {max-width: 110px;}
.size-full {max-width: 415px;}
.sub-form-content {width: calc(100% - 139px);}
.i-input::placeholder {color: #999999;}

.form-body-textbox-content {border: 1px solid var(--line-color); margin-top: 30px; text-align: left;}
.form-body-textarea {padding: 35px; width: 100%; border: none; min-height: 252px; font-size: 14px; color: var(--gray-color); resize: none; white-space: pre-wrap; height: 100%; line-height: 1.5;}
.form-body-textbox-check {padding: 47px 0 0px; text-align: right; color: var(--gray-color);}
.form-textbox-check-text {cursor: pointer;}
.form-body-textbox-check input[type=checkbox] {margin: 0; appearance: none; position: absolute; opacity: 0; font-size: 0; width: 0; height: 0;}
.form-body-textbox-check input[type=checkbox] + label {position: relative; padding-left: 30px;}
.form-body-textbox-check input[type=checkbox] + label::before {position: absolute; content: ""; width: 20px; height: 20px; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--line-color); background-image: url("../img/sub-check-icon.png"); background-repeat: no-repeat; background-position: center;}
.form-body-textbox-check input[type=checkbox]:checked + label::before {background-color: var(--point-color);}
.sub-form-button {text-align: center;}
.form-submit-btn, .link-go-btn {font-size: 20px; font-weight: 500; background-color: var(--point-color); padding: 18px 128px; color: #ffffff; border-radius: 6px; border: 1px solid var(--point-color); transition: 0.2s;}
.form-submit-btn:hover {background-color: var(--white-color); border-color: var(--point-color); color: var(--point-color);}

/* 자가검진·상담 채널 > 개인용 자가검진2 */
.article-body-item.width {width: 100%; height: 100%;}
.sub-body-list {background-color: var(--white-color); width: 100%; padding: 15px 25px; border-radius: 10px; border: 1px solid var(--line-color);}
.sub-list-box {display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 18px; color: #333333;}
.sub-body-button-text {color: #999999; background-color: var(--line-color); padding: 8px 0; border-radius: 16px; font-size: 14px; width: 88px; text-align: center; margin-left: 10px;}
.sub-body-button.button-done .sub-body-button-text {background-color: var(--point-color); color: var(--white-color);}

.list-gray-color {background-color: #f8f8f8;}
.sub-form-wrap-title {align-items: center; padding: 16px 40px;}

.sub-form-row.sub-form-wrap-title {padding-left: 0px;}
.sub-form-personal-list .sub-form-title {justify-content: flex-start;}
.sub-form-row.sub-form-wrap-title .sub-form-title {padding: 0 36px; width: calc(100% - 100px);}
.sub-form-title-etc {padding-left: 20px; line-height: 25px;}
.sub-form-wrap-title .sub-form-content {display: flex; justify-content: flex-end; width: 100px !important;}
.sub-form-personal-list .sub-form-title {width: calc(100% - 620px); background-color: transparent; text-align: left; padding: 0; display: flex; position: relative; padding-left: 57px;}
.sub-form-h1 {font-weight: 700; font-size: 18px;}
.sub-row-padding {align-items: center; padding: 13px 0;}
.sub-form-question-number {color: var(--point-color); font-size: 16px; position: absolute; top: 1px; left: 57px; display: block;}
.sub-form-personal-list .sub-form-question {font-size: 18px; text-align: left;}
.sub-form-personal-list:has(.sub-form-question-number) .sub-form-question {padding-left: 38px;}
.sub-form-personal-list-content {width: 620px;}
.sub-form-personal-list-content .sub-form-radio {gap: 6px; justify-content: flex-end; position: relative; align-items: flex-start;}
.sub-form-personal-list-content .article-body-item {display: block; padding-top: 35px; width: 105px; text-align: center;}
.sub-form-personal-list .sub-form-radio {padding-right: 40px;}
.sub-form-personal-list-content input[type=radio] + label {font-size: 14px; padding-left: 0; display: block; position: relative;}
.sub-form-personal-list-content input[type=radio] + label::before {position: absolute; top: -33px; left: 50%; transform: translateX(-50%); background-color: #d1d1d1;}
.sub-form-personal-list-content input[type=radio] + label::after {top: -28px; left: 50%; transform: translateX(-50%);}
.sub-form-footer {font-weight: 400; font-size: 14px; text-align: right; padding-top: 20px;}
.sub-form-personal-list-vertical.padding-top {padding-top: 50px;}
.sub-form-personal-list-vertical .sub-form-content {width: 290px; padding: 0;}
.sub-form-personal-list-vertical .sub-form-title {width: calc(100% - 290px);}
.sub-form-personal-list-vertical .sub-form-radio {flex-direction: column; gap: 2px; align-items: flex-start;}
.sub-form-personal-list-vertical .article-body-item {padding: 0; margin: 0; width: auto; text-align: left; margin: 5px 0;}
.sub-form-personal-list-vertical .sub-form-radio::before {display: none;}
.sub-form-personal-list-vertical .sub-form-radio {padding: 0;}
.sub-form-personal-list-vertical input[type=radio] + label {font-size: 16px; color: #666666; padding-left: 30px;}
.sub-form-personal-list-vertical input[type=radio] + label::before {left: 10px; top: 0px;}
.sub-form-personal-list-vertical input[type=radio] + label::after {left: 10px; top: 5px;}

.sub-button-wrap {display: flex; justify-content: center; gap: 10px;}
.form-white-color-btn {background-color: var(--white-color); border-color: var(--line-color); color: var(--black-color);}

.sub-form-wrap-title > .paddin-top-bottom {margin: 10px 0; align-items: center;}
.sub-form-row-group {display: flex; align-items: center; height: 100%; justify-content: space-between; width: 100%; position: relative;}
.sub-row-item-title {position: relative; width: 70px; position: absolute; top: 0; bottom: 0;}
.row-item-title-text {background-color: #f2f5fc; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-color); font-size: 18px; font-weight: 600; color: var(--blue-color); padding: 0 20px; text-align: center;}
.sub-form-row-group .sub-form-row-wrap {width: calc(100% - 70px); margin-left: 70px;}
.sub-form-row-group:last-child .row-item-title-text {border-bottom: 1px solid var(--line-color);}
.sub-form-row-group .sub-form-title {padding-left: 0;}
.sub-form-row-group .sub-form-question-number {left: 20px;}
.sub-form-row-group .sub-form-question {padding-left: 0;}
.sub-form-row-group .sub-form-content {width: 620;}
.sub-form-row-group .sub-form-title {width: calc(100% - 620px);}
.sub-form-row-group .sub-form-row {width: 100%;}
.sub-form-row-group:has(~ .sub-form-row-group) .row-item-title-text {border-top: transparent;}

/* 자가검진·상담 채널 > 개인용 자가검진-검사완료 페이지 */
.complete-page .verification-icon-img {width: fit-content; height: auto;}

/* 자가검진·상담 채널 > 단체용 자가검진1 */
.sub-code-popup {position: fixed; background-color:rgba(0, 0, 0, 0.6); top: 0; bottom: 0; right: 0; left: 0; z-index: 100;}
.code-popup-box {padding: 33px 30px; background-color: var(--white-color); border-radius: 8px; border: 1px solid var(--line-color); display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 477px; width: 100%;}
.popup-text {font-size: 18px; font-weight: 500; padding-bottom: 20px; text-align: center;}
.code-popup-box .popup-input {border: 1px solid var(--line-color); margin-bottom: 30px; width: 100%; height: 40px; padding: 0 10px;}
.pop-button {display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 16px; font-weight: 500;}
.pop-button button {padding: 10px 20px; border-radius: 6px;}
.pop-button .ok-btn {background-color: var(--point-color); color: var(--white-color); border: none;}
.pop-button .close-btn {background-color: var(--white-color); border: 1px solid var(--line-color);}

.section-top-textbox {border-radius: 18px; border: 1px solid var(--line-color); display: flex; justify-content: space-between; padding: 21px 64px; align-items: center; gap: 10px;}
.left-head-textbox {font-weight: 700; font-size: 22px; color: #333333;}
#organization .left-head-textbox {margin-bottom: 16px;}
.blue-color-text {color: var(--point-color);}
.right-img-content {width: 193px; height: 147px;}
#organization .left-text-content {width: calc(100% - 193px);}
.right-img-icon {width: 100%; height: 100%;}
.left-etc-textbox {color: #333333; font-size: 16px; font-weight: 400;}
.left-footer-textbox {color: #333333; margin-top: 16px; font-weight: 500; font-size: 16px;}
.left-footer-textbox .a-color {color: #333333; font-weight: 500; font-size: 16px;}

/* 자가검진·상담 채널 > 단체용 자가검진2 */
.user-verification {padding: 58px 0; width: 100%; border-radius: 18px; border: 1px solid var(--line-color);}
.user-verification .verification-icon-img {width: fit-content; height: auto; margin: 0 auto; margin-bottom: 49px;}
.verification-head-title {font-size: 25px; font-weight: 700; text-align: center; padding-bottom: 23px; line-height: normal;}
.verification-etc {line-height: initial; font-size: 20px; font-weight: 500; text-align: center;}
.user-verification-btnbox {text-align: center;}
.user-verification-btn {background-color: var(--point-color); line-height: normal; font-size: 20px; color: var(--white-color); padding: 12px 23px; border: none; border-radius: 8px; transition: 0.2s; border: 1px solid transparent;}
.user-verification-btn:hover {background-color: var(--white-color); color: var(--point-color); border: 1px solid var(--point-color);}

/* 자가검진·상담 채널 > 단체용 자가검진-에러페이지 */
.error-icon-img {width: 181px; height: 183px; margin: 0 auto; margin-bottom: 49px;}
.user-verification-btn.back-btn {background-color: var(--white-color); color: var(--black-color); border: 1px solid var(--line-color); transition: 0.2s;}
.user-verification-btn.back-btn:hover {background-color: var(--black-color); color: var(--white-color); border: 1px solid var(--line-color);}
#organization .article-body-item.on {outline: 3px solid var(--point-color);}

/* 자가검진·상담 채널 > 단체용 자가검진4 */
.sub-form-title.paddin-top-bottom .sub-form-h1 {width: 146px; text-align: left;}
.sub-form-title.paddin-top-bottom .sub-form-title-etc {width: calc(100% - 146px); text-align: left;}
.sub-form-row-group .sub-form-row-wrap {border-top: none;}

/* 자가검진·상담 채널 > 온라인 상담1 */
.text-box-item {position: relative; margin-bottom: 10px;}
.text-box-item:last-child {margin-bottom: 0;}
.text-box-item::after {position: absolute; top: 8px; left: 0; content: ""; display: block; width: 4px; height: 4px; background-color: var(--black-color); border-radius: 50%;}
.text-box-wrap {margin-top: 20px;}
#online .left-etc-textbox {padding-top: 0; line-height: normal; padding-left: 20px;}
#online .section-top-textbox {padding: 48px 35px 48px 55px;}
.online-img-content {min-width: 189px; height: 181px;}
#online .blue-color-text, .text-sembold {font-weight: 600;}
.small-blue-btn {text-align: center; display: flex; justify-content: flex-end;}
.small-text-btn_a {font-size: 20px; line-height: none; font-weight: 500; color: var(--white-color); padding: 15px 0; background-color: var(--point-color); border-radius: 8px; width: 120px;}
.password-check-form {text-align: center; padding: 0 0 30px;}
.title-h-txt {margin-bottom: 20px; font-size: 20px;}
.txt-p {margin-bottom: 30px; color: #333333;}
.form-article {max-width: 400px; margin: 0 auto;}
.input-pw {width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #dddddd;}
.pw-btns {display: flex; gap: 10px;}
.pw-button {flex: 1; padding: 12px; border-radius: 8px; background: var(--point-color); color: #ffffff; border: none; cursor: pointer;}
.pw-button:hover {background-color: var(--blue-color); transition: 0.2s ease-in-out;}
.pw-link {flex: 1; padding: 12px; background: #6c757d; color: #ffffff; border: none; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; border-radius: 8px; transition: 0.2s ease-in-out;}
.pw-link:hover {background-color: var(--black-color);}

/* 자가검진·상담 채널 > 온라인 상담_리스트 */
.mo_contents {display: none;}
.section-top-textbox.big-textbox {padding: 48px 44px;}
.section-top-textbox.big-textbox .left-etc-textbox {padding-top: 0;}
.section-top-textbox.big-textbox .blue-color-text {font-weight: normal; font-weight: 600;}
.section-top-textbox.big-textbox .text-box-item {padding-left: 24px;}
#online-list .bo-top-info {display: flex; flex-direction: column-reverse;}
.bo-sch-wrap {width: 100%; background-color: #F8F8F8; padding: 23px 15px; border-radius: 10px;}
.bo-sch {width: 100%; display: flex; justify-content: center;}
.bo-sch-ct {display: flex; align-items: center; gap: 5px; max-width: 605px; width: 100%;}
.bo-sch .sch-bar {display: flex; width:calc(100% - 160px);}
.bo-sch .sch-input {background-color: var(--white-color); width: calc(100% - 44px); float: none; height: 50px; box-sizing: border-box; border-radius: 3px 0 0 3px; border: 1px solid var(--line-color); padding: 0 10px;}
.sch-input::placeholder {font-size: 16px; font-weight: 400; color: #999999;}
.sch-btn {background-color: var(--point-color); color: var(--white-color); font-size: 18px; float: none; width: 48px; height: 50px; border-radius: 0 3px 3px 0; border: 1px solid var(--line-color); border-left: transparent;}
.bo-sch-ct select {border-radius: 3px; height: 50px; max-width: 160px; font-size: 16px; font-weight: 400; color: #999999; padding: 0 30px 0 18px; box-sizing: border-box; width: 100%; border: 1px solid var(--line-color);}
#online-list .sch-back {min-width: 48px; height: 48px; color: var(--gray-color); background-color: var(--line-color);}
.bo-sch #sfl {appearance: none; background-image:url('/source/img/sub-slec-down-icon.png'); background-repeat: no-repeat; background-position: right 15px center;}
#online-list .tbl-head-text table {border-top: 1px solid #444444; table-layout: fixed; width: 100%;}
#online-list .tbl-head-text tr {border-bottom: 1px solid var(--line-color);}
#online-list .tbl-head-text tr:hover {border-bottom: 1px solid var(--line-color); background-color: #F8F8F8;}
#online-list .tbl-head-text td {border-right: 1px solid var(--line-color);}
#online-list .tbl-head-text td:last-child {border-right:transparent;}
#online-list .tbl-head-text thead {background-color: #f8f8f8;}
#online-list .tbl-head-text thead th {border-right: 1px solid var(--line-color); color: var(--black-color); font-size: 18px; font-weight: 500; padding: 19px 22px; border-bottom: 1px solid var(--line-color);}
#online-list .tbl-head-text thead th:last-child {border-right: transparent;}
#online-list .tbl-head-text tbody td.td-date {padding-left: 20px; padding: 17px 20px;}
#online-list .colgroup-col1 {width: 112px;}
#online-list .colgroup-col3 {width: 149px;}
#online-list .colgroup-col4 {width: 190px;}
#online-list .colgroup-col5 {width: 148px;}
#online-list .td-title {padding: 0 33px;}
#online-list .td-text-etc {max-width: calc(100% - 94px);}
#online-list .text {font-size: 16px; font-weight: 400; color: #333333; text-align: center;}
#online-list .td-title-list-link {display: flex;}
#online-list .td-title-list-link:hover {display: flex; text-decoration: underline;}
#online-list .td-title .text {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#online-list .td-title-icon {min-width: 19px; height: 19px; background-color: #d2e5ff; border-radius: 2px; display: flex; justify-content: center; align-items: center; margin-left: 8px;}
#online-list .tbl-head-text .td-btn {display: flex; flex-direction: column; align-items: center; width: 100%; justify-content: center; height: 100%; margin-top: 12px;}
#online-list .tbl-head-text .mark-box {width: 83px; height: 28px; color: var(--white-color); font-size: 16px; font-weight: 600; border-radius: 3px; display: flex; justify-content: center; align-items: center;}
#online-list .wait-mark {background-color: #f08200;}
#online-list .complete-mark {background-color: var(--gray-color);}
#online-list .td-row-all-text {width: 100%; padding: 50px 0; text-align: center; color: var(--gray-color); font-size: 16px;}
#online-list .td-row-all {border-bottom: 1px solid var(--line-color);}
.small-blue-btn {text-align: center; display: flex; justify-content: flex-end;}
.small-text-btn-a {font-size: 20px; line-height: normal; font-weight: 500; color: var(--white-color); padding: 15px 0; background-color: var(--point-color); border-radius: 8px; width: 120px; transition: 0.3s;}
.small-text-btn-a:hover {background-color: var(--blue-color);}

/* 자가검진·상담 채널 > 온라인 상담_글쓰기 */
.sub-form-content.textbox {padding: 10px 30px;}
.textarea-tag {width: 100%; height: 318px; resize: none; border: 1px solid var(--line-color); padding: 12px;}
.sub-form-row-wrap {border-top: 1px solid var(--black-color);}
.form-body-textbox-check {padding: 12px 0 40px;}
.sub-section {margin-top: 55px; word-break: keep-all; overflow-wrap: anywhere;}
.not_margin {margin-top: 0px;}
.sub-form-select {margin: 10px 30px;}
.article-item-select {background-image: url("/source/img/sub-slec-down-icon.png");}
.article-item-select.no-margin {margin: 0;}
.article-body-item input[type=password] {border: 1px solid var(--line-color); display: block; height: 100%; padding: 10px 15px; width: 100%;}

/* 자가검진·상담 채널 > 온라인 상담_상세페이지 */
#online-detailed .sub-section.not_margin {margin: 0;}
#online-detailed .text {word-break: normal; padding: 10px 0; color: var(--gray-color);}
#online-detailed .title-center {display: flex; justify-content: center; align-items: center;}
#online-detailed .sub-form-personal-list {border-top: 1px solid var(--black-color); margin-top: 14px;}
#online-detailed .sub-section {margin-top: 55px;}
#online-detailed #bo_v_oth {display: flex; margin-top: 30px; justify-content: space-between;}
#online-detailed .bo_v_list_btn {display: flex; justify-content: flex-end;}
#online-detailed .bo_v_back_btn {display: flex; align-items: center; justify-content: center; transition: 0.2s; border: 1px solid var(--point-color); line-height: 50px; padding: 0 15px; font-size: 14px; font-weight: 400; color: #ffffff; background-color: var(--point-color); width: 93px; height: 48px; border-radius: 5px;}
#online-detailed .bo_v_back_btn:hover {background-color: var(--white-color); border: 1px solid var(--point-color); color: var(--point-color);}
#online-detailed #bo_v_oth .btn_bo_user > li > a {width: 93px; height: 48px; display: flex; align-items: center; justify-content: center;}
#online-detailed .bo_btn2 {line-height: 40px; padding: 0 15px; border: 1px solid #dddddd; border-radius: 5px; font-size: 14px; font-weight: 400; color: var(--black-color); background: #ffffff;}
#online-detailed .bo_btn3 {background-color: var(--gray-color); transition: 0.2s; border: 1px solid var(--gray-color); color: var(--white-color); border-radius: 5px;}
#online-detailed .bo_btn3:hover {background-color: rgb(239, 51, 51); border: 1px solid var(--line-color); border-color: rgb(239, 51, 51);}

#online-detailed .bo_v_oth {text-align: center; background-color: var(--white-color);}
#online-detailed .btn_bo_user {display: flex; gap: 5px;}
#online-detailed .article-item-select {background-image: url("/source/img/sub-slec-down-icon.png");}
#online-detailed .content-top {display: flex; justify-content: space-between; align-items: center;}
#online-detailed .sub-form-select {padding: 10px 0; margin-left: 30px;}
#online-detailed .comment-title {display: flex; margin-bottom: 16px;}
#online-detailed .content-top-left, #online-detailed .content-top-right {display: flex;}
#online-detailed .title-text {font-size: 20px; font-weight: 600;}
#online-detailed .comment-icon {color: var(--point-color) !important; font-size: 20px; padding-right: 7px;}
#online-detailed .comment-content {padding: 25px 8px; border-top: 1px solid var(--black-color); border-bottom: 1px solid var(--line-color);}
#online-detailed .comment-top-text {font-weight: 600; font-size: 16px;}
#online-detailed .comment-top-icon {font-size: 16px; color: #686868; padding-right: 4px;}
#online-detailed .time-text {font-weight: 500; padding-right: 7px;}
#online-detailed .time-date {color: var(--gray-color); font-weight: 400;}
#online-detailed .content-top-right-icon {color: var(--gray-color); padding-right: 8px;}
#online-detailed .content-bottom {margin-top: 22px;}
#online-detailed .article-item-select {margin-left: 0;}
#online-detailed .comment-btn {margin-top: 30px; display: flex; justify-content: flex-end; gap: 7px;}
#online-detailed .comment-btn button {width: 94px; height: 48px; border: none; border-radius: 4px; color: var(--white-color);}
#online-detailed .comment-btn .edit {background-color: var(--point-color); transition: 0.3s;}
#online-detailed .comment-btn .edit:hover, #online-detailed .sign-up:hover {background-color: var(--white-color); border: 1px solid var(--point-color); color: var(--point-color);}
#online-detailed .comment-btn .del-btn {background-color: var(--black-color); transition: 0.3s;}
#online-detailed .comment-btn .del-btn:hover {background-color: var(--white-color); border: 1px solid var(--black-color); color: var(--black-color);}
#online-detailed .comment-content.not-padding {padding: 0;}
#online-detailed .sub-form-content.textbox {padding: 10px 0;}
#online-detailed .textarea-tag {padding: 10px; width: 100%; height: 400px; resize: none; border: 1px solid var(--line-color);}
#online-detailed .form_required::before {left: 30px; background-image: none; content: "*"; color: var(--point-color);}
#online-detailed .sign-up {background-color: var(--point-color); transition: 0.3s;}

/* 결과지 */
body:has(#result) > *:not(#contents_dom) {display: none !important;}
#result {margin: 0 !important;}
#result .sub-common-contents {margin-top: 20px;}
#result .personal-data-content {margin-bottom: 40px;}
#result .sub_contents {padding: 0;}
#result .top-title {margin-bottom: 20px; font-size: 20px; font-weight: 700;}
#result .personal-bottom {border-top: 2px solid var(--black-color);}
#result .personal-bottom-row {display: flex; border: 1px solid var(--line-color); border-top: transparent; border-left: transparent;}
#result .personal-bottom-item {display: flex; flex: 1;}
#result .personal-bottom-row:not(:has(.personal-bottom-item:nth-child(3))):has(.personal-bottom-item:nth-child(2)) .personal-bottom-item:first-child {max-width: calc(100% / 3);}
#result .margin-top ~ .margin-top {margin-top: 40px;}
#result .bold_title {display: flex; align-items: center; justify-content: center; width: 132px; height: 100%; padding: 22px 0; background-color: #f8f8f8; border-right: 1px solid var(--line-color); border-left: 1px solid var(--line-color); font-weight: 500; font-size: 18px;}
#result .personal-bottom-item .text {display: flex; align-items: center; width: auto; flex: 1; padding: 10px 10px; color: #999999; font-size: 16px; font-weight: 300; word-break: break-all;}

#result .result-content-item {padding: 24px 36px; border-radius: 12px; background-color: #f8f8f8; box-shadow: 5px 6px 6px rgba(19, 61, 122, 0.1);}
#result .item-title {margin-bottom: 26px; margin-left: -15px; font-size: 14px; font-weight: 500; color: #333333;}
#result .item-article {display: flex; align-items: center; justify-content: start; gap: 35px; padding: 35px 30px; background-color: var(--white-color); border-radius: 8px; border: 1px solid var(--line-color);}
#result .article-left {font-size: 0;}
#result .article-right {max-width: calc(100% - 97px - 35px);}
#result .left-icon {overflow: hidden; width: 97px; aspect-ratio: 97 / 96; position: relative;}
#result .left-icon img {display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain;}
#result .right-title {margin-bottom: 20px; font-family: "GmarketSans", sans-serif; font-weight: 300; font-size: 23px;}
#result .point-text {display: inline-block; font-weight: 500; position: relative;}
#result .point-text::before {content: ""; display: block; height: 9px; width: 104%; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background-color: #ffeab0; mix-blend-mode: multiply;}
#result .right-text {font-weight: 300;}
#result .right-text strong {font-weight: 600;}
#result .right-text br {display: block;}
#result .link_go {text-decoration: underline; text-underline-offset: 3px; font-weight: 500;}

#result .item-level {margin-top: 70px;}
#result .level-step {display: flex; align-items: center; height: 45px; border-radius: 21px;}
#result .level-col {position: relative; display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--white-color); font-size: 14px; font-weight: 300;}
/* #result .level-col {min-width: min-content; flex-shrink: 1 !important; flex-grow: 1 !important;} */
#result .level-col:first-child {border-radius: 21px 0 0 21px;}
#result .level-col:last-child {border-radius: 0 21px 21px 0;}
#result .level-pick-icon {width: 47px; aspect-ratio: 47 / 61; position: absolute; bottom: calc(100% - 10px); left: 50%; transform: translateX(-50%); background: url("/source/img/result-pick-icon.png") no-repeat center center / contain;}
#result .red-color {background-color: #e75928;}
#result .orange-color {background-color: #f08200;}
#result .green-color {background-color: #4aa36d;}
#result .blue-color {background-color: #4793ff;}

#result .result-data-content {margin-bottom: 70px;}

#result .bar-graph {position: relative; height: 32px; margin-top: 20px; border-radius: 0 4px 4px 0; background-color: #e9e9e9;}
#result .color-bar {display: flex; align-items: center; justify-content: center; height: 100%; position: relative; border-radius: 0 16px 16px 0; text-align: center; font-size: 14px; color: var(--white-color); font-weight: 500;}
#result .max-point {position: absolute; top: 50%; transform: translateY(-50%); right: 0; padding-right: 12px; color: var(--gray-color); font-size: 12px;}

#result .color-bar.blue {background:linear-gradient( #40ccff, #0075cf);}
#result .color-bar.red {background:linear-gradient( #e75928, #c74b20);}
#result .color-bar.orange {background:linear-gradient( #f08200, #edb169);}
#result .color-bar.green {background:linear-gradient( #4aa36d, #3f8f5f);}
#result .color-bar.pink {background:linear-gradient( #ff5796, #ff7aac);}
#result .color-bar.purple {background:linear-gradient( #8f3dd5, #7129af);}

#result .bar-graph-text {position: absolute; left: calc(100% + 13px); top: 50%; transform: translateY(-50%); color: var(--black-color); font-size: 16px; font-weight: 500;}
#result .point_full .bar-graph-text {left:calc(100% - 52px);}
#result .color-bar.point_full.fon-f6 .bar-graph-text {color: var(--white-color);}

#result .result-floor-content .wrapper2 {background: #9bd2ea url("/source/img/result-cloud-bg.png") no-repeat bottom center / contain;}
#result .result-floor-wrap {padding-top: 70px;}
#result .floor-text-box {overflow: hidden; position: relative; max-width: 908px; margin: 0 auto; padding: 52px 20px; border-radius: 18px; background-color: var(--white-color); font-weight: 300; font-size: 18px; line-height: 150%; text-align: center;}
#result .floor-text-box::before {content: ""; position: absolute; bottom: -6px; right: -9px; display: block; width: 180px; aspect-ratio: 180 / 175; background: url("/source/img/sub-icon-01.png") no-repeat center center / contain;}
#result .floor-textbox-text br {display: block;}
#result .floor-text-box .text-point {font-weight: 500;}
#result .floor-textbox-text ~ .floor-textbox-text {margin-top: 38px;}

#result .floor-link-box {max-width: 908px; margin: 0 auto; padding: 45px 20px; border-radius: 18px; background-color: var(--white-color); text-align: center;}
#result .link-title {margin-bottom: 33px; font-size: 25px; font-weight: 700; font-family: 'GmarketSans', sans-serif;}
#result .link-box {display: flex; gap: 17px; flex-wrap: wrap;}
#result .link-box-item {width: calc((100% - 17px * 3) / 4); padding: 16px 0; border-radius: 10px; background-color: var(--point-color);}
#result .link-icon, #result .link-item-title {color: var(--white-color);}
#result .link-icon {margin-bottom: 9px; font-size: 26px;}
#result .link-item-title {margin-bottom: 10px; font-size: 15px; font-weight: 500;}
#result .bg-blue {background-color: var(--blue-color);}
#result .link-item-number > a {font-size: 15px; font-weight: normal; font-family: "GmarketSans", sans-serif; font-weight: 400; color: var(--white-color);}

#result .result-service-tel {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 910px; margin: 40px auto 0; padding: 20px 40px; border-radius: 18px; background-color: var(--white-color);}
#result .service-left-title {display: flex; align-items: center;}
#result .service-left-title .left-title br {display: block;}
#result .clock24-icon {width: 61px; aspect-ratio: 61 / 58; background: url("/source/img/clock24-icon.png") no-repeat center / contain;}
#result .service-left-title .left-title {margin-top: 7px; padding-left: 14px; font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: 20px; text-align: center;}
#result .service-right-textbox {display: flex; align-items: center; gap: 10px; width: calc(100% - 280px); justify-content: space-between;}
#result .service-item {display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center;}
#result .service-item ~ .service-item {border-left: 1px solid var(--line-color);}
#result .service-right-textbox .text {font-size: 18px; font-weight: 500;}
#result .icon-box {font-size: 0; line-height: 1;}
#result .icon-box i {color: var(--point-color); font-size: 22px;}
#result .icon-tel {display: flex; align-items: center; margin-top: 8px;}
#result .tel-link {margin-top: 0.3em; font-size: 20px; color: var(--point-color); font-family: "GmarketSans", sans-serif; font-weight: 600;}
#result .result-floor-bg {max-width: 100%; width: 553px; aspect-ratio: 556 / 526; margin: 120px auto 0; background: transparent url("/source/img/result-love-bg.png") no-repeat center top / contain;}

.pr-title {padding-left: 1em; font-weight: 600;}
.pr-list > li {margin-left: 0.5em; padding-left: 1em; text-indent: -1em;}
.pr-list > li::before {content: "-"; margin-right: 0.6em;}

.result-btn-wrap {text-align: center; padding: 30px 0; display: flex; gap: 10px 15px; justify-content: center; flex-wrap: wrap;}
.result-btn {display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 15px 35px; border-radius: 8px; border: none; font-size: 16px; font-weight: 600; line-height: 1; color: #ffffff; text-decoration: none; transition: all 0.3s;}
.result-btn > i {font-weight: 400;}
.result-btn.view {background-color: #667eea;}
.result-btn.view:hover {background-color: #5568d3;}
.result-btn.council {background-color: #48bb78;}
.result-btn.council:hover {background-color: #38a169;}
.result-btn.print {background-color: #4299e1;}
.result-btn.print:hover {background-color: #3182ce;}

@media print {
  #result .result-floor-bg, #result .result-btn-wrap {display: none;}
  
  #result .personal-data-content {margin-bottom: 30px;}
  #result .top-title {font-size: 18px; margin-bottom: 15px;}
  #result .bold_title {width: 120px; font-size: 17px;}
  #result .bold_title {width: 100px; padding: 10px 0; font-size: 16px;}
  #result .personal-bottom-item .text {font-size: 14px;}

  #result .result-content-item {padding: 20px 20px; border-radius: 6px; border: 1px solid #cccccc; box-shadow: unset; break-inside: avoid;}
  #result .margin-top ~ .margin-top {margin-top: 20px;}
  #result .item-title {margin-bottom: 10px; margin-left: 0; font-size: 13px;}
  #result .item-article {gap: 15px; padding: 20px;}
  #result .article-right {max-width: 100%;}
  #result .article-left {display: none;}
  #result .left-icon {width: 70px;}
  #result .right-title {margin-bottom: 10px; font-size: 18px; font-weight: 500;}
  #result .right-text br {display: none;}
  #result .link_go + i {display: none;}

  #result .item-level {margin-top: 15px;}
  #result .result-data-content {margin-bottom: 30px;}
  #result .level-step {flex-wrap: wrap; justify-content: center; gap: 5px; height: auto; border-radius: 0;}
  #result .level-col {display: block; flex: none !important; width: auto !important; padding: 5px 10px; border-radius: 3px !important; font-size: 13px; text-align: left;}
  #result .level-pick-icon {width: 30px; bottom: calc(100% - 4px); display: none;}
  #result .level-col:has(.level-pick-icon) {outline: 3px solid #ff1515;}
  #result .level-col:not(:has(.level-pick-icon)) {opacity: 0.7;}

  #result .color-bar {font-size: 13px;}
  #result .max-point {top: -10px;}
  #result .bar-graph {margin-top: 15px;}
  #result .bar-graph-text {font-size: 14px;}
  #result .row-graph-wrap .bar-graph {margin-top: 20px;}

  #result .result-floor-wrap {padding-top: 20px;}
  #result .floor-text-box {padding: 20px 10px; border-radius: 9px; font-size: 16px; break-inside: avoid;}
  #result .floor-text-box::before {width: 100px;}
  #result .floor-textbox-text ~ .floor-textbox-text {margin-top: 25px;}

  #result .floor-link-box {padding: 20px; border-radius: 9px; break-inside: avoid;}
  #result .link-title {margin-bottom: 10px; font-size: 20px;}
  #result .link-box {gap: 12px; justify-content: space-between;}
  #result .link-box-item {width: calc(50% - 6px); padding: 0 10px; background-color: transparent !important;}
  #result .link-icon, #result .link-item-title, #result .link-item-number > a {color: #000000;}
  #result .floor-link-a {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px;}
  #result .link-icon {margin-bottom: 0; font-size: 20px;}
  #result .link-item-title {margin-bottom: 0; font-size: 14px;}
  #result .link-item-number > a {font-size: 14px;}
  #result .result-floor-content .wrapper2 {background: #9bd2ea; padding-bottom: 20px;}

  #result .result-service-tel {display: block; margin: 20px auto 0; padding: 15px 20px; border-radius: 9px; break-inside: avoid;}
  #result .service-left-title {justify-content: center; width: 100%; margin-bottom: 10px;}
  #result .service-left-title .left-title {margin-top: 0; padding-left: 10px; font-size: 18px;}
  #result .service-left-title .left-title br {display: none;}
  #result .service-right-textbox {width: 100%; justify-content: space-between;}
  #result .service-right-textbox .text {font-size: 16px;}
  #result .service-item {flex-direction: row; justify-content: center; gap: 10px;}
  #result .icon-box i {font-size: 18px;}
  #result .icon-tel {margin-top: 0;}
  #result .clock24-icon {width: 55px; display: none;}
  #result .tel-link {font-size: 18px;}
}

/* 평가지 */
body:has(#eval) > *:not(#contents_dom) {display: none !important;}
#eval {margin: 0;}
#eval .sub-form-title {justify-content: flex-start;}
#eval .sub_contents {margin: 20px 0; padding: 0;}
#eval .sub-form-question {font-size: 18px; font-weight: 300; word-break: break-all; text-align: left;}
#eval .sub-form-question-number {position: static; padding: 0 16px; font-weight: 700;}
#eval .print-top-btn {display: flex; justify-content: flex-end;}
#eval .print-btn {padding: 8px 32px; color: var(--white-color); font-size: 14px; font-weight: 300; background-color: var(--point-color); border-radius: 16px; border: none; line-height: normal; margin-bottom: 20px;}
#eval .eval-top {padding: 30px 17px; background-color: #f2f5fc; border-radius: 8px; margin-bottom: 30px; box-shadow: 5px 6px 6px rgba(19, 61, 122, 0.1);}
#eval .eval-top-title {font-size: 18px; font-weight: 700; color: var(--blue-color); font-family: 'GmarketSans', sans-serif; line-height: normal; margin-bottom: 6px;}
#eval .eval-top-text {font-size: 18px; font-weight: 300;}
#eval .sub-row-padding {padding: 0;}
#eval .sub-form-personal-list-content input[type=radio] + label {text-align: center; word-break: break-all;}
#eval .eval-bottom {border-top: 1px solid var(--line-color);}
#eval input[type=radio], #eval input[type=radio] + label {cursor: default;}

#eval .sub-form-title.radio-col2 {width: calc(100% - 287px); display: flex; background-color: transparent;}
#eval .sub-form-content.radio-col2 {width: 287px;}
#eval .sub-form-content.radio-col2 .sub-form-radio {gap: 4px;}
#eval .sub-form-content.radio-col2 .sub-form-radio::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 112px; height: 1px; top: 20px; right: 75px;}

#eval .sub-form-title.radio-col3 {width: calc(100% - 420px); display: flex; background-color: transparent;}
#eval .sub-form-content.radio-col3 {width: 420px;}
#eval .sub-form-content .sub-form-radio {gap: 4px;}
#eval .sub-form-content.radio-col3 .sub-form-radio::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 220px; height: 1px; top: 20px; right: 75px;}

#eval .sub-form-title.radio-col4 {width: calc(100% - 565px); display: flex; background-color: transparent;}
#eval .sub-form-content.radio-col4 {width: 565px;}
#eval .sub-form-content.radio-col4 .sub-form-radio::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 328px; height: 1px; top: 20px; right: 75px;}

#eval .sub-form-title.radio-col5 {width: calc(100% - 738px); display: flex; background-color: transparent;}
#eval .sub-form-content.radio-col5 {width: 738px;}
#eval .sub-form-content.radio-col5 .sub-form-radio::before {content: ""; display: block; position: absolute; background-color: #efefef; width: 440px; height: 1px; top: 20px; right: 75px;}
#eval .item-footer-text {font-size: 14px; font-weight: 400; color: var(--gray-color); margin-top: 19px; text-align: right;}
.eval-item ~ .eval-item {margin-top: 40px;}

/* 기관소개 > 인사말 { */
.greeting-text {display: flex; align-items: flex-start; justify-content: space-between;}
.greeting-text-left {width: 40%;}
.greeting-text-left .title {font-family: 'GmarketSans'; font-weight: 700; font-size: 35px; color: var(--black-color); line-height: 1.2;}
.greeting-text-left .title span {color: var(--point-color);}
.greeting-text-right {width: 57.5%;}
.greeting-text-right .content {font-weight: 400; font-size: 18px; color: #333333; line-height: 1.666;}
.greeting-text-right .content b {font-weight: 600;}
br.no-none {display: block !important;}
.greeting-text-right .master-sign {margin-top: 50px; display: flex; align-items: center; font-weight: 300; font-size: 20px; color: #333; gap: 10px;}
.greeting-text-right .master-name {font-weight: 600; font-size: 30px;}
/* } 기관소개 > 인사말 */

/* 기관소개 > 운영체계 { */
.os-img {text-align: center;}
/* } 기관소개 > 운영체계 */

/* 기관 소개 > 연혁 */
body:has(#history) {overflow-x: unset;}
#history .sub_contents {padding-bottom: 0;}
.history-container {display: grid; grid-template-columns: repeat(2, 1fr);}
.history-container > .left-container {display: flex; align-items: center; justify-content: center; position: sticky; top: 145px; height: calc(100vh - 145px) /* 헤더 높이만큼 빼기 */; min-height: fit-content; text-align: center;}
.history-container > .left-container {background: url('/source/img/sub-history-bg.png') no-repeat center center / cover;}
.history-container .slogan {color: #ffffff; font-size: 25px; font-weight: 600; margin-bottom: 20px;}
.history-container .slogan br {display: none;}
.history-container .years-wrap > .year ~ .year {margin-top: 15px;}
.history-container .years-wrap > .year > a {display: block; color: transparent; -webkit-text-stroke: 0.5px var(--white-color); font-size: 55px; font-weight: 700; line-height: 1; transition: .5s;}
.history-container .years-wrap > .year.on > a {color: #ffffff; -webkit-text-stroke: 0;}

.history-container > .right-container {padding: 53px 72px; padding-right: calc((100vw - 1700px) / 2);}
.history-bundle-item ~ .history-bundle-item {margin-top: 120px;}
.history-year-item ~ .history-year-item {margin-top: 120px;}
.year-title {margin-bottom: 40px;}
.year-title > img {display: block; height: 100%;}
.history-item {display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start; justify-content: start; font-size: 0;}
.history-item ~ .history-item {margin-top: 15px;}
.history-item > .month-title {overflow: hidden; position: relative; height: 0; padding-bottom: 29.032%;}
.history-item > .month-title > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.history-item > .text > li {color: #333333; font-weight: 300; font-size: 16px;}
.history-item > .text > li ~ li {margin-top: 10px;}

/* 기관 소개 > 미션 및 비전 */
.subvisual-container {display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1440 / 300; padding: 30px; border-radius: 18px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
#vision .subvisual-container {background-image: url("/source/img/sub-vision-bg.png");}
.subvisual-container .t1 {position: relative; padding-top: 15px; padding-bottom: 25px; color: #ffffff; font-size: 30px; font-weight: 700; line-height: normal;}
.subvisual-container .t1::before {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 52px; height: 1px; background-color: #ffffff;}
.subvisual-container .t2 {color: #ffffff; font-size: 40px; font-weight: 500; text-align: center; line-height: normal; font-family: "GmarketSans", sans-serif;}

.section-subtitle {margin: 0 auto 35px; width: fit-content; min-width: 195px; padding: 8px 15px; border-radius: 18px 0 18px 0; background-color: #246bd0; color: #ffffff; font-size: 30px; font-weight: 700; text-align: center;}
.vision-slogan {font-size: 35px; font-weight: 700; text-align: center; font-family: "GmarketSans", sans-serif;}
.vision-slogan .color {color: var(--point-color);}

/* :root {--arch-width: 708px; --circle-diameter: 286px; --border-width: 120px; --line-length: 70px;} */
:root {--arch-width: 618px; --circle-diameter: 250px; --border-width: 100px; --line-length: 60px;}

.vision-container {width: 100%; height: calc((var(--circle-diameter) * 1.5) + var(--line-length) + (var(--arch-width) / 2)); margin: 60px auto 0; position: relative; display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc(var(--circle-diameter) / 2);}
.vision-content {position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}
.vision-content .center-logo {width: calc(var(--arch-width) / 2); max-width: 337px; position: absolute; bottom: clamp(15px, 2vw, 40px); z-index: 10;}
.vision-content .center-logo img {width: 100%; height: auto; display: block;}
.vision-content .center-arch {position: absolute; bottom: 0; width: var(--arch-width); aspect-ratio: 2 / 1; border: var(--border-width) solid #EFF2FA; border-bottom: none; border-top-left-radius: 999px; border-top-right-radius: 999px; z-index: 1;}

.vision-content .value-list {position: absolute; bottom: 0; left: 50%; width: 0; height: 0; list-style: none; z-index: 5;}
.vision-content .value-item {position: absolute; bottom: 0; left: 50%; transform-origin: bottom center; height: calc(var(--arch-width) / 2); width: 0px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
.vision-content .value-item.pos-1 {transform: rotate(-90deg);}
.vision-content .value-item.pos-2 {transform: rotate(-45deg);}
.vision-content .value-item.pos-3 {transform: rotate(0deg);}
.vision-content .value-item.pos-4 {transform: rotate(45deg);}
.vision-content .value-item.pos-5 {transform: rotate(90deg);}

.vision-content .connector {position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 2px; height: var(--border-width);}
.vision-content .circle-s {position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 50%); display: block; width: 25px; height: 25px; background-color: #ffffff; border: 2px solid #3471CB; border-radius: 50%; box-sizing: border-box; z-index: 2; margin-bottom: -2px;}
.vision-content .line {display: block; width: 2px; height: var(--line-length); background-color: #AABCDF; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);}

.vision-content .circle {width: var(--circle-diameter); height: var(--circle-diameter); border-radius: 999px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; bottom: calc(var(--arch-width) / 2 + var(--line-length)); left: 50%; transform-origin: center center; background-clip: padding-box; border: 11px solid #ffffff; outline: 2px solid #3471CB; text-align: center; color: #ffffff;}
.vision-content .value-item.pos-1 .circle {transform: translateX(-50%) rotate(90deg);}
.vision-content .value-item.pos-2 .circle {transform: translateX(-50%) rotate(45deg);}
.vision-content .value-item.pos-3 .circle {transform: translateX(-50%) rotate(0deg);}
.vision-content .value-item.pos-4 .circle {transform: translateX(-50%) rotate(-45deg);}
.vision-content .value-item.pos-5 .circle {transform: translateX(-50%) rotate(-90deg);}
.vision-content .value-item:nth-child(odd) .circle {background-color: #103875; outline-color: #6b8bba;}
.vision-content .value-item:nth-child(even) .circle {background-color: #2764B7; outline-color: #8fb7f1;}
.vision-content .value-item .circle > i {display: block; margin-bottom: 5px; font-weight: 500; font-style: normal; text-align: center; font-family: "GmarketSans", sans-serif;}
.vision-content .value-item .circle > strong {display: block; font-size: 26px; font-weight: 500; text-align: center; font-family: "GmarketSans", sans-serif;}

.card-box {display: flex; align-items: stretch; justify-content: start; flex-wrap: wrap; gap: 22px;}
.card-item {display: flex; flex-direction: column; align-items: start; justify-content: end; width: calc((100% - 22px * 5) / 6); padding: 110px 20px 35px; background-color: #f8f8f8; background-repeat: no-repeat; background-position: right 13px top 19px; background-size: 76px; box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);}
.card-item:nth-child(1) {background-image: url("/source/img/sub-vision-icon01.png");}
.card-item:nth-child(2) {background-image: url("/source/img/sub-vision-icon02.png");}
.card-item:nth-child(3) {background-image: url("/source/img/sub-vision-icon03.png");}
.card-item:nth-child(4) {background-image: url("/source/img/sub-vision-icon04.png");}
.card-item:nth-child(5) {background-image: url("/source/img/sub-vision-icon05.png");}
.card-item:nth-child(6) {background-image: url("/source/img/sub-vision-icon06.png");}

.card-item .t1 {margin-bottom: 15px; font-size: 23px; font-weight: 300; line-height: normal; letter-spacing: -1px; font-family: "GmarketSans", sans-serif;}
.card-item .t2 {margin-bottom: 20px; font-size: 23px; font-weight: 500; line-height: 1.166; font-family: "GmarketSans", sans-serif;}
.card-item .t3 {}
.card-item .t3 > strong {font-weight: 600;}

/* 기관소개 > 대전광역정신건강복지센터 > 정신건강복지사업지원단 */
.sub-gray-box {}
.sub-gray-box .sub-titlebox {border-bottom: 1px solid var(--black-color);}
.sub-titlebox {font-size: 25px; font-weight: 700; padding-bottom: 40px;}
.sub-text-box-wrap {}
.text-box.border-radi {border: 1px solid var(--line-color); border-radius: 18px; padding-top: 27px; padding-bottom: 27px;}
.gray-title-box {font-size: 18px; font-weight: 500; background-color: #f8f8f8; padding: 20px 30px;}
.text-box {padding: 20px 30px; color: #333333; line-height: 142%;}
.box-text-wrap {padding: 23px 30px;}
.box-text-wrap .text-box {padding: 0;}
.text-box ~ .text-box {margin-top: 8px;}
.line {border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color);}
.dot {position: relative;}
.text-box.dot {padding-left: 26px;}
.dot::before {content: "•"; display: block; position: absolute; top: -1px; left: 0;}

/* 기관소개 > 대전광역정신건강복지센터 > 정신건강 홍보대사 「해피바이러스」 */
#hcb .text-box-item::after {display: none !important;}
#hcb .left-text-content {max-width: calc(100% - 163px);}
#hcb .img-content {width: 153px; aspect-ratio: 153 / 104;}
#hcb .section-top-textbox.big-textbox {align-items: center; padding: 17px 44px;}
#hcb .section-top-textbox.big-textbox .text-box-item {padding-left: 0;}

.profile-wrap {display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;}
.profile-item {display: flex; align-items: start; justify-content: space-between; gap: 20px; width: calc(50% - 13px); border-radius: 8px; padding: 24px 20px; border: 1px solid var(--line-color);}
.profile-img-box {width: 161px; aspect-ratio: 161 / 193; font-size: 0;}
.profile-img {width: 100%; height: 100%; object-fit: cover;}
.profile-text-box {flex: 1;}
.profile-title {margin-bottom: 20px;}
.profile-name {margin-top: 21px; margin-bottom: 15px; font-size: 22px; font-weight: 600;}
.profile-etc {font-weight: 500; color: var(--point-color);}
.career-box {border-top: 1px solid var(--line-color);}
.career-title {margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--point-color);}
.career-text-wrap {margin-top: 10px;}
.career-text ~ .career-text {margin-top: 5px;}
.career-text.dot {padding-left: 10px;}

/* 기관소개 > 대전광역정신건강복지센터 > 기관 캐릭터 「마음채널」 */
.sub-intro-img-box {display: flex; border: 1px solid var(--line-color); border-radius: 18px; padding: 30px 50px; justify-content: space-between;}
#hcc .sub-intro-img-box {min-height: 297px; background: #f8f8f8 url("/source/img/sub-mind-01.png") no-repeat right 67px center / contain;}
.intro-left {display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 20px; max-width: 75%;}
.intro-title-img {max-width: 573px; position: relative;}
#hcc .intro-title-img::after {content: ""; display: block; width: 106.63%; aspect-ratio: 611 / 33; margin-top: -1%; background: url("/source/img/sub-red-line.png") no-repeat left top / contain;}
.intro-left-text {line-height: 156%; color: #333333;}

#hcc .text-box {padding: 34px 66px; line-height: 156%;}
.box-img {overflow: hidden; width: 100%; height: 0px; padding-bottom: 26.51%; position: relative; border: 1px solid var(--line-color); border-radius: 18px;}
.box-img > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}

/* 기관소개 > 대전광역정신건강복지센터 > 사업소개 */
:is(#pra, #prb, #sls, #educationchannel) .depth3-tab-menu {justify-content: flex-start; gap: 106px; margin-left: 24px;}
:is(#pra, #prb, #sls, #educationchannel) .depth3-tab-link:not(:last-child)::before {right: -53px;}
.sub-icon-box-wrap {display: flex; align-items: stretch; justify-content: start; flex-wrap: wrap; gap: 25px;}
.sub-icon-box-item {overflow: hidden; position: relative; width: calc((100% - 50px) / 3); min-height: 357px; padding: 30px 30px 45px; border-radius: 18px; background-color: #f9f9f9; box-shadow: 2px 4px 6px rgba(19, 61, 122, 0.10);}
.sub-section:nth-child(odd) .sub-icon-box-item {background-color: #f2f5fc;}
.sub-icon-box-item::after {content: ""; display: block; width: 100%; height: 15px; position: absolute; bottom: 0; left: 0; right: 0; background-color: #b7d5ff;}
.icon-box-top .icon {display: block; margin: 0 auto; width: 102px; height: 102px; border-radius: 999px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain;}
.icon-box-top .title {margin: 15px auto 25px; font-size: 20px; font-weight: 700; text-align: center;}

.icon-box-bottom {position: relative; padding-top: 20px;}
.icon-box-bottom::after {content: ""; display: block; width: 75%; height: 1px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #d9d9d9;}
.icon-box-list .item {padding-left: 25px; font-weight: 400;}
.icon-box-list .item ~ .item {margin-top: 5px;}

#hcd .icon1 {background-image: url("/source/img/sub-hcd-01.png");}
#hcd .icon2 {background-image: url("/source/img/sub-hcd-02.png");}
#hcd .icon3 {background-image: url("/source/img/sub-hcd-03.png");}
#hcd .icon4 {background-image: url("/source/img/sub-hcd-04.png");}
#hcd .icon5 {background-image: url("/source/img/sub-hcd-05.png");}
#hcd .icon6 {background-image: url("/source/img/sub-hcd-06.png");}
#hcd .icon7 {background-image: url("/source/img/sub-hcd-07.png");}
#hcd .icon8 {background-image: url("/source/img/sub-hcd-08.png");}
#hcd .icon9 {background-image: url("/source/img/sub-hcd-09.png");}
#hcd .icon10 {background-image: url("/source/img/sub-hcd-10.png");}
#hcd .icon11 {background-image: url("/source/img/sub-hcd-11.png");}
#hcd .icon12 {background-image: url("/source/img/sub-hcd-12.png");}
#hcd .icon13 {background-image: url("/source/img/sub-hcd-13.png");}
#hcd .icon14 {background-image: url("/source/img/sub-hcd-14.png");}
#hcd .icon15 {background-image: url("/source/img/sub-hcd-15.png");}
#hcd .icon16 {background-image: url("/source/img/sub-hcd-16.png");}
#hcd .icon17 {background-image: url("/source/img/sub-hcd-17.png");}

#pra .icon1 {background-image: url("/source/img/sub-pra-01.png");}
#pra .icon2 {background-image: url("/source/img/sub-pra-02.png");}
#pra .icon3 {background-image: url("/source/img/sub-pra-03.png");}
#pra .icon4 {background-image: url("/source/img/sub-pra-04.png");}
#pra .icon5 {background-image: url("/source/img/sub-pra-05.png");}
#pra .icon6 {background-image: url("/source/img/sub-pra-06.png");}
#pra .icon7 {background-image: url("/source/img/sub-pra-07.png");}
#pra .icon8 {background-image: url("/source/img/sub-pra-08.png");}
#pra .icon9 {background-image: url("/source/img/sub-pra-09.png");}

/* 기관소개 > 대전광역정신건강복지센터 > 오시는 길 */
.sub-text-box-item {padding: 46px 38px; border-radius: 18px; box-shadow: 1px 3px 10px rgba(19, 61, 122, 0.10); display: flex; justify-content: flex-start; gap: 37px; align-items: center;}
.text-box-left {}
.text-box-icon-img {width: 128px; height: 128px;}
.text-box-icon-img::after {content: ""; display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain;}

.text-box-right {}
.text-right-title {font-size: 20px; font-weight: 700;}
.right-text-wrap {margin-top: 20px;}
.right-box-text {padding-left: 24px;}
.right-box-text ~ .right-box-text {margin-top: 10px;}
.bg-gray {background-color: #f8f8f8;}
.bg-blue2 {background-color: #f2f5fc;}

.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_btn_zoom {display: none !important;}
.root_daum_roughmap .wrap_controllers {display: none;}
.cont {display: none;}
.map_border {display: none;}

.sub-map-box {border-radius: 18px; border: 1px solid var(--line-color); display: flex; align-items: center; overflow: hidden;}
.left-text-wrap {width: 474px; padding: 10px 60px;}
.left-title-text {font-size: 20px; font-weight: 700;}
.addr-text {color: var(--gray-color); margin-top: 25px;}
.content-text {display: flex; align-items: center; gap: 14px; margin-top: 20px;}
.sub-map-box .title {font-size: 18px; font-weight: 600; width: 40px; display: flex; justify-content: space-between;}
.tel-text {margin-top: 30px;}
.map-btn-wrap {margin-top: 30px; display: flex; gap: 10px;}
.map-link {padding: 12px 20px; font-size: 20px; font-weight: 500; border-radius: 8px; color: var(--white-color); display: inline-block;}
.map-link.big-link {background-color: var(--point-color);}
.map-link.directions-link {background-color: var(--blue-color);}
.right-map {flex: 1;}
.text-box-icon-img.icon-img17::after {background-image: url("/source/img/sub-hcf-01.png");}
#hcf .sub-text-box-item {width: 100%;}
.blue-title {font-size: 25px; font-weight: 700; font-family: "GmarketSans", sans-serif; color: var(--blue-color); line-height: normal;}
.right-text-item {margin-bottom: 15px;}
.right-item-title {font-weight: 600; padding-left: 24px;}
#hcf .right-box-text {margin-top: 10px;}
.dash {position: relative;}
.bod-text.dash {margin-bottom: 10px; margin-left: 10px;}
.dash::before {content: "-"; color: var(--black-color); display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.bottom-text-etc {font-weight: 600; color: var(--blue-color); margin-top: 20px;}

/* 정신건강정보 > 정신건강 정보 > 아동청소년 정신건강 */
.depth4-page-move, .page-filter, .depth-link {display: flex; background-color: #d2e5ff; width: calc(152px * 3); border-radius: 22px; height: 44px; position: relative; align-items: center;}
.depth4-move-link, .filter-btn, .depth-link {font-size: 18px; height: 100%; flex: 1; display: block; text-align: center; border-radius: 22px; color: var(--gray-color); line-height: 43px; transition: 0.2s; background-color: transparent; border: none; z-index: 2;}
.depth4-move-link:hover, .filter-btn:hover, .depth-link:hover {color: var(--black-color);}
.depth4-move-link.is-on, .filter-btn.is-on {color: var(--black-color);}
.active-bg {position: absolute; top: 0; left: 0; width: 33.33%; height: 100%; background-color: var(--white-color); border-radius: 22px; box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.11); outline: 1px solid var(--point-color); transition: 0.3s ease; z-index: 1;}
.text-box-icon-img.icon-img-a::after {background-image: url("/source/img/sub-mhinfo-01.png"); background-size: cover;}
.text-box-icon-img.icon-img-b::after {background-image: url("/source/img/sub-mhinfo-02.png"); background-size: cover;}
.text-box-icon-img.icon-img-c::after {background-image: url("/source/img/sub-mhinfo-03.png"); background-size: cover;}
#mhinfo .sub-text-box-item {width: 100%; padding: 36px 38px;}
#mhinfo .sub-text-wrap {display: flex; background-color: #ffffff; flex-wrap: wrap;}
.sub-text-wrap {border-top: 1px solid var(--black-color); border-bottom: 1px solid var(--line-color);}
.col-gray-box-title {text-align: center; padding: 19px 30px; background-color: #f8f8f8; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line-color);}
.col-sub-text-item {flex: 1; display: flex; flex-direction: column;}
.col-box-text-wrap {display: flex; justify-content: center; flex-direction: column; padding: 33px 30px; flex: 1; font-size: 16px;}
.col-sub-text-item ~ .col-sub-text-item {border-left: 1px solid var(--line-color);}
.col-text-box {padding-left: 25px;}
.col-text-box ~ .col-text-box {margin-top: 8px;}
.dropdown .sub-titlebox, .no-padding .sub-titlebox {border-bottom: none; padding-bottom: 0;}
.dropdown .sub-text-box-wrap {border-top: 1px solid var(--black-color);}
.dropdown .gray-title-box {display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; gap: 10px; color: var(--black-color); border-bottom: 1px solid var(--line-color);}
.dropdown .gray-bg-icon {position: relative; width: 10px; height: 10px; display: inline-block;}
.dropdown .gray-bg-icon::before {content: ""; display: block; width: 10px; height: 2px; background-color: var(--gray-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.dropdown .gray-bg-icon::after {content: ""; display: block; width: 10px; height: 2px; background-color: var(--gray-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);}
.dropdown .gray-bg-icon.off::after {display: none;}
.sub-section.m-top {margin-top: 100px;}
.right-box-text .semi-bold {font-weight: 600;}
#mhinfo .right-box-text {padding-left: 0; line-height: 1.5;}

.txt-content {display: none; overflow: hidden; transition: max-height 0.35s ease-in-out;}
.txt-content.line {border-top: transparent;}
.sub-top-head.padding-bottom {padding-bottom: 40px;}

/* 정신건강정보 > 정신건강 정보 > 스트레스 */
.text-box-icon-img.icon-img-a1::after {background-image: url("/source/img/sub-mhinfo-07.png"); background-size: cover;}
.sub-txt-wrap {display: flex; gap: 35px; flex-wrap: wrap;}
.sub-txt-left {flex: 1;}
.sub-txt-right {flex: 1;}
.txt-content-box {flex: 1;}
.sub-txt-title {font-size: 20px; font-weight: 600; color: var(--white-color); background-color: var(--line-color); padding: 19px 10px; text-align: center; border-radius: 8px; margin-bottom: 20px;}
.txt-sky-bg {background-color: var(--point-color);}
.txt-blue-bg {background-color: var(--blue-color);}
.sub-txtbox-wrap {}
.sub-txt-item {border: 1px solid var(--line-color); border-radius: 8px; overflow: hidden; text-align: center;}
.sub-txt-item ~ .sub-txt-item {margin-top: 15px;}
.txt-item-title {background-color: #f8f8f8; width: 100%; padding: 23px 10px; font-size: 18px; font-weight: 500;}
.txt-item-df {padding: 25px 10px;}
.bottom-txt {padding-left: 28px; position: relative;}
.bottom-txt.padding-no {display: flex; gap: 10px; padding-left: 0;}
.txt-number {color: var(--point-color); font-weight: 700; display: inline-block; flex-shrink: 0; position: absolute; left: -1px; font-size: 15px;}
.top-txt {margin-bottom: 14px;}

/* 정신건강정보 > 정신건강 정보 > 우울 */
.text-box-icon-img.icon-img-a2::after {background-image: url("/source/img/sub-mhinfo-08.png"); background-size: cover;}
.no-flex {display: block;}
.sub-txtbox-wrap.flex-col {display: flex; justify-content: space-between; gap: 19px; flex-wrap: wrap;}
.sub-txtbox-wrap.flex-col .sub-txt-item {flex: 1; display: flex; flex-direction: column;}
.sub-txtbox-wrap.flex-col .txt-item-title {color: var(--white-color); padding: 20px 10px;}
.sub-txtbox-wrap .txt-item-title.sky-bg {background-color: var(--point-color);}
.sub-txtbox-wrap .txt-item-title.blue-bg {background-color: var(--blue-color);}
.sub-txtbox-wrap.flex-col .sub-txt-item ~ .sub-txt-item {margin-top: 0;}
.sub-txtbox-wrap.flex-col .txt-item-df {display: flex; align-items: center; justify-content: center; flex: 1;}

/* 정신건강정보 > 정신건강 정보 > 조현병 */
.text-box-icon-img.icon-img-b1::after {background-image: url("/source/img/sub-mhinfo-09.png"); background-size: cover;}

/* 정신건강정보 > 정신건강 정보 > 불안 */
.depth4-page-move.menu-5 {width: calc(152px * 5);}
.depth4-page-move.menu-5 .active-bg {width:calc(100% / 5);}
.text-box-icon-img.icon-img-c1::after {background-image: url("/source/img/sub-mhinfo-10.png"); background-size: cover;}
.section-top-textbox.no-img-box {padding: 30px 64px; border-radius: 8px;}
.section-top-textbox.no-img-box .left-head-textbox {margin-bottom: 15px;}

/* 정신건강정보 > 정신건강 정보 > 중독 */
.depth4-page-move.menu-4 {width: calc(152px * 4);}
.depth4-page-move.menu-4 .active-bg {width:calc(100% / 4);}
.text-box-icon-img.icon-img-d1::after {background-image: url("/source/img/sub-mhinfo-04.png"); background-size: cover;}
.col-text-box.padding-no {padding-left: 0;}

/* 정신건강정보 > 정신건강 정보 > 외상후스트레스장애 */
.text-box-icon-img.icon-img-e1::after {background-image: url("/source/img/sub-mhinfo-06.png"); background-size: cover;}
.txt-content-box .txt-item-df {min-height: 110px;}
.sub-text-wrap.min-h .col-gray-box-title {min-height: 85px; display: flex; align-items: center; justify-content: center;}

/* 정신건강정보 > 정신건강 정보 > 재난정신건강 > 재난이란 */
.depth-link.white {color: var(--black-color); background-color: var(--white-color); border-radius: 22px; box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.11); outline: 1px solid var(--point-color);}
.text-box-icon-img.icon-img-f11::after {background-image: url("/source/img/sub-mhinfo-11.png"); background-size: cover;}
.depth4-page-move.menu-lg-5 {width: calc(180px * 5);}
.depth4-page-move.menu-lg-5 .active-bg {width:calc(100% / 5);}
.bottom-txt-box {color: #333333; display: flex; position: relative; padding-left: 25px;}
.bottom-txt-box ~ .bottom-txt-box {margin-top: 10px;}
.txt-num {position: absolute; left: 0; top: 0; font-size: 1.2em;}
.bottom-txt.m-top {margin-top: 5px;}
.list-txt-style {position: absolute; left: -1px; font-size: 15px;}
.sub-text-box-wrap.flex .bottom-txt {display: flex; position: relative; padding-left: 25px;}

/* 정신건강정보 > 정신건강 정보 > 재난정신건강 > 재난 경험 후 반응 */
.sub-txtbox-wrap.jc-lef .txt-item-df {justify-content: flex-start; padding: 27px; align-items: flex-start; flex-direction: column; text-align: left;}
.sub-txtbox-wrap.jc-lef .col-text-box {padding-left: 28px;}
.sub-txtbox-wrap.jc-lef .col-text-box ~ .col-text-box {margin-top: 0;}
.txt-cont {color: #333333;}
.txt-cont .top-txt {font-size: 18px;}
.txt-cont .bottom-txt ~ .bottom-txt {margin-top: 5px;}

/* 정신건강정보 > 정신건강 정보 > 재난정신건강 > 재난 경험 후 실천방법 */
.sub-text-box-wrap.num-style .txt-number {font-weight: 400; color: var(--black-color); font-size: 16px;}
.sub-text-box-wrap.num-style .text-box {color: var(--black-color);}
.sub-text-box-wrap.num-style .bottom-txt ~ .bottom-txt {margin-top: 8px;}

/* 정신건강정보 > 정신건강 정보 > 재난정신건강 > 재난 대응 시스템 */
.tree-img-box {position: relative; width: 100%; max-width: 1171px; height: 0; padding-bottom: 80.5%; margin: 0 auto; overflow: hidden;}
.tree-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}

.tree-wrap {display:none;}
.tree-container .bg-gray {background-color: #424242;}
.tree-container .bg-gray2 {background-color: #eeeeee;}
.tree-container .bg-point {background-color: var(--point-color);}
.tree-container .bg-blue {background-color: var(--blue-color);}
.tree-container .bg-sky {background-color: #f0f7ff;}
.tree-container .border-radi {border-radius: 13px;}
.tree-container .title {font-size: 18px; font-weight: 500; color: var(--white-color);}
.tree-container .text {}
.tree-container .tree-1dep-box .title {color: var(--blue-color);}
.tree-container .border-box {color: var(--gray-color); font-weight: 300; padding: 15px; border: 1px solid var(--line-color);}
.tree-3dep-content .footer-box {border: 1px solid var(--blue-color);}
.tree-3dep-content .text {color: var(--blue-color);}
.tree-3dep-content .etc {color: var(--gray-color);}

.tree-wrap .dep1-1 {order: 1;}
.tree-wrap .dep1-2 {order: 3;}
.tree-wrap .dep1-3 {order: 2;}
.tree-wrap .dep2-1 {order: 1;}
.dep2-2 {order: 3;}
.tree-wrap .dep2-3 {order: 2;}
.tree-2dep-content {display: flex;}
.dep-content {display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line-color); border-radius: 8px;}
.tree-wrap .border-radi .title {padding: 17px 0; text-align: center;}
.tree-2dep {flex: 1; display: flex;}
.tree-2dep-box {display: flex; flex-direction: column; flex: 1;}
.border-box {flex: 1; display: flex; flex-direction: column;}
.tree-wrap .dep1, .tree-2dep, .footer-box {width: calc(100% / 3);}
.tree-wrap .bef, .tree-wrap .bef2 {position: relative;}
.tree-wrap .bef::before {content: ""; display: block; position: absolute; width: 1px; height: 20px; background-color: var(--line-color); left: 50%; transform: translateX(-50%); top: 100%;}
.tree-wrap .p-bottom {margin-bottom: 20px;}
.tree-wrap .bef2::before {content: ""; display: block; position: absolute; width: 1px; height: 30px; background-color: var(--line-color); left: 50%; transform: translateX(-50%); top: 100%;}
.tree-wrap .p-bottom {margin-bottom: 20px;}
.tree-wrap .border-box.border-radi {text-align: center;}
.tree-wrap .text.dot {text-align: left; padding-left: 14px;}
.tree-wrap .dep2-title .title {color: var(--black-color);}
.tree-wrap .footer-box {padding: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.tree-wrap .footer-content {display: flex; justify-content: space-between;}
.tree-3dep-wrap {display: flex; flex-direction: column; align-items: center;}
.tree-wrap .tree-3dep-content .text {font-weight: 500; margin-bottom: 10px;}
.tree-wrap .etc {font-weight: 300; text-align: center;}

/* 정신건강정보 > 정신건강 정보 > 재난정신건강 > 재난관련 유관기관 */
.cluster-box-wrap {display: flex; gap: 30px 20px; flex-wrap: wrap;}
.cluster-container .box-item {border: 1px solid var(--line-color); border-radius: 8px; padding: 17px 18px; transition: 0.2s ease-in-out; width: calc((100% - 80px) / 5); box-shadow: 4px 0px 9px rgba(71, 71, 71, 0.07);}
.cluster-container .box-item:hover {border-color: var(--point-color);}
.cluster-container .logo-img-box {display: block; width: 209px; max-width: 100%; aspect-ratio: 209 / 51; margin: 0 auto; position: relative;}
.cluster-container .logo-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.cluster-container .icon-txt-box {margin-top: 12px; word-break: keep-all;}
.cluster-container .icon-txt-content {display: flex; gap: 6px;}
.cluster-container .icon-box {background-color: var(--point-color); width: 22px; height: 22px; line-height: 22px; border-radius: 50%; color: var(--white-color); text-align: center; font-size: 14px; flex-shrink: 0;}
.cluster-container .text {align-self: center; font-size: 15px; line-height: normal;}
.cluster-container .icon-text-item ~ .icon-text-item {margin-top: 8px;}

/* 정신건강정보 > 정신건강 정보 > 대전광역시 정신건강 통계 */
#mhinfo .sub-titlebox.padding-cug {padding-bottom: 10px;}
.top-txt-box {display: flex; align-items: center; gap: 10px;}
.cluster-box-wrap.gap-chg {gap: 30px 26px;}
.cluster-container .box-item.img-box {display: flex; align-items: center; justify-content: space-between;}
.cluster-container .txt-article {text-align: center; height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center;}
.cluster-container .small-title {font-size: 16px;}
.cluster-container .txt-blue {font-size: 20px; font-weight: 700; color: var(--point-color); margin-top: 15px;}
.cluster-container .img-article {width: 93px; height: 103px;}
.cluster-container .img-article img {width: 100%; height: 100%;}
.cluster-container .box-item.img-box {padding: 8px 18px; width: calc((100% - 78px) / 4);}
.link-go-btn {display: inline-block;}
#mhinfo .sub-text-box-item {width: 100%; padding: 26px 38px; box-shadow: 2px 2px 8px rgba(19, 61, 122, 0.10);}
.sub-border-box.pct-box .text-box-icon {border-radius: 50%; width: 148px; height: 148px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub-border-box.pct-box .text-box-img {position: relative; width: 100%; max-width: 81px; height: 0; padding-bottom: 46%; overflow: hidden;}
.sub-border-box.pct-box .text-box-img img {width: 100%; position: absolute; top: 0; left: 0; height: 100%; object-fit: contain;}
.sub-border-box.pct-box .txt-blue {color: var(--blue-color); font-size: 20px; font-weight: 700; margin-top: 6px;}
.sub-border-box.pct-box .text {color: var(--gray-color); text-align: center;}
#mhinfo .right-box-text {padding-left: 0;}
.sub-border-box.pct-box .sub-text-box-item ~ .sub-text-box-item {margin-top: 30px;}
.bg-white {background-color: var(--white-color);}
#mhinfo .link-go-btn {padding: 18px 61px;}
#mhinfo .link-go-btn:hover {background-color: var(--blue-color);}
.first-box, .last-box {display: flex; gap: 10px; align-items: center;}

/* 정신건강정보 > 정신건강 정보 > 자살예방 정보 */
.text-box-icon-img.icon-img-f1::after {background-image: url("/source/img/sub-sp-01.png"); background-size: cover;}
.big-txt {font-family: 'GmarketSans', sans-serif; font-weight: 500; font-size: 25px; line-height: 1;}
.icon-circ {background-color: var(--blue-color); color: var(--white-color); font-weight: 700; font-size: 22px; width: 26px; height: 26px; line-height: 1; text-align: center; border-radius: 50%;}
.tag-txt {font-size: 15px; font-weight: 900; background-color: var(--line-color); padding: 0 9px; height: 27px; border-radius: 4px; display: inline-block; position: relative; line-height: 27px; color: var(--white-color); width: 44px;}
.tag-txt::after {content: ""; display: block; width: 0; height: 0; position: absolute; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--line-color); bottom: -6px; left: 50%; transform: translateX(-50%);}
.tag-text-box .gray-title-box, .tag-text-box .text-box {display: flex;}
.gray-title-box {text-align: left;}
.tag-text-box .tag-txt {width: 45px; text-align: center; align-self: flex-start;}
.tag-text-box .txt {width:calc(100% - 45px); padding-left: 20px; align-self: center;}
.tag-txt.blue {background-color: var(--blue-color);}
.tag-txt.blue::after {border-top-color: var(--blue-color);}
.tag-txt.sky {background-color: var(--point-color);}
.tag-txt.sky::after {border-top-color: var(--point-color);}
.txt-blue-btn {background-color: var(--point-color); color: var(--white-color); padding: 6px 10px; font-size: 14px; font-weight: 600; border-radius: 3px; display: inline; width:fit-content; margin: 10px auto 0;}

.bgimg-txt-container {width: 100%; height: 1180px; margin-bottom: -100px; background: url("/source/img/sub-sp-bg.png") no-repeat center center / cover; padding-top: 78px;}
.list-box-section {padding: 43px 25px;}
.bgimg-txt-container .top-title {margin: 0 auto; display: flex; justify-content: center;}
.bgimg-txt-container .top-title-img {position: relative; width: 751px; max-width: 100%; height: 0; padding-bottom: 2.7%;}
.bgimg-txt-container .top-title-img .img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: contain;}
.bgimg-txt-container .list-content-wrap {display: flex; margin-top: 40px; gap: 23px; flex-wrap: wrap;}
.bgimg-txt-container .item-top-title {font-family: "GmarketSans", sans-serif; font-size: 25px; font-weight: 500; padding: 22px 10px; border-top: 2px solid var(--black-color); border-bottom: 2px solid var(--black-color); margin-top: 5px; display: flex; align-items: center; justify-content: center; line-height: 1;}
.bgimg-txt-container .item-top-title p {transform: translateY(1px);}
.bgimg-txt-container .title {font-size: 18px; font-weight: 600; color: var(--gray-color);}
.bgimg-txt-container .txt-blue {margin-top: 12px; font-family: "GmarketSans", sans-serif; font-weight: 700; font-size: 28px; color: var(--point-color);}
.bgimg-txt-container .list-content-item {border-bottom: 2px solid var(--black-color); text-align: center; flex: 1; display: flex; flex-direction: column;}
.bgimg-txt-container .article-txt-box {padding: 28px 10px; flex: 1; display: flex; flex-direction: column; justify-content: center;}
.bgimg-txt-container .article-txt-box ~ .article-txt-box {border-top: 1px solid var(--black-color);}
.bgimg-txt-container .txt-etc {font-size: 16px; color: var(--gray-color); margin-top: 16px;}
.bgimg-txt-container .bottom-btns {display: flex; gap: 12px; margin-top: 30px;}
.bgimg-txt-container .btn-style {display: flex; color: var(--white-color); background-color: var(--point-color); flex: 1; font-size: 15px; font-weight: 600; padding: 20px; border-radius: 30px; display: flex; justify-content: center;}
.bgimg-txt-container .btn-style.blue-color {background-color: var(--blue-color);}
.bgimg-txt-container .text {margin-right: 5px;}
.top-txt-box .icon-circ {margin-bottom: 5px;}

/* 정신건강정보 > 정신건강 정보 > 대전광역시 자살 통계 > 최근 5년간 자살률 추이 */
.sub-section.textbox .section-top-textbox.no-flex {display: block;}
.sub-section.textbox .left-text-content {display: flex; gap: 20px;}
.sub-section.textbox .title {font-size: 18px; font-weight: 600; width: 130px;}
.sub-section.textbox .text {font-size: 16px; color: #333333; flex: 1;}
.top-menu-chart {display: flex; gap: 25px; flex-wrap: wrap;}
.chart-menu-box {text-align: center; background-color: var(--white-color); padding: 30px 10px; flex: 1; border-radius: 8px; box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.07); border: 1px solid transparent; transition: 0.2s ease-in-out;}
.chart-menu-box:hover, .chart-menu-box.act {border: 1px solid var(--point-color);}
.chart-container {padding: 38px 36px; border-radius: 8px;}
.chart-icon-box {margin-bottom: 10px; width: 148px; max-width: 100%; position: relative; height: 0; padding-bottom: 33.4%; margin: 0 auto;}
.chart-icon-img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: contain;}

.chart-text {font-weight: 500; color: var(--gray-color); margin-bottom: 10px;}
.chart-title {font-size: 20px; font-weight: 700; color: var(--point-color); font-family: "GmarketSans", sans-serif;}
.chart-title.margin-t {margin-top: 28px;}
.chart-article {background-color: var(--white-color); margin-top: 40px; border-radius: 8px; padding: 30px 35px; box-shadow: 2px 2px 6px rgba(19, 61, 122, 0.10);}
.chart-article-content {overflow: hidden; opacity: 0; visibility: hidden; height: 0; transition: .3s;}
.chart-article-content.act {overflow: auto; opacity: 1; visibility: visible; height: auto;}
.graph-text-box {display: flex; align-items: center; position: relative;}
.graph-title {font-size: 20px; font-weight: 700; text-align: center; margin: 0 auto;}
.graph-text-box .sub-top-etc {position: absolute; right: 0;}
.chart-img-box {margin-top: 30px;}
.chart-img {width: 825px; max-width: 100%; height: 0; padding-bottom: 42.7%; position: relative; margin: 0 auto;}
.chart-img .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.chart-list {width: 100%; border-top: 2px solid var(--black-color); table-layout: fixed; word-break: keep-all;}
.chart-table-box {margin-top: 8px;}
.chart-table-box::before {content: '← 좌우 드래그로 표 내용 확인 →'; display: block; color: #666666; margin-bottom: 4px; display: none;}
.chart-table-box .th {padding: 15px 5px; font-weight: 500;}
.chart-table-box td {padding: 15px 5px; text-align: center;}
.chart-table-box .th ~ .th {border-left: 1px solid var(--line-color);}
.chart-table-box .th td {width: calc(100% / 16);}
.chart-table-box thead tr, tbody tr {border-bottom: 1px solid var(--line-color);}
.chart-table-box td ~ td {border-left: 1px solid var(--line-color);}
.chart-table-box .th.border {border-left: 1px solid var(--line-color);}
.chart-table-box .sub-top-etc {margin-top: 20px;}
.table-tag {font-weight: 500; color: var(--white-color); background-color: var(--point-color); width: 68px; height: 33px; line-height: 33px; border-radius: 6px; display: inline-block;}
.table-tag.blue {background-color: var(--blue-color);}

/* 정신건강정보 > 정신건강 정보 > 대전광역시 자살 통계 > 성별 비교 */
.chart-table-box.no-tb-flex .chart-list {table-layout: initial;}
.table-tag.long {max-width: 215px; width: 100%;}
.chart-table-box .col-1 {width: 20%;}
.chart-table-box .col-2 {width: 40%;}
.chart-table-box .col-3 {width: 40%;}

/* 정신건강정보 > 정신건강 정보 > 대전광역시 자살 통계 >월별 사망자 비교 */
.tbody-th-title {font-size: 16px; font-weight: 500; border-right: 1px solid var(--line-color); padding: 7px 5px;}
.chart-table-box.tbody-p tbody td {padding: 26px 5px;}

/* 정신건강정보 > 정신건강 정보 > 대전광역시 자살 통계 > 연령대 사망자 비교 */
.chart-list.col-10 .col-1 {width: 7%;}
.chart-list.col-10 .col-2 {width: 10.3%;}
.chart-list.col-10 .col-3 {width: 10.3%;}
.chart-list.col-10 .col-4 {width: 10.3%;}
.chart-list.col-10 .col-5 {width: 10.3%;}
.chart-list.col-10 .col-6 {width: 10.3%;}
.chart-list.col-10 .col-7 {width: 10.3%;}
.chart-list.col-10 .col-8 {width: 10.3%;}
.chart-list.col-10 .col-9 {width: 10.3%;}
.chart-list.col-10 .col-10 {width: 10.3%;}


/* 정신건강정보 > 정신건강 정보 > 대전광역시 자살 통계 > 지역별 자살률 */
.chart-graph.map-img .chart-img-box {position: relative;}
.chart-graph.map-img .chart-img {padding-bottom: 41.8%;}
.chart-graph.map-img .tag-region-wrap {position: absolute; top: 0; left: 50%; transform: translate(-50%);}

.chart-list.col-4 .col-1 {width: 11%;}
.chart-list.col-4 .col-2 {width: 23%;}
.chart-list.col-4 .col-3 {width: 23%;}
.chart-list.col-4 .col-4 {width: 23%;}
.chart-table-box .txt-blue {color: var(--point-color);}
.chart-list.col-4 .bg-blue2 {border: 1px solid var(--point-color); display: inline-block; border-radius: 8px; width: 88px; padding: 2px 6px;}
.chart-graph.map-img .chart-img-box {overflow: hidden; height: 542px;}
.chart-graph.map-img .chart-img .img {min-width: 1078px; min-height: 542px; left: 50%; transform: translateX(-50%); position: absolute;}
.chart-img-box .tag {background-color: var(--blue-color); width: 73px; height: 24px; line-height: 24px; color: var(--white-color); text-align: center; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 4px;}
.chart-img-box .tag-item {text-align: center; position: absolute;}
.chart-img-box .tag-item.box-1 {top: 83px; left: -218px;}
.chart-img-box .tag-item.box-2 {top: 69px; left: -109px;}
.chart-img-box .tag-item.box-3 {top: 53px; left: -30px;}
.chart-img-box .tag-item.box-4 {top: 93px; left: 80px;}
.chart-img-box .tag-item.box-5 {top: 123px; left: -27px;}
.chart-img-box .tag-item.box-6 {top: 163px; left: 32px;}
.chart-img-box .tag-item.box-7 {top: 193px; left: -37px;}
.chart-img-box .tag-item.box-8 {top: 208px; left: -118px;}
.chart-img-box .tag-item.box-9 {top: 243px; left: 102px;}
.chart-img-box .tag-item.box-10 {top: 237px; left: -56px;}
.chart-img-box .tag-item.box-11 {top: 321px; left: -56px;}
.chart-img-box .tag-item.box-12 {top: 383px; left: -96px;}
.chart-img-box .tag-item.box-13 {top: 428px; left: -54px;}
.chart-img-box .tag-item.box-14 {top: 490px; left: -218px;}
.chart-img-box .tag-item.box-15 {top: 310px; left: 75px;}
.chart-img-box .tag-item.box-16 {top: 336px; left: 150px;}
.chart-img-box .tag-item.box-17 {top: 367px; left: 32px;}
.chart-img-box .tag-item.box-18 {top: 398px; left: 122px;}

.chart-img-box .tag-item.circle-item {font-size: 14px; border: 1px solid var(--blue-color); width: 73px; height: 73px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.5; background-color:rgba(229, 237, 255,0.6);}
.chart-img-box .blue-color {color: var(--point-color);}
.chart-img-box .title {font-weight: 600;}
.chart-img-box .text {font-size: 14px;}
.chart-container.list5 .chart-table-box {margin-top: 20px;}


/* 정신건강정보 > 정신건강 정보 > 지역 정신건강 기관 안내 */
#institutionInfo .agency-map {display: flex; border: 1px solid var(--line-color); border-radius: 8px; align-items: center; justify-content: space-between;}
#institutionInfo .left-text-content {padding: 60px 0 60px 70px; flex: 1;}
#institutionInfo .left-content-text {box-sizing: border-box;}
#institutionInfo .left-text {margin-bottom: 32px;}
.sub-font-style {font-size: 16px; font-weight: 400; color: #333333;}
#institutionInfo .left-content-btns {display: flex; flex-wrap: wrap; gap: 20px 30px; position: relative; padding-top: 30px;}
#institutionInfo .left-content-btns::before {content: ""; display: block; position: absolute; top: 0; max-width: 672px; height: 1px; background-color: var(--line-color); left: 0; width: 100%;}
.left-con-btn {font-size: 18px; font-weight: 300; color: #333333; background-color: transparent; border: none; position: relative; border: 1px solid var(--line-color); padding: 0px 10px 0px 58px; max-width: 320px; width: calc((100% - 30px) / 2); border-radius: 32px; text-align-last: left; height: 65px;}
.left-con-btn.is-active {border: 3px solid var(--point-color);}
.left-con-btn::before {content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; outline: 5px solid #efefef; position: absolute; top: 50%; transform: translateY(-50%); left: 25px;}
.left-con-btn.is-active::after {content: ""; display: block; background-image: url("/source/img/sub-check-icon.png"); background-repeat: no-repeat; width: 25px; height: 25px; background-color: var(--point-color); background-position: center; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 20px;}
#institutionInfo .sub-titlebox {padding-bottom: 0; margin-bottom: 20px;}
#institutionInfo .right-agency-map {padding: 22px 88px;}
#institutionInfo .map-image {width: 346px; aspect-ratio: 346 / 437;}
#institutionInfo .map-image {background-image: url("/source/img/sub-full-map.png"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: 0.2s;}
#institutionInfo .map-image.all {background-image: url("/source/img/sub-full-map.png");}
#institutionInfo .map-image.us {background-image: url("/source/img//sub-map-u01.png");}
#institutionInfo .map-image.de {background-image: url("/source/img//sub-map-d01.png");}
#institutionInfo .map-image.su {background-image: url("/source/img//sub-map-s01.png");}
#institutionInfo .map-image.jg {background-image: url("/source/img//sub-map-j01.png");}
#institutionInfo .map-image.dg {background-image: url("/source/img//sub-map-don01.png");}

.list-content ~ .list-content {margin-top: 40px;}
.sub-list-wrap {border-top: 1px solid var(--black-color); text-align: center; border-bottom: 1px solid var(--line-color);}
.list-content-title {font-size: 20px; font-weight: 500; color: var(--black-color); margin-bottom: 20px;}
.list-row-item {display: flex;}
.list-row-title {font-weight: 500; color: var(--black-color); padding: 11px 10px;}
.gray-bg {background-color: #f8f8f8;}

.list-col-3 .list-row-title:nth-of-type(1), .list-col-3 .list-row-text:nth-of-type(1) {width: 400px;}
.list-col-3 .list-row-title:nth-of-type(2), .list-col-3 .list-row-text:nth-of-type(2) {flex: 1;}
.list-col-3 .list-row-title:nth-of-type(3), .list-col-3 .list-row-text:nth-of-type(3) {width: 200px;}

.list-col-4 .list-row-title:nth-of-type(1), .list-col-4 .list-row-text:nth-of-type(1) {width: 400px;}
.list-col-4 .list-row-title:nth-of-type(2), .list-col-4 .list-row-text:nth-of-type(2) {flex: 1;}
.list-col-4 .list-row-title:nth-of-type(3), .list-col-4 .list-row-text:nth-of-type(3) {width: 406px;}
.list-col-4 .list-row-title:nth-of-type(4), .list-col-4 .list-row-text:nth-of-type(4) {width: 228px;}

.list-col-5 .list-row-title:nth-of-type(1), .list-col-5 .list-row-text:nth-of-type(1) {width: 315px;}
.list-col-5 .list-row-title:nth-of-type(2), .list-col-5 .list-row-text:nth-of-type(2) {width: 317px;}
.list-col-5 .list-row-title:nth-of-type(3), .list-col-5 .list-row-text:nth-of-type(3) {flex: 1;}
.list-col-5 .list-row-title:nth-of-type(4), .list-col-5 .list-row-text:nth-of-type(4) {width: 316px;}
.list-col-5 .list-row-title:nth-of-type(5), .list-col-5 .list-row-text:nth-of-type(5) {width: 182px;}
.list-row-text {color: var(--black-color); display: flex; align-items: center; justify-content: center;}
.list-icon-box {display: flex; align-items: center; justify-content: center;}
.list-icon {position: relative; display: inline-block; transition: color 0.3s;}
.list-icon:hover {color: var(--point-color);}
.list-icon.icon-on::before {font-family: "remixicon" !important; content: "\ECAF"; font-size: 20px;}
.list-icon.icon-off::after {content: "-"; display: block; color: var(--black-color);}
.list-row-item ~ .list-row-item {border-top: 1px solid var(--line-color);}
.list-row-text {padding: 18px 10px;}
.list-row-title ~ .list-row-title, .list-row-text ~ .list-row-text {border-left: 1px solid var(--line-color);}
#institutionInfo .pop-text {cursor: pointer; display: inline; transition: 0.2s;}
#institutionInfo .pop-text:hover {text-decoration: underline; text-underline-offset: 2px; color: var(--point-color);}

#institutionInfo .popup-content {background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; display: none;}
#institutionInfo .pop-box {background-color: var(--white-color); width: calc(100% - 32px); max-width: 850px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#institutionInfo .pop-wrap {overflow-x: hidden; overflow-y: auto; max-height: 80vh; padding: 38px 36px; width: 100%;}
#institutionInfo .close-icon-btnbox {position: absolute; top: calc(-21px + -10px); right: 0;}
#institutionInfo .pop-close-btn {border: none; font-size: 21px; background-color: transparent; color: var(--white-color); font-weight: 600;}
#institutionInfo .header-box {display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line-color); border-radius: 8px; padding: 14px 19px 14px 34px;}
#institutionInfo .head-box-text {width: calc(100% - 375px);}
#institutionInfo .head-title {font-size: 20px; font-weight: 700; margin-bottom: 15px;}
#institutionInfo .head-addr {font-size: 15px; color: var(--gray-color); margin-bottom: 26px;}
#institutionInfo .head-text {display: flex; word-break: break-all;}
#institutionInfo .head-text ~ .head-text {margin-top: 12px;}
#institutionInfo .head-text .title {font-weight: 600; color: var(--black-color); margin-right: 16px;}
#institutionInfo .head-text .title.w-size {width: 40px; display: flex; justify-content: space-between; margin-right: 31px; flex-shrink: 0;}
#institutionInfo .head-text .text {color: #333333; width: calc(100% - 40px); min-height: 0; overflow-wrap: anywhere;}
#institutionInfo .head-box-img {overflow: hidden; width: 365px; aspect-ratio: 365 / 210; max-width: 100%; position: relative;}
#institutionInfo .head-img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#institutionInfo .body-box {margin-top: 35px;}
#institutionInfo .body-row {display: flex; gap: 20px; align-items: center;}
#institutionInfo .body-row ~ .body-row {margin-top: 30px;}
#institutionInfo .bod-left-title {font-weight: 500; color: var(--white-color); background-color: var(--blue-color); height: 33px; padding: 0 24px; display: flex; align-items: center; border-radius: 16px; align-self: start;}
#institutionInfo .bod-text {color: #333333; padding-left: 8px;}
#institutionInfo .homepage-link {color: #333333; transition: 0.2s;}
#institutionInfo .homepage-link:hover {color: var(--point-color); text-decoration: underline; text-underline-offset: 4px;}
#institutionInfo .bod-text ~ .bod-text {margin-top: 6px;}
#institutionInfo .bod-text.dot::before {width: 2px; height: 2px;}
#institutionInfo .foot-box {font-size: 15px; font-weight: 300; color: #333333; margin-top: 30px; text-align: right;}

/* 정신건강정보 > 정신건강 정보 > 자살유족 서비스 안내 > 유족 정보 제공 */
#sls .active-bg {width: 50%;}
.depth4-page-move.menu-lg-2 {width: 304px; max-width: 100%;}
#sls .chart-title.margin-t {margin-top: 18px;}
#sls .chart-menu-box.top-m .chart-title.margin-t {margin-top: 10px;}
.chart-article.list-article .top-list {border-bottom: 1px solid var(--line-color); padding-bottom: 18px; margin-bottom: 18px;}
.chart-article.list-article .top-text {font-weight: 400; margin-top: 12px;}
.main-item-title {font-size: 20px; font-weight: 600; margin-bottom: 10px;}
.main-list-item ~ .main-list-item {margin-top: 20px;}
.chart-article.list-article .bottom-txt {line-height: 1.5; padding-left: 18px;}
.chart-article.list-article .bottom-txt ~ .bottom-txt {margin-top: 2px;}
.chart-article.list-article {border-radius: 18px; padding: 35px 52px;}
#sls .color-point {color: var(--point-color);}
.bottom-txt.dot:has(.main-item-title)::before {top: 0px;}
#sls .bold-title {font-weight: 600; font-size: 18px;}
#sls .bottom-sub-text {padding-left: 16px; font-size: 14px;}
#sls .bottom-sub-text.dot::before {font-size: 14px;}
#sls .bold-txt {font-weight: 600;}
#sls .top-text.border-top {border-top: 1px solid var(--line-color); padding-top: 10px;}
#sls .col-gray-box.first-list .sub-txtbox-wrap.flex-col {width: 100%;}
#sls .col-gray-box.first-list .sub-item-section {flex: 1;}
#sls .col-gray-box.first-list .sub-txt-item {flex: none;}
#sls .col-gray-box.first-list .sub-txt-wrap.no-flex {display: flex;}

/* 정신건강정보 > 정신건강 정보 > 자살유족 서비스 안내 > 애도 */
#sls .text-box-icon-img.icon-img-a::after {background-image: url('/source/img/sub-grf-icon05.png'); background-size: cover;}
#sls .text-box-icon-img.icon-img-b::after {background-image: url('/source/img/sub-grf-icon06.png'); background-size: cover;}
#sls .text-box-icon-img.icon-img-c::after {background-image: url('/source/img/sub-grf-icon07.png'); background-size: cover;}
#sls .text-box-img {width: 148px; max-width: none; padding-bottom: 100%; overflow: initial;}
#sls .text-box-left {flex-shrink: 0;}
#sls .sub-border-box.pct-box .top-txt-box {font-family: 'GmarketSans', sans-serif; font-weight: 700; align-items: center;}
#sls .step-tag {background-color: var(--blue-color); color: var(--white-color); font-size: 20px; width: 107px; text-align: center; padding: 6px 0 1px; line-height: 1; border-radius: 13px;}
#sls .sub-border-box.pct-box .blue-title {font-size: 25px; margin-bottom: -8px;}
#sls .sub-border-box.pct-box .sub-text-box-item {padding: 26px 38px;}
#sls .sub-border-box.pct-box .right-text {line-height: 1.5;}
#sls .sub-border-box.pct-box .right-text-wrap {margin-top: 18px;}
#sls .right-box-txt {line-height: 1.5;}
#sls .right-box-text ~ .right-box-text {margin-top: 7px;}
.chart-article.list-article .top-list.no-border {border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
#sls .txt-item-title.black {color: var(--black-color);}
#sls .col-gray-box.first-list .group-txt-box .sub-txt-item:first-child {margin-top: 20px;}
#sls .col-gray-box.first-list .sub-item-section:first-child .txt-item-df {padding: 21px 10px;}
#sls .col-gray-box.first-list .group-txt-box .sub-txt-item ~ .sub-txt-item {margin-top: 15px;}
#sls .sub-item-section.min-h .sub-txt-item {min-height: 266px;}
#sls .sub-item-section.min-h .sub-txt-item .txt-item-df {align-items: start; padding: 45px 10px;}
#sls .sub-form-footer {font-size: 16px;}
#sls .sub-container.img-text-box {display: flex; gap: 35px;}

#sls .sub-container.img-text-box .article-content {border-radius: 8px; border: 1px solid var(--line-color); display: flex; align-items: center; box-shadow: 4px 0 9px rgba(71, 71, 71, 0.07); justify-content: space-between; padding: 7px 27px 8px 40px; flex: 1;}
#sls .sub-container.img-text-box .article-content.gray {background-color: #f8f8f8;}
#sls .sub-container.img-text-box .left-title {width: calc(100% - 98px); font-size: 18px;}
#sls .sub-container.img-text-box .right-img {width: 93px; aspect-ratio: 93 / 103;}
#sls .sub-container.img-text-box .right-img .icon-img {width: 100%; height: 100%; object-fit: contain; display: block;}
#sls .sub-text-box-item {padding-top: 36px; padding-bottom: 36px;}
#sls .arrow-list .arrow-list-container {gap: 30px; justify-content: flex-start; align-items: stretch;}
#sls .arrow-list .arrow-list-item {flex: 1; max-width: none; display: flex; justify-content: center; align-items: center;}
#sls .arrow-list .arrow-box {display: flex; align-items: center;}

/* 정신건강정보 > 정신건강 정보 > 자살유족 서비스 안내 > 상록수 */
#evg .chart-article {margin-top: 0; background-color: #f8f8f8; box-shadow: 5px 6px 6px rgba(19, 61, 122, 0.10);}
#evg .section-top-textbox {padding: 28px 96px 28px 55px;}
#evg .left-text-content {width: calc(100% - 260px);}
#evg .right-img-content {width: 250px; height: unset !important; aspect-ratio: 250 / 167;}
#evg .left-head-textbox {margin-bottom: 18px;}
#evg .left-etc-textbox {line-height: 142%;}
#evg .text-box.border-radi {padding: 31px 55px;}
#evg .top-txt {margin-bottom: 2px;}
#evg .bottom-txt {font-weight: 600;}
#evg .txt-number {color: var(--black-color);}
#evg .chart-article {display: flex; align-items: center; gap: 50px;}
#evg .chart-article.list-article {padding: 40px 38px;}
#evg .icon-img-contant {width: 128px; height: 128px; flex-shrink: 0;}
#evg .chart-article.list-article .top-list {padding-bottom: 24px; margin-bottom: 24px;}
#evg .chart-article.list-article .top-text {margin-top: 0;}
#evg .text-wrap-box {flex: 1;}
#evg .chart-article.list-article .bottom-txt {font-weight: 400; padding-left: 0; display: flex;}
#evg .chart-article.list-article .bold-title {font-size: 16px; min-width: 74px; display: block; flex-shrink: 0;}
#evg .chart-article.list-article .bottom-txt .text {flex: 1;}
#evg .bottom-wrap {flex: 1; margin-top: 34px; display: flex; gap: 18px; display: flex; align-items: center;}
#evg .border-box {background-color: var(--point-color); padding: 8px 0; font-size: 16px; color: var(--white-color); text-align: center; border-radius: 33px; min-height: 65px; display: flex; align-items: center; justify-content: center;}
#evg .border-box.blue {background-color: var(--blue-color);}
#evg .bottom-box.arrow-box > div:nth-of-type(2), #evg .bottom-box.arrow-box > div > *:nth-child(2) {margin-top: 7px;}
#evg .gray-arrow {width: 60px; height: 0; padding-bottom: 31.317%; background: url("/source/img/arrow-with-dots.png") no-repeat center center / contain;}
#evg .left-arrow .gray-arrow {transform: rotate(180deg);}
#evg .bottom-box.arrow-box .txt {font-size: 14px; text-align: center; line-height: 1;}
#evg .sub-border-box.txt-regular .bottom-txt {font-weight: 400;}
#evg .bottom-bg-contact {padding: 80px 20px; background: url("/source/img/sub-evg-bg.png") no-repeat center bottom / cover; text-align: center; color: var(--white-color);}
#evg {padding-bottom: 0;}
#evg .top-title {font-size: 25px;}
#evg .bold-txt {font-weight: 700;}
#evg .top-sub-title {font-size: 22px; margin-top: 16px; margin-bottom: 36px;}
#evg .contact-wrap {width: 865px; max-width: 100%; margin: 0 auto;}
#evg .contact-list {display: grid; align-items: center; justify-content: space-between; grid-template-columns: 25fr auto 68fr; grid-template-rows: 63px; gap: 15px;}
#evg .contact-list ~ .contact-list {margin-top: 22px;}
#evg .title-tag {display: flex; gap: 8px; max-width: 214px; height: 100%; padding: 18px 15px; border-radius: 32px; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.10); font-size: 22px;}
#evg .tag-text {font-weight: 600;}
#evg .contact-arrow {font-size: 0; line-height: 1;}
#evg .contact-arrow > span {font-size: 9px;}
#evg .contact-arrow > span:nth-child(1) {opacity: 0.2;}
#evg .contact-arrow > span:nth-child(2) {opacity: 0.6; margin: 0 8px;}
#evg .contact-text {display: flex; justify-content: start; align-items: center; max-width: 584px; height: 100%; padding: 20px 45px; border-radius: 32px; border: 1px solid var(--white-color); color: var(--white-color); font-size: 18px; transition: 0.2s ease-in-out; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
#evg .contact-text:hover, #evg .contact-text:focus {background-color: rgba(255,255,255,0.3);}

/* 참여마당 > 교육·행사 신청/확인 */
.sub-content-wrap {display: flex; gap: 30px 40px; flex-wrap: wrap;}
.sub-content-item {padding: 35px; border-radius: 8px; border: 1px solid var(--line-color); width: calc((100% - 80px) / 3);}
.content-img-box {width: 100%; aspect-ratio: 383 / 312; position: relative; background-color: var(--line-color); overflow: hidden; border-radius: 17px;}
.content-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.page-filter + .form-submit-btn {position: absolute; top: 0; right: 0; padding: 12px 60px;}

.con-text-box {}
.badge-box {margin-top: 25px; margin-bottom: 13px;}
.badge {display: inline-block; font-weight: 600; padding: 3px 15px; border: 1px solid var(--gray-color); border-radius: 3px;}
.badge-orange {color: #f08200; border-color: #f08200;}
.badge-green {color: #009944; border-color: #009944;}
.con-title {font-size: 20px; font-weight: 600; margin-bottom: 17px;}
.con-text-article {display: flex;}
.con-text-article ~ .con-text-article {margin-top: 8px;}
.con-box-title {font-weight: 500; width: 64px;}
.con-box-text {width: calc(100% - 78px); margin-left: 14px; font-weight: 300; color: var(--gray-color);}
.con-btn {width: 100%; margin-top: 20px;}
.con-btn-link {transition: 0.2s; font-size: 18px; padding: 17px; display: block; border-radius: 27px; text-align: center;}
.con-btn-link.apply {background-color: var(--point-color); color: var(--white-color); border: 1px solid var(--point-color);}
.con-btn-link.apply:hover {background-color: var(--white-color); border-color: inherit; color: var(--point-color);}
.con-btn-link.closed {background-color: var(--white-color); color: var(--gray-color); border: 1px solid var(--line-color);}

/* 페이징 */
.pg_wrap {float: none; display: block; margin-top: 50px;}
.pg {display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;}
.pg_page, .pg_current {background:#FFF; border: none; font-size: 16px; height: 40px; line-height: 40px; min-width: 40px; border-radius: 4px; transition: .3s;}
.pg_page {color:var(--gray-color);}
.pg_page a {display: block;}
.pg_page:hover {color: var(--blue-color);}
.pg_current {font-weight: 300; background-color: var(--blue-color); color: #FFF;}
.pg_page:is(.pg_start, .pg_prev, .pg_end, .pg_next) {display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #E7E7E7; color: var(--gray-color); text-indent: 0; font-size: 0;}
.pg_page:is(.pg_start, .pg_prev) {margin-right: 7px;}
.pg_page:is(.pg_end, .pg_next) {margin-left: 7px;}

.pg_page:is(.pg_start, .pg_prev, .pg_end, .pg_next)::before {font-family: 'remixicon' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 20px;}
.pg_start::before {content: '\F2E3';}
.pg_prev::before {content: '\EA64';}
.pg_next::before {content: '\EA6E';}
.pg_end::before {content: '\F2E5';}

.pg_current:hover {background-color: var(--blue-color); color: var(--white-color)}
.pg_start:hover, .pg_prev:hover, .pg_end:hover, .pg_next:hover {background-color: #ffffff;}
.pg_page:is(.pg_start, .pg_prev, .pg_end, .pg_next):not(.disabled):hover {background-color: #fafafa;}

/* 참여마당 > 교육·행사 신청/확인 > 글쓰기 */
/* #education .sub-form-title {width: 270px; font-size: 18px; font-weight: 500;} */
.article-date-box {display: flex; gap: 10px;}
/* #education .sub-form-content {width: calc(100% - 270px);} */
/* #education .article-body-item input[type=checkbox] + label {font-size: 16px;} */
input[type=date] {width: 100%; height: 100%; padding: 10px; border: 1px solid var(--line-color); color: #999999;}
input[type=date] {width: 100%; height: 100%; padding: 10px; border: 1px solid var(--line-color); color: #999999;}
/* #education .sub-form-radio .article-body-item, #education .form-list-text {color: var(--gray-color);} */
/* #education .sub-form-text {gap: 10px;} */

/* 참여마당 > 교육·행사 신청/확인 > 상세 */
.sub-list-content {padding: 20px 30px; font-weight: 300; color: var(--gray-color); display: flex; align-items: center;}
#education .small-blue-btn {justify-content: center;}
.sub-titlebox.no-line {border-bottom:none; padding-bottom: 0; margin-bottom: 25px;}
.titlebox-sub {font-size: 20px; font-weight: 500;}
#education .form-body-textbox-check {color: var(--black-color); font-weight: 500; text-align: left;}
#education .date-select .article-item-select {width: 110px; padding: 10px 38px 10px 17px;}
.zip-article {}
.zip-article .sub-form-text {display: block;}
.zip-article .article-body-item {display: flex; gap: 12px; margin: 10px 0;}
.zip-article .article-body-item ~ .article-body-item {margin-top: 10px;}
.zip-btn {background-color: var(--point-color); color: var(--white-color); border: none; border-radius: 0; padding: 0 29px; font-weight: 500;}
.zip-btn:active {background-color: var(--blue-color);}
.size-long {max-width: 647px;}
.size-half {max-width: 207px;}
.flex-col-gap {display: flex; gap: 20px; align-items: center;}
.text-etc {color: var(--gray-color);}
.little-btn .small-blue-btn {gap: 10px;}
.little-btn .small-text-btn-a {border: 1px solid transparent;}
.little-btn .small-text-btn-a.back {background-color: var(--black-color);}
.little-btn .small-text-btn-a:hover {background-color: var(--white-color); border: 1px solid var(--point-color); color: var(--point-color);}
.little-btn .small-text-btn-a.back:hover {background-color: var(--white-color); border: 1px solid var(--black-color); color: var(--black-color);}

/* 참여마당 > 교육·행사 신청/확인 > 신청 내역 */
#education .list-row-title {font-size: 18px; font-weight: 500;}
#education .list-row-text {font-weight: 300; color: var(--gray-color); display: flex; align-items: center; justify-content: center; min-width: 0;}
#education .list-col-4 .list-row-title:nth-of-type(1), #education .list-col-4 .list-row-text:nth-of-type(1) {flex: 1; width: auto;}
#education .list-col-4 .list-row-title:nth-of-type(2), #education .list-col-4 .list-row-text:nth-of-type(2) {width: 305px; flex: none; display: block; text-align: center;}
#education .list-col-4 .list-row-title:nth-of-type(3), #education .list-col-4 .list-row-text:nth-of-type(3) {width: 305px;}
#education .list-col-4 .list-row-title:nth-of-type(4), #education .list-col-4 .list-row-text:nth-of-type(4) {width: 166px;}
.list-btn-box {font-size: 16px; font-weight: 500; display: flex; gap: 4px;}
.list-btn-box .link-btn, .list-btn-box .del-btn {border-radius: 6px; width: 68px; padding: 9px 0; transition: .2s;}
.list-btn-box .link-btn {display: block; color: var(--white-color); background-color: var(--point-color); border: 1px solid var(--point-color); text-align: center;}
.list-btn-box .link-btn:hover {background-color: var(--white-color); border-color:inherit; color: var(--point-color);}
.list-btn-box .del-btn {background-color: var(--white-color); color: var(--black-color); border: 1px solid var(--line-color);}
.list-btn-box .del-btn:hover {color: #e50000; border: 1px solid #e50000;}
.little-btn .small-text-btn-a.gray {background-color: #333333;}
.little-btn .small-text-btn-a.gray:hover {background-color: var(--black-color); border-color: var(--black-color); color: var(--white-color);}
.list-row-item.row-full .list-row-text {padding: 20px 10px;}
.little-btn .small-text-btn-a.gray-bg {background-color: #333333;}
.little-btn .small-text-btn-a.gray-bg:hover {border: 1px solid #333333; background-color: var(--white-color); color: #333333;}

/* 참여마당 > 마음톡톡버스 신청/확인 */
#bus .sub-intro-img-box {min-height: 270px; background: #e1f5ff url("/source/img/sub-bus-01.png") no-repeat right bottom / contain;}
#bus .intro-title-img {max-width: 293px;}

.calendar-wrap {display: flex; gap: 30px;}
.calendar-wrap .calendar-content {border: 1px solid var(--line-color); padding: 37px 55px; max-width: 100%;}
.calendar-wrap .left-content {flex: 0 1 750px;}
.calendar-wrap .right-content {flex: 1 1 0%;}
.radius-18 {border-radius: 18px;}
.calendar-box {}

.calendar .calendar-box {position: relative; margin-bottom: 60px;}
.calendar-top {position: relative;}
.fc .fc-button-primary {background-color: var(--white-color); border-radius: 50%; border: 1px solid var(--line-color); width: 50px; height: 50px; color: var(--black-color);}
.fc .fc-toolbar-title {font-size: 25px; font-weight: 600;}

.date-tag-wr {overflow: hidden; position: absolute; top: 82px; left: 0;}
.date-tag-ul {margin: -10px;}
.date-tag-ul li {padding: 10px;}
.date-tag-box {display: flex; align-items: center; gap: 7px;}
.date-tag {font-size: 13px; color: #ffffff; width: 23px; height: 23px; border-radius: 50%; line-height: 23px; text-align: center; display: block;}
.date-tag.t1 {background-color: #187cec;}
.date-tag.t2 {background-color: #ef4b4b;}
.date-tag.t3 {background-color: #009944;}
.date-tag-name {font-weight: 300; font-size: 16px; color: #000; margin-top: 2px;}
.fc-theme-standard th {border-bottom: 1px solid var(--line-color); border-right: transparent;}
.fc-theme-standard td {min-height: fit-content; height: 90px; border: 1px solid var(--line-color); border-right: 0; border-bottom: transparent;}
.fc .fc-toolbar.fc-header-toolbar {margin-bottom: 86px;}
.fc-day-sat a {color: #3264f3;}
.fc-day-sun a {color: #ff0000;}
.fc .fc-daygrid-day-number {padding: 2px;}
.fc .fc-day-other .fc-daygrid-day-top {display: none;}
.fc-toolbar-title {display: inline-block; vertical-align: middle; margin-left: 12px !important;}
.fc-theme-standard .fc-scrollgrid {border:none;}
.fc .fc-col-header-cell.fc-day {font-size: 13px; font-weight: 400; border-right: transparent; border-left: transparent; text-align: left;}
.fc-daygrid-dot-event .fc-event-title {font-size: 13px; font-weight: 400; color: #333333;}
.fc .fc-col-header-cell-cushion {height: 24px;}
.fc .fc-col-header-cell.fc-day.fc-day-sun .fc-col-header-cell-cushion {color: #e61e15;}
.fc .fc-daygrid-day-top {flex-direction: row; font-size: 13px;}
.fc .fc-daygrid-day.fc-day-today {background-color: #FFF5F5; position: relative;}
.fc .fc-highlight {background-color: #FFF5F5;}

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {margin-bottom: 6px;}
.fc-h-event .fc-event-title {font-weight: 400; font-size: 13px; color: #ffffff; white-space: initial; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fc-h-event {position: relative;}
.fc-h-event::after {content: ""; position: absolute; top: 22px; left: 0; z-index: -1; display: block; width: 100%; height: 18px; background: #118dd4;}

#bus .sche-textbox {text-align: center; padding: 0; margin-bottom: 37px;}
.sche-wrap {max-height: 650px; overflow-y: auto;}
.sche-item {border-bottom: 1px solid var(--line-color); padding: 46px 10px;}
.sche-item:first-child {border-top: 1px solid var(--line-color);}
.sche-title-box {display: flex; align-items: center; gap: 10px; margin-bottom: 20px;}
.sche-title-box .sche-tag {align-self: start; font-size: 0;}
.sche-top-title {font-size: 20px; font-weight: 700;}
#bus .text-box {color: #333333; padding: 0 0 0 20px;}
#bus .text-box ~ .text-box {margin-top: 4px;}
#bus .footer-text {margin-top: 34px;}
#bus .text-box.border-radi {padding: 37px 55px;}

.img-box-container {margin-top: 55px;}
.img-box-container .img-box-wrap {display: flex; gap: 20px; justify-content: space-between;}
.img-box-container .img-item {position: relative;}
.img-box-container .top-tag-title {background-color: var(--blue-color); padding: 10px 0; width: 154px; border-radius: 17px; color: var(--white-color); text-align: center; position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 50%);}
.img-box-container .img-box {border-radius: 8px; overflow: hidden; max-width: 257px; width: 100%; height: 0; padding-bottom: 67%;}
.img-box-container .img {width: 100%; object-fit: cover;}

.arrow-list {}
.arrow-list .arrow-list-container {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.arrow-list .arrow-list-item {border-top: 2px solid var(--point-color); border-right: 1px solid var(--line-color); border-left: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); border-radius: 0 0 23px 23px; overflow: hidden; max-width: 190px; width: 100%; padding: 25px 0; text-align: center;}
.arrow-list .arr-list-img {margin-bottom: 10px;}
.arrow-list .img {}
.arrow-list .arr-list-text {}
.arrow-list .blue-arrow {min-width: 11px; height: 12px;}
.arrow-list .blue-arrow::before {content: ""; display: block; width: 100%; height: 100%; background: url("/source/img/blue-arrow-right.png") no-repeat center center / contain;}

/* 참여마당 > 기관방문안내 */
.txt-input {flex-direction: column; align-items: flex-start;}
.txt-input .article-body-item {display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #999999; width: auto;}
.txt-input .article-body-item:last-child {margin-bottom: 10px;}
.article-body-item.flex-col {display: flex; align-items: center; gap: 9px; position: relative; margin-bottom: 10px;}
#visitInfo .direct-col .sub-form-radio {flex-direction: column; align-items: flex-start; gap: 14px;}
#visitInfo .textarea-tag {height: 120px;}
#visitInfo .sub-form-title {width: 270px; font-size: 18px; font-weight: 500;}
#visitInfo .sub-form-content {width: calc(100% - 270px);}
#visitInfo .sub-form-radio .article-body-item {color: var(--gray-color);}
#visitInfo .text-box.border-radi {margin-bottom: 50px; padding: 37px 55px;}
#visitInfo .text-box {padding: 0 0 0 20px;}
#visitInfo .article-body-item.flex-col input[type=text] {position: absolute; left: 70px; height: 40px; width: 207px;}
#visitInfo .small-blue-btn {justify-content: center;}

/* 온라인 교육 > 교육 안내 > 자살예방교육 */
.text-box-icon-img.icon-img-z1::after {background-image: url("/source/img/sub-guide-01.png");}
#educationchannel .sub-text-box-item {width: 100%;}
#educationchannel .right-box-text {padding-left: 0;}
#educationchannel .col-gray-box {margin-top: 30px;}
.title-head-content {display: flex; justify-content: flex-end; padding-bottom: 20px;}
.sub-top-head.link {display: inline-flex; align-items: center; gap: 7px; padding-bottom: 0;}
.sub-top-head.link .head-icon-box {font-size: 21px; font-weight: 600;}
#prevention-list .list-row-title:nth-of-type(1), #prevention-list .list-row-text:nth-of-type(1) {width: 292px; flex: none;}
#prevention-list .list-row-title:nth-of-type(2), #prevention-list .list-row-text:nth-of-type(2) {flex: 1;}
#prevention-list .list-row-text.medium {font-weight: 500;}

/* 온라인 교육 > 교육 안내 > 마음구조 SOS */
#educationchannel .sub_contents.not-padding-b {padding-bottom: 0;}
.text-con-box .head-textbox {font-size: 24px; font-weight: 700; color: var(--point-color); margin-bottom: 19px;}
.text-con-box .big-text {font-size: 28px;}
.text-con-box .point {font-weight: 600;}
.text-con-box .left-etc-textbox {line-height: 1.5;}
.text-con-box {max-width: calc(100% - 335px);}
.img-con-box {width: 224px; aspect-ratio: 224 / 154;}
.img-con-box .img-icon {width: 100%; height: 100%; object-fit: contain;}
#educationchannel .section-top-textbox {padding: 17px 64px;}

.img-list-container {display: flex; align-items: start; justify-content: space-between; gap: 34px;}
.img-list-container .img-article {width: 594px; max-width: 100%; aspect-ratio: 594 / 350; position: relative; border-radius: 8px; overflow: hidden;}
.img-list-container .img-article .img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.img-list-container .list-article {border-top: 2px solid var(--black-color); width: calc(100% - 628px);}
.img-list-container .title-box {padding: 14px; text-align: center;}
.img-list-container .text-box {margin-top: 0; text-align: center; min-width: 0; padding: 18px 30px;}
.img-list-container .text-box.text_row1 {overflow: hidden;}
.img-list-container .text-box .text {text-align: left; min-width: 0;}
.img-list-container .text-box ~ .text-box {border-left: 1px solid var(--line-color);}
.img-list-container .title-box ~ .title-box {border-left: 1px solid var(--line-color);}
.img-list-container .top-title {display: flex; border-bottom: 1px solid var(--line-color);}
.img-list-container .title {font-size: 16px; font-weight: 500;}
.img-list-container .list-article-item {display: flex; border-bottom: 1px solid var(--line-color);}
.img-list-container .title-box:nth-of-type(1), .img-list-container .text-box:nth-of-type(1) {width: 168px;}
.img-list-container .title-box:not(:nth-of-type(1)), .img-list-container .text-box:not(:nth-of-type(1)) {width: calc(100% - 168px);}
.img-list-container .text-box.padding-row {padding: 9px 30px;}

.sos-footer-container {position: relative; padding: 92px 87px 107px; background-color: #e0efff;}
.sos-footer-container::before, .sos-footer-container::after {content: ""; position: absolute; top: 12px; display: block; width: 65px; aspect-ratio: 68 / 91; background: url("/source/img/paper-clip-illust.png") no-repeat center center / contain;}
.sos-footer-container::before {left: 18%;}
.sos-footer-container::after {right: 18%;}
.sos-footer-wrap {display: flex; align-items: center; justify-content: center; width: 1746px; max-width: 100%; min-height: 1218px; padding: 40px; background: url("/source/img/sub-sos-bg.png") no-repeat top center / 100% 100%;}
.sos-footer-wrap::after {content: ""; width: 388px; aspect-ratio: 388 / 789; position: absolute; bottom: 54px; right: 30px; z-index: 2; background: url("/source/img/sub-sos-06.png") no-repeat center / contain;}

.sos-footer-container .tag {font-family: "GmarketSans", sans-serif; font-size: 18px; font-weight: 500; color: var(--white-color); padding: 11px 50px 7px; border-radius: 19px; background-color: var(--blue-color); display: inline-block; line-height: initial; margin-bottom: 22px;}
.sos-footer-container .img-title {width: 380px; aspect-ratio: 380 / 58; position: relative; margin-bottom: 35px;}
.sos-footer-container .img-title .img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;}
.sos-footer-container .text {line-height: 1.5;}
.sos-footer-container .line {height: 1px; width: 95%; margin: 40px 0; background-color: var(--line-color);}
.sos-footer-container .title-con-box {font-size: 25px; font-weight: 500; font-family: "GmarketSans", sans-serif; margin-bottom: 38px;}
.sos-footer-container .con-item {position: relative; z-index: 1; flex: 1; max-width: 317px; border-radius: 12px; padding: 9px 20px 27px; background-color: #62c0c5;}
.sos-footer-container .con-item::before {content: ""; position: absolute; bottom: 0; left: 0; border-radius: 12px; width: 100%; height: calc(100% - 9px); z-index: -1; background-color: var(--white-color); border: 1px solid var(--line-color);}
.sos-footer-container .step-tag {font-weight: 500; background: #62c0c5; padding: 4px 34px; display: inline-block; color: var(--white-color); border-radius: 11px; margin-top: 42px;}
.sos-footer-container .con-item.item2 {background: #f9bf26;}
.sos-footer-container .con-item.item2 .step-tag {background: #f9bf26;}
.sos-footer-container .con-item.item2 .item-txt-title {color: #f9bf26;}
.sos-footer-container .con-item.item3 {background: #aca1cd;}
.sos-footer-container .con-item.item3 .step-tag {background: #aca1cd;}
.sos-footer-container .con-item.item3 .item-txt-title {color: #aca1cd;}
.sos-footer-container .text-img {margin: 13px 0;}
.sos-footer-container .text-img > img {height: 100%; object-fit: contain;}
.sos-footer-container .con-item-wrap {display: flex; gap: 50px;}
.sos-footer-container .circle-icon {position: absolute; top: 0; width: 73px; height: 73px; right: 20px; top: 26px;}
.sos-footer-container .circle-icon .img {width: 100%; height: 100%; object-fit: contain;}
.sos-footer-container .item-txt-title {font-size: 20px; font-family: "GmarketSans", sans-serif; font-weight: 700; color: #62c0c5;}
.sos-footer-container .txt {padding-left: 6px;}
.sos-footer-container .txt ~ .txt {margin-top: 2px;}
.sos-footer-container .con-txt-wrap {margin-top: 10px;}
.sos-footer-container .bottom-con-box {margin-top: 70px;}
.sos-footer-container .bottom-con-box .title-img {display: inline-block; width: 171px; aspect-ratio: 171 / 27; margin: 0 10px 4px; position: relative; vertical-align: middle; font-size: 0;}
.sos-footer-container .bottom-con-box .title-img .img {width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sos-footer-container .bottom-chart-wrap {display: flex; align-items: center; gap: 23px;}
.sos-footer-container .chart-item {position: relative;}
.donut-gauge {position: relative; width: 164px; aspect-ratio: 1 / 1;}
.donut-bg {width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#eee 0deg 250deg, transparent 250deg 360deg); transform: rotate(235deg); /* 시작점을 왼쪽 아래로 */ position: absolute; top: 0; left: 0;}
.donut-fill {width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#5c83e6 0deg 56deg, transparent 56deg 360deg); transform: rotate(235deg); position: absolute; top: 0; left: 0; transition: background 0.5s;}
.donut-center {width: 87.805%; height: 87.805%; background: #ffffff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.donut-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; text-align: center; z-index: 3; color: #333333; width: 87.805%;}

.sos-footer-container .arrow-img {position: relative; width: 21px; aspect-ratio: 21 / 29; background: url("/source/img/sub-sos-arrow.png") no-repeat center / contain;}
.sos-footer-container .donut-fill.sky {background: conic-gradient(#3ac8f0 0deg 112deg, transparent 112deg 360deg);}
.sos-footer-container .donut-fill.green {background: conic-gradient(#51d4a8 0deg 160deg, transparent 160deg 360deg);}
.sos-footer-container .donut-fill.lt-green {background: conic-gradient(#b6de33 0deg 200deg, transparent 200deg 360deg);}
.sos-footer-container .donut-fill.yellow {background: conic-gradient(#fbd606 0deg 250deg, transparent 250deg 360deg);}

.sos-footer-container .btn-box {margin-top: 30px; display: flex; justify-content: center; text-align: center;}
.sos-footer-container .form-submit-btn.width {width: 328px; padding: 18px 0; display: block;}

/* 온라인 교육 > 교육 수강 > 신청 */
.img-txt-link-container {border-radius: 18px; border: 1px solid var(--line-color);}
.img-txt-link-container .img-txt-link-box {display: flex; padding: 26px 40px; align-items: center;}
.img-txt-link-container .img-box {overflow: hidden; width: 365px; aspect-ratio: 365 / 217; position: relative; border-radius: 13px;}
.img-txt-link-container .img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.img-txt-link-container .title {font-size: 20px; font-weight: 700; margin-bottom: 20px;}
.img-txt-link-container .txt-box-item {width: calc(100% - 365px - 120px - 60px); margin: 0 10px 0 50px;}
.img-txt-link-container .txt-box {display: flex; gap: 10px;}
.img-txt-link-container .txt-box .txt {line-height: 1.4;}
.img-txt-link-container .txt-box ~ .txt-box {margin-top: 8px;}
.img-txt-link-container .txt-title {font-weight: 600; padding-left: 18px; white-space: nowrap;}
.img-txt-link-container .etc {padding-left: 18px; width: 1000%;}
.img-txt-link-container .btn-box {align-self: flex-end; justify-self: flex-end;}
#educationchannel .blue-btn {display: block; width: 120px; padding: 12px 0; border-radius: 8px; background-color: var(--point-color); border: none; color: var(--white-color); font-size: 20px; font-weight: 500; text-align: center; transition: 0.2s ease-in-out;}
#educationchannel .blue-btn:hover {background-color: var(--blue-color);}
#educationchannel .article-body-item.txt {display: flex; align-items: center; gap: 10px; color: #333333;}

/* 온라인 교육 > 교육 수강 > 개인정보입력 */
.sub-form-row.no-margin .article-item-select {margin-left: 0px;}
#educationchannel .form-body-textbox-content {margin-top: 0;}
/* .marketing .form-body-textarea {min-height: 156px;} */
#educationchannel .form-body-textbox-check {display: flex; gap: 33px; justify-content: flex-end; padding: 12px 0;}
#educationchannel .form-body-textbox-item.check-item .form-body-textbox-check {padding: 10px 0 0;}
#educationchannel .form-body-textbox-item.check-item .sub-form-footer {padding-top: 50px;}
#educationchannel .form-submit-btn {display: inline-block;}
#educationchannel .article-body-item.radio-text {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
#educationchannel .article-body-item.radio-text .text-box {padding: 0; display: none;}
#educationchannel .article-body-item input[type="radio"]:checked ~ .text-box {display: block;}
/* #educationchannel .sub-form-etc, #educationchannel .sub-top-etc {font-size: 16px;} */
#educationchannel .input-box {position: relative;}
#educationchannel .input-box input[type=radio] {margin: 0; appearance: none; position: absolute; opacity: 0; font-size: 0; font-size: 0; width: 0; height: 0;}
#educationchannel .input-box input[type=radio] + label::before {position: absolute; content: ""; width: 20px; height: 20px; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); background-color: #efefef;}
#educationchannel .input-box input[type=radio]:checked + label::before {background-color: var(--point-color);}
#educationchannel .input-box input[type=radio] + label::after {position: absolute; content: ""; width: 10px; height: 10px; border-radius: 50%; left: 5px; top: 50%; transform: translateY(-50%); background-color: #ffffff;}
#educationchannel .form-textbox-check-text {padding-left: 30px;}

/* 온라인 교육 > 교육 수강 > 자살예방 인식도 퀴즈(사전평가) */
#educationchannel .popup-title {font-size: 20px; font-weight: 700;}
#educationchannel .code-popup-box {width: 520px; max-width: 100%; color: #333333;}
#educationchannel .code-popup-box .bold {font-weight: 700;}
#educationchannel .pop-text-box {border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); padding: 20px 0; margin: 18px 0;}
#educationchannel .underline {text-decoration: underline;}
#educationchannel .pop-txt {line-height: 1.4;}
#educationchannel .pop-txt ~ .pop-txt {margin-top: 20px;}
#educationchannel .code-popup-box .red-txt {color: rgb(255, 0, 0);}
#educationchannel .check-box {margin-top: 20px;}
#educationchannel .check-box input[type=checkbox] {margin: 0; appearance: none; position: absolute; opacity: 0; font-size: 0; font-size: 0; width: 0; height: 0;}
#educationchannel .check-box input[type=checkbox] + label {position: relative;}
#educationchannel .check-box input[type=checkbox] + label::before {position: absolute; content: ""; width: 20px; height: 20px; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); background-color: #efefef;}
#educationchannel .check-box input[type=checkbox] + label::after {position: absolute; content: ""; width: 10px; height: 10px; border-radius: 50%; left: 5px; top: 50%; transform: translateY(-50%); background-color: var(--white-color);}
#educationchannel .check-box input[type=checkbox] {position: absolute; content: ""; width: 10px; height: 10px; border-radius: 50%; left: 5px; top: 50%; transform: translateY(-50%); background-color: var(--white-color);}
#educationchannel .check-box input[type=checkbox]:checked + label::before {background-color: var(--point-color);}
#educationchannel .check-box input[type=checkbox]:checked + label::after {background-color: transparent; background-image: url('/source/img/sub-check-icon.png'); background-size: cover;}
#educationchannel .form-textbox-check-text {font-weight: 500;}
/* #educationchannel .sub-section.radio-2 .sub-form-wrap-title {padding: 22px 36px;}
#educationchannel .sub-section.radio-2 .sub-form-row.sub-form-wrap-title .sub-form-title {padding: 0;} */
#educationchannel .sub-section.radio-2 .sub-form-title {width: auto; max-width: calc(100% - 310px);}
#educationchannel .sub-section.radio-2 .sub-form-content {width: auto; max-width: 310px;}
.sub-form-personal-list:has(.sub-form-question-number) .sub-form-question {font-weight: 300;}
#educationchannel .sub-section.radio-2 .article-body-item input[type=radio]:checked + label::before {width: 25px; height: 25px; left: -2px;}
#educationchannel .sub-section.radio-2 .article-body-item input[type=radio]:checked + label::after {width: 25px !important; height: 25px !important; top: 50% !important; left: -2px !important; background-color: transparent; background: url("/source/img/sub-check-icon.png") no-repeat center;}
#educationchannel .sub-section.radio-2 .sub-form-question {width: 100%;}
#educationchannel .sub-row-padding {justify-content: space-between; padding: 27px 0;}

/* 온라인 교육 > 교육 수강 > 교육 수강 */
.sub-section.center .small-blue-btn {justify-content: center;}
.video-container {position: relative; width: 100%; height: 0; padding-bottom: 56%;}
#educationchannel .video {width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0;}
/* 2026-03-03 마우스 입력 허용 */
/* .video-container::before {content: ''; width: 100%; height: 100%; background-color: transparent; z-index: 10; position: absolute; top: 0; left: 0;} */

/* 온라인 교육 > 교육 수강 > 자살예방 인식도 퀴즈(사후평가) */
#educationchannel .sub-form-row.col-5 {padding: 12px 0;}
.sub-form-row.padding {padding: 22px 0;}

/* 온라인 교육 > 교육 수강 > 자살예방 인식도 퀴즈(사후)-오답풀이 */
.list-con-exp {display: flex; padding: 33px 58px; border-bottom: 1px solid var(--line-color); align-items: center;}
.list-con-exp .tag {width: 84px; padding: 4px; border-radius: 3px; background-color: #f08200; color: var(--white-color); font-weight: 600; text-align: center;}
.list-con-exp .text {max-width: calc(100% - 84px); padding-left: 30px; font-size: 18px; font-weight: 300;}

/* 온라인 교육 > 나의 강의실 */
.sub-summary-container {border: 1px solid var(--line-color); display: flex; padding: 25px;}
.summary-item {flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;}
.summary-item ~ .summary-item {border-left: 1px solid var(--line-color);}
.summary-icon {font-size: 36px; color: var(--blue-color); width: 63px; height: 63px; line-height: 63px; border-radius: 50%; background-color: var(--white-color); text-align: center;}
.summary-title {font-size: 18px; font-weight: 500; margin: 0 10px 0 15px;}
.summary-count {font-size: 25px; font-family: "GmarketSans", sans-serif; color: var(--blue-color); font-weight: 700; line-height: 1; margin-top: 6px;}
#educationchannel .left-etc-textbox.dot {padding-left: 20px; line-height: 1.5;}

#mypage-list .list-row-title:nth-of-type(1), #mypage-list .list-row-text:nth-of-type(1) {flex: 1;}
#mypage-list .list-row-title:nth-of-type(2), #mypage-list .list-row-text:nth-of-type(2) {width: 174px;}
#mypage-list .list-row-title:nth-of-type(3), #mypage-list .list-row-text:nth-of-type(3) {width: 174px;}
#mypage-list .list-row-title:nth-of-type(4), #mypage-list .list-row-text:nth-of-type(4) {width: 174px;}
#mypage-list .list-row-title:nth-of-type(5), #mypage-list .list-row-text:nth-of-type(5) {width: 174px;}
#mypage-list .list-row-title:nth-of-type(6), #mypage-list .list-row-text:nth-of-type(6) {width: 174px;}
.list-row-text.text-left {text-align: left;}
#mypage-list .list-row-title {font-size: 18px; font-weight: 500;}
#mypage-list .list-row-text {padding: 18px 22px; color: #333333;}
#mypage-list .list-row-text:has(> .text_row1) {overflow: hidden;}
#mypage-list .list-row-text.blue {color: var(--point-color); font-size: 18px; font-weight: 600;}
.list-row-text.list-video-btn .btn-box {display: inline-block; border-radius: 3px; background-color: var(--gray-color); font-weight: 600;}
.list-row-text.list-video-btn .btn-box .link {display: block; padding: 5px 14px; color: var(--white-color);}
.list-row-text.list-print-btn .btn-box {display: inline-block; border-radius: 3px; background-color: #f08200; font-weight: 600;}
.list-row-text.list-print-btn .btn-box .link {display: block; padding: 5px 28px; color: var(--white-color);}
.educationchannel_top {background-image: url('/source/img/sub-com-bg2.png');}
#educationchannel .s-bold {font-weight: 600;}

/* 온라인 교육 > 교육 수강 > 나의 강의실 > 수료증 */
body:has(#mypage-coc) > *:not(#contents_dom) {display: none !important;}
#mypage-coc .sub_contents {background-color: var(--black-color); overflow-y: scroll; padding: 40px 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0;}
#mypage-coc .sub-common-contents {container-type: inline-size; container-name: certificate; width: 210mm; aspect-ratio: 210 / 297; margin: 0 auto; position: relative; background: var(--white-color) url("/source/img/completion-cert-01.png") no-repeat center center / 93%;}
#mypage-coc .sub-common-contents::after {content: ""; position: absolute; left: 50%; top: 43.5%; transform: translateX(-50%); z-index: 2; width: 36.2%; aspect-ratio: 76 / 75; background: url("/source/img/completion-cert-02.png") no-repeat center center / contain; font-size: 0;}
#mypage-coc .coc-text-wrap {position: relative; z-index: 3; width: 100%; height: 100%; padding: 11.595cqw 10.476cqw;}
#mypage-coc .docNo {font-size: 1.89cqw; font-weight: 500; margin-bottom: 12.5%;}
#mypage-coc .coc-title {font-size: 10.08cqw; font-weight: 800; letter-spacing: 3.33cqw; text-align: center; line-height: 1;}
.coc-container {position: relative; z-index: 2;}
.coc-text-box {margin: 11% 0;}
.coc-item .title {display: inline-block; vertical-align: text-top; position: relative; width: 12%; margin-right: 1%; text-align: justify; text-align-last: justify; font-size: 0; word-wrap: break-word; word-break: break-all;}
.coc-item .title > span {font-size: 2.14cqw; font-weight: 500;}
.coc-item .title::after {content: ":"; position: absolute; top: -0.1cqw; right: -9%; font-size: 2.14cqw; font-weight: 500;}
.coc-item .text {display: inline-block; vertical-align: text-top; max-width: 86%; font-size: 2.14cqw; font-weight: 500; word-wrap: break-word; word-break: break-all;}
.coc-item .text .bold {font-weight: 700;}
.coc-item ~ .coc-item {margin-top: 2.2%;}
.coc-text {font-size: 3.15cqw; font-weight: 500; line-height: 187.5%; text-align: center;}
.coc-text br {display: block !important;}
.coc-text .bold {font-weight: 700;}
.coc-date {font-size: 3.91cqw; font-weight: 600; margin: 15% 0 10.5%; text-align: center;}
#mypage-coc .position-text {margin: 0 auto; width: fit-content; position: relative; font-size: 0;}
#mypage-coc .position-text .position {position: relative; z-index: 1; padding-right: 5.5cqw; font-size: 4.03cqw; font-weight: 800;}
.stamp-img {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 10cqw; aspect-ratio: 257 / 252;}
.stamp-img .img {width: 100%; height: 100%; object-fit: contain;}
@media print {
  body:has(#mypage-coc) {margin: 0; padding: 0;}
  #mypage-coc .sub_contents {position: absolute; left: 0; top: 0; width: 100%; margin: 0 auto; padding: 0; background: transparent; overflow: visible; z-index: 9999;}
  #mypage-coc .sub-common-contents {width: 100%; position: relative; left: auto; top: auto; margin: 0; transform: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; border: none; box-shadow: none;}
  #mypage-coc .print-button-wrap {display: none;}
}

/* 통합검색 { */
.search-result {}
.search-result-top {padding-bottom: 25px;}
.search-result-cnt {text-align: center; font-weight: 500; font-size: 20px; color: var(--black-color); margin-top: 40px; margin-bottom: 10px;}
.search-result-cnt span {font-weight: 600; color: var(--point-color);}
.search-result-sorting {display: flex; align-items: center; justify-content: flex-end;}

.search-result-section {}
.search-result-section ~ .search-result-section {margin-top: 60px;}
.search-result-section-top {border-top: 1px solid var(--line-color); display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--line-color);}
.search-result-section-top .title {font-weight: 600; font-size: 20px; color: var(--point-color);}
.search-result-section-top .more-view {display: flex; align-items: center; font-weight: 500; font-size: 16px; color: #666666; transition: .3s;}
.search-result-list {}
.search-result-item {border-bottom: 1px solid var(--line-color); display: block; padding: 20px 32px;}
.search-result-item-title {font-weight: 600; font-size: 18px; color: var(--black-color); margin-bottom: 20px; transition: .3s;}
.search-result-item-title .word {color: var(--white-color) !important; background-color: #ff0000 !important;}
.search-result-item-content {font-weight: 300; font-size: 16px; color: #999999; line-height: 1.5625; max-height: 3.125em;}
.search-result-item-content .word {font-weight: 600 !important; color: #ff0000 !important;}
.search-result-item-point {display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: 16px; color: var(--point-color); margin-top: 20px;}
.search-result-item-point .point {display: block; position: relative;}
.search-result-item-point .point::before {content: "\ea6e"; font-family: 'remixicon' !important; position: absolute; top: 0; left: -17px;}
.search-result-item-point .point:first-child::before {display: none;}

.search-result-item:hover .search-result-item-title {color: var(--point-color);}
.search-result-section-top .more-view:hover {color: var(--point-color);}
.search-result-bottom {margin-top: 50px;}
/* } 통합검색 */

/* 개인정보처리방침 { */
.sub-gray-box:not(:has(.sub-titlebox + .sub-text-box-wrap)) .sub-titlebox {border-bottom: none;}
.sub-paragraph-wrap + .sub-text-box-wrap {border-top: 1px solid #000000;}
.sub-paragraph-wrap {margin: 20px 0; padding: 0 10px; color: #333333; line-height: 1.5;}
.sub-titlebox + .sub-paragraph-wrap {margin-top: 0;}
.sub-paragraph-wrap:not(.sub-titlebox + .sub-paragraph-wrap):last-child {margin-bottom: 0;}
.sub-paragraph-wrap p ~ p {margin-top: 0.5em;}

#terms .left-head-textbox {margin-bottom: 1em;}
#terms .left-head-textbox .blue-color-text {font-size: 1.1em;}
#terms .col-text-box.mark {text-indent: -0.8em;}
#terms .text-box > .dot {padding-left: clamp(12px, 2vw, 26px);}
#terms .text-box > .circle-num {position: relative; padding-left: clamp(2em, 3vw, 2.5em);}
#terms .text-box > .circle-num::before {content: attr(data-index); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 1.8em; aspect-ratio: 1 / 1; border-radius: 999px; background-color: var(--point-color); color: var(--white-color); font-size: 0.8em; font-weight: 500; text-align: center; line-height: 1;}
#terms .text-box > p ~ p {margin-top: 0.5em;}
#terms .text-box > .circle-num + p:not(.circle-num) {margin-top: 1em;}
#terms .text-box > strong {display: inline-block; margin-bottom: 0.5em; font-weight: 600;}
#terms .text-box a {text-decoration: underline; color: #333333;}
/* } 개인정보처리방침 */

/* 2026-03-31 인트로 페이지 추가 { */
.intro {height: 100vh;}
.intro-content {height: calc(100% - 76px); background: url('/source/img/intro-bg.png') no-repeat center/cover; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.intro-head {margin-bottom: 60px;}
.intro-text {text-align: center;}
.intro-text .text-img {margin-bottom: 25px;}
.intro-text .text {font-family: "GmarketSans", sans-serif; font-weight: 300; font-size: 30px; color: var(--black-color);}
.intro-text .text span {font-weight: 500; text-decoration: underline;}

.intro-cards {display: flex; align-items: flex-start; gap: 50px;}
.intro-card {border-radius: 23px; overflow: hidden; box-shadow: 3px 0 7px rgba(0,0,0,0.35); width: 347px;}
.intro-card-thumb {position: relative; overflow: hidden; height: 0; padding-bottom: 59.943%;}
.intro-card-thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; transition: .3s;}
.intro-card-info {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 208px; background-color: var(--white-color); text-align: center;}
.intro-card-name {font-family: "GmarketSans", sans-serif; font-weight: 500; font-size: 22px; color: var(--black-color); letter-spacing: -1px; line-height: 1.26; margin-bottom: 20px;}
.intro-card-btn {display: flex; align-items: center; justify-content: center; height: 48px; width: 186px; max-width: 100%; border-radius: 24px; font-weight: 500; font-size: 18px; color: var(--white-color); position: relative; padding-right: 37px; transition: .3s; overflow: hidden; border: 1px solid transparent;}
.intro-card-btn.c-01 {background-color: #246bd0;}
.intro-card-btn.c-02 {background-color: #133d7a;}
.intro-card-btn span {position: relative; z-index: 1;}
.intro-card-btn .round {display: flex; align-items: center; justify-content: center; width: 37px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--white-color); position: absolute; top: 50%; right: 6px; transform: translateY(-50%); color: var(--black-color); font-size: 20px; transition: .3s;}

.intro-card:hover {}
.intro-card:hover .intro-card-thumb img {transform: translate(-50%,-50%) scale(1.1);}
.intro-card-btn:hover .round {color: var(--white-color);}
.intro-card-btn.c-01:hover {background-color: var(--white-color); border-color: #246bd0; color: #246bd0;}
.intro-card-btn.c-01:hover .round {background-color: #246bd0;}
.intro-card-btn.c-02:hover {background-color: var(--white-color); border-color: #133d7a; color: #133d7a;}
.intro-card-btn.c-02:hover .round {background-color: #133d7a;}

.intro-footer {display: flex; align-items: center; justify-content: center; height: 76px; font-weight: 400; font-size: 16px; color: #333333; background-color: var(--white-color);}
/* } 2026-03-31 인트로 페이지 추가 */