/* root */ :root{ --container-padding: 15px; --container-padding-minus: -15px; --font-title-h1: 56px; --font-title-h2: 45px; --font-title-h3: 36px; --font-title-h4: 29px; --font-title-h5: 23px; --font-title-h6: 18px; --font-xs: 12px; --font-sm: 14px; --font-md: 16px; --font-lg: 18px; --font-xl: 20px; --font-xxl: 22px; --font-xxxl: 24px; --list-1: 1; --list-2: 2; --list-3: 3; --list-4: 4; --list-5: 5; --list-6: 6; --list-7: 7; --width-5: 5px; --width-10: 10px; --width-15: 15px; --width-16: 16px; --width-20: 20px; --width-25: 25px; --width-30: 30px; --width-35: 35px; --width-40: 40px; --width-45: 45px; --width-50: 50px; --width-60: 60px; --height-5: 5px; --height-10: 10px; --height-15: 15px; --height-16: 16px; --height-20: 20px; --height-25: 25px; --height-30: 30px; --height-35: 35px; --height-40: 40px; --height-45: 45px; --height-50: 50px; --height-60: 60px; --radius-5: 5px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-15: 15px; --radius-20: 20px; --radius-25: 25px; --gap-3: 3px; --gap-5: 5px; --gap-10: 10px; --gap-15: 15px; --gap-20: 20px; --gap-25: 25px; --gap-30: 30px; --gap-count-0: 0; --gap-count-1: 1; --gap-count-2: 2; --gap-count-3: 3; --gap-count-4: 4; --gap-count-5: 5; --gap-count-6: 6; --padding-5: 5px; --padding-10: 10px; --padding-15: 15px; --padding-20: 20px; --padding-25: 25px; --padding-30: 30px; --padding-35: 35px; --padding-40: 40px; --padding-50: 50px; --padding-100: 100px; --margin-5: 5px; --margin-10: 10px; --margin-15: 15px; --margin-20: 20px; --margin-25: 25px; --margin-30: 30px; --margin-35: 35px; --margin-40: 35px; --margin-50: 50px; --margin-100: 100px; --icon-12: 12px; --icon-16: 16px; --icon-20: 20px; --icon-24: 24px; --icon-28: 28px; --icon-32: 32px; --icon-36: 36px; --icon-40: 40px; } @media (max-width:767px){ :root{ --font-xs: 11px; --font-sm: 12px; --font-md: 14px; --font-lg: 16px; --font-xl: 18px; --font-xxl: 20px; --font-xxxl: 22px; } } /* common */ .focus {border-color:var(--color-blue) !important;} .success {border-color:var(--color-active) !important; color:var(--color-active) !important;} .success > * {border-color:var(--color-active) !important;} .disabled {background:var(--color-disabled) !important; color:var(--color-gray-700) !important; border-color:var(--color-gray-400) !important;} .disabled > * {color:var(--color-gray-700) !important; border-color:var(--color-gray-400) !important;} .readonly {background:var(--color-disabled) !important; color:var(--color-gray-700) !important; border-color:var(--color-gray-400) !important;} .readonly > * {color:var(--color-gray-700) !important; border-color:var(--color-gray-400) !important;} .error {border-color:var(--color-danger-200) !important; color:var(--color-danger-200) !important;} .error > * {color:var(--color-danger-200) !important;} /* container */ .container {max-width: calc(1400px + (var(--container-padding) * 2)); margin:0 auto; padding:0 var(--container-padding); width:100%;} .container-xxl {max-width: calc(1400px + (var(--container-padding) * 2));} .container-xl {max-width: calc(1200px + (var(--container-padding) * 2));} .container-lg {max-width: calc(991px + (var(--container-padding) * 2));} .container-md {max-width: calc(767px + (var(--container-padding) * 2));} .container-sm {max-width: calc(575px + (var(--container-padding) * 2));} .container-xs {max-width: calc(400px + (var(--container-padding) * 2));} /* animation */ /* 살짝 튀는 애니메이션 */ @keyframes pop { 0% {transform:scale(1);} 30% {transform:scale(1.3);} 60% {transform:scale(0.9);} 100% {transform:scale(1);} } /* 반짝이는 효과 */ @keyframes sparkle { 0% {text-shadow:0 0 0 rgba(224,36,94,0);} 50% {text-shadow:0 0 8px rgba(224,36,94,0.6);} 100% {text-shadow:0 0 0 rgba(224,36,94,0);} } /* skipnavi-box */ .skipnavi-box {position:fixed; left:0; top:0; width:100%; z-index:99999;} .skipnavi-box dl dt {display:none;} .skipnavi-box dl dd a {position:absolute; left:0; top:-35px; width:100%; transition:all ease 0.5s; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:35px; background:var(--color-active); color:var(--color-white); font-size:16px; font-weight:600;} .skipnavi-box dl dd a:focus {top:0;} /* error-box */ .error-box {height:100vh; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:var(--padding-50) var(--padding-15); background:var(--color-gray-200);} .error-box h2 {text-align:center;} .error-box h2 .error-code {font-size:80px; font-weight:700; color:var(--color-active); word-break:keep-all;} .error-box h2 .error-message {font-size:30px; word-break:keep-all;} .error-box p.error-text {font-size:18px; text-align:center; word-break:keep-all; color:var(--color-gray-700); margin:var(--margin-15) 0 0;} @media (max-width:991px){ .error-box h2 .error-code {font-size:65px;} .error-box h2 .error-message {font-size:22px;} .error-box p.error-text {font-size:16px; margin:var(--margin-10) 0 0;} } /* loader-box */ .loader-box {transition:all ease 0.5s; opacity:0; pointer-events:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; transition:all ease 0.5s; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .loader-box .loader1 {width:50px; height:50px; --c:radial-gradient(farthest-side,var(--color-active) 90%,#0000); animation:loader1 .5s infinite; background:var(--c) 0 0, var(--c) 100% 0, var(--c) 100% 100%, var(--c) 0 100%; background-size:20px 20px; background-repeat:no-repeat;} .loader-box.active {opacity:1; pointer-events:inherit;} @keyframes loader1 { 100% {background-position:100% 0,100% 100%,0 100%,0 0;} } /* button-box */ .button-box {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-5);} .button-box .btn {gap:var(--gap-5); position:relative; font-size:var(--font-md); height:var(--height-45); padding:0 var(--padding-15); display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; border-radius:var(--radius-8); transition:all ease 0.5s; color:var(--color-white);} .button-box .btn input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .button-box .btn-round {border-radius:50px;} .button-box .btn-full {flex:1; min-width:0; width:100%;} .button-box .btn-xxxl {height:var(--height-60); font-size:var(--font-xxxl); padding:0 var(--padding-35); border-radius:var(--radius-12);} .button-box .btn-xxl {height:var(--height-50); font-size:var(--font-xxl); padding:0 var(--padding-30); border-radius:var(--radius-10);} .button-box .btn-xl {height:var(--height-45); font-size:var(--font-xl); padding:0 var(--padding-25);} .button-box .btn-lg {height:var(--height-40); font-size:var(--font-lg); padding:0 var(--padding-20);} .button-box .btn-md {height:var(--height-35); font-size:var(--font-md); padding:0 var(--padding-15);} .button-box .btn-sm {height:var(--height-30); font-size:var(--font-sm); padding:0 var(--padding-10);} .button-box .btn-xs {height:var(--height-25); font-size:var(--font-xs); padding:0 var(--padding-10); border-radius:var(--radius-5);} .button-box .btn:hover {opacity:0.5;} .button-box .btn:hover .filter-hover {filter:var(--filter-white) !important;} .button-box .btn-facebook {background:#1877F2; color:var(--color-white);} .button-box .btn-twitter {background:#1DA1F2; color:var(--color-white);} .button-box .btn-twitter-x {background:var(--color-black); color:var(--color-white);} .button-box .btn-kakao {background:#FEE500; color:var(--colo-gray-800);} .button-box .btn-instagram {background:#E4405F; color:var(--color-white);} .button-box .btn-youtube {background:#FF0000; color:var(--color-white);} .button-box .btn-naver {background:#03C75A; color:var(--color-white);} .button-box .btn-blog {background:#03C75A; color:var(--color-white);} .button-box .btn-band {background:#6DCA28; color:var(--color-white);} .button-box .btn-line {background:#06C755; color:var(--color-white);} .button-box .btn-pinterest {background:#BD081C; color:var(--color-white);} .button-box .btn-in {background:#0A66C2; color:var(--color-white);} .button-box .btn-tiktok {background:#000000; color:var(--color-white);} .button-box .btn-gmail {background:#ffffff; color:var(--color-black); border:1px solid var(--color-gray-400);} .button-box .btn.single {font-size:0;} .button-box .btn.single .icon {margin:0;} @media (max-width:991px){ .button-box { gap:var(--gap-5);} .button-box .btn-xxxl {height:var(--height-50); font-size:var(--font-xl); padding:0 var(--padding-30); border-radius:var(--radius-10);} } /* badge-box */ .badge-box {gap:2px; display:flex; flex-wrap:wrap; align-items:center;} .badge-box .badge {font-size:0.75em; padding:0.3em 0.45em; border-radius:0.375rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; white-space:nowrap;} /* icon-box */ .icon {display:inline-block; font-size:0; width:var(--icon-20); height:var(--icon-20); background-size:cover; background-position:center;} .icon-xxxl {width:var(--icon-36); height:var(--icon-36);} .icon-xxl {width:var(--icon-32); height:var(--icon-32);} .icon-xl {width:var(--icon-28); height:var(--icon-28);} .icon-lg {width:var(--icon-24); height:var(--icon-24);} .icon-md {width:var(--icon-20); height:var(--icon-20);} .icon-sm {width:var(--icon-16); height:var(--icon-16);} .icon-xs {width:var(--icon-12); height:var(--icon-12);} .icon-back {margin:0 0 0 var(--margin-5);} .icon-only {margin:0;} .icon-white {filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);} .icon-search {background-image:url('../images/icon_search.svg');} .icon-share {background-image:url('../images/icon_share.svg');} .icon-pin {background-image:url('../images/icon_pin.svg');} .icon-clip {background-image:url('../images/icon_clip.svg');} .icon-link {background-image:url('../images/icon_link.svg');} .icon-lock {background-image:url('../images/icon_lock.svg');} .icon-unlock {background-image:url('../images/icon_unlock.svg');} .icon-filter {background-image:url('../images/icon_filter.svg');} .icon-message {background-image:url('../images/icon_message.svg');} .icon-message-alert {background-image:url('../images/icon_message_alert.svg');} .icon-marker {background-image:url('../images/icon_marker.svg');} .icon-bell {background-image:url('../images/icon_bell.svg');} .icon-bell-off {background-image:url('../images/icon_bell_off.svg');} .icon-setting {background-image:url('../images/icon_setting.svg');} .icon-menu {background-image:url('../images/icon_menu.svg');} .icon-user {background-image:url('../images/icon_user.svg');} .icon-file-plus {background-image:url('../images/icon_file_plus.svg');} .icon-camera {background-image:url('../images/icon_camera.svg');} .icon-album {background-image:url('../images/icon_album.svg');} .icon-smile {background-image:url('../images/icon_smile.svg');} .icon-play {background-image:url('../images/icon_play.svg');} .icon-pause {background-image:url('../images/icon_pause.svg');} .icon-like {background-image:url('../images/icon_heart.svg'); filter:var(--filter-gray-700); transition:all ease 0.5s;} .icon-like.active {background-image:url('../images/icon_heart_on.svg'); filter:var(--filter-active-100); animation:pop 0.4s ease, sparkle 0.6s ease;} .icon-new {font-size:var(--font-xs) !important; font-weight:500; color:var(--color-white); background:var(--color-active); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; line-height:1; border-radius:var(--radius-5);} .icon-sort {width:var(--icon-16); height:var(--icon-16); background-image:url('../images/icon_sort.svg'); position:relative; top:4px; margin:0 0 0 var(--margin-5);} .icon-sort.is-asc {background-image:url('../images/icon_arrow_up.svg');} .icon-sort.is-desc {background-image:url('../images/icon_arrow_down.svg');} .icon-social-facebook {background-image:url('../images/icon_social_facebook.svg');} .icon-social-twitter {background-image:url('../images/icon_social_twitter.svg');} .icon-social-twitter-x {background-image:url('../images/icon_social_twitter_x.svg');} .icon-social-kakao {background-image:url('../images/icon_social_kakao.svg');} .icon-social-instagram {background-image:url('../images/icon_social_instagram.svg');} .icon-social-youtube {background-image:url('../images/icon_social_youtube.svg');} .icon-social-naver {background-image:url('../images/icon_social_naver.svg');} .icon-social-blog {background-image:url('../images/icon_social_blog.svg');} .icon-social-band {background-image:url('../images/icon_social_band.svg');} .icon-social-pinterest {background-image:url('../images/icon_social_pinterest.svg');} .icon-social-in {background-image:url('../images/icon_social_in.svg');} .icon-social-line {background-image:url('../images/icon_social_line.svg');} .icon-social-tiktok {background-image:url('../images/icon_social_tiktok.svg');} .icon-social-gmail {background-image:url('../images/icon_social_gmail.svg');} label.icon {position:relative; cursor:pointer;} label.icon input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} @media (max-width:991px){ .icon {width:var(--icon-16); height:var(--icon-16);} .icon-sort {margin:0 0 0 calc(var(--margin-5) / 2); top:3px;} .icon-xxxl {width:var(--icon-32); height:var(--icon-32);} .icon-xxl {width:var(--icon-28); height:var(--icon-28);} .icon-xl {width:var(--icon-24); height:var(--icon-24);} .icon-lg {width:var(--icon-20); height:var(--icon-20);} .icon-md {width:var(--icon-16); height:var(--icon-16);} } /* input-box */ .input-box {gap:var(--gap-10); padding:0 var(--padding-10); display:flex; flex-wrap:wrap; align-items:center; border:1px solid var(--color-gray-400); border-radius:var(--radius-8); background:var(--color-white); position:relative;} .input-box input {flex:1; min-width:0; height:var(--height-45); background:none; font-size:var(--font-md); border-radius:var(--radius-8);} .input-box input::placeholder {color:var(--color-gray-700);} .input-box input[type=date], .input-box input[type=datetime-local], .input-box input[type=month], .input-box input[type=time] {min-width:150px;} .input-box input[type=date]::-webkit-calendar-picker-indicator, .input-box input[type=datetime-local]::-webkit-calendar-picker-indicator, .input-box input[type=month]::-webkit-calendar-picker-indicator, .input-box input[type=time]::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;} .input-box input[type=date]:before, .input-box input[type=datetime-local]:before, .input-box input[type=month]:before {position:absolute; border-radius:var(--radius-8); left:0; top:0; content:attr(data-placeholder); background:var(--color-white); width:100%; height:100%; padding:0 var(--padding-10); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-gray-700); display:flex; flex-wrap:wrap; align-items:center; box-sizing:border-box;} .input-box input[type=date]:after, .input-box input[type=datetime-local]:after, .input-box input[type=month]:after, .input-box input[type=time]:after {position:absolute; right:10px; top:50%; transform:translateY(-50%); content:""; width:var(--icon-24); height:var(--icon-24); background:url('../images/icon_calendar.svg') no-repeat center / cover; filter:invert(47%) sepia(0%) saturate(1821%) hue-rotate(201deg) brightness(85%) contrast(95%);} .input-box input[type=date]:focus:before, .input-box input[type=datetime-local]:focus:before, .input-box input[type=month]:focus:before, .input-box input[type=time]:focus:before {opacity:0;} .input-box.input-color {padding:0; border:0; border-radius:50%;} .input-box.has-value input[type=date]:before, .input-box.has-value input[type=datetime-local]:before, .input-box.has-value input[type=month]:before, .input-box.has-value input[type=time]:before {display:none;} @media (max-width:991px){ .input-box input[type=date]:after, .input-box input[type=datetime-local]:after, .input-box input[type=month]:after, .input-box input[type=time]:after {width:var(--icon-20); height:var(--icon-20);} .input-box input[type=date]::-webkit-date-and-time-value, .input-box input[type=datetime-local]::-webkit-date-and-time-value, .input-box input[type=month]::-webkit-date-and-time-value, .input-box input[type=time]::-webkit-date-and-time-value {text-align:left !important;} } /* input-inner-box */ .input-inner-box {pointer-events:none; opacity:0; position:absolute; top:95%; width:100%; padding:var(--padding-15) !important; transition:all ease 0.5s; background:var(--color-white); border:1px solid var(--color-gray-400) !important; border-radius:var(--radius-10); box-shadow:0 0 10px rgba(0,0,0,0.05);} .input-inner-box .keyword-list {max-height:200px; overflow-y:auto;} .input-inner-box .keyword-list > ul > li {margin:0 0 var(--margin-5);} .input-inner-box .keyword-list > ul > li:last-of-type {margin:0;} .input-inner-box .keyword-list > ul > li .more {font-size:var(--font-md); color:var(--color-black-500); display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .input-inner-box .keyword-list > ul > li .more b {font-size:var(--font-md); font-weight:600; color:var(--color-active);} .input-inner-box .keyword-list > ul > li .more:hover {text-decoration:underline;} .input-box.press {z-index:50;} .input-box.press .input-inner-box {pointer-events:inherit; opacity:1; top:115%;} @media (max-width:991px){ .input-inner-box .keyword-list {max-height:150px;} } /* quantity-box */ .quantity-box {border:1px solid var(--color-gray-400); border-radius:var(--radius-8); display:flex; flex-wrap:wrap; align-items:center; background:var(--color-white);} .quantity-box .quantity-btn {width:var(--width-45); height:var(--height-45); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:0;} .quantity-box .quantity-btn:after {display:block; content:""; width:var(--icon-20); height:var(--icon-20); background-size:cover; background-position:center;} .quantity-box .quantity-btn.minus {border-radius:var(--radius-8) 0 0 var(--radius-8);} .quantity-box .quantity-btn.minus:after {background-image:url('../images/icon_minus.svg');} .quantity-box .quantity-btn.plus {border-radius:0 var(--radius-8) var(--radius-8) 0;} .quantity-box .quantity-btn.plus:after {background-image:url('../images/icon_plus.svg');} .quantity-box .quantity-btn.disabled {background-color:var(--color-disabled) !important;} .quantity-box .input-box {flex:1; min-width:0; border-radius:0; margin:-1px 0;} .quantity-box .input-box input {text-align:center;} @media (max-width:991px){ .quantity-box .quantity-btn.minus {background-size:16px !important;} .quantity-box .quantity-btn.plus {background-size:16px !important;} } /* textarea-box */ .textarea-box {border-radius:var(--radius-8); border:1px solid var(--color-gray-400); border-radius:var(--radius-8); background:var(--color-white);} .textarea-box textarea {width:100%; height:150px; display:block; padding:var(--padding-10); background:transparent; font-size:var(--font-md); border-radius:var(--radius-8);} .textarea-box textarea::placeholder {color:var(--color-gray-700);} .textarea-box textarea:disabled {background:var(--color-disabled);} .textarea-box.textarea-xs textarea {height:50px;} .textarea-box.textarea-sm textarea {height:100px;} .textarea-box.textarea-md textarea {height:150px;} .textarea-box.textarea-lg textarea {height:250px;} .textarea-box.textarea-xl textarea {height:400px;} .textarea-box.textarea-xs.textarea-auto-height textarea {max-height:150px;} .textarea-box.textarea-sm.textarea-auto-height textarea {max-height:250px;} .textarea-box.textarea-md.textarea-auto-height textarea {max-height:150px;} .textarea-box.textarea-lg.textarea-auto-height textarea {max-height:250px;} .textarea-box.textarea-xl.textarea-auto-height textarea {max-height:400px;} @media (max-width:991px){ .textarea-box.textarea-xs textarea {height:45px;} .textarea-box.textarea-sm textarea {height:80px;} .textarea-box.textarea-md textarea {height:120px;} .textarea-box.textarea-lg textarea {height:200px;} .textarea-box.textarea-xl textarea {height:300px;} .textarea-box.textarea-sm.textarea-auto-height textarea {max-height:80px;} .textarea-box.textarea-md.textarea-auto-height textarea {max-height:120px;} .textarea-box.textarea-lg.textarea-auto-height textarea {max-height:200px;} .textarea-box.textarea-xl.textarea-auto-height textarea {max-height:300px;} } /* select-box */ .select-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid var(--color-gray-400); border-radius:var(--radius-8); background:var(--color-white); position:relative;} .select-box select {flex:1; min-width:0; height:var(--height-45); padding:0 40px 0 var(--padding-10) !important; font-size:var(--font-md); border-radius:var(--radius-8); background:url('../images/icon_select.svg') no-repeat calc(100% - var(--padding-10)) center / var(--icon-20); color:var(--color-gray-700);} .select-box select option {color:var(--color-black-500);} .select-box select option:disabled {background:var(--color-disabled); color:var(--color-gray-700);} .select-box select optgroup {color:var(--color-black-500);} .select-box select ~ * {padding:0 var(--padding-5) 0 0;} .select-box > *:first-child {margin:0 0 0 var(--padding-10);} .select-box > *:last-child {padding:0 var(--padding-10) 0 0;} .select-box.has-value select {color:var(--color-black);} /* check-box */ .check-box {position:relative;} .check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .check-box label {display:flex; flex-wrap:wrap; border-radius:var(--radius-8); font-size:var(--font-md);} .check-box label:before {display:block; content:""; width:var(--icon-20); height:var(--icon-20); margin:0 var(--margin-5) 0 0; position:relative; top:1px; background:url('../images/icon_check.svg') no-repeat center / cover;} .check-box label span {flex:1; min-width:0; color:var(--color-gray-700); font-size:var(--font-md);} .check-box input:focus-visible ~ label {outline:2px solid var(--color-black);} .check-box input:disabled ~ label:before {background-image:url('../images/icon_check_disabled.svg');} .check-box input:disabled ~ label span {color:var(--color-gray-700);} .check-box input:checked ~ label:before {background-color:var(--color-active); background-image:url('../images/icon_check_on.svg'); border-radius:var(--radius-5);} .check-box input:checked ~ label span {color:var(--color-black);} .check-box input:disabled:checked ~ label:before {background-image:url('../images/icon_check_on_disabled.svg');} .check-box input:disabled:checked ~ label span {color:var(--color-gray-700);} .check-box.single label {justify-content:center;} .check-box.single label:before {margin:0;} .check-box.single label span {display:none;} .check-group-box {display:flex; flex-wrap:wrap; gap:var(--gap-10) var(--gap-15);} @media (max-width:991px){ .check-group-box {gap:var(--gap-10);} } /* radio-box */ .radio-box {position:relative;} .radio-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .radio-box label {display:flex; flex-wrap:wrap; border-radius:var(--radius-8); font-size:var(--font-md);} .radio-box label:before {display:block; content:""; width:var(--icon-20); height:var(--icon-20); margin:0 var(--margin-5) 0 0; border-radius:50%; position:relative; top:2px; background:url('../images/icon_radio.svg') no-repeat center / cover;} .radio-box label span {flex:1; min-width:0; color:var(--color-gray-700); font-size:var(--font-md);} .radio-box input:focus-visible ~ label {outline:2px solid var(--color-black);} .radio-box input:disabled ~ label:before {background-image:url('../images/icon_radio_disabled.svg');} .radio-box input:disabled ~ label span {color:var(--color-gray-700);} .radio-box input:checked ~ label:before {background-color:var(--color-active); background-image:url('../images/icon_radio_on.svg');} .radio-box input:checked ~ label span {color:var(--color-black);} .radio-box input:disabled:checked ~ label:before {background-image:url('../images/icon_radio_on_disabled.svg');} .radio-box input:disabled:checked ~ label span {color:var(--color-gray-700);} .radio-box.single label:before {margin:0;} .radio-box.single label span {display:none;} .radio-group-box {display:flex; flex-wrap:wrap; gap:var(--gap-10) var(--gap-15);} @media (max-width:991px){ .radio-group-box {gap:var(--gap-10);} .radio-box label:before {top:1px;} } /* switch-box */ .switch-box {position:relative;} .switch-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .switch-box label {display:block; width:var(--width-50); height:var(--height-25); border-radius:50px; background:var(--color-gray-300); padding:3px; font-size:0; transition:0.3s; cursor:pointer;} .switch-box label span {position:absolute; left:3px; top:3px; width:18.5px; height:18.5px; border-radius:50%; background:var(--color-active); font-size:0; transition:0.3s; cursor:pointer;} .switch-box input:focus-visible ~ label {outline:2px solid var(--color-black);} .switch-box input:checked ~ label {background:var(--color-active);} .switch-box input:checked ~ label span {left:29px; background:var(--color-white);} .switch-box input:disabled ~ label {background:var(--color-gray-400);} .switch-box input:disabled ~ label span {background:var(--color-gray-600);} /* star-box */ .star-box {display:flex; flex-wrap:wrap; align-items:center;} .star-box .star {position:relative;} .star-box .star input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .star-box .star label {position:relative; display:block; font-size:0; width:var(--icon-24); height:var(--icon-24); cursor:pointer;} .star-box .star label:after {position:absolute; content:""; width:var(--icon-24); height:var(--icon-24); background:url('../images/icon_star.svg') no-repeat center / cover; filter:var(--filter-gray-500);} .star-box .star input:focus-visible ~ label {outline:2px solid var(--color-black); z-index:2;} .star-box .star.active label:after {filter:var(--filter-active-100);} /* control-group-box */ .control-group-box {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-10);} .control-group-box .control-box {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-10); width:100%;} .control-group-box .control-box .control-button {display:flex; flex-wrap:wrap; align-items:center;} .control-group-box .control-box .control-button .control-btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:0; width:var(--width-30); height:var(--height-30); background:var(--color-white); border:1px solid var(--color-gray-400); border-radius:50%; margin:0 0 0 var(--margin-5);} .control-group-box .control-box .control-button .control-btn:after {display:block; content:""; font-size:0; width:var(--icon-20); height:var(--icon-20); background-repeat:no-repeat; background-position:center; background-size:cover;} .control-group-box .control-box .control-button .control-btn:first-of-type {margin:0;} .control-group-box .control-box .control-button .control-btn.control-add:after {background-image:url('../images/icon_plus.svg');} .control-group-box .control-box .control-button .control-btn.control-remove:after {background-image:url('../images/icon_minus.svg');} /* file-box */ .file-box {display:flex; flex-wrap:wrap; align-items:center;} .file-box .file-name {display:flex; flex-wrap:wrap; align-items:center; flex:1; min-width:0; padding:0 var(--padding-10); border-radius:var(--radius-8); border:1px solid var(--color-gray-400); background:var(--color-white);} .file-box .file-name p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 0 0 var(--padding-5); height:var(--height-45); line-height:var(--height-45); color:var(--color-gray-700); font-size:var(--font-md);} .file-box .file-select {position:relative; margin:0 0 0 var(--margin-10);} .file-box .file-select label {border-radius:var(--radius-8); cursor:pointer;} .file-box .file-select input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .file-box .file-select input:focus-visible ~ label .button-box .btn {outline:2px solid var(--color-black);} .file-box .file-button {margin:0 0 0 var(--margin-10); display:flex; flex-wrap:wrap; align-items:center;} .file-box .file-button .file-btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:0; width:var(--width-30); height:var(--height-30); background:var(--color-white); border:1px solid var(--color-gray-400); border-radius:50%; margin:0 0 0 var(--margin-5);} .file-box .file-button .file-btn:after {display:block; content:""; font-size:0; width:var(--icon-20); height:var(--icon-20); background-repeat:no-repeat; background-position:center; background-size:cover;} .file-box .file-button .file-btn:first-of-type {margin:0;} .file-box .file-button .file-btn.file-add:after {background-image:url('../images/icon_plus.svg');} .file-box .file-button .file-btn.file-remove:after {background-image:url('../images/icon_minus.svg');} .file-box .file-name.success p {color:var(--color-black);} .file-group-box .file-box {margin:0 0 var(--margin-10);} .file-group-box .file-box:first-of-type .file-btn.file-remove {display:none;} .file-group-box .file-box:last-of-type {margin:0;} @media (max-width:991px){ .file-box {position:relative;} .file-box .file-select {position:absolute; opacity:0; left:0; top:0; width:100%; height:100%;} .file-box .file-button {margin:0 0 0 var(--margin-5); position:relative; z-index:5;} .file-box .file-button .file-btn {width:var(--width-30); height:var(--width-30);} .file-box .file-button .file-btn:after {width:var(--icon-16); height:var(--icon-16);} } /* file-image-box */ .file-image-box {display:flex; flex-wrap:wrap; align-items:flex-start;} .file-image-box label {display:block; left:0; top:0; position:relative; overflow:hidden; font-size:0; width:100%; height:100%; border-radius:var(--radius-8); background:var(--color-white); cursor:pointer;} .file-image-box label:after {position:absolute; left:50%; top:50%; content:""; transform:translate(-50%,-50%); width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_plus.svg') no-repeat center / cover; cursor:pointer;} .file-image-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .file-image-box input:focus-visible ~ label {outline:2px solid var(--color-black);} .file-image-box .file-list {display:block; overflow-x:auto; white-space:nowrap; font-size:0; padding:var(--padding-5); margin:-5px;} .file-image-box .file-list li {margin:0 var(--margin-5) 0 0; padding:0; width:var(--width-60); height:var(--height-60); border-radius:var(--radius-5); border:1px solid var(--color-gray-400); background-size:cover; background-position:center; position:relative; display:inline-block; font-size:0;} .file-image-box .file-list li .delete {cursor:pointer; position:absolute; right:3px; top:3px; width:var(--width-20); height:var(--height-20); font-size:0; border-radius:50%; background:var(--color-gray-500) url('../images/icon_trash.svg') no-repeat center / var(--icon-16);} .file-image-box .file-list li .delete-existing {cursor:pointer; position:absolute; right:3px; top:3px; width:var(--width-20); height:var(--height-20); font-size:0; border-radius:50%; background:var(--color-gray-500) url('../images/icon_trash.svg') no-repeat center / var(--icon-16);} /* file-list-box */ .file-list-box > ul > li {margin:0 0 var(--margin-5);} .file-list-box > ul > li:last-of-type {margin:0;} .file-list-box > ul > li .list-inner {padding:var(--padding-10) var(--padding-15); border-radius:var(--radius-8); display:flex; align-items:center; background:var(--color-white); border:1px solid var(--color-gray-400);} .file-list-box > ul > li .list-inner:before {display:inline-block; content:""; width:var(--icon-20); height:var(--icon-20); margin:0 var(--margin-5) 0 0; flex-shrink:0; background:url('../images/icon_clip.svg') no-repeat center / cover;} .file-list-box > ul > li .list-inner p {font-size:var(--font-md); text-decoration:underline; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; min-width:0;} .file-list-box > ul > li .list-inner .download {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-sm); margin:0 0 0 var(--margin-15); flex-shrink:0;} .file-list-box > ul > li .list-inner .download:after {display:block; content:""; width:var(--icon-16); height:var(--icon-16); margin:0 0 0 var(--margin-5); background:url('../images/icon_download.svg') no-repeat center / cover;} .file-list-box > ul > li .list-inner .download:hover {text-decoration:underline;} .file-list-box > ul > li .list-inner .preview {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-sm); margin:0 0 0 var(--margin-15); flex-shrink:0;} .file-list-box > ul > li .list-inner .preview:after {display:block; content:""; width:var(--icon-16); height:var(--icon-16); margin:0 0 0 var(--margin-5); background:url('../images/icon_scan.svg') no-repeat center / cover;} .file-list-box > ul > li .list-inner .preview:hover {text-decoration:underline;} .file-list-box > ul > li .list-inner:hover {background:var(--color-gray-200);} @media (max-width:991px){ .file-list-box > ul > li .list-inner {padding:var(--padding-10);} .file-list-box > ul > li .list-inner:before {width:var(--icon-16); height:var(--icon-16);} .file-list-box > ul > li .list-inner .download {margin:0 0 0 var(--margin-10);} .file-list-box > ul > li .list-inner .download:after {width:var(--icon-12); height:var(--icon-12);} .file-list-box > ul > li .list-inner .preview {margin:0 0 0 var(--margin-10);} .file-list-box > ul > li .list-inner .preview:after {width:var(--icon-12); height:var(--icon-12);} } /* dropdown-box */ .dropdown-box {position:relative;} .dropdown-box .dropdown-btn:after {display:block; content:""; width:var(--icon-16); height:var(--icon-16); font-size:0; margin:0 0 0 var(--margin-10); background:url('../images/icon_select_white.svg') no-repeat center / cover; transition:all ease 0.5s;} .dropdown-box .dropdown-inner {pointer-events:none; opacity:0; padding:var(--padding-5) 0 0; transition:all ease 0.5s; position:absolute; width:auto; white-space:nowrap;} .dropdown-box .dropdown-inner > ul {background:var(--color-white); border:1px solid var(--color-gray-400); border-radius:var(--radius-10); padding:var(--padding-5); box-shadow:0 0 10px rgba(0,0,0,0.1);} .dropdown-box .dropdown-inner > ul {overflow-y:auto; max-height:200px;} .dropdown-box .dropdown-inner > ul > li > .more {display:flex; flex-wrap:wrap; align-items:center; padding:var(--padding-5) var(--padding-10); font-size:var(--font-sm); color:var(--color-gray-700); border-radius:var(--radins-xs);} .dropdown-box .dropdown-inner > ul > li > .more:hover {background:var(--color-gray-200); color:var(--color-black);} .dropdown-box .dropdown-inner > ul > li.active > .more {background:var(--color-active); color:var(--color-white);} .dropdown-box.dropdown-right .dropdown-inner {right:0;} .dropdown-box.dropdown-center .dropdown-inner {left:50%; transform:translateX(-50%);} .dropdown-box.dropdown-top-left .dropdown-inner {top:0; right:100%; padding:0 var(--padding-5) 0 0;} .dropdown-box.dropdown-top-right .dropdown-inner {top:0; left:100%; padding:0 0 0 var(--padding-5);} .dropdown-box.dropup-top .dropdown-inner {bottom:100%; padding:0 0 var(--padding-5);} .dropdown-box.dropup-top-right .dropdown-inner {bottom:100%; right:0; padding:0 0 var(--padding-5) var(--padding-5);} .dropdown-box.dropup-top-center .dropdown-inner {bottom:100%; left:50%; padding:0 0 var(--padding-5); transform:translateX(-50%);} .dropdown-box.active {z-index:10;} .dropdown-box.active .dropdown-btn:after {transform:rotate(180deg);} .dropdown-box.active .dropdown-inner {pointer-events:inherit; opacity:1;} /* dropmenu-box */ .dropmenu-box ul {background:var(--color-white); box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:var(--radius-8); display:inline-block; width:auto; min-width:max-content; padding:var(--padding-5);} .dropmenu-box ul li {position:relative;} .dropmenu-box ul li > * {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:var(--padding-5) var(--padding-10); border-radius:var(--radius-5);} .dropmenu-box ul li > * p {font-size:var(--font-sm); flex:1; min-width:0; color:var(--color-gray-700);} .dropmenu-box ul li .inner {top:0; pointer-events:none; opacity:0; position:absolute; transition:all ease 0.5s;} .dropmenu-box ul li:hover > * > p {color:var(--color-black);} .dropmenu-box ul li:hover > *:not(.inner) {background:var(--color-gray-100);} .dropmenu-box ul li:hover > .inner {pointer-events:inherit; opacity:1; z-index:10;} .dropmenu-box ul.drop-right > li > .more:after {display:block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_arrow_right.svg') no-repeat center / cover; margin:0 0 0 var(--margin-10); filter:var(--filter-gray-800);} .dropmenu-box ul.drop-right > li .inner {left:90%; padding:0 0 0 var(--padding-25);} .dropmenu-box ul.drop-right > li:hover > .inner {left:100%;} .dropmenu-box ul.drop-left > li > * p {order:2; text-align:right;} .dropmenu-box ul.drop-left > li > .more:before {display:block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_arrow_left.svg') no-repeat center / cover; order:1; margin:0 var(--margin-10) 0 0; filter:var(--filter-gray-800);} .dropmenu-box ul.drop-left > li .inner {right:90%; left:auto; padding:0 var(--padding-25) 0 0;} .dropmenu-box ul.drop-left > li:hover > .inner {right:100%;} .dropmenu-box ul li.active > *:not(.inner) {background:var(--color-active);} .dropmenu-box ul li.active > *:not(.inner) p {color:var(--color-white);} .dropmenu-box ul li.active > .more:after {filter:var(--filter-white);} .dropmenu-box ul li.active > .more:before {filter:var(--filter-white);} /* share-box */ .share-box .icon-share {width:var(--width-40); height:var(--height-40); background:var(--color-gray-200); border-radius:50%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .share-box .icon-share:after {display:block; content:""; width:var(--icon-24); height:var(--icon-24); background:url('../images/icon_share.svg') no-repeat center / cover; filter:var(--filter-black-300);} .share-box .icon-share:hover {background:var(--color-gray-300);} .share-box ul {display:flex; flex-wrap:wrap; margin:0 -5px -15px;} .share-box ul li {width:calc(25% - 10px); margin:0 var(--margin-5) var(--margin-15);} .share-box ul li button {position:relative; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; width:100%;} .share-box ul li button:before {display:block; content:""; margin:0 auto var(--margin-5); width:var(--width-50); height:var(--height-50); background-size:var(--icon-28); background-position:center; background-repeat:no-repeat; border-radius:50%;} .share-box ul li button i {position:absolute; left:50%; transform:translateX(-50%); margin:0; top:11px;} .share-box ul li button span {display:block; text-align:center; font-size:var(--font-sm); color:var(--color-black); width:100%;} .share-box ul li.kakao button:before {background:#FEE500;} .share-box ul li.facebook button:before {background:#1877F2;} .share-box ul li.twitter button:before {background:#1DA1F2;} .share-box ul li.band button:before {background:#6DCA28;} .share-box ul li.blog button:before {background:#03C75A;} .share-box ul li.line button:before {background:#06C755;} .share-box ul li.copy button:before {background:var(--color-black-200);} @media (max-width:991px){ .share-box .icon-share {width:var(--width-30); height:var(--height-30);} .share-box .icon-share:after {width:var(--icon-20); height:var(--icon-20);} } /* tab-box */ .tab-box {margin:0 0 var(--margin-25);} .tab-box > ul > li > .tab {width:100%; transition:all ease 0.5s; border-radius:var(--radius-8); font-size:var(--font-lg); font-weight:500; height:var(--height-50); padding:0 var(--padding-15); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center;} .tab-box.tab1 > ul {display:flex; flex-wrap:wrap; align-items:center;} .tab-box.tab1 > ul > li {flex:1; min-width:0;} .tab-box.tab1 > ul > li > .tab {border-radius:0; color:var(--color-gray-700); background:var(--color-gray-200); border:1px solid transparent; border-bottom-color:var(--color-gray-400);} .tab-box.tab1 > ul > li > .tab:hover {background:var(--color-gray-300); color:var(--color-gray-800);} .tab-box.tab1 > ul > li > .tab.active {position:relative; z-index:2; background:var(--color-white); color:var(--color-active); border-color:var(--color-active); border-bottom-color:transparent;} .tab-box.tab1 > ul > li:first-of-type > .tab {border-radius:var(--radius-8) 0 0 0;} .tab-box.tab1 > ul > li:last-of-type > .tab {border-radius:0 var(--radius-8) 0 0;} .tab-box.tab2 > ul {display:flex; flex-wrap:wrap; gap:var(--gap-10);} .tab-box.tab2 > ul > li {width:calc(25% - (var(--gap-10) * var(--gap-count-3) / var(--list-4)));} .tab-box.tab2 > ul > li > .tab {border:1px solid var(--color-gray-400); color:var(--color-gray-700); background:var(--color-white);} .tab-box.tab2 > ul > li > .tab.active {background:var(--color-active); color:var(--color-white); border-color:var(--color-active);} .tab-box.tab3 > ul {display:flex; flex-wrap:wrap; gap:var(--gap-10);} .tab-box.tab3 > ul > li > .tab {height:var(--height-40); font-size:var(--font-sm); width:100%; color:var(--color-gray-700); background:var(--color-white); border:1px solid var(--color-gray-400);} .tab-box.tab3 > ul > li > .tab:hover {background:var(--color-gray-200);} .tab-box.tab3 > ul > li > .tab.active {background:var(--color-active); color:var(--color-white); border-color:var(--color-active);} @media (max-width:991px){ .tab-box > ul > li > .tab {font-size:var(--font-sm);} .tab-box.tab1 > ul {flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;} .tab-box.tab1 > ul > li {flex:none;} .tab-box.tab2 > ul {gap:var(--gap-5);} .tab-box.tab2 > ul > li {width:calc(33.33% - (var(--gap-5) * var(--gap-count-2) / var(--list-3)));} .tab-box.tab3 > ul {gap:var(--gap-5);} } @media (max-width:767px){ .tab-box.tab2 > ul > li {width:calc(50% - (var(--gap-5) * var(--gap-count-1) / var(--gap-count-2)));} } /* category-box */ .category-box {margin:0 0 var(--margin-20);} .category-box .category1 {display:flex; flex-wrap:wrap; gap:var(--gap-5);} .category-box .category1 > li .cate {background:var(--color-white); font-size:var(--font-md); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:var(--height-40); border-radius:var(--radius-8); border:1px solid var(--color-gray-400); padding:0 var(--padding-15);} .category-box .category1 > li .cate:hover {color:var(--color-active); border-color:var(--color-active);} .category-box .category1 > li.active .cate {background:var(--color-active); border-color:var(--color-active); color:var(--color-white); font-weight:500;} @media (max-width:991px){ .category-box .category1 > li .cate {font-size:var(--font-sm); height:var(--height-35); padding:0 var(--padding-10);} } /* tooltip-box */ .tooltip-box {position:relative;} .tooltip-box .tooltip-inner {pointer-events:none; opacity:0; transition:all ease 0.5s; z-index:10; content:attr(data-tooltip); position:absolute; background:var(--color-black); border-radius:var(--radius-5); padding:var(--padding-5) var(--padding-10); font-size:var(--font-md); white-space:nowrap;} .tooltip-box .tooltip-inner:before {pointer-events:none; opacity:0; content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); border-width:var(--radius-5); border-style:solid; transition:opacity 0.2s;} .tooltip-box .tooltip-inner p {font-size:var(--font-xs); line-height:1.3; color:var(--color-white);} .tooltip-box:hover {z-index:20;} .tooltip-box:hover .tooltip-inner {pointer-events:inherit; opacity:1;} .tooltip-box:hover .tooltip-inner:before {pointer-events:inherit; opacity:1;} .tooltip-box.tooltip-top .tooltip-inner {left:50%; transform:translateX(-50%); bottom:calc(100% + 8px);} .tooltip-box.tooltip-top .tooltip-inner:before {left:50%; transform:translateX(-50%); top:calc(100% - 2.5px); border-color:var(--color-black) transparent transparent transparent;} .tooltip-box.tooltip-bottom .tooltip-inner {left:50%; transform:translateX(-50%); top:calc(100% + 8px);} .tooltip-box.tooltip-bottom .tooltip-inner:before {left:50%; transform:translateX(-50%); top:calc(0% - 8px); border-color:transparent transparent var(--color-black) transparent;} .tooltip-box.tooltip-left .tooltip-inner {right:calc(100% + 8px); top:50%; transform:translateY(-50%);} .tooltip-box.tooltip-left .tooltip-inner:before {left:calc(100% - 1.5px); border-color:transparent transparent transparent var(--color-black);} .tooltip-box.tooltip-right .tooltip-inner {left:calc(100% + 8px); top:50%; transform:translateY(-50%);} .tooltip-box.tooltip-right .tooltip-inner:before {right:calc(100% - 1.5px); left:auto; transform:translateY(-50%); border-color:transparent var(--color-black) transparent transparent;} .tooltip-box.focus {z-index:20;} .tooltip-box.focus .tooltip-inner {pointer-events:inherit; opacity:1;} .tooltip-box.focus .tooltip-inner:before {pointer-events:inherit; opacity:1;} .tooltip-box.active {z-index:19;} .tooltip-box.active .tooltip-inner {pointer-events:inherit; opacity:1;} .tooltip-box.active .tooltip-inner:before {pointer-events:inherit; opacity:1;} /* toast-box */ .toast-box {pointer-events:none; opacity:0; position:fixed; width:350px; transition:all ease 0.5s; z-index:9999; transform:scale(0.8);} .toast-box.toast-top-left {left:15px; top:0;} .toast-box.toast-top-center {left:50%; top:0; transform:translateX(-50%) scale(0.8);} .toast-box.toast-top-right {right:15px; top:0;} .toast-box.toast-center-left {left:15px; top:45%; transform:translateY(-50%) scale(0.8);} .toast-box.toast-center {left:50%; top:45%; transform:translate(-50%,-50%) scale(0.8);} .toast-box.toast-center-right {right:15px; top:45%; transform:translateY(-50%) scale(0.8);} .toast-box.toast-bottom-left {left:15px; bottom:0;} .toast-box.toast-bottom-center {left:50%; bottom:0; transform:translateX(-50%) scale(0.8);} .toast-box.toast-bottom-right {right:15px; bottom:0;} .toast-box .box {background:var(--color-white); border-radius:var(--radius-10); overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.2);} .toast-box .toast-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:var(--padding-10); background:var(--color-active); border-bottom:1px solid var(--color-gray-300); position:relative;} .toast-box .toast-head h2 {font-size:var(--font-xl); font-weight:600; flex:1; min-width:0; padding:0 var(--padding-10) 0 0; color:var(--color-white);} .toast-box .toast-head .close {width:var(--icon-16); height:var(--icon-16); font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover; filter:var(--filter-white);} .toast-box .toast-head .toast-progress {position:absolute; left:0; bottom:-1px; height:3px; background:var(--color-active2);} .toast-box .toast-body {padding:15px;} .toast-box .toast-body .toast-body-text p {font-size:var(--font-md); word-break:keep-all;} .toast-box.fixed {pointer-events:inherit; opacity:1; transform:scale(1);} .toast-box.toast-top-left.fixed {top:15px;} .toast-box.toast-top-center.fixed {top:15px; transform:translateX(-50%) scale(1);} .toast-box.toast-top-right.fixed {top:15px;} .toast-box.toast-center-left.fixed {top:50%; transform:translateY(-50%) scale(1);} .toast-box.toast-center.fixed {top:50%; transform:translate(-50%,-50%) scale(1);} .toast-box.toast-center-right.fixed {top:50%; transform:translateY(-50%) scale(1);} .toast-box.toast-bottom-left.fixed {bottom:15px;} .toast-box.toast-bottom-center.fixed {bottom:15px; transform:translateX(-50%) scale(1);} .toast-box.toast-bottom-right.fixed {bottom:15px;} @media (max-width:991px){ .toast-box {width:calc(100% - 30px); max-width:350px;} } /* popup-box */ .popup-box {position:fixed; min-width:300px; max-height:calc(100vh - 20px); border:1px solid var(--color-gray-300); max-height:calc(100dvh - 20px); box-shadow:0 0 10px rgba(0,0,0,0.1); overflow:hidden; border-radius:var(--radius-10);} .popup-box .box {display:flex; flex-direction:column; max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px);} .popup-box .popup-image {width:100%; flex:1 1 auto; overflow-y:auto; min-height:0;} .popup-box .popup-image a {display:block; width:100%;} .popup-box .popup-image img {width:100%; height:auto; display:block;} .popup-box .popup-image .popup-img-mobile {display:none;} .popup-box .popup-content {width:100%; flex:0 0 auto; border-top:1px solid var(--color-gray-300); background:var(--color-white); padding:var(--padding-10); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} .popup-box .popup-content button {font-size:var(--font-md); color:var(--color-black); display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-5);} .popup-box .popup-content button:first-of-type:before {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_time.svg') no-repeat center / cover;} .popup-box .popup-content button:last-of-type:after {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_close.svg') no-repeat center / cover;} @media (max-width:991px){ .popup-box {left:50% !important; top:50% !important; transform:translate(-50%,-50%); width:calc(100vw - 30px) !important; max-width:400px !important;} .popup-box.has-mobile .popup-img-web {display:none;} .popup-box.has-mobile .popup-img-mobile {display:block;} } /* modal-box */ .modal-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; transition:all ease 0.5s; z-index:9999; background:rgba(0,0,0,0.7);} .modal-box[aria-hidden="true"][inert] {user-select:none;} .modal-box .box {pointer-events:none; opacity:0; position:absolute; left:50%; top:45%; width:calc(100% - 30px); transition:all ease 0.5s; transform:translate(-50%,-50%); background:var(--color-white); border-radius:var(--radius-15); overflow:hidden; max-height:90%; display:flex; flex-direction:column;} .modal-box .box .modal-head {padding:var(--padding-15) var(--padding-20); border-bottom:1px solid var(--color-gray-400); width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} .modal-box .box .modal-head h2 {flex:1; min-width:0; padding:0 var(--padding-20) 0 0; font-size:var(--font-xxl); font-weight:600;} .modal-box .box .modal-head .close {width:var(--icon-20); height:var(--icon-20); font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover;} .modal-box .box .modal-body {padding:var(--padding-35) var(--padding-20); width:100%; height:100%; overflow-y:auto;} .modal-box .box .modal-body .modal-body-text strong {display:block; text-align:center; font-size:var(--font-lg); font-weight:500; margin:0 0 var(--margin-10); word-break:keep-all;} .modal-box .box .modal-body .modal-body-text p {overflow-wrap:anywhere; text-align:center; font-size:var(--font-lg); color:var(--color-gray-800); word-break:keep-all;} .modal-box .box .modal-body .modal-body-list {margin:-15px 0;} .modal-box .box .modal-body .modal-body-list ul li {border-bottom:1px solid var(--color-gray-300);} .modal-box .box .modal-body .modal-body-list ul li:last-of-type {border:0;} .modal-box .box .modal-body .modal-body-list ul li .link {display:flex; flex-wrap:wrap; align-items:center; padding:var(--padding-10); font-size:var(--font-md); color:var(--color-gray-800);} .modal-box .box .modal-body .modal-body-list ul li .link:hover {background:var(--color-gray-200);} .modal-box .box .modal-foot {padding:0 var(--padding-20) var(--padding-20); width:100%;} .modal-box.modal-xs .box {max-width:375px;} .modal-box.modal-sm .box {max-width:500px;} .modal-box.modal-md .box {max-width:800px;} .modal-box.modal-lg .box {max-width:1200px;} .modal-box.modal-left .box {width:calc(100% - 15px); max-width:320px; height:100%; max-height:100%; left:-15px; top:0; transform:none; border-radius:0 var(--radius-15) var(--radius-15) 0;} .modal-box.modal-right .box {width:calc(100% - 15px); max-width:320px; height:100%; max-height:100%; left:auto; right:-15px; top:0; transform:none; border-radius:var(--radius-15) 0 0 var(--radius-15);} .modal-box.modal-bottom .box {width:100%; max-width:100%; border-radius:var(--radius-15) var(--radius-15) 0 0; top:auto; left:0; bottom:-15px; transform:none;} .modal-box.modal-full .box {width:100%; max-width:100%; left:0; top:0; transform:scale(0.9); border-radius:0; height:100%; max-height:100%;} .modal-box.modal-transparent .box {background:transparent;} .modal-box.modal-transparent .box .modal-head {border:0;} .modal-box.modal-transparent .box .modal-head h2 {color:var(--color-white);} .modal-box.modal-transparent .box .modal-head .close {filter:var(--filter-white);} .modal-box.modal-transparent .box .modal-body {padding-top:0; padding-bottom:0;} .modal-box.modal-transparent .box .modal-body .modal-body-text strong {color:var(--color-white);} .modal-box.modal-transparent .box .modal-body .modal-body-text p {color:var(--color-white);} .modal-box.fixed {pointer-events:inherit; opacity:1;} .modal-box.fixed .box {pointer-events:inherit; opacity:1; top:50%;} .modal-box.modal-left.fixed .box {left:0; top:0;} .modal-box.modal-right.fixed .box {left:auto; right:0; top:0;} .modal-box.modal-bottom.fixed .box {bottom:0; top:auto;} .modal-box.modal-full.fixed .box {top:0; transform:scale(1);} @media (max-width:991px){ .modal-box .box {border-radius:var(--radius-10);} .modal-box .box .modal-head {padding:var(--padding-15);} .modal-box .box .modal-head h2 {padding:0 var(--padding-15) 0 0;} .modal-box.modal-left .box {border-radius:0 var(--radius-10) var(--radius-10) 0;} .modal-box.modal-right .box {border-radius:var(--radius-10) 0 0 var(--radius-10);} } /* paging-box */ .paging-box {margin:var(--margin-25) 0 0;} .paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .paging-box ul li {margin:0 var(--margin-5) 0 0;} .paging-box ul li:last-of-type {margin:0;} .paging-box ul li * {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:var(--width-35); height:var(--height-35); font-size:var(--font-sm); font-weight:600; color:var(--color-gray-800);} .paging-box ul li a:hover {color:var(--color-active); text-decoration:underline;} .paging-box ul li p {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:var(--width-35); height:var(--height-35); font-size:var(--font-sm); font-weight:600; color:var(--color-gray-800);} .paging-box ul li.active * {border-radius:50%; background:var(--color-active); color:var(--color-white) !important;} .paging-box ul li.pg * {font-size:0;} .paging-box ul li.pg *:after {display:block; content:""; width:var(--icon-24); height:var(--icon-24); background-size:cover; background-position:center; background-repeat:no-repeat; filter:var(--filter-gray-800);} .paging-box ul li.pg.prev {margin:0 var(--margin-10) 0 0;} .paging-box ul li.pg.prev *:after {background-image:url('../images/icon_arrow_left.svg');} .paging-box ul li.pg.next {margin:0 0 0 var(--margin-10);} .paging-box ul li.pg.next *:after {background-image:url('../images/icon_arrow_right.svg');} .paging-box ul li.pg.first *:after {background-image:url('../images/icon_arrow_left_double.svg');} .paging-box ul li.pg.last {margin:0 0 0 var(--margin-5);} .paging-box ul li.pg.last *:after {background-image:url('../images/icon_arrow_right_double.svg');} .paging-box ul li.disabled {background:none !important;} .paging-box ul li.disabled.pg *:after {filter:var(--filter-gray-400);} .paging-box.paging-left ul {justify-content:flex-start;} .paging-box.paging-right ul {justify-content:flex-end;} @media (max-width:991px){ .paging-box ul li * {width:var(--width-30); height:var(--height-30);} .paging-box ul li p {width:var(--width-30); height:var(--height-30);} .paging-box ul li.pg *:after {width:var(--icon-20); height:var(--icon-20);} } /* table-box */ .table-box {overflow-x:auto; white-space:nowrap; border-top:1px solid var(--color-black-500);} .table-box table {table-layout:auto; border-collapse:collapse; width:100%; border-top:1px solid var(--color-black-500);} .table-box table thead tr th {font-size:var(--font-md); font-weight:500; padding:var(--padding-10); background:var(--color-gray-100); border:1px solid var(--color-gray-200); border-bottom:0;} .table-box table thead tr th:first-of-type {border-left:0;} .table-box table thead tr th:last-of-type {border-right:0;} .table-box table tbody tr {counter-increment:list_num;} .table-box table tbody tr td {font-size:var(--font-md); padding:var(--padding-10); border:1px solid var(--color-gray-200); background:var(--color-white); white-space:normal; overflow-wrap:anywhere;} .table-box table tbody tr td p {font-size:var(--font-md);} .table-box table tbody tr td.num:before {content:counter(list_num);} .table-box table tbody tr td:first-of-type {border-left:0;} .table-box table tbody tr td:last-of-type {border-right:0;} .table-box table tbody tr:nth-of-type(even) td {background:var(--color-gray-100);} .table-box table tbody tr:hover td {background:var(--color-gray-100);} .table-box table.fixed {table-layout:fixed;} .table-box .check-box.single label {justify-content:center;} .table-box .select-box {margin:0 auto;} .table-box .select-box select {height:var(--height-30);} .table-box .input-box {margin:0 auto;} .table-box .input-box input {height:var(--height-30);} .table-box .button-box .btn {height:var(--height-30);} @media (max-width:991px){ .table-box {margin:0 var(--container-padding-minus);} .table-box table {margin:0 var(--container-padding);} .table-box table thead tr th {padding:var(--padding-5) var(--padding-10);} .table-box table tbody tr td {padding:var(--padding-5) var(--padding-10);} .table-box .check-box.single label:before {width:var(--icon-20); height:var(--icon-20);} } /* terms-box */ .terms-box {background:var(--color-white); border:1px solid var(--color-gray-400); margin:0 0 var(--margin-40);} .terms-box:last-of-type {margin:0;} .terms-box .terms-head {background:var(--color-gray-200); padding:var(--padding-15); border-bottom:1px solid var(--color-gray-400);} .terms-box .terms-head .terms-title {font-size:var(--font-xxl); font-weight:600;} .terms-box .terms-body {padding:var(--padding-15); max-height:300px; overflow-y:auto;} .terms-box .terms-body > .terms-big-title {font-size:var(--font-xxl); font-weight:600; padding:0 0 var(--padding-15); margin:0 0 var(--margin-15); border-bottom:1px dashed var(--color-gray-400)} .terms-box .terms-body > ul {margin:0 0 var(--margin-50);} .terms-box .terms-body > ul:last-of-type {margin:0;} .terms-box .terms-body > ul > li {margin:0 0 var(--margin-30);} .terms-box .terms-body > ul > li:last-of-type {margin:0;} .terms-box .terms-body > ul > li > * {margin:0 0 var(--margin-5);} .terms-box .terms-body > ul > li > *:last-child {margin:0;} .terms-box .terms-body > ul > li .terms-title {margin:0 0 var(--margin-10); font-size:var(--font-lg); font-weight:600;} .terms-box .terms-body > ul > li p {font-size:var(--font-md); color:var(--color-black-500);} .terms-box .terms-body > ul > li ul li {font-size:var(--font-md); color:var(--color-black-500); margin:0 0 var(--margin-5);} .terms-box .terms-body > ul > li ul li:last-of-type {margin:0;} .terms-box .terms-body > ul > li ul.inner {padding:0 0 0 var(--padding-10);} .terms-box .terms-body > ul > li ul.inner li {position:relative; margin:0; padding:0 0 0 var(--padding-15);} .terms-box .terms-body > ul > li ul.inner li:before {position:absolute; left:0; top:10px; width:6px; height:1px; content:""; background:var(--color-black-500);} .terms-box .terms-foot {padding:var(--padding-15); border-top:1px solid var(--color-gray-400); display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;} .terms-box .terms-foot .check-box label {align-items:center;} .terms-box .terms-foot .check-box label span {font-size:var(--font-md);} @media (max-width:991px){ .terms-box .terms-head {padding:var(--padding-10);} .terms-box .terms-body {padding:var(--padding-10); max-height:200px;} .terms-box .terms-body > ul > li {margin:0 0 var(--padding-20);} .terms-box .terms-body > ul > li .terms-title {margin:0 0 var(--padding-5);} .terms-box .terms-body > ul > li ul.inner {padding:0 0 0 var(--padding-10);} .terms-box .terms-body > ul > li ul.inner li {padding:0 0 0 var(--padding-10);} .terms-box .terms-body > ul > li ul.inner li:before {top:9px;} } /* vidoe-box */ .video-box {position:relative;} .video-box:after {display:block; content:""; padding-bottom:56.5%;} .video-box iframe {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .video-box video {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} /* marker-box */ .marker-box {position:relative; display:flex; flex-wrap:wrap; background:var(--color-white); border-radius:var(--radius-5); box-shadow:0 2px 12px rgba(0,0,0,0.1); min-width:280px; max-width:340px; overflow:hidden;} .marker-box .marker-image {width:90px; min-height:90px; flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .marker-box .marker-image img {width:80%; max-height:80%; object-fit:cover;} .marker-box .marker-content {flex:1; min-width:0; padding:var(--padding-10); border-left:1px solid var(--color-gray-200);} .marker-box .marker-content .content-subject {display:flex; flex-wrap:wrap; align-items:center;} .marker-box .marker-content .content-subject a {line-height:1; display:block; gap:var(--gap-10); flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .marker-box .marker-content .content-subject strong {line-height:1; font-size:var(--font-md); font-weight:600; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .marker-box .marker-content .content-subject .close {width:var(--icon-16); height:var(--icon-16); font-size:0; display:block; background:url('../images/icon_close.svg') no-repeat center / cover;} .marker-box .marker-content .content-detail {margin:var(--margin-5) 0 0;} .marker-box .marker-content .content-detail ul li {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-5);} .marker-box .marker-content .content-detail ul li:before {display:inline-block; content:""; width:var(--icon-12); height:var(--icon-12); background-size:cover; background-position:center; filter:var(--filter-gray-700);} .marker-box .marker-content .content-detail ul li.address:before {background-image:url('../images/icon_location.svg');} .marker-box .marker-content .content-detail ul li.call:before {background-image:url('../images/icon_call.svg');} .marker-box .marker-content .content-detail ul li.time:before {background-image:url('../images/icon_time.svg');} .marker-box .marker-content .content-detail ul li p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--color-gray-700); font-size:var(--font-sm);} .marker-box .marker-content .content-detail .button-box {margin:var(--margin-5) 0 0;} /* list-none-box */ .list-none-box {background:var(--color-white); border-top:1px solid var(--color-black-500); border-bottom:1px solid var(--color-gray-400); padding:var(--padding-100) var(--padding-15);} .list-none-box p {text-align:center; font-size:var(--font-lg); font-weight:500; color:var(--color-gray-800);} @media (max-width:991px){ .list-none-box {padding:var(--padding-50) var(--padding-15);} } /* board-search-box */ .board-search-box {background:var(--color-gray-100); border:1px solid var(--color-gray-400); padding:var(--padding-20) var(--padding-10); border-radius:var(--radius-8);} .board-search-box > ul {display:flex; flex-wrap:wrap; gap:var(--gap-20) 0;} .board-search-box > ul > li {display:flex; flex-wrap:wrap; align-items:center; padding:0 var(--padding-10);} .board-search-box > ul > li .search-title {margin:0 0 var(--margin-5);} .board-search-box > ul > li .search-title strong {font-size:var(--font-md); font-weight:600;} .board-search-box > ul > li .search-content {width:100%;} .board-search-box > ul > li .search-content .input-box input {height:var(--height-40);} .board-search-box > ul > li .search-content .select-box select {height:var(--height-40);} .board-search-box > ul > li .search-content .button-box .btn {height:var(--height-40);} @media (max-width:991px){ .board-search-box {padding:var(--padding-15) var(--padding-10); border-radius:var(--radius-5);} .board-search-box > ul {display:flex; flex-wrap:wrap; gap:var(--gap-15) 0;} .board-search-box > ul > li {display:flex; flex-wrap:wrap; align-items:center; padding:0 var(--padding-5);} } /* board-button-box */ .board-button-box {margin:var(--margin-30) 0 0; padding:var(--padding-30) 0 0; border-top:1px solid var(--color-gray-300);} @media (max-width:991px){ .board-button-box {margin:var(--margin-20) 0 0; padding:var(--padding-20) 0 0;} } /* board-recommend-box */ .board-recommend-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:var(--margin-10) 0 0;} .board-recommend-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:var(--radius-10); padding:var(--padding-15) var(--padding-25); background:var(--color-gray-100); gap:var(--gap-20);} .board-recommend-box ul li button {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-md); gap:var(--gap-5); color:var(--color-black-400);} .board-recommend-box ul li button b {font-size:var(--font-sm) !important; font-weight:700; color:var(--color-active);} .board-recommend-box ul li button:before {display:inline-block; content:""; width:var(--icon-20); height:var(--icon-20); background-size:cover; background-position:center; position:relative; top:-1px;} .board-recommend-box ul li button.like:before {background-image:url('../images/icon_board_like.svg');} .board-recommend-box ul li button.hate:before {background-image:url('../images/icon_board_hate.svg');} .board-recommend-box ul li button.active {color:var(--color-active);} @media (max-width:991px){ .board-recommend-box ul {padding:var(--padding-15); width:100%; gap:var(--gap-10);} } /* board-list-box */ .board-list-box {border-top:1px solid var(--color-black-500);} .board-list-box table {table-layout:fixed;} .board-list-box table thead tr th {font-size:var(--font-md); font-weight:500; padding:var(--padding-10); background:var(--color-gray-100); border:1px solid var(--color-gray-400); border-width:0 1px 1px 0; word-break:keep-all; overflow-wrap:anywhere;} .board-list-box table thead tr th:last-of-type {border-right:0;} .board-list-box table tbody tr td {font-size:var(--font-md); padding:var(--padding-10); background:var(--color-white); border:1px solid var(--color-gray-300); border-width:0 1px 1px 0; word-break:keep-all; overflow-wrap:anywhere;} .board-list-box table tbody tr td:last-of-type {border-right:0;} .board-list-box table tbody tr td * {font-size:inherit;} .board-list-box table tbody tr td img {object-fit:cover;} .board-list-box table tbody tr td .subject {display:flex; align-items:center; gap:var(--gap-5);} .board-list-box table tbody tr td .subject .subject-tit {font-size:var(--font-md); line-height:1; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .board-list-box table tbody tr td .subject .subject-cnt {font-size:var(--font-md); font-weight:500; margin:0 0 0 var(--margin-5); color:var(--color-active); flex-shrink:0;} .board-list-box table tbody tr td .subject .icon {flex-shrink:0;} .board-list-box table tbody tr td .badge-box {font-size:var(--font-md);} .board-list-box table tbody tr td.mo-line .mo-line-tit {display:none;} .board-list-box table tbody tr:hover td .subject .subject-tit {text-decoration:underline;} .board-list-box table tbody tr.notice td {background:var(--color-light-active); border-color:var(--color-gray-400);} @media (max-width:991px){ .board-list-box table colgroup {display:none;} .board-list-box table thead {display:none;} .board-list-box table tbody {display:block;} .board-list-box table tbody tr {padding:var(--padding-15) var(--padding-10); display:flex; flex-wrap:wrap; align-items:center; background:var(--color-white); border-bottom:1px solid var(--color-gray-300);} .board-list-box table tbody tr td {padding:0; border:0; color:var(--color-gray-800); order:2;} .board-list-box table tbody tr td.subject-cell {width:100%; margin:0 0 var(--margin-5); order:1;} .board-list-box table tbody tr td.subject-cell .subject-tit {color:var(--color-black); font-size:var(--font-lg);} .board-list-box table tbody tr td.mo-line {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-sm); gap:var(--gap-3);} .board-list-box table tbody tr td.mo-line:after {display:inline-block; content:""; width:1px; height:var(--height-10); background:var(--color-gray-300); margin:0 var(--margin-5);} .board-list-box table tbody tr td.mo-line:last-of-type:after {display:none;} .board-list-box table tbody tr td.mo-line .mo-line-tit {display:inline-block; font-size:var(--font-sm);} .board-list-box table tbody tr td.mo-line .button-box .btn-sm {height:var(--height-20); font-size:var(--font-xs); padding:0 var(--padding-5); border-radius:var(--radius-5);} .board-list-box table tbody tr td.mo-hidden {display:none;} .board-list-box table tbody tr.notice {background:var(--color-light-active);} } /* board-faq-box */ .board-faq-box {border-top:1px solid var(--color-black-500);} .board-faq-box > ul > li {background:var(--color-white); border-bottom:1px solid var(--color-gray-300);} .board-faq-box > ul > li .faq-head button {display:flex; flex-wrap:wrap; padding:var(--padding-15); width:100%;} .board-faq-box > ul > li .faq-head button:after {display:block; content:""; width:var(--icon-24); height:var(--icon-24); background:url('../images/icon_arrow_down.svg') no-repeat center / cover;} .board-faq-box > ul > li .faq-head button b {font-size:var(--font-md); font-weight:600; color:var(--color-active); width:var(--width-30); text-align:left;} .board-faq-box > ul > li .faq-head button .subject {font-size:var(--font-md); font-weight:500; color:var(--color-black); padding:0 var(--padding-15) 0 0; flex:1; min-width:0; text-align:left;} .board-faq-box > ul > li .faq-head button:hover .subject {text-decoration:underline;} .board-faq-box > ul > li .faq-body {background:var(--color-gray-100); border-top:1px solid var(--color-gray-300); padding:var(--padding-20) var(--padding-15); display:none; flex-wrap:wrap;} .board-faq-box > ul > li .faq-body > b {font-size:var(--font-md); font-weight:600; color:var(--color-active); width:var(--width-30); text-align:left;} .board-faq-box > ul > li .faq-body > .faq-body-inner {flex:1; min-width:0; font-size:var(--font-md);} .board-faq-box > ul > li .faq-body > .faq-body-inner * {font-size:var(--font-md); text-align:left; margin:0 0 var(--margin-5);} .board-faq-box > ul > li .faq-body > .faq-body-inner *:last-of-type {margin:0;} .board-faq-box > ul > li .faq-body > .faq-body-inner img {max-width:100%;} .board-faq-box > ul > li.active .faq-head button:after {transform:rotate(180deg); filter:var(--filter-active-200);} .board-faq-box > ul > li.active .faq-head button .subject {color:var(--color-active); font-weight:600;} .board-faq-box > ul > li.active .faq-body {display:flex;} /* board-gallery-box */ .board-gallery-box {border-top:1px solid var(--color-black-500); padding:var(--padding-20) 0 0;} .board-gallery-box > ul {display:flex; flex-wrap:wrap; gap:var(--gap-20);} .board-gallery-box > ul > li {width:calc((100% - var(--gap-20) * (var(--grid-cols) - 1)) / var(--grid-cols)); border:1px solid var(--color-gray-300); position:relative; border-radius:var(--radius-10); overflow:hidden;} .board-gallery-box > ul > li .check-box {position:absolute; left:5px; top:5px; z-index:3;} .board-gallery-box > ul > li .more {display:block; background:var(--color-white);} .board-gallery-box > ul > li .more .list-image {position:relative; overflow:hidden; border-bottom:1px solid var(--color-gray-300);} .board-gallery-box > ul > li .more .list-image:after {display:block; content:""; padding-bottom:63%;} .board-gallery-box > ul > li .more .list-image img {position:absolute; left:0; top:0; width:100%; height:100%; transition:all ease 0.2s;} .board-gallery-box > ul > li .more .list-image .badge-box {position:absolute; right:5px; top:5px;} .board-gallery-box > ul > li .more .list-image .list-image-play {position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); width:var(--width-50); height:var(--height-50); background:rgba(0,0,0,0.5); display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .board-gallery-box > ul > li .more .list-content {padding:var(--padding-15); display:flex; flex-wrap:wrap; gap:var(--gap-5);} .board-gallery-box > ul > li .more .list-content .subject {font-size:var(--font-lg); font-weight:500;} .board-gallery-box > ul > li .more .list-content .text {font-size:var(--font-md); color:var(--color-gray-700);} .board-gallery-box > ul > li .more .list-content .text * {font-size:inherit;} .board-gallery-box > ul > li .more .list-content .detail {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-3) 0;} .board-gallery-box > ul > li .more .list-content .detail > li {font-size:var(--font-sm); color:var(--color-gray-700); display:flex; flex-wrap:wrap; align-items:center;} .board-gallery-box > ul > li .more .list-content .detail > li:after {display:block; content:""; width:1px; height:calc(var(--height-25) / 2); margin:0 var(--margin-10); background:var(--color-gray-600);} .board-gallery-box > ul > li .more .list-content .detail > li:last-of-type:after {display:none;} .board-gallery-box > ul > li .more:hover .list-image img {transform:scale(1.1);} .board-gallery-box > ul > li .more:hover .list-content .subject {text-decoration:underline;} .board-gallery-box > ul > li.is-expired .more .list-image:before {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); content:""; z-index:3;} .board-gallery-box > ul > li.is-expired .more .list-image .badge-box {z-index:4;} .board-gallery-box.wide > ul > li .more .list-image:after {padding-bottom:42.86%;} .board-gallery-box.landscape > ul > li .more .list-image:after {padding-bottom:56.5%;} .board-gallery-box.photo > ul > li .more .list-image:after {padding-bottom:66.67%;} .board-gallery-box.standard > ul > li .more .list-image:after {padding-bottom:75%;} .board-gallery-box.square > ul > li .more .list-image:after {padding-bottom:100%;} .board-gallery-box.portrait > ul > li .more .list-image:after {padding-bottom:133.33%;} .board-gallery-box.portrait-photo > ul > li .more .list-image:after {padding-bottom:150%;} @media (max-width:1200px){ .board-gallery-box > ul {gap:var(--gap-15);} .board-gallery-box.grid-even > ul > li {width:calc((100% - var(--gap-15) * (min(var(--grid-cols), 4) - 1)) / min(var(--grid-cols), 4));} .board-gallery-box.grid-odd > ul > li {width:calc((100% - var(--gap-15) * (min(var(--grid-cols), 3) - 1)) / min(var(--grid-cols), 3));} } @media (max-width:991px){ .board-gallery-box > ul {gap:var(--gap-10);} .board-gallery-box.grid-even > ul > li {width:calc((100% - var(--gap-10) * (min(var(--grid-cols), 2) - 1)) / min(var(--grid-cols), 2));} .board-gallery-box.grid-odd > ul > li {width:calc((100% - var(--gap-10) * (min(var(--grid-cols), 3) - 1)) / min(var(--grid-cols), 3));} .board-gallery-box > ul > li .more .list-content {padding:var(--padding-10); gap:var(--gap-3) 0;} .board-gallery-box > ul > li .more .list-content > * {width:100%;} .board-gallery-box > ul > li .more .list-content .text {margin:0;} .board-gallery-box > ul > li .more .list-content .detail > li:after {height:var(--height-10); margin:0 var(--margin-5);} } @media (max-width:575px){ .board-gallery-box > ul {gap:var(--gap-20) 0;} .board-gallery-box > ul > li {width:100%;} .board-gallery-box.grid-even > ul > li {width:100%;} .board-gallery-box.grid-odd > ul > li {width:100%;} } /* board-webzine-box */ .board-webzine-box {border-top:1px solid var(--color-black-500);} .board-webzine-box > ul {display:flex; flex-wrap:wrap;} .board-webzine-box > ul > li {width:calc((100% - var(--gap-20) * (var(--grid-cols) - 1)) / var(--grid-cols)); border-bottom:1px solid var(--color-gray-300); position:relative;} .board-webzine-box > ul > li .check-box {position:absolute; left:5px; top:5px; z-index:3;} .board-webzine-box > ul > li .more {display:flex; flex-wrap:wrap; align-items:center; padding:var(--padding-20) var(--padding-15); background:var(--color-white);} .board-webzine-box > ul > li .more .list-image {border:1px solid var(--color-gray-300); position:relative; width:200px; margin:0 var(--margin-15) 0 0; overflow:hidden;} .board-webzine-box > ul > li .more .list-image:after {display:block; content:""; padding-bottom:63%;} .board-webzine-box > ul > li .more .list-image img {position:absolute; left:0; top:0; width:100%; height:100%; transition:all ease 0.2s;} .board-webzine-box > ul > li .more .list-image .badge-box {position:absolute; right:5px; top:5px;} .board-webzine-box > ul > li .more .list-content {flex:1; min-width:0;} .board-webzine-box > ul > li .more .list-content .subject {font-size:var(--font-lg); font-weight:500;} .board-webzine-box > ul > li .more .list-content .text {font-size:var(--font-md); color:var(--color-gray-700); margin:var(--margin-5) 0 0;} .board-webzine-box > ul > li .more .list-content .detail {display:flex; flex-wrap:wrap; align-items:center; margin:var(--margin-5) 0 0;} .board-webzine-box > ul > li .more .list-content .detail > li {font-size:var(--font-sm); color:var(--color-gray-700); display:flex; flex-wrap:wrap; align-items:center;} .board-webzine-box > ul > li .more .list-content .detail > li:after {display:block; content:""; width:1px; height:calc(var(--height-25) / 2); margin:0 var(--margin-10); background:var(--color-gray-600);} .board-webzine-box > ul > li .more .list-content .detail > li:last-of-type:after {display:none;} .board-webzine-box > ul > li .more:hover .list-image img {transform:scale(1.1);} .board-webzine-box > ul > li .more:hover .list-content .subject {text-decoration:underline;} .board-webzine-box.wide > ul > li .more .list-image:after {padding-bottom:42.86%;} .board-webzine-box.landscape > ul > li .more .list-image:after {padding-bottom:56.5%;} .board-webzine-box.photo > ul > li .more .list-image:after {padding-bottom:66.67%;} .board-webzine-box.standard > ul > li .more .list-image:after {padding-bottom:75%;} .board-webzine-box.square > ul > li .more .list-image:after {padding-bottom:100%;} .board-webzine-box.portrait > ul > li .more .list-image:after {padding-bottom:133.33%;} .board-webzine-box.portrait-photo > ul > li .more .list-image:after {padding-bottom:150%;} @media (max-width:991px){ .board-webzine-box > ul > li {width:calc((100% - var(--gap-20) * (var(--grid-cols) - 1)) / var(--grid-cols));} .board-webzine-box > ul > li .more {padding:var(--padding-15) var(--padding-10);} } @media (max-width:767px){ .board-webzine-box > ul > li {width:100%;} .board-webzine-box > ul > li .more .list-image {width:120px; margin:0 var(--margin-10) 0 0;} .board-webzine-box > ul > li .more .list-content .text {margin:0;} .board-webzine-box > ul > li .more .list-content .detail {margin:0;} } /* board-map-box */ .board-map-box {border-top:1px solid var(--color-black-500); display:flex; flex-wrap:wrap; background:var(--color-white);} .board-map-box .map-frame {width:600px; position:relative;} .board-map-box .map-frame:after {display:block; content:""; padding-bottom:100%;} .board-map-box .map-frame iframe {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .board-map-box .map-frame #kakaoMap {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .board-map-box .map-list {flex:1; min-width:0;} .board-map-box .map-list > ul {max-height:600px; overflow-y:auto;} .board-map-box .map-list > ul > li {border-bottom:1px solid var(--color-gray-300); position:relative;} .board-map-box .map-list > ul > li .check-box {position:absolute; right:10px; top:10px; z-index:10;} .board-map-box .map-list > ul > li .more {display:flex; flex-wrap:wrap; align-items:center; padding:var(--padding-10) var(--padding-15);} .board-map-box .map-list > ul > li .more .list-image {width:100px; position:relative; overflow:hidden; border-radius:4px; border:1px solid var(--color-gray-300);} .board-map-box .map-list > ul > li .more .list-image:after {display:block; content:""; padding-bottom:100%;} .board-map-box .map-list > ul > li .more .list-image img {position:absolute; left:0; top:0; width:100%; height:100%; transition:all ease 0.5s;} .board-map-box .map-list > ul > li .more .list-content {flex:1; min-width:0; padding:0 0 0 var(--padding-20);} .board-map-box .map-list > ul > li .more .list-content .subject {font-size:var(--font-lg); font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .board-map-box .map-list > ul > li .more .list-content ul {margin:var(--margin-5) 0 0;} .board-map-box .map-list > ul > li .more .list-content ul li {display:flex; flex-wrap:wrap; align-items:center;} .board-map-box .map-list > ul > li .more .list-content ul li:before {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); margin:0 var(--margin-5) 0 0; background-size:cover; background-position:center; filter:var(--filter-gray-700);} .board-map-box .map-list > ul > li .more .list-content ul li p {flex:1; min-width:0; font-size:var(--font-md); color:var(--color-gray-700); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .board-map-box .map-list > ul > li .more .list-content ul li.address:before {background-image:url('../images/icon_location.svg');} .board-map-box .map-list > ul > li .more .list-content ul li.call:before {background-image:url('../images/icon_call.svg');} .board-map-box .map-list > ul > li .more .list-content ul li.time:before {background-image:url('../images/icon_time.svg');} .board-map-box .map-list > ul > li .more:hover {background:var(--color-gray-100);} .board-map-box .map-list > ul > li .more:hover .list-image img {transform:scale(1.1);} .board-map-box .map-list > ul > li .more:hover .list-content .subject {text-decoration:underline;} @media (max-width:1200px){ .board-map-box .map-frame {width:450px;} .board-map-box .map-list > ul {max-height:450px;} } @media (max-width:991px){ .board-map-box .map-list > ul > li .more {padding:var(--padding-10);} .board-map-box .map-list > ul > li .more .list-image {width:95px;} .board-map-box .map-list > ul > li .more .list-content {padding:0 0 0 var(--padding-10);} } @media (max-width:800px){ .board-map-box {border-top:0;} .board-map-box .map-frame {width:100%;} .board-map-box .map-frame:after {padding-bottom:70%;} .board-map-box .map-list {flex:none; width:100%; border-top:1px solid var(--color-black-500); margin:var(--margin-15) 0 0;} } /* board-write-box */ .board-write-box {border-top:1px solid var(--color-black-500);} .board-write-box table {table-layout:fixed;} .board-write-box table tbody tr > * {font-size:var(--font-md); padding:var(--padding-10) var(--padding-15); border:1px solid var(--color-gray-300); border-width:0 1px 1px 0; text-align:left;} .board-write-box table tbody tr > *:last-child {border-right:0;} .board-write-box table tbody tr th {word-break:keep-all; font-weight:500; background:var(--color-gray-100); position:relative;} .board-write-box table tbody tr th.required:after {display:inline-block; content:"*"; font-size:var(--font-md); font-weight:300; color:var(--color-danger-200); margin:0 0 0 var(--margin-5);} .board-write-box table tbody tr td {background:var(--color-white);} .board-write-box table tbody tr td p {font-size:var(--font-md);} .board-write-box table tbody tr td .select-box select {height:var(--height-35);} .board-write-box table tbody tr td .input-box input {height:var(--height-35);} .board-write-box table tbody tr td .input-box input[type=date]:after, .board-write-box table tbody tr td .input-box input[type=datetime-local]:after {width:var(--icon-20); height:var(--icon-20);} .board-write-box table tbody tr td .button-box .btn {height:var(--height-35);} .board-write-box table tbody tr td .file-box .file-name p {height:var(--height-35); line-height:var(--height-35);} @media (max-width:991px){ .board-write-box table colgroup {display:none;} .board-write-box table tbody {display:block;} .board-write-box table tbody tr {display:flex; flex-wrap:wrap;} .board-write-box table tbody tr > * {padding:var(--padding-10);} .board-write-box table tbody tr th {width:110px; display:flex; flex-wrap:wrap; align-items:center; word-break:keep-all;} .board-write-box table tbody tr th.required:after {position:absolute; right:3px; top:3px;} .board-write-box table tbody tr th.title-cell {width:100%; text-align:center; background:var(--color-active); color:var(--color-white);} .board-write-box table tbody tr td {width:calc(100% - 110px); border-right:0;} } @media (max-width:767px){ .board-write-box table tbody tr th {width:100%; border-right:0;} .board-write-box table tbody tr td {width:100%;} } /* board-view-box */ .board-view-box {border-top:1px solid var(--color-black-500); background:var(--color-white);} .board-view-box .view-head {border-bottom:1px solid var(--color-gray-400); padding:var(--padding-15);} .board-view-box .view-head .head-subject {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-10);} .board-view-box .view-head .head-subject .badge-box {font-size:var(--font-lg);} .board-view-box .view-head .head-subject h2 {font-size:var(--font-xl); font-weight:600; flex:1; min-width:0;} .board-view-box .view-head .head-info {margin:var(--margin-10) 0 0;} .board-view-box .view-head .head-info > ul {display:flex; flex-wrap:wrap; align-items:center;} .board-view-box .view-head .head-info > ul > li {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-sm); color:var(--color-gray-900);} .board-view-box .view-head .head-info > ul > li:after {display:inline-block; content:""; width:1px; height:calc(var(--height-25) / 2); margin:0 var(--padding-10); background:var(--color-gray-400);} .board-view-box .view-head .head-info > ul > li:last-of-type:after {display:none;} .board-view-box .view-body .view-body-survey {padding:var(--padding-30);} .board-view-box .view-body .view-body-link {border-bottom:1px solid var(--color-gray-400); padding:var(--padding-10) var(--padding-15);} .board-view-box .view-body .view-body-link > ul > li {margin:0 0 var(--margin-5);} .board-view-box .view-body .view-body-link > ul > li:last-of-type {margin:0;} .board-view-box .view-body .view-body-link > ul > li a {display:flex; align-items:center;} .board-view-box .view-body .view-body-link > ul > li a:after {flex-shrink:0; display:block; content:""; width:var(--icon-20); height:var(--icon-20); margin:0 0 0 var(--margin-5); background:url('../images/icon_link.svg') no-repeat center / cover;} .board-view-box .view-body .view-body-link > ul > li a p {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--font-md);} .board-view-box .view-body .view-body-link > ul > li a:hover p {text-decoration:underline;} .board-view-box .view-body .view-body-content {border-bottom:1px solid var(--color-gray-400); padding:var(--padding-40) var(--padding-15); font-size:var(--font-md);} .board-view-box .view-body .view-body-content * {font-size:inherit;} .board-view-box .view-body .view-body-content p {font-size:var(--font-md); color:var(--color-gray-900);} .board-view-box .view-body .view-body-content img {display:block; max-width:100%;} .board-view-box .view-body .view-body-file {padding:var(--padding-15);} .board-view-box .view-body .view-body-list > ul {border-top:1px solid var(--color-black);} .board-view-box .view-body .view-body-list > ul > li {border-bottom:1px solid var(--color-gray-400);} .board-view-box .view-body .view-body-list > ul > li .more {display:flex; align-items:center; padding:var(--padding-15);} .board-view-box .view-body .view-body-list > ul > li .more b {font-size:var(--font-md); border-radius:50px; width:100px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:var(--height-40); background:var(--color-active); color:var(--color-white);} .board-view-box .view-body .view-body-list > ul > li .more b:after {display:block; content:""; width:var(--icon-20); height:var(--icon-20); margin:0 0 0 var(--margin-5); filter:var(--filter-white); background-size:cover; background-position:center;} .board-view-box .view-body .view-body-list > ul > li .more p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--font-md); padding:0 var(--padding-15);} .board-view-box .view-body .view-body-list > ul > li .more time {font-size:var(--font-sm); color:var(--color-gray-700);} .board-view-box .view-body .view-body-list > ul > li .more:hover p {text-decoration:underline;} .board-view-box .view-body .view-body-list > ul > li.prev .more b:after {background-image:url('../images/icon_arrow_up.svg');} .board-view-box .view-body .view-body-list > ul > li.next .more b:after {background-image:url('../images/icon_arrow_down.svg');} .board-view-box .view-body .view-body-frame {position:relative; width:100%;} .board-view-box .view-body .view-body-frame:after {display:block; content:""; padding-bottom:56.5%;} .board-view-box .view-body .view-body-frame iframe {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .board-view-box .view-body .view-body-map {border-bottom:1px solid var(--color-gray-400); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:var(--padding-20);} .board-view-box .view-body .view-body-map .map-inner {display:flex; flex-wrap:wrap; align-items:center; max-width:600px; width:100%;} .board-view-box .view-body .view-body-map .map-inner .map-left {width:100%; position:relative; border:1px solid var(--color-gray-400);} .board-view-box .view-body .view-body-map .map-inner .map-left:after {display:block; content:""; padding-bottom:60%;} .board-view-box .view-body .view-body-map .map-inner .map-left #kakaoMapView {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .board-view-box .view-body .view-body-map .map-inner .map-right {padding:var(--padding-20); width:100%; border:1px solid var(--color-gray-400); border-top:0;} .board-view-box .view-body .view-body-map .map-inner .map-right ul {margin:var(--margin-5) 0 0;} .board-view-box .view-body .view-body-map .map-inner .map-right ul li {display:flex; flex-wrap:wrap; align-items:center;} .board-view-box .view-body .view-body-map .map-inner .map-right ul li:before {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); margin:0 var(--margin-5) 0 0; background-size:cover; background-position:center; filter:var(--filter-gray-700);} .board-view-box .view-body .view-body-map .map-inner .map-right ul li p {flex:1; min-width:0; font-size:var(--font-md); color:var(--color-gray-700); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .board-view-box .view-body .view-body-map .map-inner .map-right ul li.address:before {background-image:url('../images/icon_location.svg');} .board-view-box .view-body .view-body-map .map-inner .map-right ul li.call:before {background-image:url('../images/icon_call.svg');} .board-view-box .view-body .view-body-map .map-inner .map-right ul li.time:before {background-image:url('../images/icon_time.svg');} @media (max-width:991px){ .board-view-box .view-head {padding:var(--padding-10) 0;} .board-view-box .view-head .head-subject {gap:var(--gap-5);} .board-view-box .view-head .head-info {margin:var(--margin-5) 0 0;} .board-view-box .view-head .head-info > ul {gap:var(--gap-3) 0;} .board-view-box .view-head .head-info > ul > li:after {margin:0 var(--margin-5);} .board-view-box .view-body .view-body-survey {padding:var(--padding-15) var(--padding-10);} .board-view-box .view-body .view-body-link {padding:var(--padding-10);} .board-view-box .view-body .view-body-link > ul > li a:after {width:var(--icon-16); height:var(--icon-16); margin:0 0 0 var(--margin-5);} .board-view-box .view-body .view-body-content {padding:var(--padding-15) var(--padding-10);} .board-view-box .view-body .view-body-file {padding:var(--padding-15) var(--padding-10);} .board-view-box .view-body .view-body-list > ul > li .more {padding:var(--padding-10);} .board-view-box .view-body .view-body-list > ul > li .more b {width:70px; height:28px; font-size:var(--font-sm);} .board-view-box .view-body .view-body-list > ul > li .more b:after {width:var(--icon-12); height:var(--icon-12); margin:0 0 0 var(--margin-5);} .board-view-box .view-body .view-body-list > ul > li .more p {padding:0 var(--padding-10);} .board-view-box .view-body .view-body-map {padding:var(--padding-15) 0;} .board-view-box .view-body .view-body-map .map-left {width:100%;} .board-view-box .view-body .view-body-map .map-left:after {padding-bottom:45%;} .board-view-box .view-body .view-body-map .map-right {flex:none; width:100%; padding:var(--padding-15);} } /* board-comment-box */ .board-comment-box .comment-write {margin:var(--margin-10) 0 0;} .board-comment-box .comment-count {margin:var(--margin-20) 0 var(--margin-10); display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--gap-5);} .board-comment-box .comment-count h4 {font-size:var(--font-xxl); font-weight:600;} .board-comment-box .comment-count h4 strong {font-size:var(--font-xxl); font-weight:700;} .board-comment-box .comment-list {border-top:1px solid var(--color-black-500); background:var(--color-white);} .board-comment-box .comment-list > ul > li {border-bottom:1px solid var(--color-gray-400);} .board-comment-box .comment-list > ul > li .cmt-head {border-bottom:1px solid var(--color-gray-300); padding:var(--padding-10); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner {display:flex; align-items:center;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner b {font-size:var(--font-md); font-weight:600; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner time {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-sm); color:var(--color-gray-700); flex-shrink:0;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner time:before {display:inline-block; content:""; width:1px; height:calc(var(--height-25) / 2); margin:0 var(--margin-10); background:var(--color-gray-400);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .icon-like {margin:0 0 0 var(--margin-10); flex-shrink:0;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .head-inner-thumb {width:var(--width-35); height:var(--height-35); margin:0 var(--margin-5) 0 0;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .head-inner-thumb img {width:100%; height:100%; object-fit:cover; object-fit:cover;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .head-inner-thumb span {font-size:0; position:relative; width:100%; height:100%; background:var(--color-gray-300); border-radius:50%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .head-inner-thumb span:after {display:inline-block; content:""; width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_user.svg') no-repeat center / cover; filter:var(--filter-black-500);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner:first-of-type {flex:1; min-width:0; padding:0 var(--padding-15) 0 0;} .board-comment-box .comment-list > ul > li .cmt-body {padding:var(--padding-10);} .board-comment-box .comment-list > ul > li .cmt-body .comment-write {margin:0; width:100%;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-inner {display:flex; flex-wrap:wrap;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text {flex:1; min-width:0;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text p {display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--font-md); color:var(--color-gray-900);} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text .cmt-more {display:none; font-size:var(--font-sm); margin:var(--margin-5) 0 0; text-decoration:underline; color:var(--color-active);} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text .cmt-reply {font-size:var(--font-md); display:inline-flex; flex-wrap:wrap; align-items:center; margin:var(--margin-5) 0 0; gap:5px; padding:0 0 0 var(--padding-10);} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text .cmt-reply:before {display:inline-block; content:""; width:var(--width-15); height:1px; background:var(--color-gray-600);} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-image {margin:0 0 0 10px;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-image button {display:block; font-size:0; width:80px; height:80px; border-radius:var(--radius-5); background-size:cover; background-position:center; position:relative; overflow:hidden;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-image button span {position:absolute; left:0; top:0; width:100%; height:100%; font-size:var(--font-sm); font-weight:500; color:var(--color-white); background:rgba(0,0,0,0.7); display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-inner ~ .comment-write {margin:10px 0 0;} .board-comment-box .comment-list > ul > li .cmt-body.active .cmt-body-text p {-webkit-line-clamp:unset; display:block; overflow:visible;} .board-comment-box .comment-list > ul > li .cmt-foot > ul {border-top:1px solid var(--color-gray-400);} .board-comment-box .comment-list > ul > li .cmt-foot > ul > li {position:relative; border-bottom:1px solid var(--color-gray-400);} .board-comment-box .comment-list > ul > li .cmt-foot > ul > li:last-of-type {border:0;} @media (max-width:991px){ .board-comment-box .comment-count h4 {font-size:var(--font-xl);} .board-comment-box .comment-count h4 strong {font-size:var(--font-xl);} .board-comment-box .comment-list > ul > li .cmt-head {padding:var(--padding-10);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .head-inner-thumb {width:var(--width-20); height:var(--height-20);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner b {font-size:var(--font-sm);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner time {font-size:var(--font-xs);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner time:before {height:var(--height-10); margin:0 var(--margin-5);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner .head-inner-thumb span:after {width:var(--icon-12); height:var(--icon-12);} .board-comment-box .comment-list > ul > li .cmt-body {padding:var(--padding-10);} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text p {font-size:var(--font-sm); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis;} .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-image button {width:50px; height:50px;} .board-comment-box .comment-list > ul > li .cmt-body.active p {display:block; overflow:visible; text-overflow:normal;} .board-comment-box .comment-list > ul > li .cmt-body.active .cmt-more {display:inline-flex;} } @media (max-width:400px){ .board-comment-box .comment-list > ul > li .cmt-head {gap:var(--gap-5);} .board-comment-box .comment-list > ul > li .cmt-head .head-inner {width:100%;} .board-comment-box .comment-list > ul > li .cmt-head .head-inner:first-of-type {flex:none; padding:0;} } /* board-message-box */ .board-message-box {margin:5px 0 0;} .board-message-box p {font-size:var(--font-sm) !important; color:var(--color-gray-700);} .board-message-box ul li {font-size:var(--font-sm) !important; color:var(--color-gray-700); position:relative; padding:0 0 0 var(--padding-10);} .board-message-box ul li:before {position:absolute; left:0; top:9px; width:calc(var(--width-5) / 2); height:calc(var(--height-5) / 2); background:var(--color-gray-700); border-radius:50%; content:"";} .board-message-box b {font-size:inherit; background:var(--color-black-300); color:var(--color-white);} /* swiper-gallery-box */ .swiper-gallery-box {width:100%; height:100%; max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .swiper-gallery-box .swiper {height:100%; flex:1; min-width:0;} .swiper-gallery-box .swiper .swiper-container {height:100%;} .swiper-gallery-box .swiper .swiper-wrapper {height:100%;} .swiper-gallery-box .swiper .swiper-slide {height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .swiper-gallery-box .swiper .swiper-slide img {display:block; margin:0 auto; max-width:100%; max-height:100%; object-fit:cover;} .swiper-gallery-box .swiper-button-prev {position:static; width:50px; height:50px; background:url('../images/icon_arrow_left.svg') no-repeat center / cover;} .swiper-gallery-box .swiper-button-prev:after {display:none;} .swiper-gallery-box .swiper-button-next {position:static; width:50px; height:50px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover;} .swiper-gallery-box .swiper-button-next:after {display:none;} @media (max-width:991px){ .swiper-gallery-box .swiper-button-prev {display:none;} .swiper-gallery-box .swiper-button-next {display:none;} } /* chat-list-box */ .chat-list-box .list-head {padding:var(--padding-15); background:var(--color-active); border-radius:var(--radius-8) var(--radius-8) 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} .chat-list-box .list-head h2 {font-size:var(--font-lg); font-weight:600; color:var(--color-white);} .chat-list-box .list-head .icon {filter:var(--filter-white);} .chat-list-box .list-head .icon.dropdown-btn:after {display:none;} .chat-list-box .list-head.list-head-sm {padding:var(--padding-10) var(--padding-15);} .chat-list-box .list-head.list-head-sm h2 {font-size:var(--font-md);} .chat-list-box .list-body {background:var(--color-white); border:1px solid var(--color-gray-400); border-top:0; border-radius:0 0 var(--radius-8) var(--radius-8); overflow:hidden;} .chat-list-box .list-body > ul > li {border-bottom:1px solid var(--color-gray-200); position:relative;} .chat-list-box .list-body > ul > li:last-of-type {border:0;} .chat-list-box .list-body > ul > li > input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} .chat-list-box .list-body > ul > li > .more {cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; padding:var(--padding-10); min-height:81.5px; position:relative;} .chat-list-box .list-body > ul > li > .more .chat-image {width:50px;} .chat-list-box .list-body > ul > li > .more .chat-image img {width:50px; height:50px; border:1px solid var(--color-gray-300); border-radius:50%; object-fit:cover;} .chat-list-box .list-body > ul > li > .more .chat-image.parts {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .chat-list-box .list-body > ul > li > .more .chat-image.parts img {width:25px; height:25px;} .chat-list-box .list-body > ul > li > .more .chat-content {flex:1; min-width:0; padding:0 0 0 var(--padding-10); display:flex; flex-wrap:wrap;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left {flex:1; min-width:0; padding:0 var(--padding-10) 0 0; display:flex; flex-wrap:wrap; align-items:center;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject {width:100%; display:flex; align-items:center;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject > *:not(.subject) {flex-shrink:0;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject .subject {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--font-md);} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject .count {font-size:var(--font-sm); color:var(--color-gray-700); margin:0 0 0 var(--margin-5);} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject .icon {margin:0 0 0 var(--margin-5); filter:var(--filter-gray-700);} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject .dropdown-btn:after {display:none;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-text {width:100%;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-text p {font-size:var(--font-sm); color:var(--color-gray-700);} .chat-list-box .list-body > ul > li > .more .chat-content .content-right {display:flex; flex-wrap:wrap; align-items:center; align-content:space-between; justify-content:flex-end;} .chat-list-box .list-body > ul > li > .more .chat-content .content-right > * {width:100%;} .chat-list-box .list-body > ul > li > .more .chat-content .content-right .right-date time {display:block; text-align:right; font-size:var(--font-sm); color:var(--color-gray-600);} .chat-list-box .list-body > ul > li > .more .chat-content .content-right .right-count {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;} .chat-list-box .list-body > ul > li > .more .chat-content .content-right .right-count span {border-radius:50px; padding:calc(var(--padding-5) / 2) var(--padding-5); font-size:var(--font-xs); color:var(--color-white); background:var(--color-active); font-weight:500; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .chat-list-box .list-body > ul > li > label.more {cursor:pointer;} .chat-list-box .list-body > ul > li > label.more .chat-content {align-items:center;} .chat-list-box .list-body > ul > li > label.more .chat-content:after {display:block; content:""; width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_check.svg') no-repeat center / cover;} .chat-list-box .list-body > ul > li > input:checked ~ label.more .chat-content:after {background-image:url('../images/icon_check_on.svg');} .chat-list-box .list-search {display:none; padding:var(--padding-10); border:1px solid var(--color-gray-400); border-width:0 1px 1px; background:var(--color-white);} .chat-list-box.active .list-search {display:block;} @media (max-width:991px){ .chat-list-box .list-head {padding:var(--padding-10) var(--padding-15);} .chat-list-box .list-body > ul > li > .more {min-height:77px;} .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject .icon-setting {width:var(--icon-16); height:var(--icon-16);} } /* chat-view-box */ .chat-view-box {display:flex; flex-direction:column;} .chat-view-box .view-head {display:flex; flex-wrap:wrap; align-items:center; padding:var(--padding-15); background:var(--color-active); border-radius:var(--radius-8) var(--radius-8) 0 0; width:100%;} .chat-view-box .view-head .chat-image {width:50px;} .chat-view-box .view-head .chat-image img {width:50px; height:50px; border:1px solid var(--color-gray-300); border-radius:50%; object-fit:cover;} .chat-view-box .view-head .chat-image.parts {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .chat-view-box .view-head .chat-image.parts img {width:25px; height:25px;} .chat-view-box .view-head .chat-content {flex:1; min-width:0; padding:0 0 0 var(--padding-10);} .chat-view-box .view-head .chat-content .subject {font-size:var(--font-md); color:var(--color-white); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .chat-view-box .view-head .chat-content .count {display:flex; flex-wrap:wrap; align-items:center; font-size:var(--font-sm); color:var(--color-gray-300);} .chat-view-box .view-head .chat-content .count:before {display:block; content:""; width:var(--icon-16); height:var(--icon-16); margin:0 var(--margin-5) 0 0; background:url('../images/icon_user.svg') no-repeat center / cover; filter:var(--filter-gray-300);} .chat-view-box .view-head .chat-button {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 0 var(--margin-20);} .chat-view-box .view-head .chat-button .icon {filter:var(--filter-white);} .chat-view-box .view-head .chat-button .dropdown-btn:after {display:none;} .chat-view-box .view-body {padding:var(--padding-10); width:100%; height:100%; overflow-y:auto; background:var(--color-white); border:1px solid var(--color-gray-400); border-width:0 1px;} .chat-view-box .view-body > ul > li {margin:0 0 var(--margin-15);} .chat-view-box .view-body > ul > li:last-of-type {margin:0;} .chat-view-box .view-body > ul > li {display:flex; flex-wrap:wrap;} .chat-view-box .view-body > ul > li .chat-image {width:50px; margin:0 var(--margin-10) 0 0;} .chat-view-box .view-body > ul > li .chat-image img {width:50px; height:50px; border-radius:50%; object-fit:cover; border:1px solid var(--color-gray-400);} .chat-view-box .view-body > ul > li .chat-content {flex:1; min-width:0; display:flex; flex-wrap:wrap;} .chat-view-box .view-body > ul > li .chat-content .chat-date {margin:0 0 0 var(--margin-5); display:flex; flex-wrap:wrap; align-items:flex-end;} .chat-view-box .view-body > ul > li .chat-content .chat-date time {font-size:var(--font-sm); color:var(--color-gray-800);} .chat-view-box .view-body > ul > li .chat-content .chat-date span {font-size:var(--font-sm); margin:0 0 0 var(--margin-5); color:var(--color-warning);} .chat-view-box .view-body > ul > li .chat-content .chat-text {max-width:60%; text-align:left;} .chat-view-box .view-body > ul > li .chat-content .chat-text .name {font-size:var(--font-md); font-weight:500; display:block; margin:0 0 var(--margin-5);} .chat-view-box .view-body > ul > li .chat-content .chat-text .text {display:inline-block; margin:0 0 var(--margin-5); position:relative; background:var(--color-white); border:1px solid var(--color-gray-400); color:var(--color-gray-800); border-radius:var(--radius-5); padding:var(--padding-5) var(--padding-10); font-size:var(--font-sm);} .chat-view-box .view-body > ul > li .chat-content .chat-text .text:before {position:absolute; left:-4.8px; top:8px; width:8px; height:8px; background:var(--color-white); transform:rotate(45deg); content:""; border:1px solid var(--color-gray-400); border-width:0 0 1px 1px; border-radius:var(--radius-5);} .chat-view-box .view-body > ul > li .chat-content .chat-text .text a {color:var(--color-blue); font-size:var(--font-sm); text-decoration:underline;} .chat-view-box .view-body > ul > li .chat-content .chat-text > * {margin:0 0 var(--margin-5);} .chat-view-box .view-body > ul > li .chat-content .chat-text > *:last-child {margin:0;} .chat-view-box .view-body > ul > li .chat-content .chat-photo {width:100%; margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul {display:flex; flex-wrap:wrap; gap:var(--gap-5); width:100%; max-width:60%;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul li {width:80px;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul li .more {display:block; position:relative; overflow:hidden; border-radius:var(--radius-5); border:1px solid var(--color-gray-400);} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul li .more:after {display:block; content:""; padding-bottom:100%;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul li .more img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ~ .chat-date {margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-file {width:100%; margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner {padding:var(--padding-10); display:flex; flex-wrap:wrap; width:220px; border-radius:var(--radius-5); background:var(--color-white); border:1px solid var(--color-gray-400);} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content {flex:1; min-width:0;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-name {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-info {font-size:var(--font-sm); color:var(--color-gray-700); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-download {display:flex; flex-wrap:wrap; align-items:center;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-download .download {margin:0 var(--margin-10) 0 0; color:var(--color-blue); font-size:var(--font-sm);} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-download .download:last-of-type {margin:0;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-download .download:hover {text-decoration:underline;} .chat-view-box .view-body > ul > li .chat-content .chat-file .inner:after {margin:var(--margin-5) 0 0 var(--margin-10); width:var(--icon-20); height:var(--icon-20); display:block; content:""; border-radius:50%; background:url('../images/icon_download.svg') no-repeat center / cover;} .chat-view-box .view-body > ul > li .chat-content .chat-file ~ .chat-date {margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-link {width:100%; margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-link .link {padding:10px; display:block; width:220px; border-radius:var(--radius-5); background:var(--color-white); overflow:hidden; border:1px solid var(--color-gray-400);} .chat-view-box .view-body > ul > li .chat-content .chat-link .link .link-image {width:100%; position:relative; margin:0 0 var(--margin-5);} .chat-view-box .view-body > ul > li .chat-content .chat-link .link .link-image:after {display:block; content:""; padding-bottom:60%;} .chat-view-box .view-body > ul > li .chat-content .chat-link .link .link-image img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .chat-view-box .view-body > ul > li .chat-content .chat-link .link .link-content .link-name {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .chat-view-box .view-body > ul > li .chat-content .chat-link .link .link-content .link-info {font-size:var(--font-sm); color:var(--color-gray-700); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .chat-view-box .view-body > ul > li .chat-content .chat-link ~ .chat-date {margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-video {width:100%; margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner {width:220px; position:relative; border-radius:var(--radius-5); overflow:hidden;} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner .download {background:rgba(0,0,0,.5); position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner .download i {width:var(--icon-40); height:var(--icon-40); border-radius:50%; background:rgba(0,0,0,0.7); display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner .download i.icon-download:after {display:block; content:""; width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_download.svg') no-repeat center / cover; filter:var(--filter-white);} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner .download i.icon-play:after {display:block; content:""; width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_play.svg') no-repeat center / cover; filter:var(--filter-white);} .chat-view-box .view-body > ul > li .chat-content .chat-video .inner .download span {width:100%; text-align:center; font-size:var(--font-sm); color:var(--color-white); margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li .chat-content .chat-video.video-vertical .inner:after {display:block; content:""; padding-bottom:150%;} .chat-view-box .view-body > ul > li .chat-content .chat-video.video-horizontal .inner:after {display:block; content:""; padding-bottom:60%;} .chat-view-box .view-body > ul > li .chat-content .chat-video ~ .chat-date {margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li.mine .chat-content {flex-direction:row-reverse;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-date {margin:0 var(--margin-5) 0 0; flex-shrink:0;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-text {text-align:right;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-text .text {background:var(--color-active); color:var(--color-white); border-color:var(--color-active); text-align:left;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-text .text:before {left:auto; right:-4.8px; background:var(--color-active); border-color:var(--color-active);} .chat-view-box .view-body > ul > li.mine .chat-content .chat-text .text a {color:var(--color-light-active);} .chat-view-box .view-body > ul > li.mine .chat-content .chat-photo ul {margin-left:auto; justify-content:flex-end;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-photo ~ .chat-date {margin:var(--margin-5) 0 0;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-file .inner {margin-left:auto;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-link .link {margin-left:auto;} .chat-view-box .view-body > ul > li.mine .chat-content .chat-video .inner {margin-left:auto;} .chat-view-box .view-body > .time-line {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:var(--margin-30) 0;} .chat-view-box .view-body > .time-line .time {font-size:var(--font-sm); padding:var(--padding-5) var(--padding-10); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:rgba(0,0,0,0.1); border-radius:50px;} .chat-view-box .view-body > .time-line .time:before {display:inline-block; content:""; width:14px; height:14px; margin:0 var(--margin-5) 0 0; background:url('../images/icon_calendar.svg') no-repeat center / cover;} .chat-view-box .view-foot {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:var(--padding-10); background:var(--color-white); border:1px solid var(--color-gray-400);} .chat-view-box .view-foot > * {width:100%;} .chat-view-box .view-foot .view-bottom {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:var(--padding-10) 0 0;} .chat-view-box .view-foot .view-bottom .icon {filter:var(--filter-gray-800);} .chat-view-box .view-search {display:none; width:100%; padding:var(--padding-10); border:1px solid var(--color-gray-400); border-width:0 1px 1px; background:var(--color-white);} .chat-view-box.active .view-search {display:block;} @media (max-width:991px){ .chat-view-box .view-head {padding:var(--padding-10) var(--padding-15);} .chat-view-box .view-head .chat-button .icon-menu {position:relative; top:1px;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul li {width:60px;} } @media (max-width:767px){ .chat-view-box .view-body > ul > li .chat-content .chat-text {max-width:80%;} .chat-view-box .view-body > ul > li .chat-content .chat-photo ul {max-width:80%;} } /********************* 별도 CSS *********************/ /* SEO Analyzer — 자체 완결 스타일 (외부 CSS 간섭 차단) */ .seo-analyzer {background:#fff; border:1px solid var(--color-gray-400); border-radius:8px; margin:15px 0 0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.5; color:#333;} .seo-analyzer *, .seo-analyzer *::before, .seo-analyzer *::after {box-sizing:border-box; margin:0; padding:0; border:0; color:inherit; background:none; text-decoration:none;} .seo-analyzer ul, .seo-analyzer li {list-style:none;} /* 상단 헤더: 원형 점수 + 정보 */ .seo-analyzer .seo-header {display:flex; align-items:center; gap:16px; padding:20px;} .seo-analyzer .seo-score-circle {flex:0 0 72px; width:72px; height:72px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid var(--color-gray-400); transition:border-color 0.3s ease;} .seo-analyzer .seo-score-circle .seo-score-number {font-size:24px; font-weight:700; line-height:1;} .seo-analyzer .seo-score-circle .seo-score-max {font-size:11px; color:#6b7280; line-height:1; margin-top:2px;} .seo-analyzer .seo-circle-good {border-color:#22c55e; color:#22c55e;} .seo-analyzer .seo-circle-okay {border-color:#f59e0b; color:#f59e0b;} .seo-analyzer .seo-circle-poor {border-color:#ef4444; color:#ef4444;} .seo-analyzer .seo-circle-good .seo-score-max, .seo-analyzer .seo-circle-okay .seo-score-max, .seo-analyzer .seo-circle-poor .seo-score-max {color:inherit; opacity:0.6;} .seo-analyzer .seo-header-info {flex:1; min-width:0;} .seo-analyzer .seo-header-top {display:flex; align-items:center; justify-content:space-between; margin:0 0 8px;} .seo-analyzer .seo-title {font-size:15px; font-weight:600;} .seo-analyzer .seo-grade-badge {font-size:12px; font-weight:600; padding:2px 10px; border-radius:10px; background:#e5e7eb; color:#6b7280;} .seo-analyzer .seo-badge-good {background:#dcfce7; color:#16a34a;} .seo-analyzer .seo-badge-okay {background:#fef3c7; color:#d97706;} .seo-analyzer .seo-badge-poor {background:#fee2e2; color:#dc2626;} .seo-analyzer .seo-gauge-bar {width:100%; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden;} .seo-analyzer .seo-gauge-fill {height:100%; border-radius:3px; transition:width 0.4s ease, background 0.4s ease;} .seo-analyzer .seo-gauge-good {background:#22c55e;} .seo-analyzer .seo-gauge-okay {background:#f59e0b;} .seo-analyzer .seo-gauge-poor {background:#ef4444;} @media (max-width:991px){ .seo-analyzer .seo-header {padding:10px; gap:10px;} .seo-analyzer .seo-score-circle {width:62px; height:62px; flex:0 0 62px;} .seo-analyzer .seo-score-circle .seo-score-number {font-size:20px;} } /* 카테고리 섹션 */ .seo-analyzer .seo-body {border-top:1px solid #d1d5db;} .seo-analyzer .seo-category {border-bottom:1px solid #e5e7eb;} .seo-analyzer .seo-category:last-child {border-bottom:0;} .seo-analyzer .seo-category-header {display:flex; align-items:center; gap:8px; padding:10px 20px; cursor:pointer; user-select:none; transition:background 0.15s ease;} .seo-analyzer .seo-category-header:hover {background:#f3f4f6;} .seo-analyzer .seo-cat-toggle {flex:0 0 16px; font-size:11px; color:#6b7280; transition:transform 0.2s ease;} .seo-analyzer .seo-cat-label {flex:1; min-width:0; font-size:13px; font-weight:600;} .seo-analyzer .seo-cat-score {flex:0 0 auto; font-size:13px; font-weight:600; color:#6b7280;} .seo-analyzer .seo-cat-good .seo-cat-score {color:#22c55e;} .seo-analyzer .seo-cat-okay .seo-cat-score {color:#f59e0b;} .seo-analyzer .seo-cat-poor .seo-cat-score {color:#ef4444;} /* 카테고리 바디 (접기/펼치기) */ .seo-analyzer .seo-category-body {padding:0 20px 10px 44px;} .seo-analyzer .seo-check-item {display:flex; align-items:flex-start; gap:8px; padding:5px 0; border-bottom:1px solid #f3f4f6; font-size:13px;} .seo-analyzer .seo-check-item:last-child {border-bottom:0;} .seo-analyzer .seo-check-icon {flex:0 0 18px; text-align:center; font-weight:700;} .seo-analyzer .seo-check-label {flex:0 0 160px; font-weight:500;} .seo-analyzer .seo-check-score {flex:0 0 45px; text-align:right; font-size:12px; color:#6b7280;} .seo-analyzer .seo-check-msg {flex:1; min-width:0; color:#6b7280;} .seo-analyzer .seo-status-pass {color:#22c55e;} .seo-analyzer .seo-status-fail {color:#ef4444;} .seo-analyzer .seo-status-na {color:#9ca3af;} @media (max-width:991px){ .seo-analyzer .seo-category-body {padding:0 10px 10px 10px;} .seo-analyzer .seo-check-label {flex:0 0 100px;} } /* Visit — 방문자 통계 공통 */ .visit-summary {display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px;} .visit-card {background:#fff; border-radius:8px; padding:20px; text-align:center; border:1px solid #e5e7eb;} .visit-card .visit-card-label {font-size:14px; color:#666; margin-bottom:8px;} .visit-card .visit-card-value {font-size:28px; font-weight:700; color:#374151;} .visit-card .visit-card-value.primary {color:var(--color-active,#2563eb);} .visit-chart-box {background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:20px; margin-bottom:24px;} .visit-chart-canvas {position:relative; height:300px;} .visit-chart-canvas.small {height:250px;} .visit-chart-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:24px;} .visit-chart-grid .visit-chart-box {margin-bottom:0;} .visit-filter {display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;} .visit-filter label {font-size:13px; display:block; margin-bottom:4px;} .visit-total {font-size:13px; color:#666; margin-bottom:8px;} .visit-count-result {display:none; padding:24px; margin:12px 0 0; background:#fff; border:1px solid var(--color-gray-400); border-radius:6px;} .visit-count-result p {font-size:16px; font-weight:500;} .visit-count-result p strong {font-size:inherit; font-weight:600; color:var(--color-active);}