@charset "UTF-8";
/* Reset */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
*:before,
*:after { -webkit-box-sizing: inherit; box-sizing: inherit; }
a { color: inherit; text-decoration: none; outline: 0; }
img { max-width: 100%; height: auto; border: 0; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
input { font-family: inherit; }
select { font-family: inherit; }
textarea { font-family: inherit; resize: vertical; }
button { font-family: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; outline: 0; }
/* Fonts */
@font-face { font-display: swap; font-family: Pretendard; font-weight: 200; src: url("../fonts/Pretendard-ExtraLight.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: Pretendard; font-weight: 300; src: url("../fonts/Pretendard-Light.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: Pretendard; font-weight: 400; src: url("../fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: Pretendard; font-weight: 500; src: url("../fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: Pretendard; font-weight: 600; src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: Pretendard; font-weight: 700; src: url("../fonts/Pretendard-Bold.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 800; src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 900; src: url("../fonts/Pretendard-Black.woff2") format("woff2"); }
/* Helper Classes */
.sr-text { display: block; position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; font-size: 1px; color: transparent; white-space: nowrap; overflow: hidden; border: 0; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
/* #Common */
:root { --color-point: #D70640; }
/* Number Flip */
.numberflip-digit-container { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; position: relative; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 200ms; transition-duration: 200ms; }
.numberflip-digit-container-value { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 1000ms; transition-duration: 1000ms; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.numberflip-digit-container-value span { text-align: center; }
@-webkit-keyframes numberflip-animation-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes numberflip-animation-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* Animation */
@-webkit-keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes loading {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes show-up {
0% { opacity: 0; -webkit-transform: translateY(25px); transform: translateY(25px); }
100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes show-up {
0% { opacity: 0; -webkit-transform: translateY(25px); transform: translateY(25px); }
100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
/* Colors */
.color1 { color: var(--color-point); }
/* Icons */
.loader { display: inline-block; width: 1em; height: 1em; border: 4px solid #FFF; border-bottom-color: transparent; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-animation: loading 1s linear infinite; animation: loading 1s linear infinite; }
/* Buttons */
.btn-img { display: block; width: 100%; height: 100%; }
@media screen and (max-width:1200px) {
.sm-hidden { display: none; }
}
.lg-hidden { display: none; }
@media screen and (max-width:1200px) {
.lg-hidden { display: initial; }
}
.action-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.action-group button { margin: 0 2px; }
.btn-done { display: block; min-width: 12em; padding: 0.88em 2em; font-size: 1.5625rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: 0; border: 0; border-radius: 0.4em; background: var(--color-point); text-align: center; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; }
.btn-done:hover { background-color: #A50532; }
.btn-done:active { -webkit-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); }
@media screen and (max-width:1200px) {
.btn-done { min-width: 15em; max-width: 100%; padding: 1.25em 2.5em; font-size: 1.25rem; }
}
/* Forms */
.input-wrap { display: inline-block; width: 100%; vertical-align: middle; }
::-webkit-input-placeholder { color: #C8C8C8; opacity: 1; }
::-moz-placeholder { color: #C8C8C8; opacity: 1; }
:-ms-input-placeholder { color: #C8C8C8; opacity: 1; }
::-ms-input-placeholder { color: #C8C8C8; opacity: 1; }
::placeholder { color: #C8C8C8; opacity: 1; }
.form-text { display: inline-block; width: 100%; height: 2.75rem; padding: 0 1.25rem; font-size: 16px; border: 0; border-radius: 0.625rem; background: #F5F5F5; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; vertical-align: middle; }
.form-text:focus { -webkit-box-shadow: inset 0 0 0 1px var(--color-point), 0 0 0 2px rgba(215, 6, 64, 0.5); box-shadow: inset 0 0 0 1px var(--color-point), 0 0 0 2px rgba(215, 6, 64, 0.5); }
.form-text.num { text-align: right; }
@media screen and (max-width:1200px) {
.form-text { height: 2.5rem; padding: 0 1rem; border-radius: 0.3125rem; }
}
.form-textarea { display: inline-block; width: 100%; height: 9.5rem; padding: 1.25rem 1.125rem; font-size: 16px; border: 0; border-radius: 0.625rem; background: #F5F5F5; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; resize: none; vertical-align: middle; }
.form-textarea:focus { -webkit-box-shadow: inset 0 0 0 1px var(--color-point), 0 0 0 2px rgba(215, 6, 64, 0.5); box-shadow: inset 0 0 0 1px var(--color-point), 0 0 0 2px rgba(215, 6, 64, 0.5); }
.form-textarea.num { text-align: right; }
@media screen and (max-width:1200px) {
.form-textarea { height: 7.9375rem; padding: 0.875rem 1rem; border-radius: 0.3125rem; }
}
.form-checkbox { display: inline-block; position: relative; margin-right: 0.875em; padding-left: 2em; font-size: 1em; font-weight: 700; line-height: 1.75; vertical-align: middle; white-space: nowrap; }
.form-checkbox input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0; outline: 0; }
.form-checkbox .ico { position: absolute; top: 0; left: 0; width: 1.75em; height: 1.75em; border-radius: 50%; background: url("../img/ic_circle_chkbox_off.svg") no-repeat 0 0; background-size: contain; }
.form-checkbox .ico:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: url("../img/ic_circle_chkbox_on.svg") no-repeat 0 0; background-size: contain; }
.form-checkbox .label { display: inline-block; pointer-events: initial; vertical-align: middle; }
.form-checkbox input:checked ~ .ico { background-color: transparent; }
.form-checkbox input:checked ~ .ico:before {     /* 20250214 수정 */
top: 0; left: 0; opacity: 1; }
.form-radiobox { display: inline-block; position: relative; margin: 0.3125em 0.625em 0.3125em 0; padding-left: 2.375em; font-size: 1em; font-weight: 500; line-height: 1.875; pointer-events: none; vertical-align: middle; white-space: nowrap; }
.form-radiobox:last-child { margin-right: 0; }
.form-radiobox input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.form-radiobox .ico { display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 1.875em; height: 1.875em; margin: auto; border-radius: 50%; background: #fff; -webkit-box-shadow: inset 0 0 0 1px #C8C3BC; box-shadow: inset 0 0 0 1px #C8C3BC; pointer-events: initial; }
.form-radiobox .ico:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: url("../img/ic_chkbox_on.svg") no-repeat 0 0; background-size: contain; -o-object-fit: cover; object-fit: cover; }
.form-radiobox .label { display: inline-block; pointer-events: initial; vertical-align: middle; }
.form-radiobox input:checked ~ .ico { background: var(--color-point); -webkit-box-shadow: none; box-shadow: none; }
.form-radiobox input:checked ~ .ico:after { opacity: 1; }
/* Dropdown */
.dropdown { position: relative; }
.dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 100%; }
.dropdown-content.on { display: block; -webkit-animation: fade-in 0.3s; animation: fade-in 0.3s; }
.dropdown-content.up { top: auto; bottom: 100%; }
.dropdown:hover .dropdown-content:hover,
.js-dropdown-trigger:hover ~ .dropdown-content { display: block; -webkit-animation: fade-in 0.5s both; animation: fade-in 0.5s both; }
/* List */
.dot-list { list-style: none; line-height: 1.5625; }
.dot-list > li { padding-left: 1.2em; }
.dot-list > li:before { content: "・"; margin: 0 0.5em 0 -1.2em; font-weight: 700; }
.dot-list .special:before { content: " * "; margin-left: -1em; color: var(--color-point); }
@media screen and (max-width:1200px) {
.dot-list { font-size: 0.8125rem; }
}
.dash-list { list-style: none; line-height: 1.875; }
.dash-list > li { padding-left: 0.5em; }
.dash-list > li:before { content: "-"; margin: 0 0.3em 0 -0.5em; }
@media screen and (max-width:1200px) {
.dash-list { font-size: 0.8125rem; }
}
.numbering-list { list-style: none; }
.numbering-list > li { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; counter-increment: cnt; padding: 2.125em 6.4285714286%; border: 1px solid #CACACA; }
.numbering-list > li:before { content: counter(cnt, decimal-leading-zero); display: block; position: absolute; top: 0; left: 0; width: 2.5em; height: 2.5em; font-weight: 700; color: #fff; letter-spacing: 0; line-height: 2.5; text-align: center; }
.numbering-list > li + li { margin-top: 1.25em; }
.numbering-list .category1:before { background-color: #36AF92; }
.numbering-list .category2:before { background-color: #45A2BC; }
.numbering-list .category3:before { background-color: #064E8D; }
.numbering-list .title { min-width: 8.96em; font-size: 1.5625em; font-weight: 700; }
.numbering-list .category { display: block; font-size: 0.64em; font-style: normal; line-height: 1; }
.numbering-list .category1 .category { color: #36AF92; }
.numbering-list .category2 .category { color: #45A2BC; }
.numbering-list .category3 .category { color: #064E8D; }
@media screen and (max-width:1200px) {
.numbering-list > li { display: block; font-size: 0.8125em; padding: 1.5384615385em 3.743315508% 1.5384615385em 12.0320855615%; }
.numbering-list .title { margin-bottom: 0.375em; font-size: 1.2307692308em; }
.numbering-list .title:last-child { margin-bottom: 0; }
.numbering-list .category { font-size: 0.75em; }
}
/* Scrollbar */
.scrollbar-container { position: relative; height: 100%; overflow: auto; }
.scrollbar-container::-webkit-scrollbar { width: 13px; height: 13px; background: transparent; }
.scrollbar-container::-webkit-scrollbar-thumb { border: 4px solid #fff; border-radius: 40px; background: #DEDEDE; }
/* Table */
.table { position: relative; font-size: 1em; line-height: 1.25; border-left: hidden; border-right: hidden; border-top: 1px solid #000; border-bottom: 1px solid #DADADA; table-layout: fixed; }
.table th,
.table td { border: 1px solid #DADADA; border-top: 0; text-align: center; }
.table th { padding: 0.875em 0; font-weight: 700; }
.table td { padding: 1.25em 1.25em; }
.table td:first-child { padding-left: 0; }
@media screen and (max-width:1200px) {
.table { font-size: 0.8125em; }
.table td { padding-left: 0.6153846154em; padding-right: 0.6153846154em; }
}
/* Tab List */
.page-tab { position: sticky; margin-bottom: 1.25rem; }
.page-tab:has(.on > .inner-tab) { margin-bottom: 3.125rem; }
@media screen and (max-width:1200px) {
.page-tab { margin-bottom: 0; }
.page-tab:has(.on > .inner-tab) { margin-bottom: 3.75rem; }
}
.tab-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -10px; padding: 0 10px; list-style: none; background-color: #fff; overflow-y: hidden; }
.tab-list li { position: relative; margin-bottom: 3.75rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-preferred-size: 33.3%; flex-basis: 33.3%; }
.tab-list .tab { display: -webkit-box; display: -ms-flexbox; display: flex; height: 3.5454545455em; padding: 0 0.9090909091em; font-size: 1.375rem; color: #A0A0A0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #DEDEDE; border-width: 1px 0; text-align: center; -webkit-transition: color 0.3s, -webkit-box-shadow 0.3s; transition: color 0.3s, -webkit-box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.tab-list .tab:hover { font-weight: 700; color: inherit; }
.tab-list li:first-child .tab { border-left-width: 1px; }
.tab-list li:last-child .tab { border-right-width: 1px; }
.tab-list .on .tab { font-weight: 700; color: inherit; border-right-width: 1px; border-left-width: 1px; border-color: var(--color-point); -webkit-box-shadow: 0 7px 8px rgba(215, 6, 64, 0.2), 0 15px 15px rgba(215, 6, 64, 0.2); box-shadow: 0 7px 8px rgba(215, 6, 64, 0.2), 0 15px 15px rgba(215, 6, 64, 0.2); }
@media screen and (max-width:1200px) {
.tab-list li { margin-bottom: 3.125rem; }
.tab-list .tab { font-size: 0.8125rem; }
}
.tab-panel { display: none; }
.tab-panel.on { display: block; -webkit-animation: fade-in 0.2s both; animation: fade-in 0.2s both; }
.inner-tab { display: none; position: absolute; top: 100%; left: 0; }
.on > .inner-tab { display: block; }
.inner-tab .tab-list { margin: 0; top: 100%; padding: 1.4375rem 0 0; background: none; }
.inner-tab .tab-list li { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; margin-right: 2.5rem; border: 0; }
.inner-tab .tab-list li:last-child { margin-right: 0; }
.inner-tab .tab-list .tab { display: block; height: auto; padding: 0 1em; font-size: 1.125rem; font-weight: 500; color: #4C4441; line-height: 1.8888888889; border: 0; border-radius: 40px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; white-space: nowrap; }
.inner-tab .tab-list .tab:hover { font-weight: 500; color: inherit; background-color: #FAD3DE; }
.inner-tab .on .tab { font-weight: 500; color: inherit; background-color: #FAD3DE; -webkit-box-shadow: none; box-shadow: none; }
@media screen and (max-width:1200px) {
.inner-tab .tab-list { padding-top: 1.3846153846em; }
.inner-tab .tab-list li { margin-right: 1em; }
.inner-tab .tab-list .tab { padding: 0 1em; font-size: 0.8125rem; line-height: 2; }
}
/* 모달팝업 */
.in-modal { overflow: hidden; }
.popup-wrap { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: rgba(0, 0, 0, 0.7); overflow: hidden; pointer-events: none; -webkit-transition: opacity 0.3s 0.2s, visibility 0.3s 0.2s; transition: opacity 0.3s 0.2s, visibility 0.3s 0.2s; visibility: hidden; z-index: 99; }
.popup-wrap:target,
.popup-wrap.in { opacity: 1; pointer-events: initial; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: visible; }
.popup { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 50%; left: 50%; max-width: 90%; max-height: 90%; margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8); -ms-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; z-index: 1; }
.popup-wrap:target,
.in .popup { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.btn-close-popup { position: absolute; top: -5.25em; right: -1.6875em; width: 4.625em; height: 4.625em; border: 0; border-radius: 50%; background: url("../img/ic_close_wh.svg") no-repeat 50% 50%; background-size: 27.027027027% auto; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-close-popup:hover { background-color: rgba(0, 0, 0, 0.2); }
@media screen and (max-width:1200px) {
.btn-close-popup { top: -3.375em; right: -1.125em; width: 3em; height: 3em; }
}
.popup-header { position: relative; padding: 1.5em 4.625em 1.5em 1.75em; color: #fff; background: var(--color-point); }
.popup-header .btn-close-popup { top: 0; right: 0; height: 100%; border-radius: 0; }
@media screen and (max-width:1200px) {
.popup-header { padding: 0.9375em 3em 0.9375em 1.125em; }
}
.popup-title { font-size: 1.5625em; font-weight: 700; }
@media screen and (max-width:1200px) {
.popup-title { font-size: 1.0625em; }
}
.popup-body { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; overflow: hidden; }
/* #Layout */
@media screen and (min-width:1920px) {
html {         /* 20250211 수정 */
font-size: 1rem; }
}
@media screen and (max-width:1400px) {
html { font-size: 1.1428571429vw; }
}
@media screen and (max-width:1200px) {
html { font-size: 1rem; }
}
@media screen and (max-width:400px) {
html { font-size: 4vw; }
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: var(--100vh); font-family: "Pretendard", sans-serif; letter-spacing: -0.05em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-x: hidden; -ms-scroll-chaining: none; overscroll-behavior: none; word-wrap: break-word; word-break: keep-all; }
.screen-resizing .header *,
.screen-resizing .footer *,
.screen-resizing .quick-menu-wrap * { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }
.skip { display: block; position: absolute; top: 0; left: 0; right: 0; padding: 1em; font-weight: bold; color: #fff; text-align: center; opacity: 0; background: #000; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); z-index: -1; }
.skip:focus,
.skip:active { position: relative; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); z-index: 99; }
.container { width: 83.3333333333%; margin: 0 auto; padding: 0 6.25rem; }
@media screen and (max-width:1920px) {
.container { width: 100%; max-width: 100rem; }
}
@media screen and (max-width:1200px) {
.container { max-width: none; padding: 0 1.25rem; }
}
.top-banner {     /* 20250213 수정 */
display: none; position: relative; width: 100%; min-height: 4.75rem; overflow: hidden; -webkit-transition: background-color 1s; transition: background-color 1s; z-index: 1; }
.top-banner.show {     /* 20250213 수정 */
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.top-banner .banner-content {     /* 20250213 수정 */
position: relative; max-width: 75rem; margin: 0 auto; }
.top-banner .slider { overflow: hidden; white-space: nowrap; }
.top-banner .slide { display: inline-block; overflow: hidden; vertical-align: middle; white-space: normal; }
.top-banner .slide img { display: block; width: 100%; margin: 0 auto; -o-object-fit: contain; object-fit: contain; }
.top-banner [class^=btn-banner-] { position: absolute; top: 0; width: 0.625rem; height: 100%; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; -webkit-tap-highlight-color: transparent; }
.top-banner [class^=btn-banner-]:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 300%; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-size: olive; }
.top-banner .btn-banner-prev {     /* 20250213 수정 */
left: 0.625rem; background-image: url("../img/ic_thin_angle_prev.svg"); }
.top-banner .btn-banner-next {     /* 20250213 수정 */
right: 0.625rem; background-image: url("../img/ic_thin_angle_next.svg"); }
.top-banner .btn-close { display: block; position: absolute; top: 0.375rem; right: 0.75rem; width: 0.75rem; height: 0.75rem; border: 0; border-radius: 50%; background: transparent; }
.top-banner .btn-close:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-banner .form-checkbox { position: absolute; right: 1.875rem; bottom: 1.125rem; padding-left: 1.875em; font-size: 1rem; line-height: 1.25; }
.top-banner .form-checkbox .ico { width: 1.25em; height: 1.25em; border-radius: 3px; background: #E6E4D9; }
.top-banner .form-checkbox .ico:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/ic_chkbox_on.svg"); opacity: 0; }
.top-banner .form-checkbox input:checked ~ .ico {     /* 20250211 수정 */
background-color: var(--color-point); }
@media screen and (max-width:1600px) {
.top-banner .container {         /* 20250213 수정 */
max-width: 75%; }
}
@media screen and (max-width:1200px) {
.top-banner {         /* 20250213 수정 */
height: 29.4685990338vw; max-height: 7.625rem; }
.top-banner .container {         /* 20250213 수정 */
max-width: 25.875rem; padding: 0; }
.top-banner .btn-close { top: 0.5rem; right: 0.5rem; }
.top-banner .form-checkbox { display: none; }
}
.quick-menu-wrap { position: fixed; top: 12.75rem; right: 0; z-index: 3; }
@media screen and (max-width:1200px) {
.quick-menu-wrap { top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; -webkit-transition: background-color 0.3s 0.6s; transition: background-color 0.3s 0.6s; }
.quick-menu-wrap.on { background-color: rgba(0, 0, 0, 0.7); pointer-events: initial; -webkit-transition-delay: 0s; transition-delay: 0s; z-index: 6; }
.quick-menu-wrap.closing { z-index: 6; }
}
.btn-show-qmenu { display: none; }
@media screen and (max-width:1200px) {
.btn-show-qmenu { display: block; position: absolute; right: 1.4375rem; bottom: 2.1875rem; width: 4.3333333333em; height: 4.3333333333em; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: 0; border: 0; border-radius: 50%; background: #45A2BC; pointer-events: initial; text-align: center; -webkit-transition: opacity 0.3s 0.6s, visibility 0.3s 0.6s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.6s ease-in-out; transition: opacity 0.3s 0.6s, visibility 0.3s 0.6s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.6s ease-in-out; transition: box-shadow 0.3s, opacity 0.3s 0.6s, visibility 0.3s 0.6s, transform 0.3s 0.6s ease-in-out; transition: box-shadow 0.3s, opacity 0.3s 0.6s, visibility 0.3s 0.6s, transform 0.3s 0.6s ease-in-out, -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.6s ease-in-out; }
.btn-show-qmenu:before { content: ""; display: block; width: 0.6666666667em; height: 0.4444444444em; margin: 0 auto 2px; background: url("../img/ic_quick_menu_angle.svg") no-repeat 0 0; background-size: contain; }
.btn-show-qmenu:hover { -webkit-box-shadow: 0 3px 6px rgba(69, 162, 188, 0.5), 0 4px 12px rgba(69, 162, 188, 0.3); box-shadow: 0 3px 6px rgba(69, 162, 188, 0.5), 0 4px 12px rgba(69, 162, 188, 0.3); }
}
@media screen and (max-width:1200px) {
.on > .btn-show-qmenu { opacity: 0; pointer-events: none; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0s; transition-delay: 0s; visibility: hidden; }
}
.quick-menu { pointer-events: initial; }
.quick-menu .title { padding: 0.8571428571em 2em; font-size: 0.875rem; font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1; border-radius: 1.25em 0 0 0; background: #45A2BC; text-align: center; }
.quick-menu ul { padding: 1.875em 1.125em 3.625em; font-size: 0.875rem; color: #4C4441; letter-spacing: -0.03em; line-height: 1; list-style: none; border-radius: 0 0 0 1.25em; background: #FCFAF0; text-align: center; }
.quick-menu li + li { margin-top: 1.1428571429em; }
.quick-menu a { display: block; position: relative; -webkit-transition: color 0.3s; transition: color 0.3s; }
.quick-menu a:before { content: ""; display: block; width: 1.7142857143em; height: 1.7142857143em; margin: 0 auto 4px; background-repeat: no-repeat; background-position: 0 0; background-size: contain; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.quick-menu a:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; width: 1.7142857143em; height: 1.7142857143em; margin: 0 auto; background-repeat: no-repeat; background-position: 0 0; background-size: contain; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.quick-menu a:hover { color: #45A2BC; }
.quick-menu a:hover:before { opacity: 0; }
.quick-menu a:hover:after { opacity: 1; }
.quick-menu li:nth-child(1) a:before { background-image: url("../img/ic_quick_menu1.svg"); }
.quick-menu li:nth-child(1) a:after { background-image: url("../img/ic_quick_menu1_on.svg"); }
.quick-menu li:nth-child(2) a:before { background-image: url("../img/ic_quick_menu2.svg"); }
.quick-menu li:nth-child(2) a:after { background-image: url("../img/ic_quick_menu2_on.svg"); }
.quick-menu li:nth-child(3) a:before { background-image: url("../img/ic_quick_menu3.svg"); }
.quick-menu li:nth-child(3) a:after { background-image: url("../img/ic_quick_menu3_on.svg"); }
.quick-menu li:nth-child(4) a:before { background-image: url("../img/ic_quick_menu4.svg"); }
.quick-menu li:nth-child(4) a:after { background-image: url("../img/ic_quick_menu4_on.svg"); }
@media screen and (max-width:1200px) {
.quick-menu { position: absolute; right: 1.4375rem; bottom: 2.1875rem; opacity: 0; pointer-events: none; -webkit-transition: opacity 0s 0.5s, visibility 0s 0.5s; transition: opacity 0s 0.5s, visibility 0s 0.5s; visibility: hidden; }
.quick-menu .title { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.quick-menu ul { padding: 0; font-size: 0.6875rem; border-radius: 0; background: transparent; }
.quick-menu li { opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity 0.3s, -webkit-transform 0.4s; transition: opacity 0.3s, -webkit-transform 0.4s; transition: opacity 0.3s, transform 0.4s; transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; }
.quick-menu a { width: 4.875rem; height: 4.875rem; padding-top: 0.875rem; border-radius: 50%; background: #FFFDF1; }
.quick-menu a:after { top: 0.875rem; }
}
@media screen and (max-width:1200px) {
.closing > .quick-menu li:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.closing > .quick-menu li:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.closing > .quick-menu li:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
}
@media screen and (max-width:1200px) {
.on > .quick-menu { opacity: 1; pointer-events: initial; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; }
.on > .quick-menu li { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.on > .quick-menu li:nth-child(4) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.on > .quick-menu li:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.on > .quick-menu li:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.on > .quick-menu li:nth-child(1) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
}
.btn-close-qmenu { display: none; }
@media screen and (max-width:1200px) {
.btn-close-qmenu { display: block; width: 4.3333333333em; height: 4.3333333333em; margin-top: 0.625rem; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: 0; border: 0; border-radius: 50%; background: #45A2BC; text-align: center; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.4s; transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.4s; transition: box-shadow 0.3s, transform 0.3s 0.4s; transition: box-shadow 0.3s, transform 0.3s 0.4s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.4s; }
.btn-close-qmenu:before { content: ""; display: block; width: 0.6666666667em; height: 0.6666666667em; margin: 0 auto 5px; background: url("../img/ic_close_wh.svg") no-repeat 0 0; background-size: contain; }
.btn-close-qmenu:hover { -webkit-box-shadow: 0 3px 6px rgba(69, 162, 188, 0.5), 0 4px 12px rgba(69, 162, 188, 0.3); box-shadow: 0 3px 6px rgba(69, 162, 188, 0.5), 0 4px 12px rgba(69, 162, 188, 0.3); }
}
@media screen and (max-width:1200px) {
.on .btn-close-qmenu { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.1s; transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.1s; transition: box-shadow 0.3s, transform 0.3s 0.1s; transition: box-shadow 0.3s, transform 0.3s 0.1s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s 0.1s; }
}
/* Header */
.is-menu-expanded { overflow: hidden !important; }
.header { position: sticky; top: -1px; width: 100%; padding: 1.375rem 0; border-bottom: 1px solid transparent; background: #fff; z-index: 5; }
.header:before { content: ""; display: block; height: 1.125rem; }
.header.is-pinned { border-color: #DEDEDE; }
.header.is-pinned:before { position: absolute; top: 0; left: 0; }
.header > .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
@media screen and (max-width:1200px) {
.header:before { content: none; }
.header.is-slide-up { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
}
.site-logo { width: 14.5rem; margin-right: auto; -ms-flex-negative: 0; flex-shrink: 0; }
.site-logo a { display: block; width: 100%; height: 100%; }
.site-logo img { display: block; width: 100%; height: 100%; }
@media screen and (max-width:1600px) {
.site-logo { width: 10.875rem; }
}
@media screen and (max-width:1200px) {
.site-logo { width: 12.125rem; margin: 0 auto; }
}
@media screen and (min-width:1201px) {
.gnb .menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; }
.gnb .menu-list > li { position: relative; }
.gnb .group { display: block; padding: 0.7em 1em 0.75em; font-size: 1.25rem; font-weight: 700; -webkit-transition: color 0.3s; transition: color 0.3s; white-space: nowrap; }
.gnb .group:hover { color: var(--color-point); }
.gnb li:hover .group,
.gnb li:focus-within .group,
.gnb .on .group { color: var(--color-point); }
.gnb .sub-menu { position: absolute; top: 100%; left: 50%; min-width: 10.625em; padding: 1.5em 0.75em; font-weight: 500; list-style: none; line-height: 1.75; text-align: center; border-radius: 1.25rem; background: #fff; -webkit-box-shadow: inset 0 0 0 1px var(--color-point), 0 122px 34px rgba(74, 1, 21, 0.01), 0 78px 31px rgba(74, 1, 21, 0.06), 0 44px 26px rgba(74, 1, 21, 0.21), 0 19px 19px rgba(74, 1, 21, 0.36), 0 5px 11px rgba(74, 1, 21, 0.41); box-shadow: inset 0 0 0 1px var(--color-point), 0 122px 34px rgba(74, 1, 21, 0.01), 0 78px 31px rgba(74, 1, 21, 0.06), 0 44px 26px rgba(74, 1, 21, 0.21), 0 19px 19px rgba(74, 1, 21, 0.36), 0 5px 11px rgba(74, 1, 21, 0.41); opacity: 0; pointer-events: none; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s, visibility 0.3s; transition: opacity 0.3s, transform 0.3s, visibility 0.3s, -webkit-transform 0.3s; visibility: hidden; }
.gnb .sub-menu li + li { margin-top: 1.25em; }
.gnb .sub-menu a { display: block; padding: 0 0.5em; border-radius: 1em; white-space: nowrap; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.gnb .sub-menu a:hover { font-weight: 800; background-color: #FFE7EE; }
.gnb li:hover .sub-menu,
.gnb li:focus-within .sub-menu { opacity: 1; pointer-events: initial; visibility: visible; -webkit-transform: translate(-50%, -4px); -ms-transform: translate(-50%, -4px); transform: translate(-50%, -4px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
}
@media screen and (max-width:1200px) {
.gnb { display: none; }
}
.site-search-form { position: relative; width: 12.5em; height: 2.5em; }
.site-search-form form { width: 100%; height: 100%; }
.site-search-form .input-wrap { display: block; width: 100%; height: 100%; }
.site-search-form .keyword { display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; padding: 0 3.125em 0 1.125em; font-size: 1rem; font-weight: 700; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--color-point); border-radius: 6.25em; background: #fff; -webkit-box-shadow: none; box-shadow: none; outline: 0; -webkit-transition: width 0.3s, -webkit-box-shadow 0.3s; transition: width 0.3s, -webkit-box-shadow 0.3s; transition: width 0.3s, box-shadow 0.3s; transition: width 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.site-search-form .keyword::-webkit-input-placeholder { color: #CDCDCD; }
.site-search-form .keyword::-moz-placeholder { color: #CDCDCD; }
.site-search-form .keyword:-ms-input-placeholder { color: #CDCDCD; }
.site-search-form .keyword::-ms-input-placeholder { color: #CDCDCD; }
.site-search-form .keyword::placeholder { color: #CDCDCD; }
.site-search-form .keyword::-webkit-search-decoration,
.site-search-form .keyword::-webkit-search-cancel-button,
.site-search-form .keyword::-webkit-search-results-button,
.site-search-form .keyword::-webkit-search-results-decoration { display: none; }
.site-search-form .keyword:focus { width: 18.75em; -webkit-box-shadow: 0 0 0 2px var(--color-point); box-shadow: 0 0 0 2px var(--color-point); }
.site-search-form .btn-search { position: absolute; top: 0; right: 0; width: 2.5em; height: 100%; text-align: center; border: 0; border-radius: 50%; background: var(--color-point); }
.site-search-form .btn-search:hover .btn-img { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.site-search-form .btn-img { width: 45%; height: auto; margin: auto; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
@media screen and (max-width:1200px) {
.site-search-form { display: none; }
}
.btn-show-menu { width: 2.5em; height: 2.5em; margin-left: 8px; border: 0; border-radius: 50%; background: #4C4441; -webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s; transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s; transition: box-shadow 0.3s, transform 0.3s; transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s; }
.btn-show-menu:hover { -webkit-box-shadow: 3px 3px 5px rgba(76, 68, 65, 0.7); box-shadow: 3px 3px 5px rgba(76, 68, 65, 0.7); }
.btn-show-menu:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.btn-show-menu .btn-img { width: 40%; height: auto; margin: auto; }
@media screen and (max-width:1200px) {
.btn-show-menu { position: absolute; top: 0; right: 1.25rem; bottom: 0; margin: auto 0; }
}
.side-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; overflow: hidden; pointer-events: none; -webkit-transition: clip-path 0.5s, visibility 0.5s, opacity 0s 0.5s; transition: clip-path 0.5s, visibility 0.5s, opacity 0s 0.5s; visibility: hidden; }
.is-menu-expanded .side-menu { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; pointer-events: initial; -webkit-transition: clip-path 0.7s; transition: clip-path 0.7s; visibility: visible; z-index: 1; }
.side-menu .container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.side-menu .menu-area { position: relative; height: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.side-menu .site-logo { position: absolute; top: 2.5rem; left: 0; z-index: 1; }
.side-menu .site-search-form { display: none; }
.side-menu .menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 21.6666666667vw; min-width: 26rem; min-height: 100%; font-size: 3.125rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style: none; border-right: 1px solid #E4E4E4; z-index: 1; }
@media screen and (max-height:1080px) {
.side-menu .menu-list { font-size: 4.6296296296vh; }
}
.side-menu .menu-list > li { position: relative; }
.side-menu .group { display: inline-block; padding: 0.6em 0; font-weight: 700; color: #C9C9C9; line-height: 1; vertical-align: middle; -webkit-transition: color 0.5s; transition: color 0.5s; }
.side-menu li:hover .group,
.side-menu li:focus-within .group { color: #000; }
.side-menu .sub-menu { position: absolute; top: 50%; left: 100%; margin-top: -1.3333333333em; font-size: 0.6em; font-weight: 500; list-style: none; opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); pointer-events: none; -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s, visibility 0.3s; transition: opacity 0.3s, transform 0.3s, visibility 0.3s, -webkit-transform 0.3s; visibility: hidden; white-space: nowrap; }
@media screen and (max-width:1920px) {
.side-menu .sub-menu { font-size: 2.7777777778vh; }
}
.side-menu .sub-menu li { position: relative; padding: 0.7666666667em 0 0.7666666667em 0.6666666667em; }
.side-menu .sub-menu a:before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; height: 1.4em; margin: auto; background: var(--color-point); opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; }
.side-menu .sub-menu a:hover:before { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
.side-menu li:hover .sub-menu,
.side-menu li:focus-within .sub-menu { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); pointer-events: initial; visibility: visible; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.side-menu .channel-list { position: absolute; bottom: 13.5185185185vh; }
.side-menu .slogan-area { position: absolute; top: 0; right: 0; bottom: 0; width: 36.9791666667vw; background: var(--color-point); overflow: hidden; z-index: 0; }
.side-menu .slogan-area img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
@media screen and (max-width:1200px) {
.side-menu { overflow-y: auto; }
.side-menu::-webkit-scrollbar { display: none; }
.side-menu .container { padding: 0; height: auto; min-height: 100%; }
.side-menu .menu-area { height: auto; padding: 1.375rem 2.5rem 1.5625rem; }
.side-menu .site-logo { position: static; margin: 0 auto; left: 0; }
.side-menu .site-search-form { display: block; width: 76.3285024155vw; height: 2.5rem; margin: 2.25rem auto 2.6875rem; }
.side-menu .site-search-form .input-wrap { position: relative; }
.side-menu .site-search-form .keyword:focus { width: 100%; -webkit-box-shadow: 0 0 0 1px var(--color-point), 0 0 0 4px rgba(215, 6, 64, 0.3); box-shadow: 0 0 0 1px var(--color-point), 0 0 0 4px rgba(215, 6, 64, 0.3); }
.side-menu .menu-list { width: auto; min-width: 0; min-height: 0; margin-left: -1em; font-size: 1.375rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; border-right: 0; }
.side-menu .menu-list > li { width: 50%; margin-bottom: 1.2727272727em; padding-left: 1em; -ms-flex-preferred-size: 50%; flex-basis: 50%; }
.side-menu .group { display: block; padding: 0; color: inherit; }
.side-menu .sub-menu { position: static; top: 0; left: 0; margin-top: 0.9333333333em; font-size: 0.6818181818em; color: #666; line-height: 1.6666666667; opacity: 1; pointer-events: initial; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; transition: none; visibility: visible; white-space: normal; }
.side-menu .sub-menu li { padding: 0; }
.side-menu .sub-menu a:before { content: none; }
.side-menu .sub-menu a:hover { text-decoration: underline; }
.side-menu li:hover .sub-menu,
.side-menu li:focus-within .sub-menu { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); pointer-events: initial; visibility: visible; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.side-menu .channel-list { position: static; margin-top: 3.25rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.side-menu .slogan-area { position: relative; width: 100%; height: 11.5625rem; margin-top: auto; }
}
.btn-close-menu { position: absolute; top: 1rem; right: 1rem; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 4px; background: url("../img/ic_close_thin_wh.svg") no-repeat 0 0; background-size: contain; }
@media screen and (max-width:1200px) {
.btn-close-menu { top: 1.4375rem; right: 1.25rem; background-image: url("../img/ic_close_thin.svg"); }
}
/* Footer */
.footer { position: relative; margin-top: auto; padding: 5.25rem 0 6.5rem; color: #fff; background: #383838; }
.footer .container { display: -webkit-box; display: -ms-flexbox; display: flex; }
.footer .info-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.footer .link-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-negative: 0; flex-shrink: 0; }
@media screen and (max-width:1200px) {
.footer { padding: 3.75rem 0 4.875rem; }
.footer .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.footer .info-group { -webkit-box-flex: initial; -ms-flex: initial; flex: initial; }
.footer .link-group { display: block; }
}
.footer-logo { width: 11.25rem; height: 2.5rem; margin-bottom: 1.375rem; }
.footer-logo img { display: block; width: 100%; height: 100%; }
.footer-info { font-size: 0.8125rem; letter-spacing: -0.03em; line-height: 1.5384615385; opacity: 0.4; }
.footer-menu { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.125em; font-weight: 500; list-style: none; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.footer-menu li:after { content: "|"; margin: 0 1em; font-size: 0.75em; color: #717171; }
.footer-menu li:last-child:after { content: none; }
.footer-menu a:hover { border-bottom: 1px solid; }
@media screen and (max-width:1200px) {
.footer-menu { position: absolute; bottom: 2.5714285714em; margin-top: 1.7857142857em; font-size: 0.875rem; }
}
.channel-list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; }
.channel-list li + li { margin-left: 0.625rem; }
.channel-list a { display: block; position: relative; width: 3.125rem; height: 3.125rem; border: 1px solid; border-radius: 50%; }
.channel-list .btn-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 48%; height: 48%; margin: auto; }
@media screen and (max-width:1200px) {
.channel-list { margin-top: 5.4375rem; }
}
.footer .channel-list a { color: #181818; background-color: #181818; }
.relate-link { width: 22.0769230769em; margin-top: 3.125rem; font-size: 0.8125em; font-weight: 500; color: #fff; letter-spacing: 0; z-index: 2; }
.relate-link .js-dropdown-trigger { position: relative; width: 100%; height: 3.3076923077em; padding: 0 3.8461538462em 0 2em; border: 0; border-radius: 0.7692307692em; background: #181818; text-align: left; }
.relate-link .js-dropdown-trigger:after { content: ""; display: block; position: absolute; top: 0; right: 1.3846153846em; bottom: 0; width: 0.8461538462em; height: 0.5384615385em; margin: auto; background: url("../img/ic_caret_wh.svg") no-repeat 0 0; background-size: contain; pointer-events: none; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.relate-link .dropdown-content { padding: 4px 0; z-index: -1; }
.relate-link .link-list { height: 16em; padding: 1.5384615385em 0; border-radius: 0.7692307692em 0.7692307692em; background: #181818; overflow: hidden; }
.relate-link .link-list ul { height: 100%; line-height: 2.1538461538; list-style: none; }
.relate-link .link-list ul::-webkit-scrollbar-thumb { border-color: #181818; background: #fff; }
.relate-link .link-list a { display: block; padding: 0 2em; }
.relate-link .link-list a:hover,
.relate-link .link-list a:focus { color: #fff; background-color: var(--color-point); }
.relate-link .v-scrollbar { top: 1.8461538462em; bottom: 1.8461538462em; }
@media screen and (max-width:1200px) {
.relate-link { margin-top: 1.125rem; }
.relate-link .link-list { height: 24.6153846154em; }
}
.btn-top { position: absolute; top: 2.25rem; right: 2.25rem; width: 3.375rem; height: 3.375rem; border: 0; border-radius: 50%; background: #181818; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; z-index: 1; }
.btn-top:hover { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2); }
.btn-top:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.btn-top .btn-img { width: 25.9259259259%; height: auto; margin: auto; }
@media screen and (max-width:1200px) {
.btn-top { top: 3rem; right: 1.25rem; }
}
/* 페이지 공통 레이아웃 */
.page {     /* 20250211 수정 */
-webkit-box-flex: 1; -ms-flex: 1; flex: 1; opacity: 0; }
.is-loaded .page,
.is-scrolled .page {     /* 20250211 수정 */
opacity: 1; }
.page-header { position: relative; padding: 3.375rem 0 4.5rem; }
.page-header .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
@media screen and (max-width:1200px) {
.page-header { padding: 2.75rem 0 3.75rem; }
}
.page-title { font-size: 3.8rem; font-weight: 800; text-align: center; }
@media screen and (max-width:1200px) {
.page-title { font-size: 2.5rem; }
}
.page-nav { position: sticky; top: 6.25rem; border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; background: #fff; z-index: 1; }
.page-nav ol { display: -webkit-box; display: -ms-flexbox; display: flex; height: 3.625rem; list-style: none; border-left: 1px solid #DEDEDE; }
.page-nav ol > li { width: 13.75rem; border-right: 1px solid #DEDEDE; }
.page-nav ol > li:first-child { width: auto; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; }
@media screen and (max-width:1600px) {
.page-nav { top: 6rem; }
}
@media screen and (max-width:1200px) {
.page-nav { top: -1px; }
.page-nav .container { padding: 0; }
.page-nav ol > li { width: 10rem; font-size: 0.875rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
}
.page-nav .dropdown { height: 100%; }
.page-nav .js-dropdown-trigger { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; min-width: 0; height: 100%; padding: 0 2.5rem 0 1.25rem; font-weight: 500; text-align: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0; background: #fff; -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.page-nav .js-dropdown-trigger span { display: block; min-width: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-nav .js-dropdown-trigger:after { content: ""; display: block; position: absolute; top: 0; right: 1.5625em; bottom: 0; width: 0.75em; height: 0.4375em; margin: auto 0; background: url("../img/ic_caret_thin.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.page-nav .dropdown:hover .js-dropdown-trigger,
.page-nav .dropdown:focus-within .js-dropdown-trigger { font-weight: 700; color: var(--color-point); -webkit-box-shadow: inset 0 0 0 1px var(--color-point); box-shadow: inset 0 0 0 1px var(--color-point); }
.page-nav .dropdown:hover .js-dropdown-trigger:after,
.page-nav .dropdown:focus-within .js-dropdown-trigger:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.page-nav .menu-list { margin-top: -2px; padding: 1.4666666667em 0 1.3333333333em; list-style: none; font-size: 0.9375em; border: 1px solid var(--color-point); border-top-color: #fff; background: #fff; }
.page-nav .menu-list a { display: block; padding: 0.625em 1.3333333333em; }
.page-nav .menu-list a:hover { font-weight: 700; }
.btn-home { display: block; width: 3.75rem; height: 100%; background: #fff url("../img/ic_home.svg") no-repeat 50% 50%; background-size: 30% auto; -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.btn-home:hover { background-color: #FFE7EE; -webkit-box-shadow: inset 0 0 0 1px var(--color-point); box-shadow: inset 0 0 0 1px var(--color-point); }
@media screen and (max-width:1200px) {
.btn-home { width: 3.875rem; }
}
.page-body { position: relative; padding: 3rem 0 6.25rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
@media screen and (max-width:1200px) {
.page-body { padding-top: 1.75rem; }
}
.primary-title { margin-bottom: 0.8888888889em; font-size: 2.8125rem; font-weight: 700; text-align: center; }
@media screen and (max-width:1200px) {
.primary-title { font-size: 1.5625rem; }
}
.secondary-title { margin-bottom: 0.8em; font-size: 1.5625rem; font-weight: 700; line-height: 1.2; }
.secondary-title span { position: relative; }
.secondary-title span:after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.4em; background: var(--color-point); vertical-align: top; }
.secondary-title small { font-size: 0.64em; }
@media screen and (max-width:1200px) {
.secondary-title { margin-bottom: 0.3em; font-size: 1.25rem; }
.secondary-title span:after { margin-left: 0.4em; }
}
.section-title { font-size: 1.875rem; font-weight: 700; }
@media screen and (max-width:1200px) {
.section-title { font-size: 1.5625rem; text-align: center; }
}
.section:not(:first-child) { margin-top: 5rem; }
@media screen and (max-width:1200px) {
.section:not(:first-child) { margin-top: 3.125rem; }
}
.section-summary { margin-bottom: 7px; line-height: 1.5; }
@media screen and (max-width:1200px) {
.section-summary { font-size: 0.8125rem; text-align: center; }
}
.page-overview { margin-bottom: 3.5em; font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
@media screen and (max-width:1200px) {
.page-overview { margin-bottom: 2.5em; font-size: 1rem; }
}
.visual-banner { position: relative; margin-bottom: 5rem; background: #efefef; z-index: 0; }
.visual-banner .banner-content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 31.7857142857%; height: 18.75rem; padding: 3.125rem 5.1428571429%; color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.visual-banner .title { font-size: 2.1875rem; font-weight: 700; }
.visual-banner .btn { display: block; margin-top: 0.48em; padding: 0.8461538462em 0; font-size: 1.5625rem; font-weight: 500; text-align: center; border-radius: 0.4em; background: #fff; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.visual-banner .btn:hover { color: #fff !important; }
.visual-banner .tel { display: block; margin-top: 0.4em; padding-left: 1.44em; font-size: 0.7142857143em; font-weight: 700; letter-spacing: 0; background: url("../img/ic_tel.svg") no-repeat 0 0; background-size: 1.28em auto; }
.visual-banner img { position: absolute; top: 0; right: 0; width: 68.2142857143%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; z-index: -1; }
@media screen and (max-width:1200px) {
.visual-banner { margin-bottom: 3.125rem; padding-top: 10.9375rem; }
.visual-banner .banner-content { position: relative; width: 100%; height: 6.875rem; padding: 1.875em 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.visual-banner .title { font-size: 1.125em; }
.visual-banner .btn { margin-top: 0; padding: 0.9230769231em 3.0769230769em; font-size: 0.8125em; border-radius: 0.3846153846em; }
.visual-banner .tel { font-size: 0.6666666667rem; }
.visual-banner img { width: 100%; height: 10.9375em; }
}
.construction-msg { margin: -3rem 0 -6.25rem; }
.construction-msg .msg { margin: 3.85em auto 4.15em; max-width: 16.85em; padding: 1.55em 0; font-size: 2.5rem; font-weight: 800; color: #fff; border-radius: 0.5em; background: #908A84; text-align: center; }
.construction-msg .icon { display: block; width: 2.25em; height: 2.05em; margin: 0 auto 0.3em; }
@media screen and (max-width:1200px) {
.construction-msg { margin: -1.75rem 0 -6.25rem; }
.construction-msg .msg { margin: 4.8181818182em auto; font-size: 1.375rem; }
}
/* Board */
.note-editor {     /* 20250211 수정 */
letter-spacing: normal; line-height: 1.42857143; background: #fff; word-wrap: break-word; }
.note-editor code,
.note-editor kbd,
.note-editor pre,
.note-editor samp {     /* 20250211 수정 */
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
.note-editor pre {     /* 20250211 수정 */
display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5; }
.note-editor blockquote {     /* 20250211 수정 */
padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; background: #fff; }
.note-editor .note-toolbar .note-dropdown-item {     /* 20250211 수정 */
display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; white-space: nowrap; }
.note-editor .note-toolbar .note-color .note-color.note-color-all .note-dropdown-menu {     /* 20250211 수정 */
min-width: 342px; }
.note-editor .note-toolbar .note-dropdown-menu > .note-align {     /* 20250211 수정 */
margin-right: 0; }
.note-editor .note-toolbar .note-para .note-dropdown-menu > .note-btn-group.note-list {     /* 20250211 수정 */
margin-left: 4px; }
.note-editor .note-editing-area {     /* 20250211 수정 */
font-family: "Pretendard", sans-serif !important; }
.note-editor .note-editing-area ul,
.note-editor .note-editing-area ol {     /* 20250211 수정 */
margin-top: 0; margin-bottom: 10px; }
.note-editor .note-editing-area ol li,
.note-editor .note-editing-area ul li {     /* 20250211 수정 */
list-style-position: inside; }
.note-editor .note-editing-area blockquote ol:last-child,
.note-editor .note-editing-area blockquote p:last-child,
.note-editor .note-editing-area blockquote ul:last-child {     /* 20250211 수정 */
margin-bottom: 0; }
.note-editor .note-editing-area h1,
.note-editor .note-editing-area h2,
.note-editor .note-editing-area h3,
.note-editor .note-editing-area h4,
.note-editor .note-editing-area h5,
.note-editor .note-editing-area h6 {     /* 20250211 수정 */
font-weight: 500; line-height: 1.1; color: inherit; }
.note-editor .note-editing-area h1,
.note-editor .note-editing-area h2,
.note-editor .note-editing-area h3 {     /* 20250211 수정 */
margin-top: 20px; margin-bottom: 10px; }
.note-editor .note-editing-area h4,
.note-editor .note-editing-area h5,
.note-editor .note-editing-area h6 {     /* 20250211 수정 */
margin-top: 10px; margin-bottom: 10px; }
.note-editor .note-editing-area h1 {     /* 20250211 수정 */
font-size: 36px; }
.note-editor .note-editing-area h2 {     /* 20250211 수정 */
font-size: 30px; }
.note-editor .note-editing-area h3 {     /* 20250211 수정 */
font-size: 24px; }
.note-editor .note-editing-area h4 {     /* 20250211 수정 */
font-size: 18px; }
.note-editor .note-editing-area h5 {     /* 20250211 수정 */
font-size: 14px; }
.note-editor .note-editing-area h6 {     /* 20250211 수정 */
font-size: 12px; }
.note-editor .note-editing-area p {     /* 20250211 수정 */
min-height: 4px; margin: 0 0 10px; }
.note-editor .note-editing-area img {     /* 20250211 수정 */
vertical-align: middle; }
.note-editor .note-editing-area img.note-float-left {     /* 20250211 수정 */
margin-right: 10px; }
.note-editor .note-editing-area img.note-float-right {     /* 20250211 수정 */
margin-left: 10px; }
.note-editor .note-editing-area a {     /* 20250211 수정 */
color: #337ab7; text-decoration: none; }
.note-editor .note-editing-area a:hover,
.note-editor .note-editing-area a:focus {     /* 20250211 수정 */
color: #23527c; text-decoration: underline; outline: 0; }
.note-editor .note-editing-area a:focus {     /* 20250211 수정 */
outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.note-editor .note-editing-area a:active {     /* 20250211 수정 */
outline: 0; }
.note-editor .note-editing-area table {     /* 20250211 수정 */
width: 100% !important; }
.note-editor .note-editing-area td,
.note-editor .note-editing-area th {     /* 20250211 수정 */
width: auto !important; padding: 0; border-style: solid; }
.note-editor .note-editing-area .table {     /* 20250211 수정 */
margin-bottom: 20px; }
.note-editor .note-editing-area .table-bordered {     /* 20250211 수정 */
border: 1px solid #ddd; }
.note-editor .note-editing-area .table > thead > tr > th,
.note-editor .note-editing-area .table > tbody > tr > th,
.note-editor .note-editing-area .table > tfoot > tr > th,
.note-editor .note-editing-area .table > thead > tr > td,
.note-editor .note-editing-area .table > tbody > tr > td,
.note-editor .note-editing-area .table > tfoot > tr > td {     /* 20250211 수정 */
padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; }
.note-editor .note-editing-area .table-bordered > thead > tr > th,
.note-editor .note-editing-area .table-bordered > tbody > tr > th,
.note-editor .note-editing-area .table-bordered > tfoot > tr > th,
.note-editor .note-editing-area .table-bordered > thead > tr > td,
.note-editor .note-editing-area .table-bordered > tbody > tr > td,
.note-editor .note-editing-area .table-bordered > tfoot > tr > td {     /* 20250211 수정 */
border: 1px solid #ddd; }
.note-modal .note-modal-footer { height: auto; min-height: 40px; }
.note-modal .note-modal-footer:after { content: ""; display: table; clear: both; }
.pagination { margin-top: 3.125rem; font-size: 1px; line-height: 1; text-align: center; }
.pagination .sm-pages { display: none; }
.pagination .btn-page { display: inline-block; position: relative; padding: 3px 0.9em; font-size: 1.25rem; vertical-align: middle; -webkit-transition: color 0.3s; transition: color 0.3s; }
.pagination .btn-page:hover { color: var(--color-point); }
.pagination .current { font-weight: 700; color: var(--color-point); pointer-events: none; }
.pagination .current:after { content: ""; display: block; position: absolute; bottom: 0; left: 0.8em; right: 0.8em; border-top: 3px solid; }
.pagination [class^=btn-page-] { display: inline-block; width: 2.375rem; height: 2.375rem; margin: 0 2px; border: 1px solid; background-repeat: no-repeat; background-position: 50% 50%; background-size: 33.3333333333% auto; -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; vertical-align: middle; }
.pagination [class^=btn-page-]:hover { color: var(--color-point); background-color: #FFE7EE; }
.pagination .btn-page-first { background-image: url("../img/ic_page_front.svg"); }
.pagination a.btn-page-prev { margin-right: 0.75rem; background-image: url("../img/ic_page_prev.svg"); }
.pagination a.btn-page-next { margin-left: 0.625rem; background-image: url("../img/ic_page_next.svg"); }
.pagination .btn-page-last { background-image: url("../img/ic_page_last.svg"); }
@media screen and (max-width:1200px) {
.pagination { margin-top: 1.875rem; }
.pagination .lg-pages { display: none; }
.pagination .sm-pages { display: block; }
.pagination .btn-page { font-size: 1.0625rem; }
.pagination [class^=btn-page-] { width: 1.875rem; height: 1.875rem; margin: 0 1px; }
}
.list-badge { display: inline-block; min-width: 4.25em; padding: 0 0.75em; font-size: 1rem; color: #fff; border-radius: 5px; line-height: 1.75; text-align: center; vertical-align: text-top; }
.list-badge.notice { background: var(--color-point); }
.list-badge.dimmed { background: #908A84; }
@media screen and (max-width:1200px) {
.list-badge { font-size: 0.625rem; line-height: 2; border-radius: 3px; }
}
.list-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2.375em 2.5em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #CACACA; -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s; transition: border-color 0.3s, -webkit-box-shadow 0.3s; transition: border-color 0.3s, box-shadow 0.3s; transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.list-item:hover { position: relative; border-color: var(--color-point); -webkit-box-shadow: 0 7px 8px rgba(215, 6, 64, 0.1), 0 15px 15px rgba(215, 6, 64, 0.2); box-shadow: 0 7px 8px rgba(215, 6, 64, 0.1), 0 15px 15px rgba(215, 6, 64, 0.2); }
.list-item .col { display: -webkit-box; display: -ms-flexbox; display: flex; }
.list-item .col + .col { padding-left: 1rem; padding-right: 1rem; }
.list-item a:hover { text-decoration: underline; }
@media screen and (max-width:1200px) {
.list-item { display: block; padding: 1.3636363636em 1.8181818182em; font-size: 0.6875rem; }
.list-item .col + .col { margin-top: 5px; padding: 0; }
}
.list-no { font-size: 1.25em; font-weight: 700; }
@media screen and (max-width:1200px) {
.list-no { font-size: 1em; }
}
.list-title { min-width: 0; font-size: 1.5625em; font-weight: 700; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
@media screen and (max-width:1200px) {
.list-title { font-size: 1.6363636364em; }
}
.list-meta { display: -webkit-box; display: -ms-flexbox; display: flex; color: #666; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.list-meta > *:after { content: "|"; position: relative; top: -1px; font-size: 0.75em; margin: 0 6px; color: #D7D7D7; }
.list-meta > *:last-child:after { content: none; }
.list-meta > .list-status:after { content: none; }
@media screen and (max-width:1200px) {
.list-meta > *:after { font-size: 0.8181818182em; line-height: 1.3636363636; }
}
.list-date { padding-left: 1.6875em; background: url("../img/ic_date.svg") no-repeat 0 0; background-size: 1.0625em auto; }
@media screen and (max-width:1200px) {
.list-date { background-size: 1.1818181818em auto; }
}
.list-status { margin-right: 0.625em; }
.list-status .list-badge { min-width: 5em; }
@media screen and (max-width:1200px) {
.list-status .list-badge { line-height: 1.6; }
}
.board-list { list-style: none; }
.board-list.has-top-line { border-top: 2px solid; }
.board-list > li { margin-bottom: 1.25em; }
.board-list .list-no { position: relative; padding-right: 1rem; -ms-flex-preferred-size: 5.1593323217%; flex-basis: 5.1593323217%; }
.board-list .list-no:after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 1.2em; background: #CACACA; }
.board-list .list-title a { max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width:1200px) {
.board-list > li { margin-bottom: 0.9090909091em; }
.board-list .list-no { padding-right: 0; -ms-flex-preferred-size: 0; flex-basis: 0; }
.board-list .list-no:after { content: none; }
.board-list .list-title a { display: -webkit-box; max-width: 100%; overflow: initial; white-space: normal; max-height: 2.4em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.list-thumb { position: relative; padding-top: 95.5555555556%; overflow: hidden; }
.list-thumb .thumb-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.list-thumb .thumb { height: 100%; overflow: hidden; background: #ececec; }
.list-thumb img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.list-thumb .tns-nav { position: absolute; bottom: 0.875em; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 1; }
.list-thumb .tns-nav button { display: inline-block; position: relative; width: 0.625rem; height: 0.625rem; margin: 0 0.1875rem; border: 0; border-radius: 50%; background: #fff; opacity: 0.5; pointer-events: all; -webkit-transition: opacity 0.2s, background-color 0.2s; transition: opacity 0.2s, background-color 0.2s; vertical-align: middle; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.list-thumb .tns-nav .tns-nav-active { opacity: 1; background-color: var(--color-point); -webkit-box-shadow: 0 0 0 1px var(--color-point); box-shadow: 0 0 0 1px var(--color-point); }
.list-summary { display: -webkit-box; height: 3.125em; margin-bottom: 0.4em; color: #666; line-height: 1.5625; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.list-tags { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 0; height: 1.2em; margin: 0.625em 0; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: hidden; }
.list-tags * { margin-right: 4px; }
.list-tags a:hover { text-decoration: underline; }
.list-card .card-body { padding: 1.875em 2.375em 2.125em; border: 1px solid #CACACA; border-top: 0; }
.list-card .list-title { display: -webkit-box; max-width: 11.2em; height: 2.4em; margin-bottom: 0.4em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.list-card .list-meta { margin-top: 2.5em; }
@media screen and (max-width:1200px) {
.list-card { font-size: 0.875rem; }
.list-card .list-title { max-width: 11em; font-size: 1.4285714286em; }
}
.board-card-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -1.5rem -1.5rem 0; list-style: none; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.board-card-list > li { width: 33.3%; padding: 0 1.5rem 1.5rem 0; -ms-flex-preferred-size: 33.3%; flex-basis: 33.3%; }
.board-card-list a:hover { text-decoration: underline; }
@media screen and (max-width:1200px) {
.board-card-list { margin: 0 -1.25rem -1.25rem 0; }
.board-card-list > li { padding: 0 1.25rem 1.25rem 0; }
}
@media screen and (max-width:1024px) {
.board-card-list > li { width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; }
}
@media screen and (max-width:700px) {
.board-card-list { margin-right: 0; }
.board-card-list > li { width: 100%; padding-right: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
}
.board-view .view-header { padding: 0 17.1428571429% 2.875em; text-align: center; border-bottom: 2px solid; }
.board-view .list-badge { margin-bottom: 0.625em; }
.board-view .list-title { font-size: 2.1875em; }
.board-view .list-title .title { display: block; }
.board-view .list-meta { margin-top: 0.75em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.board-view .view-body { border-bottom: 2px solid; }
.board-view .view-content {     /* 20250211 수정 */
padding: 3.125rem 0; font-size: 18px; letter-spacing: normal; line-height: 1.42857143; word-wrap: break-word; }
.board-view .view-content:not(:has(.note-editor)) code,
.board-view .view-content:not(:has(.note-editor)) kbd,
.board-view .view-content:not(:has(.note-editor)) pre,
.board-view .view-content:not(:has(.note-editor)) samp {     /* 20250211 수정 */
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
.board-view .view-content:not(:has(.note-editor)) pre {     /* 20250211 수정 */
display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5; }
.board-view .view-content:not(:has(.note-editor)) blockquote {     /* 20250211 수정 */
padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; background: #fff; }
.board-view .view-content:not(:has(.note-editor)) ul,
.board-view .view-content:not(:has(.note-editor)) ol {     /* 20250211 수정 */
margin-top: 0; margin-bottom: 10px; }
.board-view .view-content:not(:has(.note-editor)) ol li,
.board-view .view-content:not(:has(.note-editor)) ul li {     /* 20250211 수정 */
list-style-position: inside; }
.board-view .view-content:not(:has(.note-editor)) blockquote ol:last-child,
.board-view .view-content:not(:has(.note-editor)) blockquote p:last-child,
.board-view .view-content:not(:has(.note-editor)) blockquote ul:last-child {     /* 20250211 수정 */
margin-bottom: 0; }
.board-view .view-content:not(:has(.note-editor)) h1,
.board-view .view-content:not(:has(.note-editor)) h2,
.board-view .view-content:not(:has(.note-editor)) h3,
.board-view .view-content:not(:has(.note-editor)) h4,
.board-view .view-content:not(:has(.note-editor)) h5,
.board-view .view-content:not(:has(.note-editor)) h6 {     /* 20250211 수정 */
font-weight: 500; line-height: 1.1; color: inherit; }
.board-view .view-content:not(:has(.note-editor)) h1,
.board-view .view-content:not(:has(.note-editor)) h2,
.board-view .view-content:not(:has(.note-editor)) h3 {     /* 20250211 수정 */
margin-top: 20px; margin-bottom: 10px; }
.board-view .view-content:not(:has(.note-editor)) h4,
.board-view .view-content:not(:has(.note-editor)) h5,
.board-view .view-content:not(:has(.note-editor)) h6 {     /* 20250211 수정 */
margin-top: 10px; margin-bottom: 10px; }
.board-view .view-content:not(:has(.note-editor)) h1 {     /* 20250211 수정 */
font-size: 36px; }
.board-view .view-content:not(:has(.note-editor)) h2 {     /* 20250211 수정 */
font-size: 30px; }
.board-view .view-content:not(:has(.note-editor)) h3 {     /* 20250211 수정 */
font-size: 24px; }
.board-view .view-content:not(:has(.note-editor)) h4 {     /* 20250211 수정 */
font-size: 18px; }
.board-view .view-content:not(:has(.note-editor)) h5 {     /* 20250211 수정 */
font-size: 14px; }
.board-view .view-content:not(:has(.note-editor)) h6 {     /* 20250211 수정 */
font-size: 12px; }
.board-view .view-content:not(:has(.note-editor)) p {     /* 20250211 수정 */
min-height: 4px; margin: 0 0 10px; }
.board-view .view-content:not(:has(.note-editor)) img {     /* 20250211 수정 */
vertical-align: middle; }
.board-view .view-content:not(:has(.note-editor)) img.note-float-left {     /* 20250211 수정 */
margin-right: 10px; }
.board-view .view-content:not(:has(.note-editor)) img.note-float-right {     /* 20250211 수정 */
margin-left: 10px; }
.board-view .view-content:not(:has(.note-editor)) a {     /* 20250211 수정 */
color: #337ab7; text-decoration: none; }
.board-view .view-content:not(:has(.note-editor)) a:hover,
.board-view .view-content:not(:has(.note-editor)) a:focus {     /* 20250211 수정 */
color: #23527c; text-decoration: underline; outline: 0; }
.board-view .view-content:not(:has(.note-editor)) a:focus {     /* 20250211 수정 */
outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.board-view .view-content:not(:has(.note-editor)) a:active {     /* 20250211 수정 */
outline: 0; }
.board-view .view-content:not(:has(.note-editor)) table {     /* 20250211 수정 */
width: 100% !important; }
.board-view .view-content:not(:has(.note-editor)) td,
.board-view .view-content:not(:has(.note-editor)) th {     /* 20250211 수정 */
width: auto !important; padding: 0; border-style: solid; }
.board-view .view-content:not(:has(.note-editor)) .table {     /* 20250211 수정 */
margin-bottom: 20px; }
.board-view .view-content:not(:has(.note-editor)) .table-bordered {     /* 20250211 수정 */
border: 1px solid #ddd; }
.board-view .view-content:not(:has(.note-editor)) .table > thead > tr > th,
.board-view .view-content:not(:has(.note-editor)) .table > tbody > tr > th,
.board-view .view-content:not(:has(.note-editor)) .table > tfoot > tr > th,
.board-view .view-content:not(:has(.note-editor)) .table > thead > tr > td,
.board-view .view-content:not(:has(.note-editor)) .table > tbody > tr > td,
.board-view .view-content:not(:has(.note-editor)) .table > tfoot > tr > td {     /* 20250211 수정 */
padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; }
.board-view .view-content:not(:has(.note-editor)) .table-bordered > thead > tr > th,
.board-view .view-content:not(:has(.note-editor)) .table-bordered > tbody > tr > th,
.board-view .view-content:not(:has(.note-editor)) .table-bordered > tfoot > tr > th,
.board-view .view-content:not(:has(.note-editor)) .table-bordered > thead > tr > td,
.board-view .view-content:not(:has(.note-editor)) .table-bordered > tbody > tr > td,
.board-view .view-content:not(:has(.note-editor)) .table-bordered > tfoot > tr > td {     /* 20250211 수정 */
border: 1px solid #ddd; }
.board-view .list-thumb { width: 644px; margin: 0 auto; padding-top: 644px; }
.board-view .view-content-action { padding: 1.5625em 0 3.125em; text-align: center; }
.board-view .view-content-action .btn { display: block; width: 100%; max-width: 12em; margin: 0 auto; padding: 0.88em; font-size: 1.5625rem; font-weight: 700; color: #fff; background: var(--color-point); border-radius: 0.4em; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.board-view .view-content-action .btn:hover { background-color: #A80734; }
.board-view .view-attachment { padding: 1.5em 0; border-top: 1px solid #C7C7C7; }
.board-view .view-attachment ul { list-style: none; }
.board-view .view-attachment li + li { margin-top: 0.625em; }
.board-view .view-attachment a { display: inline-block; padding-left: 1.5555555556em; font-size: 1.125em; color: #444FE6; line-height: 1.3333333333; text-decoration: underline; vertical-align: middle; background: url("../img/ic_file.svg") no-repeat 0 0; background-size: 1.3333333333em auto; }
.board-view .view-footer { border-bottom: 2px solid; }
.board-view .view-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; font-size: 1.125rem; }
.board-view .nav-link { width: 50%; padding: 1.3888888889em 1.6666666667em; -ms-flex-preferred-size: 50%; flex-basis: 50%; background-repeat: no-repeat; background-size: 0.7222222222em; }
.board-view .nav-link.prev { background-image: url("../img/ic_board_prev.svg"); background-position: 0 50%; }
.board-view .nav-link.next { justify-self: flex-end; background-image: url("../img/ic_board_next.svg"); background-position: 100% 50%; text-align: right; }
.board-view .nav-link .label { display: block; margin-bottom: 0.3333333333em; }
.board-view .nav-link a { display: inline-block; max-width: 73.4375%; font-weight: 700; -webkit-transition: color 0.3s; transition: color 0.3s; }
.board-view .nav-link a:hover { text-decoration: underline; }
.btn-list { display: block; width: 2.5rem; height: 2.5rem; border-radius: 0.3125rem; background: #000 url("../img/ic_board_list.svg") no-repeat 50% 50%; background-size: 40% auto; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-list:hover { background-color: var(--color-point); }
.board-view .btn-list { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
@media screen and (max-width:1200px) {
.board-view .view-header { padding: 0 1.8181818182em 3.2727272727em; font-size: 0.6875rem; }
.board-view .view-content { padding: 1.5rem 0; font-size: 14px; }
.board-view .view-content-action { padding-bottom: 1.5625em; }
.board-view .view-content-action .btn { max-width: 15em; padding: 1.25em; font-size: 1.25rem; }
.board-view .view-attachment { font-size: 0.875rem; }
.board-view .view-nav { font-size: 0.6875rem; }
.board-view .nav-link a { max-width: 88%; }
}
@media screen and (max-width:700px) {
.board-view .list-thumb { width: 100%; padding-top: 100%; }
}
.list-accordion-title { position: relative; border: 1px solid #CACACA; border-top-color: #000; background: #fff; }
.js-accordion-trigger { display: block; position: relative; width: 100%; min-height: 5.5em; padding: 1.5em 4em 1.5em 1.5em; font-size: 1.25rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0; text-align: left; background: #fff; -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.js-accordion-trigger:after { content: ""; display: block; position: absolute; top: 0; right: 1.5em; bottom: 0; width: 1.2em; height: 0.65em; margin: auto; background: url("../img/ic_caret_thin.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.js-accordion-trigger.on:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.js-accordion-trigger:hover { text-decoration: underline; }
@media screen and (max-width:1200px) {
.js-accordion-trigger { padding: 1.1428571429em 2.5714285714em 1.1428571429em 1.0714285714em; font-size: 0.875rem; }
.js-accordion-trigger:after { right: 1.0714285714em; width: 0.8571428571em; height: 0.4285714286em; }
}
.list-accordion-panel { display: none; position: relative; min-height: 9.25em; border: 1px solid #cacaca; border-top-width: 0; background: #FAF9F5; }
.list-accordion-panel .container { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; min-height: inherit; padding: 3.125em 5em 3.125em 1.875em; line-height: 1.5625; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.list-accordion-panel.on { display: block; }
@media screen and (max-width:1200px) {
.list-accordion-panel { min-height: 6.9230769231em; font-size: 0.8125rem; }
.list-accordion-panel .container { padding: 2.0769230769em 2em 3.0769230769em 1.1538461538em; }
}
.calendar .calendar-month { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2.3125em 0; color: #fff; line-height: 1; background: #908A84; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.calendar .month-info { position: relative; padding: 0 3.4375em; }
.calendar .month-num { font-size: 2.8125em; font-weight: 700; }
.calendar .calendar-month a { display: block; position: absolute; top: 0; bottom: 0; width: 2.25em; height: 2.25em; margin: auto; border-radius: 50%; background-repeat: no-repeat; background-position: 0 0; background-size: contain; -webkit-transition: background-color 0.2s, -webkit-transform 0.2s; transition: background-color 0.2s, -webkit-transform 0.2s; transition: background-color 0.2s, transform 0.2s; transition: background-color 0.2s, transform 0.2s, -webkit-transform 0.2s; }
.calendar .calendar-month a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); background-color: rgba(255, 255, 255, 0.2); }
.calendar .btn-month-prev { left: 0; background-image: url("../img/sub/ic_month_prev.svg"); }
.calendar .btn-month-next { right: 0; background-image: url("../img/sub/ic_month_next.svg"); }
.calendar table { table-layout: fixed; }
.calendar thead th { font-size: 1.125em; font-weight: 500; color: #fff; line-height: 2.7777777778; border: 1px solid #817B76; border-bottom: 0; background: #908A84; text-align: center; }
.calendar thead th:nth-child(1) { border-left-color: #908A84; }
.calendar thead th:nth-child(7) { border-right-color: #908A84; }
.calendar .day { height: 8.125em; border: 1px solid #CACACA; background: #fff; vertical-align: top; }
.calendar .day-info { padding: 0.75em; }
.calendar .day-num { display: inline-block; position: relative; font-size: 1.125em; color: #4C4441; vertical-align: top; }
.calendar .weekend1 .day-num { color: var(--color-point); }
.calendar .weekend2 .day-num { color: #45A2BC; }
.calendar .today .day-num { position: relative; color: #fff; z-index: 0; }
.calendar .today .day-num:before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.7777777778em; height: 1.7777777778em; border-radius: 50%; background: var(--color-point); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; }
.calendar .dimmed .day-num { color: #B9B9B9; }
@media screen and (max-width:1200px) {
.calendar { font-size: 0.625rem; }
.calendar .calendar-month { padding: 2em 0; }
.calendar .month-num { font-size: 2.2em; }
.calendar thead th { font-size: 1.2em; line-height: 2; }
.calendar .day-info { height: 8.4em; padding: 0.7em; }
.calendar .day-num { font-size: 1em; }
}
/* 메인 */
.home-top > .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.home-top .col { position: relative; width: 67.8571428571%; min-height: 0; }
.home-top .col:nth-child(2n) { width: 31.2857142857%; margin-left: auto; }
@media screen and (max-width:1200px) {
.home-top { display: block; }
.home-top .col { width: 100%; }
.home-top .col:nth-child(2n) { width: 100%; margin-left: 0; }
}
.home-title { margin-bottom: 0.6666666667em; font-size: 1.875em; font-weight: 700; }
@media screen and (max-width:1200px) {
.home-title { font-size: 1.5625em; }
}
.home-visual { position: relative; margin-bottom: 2.25em; padding-top: 28.5714285714%; border-radius: 1.25em; background: #efefef; overflow: hidden; }
.home-visual .slider-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.home-visual .tns-outer { height: 100%; }
.home-visual .tns-outer * { height: 100%; }
.home-visual img { width: 100%; }
@media screen and (max-width:1200px) {
.home-visual { padding-top: 42.0689655172%; }
}
@media screen and (max-width:700px) {
.home-visual { margin-bottom: 0.9375em; padding-top: 138.5026737968%; }
}
.home-visual-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left: 7.7894736842%; bottom: 14%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.home-visual-nav .dots { display: -webkit-box; display: -ms-flexbox; display: flex; }
.home-visual-nav .btn-slide { display: inline-block; width: 0.625em; height: 0.625em; margin-right: 0.1875em; vertical-align: middle; border: 0; border-radius: 100px; background: #fff; opacity: 0.3; -webkit-transition: opacity 0.3s, width 0.2s; transition: opacity 0.3s, width 0.2s; }
.home-visual-nav .tns-nav-active { width: 1.5625em; opacity: 1; }
@media screen and (max-width:700px) {
.home-visual-nav { left: auto; bottom: auto; top: 9.2664092664%; right: 9.2664092664%; }
}
.btn-home-visual-control { display: inline-block; position: relative; width: 0.625rem; height: 0.625rem; font-size: 1px; color: transparent; line-height: 0; border: 0; background: url("../img/ic_slider_pause_wh.svg") no-repeat 0 0; background-size: contain; vertical-align: middle; }
.btn-home-visual-control:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/ic_slider_play_wh.svg") no-repeat 0 0; background-size: contain; opacity: 0; }
.btn-home-visual-control[data-action=start] { background-image: none; }
.btn-home-visual-control[data-action=start]:before { opacity: 1; }
.home-quick-menu { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2.25em; color: #fff; border-radius: 1.25em; background: var(--color-point); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; }
.home-quick-menu .home-title { margin-bottom: 0; font-size: 2em; }
.home-quick-menu .desc { font-weight: 200; line-height: 1.5625; opacity: 0.6; }
.home-quick-menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; width: 54.7945205479%; margin: 0 auto; list-style: none; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.home-quick-menu li { width: 50%; margin-top: 0.5em; }
.home-quick-menu a { display: block; padding-top: 70.8333333333%; font-size: 0.875em; font-weight: 200; line-height: 1.1; background-repeat: no-repeat; background-position: 50% 0; background-size: 62.5% auto; }
.home-quick-menu a:hover { font-weight: 700; }
.home-quick-menu li:nth-child(1) a { background-image: url("../img/home/ic_quick_svc_menu1.svg"); }
.home-quick-menu li:nth-child(2) a { background-image: url("../img/home/ic_quick_svc_menu2.svg"); }
.home-quick-menu li:nth-child(3) a { background-image: url("../img/home/ic_quick_svc_menu3.svg"); }
.home-quick-menu li:nth-child(4) a { background-image: url("../img/home/ic_quick_svc_menu4.svg"); }
@media screen and (max-width:1200px) {
.home-quick-menu { display: block; padding: 2em 0 2.875em; margin-bottom: 3.375em; }
.home-quick-menu .home-title { font-size: 1.875em; }
.home-quick-menu .desc { font-size: 0.875em; }
.home-quick-menu ul { width: 64.1711229947%; max-width: 15em; }
.home-quick-menu a { padding-top: 6.0714285714em; background-size: 5.3571428571em auto; }
}
.home-notice .scrollbar-container { height: auto; overflow: hidden; }
.home-notice ol { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; }
.home-notice ol li { width: 31.5789473684%; min-height: 0; margin-right: 2.6315789474%; padding-bottom: 2.5em; -webkit-box-flex: 0; -ms-flex: 0 0 31.5789473684%; flex: 0 0 31.5789473684%; }
.home-notice .card { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 1.875em; background: #F6F6F8; overflow: hidden; }
.home-notice .card:hover .thumb { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.home-notice .card:hover .list-title { color: var(--color-point); }
.home-notice .card-thumb { position: relative; padding-top: 50%; background: #efefef; overflow: hidden; }
.home-notice .thumb { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
.home-notice .card-body { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 1.7142857143em 10.6666666667% 2.4285714286em; font-size: 0.875em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.home-notice .card-body:first-child { padding-top: 3.5714285714em; }
.home-notice .list-badge { position: absolute; top: -2.375em; left: 0.625em; min-width: 0; padding-left: 0.625em; padding-right: 0.625em; }
.home-notice .list-title { display: -webkit-box; width: 90%; height: 2.4em; font-size: 1.4285714286em; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-transition: color 0.3s; transition: color 0.3s; }
.home-notice .card-body:first-child .list-title { height: 3.6em; -webkit-line-clamp: 3; }
.home-notice .list-summary { margin-top: 0.5714285714em; }
.home-notice .list-date { margin-top: auto; padding-left: 0; letter-spacing: 0; background: none; }
@media screen and (min-width:1201px) {
.home-notice .js-scrollbar { position: absolute; bottom: 0; left: 0; right: 0; }
.home-notice .js-scrollbar .scrollbar-area { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #E6E6E6; }
.home-notice .js-scrollbar .scrollbar-thumb { position: absolute; top: 0; left: 0; width: 34.7368421053%; height: 1px; background: #000; }
.home-notice .js-scrollbar .scrollbar-thumb:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 12.1212121212%; margin: auto; padding-top: 4.5454545455%; background: url("../img/home/ic_hscroll_thumb.svg") no-repeat 0 0; background-size: contain; }
}
@media screen and (max-width:1200px) {
.home-notice { margin-bottom: 3.375em; }
.home-notice .scrollbar-container { margin: 0 -1.25rem; padding: 0 1.25rem; overflow: auto; }
.home-notice ol li { width: 18em; margin-right: 0; padding-right: 1.25em; padding-bottom: 0; -ms-flex-preferred-size: 16.75em; flex-basis: 16.75em; }
.home-notice .card { border-radius: 1em; }
.home-notice .card-body { font-size: 0.8125em; }
.home-notice .list-badge { font-size: 1.0769230769em; }
.home-notice .list-title { width: 95%; font-size: 1.3846153846em; }
.home-notice .list-date { font-size: 0.8461538462em; }
.home-notice .js-scrollbar { display: none; }
}
.home-event .event-calendar { display: block; position: relative; min-height: 76.7441860465%; padding: 1.375em 1.625em 2.125em; border-radius: 0.625em; border: 1px solid #C8C3BC; background: #fff; }
.home-event .event-calendar:before,
.home-event .event-calendar:after { content: ""; display: block; position: absolute; top: -0.75em; left: 5.7077625571%; width: 1.125em; height: 1.5em; background: url("../img/home/ic_calendar_spring.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.home-event .event-calendar:after { left: auto; right: 5.7077625571%; }
.home-event .month-event-list { display: block; margin: 0; }
.home-event .month-event-list .date { background: #C8C3BC; }
.home-event .month-event-list .on .date { background: var(--color-point); }
.home-event .month-event-list .empty { color: #C8C3BC; }
.home-event .backdrop { position: absolute; top: 0.625em; left: 0; right: 0; height: 100%; border-radius: 0.625em; background: #F5F5F5; -webkit-box-shadow: 0 0 0 1px #C8C3BC; box-shadow: 0 0 0 1px #C8C3BC; z-index: -1; }
.home-event .backdrop::after { content: ""; display: block; position: absolute; top: -0.3125em; left: 0; width: 100%; height: 100%; -webkit-box-shadow: inherit; box-shadow: inherit; border-radius: inherit; background: inherit; }
/* 20250213 수정 -> */
.home-service { margin-top: 4.25em; }
.home-service .home-title { margin-bottom: 0.3333333333em; font-size: 3.75em; text-align: center; }
.home-service .category-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 4.0625em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style: none; }
.home-service .category-list li { width: auto; padding: 0; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; }
.home-service .btn { width: auto; height: auto; margin: 0 1.7em; padding: 0 0 4px; font-size: 1.25em; border: 0; border-bottom: 1px solid transparent; background: none; -webkit-transition: border 0.3s; transition: border 0.3s; }
.home-service .btn:hover { border-color: #000; }
.home-service .on .btn { font-weight: 700; color: var(--color-point); border-color: var(--color-point); -webkit-box-shadow: none; box-shadow: none; }
.home-service .slider-wrap { position: relative; min-height: 21.71875vw; margin-bottom: 6.25em; padding: 5vw 0 0 2.6041666667vw; }
.home-service .home-service-slider { display: -webkit-box; display: -ms-flexbox; display: flex; }
.home-service .slide { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 13.125vw; margin-right: 2.6041666667vw; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; z-index: 0; }
.home-service .slide:before { content: ""; display: block; position: absolute; top: -5vw; left: -7.2916666667vw; width: 21.71875vw; height: 21.71875vw; background: url("../img/home/svc_visual_bg1.svg") no-repeat 0 0; background-size: 100% auto; opacity: 0; z-index: -1; }
.home-service .cate2:before { background-image: url("../img/home/svc_visual_bg2.svg"); }
.home-service .slide > a { display: inherit; width: 100%; pointer-events: none; }
.home-service .thumb-wrap { position: relative; width: 100%; padding-top: 18.2291666667vw; -webkit-box-flex: 0; -ms-flex: 0 0 18.2291666667vw; flex: 0 0 18.2291666667vw; -webkit-filter: grayscale(1); filter: grayscale(1); border-radius: 50%; overflow: hidden; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale(0.72); -ms-transform: scale(0.72); transform: scale(0.72); }
.home-service .thumb-wrap .thumb { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; }
.home-service .thumb-wrap:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; background: #000; }
.home-service .slide-content { display: none; position: relative; max-width: 15.4166666667vw; margin: auto 0 6.5625vw 2em; font-size: 0.9375em; overflow: hidden; }
.home-service .slide-content > * { -webkit-animation: show-up 0.5s both; animation: show-up 0.5s both; }
.home-service .list-title { margin-bottom: 0.3333333333em; font-size: 2em; font-weight: 800; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.home-service .list-desc { color: #666; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.home-service .list-tags { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.home-service .active { width: auto; margin-left: 6.7708333333vw; margin-right: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
.home-service .active:before { opacity: 1; }
.home-service .active + .slide { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
.home-service .is-last { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
.home-service .active .thumb-wrap { -webkit-filter: grayscale(0); filter: grayscale(0); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-animation: fade-in 0.7s both; animation: fade-in 0.7s both; }
.home-service .active .thumb-wrap:after { opacity: 0; }
.home-service .active .slide-content { display: block; pointer-events: initial; }
.home-service .active .thumb-wrap { pointer-events: initial; }
@media screen and (max-width:1600px) {
.home-service .slide-content { max-width: none; margin-bottom: 5.75em; }
.home-service .active { margin-right: 3.125%; }
}
@media screen and (max-width:1200px) {
.home-service { margin: 3.375em 0 4.375em; }
.home-service .home-title { margin-bottom: 0.5333333333em; font-size: 1.875em; }
.home-service .tab-list li { margin-bottom: 1.625em; }
.home-service .slider-wrap { max-width: 23.375em; min-height: 0; margin: 0 auto; padding: 4.375em 0 0; }
.home-service .slide { display: none; width: 100%; margin: 0; }
.home-service .slide:before { top: -4.375em; left: 0; width: 19.5em; height: 19.5em; }
.home-service .thumb-wrap { width: 100%; max-width: 16.375em; padding-top: 16.375em; }
.home-service .slide-content { display: none; max-width: 21.4285714286em; margin: 1.4285714286em auto 0; font-size: 0.875em; text-align: center; }
.home-service .list-title { font-size: 1.7857142857em; }
.home-service .list-desc { min-height: 4.8em; }
.home-service .list-tags { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.home-service .active { display: block; margin-left: 0; }
.home-service .active .thumb-wrap { margin-left: 6.6875em; }
}
/* <- 20250213 수정 */
.home-service-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left: 50%; bottom: 3.0208333333vw; margin-left: 10.9375vw; font-size: 0.9375em; letter-spacing: -0.03em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; }
.home-service-nav button { display: block; position: relative; top: -0.4666666667em; width: 3.3333333333em; height: 1.0666666667em; border: 0; background: url("../img/ic_half_arrow_prev.svg") no-repeat 0 0; background-size: contain; }
.home-service-nav button:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.home-service-nav .btn-slider-next { background-image: url("../img/ic_half_arrow_next.svg"); -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.home-service-nav .slider-paging { width: 3.8666666667em; }
.home-service-nav .current { color: var(--color-point); font-style: normal; font-weight: 800; }
@media screen and (max-width:1200px) {
.home-service-nav { position: relative; left: 0; bottom: 0; margin: 1.6666666667em 0 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}
.home-article { position: relative; background: -webkit-gradient(linear, left top, right top, color-stop(32.0833333333vw, rgb(215, 6, 64)), color-stop(32%, rgb(255, 255, 255))); background: linear-gradient(90deg, rgb(215, 6, 64) 32.0833333333vw, rgb(255, 255, 255) 32%); overflow-x: hidden; }
.home-article .container { position: relative; }
.home-article .title-wrap { position: absolute; width: 13.5%; top: 23.4482758621%; font-size: 0.9375em; letter-spacing: -0.03em; color: #fff; }
.home-article .title-wrap a:hover { text-decoration: underline; }
.home-article .home-title { margin-bottom: 0.2em; font-size: 3.3333333333em; }
.home-article .desc { margin-bottom: 1.6em; opacity: 0.7; }
.home-article .slider-wrap {     /* 20250213 수정 */
width: 101%; margin-left: 21.1428571429%; -ms-touch-action: pan-x; touch-action: pan-x; }
.home-article .card { min-height: 66.985645933%; margin: 9.625em 1.125em 9.625em 0; padding: 0.625em; border: 1px solid #eee; background: #fff; -webkit-box-shadow: 0 0.625em 1.25em rgba(145, 131, 135, 0.1), 0 1.875em 2.5em rgba(145, 131, 135, 0.2); box-shadow: 0 0.625em 1.25em rgba(145, 131, 135, 0.1), 0 1.875em 2.5em rgba(145, 131, 135, 0.2); -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.home-article .card-thumb { position: relative; padding-top: 100%; overflow: hidden; }
.home-article .card-thumb:hover .thumb { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }
.home-article .thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; }
.home-article .card-body { padding: 1.5625em 1.75em 1.875em; text-align: center; }
.home-article .list-title { display: -webkit-box; width: 90%; height: 2.4em; margin: 0 auto 5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.home-article .list-tags { margin-top: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.home-article .goto { font-weight: 700; line-height: 1; border-bottom: 2px solid; -webkit-transition: color 0.3s; transition: color 0.3s; }
.home-article .goto:hover { color: var(--color-point); }
.home-article .is-on .card { border-color: var(--color-point); -webkit-box-shadow: inset 0 0 0 2px var(--color-point), 0 0.625em 1.25em rgba(145, 131, 135, 0.1), 0 1.875em 2.5em rgba(145, 131, 135, 0.2); box-shadow: inset 0 0 0 2px var(--color-point), 0 0.625em 1.25em rgba(145, 131, 135, 0.1), 0 1.875em 2.5em rgba(145, 131, 135, 0.2); }
@media screen and (max-width:1200px) {
.home-article { background: -webkit-gradient(linear, left top, left bottom, color-stop(32.8125rem, rgb(215, 6, 64)), color-stop(32.8125rem, rgb(255, 255, 255))); background: linear-gradient(180deg, rgb(215, 6, 64) 32.8125rem, rgb(255, 255, 255) 32.8125rem); }
.home-article .title-wrap { position: static; width: auto; top: 0; padding: 5.5384615385em 0 0; font-size: 0.8125em; }
.home-article .home-title { font-size: 2.6923076923em; }
.home-article .desc { max-width: 13.8461538462em; }
.home-article .slider-wrap { width: auto; margin: 0 -1.25rem; }
.home-article .card { min-height: 35em; margin: 3.3125em 0.5625em 6.5em; }
.home-article .card-thumb { padding-top: 20em; }
.home-article .card-body { padding: 2.1428571429em 3.2857142857em; font-size: 0.875em; }
.home-article .list-title { width: 95%; font-size: 1.7857142857em; }
}
.home-article-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; bottom: 23.5632183908%; left: 6.25rem; width: 13.5625%; padding-top: 0.75em; }
.home-article-nav button { display: block; width: 3.25em; height: 3.25em; border: 0; border-radius: 50%; background: none; background-repeat: no-repeat; background-position: 0 0; background-size: contain; -webkit-transition: opacity 0.3s, -webkit-box-shadow 0.3s; transition: opacity 0.3s, -webkit-box-shadow 0.3s; transition: box-shadow 0.3s, opacity 0.3s; transition: box-shadow 0.3s, opacity 0.3s, -webkit-box-shadow 0.3s; }
.home-article-nav button:hover { -webkit-box-shadow: inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 2px #fff; }
.home-article-nav button:active { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); }
.home-article-nav button[disabled] { cursor: not-allowed; opacity: 0.3; pointer-events: none; }
.home-article-nav .btn-slider-prev { margin-right: 6px; background-image: url("../img/ic_circle_angle_prev.svg"); }
.home-article-nav .btn-slider-next { background-image: url("../img/ic_circle_angle_next.svg"); }
.home-article-nav .js-progressbar { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.3); }
.home-article-nav .js-progressbar .bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fff; }
@media screen and (max-width:1200px) {
.home-article-nav { top: 12.1875rem; left: auto;         /* 20250213 수정 */ bottom: auto; right: 1.25rem; width: 57.7540106952%; max-width: 13.5em; }
.home-article-nav button { display: none; }
}
.home-contact-us { position: relative; padding: 3.75em 0; background-repeat: no-repeat; background-position: 50% 50%; z-index: 0; }
.home-contact-us .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; z-index: -1; }
.home-contact-us .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; }
.home-contact-us .box { width: 17.5em; margin-left: auto; color: #fff; padding: 2.8125em 1.625em 3.4375em; background: var(--color-point); }
.home-contact-us .title { margin-bottom: 0.9375em; font-size: 1.875em; font-weight: 800; }
.home-contact-us .tel { padding-left: 1.6em; font-size: 1.25em; letter-spacing: -0.03em; background: url("../img/ic_contact.svg") no-repeat 0 0; background-size: 1.2em auto; }
.home-contact-us .tel a { display: block; font-weight: 800; }
.home-contact-us .tel em { font-size: 0.7em; font-style: normal; line-height: 1; }
@media screen and (min-width:1201px) {
.home-contact-us { background-image: url("../img/home/home_contact_bg.jpg"); background-attachment: fixed; background-size: 100% 100%; }
}
@media screen and (max-width:1200px) {
.home-contact-us { padding: 21.875em 0 0; background: url("../img/home/home_contact_bg_sm.jpg"); background-attachment: scroll; background-size: cover; }
.home-contact-us .box { width: 15.9375em; margin-right: -1.25rem; padding: 2.125em 1.5em 2.1875em; }
.home-contact-us .title { margin-bottom: 6px; font-size: 1.5625em; }
}
/* 센터소개 */
.about-desc { list-style: none; }
.about-desc > li { display: -webkit-box; display: -ms-flexbox; display: flex; }
.about-desc > li + li { padding-top: 9.375em; }
.about-desc .title { width: 9.0285714286em; max-width: 22.5714285714%; padding: 1.0857142857em 1.2571428571em 1.1428571429em; font-size: 2.1875em; font-weight: 800; color: #fff; letter-spacing: 0; -ms-flex-item-align: start; align-self: flex-start; border-radius: 0.2857142857em; background: var(--color-point); -webkit-box-flex: 0; -ms-flex: 0 0 9.0285714286em; flex: 0 0 9.0285714286em; }
.about-desc .title:before { content: ""; display: block; width: 1.0857142857em; margin-bottom: 0.2857142857em; border-bottom: 4px solid; }
.about-desc .content-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; }
.about-desc .content-wrap:before { content: ""; display: block; position: absolute; bottom: 100%; left: 0; right: 0; width: 17.875rem; height: 8.1875rem; margin: auto; background: url("../img/sub/about_next_bg.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.about-desc li:nth-child(1) .content-wrap { font-size: 1.875em; line-height: 1.6666666667; }
.about-desc li:nth-child(1) .content-wrap em { font-size: 1.1666666667em; }
.about-desc li:nth-child(1) .content-wrap:before { content: none; }
.about-desc li:nth-child(2) .title { -ms-flex-item-align: center; align-self: center; }
@media screen and (max-width:1200px) {
.about-desc > li { display: block; }
.about-desc > li + li { margin-top: 4.25em; padding-top: 0; }
.about-desc .title { width: 6.5em; max-width: none; padding: 1em 0.4444444444em 1.2222222222em 0.8888888889em; font-size: 1.125em; border-radius: 0.2777777778em; }
.about-desc .title:before { width: 1.0555555556em; margin-bottom: 0.2777777778em; border-bottom: 2px solid; }
.about-desc .content-wrap { display: block; margin-top: 2.5em; }
.about-desc .content-wrap:before { width: 8.9375rem; height: 4.125rem; }
.about-desc li:nth-child(1) .content-wrap { font-size: 0.9375em; }
}
.goals-list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 44.375em; margin: 0 auto; list-style: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.goals-list li { position: relative; width: 33.3%; padding: 33.3% 1em 0; font-size: 1.25em; font-weight: 700; border-radius: 50%; border: 1px solid var(--color-point); background: #fff; text-align: center; }
.goals-list li:after { content: ""; display: block; position: absolute; top: 0; right: -5.5084745763%; bottom: 0; width: 11.0169491525%; height: 11.0169491525%; margin: auto; background: url("../img/sub/ic_goal_plus.svg") no-repeat 0 0; background-size: contain; z-index: 1; pointer-events: none; }
.goals-list li:last-child:after { content: none; }
.goals-list .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.goals-list .icon { display: block; width: 43.4042553191%; height: 43.4042553191%; margin: 0 auto 5px; }
@media screen and (max-width:1200px) {
.goals-list { max-width: 23.375em; }
.goals-list li { font-size: 0.6875em; }
}
.goal-chart { display: block; position: relative; width: 100%; max-width: 54.375em; left: 4.6125461255%; margin: 0 auto; }
.goal-chart img { width: 100%; }
@media screen and (max-width:1200px) {
.goal-chart { max-width: 23.375em; left: 0.625em; }
}
.about2 { position: relative; }
.about2.section { margin-top: 11.25em; }
.about2 .title-wrap { width: 64.2857142857%; float: left; }
.about2 .chart-wrap { display: block; width: 35.3571428571%; max-width: 30.9375em; margin: -7.1428571429% 0 2.5em; float: right; }
.about2 .chart-wrap img { display: block; width: 100%; }
@media screen and (max-width:1200px) {
.about2.section { margin-top: 7.375em; }
.about2 .section-summary { text-align: left; }
.about2 .title-wrap { width: auto; float: none; }
.about2 .chart-wrap { width: 82.3529411765%; max-width: 19.25em; margin: 1.25em auto 2.375em; float: none; }
}
/* 조직도 */
.manager-list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; border-top: 1px solid; border-bottom: 1px solid; }
.manager-list li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.4375em 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.manager-list li + li { margin-left: 2.8571428571%; }
.manager-list .title { width: 7.9em; padding: 0.725em 0.75em 1.425em; font-size: 2.5em; font-weight: 700; color: #fff; line-height: 1; background: var(--color-point); }
.manager-list .name { padding-left: 1.25em; font-size: 1.25em; line-height: 1; }
.manager-list .name strong { display: block; margin-bottom: 0.4em; font-size: 1.5em; font-weight: 700; }
@media screen and (max-width:1200px) {
.manager-list { padding: 0.75em; }
.manager-list li { padding: 0; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.manager-list li + li { margin-left: 10.2857142857%; }
.manager-list .title { width: auto; margin-bottom: 0.5em; font-size: 1.25em; }
.manager-list .name { padding-left: 0; font-size: 0.625em; }
}
.org-chart { margin: 4.5em 0; }
.org-chart img { display: block; width: 60.1875em; margin: 0 auto; }
@media screen and (max-width:1200px) {
.org-chart { margin: 3.4375em 0; }
.org-chart img { width: 23.375em; }
}
.org-contact td ~ td { padding-left: 1.75em; }
@media screen and (max-width:1200px) {
.org-contact th:nth-child(1),
.org-contact td:nth-child(1) { width: 65% !important; }
}
/* 오시는길 */
.section-summary[id^=address] { text-align: left; }
.map-wrap { position: relative; height: 36.75em; margin-top: 1.25em; overflow: hidden; z-index: 0; }
.map-wrap .title-box { position: absolute; bottom: 0; right: 0; padding: 2.24em 2.08em 1.84em; font-size: 1.5625em; font-weight: 700; color: #fff; line-height: 1.2; background: var(--color-point); z-index: 1; }
.map-wrap .title-box:before { content: ""; display: block; width: 1.28em; margin-bottom: 5px; border-bottom: 3px solid; }
.map-wrap .title-box img { display: block; margin-top: 0.4em; width: 100%; }
@media screen and (max-width:1200px) {
.map-wrap { height: 18.375em; margin-top: 0.625em; }
.map-wrap .title-box { width: 13.3333333333em; font-size: 0.75em; }
}
.js-map { position: relative; width: 120%; height: 100%; margin-left: -20%; background: #ececec; overflow: hidden; }
.js-map .pin { display: block; width: 3.125em; height: 3.875em; margin-top: -3.875em; background: url("../img/sub/ic_pin.svg") no-repeat 0 0; background-size: contain; }
@media screen and (max-width:1200px) {
.js-map { width: 135%; margin-left: -35%; }
.js-map .pin { width: 2.1875em; height: 2.75em; margin-top: -2.75em; }
}
/* 금연지원서비스 */
.tab-steps { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 1.3333333333em; padding: 0; font-size: 1.875em; font-weight: 700; list-style: none; }
.tab-steps li { margin: 0; min-height: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.tab-steps .tab { display: block; position: relative; height: auto; padding: 1em 1.7333333333em 2.6em; font-size: inherit; border: 1px solid #CACACA; border-width: 5px 1px 1px 0; text-align: left; -webkit-transition: color 0.3s, border-color 0.3s; transition: color 0.3s, border-color 0.3s; }
.tab-steps .tab:before,
.tab-steps .tab:after { content: ""; display: block; position: absolute; bottom: 0.8em; left: 0; right: 0; width: 1.1em; height: 0.5666666667em; margin: auto; background: url("../img/sub/ic_steps_angle_off.svg") no-repeat 0 0; background-size: contain; pointer-events: none; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.tab-steps .tab:after { opacity: 0; background-image: url("../img/sub/ic_steps_angle_on.svg"); }
.tab-steps .num { display: block; font-size: 0.6666666667em; color: #CACACA; -webkit-transition: color 0.3s; transition: color 0.3s; }
.tab-steps .on .tab { margin-left: -1px; border-color: var(--color-point); -webkit-box-shadow: none; box-shadow: none; }
.tab-steps .on .tab:before { opacity: 0; }
.tab-steps .on .tab:after { opacity: 1; }
.tab-steps .on:first-child .tab { margin-left: 0; }
.tab-steps .on .num { color: var(--color-point); }
@media screen and (max-width:1200px) {
.tab-steps { font-size: 0.9375em; }
.tab-steps .tab { height: 100%; padding: 0.9333333333em 1em 2.5333333333em; }
}
.service-top-pic { width: 28.5714285714%; min-height: 31.25em; margin: 0 0 4.6428571429% 4.6428571429%; float: right; }
.service-top-pic img { display: block; width: 100%; }
@media screen and (max-width:1200px) {
.service-top-pic { width: 11.6875em; min-height: 14.625em; margin: 0 0 2.375em 1.875em; }
}
.service-overview { margin-bottom: 2em; font-size: 1.25em; font-weight: 700; line-height: 1.5; }
.service-overview + .section { margin-top: 0; }
.service-overview ~ .section { max-width: 78.5714285714%; }
.service-overview ~ .section .section-summary { margin: 1.25em 0; text-align: left; }
@media screen and (max-width:1200px) {
.service-overview { font-size: 1em; word-break: break-all; }
.service-overview + .section { clear: both; }
.service-overview ~ .section { max-width: none; }
}
.necessity-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.4285714286em -9px 0 0; font-size: 0.875em; line-height: 1.5714285714; list-style: none; }
.necessity-list li { width: 25%; min-height: 27.8571428571em; padding: 0 9px 9px 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.necessity-list .box { width: 100%; height: 100%; padding: 3.8571428571em 1.4285714286em 1.8571428571em; border: 1px solid #E1E1E1; text-align: center; }
.necessity-list .box:before { content: ""; display: block; width: 4.5714285714em; height: 4.5714285714em; margin: 0 auto 2.2857142857em; background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
.necessity-list li:nth-child(1) .box:before { background-image: url("../img/sub/ic_necessity1.svg"); }
.necessity-list li:nth-child(2) .box:before { background-image: url("../img/sub/ic_necessity2.svg"); }
.necessity-list li:nth-child(3) .box:before { background-image: url("../img/sub/ic_necessity3.svg"); }
.necessity-list li:nth-child(4) .box:before { background-image: url("../img/sub/ic_necessity4.svg"); }
.necessity-list .title { margin-bottom: 0.8em; font-size: 1.4285714286em; font-weight: 700; line-height: 1; }
@media screen and (max-width:1200px) {
.necessity-list { margin-right: -8px; font-size: 0.75em; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.necessity-list li { width: 50%; min-height: 25em; padding: 8px 8px 0 0; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.necessity-list .box { padding: 3.6666666667em 3.8647342995vw 2.3333333333em; }
.necessity-list .box:before { width: 4.1666666667em; height: 4.1666666667em; }
}
.nosmk-harmful .harmful-element { width: 37.4285714286%; }
.nosmk-harmful .harmful-element img { display: block; width: 100%; }
@media screen and (max-width:1200px) {
.nosmk-harmful .harmful-element { width: 19.4375em; }
}
.page-footnote { margin-top: 2.8571428571em; font-size: 0.875em; color: #908A84; line-height: 1.4285714286; }
.page-footnote .title { font-size: inherit; font-weight: 400; }
.page-footnote ul { list-style: none; padding-left: 0.5em; }
.page-footnote .first { margin: 0 0.3em 0 -0.5em; }
@media screen and (max-width:1200px) {
.page-footnote { margin-top: 4.1666666667em; font-size: 0.75em; }
}
.btn-zooming { display: inline-block; position: relative; border: 0; background: none; outline: 0; vertical-align: top; }
.btn-zooming:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: rgba(0, 0, 0, 0.3) url("../img/ic_search_wh.svg") no-repeat 50% 50%; background-size: 1.875rem auto; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 1; }
.btn-zooming:hover:before { opacity: 1; }
@media screen and (max-width:1200px) {
.btn-zooming:before { background-size: 1.25rem auto; }
}
#harmfulPicPopup img { display: block; max-width: none; }
.star-steps { list-style: none; line-height: 1.5625; }
.star-steps li:not(:last-child) { margin-bottom: 1.25em; }
.star-steps li:nth-child(1) .dot-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.25em; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.star-steps .col { display: -webkit-box; display: -ms-flexbox; display: flex; width: 48.6%; min-height: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.star-steps .col:nth-child(1) { margin-right: 2.7272727273%; }
.star-steps .col span { display: block; margin: -1.5625em 0 1em; }
.star-steps .col .note-sample { margin-top: auto; text-align: left; }
.star-steps .dot-list .dot-list { margin-left: -1.2em; }
.star-steps .dot-list .dot-list li { margin-bottom: 0; }
@media screen and (max-width:1200px) {
.star-steps { max-width: none; font-size: 0.8125em; }
.star-steps li:not(:last-child) { margin-bottom: 0.7692307692em; }
.star-steps li:nth-child(1) .dot-list { margin-top: 0.7692307692em; }
.star-steps .col span { margin-bottom: 0.625em; }
}
.note-sample { margin: 1em 0 0 -1.2em; }
.note-sample img { display: block; width: 14em; }
@media screen and (max-width:1200px) {
.note-sample { margin-top: 0.625em; text-align: center; }
.note-sample img { width: 8.6153846154em; }
}
.deep-breathing .img-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.deep-breathing img { display: block; width: 29.375em; }
.deep-breathing .img-desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.deep-breathing .title-box { margin-bottom: 0.7727272727em; padding: 0.6818181818em; font-size: 1.375em; font-weight: 700; color: #fff; line-height: 1; background: var(--color-point); }
@media screen and (max-width:1200px) {
.deep-breathing .img-wrap { display: block; }
.deep-breathing .img-desc { margin: 1.1538461538em -0.5em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; }
}
.monitoring-note { max-width: 78.5454545455%; margin-top: 1em; }
.monitoring-note img { display: block; width: 100%; }
@media screen and (max-width:1200px) {
.monitoring-note { max-width: 23.375em; }
}
#monitoringNotePopup img { display: block; max-width: none; }
.benefit-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.625em; list-style: none; border-top: 2px solid; border-bottom: 2px solid; }
.benefit-list li { padding: 3.375em 0 3.75em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.benefit-list .icon { width: 2.125em; height: 2.125em; margin-bottom: 3px; }
.benefit-list .icon img { display: block; width: 100%; height: 100%; }
.benefit-list .title { margin-bottom: 0.32em; font-size: 1.5625em; font-weight: 700; }
.benefit-list .desc { line-height: 1.25; }
@media screen and (max-width:1200px) {
.benefit-list { padding: 2.3076923077em 1em 2.7692307692em 0; font-size: 0.8125rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.benefit-list li { position: relative; width: auto; padding: 0.4615384615em 0 0 5.7692307692em; }
.benefit-list li + li { margin-top: 2.6153846154em; }
.benefit-list .icon { position: absolute; top: 0; left: 1.7692307692em; width: 2.9230769231em; height: 2.9230769231em; margin: 0; }
.benefit-list .title { font-size: 1.3846153846em; }
.benefit-list .title:nth-child(1) { margin-left: -4.1111111111em; }
.benefit-list .title:nth-child(1) ~ .desc { margin-left: -5.6923076923em; }
}
.service2 .banner-content { background-color: #36AF92; }
.service2 .banner-content:before { content: ""; display: block; width: 4.375rem; height: 4.375rem; margin-bottom: 7px; background: url("../img/sub/ic_service2.svg") no-repeat 0 0; background-size: contain; }
@media screen and (max-width:1200px) {
.service2 .banner-content { padding-left: 24.064171123%; }
.service2 .banner-content:before { position: absolute; top: 0; left: 7.486631016%; bottom: 0; width: 3rem; height: 3rem; margin: auto; }
}
.service3 .banner-content { background-color: #45A2BC; }
.service3 .banner-content:before { content: ""; display: block; width: 3.375rem; height: 3.625rem; margin-bottom: 7px; background: url("../img/sub/ic_service3.svg") no-repeat 0 0; background-size: contain; }
/* 셀프테스트 */
.info-banner { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; margin-bottom: 3.2em; padding: 1.68em 5.4285714286% 1.68em 12.1428571429%; font-size: 1.5625rem; font-weight: 700; color: #fff; letter-spacing: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0.8em; background: #4C4441; }
.info-banner .icon { display: block; position: absolute; top: 50%; left: 5.4285714286%; width: 4.1875rem; pointer-events: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.info-banner .content-wrap { padding-left: 1.28em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.info-banner .desc { margin-top: 0.8125em; font-size: 0.64em; font-weight: 400; }
@media screen and (max-width:1200px) {
.info-banner { padding: 1.75em 1.5625em 1.75em 6.9375em; font-size: 1rem; }
.info-banner .icon { left: 2.25em; width: 4rem; }
.info-banner .desc { font-size: 0.8125em; }
}
.self-test-list { list-style: none; border-top: 2px solid; border-bottom: 2px solid; }
.self-test-list > li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2em 2.1428571429%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.self-test-list > li + li { border-top: 1px solid #E4E4E4; }
.self-test-list th,
.self-test-list td { padding: 1.6875em 0; border-top: 1px solid #E4E4E4; text-align: center; }
.self-test-list .list-title { position: relative; padding-left: 2.4em; font-size: 1.25rem; font-weight: 700; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.self-test-list th .list-title { padding: 0; }
.self-test-list .icon-q { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; bottom: 0; left: 0; width: 2em; height: 2em; margin: auto; font-weight: 700; color: #fff; border-radius: 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--color-point); }
.self-test-list .icon-q:before { content: "Q"; }
.self-test-list .title { font-size: inherit; font-weight: inherit; }
.self-test-list .list-choice { display: -webkit-box; display: -ms-flexbox; display: flex; width: 49.2537313433%; -ms-flex-preferred-size: 49.2537313433%; flex-basis: 49.2537313433%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.self-test-list .list-choice .col { min-width: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; }
@media screen and (max-width:1200px) {
.self-test-list > li { padding: 1.5625em 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; }
.self-test-list th,
.self-test-list td { padding: 1.5384615385em 0; font-size: 0.8125rem; }
.self-test-list .list-title { padding-right: 1.5em; }
.self-test-list th .list-title { font-size: inherit; }
.self-test-list .list-choice { margin-top: 1.5em; width: 100%; -ms-flex-preferred-size: initial; flex-basis: initial; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; }
.self-test-list .list-choice .col { min-width: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
}
.source-by { margin-top: 1.2142857143em; font-size: 0.875em; font-weight: 500; color: #908A84; }
.action-footer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.5rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
@media screen and (max-width:1200px) {
.action-footer { margin-top: 3rem; }
}
.btn-done .loading-txt { display: none; visibility: hidden; }
.btn-done .loader { width: 1em; height: 1em; margin: -1px 4px 0 0; vertical-align: top; }
.btn-done.is-loading { background-color: #cacaca; cursor: not-allowed; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.btn-done.is-loading .txt { display: none; visibility: hidden; }
.btn-done.is-loading .loading-txt { display: initial; visibility: visible; }
.self-test-result { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 10.625em; margin-top: 3em; border: 1px solid var(--color-point); }
.self-test-result .title-area { display: -webkit-box; display: -ms-flexbox; display: flex; width: 16.25em; padding: 4.875em 2.125em 2.125em; color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--color-point) url("../img/sub/ic_test_result.svg") no-repeat 2.0625em 1.875em; background-size: 3.75em auto; }
.self-test-result .area-label { margin-top: 5px; font-size: 1.125em; }
.self-test-result .result-title { font-size: 2.1875em; font-weight: 800; line-height: 1.1428571429; }
.self-test-result .result-area { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; line-height: 1.875; letter-spacing: -0.03em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; }
.self-test-result .result-area > * { -webkit-animation: fade-in 0.5s; animation: fade-in 0.5s; }
@media screen and (max-width:1200px) {
.self-test-result { min-height: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.self-test-result .title-area { width: 100%; min-height: 4.5em; padding: 0.9375em 1.5em 0.9375em 4.375em; background-position: 1.5em 50%; background-size: 2.625em auto; }
.self-test-result .area-label { font-size: 0.875em; }
.self-test-result .result-title { font-size: 1.125em; }
.self-test-result .result-area { display: initial; font-size: 0.8125rem; }
}
.self-test1-result,
.self-test3-result { padding: 1.25em 11.3438045375% 1.25em 2.625em; }
@media screen and (max-width:1200px) {
.self-test1-result,
.self-test3-result { padding: 1.5384615385em 1.3846153846em 2.0769230769em; }
}
.self-test2-form { position: relative; }
.self-test2-form .input-wrap { width: 56.8669527897%; max-width: 100%; }
.self-test2-form .unit { margin-left: 0.625em; font-weight: 500; }
.self-test2-form .action-group { margin-bottom: 1.375rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
@media screen and (max-width:1200px) {
.self-test2-form td { white-space: nowrap; }
.self-test2-form .input-wrap { width: calc(100% - 3em); }
}
.btn-add-row,
.btn-del-row { display: inline-block; padding: 0.6111111111em 1.4444444444em; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: 0; vertical-align: middle; border: 0; border-radius: 0.5555555556em; background: #4C4441; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-add-row:hover,
.btn-del-row:hover { background-color: #82746F; }
.btn-add-row:active,
.btn-del-row:active { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); }
@media screen and (max-width:1200px) {
.btn-add-row,
.btn-del-row { padding: 0.7692307692em 1.5384615385em; font-size: 0.8125rem; }
}
.self-test2-result { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; padding: 2.5em 0; list-style: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; }
.self-test2-result li { display: -webkit-box; display: -ms-flexbox; display: flex; width: 17.375rem; max-width: 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.self-test2-result li + li { margin-left: 6.25em; }
.self-test2-result .subject-label { display: inline-block; margin-bottom: auto; padding: 0 1.125em; font-weight: 500; color: #fff; line-height: 1.625; border-radius: 40px; background: var(--color-point); text-align: center; vertical-align: top; white-space: nowrap; }
.self-test2-result .calc-value { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-top: 2.7777777778em; font-size: 1.125rem; font-weight: 700; justify-self: flex-end; border-bottom: 3px solid; text-align: right; white-space: nowrap; }
.self-test2-result .num { font-style: normal; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.self-test2-result .unit { margin-left: 0.5555555556em; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; }
@media screen and (max-width:1200px) {
.self-test2-result { width: 100%; padding: 3.4615384615em 8.064516129%; font-size: 0.8125rem; }
.self-test2-result li { width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.self-test2-result li + li { margin-left: 8.6021505376%; }
.self-test2-result .calc-value { margin-top: 1.9230769231em; font-size: 1em; border-bottom: 2px solid; }
}
.think-about-result { margin-top: 2.5em; font-size: 0.875rem; font-weight: 500; color: #666; letter-spacing: -0.03em; line-height: 1.2857142857; }
.think-about-result h4 { margin-bottom: 0.7222222222em; color: #000; font-size: 1.2857142857em; line-height: normal; }
.think-about-result ul { margin: 1.4285714286em 0; list-style: none; }
@media screen and (max-width:1200px) {
.think-about-result { margin-top: 1.9230769231em; font-size: 0.8125rem; }
}
.self-test3-form .list-choice .col { min-width: 33.3%; -ms-flex-preferred-size: 33.3%; flex-basis: 33.3%; }
.self-test3-form .list-choice .col-2 { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 66.7%; -ms-flex-preferred-size: 66.7%; flex-basis: 66.7%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; white-space: nowrap; }
.self-test3-form .form-radiobox + .input-wrap { pointer-events: none; }
.self-test3-form .form-radiobox:has(input:checked) + .input-wrap { pointer-events: initial; }
.self-test3-form .form-text { width: 9.6354166667vw; }
.self-test3-form .unit { vertical-align: middle; }
@media screen and (max-width:1200px) {
.self-test3-form .list-choice .col-2 { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 66.7%; -ms-flex-preferred-size: 66.7%; flex-basis: 66.7%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.self-test3-form .col .form-text { width: calc(100% - 2em); }
.self-test3-form .col-2 .form-text { width: 7.875em; }
}
/* 내소상담 */
.appointment { position: relative; }
.appointment:after { content: ""; display: table; clear: both; }
.appointment .calendar-area { width: 64.5714285714%; padding-right: 3.4285714286%; float: left; }
.appointment .calendar .calendar-month { padding-top: 1.4375em; padding-bottom: 1.4375em; }
.appointment .calendar .calendar-month a { width: 1.5em; height: 1.5em; }
.appointment .calendar .month-info { padding: 0 2.25em; }
.appointment .calendar .month-num { font-size: 1.875rem; }
.appointment .calendar thead th { font-size: 1em; line-height: 1.8125; }
.appointment .calendar .day { height: 5.4375em; }
.appointment .calendar .day-info { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 100%; padding: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.appointment .calendar .day-num { display: block; border: 0; background: transparent; }
.appointment .calendar .today .day-num:before { background-color: #908A84; }
.appointment .calendar .day.on .day-num { position: relative; color: #fff; z-index: 0; }
.appointment .calendar .day.on .day-num:before { content: ""; position: absolute; top: 50%; left: 50%; width: 2.2222222222em; height: 2.2222222222em; border-radius: 50%; background: var(--color-point); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; }
.appointment .calendar .day.on .btn-day { pointer-events: none; background: none; -webkit-box-shadow: none; box-shadow: none; }
.appointment .calendar .btn-day { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: none; -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.appointment .calendar .btn-day:hover { background-color: rgba(215, 6, 64, 0.1); -webkit-box-shadow: inset 0 0 0 2px var(--color-point); box-shadow: inset 0 0 0 2px var(--color-point); }
.appointment .calendar .btn-day:active { -webkit-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); }
.appointment .calendar .time-table-row td { padding: 0; }
.appointment .calendar .time-list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 2.8125em 2.9867256637% 2.8125em 4.092920354%; font-size: 1rem; -ms-flex-wrap: wrap; flex-wrap: wrap; background: var(--color-point); overflow: hidden; -webkit-animation: fade-in 0.5s 0.1s both; animation: fade-in 0.5s 0.1s both; }
.appointment .calendar .time-list li { width: 16.6666666667%; padding: 0 0.625em 0.625em 0; }
.appointment .calendar .btn-time { display: block; position: relative; width: 100%; height: 2.875em; padding: 7px 1.125em; font-size: 1em; font-weight: 800; color: var(--color-point); border: 0; border-radius: 5px; background: #fff; text-align: left; -webkit-transition: background-color 0.3s, -webkit-transform 0.1s; transition: background-color 0.3s, -webkit-transform 0.1s; transition: background-color 0.3s, transform 0.1s; transition: background-color 0.3s, transform 0.1s, -webkit-transform 0.1s; }
.appointment .calendar .btn-time:hover { -webkit-box-shadow: 4px 4px 0 2px #930029; box-shadow: 4px 4px 0 2px #930029; -webkit-transform: translate(-2px, -2px); -ms-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
.appointment .calendar .btn-time:active { -webkit-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); }
.appointment .calendar .btn-time time { position: absolute; top: 7px; }
.appointment .calendar .btn-time.on { background-color: #FF81A4; pointer-events: none; }
.appointment .calendar .btn-time.dimmed { color: #C80D41; background-color: #930029; -webkit-box-shadow: none !important; box-shadow: none !important; cursor: not-allowed; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important; }
.appointment .form-area { width: 35.4285714286%; float: right; }
.appointment .form-area .form-table { margin-top: 2.5em; }
.appointment .help-contact { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0.6666666667em 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3333333333; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.appointment .help-contact em { margin-right: 0.6666666667em; font-style: normal; }
@media screen and (max-width:1200px) {
.appointment .calendar-area { width: auto; padding-right: 0; float: none; }
.appointment .calendar { font-size: 0.75rem; }
.appointment .calendar .calendar-month a { width: 1.5em; height: 1.5em; }
.appointment .calendar .month-num { font-size: 1.9166666667em; }
.appointment .calendar .time-list { padding: 1.6666666667em 0.8333333333em 1.25em 1.25em; font-size: 1em; }
.appointment .calendar .time-list li { width: 20%; padding: 0 0.4166666667em 0.4166666667em 0; }
.appointment .calendar .btn-time { height: 2.9166666667em; padding: 7px; border-radius: 3px; }
.appointment .form-area { width: auto; margin-top: 3.125em; float: none; }
.appointment .form-area .form-table { margin-top: 1.7692307692em; }
}
.calendar-info { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.125em; list-style: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.calendar-info li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 1.25em; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.calendar-info [class^=color-box] { display: inline-block; width: 0.9375em; height: 0.9375em; margin-right: 5px; vertical-align: middle; }
.calendar-info .color-box1 { border: 1px solid var(--color-point); }
.calendar-info .color-box2 { background-color: #FF81A4; }
.calendar-info .color-box3 { background-color: #930029; }
@media screen and (max-width:1200px) {
.calendar-info { margin-top: 0.8333333333em; font-size: 0.75rem; }
}
.form-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
@media screen and (max-width:1200px) {
.form-table { font-size: 0.8125rem; }
}
.form-row { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; min-height: 3.75em; margin-bottom: 0.625em; }
.form-row:last-child { margin-bottom: 0; }
.form-row .col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.form-row > .label { display: -webkit-box; display: -ms-flexbox; display: flex; width: 5.125em; padding: 1.25em 0; font-weight: 700; letter-spacing: -0.03em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 5.125em; flex: 0 0 5.125em; }
.form-row > .value { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.form-row > .value:only-child { margin-left: 5.125em; }
.form-row .input-wrap { margin-top: 0.625em; }
.form-row .input-wrap:first-child { margin-top: 0; }
.form-row .form-text { height: 3.75rem; }
.form-row .form-radiobox { min-width: 40%; }
.form-row .form-radiobox.lg { width: 100%; }
.form-row .btn-action { display: inline-block; height: 3.75rem; padding: 1em 1.2222222222em; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: 0; border: 0; border-radius: 0.5555555556em; background: #4C4441; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; vertical-align: middle; white-space: nowrap; }
.form-row .btn-action:hover { background-color: #655955; }
.form-row .btn-action:active { -webkit-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); }
.form-row .form-help { margin-top: 0.625rem; padding-left: 0.5rem; font-size: 0.875em; font-weight: 500; letter-spacing: -0.03em; }
.form-row .form-help:before { content: "*"; margin: 0 0.2rem 0 -0.5rem; }
@media screen and (max-width:1200px) {
.form-row { min-height: 3.8461538462em; margin-bottom: 1.1538461538em; }
.form-row > .label { width: 5.3846153846em; padding: 1.2307692308em 0; -webkit-box-flex: 0; -ms-flex: 0 0 6.1538461538em; flex: 0 0 6.1538461538em; }
.form-row > .value:only-child { margin-left: 5.3846153846em; }
.form-row .input-wrap { margin-top: 1.1538461538em; }
.form-row .form-text { height: 3.125rem; }
.form-row .btn-action { height: 3.8461538462em; padding: 1.3076923077em 1.9230769231em; font-size: 1em; border-radius: 0.6153846154em; }
.form-row .form-help { font-size: 0.9230769231em; }
}
.post-form .btn-action { margin-left: 0.625rem; }
.agreement-option { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.125em 0; padding-left: 5.125em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.agreement-option .btn-open-popup { display: inline-block; padding: 0 0.9333333333em; font-size: 0.9375em; line-height: 1.8666666667; border: 1px solid; background: #fff; vertical-align: middle; }
.agreement-option .btn-open-popup:hover { color: #fff; background-color: var(--color-point); }
@media screen and (max-width:1200px) {
.agreement-option { font-size: 0.8125rem; }
.agreement-option .btn-open-popup { font-size: 1.0769230769em; }
}
.preview-info { margin-top: 1.5em; padding: 1.75em 2.375em; border: 1px solid #C5C5C5; }
.preview-info h4 { margin-bottom: 0.5em; font-size: 1.25em; }
.preview-info ul { list-style: none; font-weight: 500; letter-spacing: -0.03em; }
.preview-info li + li { margin-top: 0.4444444444em; }
.preview-info em { font-style: normal; }
@media screen and (max-width:1200px) {
.preview-info { margin-top: 3.6923076923em; font-size: 0.8125rem; }
}
.appointment-info { width: 64.5714285714%; margin-top: 3.25rem; padding-right: 3.4285714286%; list-style: none; float: left; }
.appointment-info > li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.5em 0 2.5em; border-top: 1px solid; }
.appointment-info .title { width: 35.046728972%; font-size: 1.25em; font-weight: 700; -ms-flex-preferred-size: 35.046728972%; flex-basis: 35.046728972%; }
.appointment-info .desc { color: #666; line-height: 1.5; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.appointment-info .desc ul { list-style: none; }
.appointment-info .desc li { padding-left: 1em; }
.appointment-info .desc li .dot { margin: 0 0.5em 0 -1em; }
@media screen and (max-width:1200px) {
.appointment-info { width: auto; font-size: 0.8125rem; float: none; }
.appointment-info > li { padding: 1em 0 1.9230769231em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.appointment-info .title { margin-bottom: 0.625em; width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
}
.popup-wrap[id=agreementPopup] .popup { width: 41.25rem; }
.agreement-content { padding: 2em 2em 2.25em; line-height: 1.5; }
@media screen and (max-width:1200px) {
.agreement-content { padding: 1.3846153846em 1.5384615385em 2.6153846154em; font-size: 0.8125rem; }
}
/* 흡연 현황 */
.status-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.status-group .card { width: 48.5714285714%; margin-bottom: 1.875rem; border: 1px solid #D7D7D7; }
.status-group .card-2 { width: 100%; }
.status-group .card-header { padding: 2.1875em 1.875em; border-bottom: inherit; background: #ECE9E4; }
.status-group .secondary-title { margin-bottom: 0; }
.status-group .card-body { position: relative; background: #fff; }
.status-group .chart-wrap { padding: 1.125em 5.5882352941% 3.375em 28.5294117647%; background-repeat: no-repeat; background-position: 6.1764705882% 45%; background-size: 19.8529411765% auto; }
.status-group .chart-wrap svg { display: block; width: 100%; height: auto; font-size: 1rem; margin: 0 auto; -webkit-animation: fade-in 0.3s; animation: fade-in 0.3s; }
.status-group .chart-wrap .chart-legend g { cursor: pointer; }
@media screen and (max-width:1200px) {
.status-group { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; }
.status-group .card { width: auto; margin-bottom: 0.9375em; }
.status-group .card-header { padding: 1.125em 1.0625em; }
.status-group .chart-wrap { max-width: 23.25em; margin: 0 auto; padding: 0.75em 1.125em 1.875em 6.375em; background-position: 0.75em 45%; background-size: 4.625em auto; }
.status-group .chart-wrap svg { font-size: 0.625rem; }
.status-group .chart-wrap .y-axis { font-size: 0.8em; }
}
.status-list { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 12.5em; list-style: none; font-size: 1.25rem; font-weight: 700; line-height: 1.5; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; white-space: nowrap; }
.status-list .symbol img { display: block; width: 100%; height: auto; margin: 0 auto; }
.status-list .value { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--color-point); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.status-list .value .num { display: block; font-style: normal; }
.status-list .value .hide { position: absolute; visibility: hidden; }
.status-list .value .unit { color: #000; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
@media screen and (max-width:1200px) {
.status-list { min-height: 9.7857142857em; font-size: 0.875rem; }
}
.status1-1 .status-list li { margin: 0 6%; }
.status1-1 .symbol { width: 4.8em; margin: 0 auto 6px; }
@media screen and (max-width:1200px) {
.status1-1 .status-list li { margin: 0 1.8em; }
.status1-1 .symbol { width: 3.8571428571em; }
}
.status1-2 .status-list li { margin: 0 1.8%; }
.status1-2 .symbol { width: 3.5em; margin: 0 auto 1.2em; }
@media screen and (max-width:1200px) {
.status1-2 .status-list { flex-wrap: wrap; }
.status1-2 .status-list li { width:33.3%; margin: 0.75em 0; }
.status1-2 .symbol { width: 2.6428571429em; margin-bottom: 0.2em; }
}
.status1-3 .chart-wrap { padding: 1.6875em 4.4285714286% 3.375em 12.2857142857%; }
@media screen and (max-width:1200px) {
.status1-3 .chart-wrap { padding: 0.75em 1.0625em 1.6875em; }
}
.status1-4 .chart-wrap { background-image: url("../img/sub/status4_bg.svg"); }
@media screen and (max-width:1200px) {
.status1-4 .chart-wrap { background-position: 1.25em 45%; }
}
.status1-5 .chart-wrap { background-image: url("../img/sub/status5_bg.svg"); }
.status2 { width: 100%; }
.status2 .chart-wrap { padding: 0 20% 3.375rem 16.8571428571%; }
.status2 svg { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
@media screen and (max-width:1200px) {
.status2 .chart-wrap { padding: 0 0 0.875em; }
}
.is-loaded .chart-line { opacity: 0; }
.is-finished .chart-line { opacity: 1; }
/* 내담자 Q&A집 */
.btn-faq { padding-left: 4.5em; }
.btn-faq:before { content: "Q"; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 1.2em; bottom: 0; width: 1.6em; height: 1.6em; margin: auto; font-size: 1.25em; font-weight: 700; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: var(--color-point); }
.btn-faq em { display: block; margin-bottom: 0.25em; font-size: 0.8em; font-style: normal; color: var(--color-point); }
.btn-faq:hover { text-decoration: none; }
.btn-faq:hover strong { text-decoration: underline; }
@media screen and (max-width:1200px) {
.btn-faq { padding-left: 3.2142857143em; }
.btn-faq:before { left: 1.1538461538em; bottom: 0; width: 1.6923076923em; height: 1.6923076923em; font-size: 0.9285714286em; }
.btn-faq em { font-size: 0.7857142857em; }
}
.faq-content .container { padding-left: 5.625em; }
.faq-content .container:before { content: "A"; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 2.16em; left: 1.2em; width: 1.6em; height: 1.6em; font-size: 1.5625em; font-weight: 700; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: #4C4441; }
@media screen and (max-width:1200px) {
.faq-content .container { padding-left: 3.4615384615em; }
.faq-content .container:before { top: 2.0769230769em; left: 1.1538461538em; width: 1.6923076923em; height: 1.6923076923em; font-size: 1em; }
}
/* 행사일정 */
.event-category { display: inline-block; color: #fff; vertical-align: middle; }
.event-category.cate1 { background-color: var(--color-point); }
.event-category.cate2 { background-color: #FB5F10; }
.event-category.cate3 { background-color: #C01EED; }
.event-category.cate4 { background-color: #36AF92; }
.event-calendar { position: relative; margin-top: 2.5rem; }
.event-calendar .category-list { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: -2.375rem; right: 0; font-weight: 500; list-style: none; }
.event-calendar .category-list li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 1.25em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.event-calendar .category-list .event-category { width: 0.875em; height: 0.875em; margin-right: 3px; }
.event-calendar .day-event { position: relative; margin-top: 3px; }
.event-calendar .event-info { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 700; letter-spacing: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.event-calendar .event-info .event-category { margin-bottom: 2px; padding: 1px 0.75em; font-size: 0.6875em; font-weight: 500; line-height: 1.3636363636; border-radius: 40px; }
@media screen and (max-width:1200px) {
.event-calendar { margin-top: 0; }
.event-calendar .category-list { position: static; margin-bottom: 2rem; font-size: 0.875rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.event-calendar .category-list li { margin-left: 1.7142857143em; }
.event-calendar .day-event { font-size: 0.9em; word-break: break-all; }
.event-calendar .event-info .event-category { margin-bottom: 0; line-height: 1; }
}
.month-event-list { display: none; margin-top: 1.5625rem; list-style: none; }
.month-event-list li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 0.625rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.month-event-list .date { width: 6.4444444444em; margin-right: 1.1111111111em; padding: 0.8888888889em 0 1em; font-size: 0.5625rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0; -ms-flex-item-align: start; align-self: flex-start; border-radius: 1em; background: var(--color-point); text-align: center; float: left; }
.month-event-list .date-num { display: block; font-size: 2.7777777778em; font-weight: 900; color: #fff; letter-spacing: 0; }
.month-event-list .desc { font-size: 1.25rem; font-weight: 700; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.month-event-list .event-category { display: block; font-size: 0.65em; font-weight: 500; background: none; }
.month-event-list .event-category.cate1 { color: var(--color-point); }
.month-event-list .event-category.cate2 { color: #FB5F10; }
.month-event-list .event-category.cate3 { color: #C01EED; }
.month-event-list .event-category.cate4 { color: #36AF92; }
@media screen and (max-width:1200px) {
.month-event-list { display: block; }
}
/* 커뮤니티  */
.community1 .banner-content { background-color: var(--color-point); }
.community1 .banner-content .btn { color: var(--color-point); }
.community1 .banner-content .btn:hover { background-color: #FF81A4; }
.community2 .banner-content { background-color: #4C4441; }
.community2 .banner-content .btn { color: #4C4441; }
.community2 .banner-content .btn:hover { background-color: #908A84; }
.community-intro { font-size: 1.5625rem; font-weight: 700; line-height: 1.6; }
.community-intro em { font-style: normal; }
@media screen and (max-width:1200px) {
.community-intro { font-size: 1.25rem; }
}
.community-howto { line-height: 1.5625; }
@media screen and (max-width:1200px) {
.community-howto { font-size: 0.8125rem; }
}
.howto-steps { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2.5em; list-style: none; }
.howto-steps li { position: relative; margin-right: 2.5em; padding: 0.75em 1.25em 0.75em 3.5625em; font-weight: 700; color: #fff; line-height: 1.6875; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-radius: 40px; background: #908A84; }
.howto-steps li:after { content: ""; display: block; position: absolute; top: 0; left: 100%; bottom: 0; width: 2.5em; height: 2.5em; margin: auto; background: url("../img/sub/ic_steps_angle_rt.svg") no-repeat 50% 50%; background-size: 22.5% auto; }
.howto-steps li:last-child { margin-right: 0; }
.howto-steps li:last-child:after { content: none; }
.howto-steps .no { display: block; position: absolute; top: 0.75em; left: 1.25em; width: 1.6875em; height: 1.6875em; color: #908A84; border-radius: 50%; background: #fff; text-align: center; }
@media screen and (max-width:1200px) {
.howto-steps { margin-bottom: 1.1538461538em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.howto-steps li { margin-right: 0; margin-bottom: 1.7692307692em; padding: 0.8461538462em 1.0769230769em 0.8461538462em 2.5384615385em; line-height: 1.0769230769; }
.howto-steps li:after { top: 100%; left: 0; right: 0; bottom: auto; width: 1.7692307692em; height: 1.7692307692em; background-image: url("../img/sub/ic_steps_angle_dw.svg"); background-size: 52.1739130435% auto; }
.howto-steps li:last-child { margin-bottom: 0; }
.howto-steps li:last-child:after { content: none; }
.howto-steps .no { top: 1.375em; left: 1.75em; width: 1.75em; height: 1.75em; font-size: 0.6153846154em; line-height: 1.75; }
}
/* 약관 */
.terms-wrap { font-size: 1rem; color: #666; letter-spacing: -0.02em; line-height: 1.5; }
.terms-wrap p { margin: 1.25em 0; }
.terms-wrap strong { color: #000; }
.terms-wrap a:link { color: #3933DC; text-decoration: underline; }
.terms-wrap .headline1 { margin: 2.6666666667em 0 0.6666666667em; font-size: 1.875em; letter-spacing: -0.05em; line-height: 1; }
.terms-wrap .headline1:first-child { margin-top: 0; }
.terms-wrap .headline1:last-child { margin-bottom: 0; }
.terms-wrap .headline2 { margin: 1em 0; font-size: 1.25em; letter-spacing: -0.05em; line-height: 1; }
.terms-wrap .headline1 + .headline2 { margin-top: 2em; }
.terms-wrap ol,
.terms-wrap ul { padding-left: 1.125em; list-style: none; }
.terms-wrap .first { margin: 0 0.75em 0 -1.125em; }
.terms-wrap .table-list { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 56.25em; margin-left: -5.25em; padding: 0; }
.terms-wrap .table-list > li { padding: 0 5.25em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-right: 1px solid #E8E8E8; }
.terms-wrap .table-list > li:last-child { border-right: 0; }
.terms-wrap .table-list strong { display: block; margin-bottom: 0.8em; font-size: 1.25em; line-height: 1; }
@media screen and (max-width:1200px) {
.terms-wrap { font-size: 0.8125rem; }
.terms-wrap .table-list { max-width: none; margin: -1.0769230769em 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.terms-wrap .table-list > li { padding: 1.0769230769em 0; border-right: 0; border-bottom: 1px solid #E8E8E8; }
.terms-wrap .table-list > li:last-child { border-bottom: 0; }
.terms-wrap .table-list strong { margin-bottom: 0.6153846154em; font-size: 1em; }
}
.line-list { margin-top: 1.25em; color: #666; line-height: 1.25; list-style: none; }
.line-list > li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid; }
.line-list .title { min-width: 15em; margin-right: 1em; font-size: 1.25em; font-weight: 700; color: #000; }
@media screen and (max-width:1200px) {
.line-list { font-size: 0.8125em; }
.line-list > li { margin-top: 1.9230769231em; padding-top: 0.9230769231em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.line-list .title { min-width: 0; margin: 0 0 0.4615384615em; font-size: 1.2307692308em; }
}
.license2 .section-summary { margin-top: 1.25em; }
.license2 .table { margin-top: 1.25em; }
@media screen and (max-width:1200px) {
.license2 .table { table-layout: auto; }
.license2 .table colgroup { display: none; }
.license2 .table td { width: 27%; }
.license2 .table td:nth-child(2) { width: 45%; }
}
.index-wrap { margin-bottom: 4em; font-size: 1.25em; line-height: 1; }
@media screen and (max-width:1200px) {
.index-wrap { margin-bottom: 3.5384615385em; font-size: 1em; }
}
.index-box { margin: 1em 0; padding: 3em 2.6em; border-radius: 1.5em; background: #F6F6F6; }
.index-box .headline { margin-bottom: 0.9333333333em; font-size: 1.5em; }
.index-box ol { list-style: none; line-height: 1.5; }
.index-box a:hover { text-decoration: underline; }
@media screen and (max-width:1200px) {
.index-box { padding: 2.4615384615em 1.5384615385em; font-size: 0.8125em; border-radius: 1.1538461538em; }
.index-box .headline { margin-bottom: 9px; font-size: 1.9230769231em; }
}
/* 통합검색 */
.page-header .site-search-form { width: 32.625em; height: 4em; margin: 2em auto 0; }
.page-header .keyword { padding-left: 1.7307692308em; padding-right: 2.5em; font-size: 1.625rem; border-width: 2px; }
.page-header .keyword:focus { width: inherit; -webkit-box-shadow: inset 0 0 0 1px var(--color-point), 0 0 0 2px rgba(215, 6, 64, 0.5), 0 0 0 6px rgba(215, 6, 64, 0.3); box-shadow: inset 0 0 0 1px var(--color-point), 0 0 0 2px rgba(215, 6, 64, 0.5), 0 0 0 6px rgba(215, 6, 64, 0.3); }
.page-header .btn-search { width: 4.0625em; }
.page-header .btn-img { width: 49.2307692308%; }
@media screen and (max-width:1200px) {
.page-header .site-search-form { display: block; width: 19.6875em; height: 2.5em; margin-top: 1.25em; }
.page-header .keyword { font-size: 1rem; }
.page-header .btn-search { width: 2.4375em; }
}
.search-summary { margin-top: -1.4em; font-size: 1.25em; font-weight: 700; }
.search-summary em { font-style: normal; color: var(--color-point); }
@media screen and (max-width:1200px) {
.search-summary { margin-top: -3.8666666667em; font-size: 0.9375em; }
}
.search-section-title { margin-bottom: 0.25em; font-size: 2.5rem; text-align: center; }
@media screen and (max-width:1200px) {
.search-section-title { font-size: 1.25rem; }
}
.result-total { margin-bottom: 0.625em; font-weight: 700; }
.result-total .num { font-style: normal; }
@media screen and (max-width:1200px) {
.result-total { font-size: 0.8125em; }
}
.relate-menu { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.relate-menu > li { position: relative; min-width: 0; padding-right: 1.5625em; white-space: nowrap; }
.relate-menu > li:after { content: ""; display: block; position: absolute; top: 0; right: 0.5625em; bottom: 0; width: 0.4375em; height: 0.8125em; margin: auto; background: url("../img/sub/ic_angle_rt.svg") no-repeat 0 0; background-size: contain; }
.relate-menu > li:last-child { padding-right: 0; font-weight: 700; color: var(--color-point); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.relate-menu > li:last-child:after { content: none; }
.relate-menu a:hover { text-decoration: underline; }
.relate-menu .btn-home { width: 1.25em; height: 1.3125em; background-size: 100% auto; }
.relate-menu .btn-home:hover { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
@media screen and (max-width:1200px) {
.relate-menu > li:not(:last-child) { padding-right: 1em; }
.relate-menu > li:not(:last-child):after { right: 0.3571428571em; width: 0.2857142857em; height: 0.5em; }
.relate-menu .btn-home { width: 0.7142857143em; height: 0.7857142857em; }
}
.result-list { list-style: none; font-weight: 500; }
.result-list > li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.5em 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid; }
.result-list .list-title { width: 22.1428571429%; margin-right: 0.75em; font-size: inherit; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-list a:hover { text-decoration: underline; }
@media screen and (max-width:1200px) {
.result-list { font-size: 0.875em; }
.result-list > li { display: block; padding: 0.9285714286em 0 1.7142857143em; }
.result-list .list-title { width: 100%; margin: 0 0 5px; }
}
/* #Print */
@media print {
body { font-size: 16px !important; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.container { max-width: none; padding: 0; }
.top-banner,
.header,
.footer,
.page-header,
.page-nav,
.quick-menu-wrap,
.page-tab,
.tab-list { display: none !important; }
img { max-width: 100% !important; page-break-inside: avoid; }
}