@charset "UTF-8"; /* [TAILWIND-BASE] */ @layer base { /* [RESET] - ROOT */ :root { /* [CUSTOM] [COLOR-BASE] */ --webis_color: #4846F5; --webis_color_rgb: 72,70,245; --webis_color_50: #EEF0FE; --webis_color_50_rgb: 238,240,254; --webis_color_100: #E4E3FE; --webis_color_100_rgb: 228,227,254; --webis_color_150: #D7D6FD; --webis_color_150_rgb: 215,214,253; --webis_color_200: #C8C8FC; --webis_color_200_rgb: 200,200,252; --webis_color_250: #B9B9FB; --webis_color_250_rgb: 185,185,251; --webis_color_300: #ADACFA; --webis_color_300_rgb: 173,172,250; --webis_color_350: #A09FFA; --webis_color_350_rgb: 160,159,250; --webis_color_400: #9190F9; --webis_color_400_rgb: 145,144,249; --webis_color_450: #6D6BF7; --webis_color_450_rgb: 109,107,247; --webis_color_500: #4846F5; --webis_color_500_rgb: 72,70,245; --webis_color_550: #3A38D4; --webis_color_550_rgb: 58,56,212; --webis_color_600: #3837BF; --webis_color_600_rgb: 56,55,191; --webis_color_650: #3231AC; --webis_color_650_rgb: 50,49,172; --webis_color_700: #2D2B98; --webis_color_700_rgb: 45,43,152; --webis_color_750: #272684; --webis_color_750_rgb: 39,38,132; --webis_color_800: #212071; --webis_color_800_rgb: 33,32,113; --webis_color_850: #232065; --webis_color_850_rgb: 35,32,101; --webis_color_900: #15154A; --webis_color_900_rgb: 21,21,74; --webis_color_950: #0E0E31; --webis_color_950_rgb: 14,14,49; --webis_color_1000: #070719; --webis_color_1000_rgb: 7,7,25; --webis_color_like_100: #2BE9FF; --webis_color_like_100_rgb: 43,233,255; --webis_color_like_200: #2BD7FF; --webis_color_like_200_rgb: 43,215,255; --webis_color_like_300: #2BC6FF; --webis_color_like_300_rgb: 43,198,255; --webis_color_like_400: #2BB4FF; --webis_color_like_400_rgb: 43,180,255; --webis_color_like_500: #2BA2FF; --webis_color_like_500_rgb: 43,162,255; --webis_color_like_600: #2B5CFF; --webis_color_like_600_rgb: 43,92,255; --webis_color_like_700: #2B4AFF; --webis_color_like_700_rgb: 43,74,255; --webis_color_like_800: #2B38FF; --webis_color_like_800_rgb: 43,56,255; --webis_color_like_900: #2F2BFF; --webis_color_like_900_rgb: 47,43,255; --webis_color_like_1000: #412BFF; --webis_color_like_1000_rgb: 65,43,255; --webis_color_complement_100: #FFAB2B; --webis_color_complement_100_rgb: 255,171,43; --webis_color_complement_200: #FF412B; --webis_color_complement_200_rgb: 255,65,43; --webis_color_complement_300: #E9FF2B; --webis_color_complement_300_rgb: 233,255,43; --webis_color_triadic_100: #FF2B7F; --webis_color_triadic_100_rgb: 255,43,127; --webis_color_triadic_200: #7FFF2B; --webis_color_triadic_200_rgb: 127,255,43; --webis_color_square_100: #FF2BE9; --webis_color_square_100_rgb: 255,43,233; --webis_color_square_200: #FFAB2B; --webis_color_square_200_rgb: 255,171,43; --webis_color_square_300: #2BFF41; --webis_color_square_300_rgb: 43,255,65; --webis_color_mono_dark: #0044AB; --webis_color_mono_dark_rgb: 0,68,171; --webis_color_mono_light: #78ADFF; --webis_color_mono_light_rgb: 120,173,255; /* [CUSTOM] [COLOR-SEMANTIC] */ --webis_color_ink:#191F2E; --webis_color_ink_rgb:25,31,46; /* [CUSTOM] [COLOR-EXTEND] */ --webis_color_brand:#4846F5; --webis_color_brand_rgb:72,70,245; --webis_color_brand_gradient:linear-gradient(135deg,#4846F5 0%,#7C5CFF 62%,#00B5A4 130%); /* [PROJECT] [TOKEN] - SOTO SEARCH PORTAL */ --webis_ink:var(--webis_color_ink); --webis_ink_rgb:var(--webis_color_ink_rgb); --webis_ink_soft:#3D4557; --webis_muted:#6C7684; --webis_muted_light:#97A1B0; --webis_soft:#F4F5F7; --webis_soft_rgb:244,245,247; --webis_surface:#FFFFFF; --webis_line:#E6E9EF; --webis_line_strong:#D7DDE5; --webis_line_hover:#B9C2D0; --webis_header_line:#E2E6EC; --webis_point:#00B5A4; --webis_point_rgb:0,181,164; --webis_violet:#7C5CFF; --webis_link:#2A5BD7; --webis_url:#0E8A52; --webis_up:#E8443E; --webis_down:#3E7BF0; --webis_danger:#E8443E; --webis_brand_gradient:var(--webis_color_brand_gradient); --webis_radius_xs:.6rem; --webis_radius_sm:.8rem; --webis_radius_md:1rem; --webis_radius_lg:1.4rem; --webis_radius_xl:1.8rem; --webis_shadow_float:0 1.2rem 3.2rem rgba(20,26,48,.14),0 .2rem .6rem rgba(20,26,48,.06); --webis_shadow_raise:0 .4rem 1.2rem rgba(20,26,48,.08); --webis_side_column:34rem; /* [FONT] */ --webis_font_sans:'Pretendard Variable', Pretendard, NotoSansKR, 'Noto Sans KR', MalgunGothic, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', 'Apple SD Gothic Neo', Arial, sans-serif; /* [AREA-WIDTH] */ --webis_area_width_4ss:100%; --webis_area_width_3ss:100%; --webis_area_width_2ss:100%; --webis_area_width_ss:100%; --webis_area_width_sm:100%; --webis_area_width_md:100%; --webis_area_width_lg:100%; --webis_area_width_xl:100%; --webis_area_width_2xl:100%; --webis_area_width_3xl:100%; --webis_area_width_4xl:100%; /* [CUSTOM] [AREA-WIDTH-MAX] */ --webis_area_width_max:122.8rem; /* [CUSTOM] [AREA-PADDING] */ --webis_area_padding:1.2rem; --webis_area_padding_4ss:var(--webis_area_padding); --webis_area_padding_3ss:var(--webis_area_padding); --webis_area_padding_2ss:var(--webis_area_padding); --webis_area_padding_ss:var(--webis_area_padding); --webis_area_padding_sm:var(--webis_area_padding); --webis_area_padding_md:var(--webis_area_padding); --webis_area_padding_lg:var(--webis_area_padding); --webis_area_padding_xl:var(--webis_area_padding); --webis_area_padding_2xl:var(--webis_area_padding); --webis_area_padding_3xl:var(--webis_area_padding); --webis_area_padding_4xl:var(--webis_area_padding); /* [CUSTOM] [AREA-CURRENT] */ --webis_area_width_current:100%; --webis_area_padding_current:var(--webis_area_padding); } /* [RESET] - BASE */ *, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, textarea, input, button, select, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {padding:0;margin:0;border:0;border-radius:0;outline:0;font-style:inherit;font-weight:inherit;font-size:inherit;font-family:inherit;vertical-align:baseline} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} html, body {width:100%;height:100%} html {font-size:62.5%;overflow-y:scroll;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%} body {min-width:26.5rem;font-style:normal;font-weight:normal;font-size:1.5rem;line-height:1.6;font-family:var(--webis_font_sans);color:var(--webis_color_ink);background-color:#fff;word-break:keep-all;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} dl, ul, ol, menu, li {list-style:none} label, input, button, select {vertical-align:middle} iframe, img, svg, video {vertical-align:top} img {display:block} img, svg, video {max-width:100%} input, select {min-width:0;max-width:100%} button, input[type="button"], input[type="submit"] {cursor:pointer;background-color:transparent} textarea {overflow:auto;resize:vertical} table {width:100%;max-width:100%;border-collapse:collapse;border-spacing:0;background-color:transparent} th, td {vertical-align:middle} h1, h2, h3, h4, h5, h6, strong, b {font-weight:bold} a, a:link, a:visited, a:active, a:focus, a:hover {color:inherit;text-decoration:none} ::selection {background:rgba(72,70,245,.14);color:var(--webis_color_850)} /* [COMMON] - A11Y > FOCUS RING */ :focus:not(:focus-visible) {outline:none} :focus-visible {outline:0.2rem solid var(--webis_color);outline-offset:0.2rem;border-radius:0.4rem} /* [COMMON] - A11Y > SOUND ONLY */ .we_sound_only {position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important} #we_skip_to .we_sound_only:focus-visible {position:fixed !important;top:1.2rem;left:1.2rem;z-index:10000;width:auto !important;height:auto !important;padding:1.2rem 1.6rem !important;margin:0 !important;overflow:visible !important;clip:auto !important;white-space:nowrap !important;color:#fff;background-color:var(--webis_color_ink)} [x-cloak] {display:none !important} /* [COMMON] - A11Y > REDUCED MOTION */ @media (prefers-reduced-motion:reduce) { *, *::before, *::after {scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* [RESET] - LAYOUT > ROWS & AREA */ .we_rows {width:100%} .we_area {width:100%;max-width:min(var(--webis_area_width_current), var(--webis_area_width_max));margin-right:auto;margin-left:auto;padding-left:var(--webis_area_padding_current);padding-right:var(--webis_area_padding_current);container-type:inline-size} .we_full {width:100%;max-width:var(--webis_area_width_max);margin-right:auto;margin-left:auto;padding-left:var(--webis_area_padding_current);padding-right:var(--webis_area_padding_current);container-type:inline-size} .we_area_half {width:calc((min(var(--webis_area_width_current), var(--webis_area_width_max)) / 2) - var(--webis_area_padding_current));max-width:calc((min(var(--webis_area_width_current), var(--webis_area_width_max)) / 2) - var(--webis_area_padding_current));margin-left:auto;margin-right:auto} .we_full_half {width:calc(50% - var(--webis_area_padding_current));max-width:calc((var(--webis_area_width_max) / 2) - var(--webis_area_padding_current));margin-left:auto;margin-right:auto} /* [RESET] - LAYOUT > BREAKPOINT 4SS (280px) */ @media all and (min-width:280px) { :root {--webis_area_width_current:var(--webis_area_width_4ss);--webis_area_padding_current:var(--webis_area_padding_4ss)} } /* [RESET] - LAYOUT > BREAKPOINT 3SS (320px) */ @media all and (min-width:320px) { :root {--webis_area_width_current:var(--webis_area_width_3ss);--webis_area_padding_current:var(--webis_area_padding_3ss)} } /* [RESET] - LAYOUT > BREAKPOINT 2SS (480px) */ @media all and (min-width:480px) { :root {--webis_area_width_current:var(--webis_area_width_2ss);--webis_area_padding_current:var(--webis_area_padding_2ss)} } /* [RESET] - LAYOUT > BREAKPOINT SS (640px) */ @media all and (min-width:640px) { :root {--webis_area_width_current:var(--webis_area_width_ss);--webis_area_padding_current:var(--webis_area_padding_ss)} } /* [RESET] - LAYOUT > BREAKPOINT SM (768px) */ @media all and (min-width:768px) { :root {--webis_area_padding:1.6rem;--webis_area_width_current:var(--webis_area_width_sm);--webis_area_padding_current:var(--webis_area_padding_sm)} } /* [RESET] - LAYOUT > BREAKPOINT MD (1024px) */ @media all and (min-width:1024px) { :root {--webis_area_padding:2.4rem;--webis_area_width_current:var(--webis_area_width_md);--webis_area_padding_current:var(--webis_area_padding_md)} } /* [RESET] - LAYOUT > BREAKPOINT LG (1280px) */ @media all and (min-width:1280px) { :root {--webis_area_width_current:var(--webis_area_width_lg);--webis_area_padding_current:var(--webis_area_padding_lg)} } /* [RESET] - LAYOUT > BREAKPOINT XL (1440px) */ @media all and (min-width:1440px) { :root {--webis_area_width_current:var(--webis_area_width_xl);--webis_area_padding_current:var(--webis_area_padding_xl)} } /* [RESET] - LAYOUT > BREAKPOINT 2XL (1600px) */ @media all and (min-width:1600px) { :root {--webis_area_width_current:var(--webis_area_width_2xl);--webis_area_padding_current:var(--webis_area_padding_2xl)} } /* [RESET] - LAYOUT > BREAKPOINT 3XL (1920px) */ @media all and (min-width:1920px) { :root {--webis_area_width_current:var(--webis_area_width_3xl);--webis_area_padding_current:var(--webis_area_padding_3xl)} } /* [RESET] - LAYOUT > BREAKPOINT 4XL (2560px) */ @media all and (min-width:2560px) { :root {--webis_area_width_current:var(--webis_area_width_4xl);--webis_area_padding_current:var(--webis_area_padding_4xl)} } } /* [WEBIS-COMPONENTS] */ @layer components { /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-COMPONENT] - WSD CONTRACT * WSD : WEBIS native design component (this stylesheet) * Reusable components are not declared in the document head. * ---------------------------------------------------------------------------------------------------- */ /* [WSD BUTTON] - SAMPLE BASE */ .wsd_button {display:inline-flex;flex-shrink:0;min-height:4rem;align-items:center;justify-content:center;gap:0.7rem;padding:0 1.5rem;border:0.1rem solid transparent;border-radius:0.6rem;font-size:1.4rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;touch-action:manipulation;cursor:pointer} .wsd_button>i, .wsd_button>svg {display:block;flex-shrink:0;font-size:1.8rem;line-height:1} .wsd_button_primary {color:#fff;background-color:var(--webis_color_600);border-color:var(--webis_color_600)} .wsd_button_primary:hover {background-color:var(--webis_color_650);border-color:var(--webis_color_650)} .wsd_button:disabled, .wsd_button[aria-disabled="true"] {opacity:0.5;pointer-events:none} /* [WSD STATUS BOARD] - SERVICE SUMMARY */ .wsd_status_board {position:relative;display:flex;overflow:hidden;flex-direction:column;border:.1rem solid color-mix(in srgb,var(--portal,var(--webis_color)) 18%,#fff);border-radius:var(--webis_radius_md);background:#fff;padding:2rem} .wsd_status_board::before {content:'';position:absolute;top:0;right:0;left:0;height:.3rem;background:var(--portal,var(--webis_color))} .wsd_status_board>.bs_title {display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--webis_ink);font-size:1.5rem;font-weight:800} .wsd_status_board>.bs_title small {color:var(--webis_muted_light);font-size:1.2rem;font-weight:500;letter-spacing:0} .wsd_status_board>.bs_list_box, .wsd_status_board>.bs_list_field {display:grid;flex:1;align-content:space-between;margin-top:.7rem} .wsd_status_board>.bs_list_box>.is_item, .wsd_status_board>.bs_list_field>.is_item {display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.2rem;border-bottom:.1rem solid color-mix(in srgb,var(--portal,var(--webis_color)) 8%,#edf0f4);color:var(--webis_ink_soft);font-size:1.38rem} .wsd_status_board>.bs_list_box>.is_item:last-child, .wsd_status_board>.bs_list_field>.is_item:last-child {border-bottom:0} .wsd_status_board .ss_label {min-width:0} .wsd_status_board .ss_value {flex:0 0 auto;color:var(--portal,var(--webis_ink));font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} .wsd_status_board a.ss_value:hover {text-decoration:underline;text-underline-offset:.2rem} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - LAYOUT ID CONTRACT * ---------------------------------------------------------------------------------------------------- */ /* [LAYOUT] - WEBIS */ #we_webis {display:flex;min-height:100vh;flex-direction:column} #we_webis #we_title {} #we_webis #we_skip_to {} /* [LAYOUT] - AD */ #we_webis #we_ad {} /* [LAYOUT] - TOP */ #we_webis #we_top {} #we_webis #we_top #we_top_left {} #we_webis #we_top #we_top_right {} /* [LAYOUT] - HEADER */ #we_webis #we_header {} #we_webis #we_header #we_header_logo {} #we_webis #we_header #we_header_search {} #we_webis #we_header #we_header_banner {} #we_webis #we_header #we_header_action {} /* [LAYOUT] - HEAD NAV */ #we_webis #we_head_nav {} #we_webis #we_head_nav #we_head_nav_action {} #we_webis #we_head_nav #we_head_nav_bg {} #we_webis #we_head_nav #we_head_nav_progress {} /* [LAYOUT] - ALL NAV */ #we_webis #we_all_nav {} #we_webis #we_all_nav #we_all_nav_action {} #we_webis #we_all_nav #we_all_nav_bg {} /* [LAYOUT] - RESPOND NAV */ #we_webis #we_respond_nav {} #we_webis #we_respond_nav #we_respond_nav_action {} #we_webis #we_respond_nav #we_respond_nav_bg {} /* [LAYOUT] - SEARCH */ #we_webis #we_search_layer {} /* [LAYOUT] - VISUAL */ #we_webis #we_visual {} #we_webis #we_visual #we_main_visual {} #we_webis #we_visual #we_sub_visual {} #we_webis #we_visual #we_sub_visual #we_navigator {} /* [LAYOUT] - CONTAINER */ #we_webis #we_container {flex:1 0 auto} #we_webis #we_container #we_quick {} #we_webis #we_container #we_quick #we_quick_left {} #we_webis #we_container #we_quick #we_quick_right {} #we_webis #we_container #we_main_container {} #we_webis #we_container #we_main_container #we_main_content {} #we_webis #we_container #we_sub_container {} #we_webis #we_container #we_sub_container #we_sub_nav {} #we_webis #we_container #we_sub_container #we_sub_content {} #we_webis #we_container #we_sub_container #we_sub_content #we_sub_head {} #we_webis #we_container #we_sub_container #we_sub_content #we_sub_title {} #we_webis #we_container #we_sub_container #we_sub_content #we_sub_tab_nav {} #we_webis #we_container #we_sub_container #we_sub_content #we_sub_body {} #we_webis #we_container #we_sub_container #we_sub_content #we_sub_foot {} #we_webis #we_container #we_sub_container #we_sub_aside {} /* [LAYOUT] - ROLLING */ #we_webis #we_rolling {} /* [LAYOUT] - FOOTER */ #we_webis #we_footer {} #we_webis #we_footer #we_footer_menu {} #we_webis #we_footer #we_footer_info {} #we_webis #we_footer #we_footer_copyright {} #we_webis #we_footer #we_footer_banner {} /* [LAYOUT] - FLOAT */ #we_webis #we_float {} #we_webis #we_float #we_float_left {} #we_webis #we_float #we_float_right {} /* [LAYOUT] - MODAL */ #we_webis #we_modal {} /* ==================================================================================================== * [PROJECT] SOTO SEARCH PORTAL * 프로젝트 선택자는 아래 WEBIS 레이아웃 지도에 귀속합니다. * 반응형 규칙은 마지막 RESPONSIVE 구역에서만 관리합니다. * ==================================================================================================== */ /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - SKIP & AD * ---------------------------------------------------------------------------------------------------- */ /* [SKIP] - DEFAULT */ .ws_skip_to_wrap {} .ws_skip_to_wrap .es_link {} /* [AD] - DEFAULT */ .ws_ad_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - TOP * ---------------------------------------------------------------------------------------------------- */ /* [TOP] - DEFAULT */ .ws_top_wrap {} .ws_top_wrap .we_area {} .ws_top_wrap .we_area .es_top_area {} /* [TOP] - LEFT */ .ws_top_left_wrap {} /* [TOP] - RIGHT */ .ws_top_right_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - HEADER * ---------------------------------------------------------------------------------------------------- */ /* [HEADER] - DEFAULT */ .ws_header_wrap {} .ws_header_wrap .we_area {} .ws_header_wrap .we_area .es_header_area {} .ws_header_wrap .we_area .es_header_area .bs_header_box {} /* [HEADER] - LOGO */ .ws_header_logo_wrap {} /* [HEADER] - SEARCH */ .ws_header_search_wrap {} /* [HEADER] - BANNER */ .ws_header_banner_wrap {} /* [HEADER] - ACTION */ .ws_header_action_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [HEADER] - 공통 브랜드 * ---------------------------------------------------------------------------------------------------- */ .ws_header_wrap .we_area .bs_brand_box, .ws_search_header_wrap .es_main_area .we_area .bs_brand_box, .ws_portal_top_wrap .we_area .es_brand_area .bs_brand_box {display:inline-flex;align-items:center;gap:.9rem;font-weight:800;font-size:2rem;letter-spacing:-.05em;line-height:1} .ws_search_header_wrap .es_main_area .we_area .bs_brand_box {font-size:1.9rem} .ws_search_header_wrap .es_main_area .we_area .bs_brand_box .is_mark, .ws_portal_top_wrap .we_area .es_brand_area .bs_brand_box .is_mark {display:grid;width:3rem;height:3rem;place-items:center;border-radius:.9rem;background:var(--webis_brand_gradient);color:#fff;font-size:1.4rem;font-weight:800} .ws_search_header_wrap .es_main_area .we_area .bs_brand_box .is_text span, .ws_portal_top_wrap .we_area .es_brand_area .bs_brand_box .is_text span {color:var(--webis_color)} /* ---------------------------------------------------------------------------------------------------- * * [HEADER] - 홈 * ---------------------------------------------------------------------------------------------------- */ .ws_header_wrap {height:6rem} .ws_header_wrap .we_area {display:flex;align-items:center;justify-content:flex-end;height:100%} /* ---------------------------------------------------------------------------------------------------- * * [HEADER] - 통합검색 * ---------------------------------------------------------------------------------------------------- */ .ws_search_header_wrap {position:sticky;top:0;z-index:100;background:#fff;border-bottom:.1rem solid var(--webis_header_line)} .ws_search_header_wrap .es_main_area {} .ws_search_header_wrap .es_main_area .we_area {display:grid;grid-template-columns:auto minmax(0,66rem) minmax(16rem,1fr);align-items:center;gap:2.4rem;min-height:7.6rem} .ws_search_header_wrap .es_main_area .we_area .ws_util_wrap {justify-self:end} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area {border-radius:2.7rem} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box {min-height:5.2rem;padding:.3rem .4rem .3rem 1rem} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_prefix {width:3.4rem;height:3.4rem;font-size:1.8rem} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_input {height:4.6rem;font-size:1.6rem} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_keyboard_button, .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_camera_link, .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_submit_button {width:4rem;height:4rem;font-size:1.8rem} .ws_search_header_wrap .es_nav_area {border-top:.1rem solid #f0f2f5} .ws_search_header_wrap .es_nav_area .we_area {display:flex;align-items:center;gap:.4rem;height:4.8rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none} .ws_search_header_wrap .es_nav_area .we_area::-webkit-scrollbar {display:none} .ws_search_header_wrap .es_nav_area .we_area .bs_link {position:relative;display:inline-flex;height:4.8rem;align-items:center;padding:0 1.3rem;color:#525c6d;font-size:1.5rem;font-weight:600} .ws_search_header_wrap .es_nav_area .we_area .bs_link:hover {color:var(--webis_ink)} .ws_search_header_wrap .es_nav_area .we_area .bs_link.wsa_active {color:var(--webis_ink);font-weight:800} .ws_search_header_wrap .es_nav_area .we_area .bs_link.wsa_active::after {content:'';position:absolute;right:1.3rem;bottom:0;left:1.3rem;height:.3rem;border-radius:.3rem .3rem 0 0;background:var(--webis_ink)} .ws_search_header_wrap .es_nav_area .we_area .bs_tool_box {margin-left:auto;display:flex;align-items:center;gap:1.4rem;color:var(--webis_muted);font-size:1.3rem} .ws_search_header_wrap .es_nav_area .we_area .bs_tool_box .is_button:hover {color:var(--webis_ink)} /* ---------------------------------------------------------------------------------------------------- * * [HEADER] - 서브 포털 * ---------------------------------------------------------------------------------------------------- */ .ws_portal_top_wrap {background:#fff;border-bottom:.1rem solid var(--webis_header_line)} .ws_portal_top_wrap .we_area {display:flex;align-items:center;justify-content:space-between;height:5.6rem} .ws_portal_top_wrap .we_area .es_brand_area {display:flex;align-items:center;gap:1.6rem} .ws_portal_top_wrap .we_area .es_brand_area .bs_link_box {display:flex;align-items:center;gap:1.4rem;margin-left:.4rem;padding-left:1.6rem;border-left:.1rem solid var(--webis_line);color:var(--webis_muted);font-size:1.35rem} .ws_portal_top_wrap .we_area .es_brand_area .bs_link_box .is_link:hover {color:var(--webis_ink)} .ws_portal_identity_wrap {background:color-mix(in srgb,var(--portal,#4846f5) 4%,#fff)} .ws_portal_identity_wrap .we_area {display:flex;align-items:center;justify-content:space-between;gap:2.4rem;padding-top:2.6rem;padding-bottom:2.2rem} .ws_portal_identity_wrap .we_area .es_title_area {display:flex;align-items:center;gap:1.4rem} .ws_portal_identity_wrap .we_area .es_title_area .bs_icon {display:grid;width:5rem;height:5rem;place-items:center;border-radius:1.5rem;background:color-mix(in srgb,var(--portal,#4846f5) 10%,#fff);color:var(--portal,#4846f5);font-size:2.5rem} .ws_portal_identity_wrap .we_area .es_title_area .bs_content_box .is_title {font-size:2.8rem;font-weight:800;letter-spacing:-.045em} .ws_portal_identity_wrap .we_area .es_title_area .bs_content_box .is_title a:hover {color:var(--portal)} .ws_portal_identity_wrap .we_area .es_title_area .bs_content_box .is_desc {margin-top:.4rem;color:var(--webis_muted);font-size:1.4rem} .ws_portal_identity_wrap .we_area .es_search_area {display:flex;width:34rem;height:4.6rem;align-items:center;gap:.6rem;border:.1rem solid var(--webis_line_strong);border-radius:2.3rem;background:#fff;padding:0 .5rem 0 1.6rem} .ws_portal_identity_wrap .we_area .es_search_area:focus-within {border-color:var(--portal,#4846f5)} .ws_portal_identity_wrap .we_area .es_search_area .is_input {min-width:0;flex:1;border:0;outline:0;font-size:1.4rem} .ws_portal_identity_wrap .we_area .es_search_area .is_submit_button {display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:50%;color:var(--portal,#4846f5);font-size:1.8rem} .ws_portal_identity_wrap .we_area .es_search_area .is_submit_button:hover {background:color-mix(in srgb,var(--portal,#4846f5) 10%,#fff)} .ws_portal_identity_wrap .we_area .es_search_fab_button {display:none} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - NAV * ---------------------------------------------------------------------------------------------------- */ /* [HEAD NAV] - DEFAULT */ .ws_head_nav_wrap {} .ws_head_nav_wrap .we_area {} /* [HEAD NAV] - ACTION */ .ws_head_nav_action_wrap {} /* [HEAD NAV] - BACKGROUND */ .ws_head_nav_bg_wrap {} /* [HEAD NAV] - PROGRESS */ .ws_head_nav_progress_wrap {} /* [ALL NAV] - DEFAULT */ .ws_all_nav_wrap {} .ws_all_nav_wrap .we_area {} /* [ALL NAV] - ACTION */ .ws_all_nav_action_wrap {} /* [ALL NAV] - BACKGROUND */ .ws_all_nav_bg_wrap {} /* [RESPOND NAV] - RESPOND */ .ws_respond_nav_wrap {} .ws_respond_nav_wrap .es_panel_area {} /* [RESPOND NAV] - ACTION */ .ws_respond_nav_action_wrap {} /* [RESPOND NAV] - BACKGROUND */ .ws_respond_nav_bg_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [NAV] - 서브 포털 * ---------------------------------------------------------------------------------------------------- */ .ws_portal_nav_wrap {background:#fff;border-bottom:.1rem solid var(--webis_header_line)} .ws_portal_nav_wrap .we_area {display:flex;align-items:center;gap:.4rem;min-height:5.4rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none} .ws_portal_nav_wrap .we_area::-webkit-scrollbar {display:none} .ws_portal_nav_wrap .we_area .es_link {position:relative;display:inline-flex;height:5.4rem;align-items:center;padding:0 1.4rem;color:#4a5464;font-size:1.5rem;font-weight:700} .ws_portal_nav_wrap .we_area .es_link:hover {color:var(--webis_ink)} .ws_portal_nav_wrap .we_area .es_link.wsa_active {color:var(--portal,#4846f5);font-weight:800} .ws_portal_nav_wrap .we_area .es_link.wsa_active::after {content:'';position:absolute;right:1.4rem;bottom:0;left:1.4rem;height:.3rem;border-radius:.3rem .3rem 0 0;background:var(--portal,#4846f5)} .ws_portal_subnav_wrap {background:var(--portal,#4846f5)} .ws_portal_subnav_wrap .we_area {display:flex;align-items:center;gap:.2rem;min-height:4.4rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none} .ws_portal_subnav_wrap .we_area::-webkit-scrollbar {display:none} .ws_portal_subnav_wrap .we_area .es_link {display:inline-flex;height:4.4rem;align-items:center;padding:0 1.3rem;color:rgba(255,255,255,.82);font-size:1.35rem;font-weight:600} .ws_portal_subnav_wrap .we_area .es_link:hover {color:#fff} .ws_portal_subnav_wrap .we_area .es_link.wsa_active {color:#fff;font-weight:800;box-shadow:inset 0 -.3rem 0 rgba(255,255,255,.9)} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - SEARCH * ---------------------------------------------------------------------------------------------------- */ /* [SEARCH] - LAYER */ .ws_search_layer_wrap {} .ws_search_layer_wrap .we_area {} /* ---------------------------------------------------------------------------------------------------- * * [SEARCH] - 검색 필드와 자동완성 * ---------------------------------------------------------------------------------------------------- */ .ws_search_wrap {position:relative} .ws_search_wrap .es_frame_area {display:block;border:.2rem solid var(--webis_color);border-radius:3.2rem;background:#fff;transition:box-shadow .18s ease} .ws_search_wrap .es_frame_area:focus-within {box-shadow:0 .8rem 2.8rem rgba(72,70,245,.16)} .ws_search_wrap .es_frame_area .bs_form_box {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:6rem;padding:.5rem .6rem .5rem 1.4rem} .ws_search_wrap .es_frame_area .bs_form_box .is_prefix {display:grid;width:3.8rem;height:3.8rem;place-items:center;color:var(--webis_color);font-size:2rem} .ws_search_wrap .es_frame_area .bs_form_box .is_input {width:100%;height:5rem;border:0;outline:0;background:transparent;padding:0 .7rem;font-size:1.8rem;font-weight:500;letter-spacing:-.02em} .ws_search_wrap .es_frame_area .bs_form_box .is_input::placeholder {color:#9ba4b2;font-weight:400} .ws_search_wrap .es_frame_area .bs_form_box .is_input:focus-visible {outline:0} .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field {display:flex;align-items:center;gap:.2rem} .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_keyboard_button, .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_camera_link, .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_submit_button {display:grid;width:4.2rem;height:4.2rem;place-items:center;border-radius:50%;color:#525c6d;font-size:1.9rem} .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_keyboard_button:hover, .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_camera_link:hover {background:#f1f3f7;color:var(--webis_color)} .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_submit_button {background:var(--webis_brand_gradient);color:#fff} .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_submit_button:hover {filter:brightness(1.06)} .ws_suggest_wrap {display:none;position:absolute;top:calc(100% + .8rem);right:0;left:0;z-index:110;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_xl);background:#fff;box-shadow:var(--webis_shadow_float);overflow:hidden} .ws_suggest_wrap.wsa_active {display:block} .ws_suggest_wrap .es_query_area {display:flex;align-items:center;gap:1rem;min-height:5.4rem;padding:1.2rem 2rem;border-bottom:.1rem solid var(--webis_line);color:var(--webis_ink_soft);font-size:1.45rem;font-weight:700} .ws_suggest_wrap .es_query_area .bs_icon {color:var(--webis_muted_light);font-size:1.7rem} .ws_suggest_wrap .es_query_area .bs_text {} .ws_suggest_wrap .es_section_area {padding:1.2rem 1.2rem 1.4rem} .ws_suggest_wrap .es_section_area + .es_section_area {border-top:.1rem solid var(--webis_line)} .ws_suggest_wrap .es_section_area .bs_title_box {display:flex;align-items:center;justify-content:space-between;margin:0 .8rem .6rem;color:var(--webis_muted);font-size:1.25rem;font-weight:700} .ws_suggest_wrap .es_section_area .bs_title_box .is_label {} .ws_suggest_wrap .es_section_area .bs_title_box .is_clear_button {color:var(--webis_muted_light);font-size:1.2rem} .ws_suggest_wrap .es_section_area .bs_title_box .is_clear_button:hover {color:var(--webis_ink_soft);text-decoration:underline} .ws_suggest_wrap .es_section_area .bs_item {display:grid;grid-template-columns:2.8rem minmax(0,1fr) auto;align-items:center;min-height:4.4rem;border-radius:var(--webis_radius_sm);padding:0 .9rem;color:#2c3443;font-size:1.45rem} .ws_suggest_wrap .es_section_area .bs_item:hover, .ws_suggest_wrap .es_section_area .bs_item:focus-visible {background:#f3f5f9} .ws_suggest_wrap .es_section_area .bs_item .is_icon {color:var(--webis_muted_light);font-size:1.6rem} .ws_suggest_wrap .es_section_area .bs_item .is_text mark {background:none;color:var(--webis_color);font-weight:700} .ws_suggest_wrap .es_section_area .bs_item .is_note {color:var(--webis_muted_light);font-size:1.2rem} .ws_suggest_wrap .es_section_area .bs_chip_box {display:flex;flex-wrap:wrap;gap:.6rem;padding:.4rem .8rem .6rem} .ws_suggest_wrap .es_section_area .bs_chip_box .is_chip {display:inline-flex;min-height:3.4rem;align-items:center;gap:.5rem;border:.1rem solid var(--webis_line_strong);border-radius:1.7rem;background:#fff;padding:0 1.2rem;color:#4a5464;font-size:1.3rem} .ws_suggest_wrap .es_section_area .bs_chip_box .is_chip:hover {border-color:var(--webis_color);color:var(--webis_color)} .ws_suggest_wrap .es_foot_area {display:flex;align-items:center;justify-content:space-between;border-top:.1rem solid var(--webis_line);background:#fafbfd;padding:1rem 2rem;color:var(--webis_muted_light);font-size:1.2rem} .ws_suggest_wrap .es_foot_area .bs_button:hover {color:var(--webis_ink_soft);text-decoration:underline} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - VISUAL * ---------------------------------------------------------------------------------------------------- */ /* [VISUAL] - MAIN > VISUAL */ .ws_main_visual_wrap {} /* [VISUAL] - SUB > VISUAL */ .ws_sub_visual_wrap {} .ws_sub_visual_wrap .we_area {} /* [VISUAL] - SUB > VISUAL > NAVIGATOR */ .ws_navigator_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [VISUAL] - 검색 홈 스테이지 * ---------------------------------------------------------------------------------------------------- */ .ws_stage_wrap {display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 12.4rem);padding:10vh 2rem 6rem} .ws_stage_wrap .es_brand_area {display:flex;align-items:center;gap:1.4rem;margin-bottom:3.6rem} .ws_stage_wrap .es_brand_area .bs_mark {display:grid;width:6rem;height:6rem;place-items:center;border-radius:1.8rem;background:var(--webis_brand_gradient);color:#fff;font-size:2.6rem;font-weight:800} .ws_stage_wrap .es_brand_area .bs_text {font-size:5.6rem;line-height:1;font-weight:800;letter-spacing:-.07em} .ws_stage_wrap .es_brand_area .bs_text span {color:var(--webis_color)} .ws_stage_wrap .es_search_area {position:relative;width:min(76rem,100%)} .ws_stage_wrap .es_search_area .ws_search_wrap .es_frame_area {box-shadow:0 .6rem 2.4rem rgba(25,31,46,.07)} .ws_stage_wrap .es_search_area .ws_search_wrap .es_frame_area:focus-within {box-shadow:0 1rem 3.2rem rgba(72,70,245,.18)} .ws_stage_wrap .es_search_area .ws_search_wrap .es_frame_area .bs_form_box {min-height:6.6rem} .ws_stage_wrap .es_search_area .ws_search_wrap .es_frame_area .bs_form_box .is_input {height:5.4rem;font-size:1.9rem} .ws_stage_wrap .es_dock_area {display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;width:min(84rem,100%);margin-top:3.4rem} .ws_stage_wrap .es_dock_area .bs_item {display:flex;width:9.2rem;flex-direction:column;align-items:center;gap:.9rem;border-radius:var(--webis_radius_lg);padding:1.2rem .4rem 1rem;font-size:1.3rem;font-weight:600;color:#3d4557;transition:background-color .15s ease} .ws_stage_wrap .es_dock_area .bs_item:hover {background:#f4f6f9} .ws_stage_wrap .es_dock_area .bs_item .is_icon {display:grid;width:5.4rem;height:5.4rem;place-items:center;border-radius:1.7rem;background:var(--app-bg,#eef3ff);color:var(--app-color,var(--webis_color));font-size:2.5rem;transition:transform .15s ease} .ws_stage_wrap .es_dock_area .bs_item:hover .is_icon {transform:translateY(-.2rem)} .ws_stage_wrap .es_dock_area .bs_item .is_text {} .ws_stage_wrap .es_insight_area {display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start;width:min(94rem,100%);margin-top:4.6rem} .ws_stage_wrap .es_insight_area .bs_live_box, .ws_stage_wrap .es_insight_area .bs_trend_box {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_lg);background:#fff} .ws_stage_wrap .es_insight_area .bs_live_box .is_head_field, .ws_stage_wrap .es_insight_area .bs_trend_box .is_head_field {display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:1.4rem 2rem 0} .ws_stage_wrap .es_insight_area .bs_live_box .is_head_field .ss_title, .ws_stage_wrap .es_insight_area .bs_trend_box .is_head_field .ss_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_stage_wrap .es_insight_area .bs_live_box .is_head_field .ss_time, .ws_stage_wrap .es_insight_area .bs_trend_box .is_head_field .ss_more {color:var(--webis_muted_light);font-size:1.25rem} .ws_stage_wrap .es_insight_area .bs_trend_box .is_head_field .ss_more:hover {color:var(--webis_ink_soft)} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field {display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;padding:.6rem 2rem 1.6rem} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field .ss_item {display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.6rem;align-items:center;min-height:3.9rem;font-size:1.4rem} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field .ss_item .ks_rank {font-size:1.35rem;font-weight:800;color:var(--webis_ink)} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field .ss_item:nth-child(-n+3) .ks_rank {color:var(--webis_color)} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field .ss_item .ks_keyword {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field .ss_item .ks_delta {} .ws_stage_wrap .es_insight_area .bs_trend_box .is_list_field {display:grid;align-content:start;grid-auto-rows:max-content;padding:.6rem 1.2rem 1.6rem} .ws_stage_wrap .es_insight_area .bs_trend_box .is_list_field .ss_item {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem;align-items:center;min-height:3.9rem;border-radius:var(--webis_radius_sm);padding:.1rem .8rem} .ws_stage_wrap .es_insight_area .bs_trend_box .is_list_field .ss_item:hover {background:#f4f6f9} .ws_stage_wrap .es_insight_area .bs_trend_box .is_list_field .ss_item .ks_category {min-width:5.2rem;color:var(--webis_color);font-size:1.25rem;font-style:normal;font-weight:800} .ws_stage_wrap .es_insight_area .bs_trend_box .is_list_field .ss_item .ks_title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.42rem;font-weight:600} .ws_stage_wrap .es_insight_area .bs_trend_box .is_list_field .ss_item .ks_note {color:var(--webis_muted_light);font-size:1.2rem} .ws_stage_wrap .es_notice_area {display:flex;align-items:center;gap:1rem;width:min(94rem,100%);margin-top:1.6rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_lg);background:#fafbfd;min-height:5.2rem;padding:0 2rem;color:var(--webis_ink_soft);font-size:1.35rem} .ws_stage_wrap .es_notice_area .bs_icon {color:var(--webis_color);font-size:1.7rem} .ws_stage_wrap .es_notice_area .bs_text {} .ws_stage_wrap .es_notice_area .bs_more {margin-left:auto;color:var(--webis_muted);font-size:1.25rem} .ws_stage_wrap .es_notice_area .bs_more:hover {color:var(--webis_ink)} /* 상태: 검색어 등락 */ .ks_delta.wsd_status_up, .is_delta.wsd_status_up {color:var(--webis_up);font-size:1.2rem;font-weight:700} .ks_delta.wsd_status_down, .is_delta.wsd_status_down {color:var(--webis_down);font-size:1.2rem;font-weight:700} .ks_delta.wsd_status_new, .is_delta.wsd_status_new {color:var(--webis_up);font-size:1.2rem;font-weight:700} .ks_delta.wsd_status_same, .is_delta.wsd_status_same {color:var(--webis_muted_light);font-size:1.2rem;font-weight:700} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - CONTAINER * ---------------------------------------------------------------------------------------------------- */ /* [QUICK] - DEFAULT */ .ws_quick_wrap {} /* [QUICK] - LEFT */ .ws_quick_left_wrap {} /* [QUICK] - RIGHT */ .ws_quick_right_wrap {} /* [MAIN CONTAINER] - CONTENT */ .ws_main_content_wrap {} /* [MAIN CONTAINER] - COMPONENT PROVIDER SAMPLE */ .ws_component_provider_sample_wrap {width:calc(100% - 3rem);max-width:72rem;padding:2rem;margin:4rem auto;border:0.1rem solid var(--webis_color_100);border-radius:1.2rem;background-color:#fff} .ws_component_provider_sample_wrap .es_heading_area {margin-bottom:1.6rem} .ws_component_provider_sample_wrap .es_heading_area .bs_title {font-size:2rem;line-height:1.4;color:var(--webis_color_900)} .ws_component_provider_sample_wrap .es_heading_area .bs_desc {margin-top:0.6rem;font-size:1.3rem;line-height:1.6;color:var(--webis_color_700)} .ws_component_provider_sample_wrap .es_button_area {display:flex;flex-wrap:wrap;gap:0.8rem} .ws_component_provider_sample_wrap .es_button_area .bs_wsd_button {width:100%} /* [SUB CONTAINER] - NAVI */ .ws_sub_nav_wrap {} /* [SUB CONTAINER] - LAYOUT */ .ws_sub_layout_wrap {} /* [SUB CONTAINER] - LAYOUT > CONTENT */ .ws_sub_content_wrap {} /* [SUB CONTAINER] - LAYOUT > CONTENT > HEAD */ .ws_sub_head_wrap {} /* [SUB CONTAINER] - LAYOUT > CONTENT > TITLE */ .ws_sub_title_wrap {} /* [SUB CONTAINER] - LAYOUT > CONTENT > TAB */ .ws_sub_tab_nav_wrap {} /* [SUB CONTAINER] - LAYOUT > CONTENT > BODY */ .ws_sub_body_wrap {} /* [SUB CONTAINER] - LAYOUT > CONTENT > FOOT */ .ws_sub_foot_wrap {} /* [SUB CONTAINER] - LAYOUT > ASIDE */ .ws_sub_aside_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [CONTAINER] - 서브 포털 본문 * ---------------------------------------------------------------------------------------------------- */ .ws_portal_main_wrap {padding:2rem 0 7rem} .ws_portal_main_wrap .we_area {display:grid;gap:1.2rem} .ws_portal_main_wrap .we_area .es_body_area {display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:1.2rem;align-items:start} .ws_portal_main_wrap .we_area .es_body_area .bs_stack_box {display:grid;gap:1.2rem;min-width:0} .ws_portal_main_wrap .we_area .es_body_area .bs_aside_box {display:grid;gap:1.2rem;min-width:0} /* 포털 박스 프레임 그룹 */ .ws_job_list_wrap, .ws_job_category_wrap, .ws_job_news_wrap, .ws_job_board_wrap, .ws_deadline_wrap, .ws_hot_jobs_wrap, .ws_job_alert_wrap, .ws_related_service_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_job_category_wrap .es_head_area, .ws_job_news_wrap .es_head_area, .ws_job_board_wrap .es_head_area, .ws_deadline_wrap .es_head_area, .ws_hot_jobs_wrap .es_head_area, .ws_job_alert_wrap .es_head_area, .ws_related_service_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_job_category_wrap .es_head_area .bs_title, .ws_job_news_wrap .es_head_area .bs_title, .ws_job_board_wrap .es_head_area .bs_title, .ws_deadline_wrap .es_head_area .bs_title, .ws_hot_jobs_wrap .es_head_area .bs_title, .ws_job_alert_wrap .es_head_area .bs_title, .ws_related_service_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_job_category_wrap .es_head_area .bs_more, .ws_job_news_wrap .es_head_area .bs_more, .ws_job_board_wrap .es_head_area .bs_more, .ws_deadline_wrap .es_head_area .bs_time, .ws_hot_jobs_wrap .es_head_area .bs_time {color:var(--webis_muted);font-size:1.3rem} .ws_job_category_wrap .es_head_area .bs_more:hover, .ws_job_news_wrap .es_head_area .bs_more:hover, .ws_job_board_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - SERP 골격 + 모듈 공통 프레임 * ---------------------------------------------------------------------------------------------------- */ .ws_serp_wrap {padding:2rem 0 6rem} .ws_serp_wrap .we_area {display:grid;grid-template-columns:minmax(0,1fr) var(--webis_side_column);gap:2.4rem;align-items:start} .ws_serp_wrap .we_area .es_content_area {display:grid;gap:1.2rem;min-width:0} .ws_serp_wrap .we_area .es_content_area > * {min-width:0} .ws_serp_wrap .we_area .es_aside_area {display:grid;gap:1.2rem;min-width:0} /* 모듈 프레임 그룹 (SERP + 레일) */ .ws_related_wrap, .ws_kpanel_wrap, .ws_web_result_wrap, .ws_place_wrap, .ws_image_wrap, .ws_news_wrap, .ws_blog_wrap, .ws_webdoc_wrap, .ws_video_wrap, .ws_trend_wrap, .ws_category_wrap, .ws_service_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} /* 모듈 헤드 그룹 */ .ws_kpanel_wrap .es_head_area, .ws_place_wrap .es_head_area, .ws_image_wrap .es_head_area, .ws_news_wrap .es_head_area, .ws_blog_wrap .es_head_area, .ws_webdoc_wrap .es_head_area, .ws_video_wrap .es_head_area, .ws_trend_wrap .es_head_area, .ws_category_wrap .es_head_area, .ws_service_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.4rem;padding:0 2.2rem} .ws_kpanel_wrap .es_head_area .bs_title, .ws_place_wrap .es_head_area .bs_title, .ws_image_wrap .es_head_area .bs_title, .ws_news_wrap .es_head_area .bs_title, .ws_blog_wrap .es_head_area .bs_title, .ws_webdoc_wrap .es_head_area .bs_title, .ws_video_wrap .es_head_area .bs_title, .ws_trend_wrap .es_head_area .bs_title, .ws_category_wrap .es_head_area .bs_title, .ws_service_wrap .es_head_area .bs_title {font-size:1.65rem;font-weight:800;letter-spacing:-.03em} .ws_place_wrap .es_head_area .bs_title em {margin-left:.6rem;color:var(--webis_color);font-style:normal;font-size:1.3rem;font-weight:700} .ws_kpanel_wrap .es_head_area .bs_note, .ws_place_wrap .es_head_area .bs_more, .ws_image_wrap .es_head_area .bs_more, .ws_news_wrap .es_head_area .bs_more, .ws_blog_wrap .es_head_area .bs_more, .ws_webdoc_wrap .es_head_area .bs_more, .ws_video_wrap .es_head_area .bs_more, .ws_trend_wrap .es_head_area .bs_time, .ws_category_wrap .es_head_area .bs_time, .ws_service_wrap .es_head_area .bs_more {color:var(--webis_muted);font-size:1.3rem} .ws_place_wrap .es_head_area .bs_more:hover, .ws_image_wrap .es_head_area .bs_more:hover, .ws_news_wrap .es_head_area .bs_more:hover, .ws_blog_wrap .es_head_area .bs_more:hover, .ws_webdoc_wrap .es_head_area .bs_more:hover, .ws_video_wrap .es_head_area .bs_more:hover, .ws_service_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} /* 더보기 행 그룹 */ .ws_web_result_wrap .es_more_link, .ws_place_wrap .es_more_link, .ws_blog_wrap .es_more_link, .ws_webdoc_wrap .es_more_link, .ws_job_list_wrap .es_more_link {display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:5.2rem;border-top:.1rem solid #f0f2f5;color:#525c6d;font-size:1.4rem;font-weight:600} .ws_web_result_wrap .es_more_link:hover, .ws_place_wrap .es_more_link:hover, .ws_blog_wrap .es_more_link:hover, .ws_webdoc_wrap .es_more_link:hover, .ws_job_list_wrap .es_more_link:hover {background:#fafbfd;color:var(--webis_ink)} .ws_web_result_wrap .es_more_link i, .ws_place_wrap .es_more_link i, .ws_blog_wrap .es_more_link i, .ws_webdoc_wrap .es_more_link i, .ws_job_list_wrap .es_more_link i {font-size:1.5rem;color:var(--webis_muted_light)} /* [10-1] 연관 검색어 */ .ws_related_wrap .es_list_area {display:flex;align-items:center;gap:.4rem;min-height:5.6rem;padding:0 2.2rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none} .ws_related_wrap .es_list_area::-webkit-scrollbar {display:none} .ws_related_wrap .es_list_area .bs_label {margin-right:1rem;color:var(--webis_ink);font-size:1.4rem;font-weight:800} .ws_related_wrap .es_list_area .bs_link {display:inline-flex;height:3.4rem;align-items:center;border-radius:1.7rem;padding:0 1.2rem;color:var(--webis_link);font-size:1.4rem} .ws_related_wrap .es_list_area .bs_link:hover {background:#f2f6ff;text-decoration:underline} .ws_related_wrap .es_list_area .bs_link.wsd_type_more {margin-left:auto;color:var(--webis_muted_light);font-size:1.25rem} /* [10-2] 기업정보 지식패널 */ .ws_kpanel_wrap .es_body_area {display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:2.4rem;padding:2rem 2.2rem 2.2rem} .ws_kpanel_wrap .es_body_area .bs_info_box {} .ws_kpanel_wrap .es_body_area .bs_info_box .is_head_field {display:flex;align-items:center;gap:1.2rem} .ws_kpanel_wrap .es_body_area .bs_info_box .is_head_field .ss_logo {display:grid;width:5.2rem;height:5.2rem;place-items:center;border-radius:1.5rem;background:var(--webis_color_50);color:var(--webis_color);font-size:2.2rem;font-weight:800;flex:0 0 auto} .ws_kpanel_wrap .es_body_area .bs_info_box .is_head_field .ss_content_zone {min-width:0} .ws_kpanel_wrap .es_body_area .bs_info_box .is_head_field .ss_content_zone .ks_title {font-size:2rem;font-weight:800;letter-spacing:-.03em} .ws_kpanel_wrap .es_body_area .bs_info_box .is_head_field .ss_content_zone .ks_title small {margin-left:.6rem;color:var(--webis_muted_light);font-size:1.3rem;font-weight:500} .ws_kpanel_wrap .es_body_area .bs_info_box .is_head_field .ss_content_zone .ks_desc {margin-top:.2rem;color:var(--webis_muted);font-size:1.3rem} .ws_kpanel_wrap .es_body_area .bs_info_box .is_desc {margin-top:1.2rem;color:#4a5464;font-size:1.42rem;line-height:1.7} .ws_kpanel_wrap .es_body_area .bs_info_box .is_spec_field {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.8rem;margin-top:1rem} .ws_kpanel_wrap .es_body_area .bs_info_box .is_spec_field .ss_item {display:flex;align-items:center;gap:1.2rem;min-height:3.8rem;border-bottom:.1rem solid #f0f2f5;font-size:1.35rem} .ws_kpanel_wrap .es_body_area .bs_info_box .is_spec_field .ss_item .ks_label {min-width:6.4rem;color:var(--webis_muted);font-weight:600} .ws_kpanel_wrap .es_body_area .bs_info_box .is_spec_field .ss_item .ks_value {min-width:0;overflow:hidden;color:var(--webis_ink);font-weight:600;text-overflow:ellipsis;white-space:nowrap} .ws_kpanel_wrap .es_body_area .bs_info_box .is_spec_field .ss_item .ks_value a {color:var(--webis_link)} .ws_kpanel_wrap .es_body_area .bs_info_box .is_spec_field .ss_item .ks_value a:hover {text-decoration:underline} .ws_kpanel_wrap .es_body_area .bs_info_box .is_action_field {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem} .ws_kpanel_wrap .es_body_area .bs_media_box {display:grid;gap:.8rem;align-content:start} .ws_kpanel_wrap .es_body_area .bs_media_box .is_link {position:relative;overflow:hidden;border-radius:var(--webis_radius_sm);background:#eef0f4} .ws_kpanel_wrap .es_body_area .bs_media_box .is_link img {width:100%;aspect-ratio:16/10;object-fit:cover} .ws_kpanel_wrap .es_body_area .bs_media_box .is_link small {position:absolute;right:0;bottom:0;left:0;padding:1.6rem .8rem .6rem;background:linear-gradient(transparent,rgba(10,13,22,.72));color:#fff;font-size:1.2rem;text-align:right} /* [10-3] 정렬 바 + 웹 결과 리스트 (웹 결과/블로그·카페/웹문서 공용) */ .ws_web_result_wrap .es_sort_area {display:flex;align-items:center;gap:1.6rem;min-height:5.4rem;padding:0 2.2rem;border-bottom:.1rem solid #f0f2f5;color:var(--webis_muted);font-size:1.35rem} .ws_web_result_wrap .es_sort_area .bs_group_box {display:flex;gap:.2rem} .ws_web_result_wrap .es_sort_area .bs_group_box .is_button {position:relative;display:inline-flex;align-items:center;gap:.4rem;border-radius:.6rem;padding:.5rem 1rem;color:var(--webis_muted)} .ws_web_result_wrap .es_sort_area .bs_group_box .is_button:hover {color:var(--webis_ink)} .ws_web_result_wrap .es_sort_area .bs_group_box .is_button.wsa_active {color:var(--webis_ink);font-weight:800} .ws_web_result_wrap .es_sort_area .bs_group_box .is_button.wsa_active::before {content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--webis_color)} .ws_web_result_wrap .es_sort_area .bs_side_box {margin-left:auto;display:flex;align-items:center;gap:1.4rem} .ws_web_result_wrap .es_sort_area .bs_side_box .is_link:hover {color:var(--webis_ink);text-decoration:underline} .ws_web_result_wrap .es_list_area, .ws_blog_wrap .es_list_area, .ws_webdoc_wrap .es_list_area {display:grid;min-width:0;padding:0 2.2rem} .ws_web_result_wrap .es_list_area .bs_item, .ws_blog_wrap .es_list_area .bs_item, .ws_webdoc_wrap .es_list_area .bs_item {position:relative;min-width:0;padding:2.1rem 0;border-bottom:.1rem solid #f0f2f5} .ws_web_result_wrap .es_list_area .bs_item:last-child, .ws_blog_wrap .es_list_area .bs_item:last-child, .ws_webdoc_wrap .es_list_area .bs_item:last-child {border-bottom:0} .ws_web_result_wrap .es_list_area .bs_item:has(> .is_thumb) {display:grid;grid-template-columns:minmax(0,1fr) 12rem;gap:1.8rem;align-items:start} .ws_web_result_wrap .es_list_area .bs_item .is_thumb {width:12rem;height:9rem;border-radius:var(--webis_radius_sm);object-fit:cover;background:#eef0f4} .ws_web_result_wrap .es_list_area .bs_item .is_source_box, .ws_blog_wrap .es_list_area .bs_item .is_source_box, .ws_webdoc_wrap .es_list_area .bs_item .is_source_box {display:flex;min-width:0;align-items:center;gap:.8rem;color:#59626f;font-size:1.3rem} .ws_web_result_wrap .es_list_area .bs_item .is_source_box .ss_icon, .ws_blog_wrap .es_list_area .bs_item .is_source_box .ss_icon, .ws_webdoc_wrap .es_list_area .bs_item .is_source_box .ss_icon {display:grid;width:2.2rem;height:2.2rem;place-items:center;border-radius:50%;background:#eef3ff;color:#3157d4;font-size:1.2rem;font-weight:800;flex:0 0 auto} .ws_web_result_wrap .es_list_area .bs_item .is_source_box .ss_name, .ws_blog_wrap .es_list_area .bs_item .is_source_box .ss_name, .ws_webdoc_wrap .es_list_area .bs_item .is_source_box .ss_name {font-weight:700;color:var(--webis_ink_soft)} .ws_web_result_wrap .es_list_area .bs_item .is_source_box .ss_domain, .ws_web_result_wrap .es_list_area .bs_item .is_source_box .ss_time, .ws_blog_wrap .es_list_area .bs_item .is_source_box .ss_time, .ws_webdoc_wrap .es_list_area .bs_item .is_source_box .ss_time {color:var(--webis_muted_light);font-size:1.25rem} .ws_web_result_wrap .es_list_area .bs_item .is_source_box .ss_domain {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws_web_result_wrap .es_list_area .bs_item .is_title, .ws_blog_wrap .es_list_area .bs_item .is_title, .ws_webdoc_wrap .es_list_area .bs_item .is_title {display:inline-block;max-width:100%;margin-top:.7rem;color:var(--webis_link);font-size:1.8rem;font-weight:500;line-height:1.45;letter-spacing:-.02em;overflow-wrap:anywhere} .ws_web_result_wrap .es_list_area .bs_item .is_title:hover, .ws_blog_wrap .es_list_area .bs_item .is_title:hover, .ws_webdoc_wrap .es_list_area .bs_item .is_title:hover {text-decoration:underline;text-underline-offset:.3rem} .ws_web_result_wrap .es_list_area .bs_item .is_title:visited, .ws_blog_wrap .es_list_area .bs_item .is_title:visited, .ws_webdoc_wrap .es_list_area .bs_item .is_title:visited {color:#7b4dc4} .ws_web_result_wrap .es_list_area .bs_item .is_url {min-width:0;margin-top:.4rem;color:var(--webis_url);font-size:1.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws_web_result_wrap .es_list_area .bs_item .is_desc, .ws_blog_wrap .es_list_area .bs_item .is_desc, .ws_webdoc_wrap .es_list_area .bs_item .is_desc {min-width:0;margin-top:.6rem;color:#4a5464;font-size:1.42rem;line-height:1.7;overflow-wrap:anywhere} .ws_web_result_wrap .es_list_area .bs_item .is_sitelink_box {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 2.4rem;margin-top:1.2rem} .ws_web_result_wrap .es_list_area .bs_item .is_sitelink_box .ss_link {display:inline-flex;min-height:3.4rem;align-items:center;color:var(--webis_link);font-size:1.35rem} .ws_web_result_wrap .es_list_area .bs_item .is_sitelink_box .ss_link:hover {text-decoration:underline} .ws_web_result_wrap .es_list_area .bs_item .is_sitelink_box .ss_link small {margin-left:.6rem;color:var(--webis_muted_light);font-size:1.25rem} /* [10-4] 장소 모듈 */ .ws_place_wrap .es_map_area {position:relative;height:24rem;background:#eef1ea;overflow:hidden} .ws_place_wrap .es_map_area svg {position:absolute;inset:0;width:100%;height:100%} .ws_place_wrap .es_map_area .bs_marker {position:absolute;z-index:4;display:grid;width:3.8rem;height:3.8rem;place-items:center;border:.3rem solid #fff;border-radius:50% 50% 50% 0;background:var(--portal,var(--webis_color));color:#fff;box-shadow:0 .6rem 1.4rem rgba(20,26,48,.28);transform:rotate(-45deg);font-size:1.6rem} .ws_place_wrap .es_map_area .bs_marker i {transform:rotate(45deg)} .ws_place_wrap .es_map_area .bs_tag {position:absolute;z-index:4;transform:translate(-50%,-120%);border:.1rem solid #d5dbe4;border-radius:.6rem;background:#fff;padding:.4rem .8rem;font-size:1.25rem;font-weight:800;box-shadow:var(--webis_shadow_raise);white-space:nowrap;font-variant-numeric:tabular-nums} .ws_place_wrap .es_map_area .bs_tag.wsa_active {border-color:var(--portal,var(--webis_color));background:var(--portal,var(--webis_color));color:#fff} .ws_place_wrap .es_list_area {display:grid;padding:0 2.2rem} .ws_place_wrap .es_list_area .bs_item {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem;align-items:center;padding:1.6rem 0;border-bottom:.1rem solid #f0f2f5} .ws_place_wrap .es_list_area .bs_item:last-child {border-bottom:0} .ws_place_wrap .es_list_area .bs_item .is_info_box .ss_title {font-size:1.6rem;font-weight:700} .ws_place_wrap .es_list_area .bs_item .is_info_box .ss_title small {margin-left:.6rem;color:var(--webis_muted_light);font-size:1.25rem;font-weight:500} .ws_place_wrap .es_list_area .bs_item .is_info_box .ss_meta_field {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:.5rem;color:var(--webis_muted);font-size:1.3rem} .ws_place_wrap .es_list_area .bs_item .is_info_box .ss_meta_field .ks_meta.wsd_status_rating {color:#f5a623;font-weight:700} .ws_place_wrap .es_list_area .bs_item .is_info_box .ss_meta_field .ks_meta.wsd_type_tel {color:var(--webis_url);font-weight:700} .ws_place_wrap .es_list_area .bs_item .is_action_box {display:flex;align-items:center;gap:.6rem} /* 칩 그룹 (지식패널 액션 · 장소 액션 · 히어로 태그 · 필터) */ .ws_kpanel_wrap .es_body_area .bs_info_box .is_action_field .ss_chip, .ws_place_wrap .es_list_area .bs_item .is_action_box .ss_chip, .ws_service_hero_wrap .es_search_area .bs_chip_box .is_chip, .ws_job_list_wrap .es_filter_area .bs_chip {display:inline-flex;min-height:3.4rem;align-items:center;gap:.5rem;border:.1rem solid var(--webis_line_strong);border-radius:1.7rem;background:#fff;padding:0 1.3rem;color:#4a5464;font-size:1.3rem;font-weight:600;transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer} .ws_kpanel_wrap .es_body_area .bs_info_box .is_action_field .ss_chip:hover, .ws_place_wrap .es_list_area .bs_item .is_action_box .ss_chip:hover, .ws_service_hero_wrap .es_search_area .bs_chip_box .is_chip:hover, .ws_job_list_wrap .es_filter_area .bs_chip:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .ws_job_list_wrap .es_filter_area .bs_chip.wsa_active {border-color:var(--webis_color);background:var(--webis_color_50);color:var(--webis_color_550)} .ws_place_wrap .es_list_area .bs_item .is_action_box .ss_chip {min-height:3.6rem} /* [10-5] 이미지 스트립 / 뉴스 / 동영상 */ .ws_image_wrap .es_strip_area {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;padding:0 2.2rem 2rem} .ws_image_wrap .es_strip_area .bs_link {position:relative;overflow:hidden;border-radius:var(--webis_radius_sm);background:#eceff3;aspect-ratio:4/3} .ws_image_wrap .es_strip_area .bs_link img {width:100%;height:100%;object-fit:cover;transition:transform .2s ease} .ws_image_wrap .es_strip_area .bs_link:hover img {transform:scale(1.04)} .ws_news_wrap .es_list_area {display:grid;padding:0 2.2rem 2rem} .ws_news_wrap .es_list_area .bs_item {display:grid;grid-template-columns:minmax(0,1fr) 11.2rem;gap:1.8rem;padding:1.7rem 0;border-bottom:.1rem solid #f0f2f5} .ws_news_wrap .es_list_area .bs_item:last-child {border-bottom:0} .ws_news_wrap .es_list_area .bs_item .is_content_box .ss_title a {color:var(--webis_ink);font-size:1.6rem;font-weight:700;line-height:1.5} .ws_news_wrap .es_list_area .bs_item .is_content_box .ss_title a:hover {text-decoration:underline;color:var(--webis_link)} .ws_news_wrap .es_list_area .bs_item .is_content_box .ss_desc {margin-top:.5rem;color:#59626f;font-size:1.38rem;line-height:1.62;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ws_news_wrap .es_list_area .bs_item .is_content_box .ss_note {display:block;margin-top:.6rem;color:var(--webis_muted_light);font-size:1.25rem} .ws_news_wrap .es_list_area .bs_item .is_thumb {width:11.2rem;height:7.8rem;border-radius:var(--webis_radius_sm);object-fit:cover} .ws_video_wrap .es_grid_area {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;padding:0 2.2rem 2rem} .ws_video_wrap .es_grid_area .bs_item, .ws_video_result_wrap .es_grid_area .bs_item {display:flex;min-width:0;flex-direction:column;align-items:stretch} .ws_video_wrap .es_grid_area .bs_item .is_thumb_box, .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box {position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--webis_radius_md);aspect-ratio:16/9;background:#e8ecf1} .ws_video_wrap .es_grid_area .bs_item .is_thumb_box img, .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease} .ws_video_wrap .es_grid_area .bs_item:hover .is_thumb_box img, .ws_video_result_wrap .es_grid_area .bs_item:hover .is_thumb_box img {transform:scale(1.025)} .ws_video_wrap .es_grid_area .bs_item .is_thumb_box .ss_play, .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box .ss_play {position:absolute;top:50%;left:50%;display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:50%;background:rgba(10,13,22,.66);color:#fff;transform:translate(-50%,-50%);font-size:1.5rem} .ws_video_wrap .es_grid_area .bs_item .is_thumb_box .ss_time, .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box .ss_time {position:absolute;right:.7rem;bottom:.7rem;border-radius:.4rem;background:rgba(12,16,26,.78);padding:.2rem .6rem;color:#fff;font-size:1.2rem;font-weight:600} .ws_video_wrap .es_grid_area .bs_item .is_title, .ws_video_result_wrap .es_grid_area .bs_item .is_title {display:block;min-width:0;margin-top:1rem;font-size:1.4rem;font-weight:600;line-height:1.5;overflow-wrap:anywhere} .ws_video_wrap .es_grid_area .bs_item:hover .is_title, .ws_video_result_wrap .es_grid_area .bs_item:hover .is_title {color:var(--webis_link);text-decoration:underline} .ws_video_wrap .es_grid_area .bs_item .is_note, .ws_video_result_wrap .es_grid_area .bs_item .is_note {display:block;min-width:0;margin-top:.5rem;color:var(--webis_muted_light);font-size:1.25rem;line-height:1.5;overflow-wrap:anywhere} /* [10-6] 페이지네이션 */ .ws_pagination_wrap {} .ws_pagination_wrap.wsd_card_footer {border-top:.1rem solid #f0f2f5} .ws_pagination_wrap .es_page_area {display:flex;align-items:center;justify-content:center;gap:.2rem;padding:2rem 1.6rem} .ws_pagination_wrap .es_page_area .bs_link {display:grid;min-width:3.6rem;height:3.6rem;place-items:center;border-radius:var(--webis_radius_sm);padding:0 .6rem;color:#525c6d;font-size:1.4rem} .ws_pagination_wrap .es_page_area .bs_link:hover {background:#eceef2;color:var(--webis_ink)} .ws_pagination_wrap .es_page_area .bs_link.wsa_active {color:var(--webis_color);font-weight:800;background:var(--webis_color_50)} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 레일 모듈 (실시간 트렌드 · 분야별 · 서비스 링크) * ---------------------------------------------------------------------------------------------------- */ .ws_trend_wrap .es_list_area, .ws_category_wrap .es_list_area {display:grid;padding:.4rem 1rem 1rem} .ws_trend_wrap .es_list_area .bs_item, .ws_category_wrap .es_list_area .bs_item {display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.6rem;align-items:center;min-height:3.9rem;border-radius:var(--webis_radius_sm);padding:0 1.2rem;font-size:1.4rem} .ws_trend_wrap .es_list_area .bs_item:hover, .ws_category_wrap .es_list_area .bs_item:hover {background:#f4f6f9} .ws_trend_wrap .es_list_area .bs_item .is_rank, .ws_category_wrap .es_list_area .bs_item .is_rank {font-size:1.35rem;font-weight:800} .ws_trend_wrap .es_list_area > .bs_item:nth-child(-n+3) .is_rank, .ws_category_wrap .es_list_area > .bs_item:nth-child(-n+3) .is_rank, .ws_trend_wrap .es_list_area > li:nth-child(-n+3) > .bs_item .is_rank, .ws_category_wrap .es_list_area > li:nth-child(-n+3) > .bs_item .is_rank {color:var(--webis_color)} .ws_trend_wrap .es_list_area .bs_item .is_keyword, .ws_category_wrap .es_list_area .bs_item .is_keyword {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws_category_wrap .es_tab_area {display:flex;gap:.4rem;padding:0 2rem 1rem;border-bottom:.1rem solid #f0f2f5} .ws_category_wrap .es_tab_area .bs_button {position:relative;padding:.4rem .2rem 1rem;margin-right:1.2rem;color:var(--webis_muted);font-size:1.35rem;font-weight:600} .ws_category_wrap .es_tab_area .bs_button:hover {color:var(--webis_ink)} .ws_category_wrap .es_tab_area .bs_button.wsa_active {color:var(--webis_ink);font-weight:800} .ws_category_wrap .es_tab_area .bs_button.wsa_active::after {content:'';position:absolute;right:0;bottom:-.1rem;left:0;height:.2rem;background:var(--webis_ink)} .ws_service_wrap .es_grid_area, .ws_related_service_wrap .es_grid_area, .ws_job_category_wrap .es_grid_area {display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;padding:.6rem 1.2rem 1.4rem} .ws_job_category_wrap .es_grid_area {grid-template-columns:repeat(4,1fr)} .ws_related_service_wrap .es_grid_area {grid-template-columns:1fr} .ws_service_wrap .es_grid_area .bs_link, .ws_related_service_wrap .es_grid_area .bs_link, .ws_job_category_wrap .es_grid_area .bs_link {display:flex;align-items:center;gap:.9rem;min-height:5rem;border-radius:var(--webis_radius_sm);padding:.6rem .9rem;font-size:1.35rem;font-weight:600;color:#3d4557} .ws_service_wrap .es_grid_area .bs_link:hover, .ws_related_service_wrap .es_grid_area .bs_link:hover, .ws_job_category_wrap .es_grid_area .bs_link:hover {background:#f4f6f9;color:var(--webis_ink)} .ws_service_wrap .es_grid_area .bs_link .is_icon, .ws_related_service_wrap .es_grid_area .bs_link .is_icon, .ws_job_category_wrap .es_grid_area .bs_link .is_icon {display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:1.1rem;background:color-mix(in srgb,var(--service,#4846f5) 10%,#fff);color:var(--service,#4846f5);font-size:1.7rem;flex:0 0 auto} .ws_serp_wrap .we_area .es_aside_area .bs_foot_box {display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:1rem 0 0;color:var(--webis_muted_light);font-size:1.2rem} .ws_serp_wrap .we_area .es_aside_area .bs_foot_box .is_link:hover {color:var(--webis_ink_soft)} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 일자리 서비스 (히어로 · 공고 · 직종 · 뉴스 · 커뮤니티 · 랭킹 · 배너) * ---------------------------------------------------------------------------------------------------- */ .ws_service_hero_wrap {display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:1.2rem} .ws_service_hero_wrap .es_search_area {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:2.4rem} .ws_service_hero_wrap .es_search_area .bs_title {font-size:2rem;font-weight:800;letter-spacing:-.035em} .ws_service_hero_wrap .es_search_area .bs_desc {margin-top:.5rem;color:var(--webis_muted);font-size:1.4rem} .ws_service_hero_wrap .es_search_area .bs_form_box {display:flex;gap:.8rem;margin-top:1.8rem} .ws_service_hero_wrap .es_search_area .bs_form_box .is_select {flex:0 0 auto;min-width:12rem;height:5.2rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.2rem;font-size:1.45rem} .ws_service_hero_wrap .es_search_area .bs_form_box .is_select:focus {border-color:var(--portal,var(--webis_color));outline:0} .ws_service_hero_wrap .es_search_area .bs_form_box .is_input {min-width:0;flex:1;height:5.2rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);padding:0 1.6rem;outline:0;font-size:1.5rem} .ws_service_hero_wrap .es_search_area .bs_form_box .is_input:focus {border-color:var(--portal)} .ws_service_hero_wrap .es_search_area .bs_form_box .is_submit_button {display:inline-flex;align-items:center;gap:.5rem;height:5.2rem;border-radius:var(--webis_radius_sm);background:var(--portal);padding:0 2rem;color:#fff;font-size:1.5rem;font-weight:700} .ws_service_hero_wrap .es_search_area .bs_form_box .is_submit_button:hover {filter:brightness(.94)} .ws_service_hero_wrap .es_search_area .bs_chip_box {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} .ws_job_list_wrap .es_filter_area {display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:1.4rem 2rem;border-bottom:.1rem solid #f0f2f5} .ws_job_list_wrap .es_filter_area .bs_side_box {margin-left:auto;display:flex;align-items:center;gap:1rem;color:var(--webis_muted);font-size:1.3rem} .ws_job_list_wrap .es_list_area {display:grid} .ws_job_list_wrap .es_list_area .bs_item {display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:1.6rem;align-items:center;padding:1.7rem 2rem;border-bottom:.1rem solid #f0f2f5} .ws_job_list_wrap .es_list_area .bs_item:last-child {border-bottom:0} .ws_job_list_wrap .es_list_area .bs_item:hover {background:#fafbfd} .ws_job_list_wrap .es_list_area .bs_item .is_info_box .ss_org_field {display:flex;align-items:center;gap:.7rem;color:#59626f;font-size:1.3rem} .ws_job_list_wrap .es_list_area .bs_item .is_info_box .ss_org_field .ks_icon {display:grid;width:2.2rem;height:2.2rem;place-items:center;border-radius:.7rem;background:color-mix(in srgb,var(--portal,#079965) 10%,#fff);color:var(--portal,#079965);font-size:1.2rem} .ws_job_list_wrap .es_list_area .bs_item .is_info_box .ss_org_field .ks_name {font-weight:700} .ws_job_list_wrap .es_list_area .bs_item .is_info_box .ss_title a {display:inline-block;margin-top:.5rem;font-size:1.65rem;font-weight:700;line-height:1.45} .ws_job_list_wrap .es_list_area .bs_item .is_info_box .ss_title a:hover {color:var(--webis_link);text-decoration:underline} .ws_job_list_wrap .es_list_area .bs_item .is_info_box .ss_meta_field {display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.7rem;color:var(--webis_muted);font-size:1.3rem} .ws_job_list_wrap .es_list_area .bs_item .is_side_box {text-align:right} .ws_job_list_wrap .es_list_area .bs_item .is_side_box .ss_pay {color:var(--portal,#079965);font-size:1.5rem;font-weight:800} .ws_job_list_wrap .es_list_area .bs_item .is_side_box .ss_due {display:block;margin-top:.4rem;color:var(--webis_muted_light);font-size:1.25rem} .ws_job_list_wrap .es_list_area .bs_item .is_side_box .ss_due.wsd_status_due {color:var(--webis_up);font-weight:700} .ws_job_news_wrap .es_list_area {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;padding:1rem 2rem 1.4rem} .ws_job_news_wrap .es_list_area .bs_list_box {display:grid} .ws_job_news_wrap .es_list_area .bs_list_box .is_item {border-bottom:.1rem solid #f0f2f5} .ws_job_news_wrap .es_list_area .bs_list_box .is_item:last-child {border-bottom:0} .ws_job_news_wrap .es_list_area .bs_list_box .is_item .ss_link {display:flex;align-items:center;gap:.8rem;min-height:4.3rem;font-size:1.42rem} .ws_job_news_wrap .es_list_area .bs_list_box .is_item .ss_link:hover {color:var(--webis_link);text-decoration:underline} .ws_job_news_wrap .es_list_area .bs_list_box .is_item .ss_link::before {content:'';width:.4rem;height:.4rem;border-radius:50%;background:#c3cad5;flex:0 0 auto} .ws_job_news_wrap .es_list_area .bs_list_box .is_item .ss_link small {margin-left:auto;color:var(--webis_muted_light);font-size:1.25rem;flex:0 0 auto} .ws_job_board_wrap .es_list_area {display:grid;padding:.4rem 1.2rem 1.2rem} .ws_job_board_wrap .es_list_area .bs_link {display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:1rem;align-items:center;min-height:4.4rem;border-radius:var(--webis_radius_sm);padding:0 1rem;font-size:1.42rem} .ws_job_board_wrap .es_list_area .bs_link:hover {background:#f4f6f9} .ws_job_board_wrap .es_list_area .bs_link .is_title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .ws_job_board_wrap .es_list_area .bs_link .is_title em {margin-left:.5rem;color:var(--webis_up);font-size:1.25rem;font-style:normal;font-weight:800} .ws_job_board_wrap .es_list_area .bs_link .is_meta {display:flex;gap:1rem;color:var(--webis_muted);font-size:1.25rem;white-space:nowrap} .ws_job_board_wrap .es_list_area .bs_link .is_time {color:var(--webis_muted_light);font-size:1.25rem;white-space:nowrap} /* 배지 그룹 */ .ws_job_board_wrap .es_list_area .bs_link .is_badge, .ws_job_alert_wrap .es_list_area .bs_link .is_badge {display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700;flex:0 0 auto} .ws_job_board_wrap .es_list_area .bs_link .is_badge.wsd_status_new, .ws_job_alert_wrap .es_list_area .bs_link .is_badge.wsd_status_new {background:#fdeeee;color:var(--webis_up)} .ws_job_board_wrap .es_list_area .bs_link .is_badge.wsd_status_hot, .ws_job_alert_wrap .es_list_area .bs_link .is_badge.wsd_status_hot {background:var(--webis_color_50);color:var(--webis_color_550)} .ws_deadline_wrap .es_list_area, .ws_hot_jobs_wrap .es_list_area {display:grid;padding:.8rem 1.2rem 1.2rem} .ws_deadline_wrap .es_list_area .bs_item, .ws_hot_jobs_wrap .es_list_area .bs_item {display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.6rem;align-items:center;min-height:3.9rem;border-radius:var(--webis_radius_sm);padding:0 .8rem;font-size:1.38rem} .ws_deadline_wrap .es_list_area .bs_item:hover, .ws_hot_jobs_wrap .es_list_area .bs_item:hover {background:#f4f6f9} .ws_deadline_wrap .es_list_area .bs_item .is_rank, .ws_hot_jobs_wrap .es_list_area .bs_item .is_rank {font-size:1.3rem;font-weight:800} .ws_deadline_wrap .es_list_area .bs_item:nth-child(-n+3) .is_rank, .ws_hot_jobs_wrap .es_list_area .bs_item:nth-child(-n+3) .is_rank {color:var(--portal,#4846f5)} .ws_deadline_wrap .es_list_area .bs_item .is_keyword, .ws_hot_jobs_wrap .es_list_area .bs_item .is_keyword {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws_deadline_wrap .es_list_area .bs_item .is_note {color:var(--webis_muted_light);font-size:1.25rem} .ws_job_alert_wrap .es_list_area {display:grid;padding:.4rem 2rem 1.2rem} .ws_job_alert_wrap .es_list_area .bs_link {display:flex;align-items:center;gap:1rem;min-height:4.3rem;border-bottom:.1rem solid #f0f2f5;font-size:1.4rem} .ws_job_alert_wrap .es_list_area .bs_link:last-child {border-bottom:0} .ws_job_alert_wrap .es_list_area .bs_link:hover {color:var(--webis_link);text-decoration:underline} .ws_job_alert_wrap .es_list_area .bs_link .is_note {margin-left:auto;color:var(--webis_muted_light);font-size:1.25rem;flex:0 0 auto} .ws_photo_banner_wrap {position:relative;display:block;min-height:15rem;border-radius:var(--webis_radius_md);overflow:hidden;border:.1rem solid var(--webis_line)} .ws_photo_banner_wrap img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ws_photo_banner_wrap .es_tag {position:absolute;top:1.2rem;left:1.2rem;border-radius:.5rem;background:rgba(10,13,22,.6);color:#fff;padding:.3rem .8rem;font-size:1.2rem;font-weight:700} .ws_photo_banner_wrap .es_copy {position:absolute;right:0;bottom:0;left:0;padding:3rem 1.6rem 1.2rem;background:linear-gradient(transparent,rgba(10,13,22,.8));color:#fff;font-size:1.42rem;font-weight:700;line-height:1.45} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 검색 버티컬 (사이트=web_result 재사용 / 이미지 그리드 / 동영상 그리드 / 이미지로 검색) * ---------------------------------------------------------------------------------------------------- */ .ws_search_header_wrap.wsd_wide .es_main_area .we_area {grid-template-columns:auto minmax(0,1fr) auto} .ws_image_result_wrap, .ws_video_result_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_image_result_wrap .es_filter_area, .ws_video_result_wrap .es_filter_area {display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:1.4rem 2.2rem;border-bottom:.1rem solid #f0f2f5} .ws_image_result_wrap .es_filter_area .bs_chip, .ws_video_result_wrap .es_filter_area .bs_chip {display:inline-flex;min-height:3.4rem;align-items:center;gap:.5rem;border:.1rem solid var(--webis_line_strong);border-radius:1.7rem;background:#fff;padding:0 1.3rem;color:#4a5464;font-size:1.3rem;font-weight:600;transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer} .ws_image_result_wrap .es_filter_area .bs_chip:hover, .ws_video_result_wrap .es_filter_area .bs_chip:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .ws_image_result_wrap .es_filter_area .bs_chip.wsa_active, .ws_video_result_wrap .es_filter_area .bs_chip.wsa_active {border-color:var(--webis_color);background:var(--webis_color_50);color:var(--webis_color_550)} .ws_image_result_wrap .es_filter_area .bs_side_box, .ws_video_result_wrap .es_filter_area .bs_side_box {margin-left:auto;display:flex;align-items:center;gap:1rem;color:var(--webis_muted);font-size:1.3rem} .ws_image_result_wrap .es_filter_area .bs_side_box .is_button:hover {color:var(--webis_ink)} .ws_image_result_wrap .es_grid_area {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem 1.4rem;padding:2rem 2.2rem} .ws_image_result_wrap .es_grid_area .bs_item {min-width:0} .ws_image_result_wrap .es_grid_area .bs_item .is_thumb {width:100%;aspect-ratio:4/3;border-radius:var(--webis_radius_sm);object-fit:cover;background:#eef1f5} .ws_image_result_wrap .es_grid_area .bs_item:hover .is_thumb {outline:.2rem solid var(--webis_color);outline-offset:-.2rem} .ws_image_result_wrap .es_grid_area .bs_item .is_title {margin-top:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.35rem;font-weight:500} .ws_image_result_wrap .es_grid_area .bs_item .is_source {color:var(--webis_muted_light);font-size:1.25rem} .ws_image_result_wrap .es_more_link, .ws_video_result_wrap .es_more_link {display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:5.2rem;border-top:.1rem solid #f0f2f5;color:#525c6d;font-size:1.4rem;font-weight:600} .ws_image_result_wrap .es_more_link:hover, .ws_video_result_wrap .es_more_link:hover {background:#fafbfd;color:var(--webis_ink)} .ws_image_result_wrap .es_more_link i, .ws_video_result_wrap .es_more_link i {font-size:1.5rem;color:var(--webis_muted_light)} .ws_video_result_wrap .es_grid_area {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;padding:1.8rem 2.2rem 2rem} .ws_video_result_wrap .es_grid_area .bs_item {min-width:0} .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box {position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--webis_radius_sm);background:#111827} .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box .ss_thumb, .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box .ss_placeholder {display:grid;width:100%;height:100%;place-items:center;object-fit:cover;color:#fff;font-size:4rem;transition:transform .2s ease,opacity .2s ease} .ws_video_result_wrap .es_grid_area .bs_item:hover .is_thumb_box .ss_thumb {transform:scale(1.035);opacity:.9} .ws_video_result_wrap .es_grid_area .bs_item .is_thumb_box .ss_play {position:absolute;left:50%;top:50%;display:grid;width:4.8rem;height:4.8rem;place-items:center;border-radius:50%;background:rgba(15,23,42,.82);color:#fff;font-size:2rem;transform:translate(-50%,-50%);box-shadow:0 .6rem 1.8rem rgba(0,0,0,.2)} .ws_video_result_wrap .es_grid_area .bs_item .is_source_box {display:flex;align-items:center;gap:.8rem;margin-top:.9rem;color:var(--webis_muted_light);font-size:1.2rem} .ws_video_result_wrap .es_grid_area .bs_item .is_source_box .ss_name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--webis_ink_soft)} .ws_video_result_wrap .es_grid_area .bs_item .is_source_box .ss_time {margin-left:auto;white-space:nowrap} .ws_video_result_wrap .es_grid_area .bs_item .is_title {display:-webkit-box;margin-top:.45rem;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--webis_ink);font-size:1.45rem;font-weight:700;line-height:1.45} .ws_video_result_wrap .es_grid_area .bs_item .is_title:hover {color:var(--webis_link);text-decoration:underline} .ws_video_result_wrap .es_grid_area .bs_item .is_desc {display:-webkit-box;margin-top:.45rem;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--webis_muted);font-size:1.28rem;line-height:1.55} .ws_video_result_wrap .es_grid_area .bs_empty {grid-column:1/-1;display:grid;min-height:28rem;place-items:center;align-content:center;gap:.8rem;color:var(--webis_muted);text-align:center} .ws_video_result_wrap .es_grid_area .bs_empty > i {font-size:4rem;color:var(--webis_muted_light)} .ws_video_result_wrap .es_grid_area .bs_empty > strong {color:var(--webis_ink);font-size:1.7rem} .ws_video_result_wrap .es_grid_area .bs_empty > p {font-size:1.35rem} /* 이미지로 검색 */ .ws_visual_wrap {padding:2rem 0 6rem} .ws_visual_wrap .es_layout_area {display:grid;grid-template-columns:minmax(0,1fr) var(--webis_side_column);gap:2.4rem;align-items:start} .ws_visual_wrap .es_layout_area .bs_upload_box {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_visual_wrap .es_layout_area .bs_upload_box .is_head_field {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.4rem;padding:0 2.2rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_head_field .ss_title {font-size:1.65rem;font-weight:800;letter-spacing:-.03em} .ws_visual_wrap .es_layout_area .bs_upload_box .is_head_field .ss_close {color:var(--webis_muted);font-size:1.9rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_head_field .ss_close:hover {color:var(--webis_ink)} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field {padding:1.8rem 2.2rem 2rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone {display:grid;min-height:38rem;place-items:center;border:.16rem dashed var(--webis_line_strong);border-radius:var(--webis_radius_lg);background:#fafbfd;padding:4rem 3rem;text-align:center;cursor:pointer;transition:border-color .15s ease,background-color .15s ease} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone:hover, .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone.wsa_active {border-color:var(--webis_color);background:var(--webis_color_50)} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone .ks_body {display:flex;flex-direction:column;align-items:center} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone .ks_body .os_icon {font-size:4.6rem;color:var(--webis_color)} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone .ks_body .os_title {margin-top:1.4rem;font-size:2rem;font-weight:700;letter-spacing:-.03em} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone .ks_body .os_desc {margin-top:.6rem;color:var(--webis_muted);font-size:1.4rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_upload_zone .ks_body .os_action {display:inline-flex;min-height:4.2rem;align-items:center;justify-content:center;gap:.6rem;margin-top:1.8rem;border:.1rem solid var(--webis_color);border-radius:var(--webis_radius_sm);background:var(--webis_color);padding:0 1.5rem;color:#fff;font-size:1.4rem;font-weight:600} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_url_zone {display:flex;width:100%;gap:.8rem;margin-top:2.2rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_url_zone .ks_input {flex:1;min-width:0;height:5.2rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.6rem;outline:0;font-size:1.5rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_url_zone .ks_input:focus {border-color:var(--webis_color)} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_url_zone .ks_submit_button {display:inline-flex;min-height:5.2rem;align-items:center;justify-content:center;gap:.6rem;border:.1rem solid var(--webis_color);border-radius:var(--webis_radius_sm);background:var(--webis_color);padding:0 2rem;color:#fff;font-size:1.4rem;font-weight:600} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field .ss_url_zone .ks_submit_button:hover {background:var(--webis_color_550)} .ws_visual_wrap .es_layout_area .bs_side_box {display:grid;gap:1.2rem;min-width:0} .ws_visual_guide_wrap, .ws_visual_recent_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_visual_guide_wrap .es_head_area, .ws_visual_recent_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.4rem;padding:0 2.2rem} .ws_visual_guide_wrap .es_head_area .bs_title, .ws_visual_recent_wrap .es_head_area .bs_title {font-size:1.65rem;font-weight:800;letter-spacing:-.03em} .ws_visual_recent_wrap .es_head_area .bs_clear_button {color:var(--webis_muted);font-size:1.3rem} .ws_visual_recent_wrap .es_head_area .bs_clear_button:hover {color:var(--webis_ink);text-decoration:underline} .ws_visual_guide_wrap .es_list_area {display:grid;gap:.2rem;padding:.4rem 1.2rem 1.4rem} .ws_visual_guide_wrap .es_list_area .bs_step {display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1rem;align-items:start;border-radius:var(--webis_radius_sm);padding:1rem 1rem} .ws_visual_guide_wrap .es_list_area .bs_step .is_icon {display:grid;width:3.4rem;height:3.4rem;place-items:center;border-radius:1rem;background:var(--webis_color_50);color:var(--webis_color);font-size:1.6rem} .ws_visual_guide_wrap .es_list_area .bs_step .is_body {min-width:0} .ws_visual_guide_wrap .es_list_area .bs_step .is_body .ss_title {display:block;font-size:1.4rem;font-weight:700} .ws_visual_guide_wrap .es_list_area .bs_step .is_body .ss_desc {margin-top:.2rem;color:var(--webis_muted);font-size:1.3rem;line-height:1.55} .ws_visual_recent_wrap .es_strip_area {display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1.4rem 2.2rem 2rem} .ws_visual_recent_wrap .es_strip_area .bs_link {position:relative;overflow:hidden;border-radius:var(--webis_radius_sm);background:#eceff3;aspect-ratio:4/3} .ws_visual_recent_wrap .es_strip_area .bs_link img {width:100%;height:100%;object-fit:cover;transition:transform .2s ease} .ws_visual_recent_wrap .es_strip_area .bs_link:hover img {transform:scale(1.04)} .ws_visual_wrap .es_layout_area .bs_side_box .bs_foot_box {display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:1rem 0 0;color:var(--webis_muted_light);font-size:1.2rem} .ws_visual_wrap .es_layout_area .bs_side_box .bs_foot_box .is_link:hover {color:var(--webis_ink_soft)} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 포털 메인 공용 모듈 (--portal 스왑) — 뉴스·백과·지식인·로또·운세·114·동네·도구·커뮤니티 재사용 * ---------------------------------------------------------------------------------------------------- */ .ws_feature_wrap, .ws_major_wrap, .ws_rank_wrap, .ws_linklist_wrap, .ws_gallery_wrap, .ws_notice_wrap, .ws_section_link_wrap, .ws_table_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_major_wrap .es_head_area, .ws_rank_wrap .es_head_area, .ws_linklist_wrap .es_head_area, .ws_gallery_wrap .es_head_area, .ws_notice_wrap .es_head_area, .ws_section_link_wrap .es_head_area, .ws_table_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_major_wrap .es_head_area .bs_title, .ws_rank_wrap .es_head_area .bs_title, .ws_linklist_wrap .es_head_area .bs_title, .ws_gallery_wrap .es_head_area .bs_title, .ws_notice_wrap .es_head_area .bs_title, .ws_section_link_wrap .es_head_area .bs_title, .ws_table_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_major_wrap .es_head_area .bs_more, .ws_rank_wrap .es_head_area .bs_time, .ws_linklist_wrap .es_head_area .bs_more, .ws_gallery_wrap .es_head_area .bs_more, .ws_notice_wrap .es_head_area .bs_time, .ws_section_link_wrap .es_head_area .bs_more, .ws_table_wrap .es_head_area .bs_more, .ws_major_wrap .es_head_area .bs_time, .ws_linklist_wrap .es_head_area .bs_time {color:var(--webis_muted);font-size:1.3rem} .ws_major_wrap .es_head_area .bs_more:hover, .ws_linklist_wrap .es_head_area .bs_more:hover, .ws_gallery_wrap .es_head_area .bs_more:hover, .ws_section_link_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} /* 뉴스 히어로 3열 */ .ws_news_hero_wrap {display:grid;grid-template-columns:minmax(0,1fr) 30rem 30rem;gap:1.2rem} /* feature (대표 이미지 카드) */ .ws_feature_wrap {position:relative;display:block;min-height:30rem;border-radius:var(--webis_radius_md);background:#dfe5ed;overflow:hidden;border:.1rem solid var(--webis_line)} .ws_feature_wrap .es_image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ws_feature_wrap::after {content:'';position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(10,13,22,.82))} .ws_feature_wrap .es_copy_area {position:absolute;right:2rem;bottom:2rem;left:2rem;z-index:2;color:#fff} .ws_feature_wrap .es_copy_area .bs_kicker {display:block;margin-bottom:.6rem;color:rgba(255,255,255,.75);font-size:1.25rem;font-weight:700;letter-spacing:.06em} .ws_feature_wrap .es_copy_area .bs_title {font-size:2.2rem;font-weight:800;line-height:1.35;letter-spacing:-.03em} /* 랭킹 (많이 본 / 인기) */ .ws_rank_wrap .es_list_area {padding:.8rem 1.2rem 1.2rem} .ws_rank_wrap .es_list_area .bs_item {display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.6rem;align-items:center;min-height:3.9rem;border-radius:var(--webis_radius_sm);padding:0 .8rem;font-size:1.38rem} .ws_rank_wrap .es_list_area .bs_item:hover {background:#f4f6f9} .ws_rank_wrap .es_list_area .bs_item .is_rank {font-size:1.3rem;font-weight:800} .ws_rank_wrap .es_list_area .bs_item:nth-child(-n+3) .is_rank {color:var(--portal,var(--webis_color))} .ws_rank_wrap .es_list_area .bs_item .is_keyword {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 링크 리스트 (주요 뉴스 / 섹션 뉴스) */ .ws_linklist_wrap .es_list_area {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;padding:1rem 2rem 1.4rem} .ws_linklist_wrap .es_list_area.wsd_single {grid-template-columns:1fr} .ws_linklist_wrap .es_list_area .bs_column {display:grid} .ws_linklist_wrap .es_list_area .bs_column .ss_item {border-bottom:.1rem solid #f0f2f5} .ws_linklist_wrap .es_list_area .bs_column .ss_item:last-child {border-bottom:0} .ws_linklist_wrap .es_list_area .bs_column .ss_item .ks_link {display:flex;align-items:center;gap:.8rem;min-height:4.3rem;font-size:1.42rem} .ws_linklist_wrap .es_list_area .bs_column .ss_item .ks_link:hover {color:var(--webis_link);text-decoration:underline} .ws_linklist_wrap .es_list_area .bs_column .ss_item .ks_link::before {content:'';width:.4rem;height:.4rem;border-radius:50%;background:#c3cad5;flex:0 0 auto} .ws_linklist_wrap .es_list_area .bs_column .ss_item .ks_link small {margin-left:auto;color:var(--webis_muted_light);font-size:1.25rem;flex:0 0 auto} /* 갤러리 */ .ws_gallery_wrap .es_gallery_area {display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;padding:1.6rem 2rem 2rem} .ws_gallery_wrap .es_gallery_area .bs_item {position:relative;overflow:hidden;min-height:14rem;border-radius:var(--webis_radius_sm);background:#e9edf1} .ws_gallery_wrap .es_gallery_area .bs_item:first-child {grid-row:span 2} .ws_gallery_wrap .es_gallery_area .bs_item img {width:100%;height:100%;object-fit:cover} .ws_gallery_wrap .es_gallery_area .bs_item .is_caption {position:absolute;right:0;bottom:0;left:0;padding:2.4rem 1.2rem 1rem;background:linear-gradient(transparent,rgba(10,13,22,.78));color:#fff;font-size:1.3rem;font-weight:600} /* 공지/속보 리스트 */ .ws_notice_wrap .es_list_area {display:grid;padding:.4rem 2rem 1.2rem} .ws_notice_wrap .es_list_area .bs_link {display:flex;align-items:center;gap:1rem;min-height:4.3rem;border-bottom:.1rem solid #f0f2f5;font-size:1.4rem} .ws_notice_wrap .es_list_area .bs_link:last-child {border-bottom:0} .ws_notice_wrap .es_list_area .bs_link:hover {color:var(--webis_link);text-decoration:underline} .ws_notice_wrap .es_list_area .bs_link .is_badge {display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700;flex:0 0 auto} .ws_notice_wrap .es_list_area .bs_link .is_badge.wsd_status_new {background:#fdeeee;color:var(--webis_up)} .ws_notice_wrap .es_list_area .bs_link .is_badge.wsd_status_hot {background:var(--webis_color_50);color:var(--webis_color_550)} .ws_notice_wrap .es_list_area .bs_link .is_time {margin-left:auto;color:var(--webis_muted_light);font-size:1.25rem;flex:0 0 auto} /* 섹션 링크 그리드 (2열) */ .ws_section_link_wrap .es_grid_area {display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;padding:.6rem 1.2rem 1.4rem} .ws_section_link_wrap .es_grid_area .bs_link {display:flex;align-items:center;gap:.9rem;min-height:5rem;border-radius:var(--webis_radius_sm);padding:.6rem .9rem;font-size:1.35rem;font-weight:600;color:#3d4557} .ws_section_link_wrap .es_grid_area .bs_link:hover {background:#f4f6f9;color:var(--webis_ink)} .ws_section_link_wrap .es_grid_area .bs_link .is_icon {display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:1.1rem;background:color-mix(in srgb,var(--service,var(--portal,#4846f5)) 10%,#fff);color:var(--service,var(--portal,#4846f5));font-size:1.7rem;flex:0 0 auto} /* aside 배너 */ .ws_aside_banner_wrap {position:relative;overflow:hidden;display:grid;gap:.4rem;border:.1rem solid color-mix(in srgb,var(--portal,var(--webis_color)) 22%,#fff);border-radius:var(--webis_radius_md);background:color-mix(in srgb,var(--portal,var(--webis_color)) 6%,#fff);padding:1.8rem 2rem} .ws_aside_banner_wrap .es_glyph {position:absolute;right:-1.2rem;bottom:-1.6rem;font-size:8.4rem;color:color-mix(in srgb,var(--portal,var(--webis_color)) 14%,#fff)} .ws_aside_banner_wrap .es_kicker {position:relative;color:color-mix(in srgb,var(--portal,var(--webis_color)) 70%,#191f2e);font-size:1.22rem;font-weight:800;letter-spacing:.05em} .ws_aside_banner_wrap .es_title {position:relative;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.4} .ws_aside_banner_wrap .es_desc {position:relative;color:var(--webis_ink_soft);font-size:1.32rem;line-height:1.55} .ws_aside_banner_wrap .es_cta {position:relative;justify-self:start;display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;min-height:3.6rem;border-radius:1.8rem;background:var(--portal,var(--webis_color));color:#fff;padding:0 1.4rem;font-size:1.3rem;font-weight:700} .ws_aside_banner_wrap .es_cta:hover {filter:brightness(.94)} /* 데이터 테이블 */ .ws_table_wrap .es_table_area {padding:.4rem 2rem 1.6rem;overflow-x:auto} .ws_table_wrap .es_table_area table {width:100%;border-collapse:collapse;font-size:1.38rem} .ws_table_wrap .es_table_area th {border-bottom:.1rem solid var(--webis_line_strong);background:#fafbfd;padding:1.1rem 1.2rem;color:var(--webis_ink_soft);font-weight:700;text-align:left;white-space:nowrap} .ws_table_wrap .es_table_area td {border-bottom:.1rem solid #f0f2f5;padding:1.1rem 1.2rem;color:#3d4557} .ws_table_wrap .es_table_area tr:last-child td {border-bottom:0} .ws_table_wrap .es_table_area .is_num {text-align:right;font-variant-numeric:tabular-nums} .ws_table_wrap .es_table_area .is_strong {font-weight:800;color:var(--webis_ink)} .ws_table_wrap.wsd_table .es_table_area {padding:0 0 .4rem} .ws_table_wrap.wsd_table .es_table_area th:first-child, .ws_table_wrap.wsd_table .es_table_area td:first-child {padding-left:2rem} .ws_table_wrap.wsd_table .es_table_area th:last-child, .ws_table_wrap.wsd_table .es_table_area td:last-child {padding-right:2rem} /* [CONTAINER-SUB] 백과 오늘의 문서 · 지식인 채택답변 · 4열 분류 링크 */ .ws_catlink_wrap, .ws_doctoday_wrap, .ws_adopt_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_catlink_wrap .es_head_area, .ws_doctoday_wrap .es_head_area, .ws_adopt_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_catlink_wrap .es_head_area .bs_title, .ws_doctoday_wrap .es_head_area .bs_title, .ws_adopt_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_catlink_wrap .es_head_area .bs_more, .ws_doctoday_wrap .es_head_area .bs_more, .ws_adopt_wrap .es_head_area .bs_more {color:var(--webis_muted);font-size:1.3rem} .ws_catlink_wrap .es_head_area .bs_more:hover, .ws_doctoday_wrap .es_head_area .bs_more:hover, .ws_adopt_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} .ws_catlink_wrap .es_grid_area {display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:.6rem 1.2rem 1.4rem} .ws_catlink_wrap .es_grid_area .bs_link {display:flex;align-items:center;gap:.9rem;min-height:5rem;border-radius:var(--webis_radius_sm);padding:.6rem .9rem;font-size:1.35rem;font-weight:600;color:#3d4557} .ws_catlink_wrap .es_grid_area .bs_link:hover {background:#f4f6f9;color:var(--webis_ink)} .ws_catlink_wrap .es_grid_area .bs_link .is_icon {display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:1.1rem;background:color-mix(in srgb,var(--service,var(--portal,#4846f5)) 10%,#fff);color:var(--service,var(--portal,#4846f5));font-size:1.7rem;flex:0 0 auto} .ws_doctoday_wrap .es_body_area {display:grid;grid-template-columns:minmax(0,1fr) 24rem;gap:2.4rem;padding:2rem} .ws_doctoday_wrap .es_body_area .bs_text_box .is_title {font-size:2rem;font-weight:800;letter-spacing:-.03em} .ws_doctoday_wrap .es_body_area .bs_text_box .is_title a {color:inherit} .ws_doctoday_wrap .es_body_area .bs_text_box .is_title a:hover {color:var(--portal)} .ws_doctoday_wrap .es_body_area .bs_text_box .is_title small {color:var(--webis_muted_light);font-size:1.3rem;font-weight:500} .ws_doctoday_wrap .es_body_area .bs_text_box .is_summary {margin-top:1rem;color:var(--webis_ink_soft);font-size:1.45rem;line-height:1.75} .ws_doctoday_wrap .es_body_area .bs_text_box .is_tag_field {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} .ws_doctoday_wrap .es_body_area .bs_text_box .is_tag_field .ss_chip {display:inline-flex;min-height:3.4rem;align-items:center;border:.1rem solid var(--webis_line_strong);border-radius:1.7rem;background:#fff;padding:0 1.3rem;color:#4a5464;font-size:1.3rem;font-weight:600} .ws_doctoday_wrap .es_body_area .bs_text_box .is_tag_field .ss_chip:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .ws_doctoday_wrap .es_body_area .bs_image {width:100%;height:18rem;object-fit:cover;border-radius:var(--webis_radius_md);border:.1rem solid var(--webis_line)} .ws_adopt_wrap .es_body_area {padding:2rem} .ws_adopt_wrap .es_body_area .bs_q_box {display:flex;align-items:center;gap:.8rem} .ws_adopt_wrap .es_body_area .bs_q_box .is_badge {display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700;background:var(--webis_color_50);color:var(--webis_color_550)} .ws_adopt_wrap .es_body_area .bs_q_box .is_title {font-size:1.6rem;font-weight:700} .ws_adopt_wrap .es_body_area .bs_answer_box {margin-top:1.4rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fafbfd;padding:1.6rem 1.8rem} .ws_adopt_wrap .es_body_area .bs_answer_box .is_meta_field {display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem} .ws_adopt_wrap .es_body_area .bs_answer_box .is_meta_field .ss_badge {display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700;background:#fdeeee;color:var(--webis_up)} .ws_adopt_wrap .es_body_area .bs_answer_box .is_meta_field .ss_name {font-size:1.35rem;font-weight:800} .ws_adopt_wrap .es_body_area .bs_answer_box .is_meta_field .ss_note {color:var(--webis_muted_light);font-size:1.25rem} .ws_adopt_wrap .es_body_area .bs_answer_box .is_text {color:var(--webis_ink_soft);font-size:1.42rem;line-height:1.7} /* [CONTAINER-SUB] 로또 · 운세 모듈 */ .ws_lotto_hero_wrap {display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:1.2rem} .ws_lotto_result_wrap, .ws_generator_wrap, .ws_numbers_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff} .ws_lotto_result_wrap {padding:2.4rem} .ws_lotto_result_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem} .ws_lotto_result_wrap .es_head_area .bs_stepper_box {display:flex;align-items:center;gap:.8rem} .ws_lotto_result_wrap .es_head_area .bs_stepper_box .is_button {display:grid;width:3.4rem;height:3.4rem;place-items:center;border:.1rem solid var(--webis_line_strong);border-radius:50%;color:#525c6d;font-size:1.5rem} .ws_lotto_result_wrap .es_head_area .bs_stepper_box .is_button:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .ws_lotto_result_wrap .es_head_area .bs_stepper_box .is_title {font-size:2rem;font-weight:800} .ws_lotto_result_wrap .es_head_area .bs_time {color:var(--webis_muted);font-size:1.35rem} .ws_lotto_result_wrap .es_balls_area {display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2.2rem} .ws_lotto_result_wrap .es_balls_area .bs_ball {display:grid;width:4.8rem;height:4.8rem;place-items:center;border-radius:50%;background:var(--ball,#aaa);color:#fff;font-size:1.7rem;font-weight:800;box-shadow:inset 0 -.5rem 0 rgba(0,0,0,.12)} .ws_lotto_result_wrap .es_balls_area .bs_plus {color:var(--webis_muted_light);font-size:1.8rem;font-weight:800} .ws_lotto_result_wrap .es_balls_area .bs_bonus {color:var(--webis_muted_light);font-size:1.3rem} .ws_lotto_result_wrap .es_stats_area {display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem} .ws_lotto_result_wrap .es_stats_area .bs_stat {border-top:.2rem solid var(--webis_ink);padding-top:1rem;color:var(--webis_muted);font-size:1.3rem} .ws_lotto_result_wrap .es_stats_area .bs_stat .is_value {display:block;margin-top:.3rem;color:var(--webis_ink);font-size:1.65rem;font-weight:800;font-variant-numeric:tabular-nums} .ws_generator_wrap {padding:2rem} .ws_generator_wrap .es_title {font-size:1.5rem;font-weight:800} .ws_generator_wrap .es_desc {margin-top:.4rem;color:var(--webis_muted);font-size:1.3rem} .ws_generator_wrap .es_numbers_area {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem} .ws_generator_wrap .es_numbers_area .bs_ball {display:grid;width:4rem;height:4rem;place-items:center;border-radius:50%;background:var(--ball,#f2f4f7);color:#fff;font-size:1.4rem;font-weight:800} .ws_generator_wrap .es_button {display:inline-flex;width:100%;min-height:4.2rem;align-items:center;justify-content:center;gap:.6rem;margin-top:1.6rem;border:.1rem solid var(--webis_color);border-radius:var(--webis_radius_sm);background:var(--webis_color);color:#fff;font-size:1.4rem;font-weight:600} .ws_generator_wrap .es_button:hover {filter:brightness(1.05)} .ws_generator_wrap .es_note {margin-top:1rem;color:var(--webis_muted_light);font-size:1.2rem} .ws_numbers_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_numbers_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_numbers_wrap .es_head_area .bs_title em {margin-left:.6rem;color:var(--portal,var(--webis_color));font-style:normal;font-size:1.3rem;font-weight:700} .ws_numbers_wrap .es_numbers_area {display:flex;flex-wrap:wrap;gap:.6rem;padding:1.6rem 2rem} .ws_numbers_wrap .es_numbers_area .bs_ball {display:grid;width:4rem;height:4rem;place-items:center;border-radius:50%;background:var(--ball,#f2f4f7);color:#fff;font-size:1.4rem;font-weight:800} /* 운세 */ .ws_fortune_hero_wrap {display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:1.2rem;margin-bottom:1.2rem} .ws_fortune_hero_wrap .es_input_area {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:2.4rem} .ws_fortune_hero_wrap .es_input_area .bs_title {font-size:2rem;font-weight:800;letter-spacing:-.035em} .ws_fortune_hero_wrap .es_input_area .bs_desc {margin-top:.5rem;color:var(--webis_muted);font-size:1.4rem} .ws_fortune_hero_wrap .es_input_area .bs_field_box {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.8rem} .ws_fortune_hero_wrap .es_input_area .bs_field_box .is_field {display:grid;gap:.5rem;color:var(--webis_muted);font-size:1.3rem;font-weight:700} .ws_fortune_hero_wrap .es_input_area .bs_field_box .is_field input, .ws_fortune_hero_wrap .es_input_area .bs_field_box .is_field select {height:4.8rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.2rem;font-size:1.4rem} .ws_fortune_hero_wrap .es_input_area .bs_field_box .is_field input:focus, .ws_fortune_hero_wrap .es_input_area .bs_field_box .is_field select:focus {border-color:var(--portal);outline:0} .ws_fortune_hero_wrap .es_input_area .bs_button {display:inline-flex;width:100%;min-height:4.8rem;align-items:center;justify-content:center;gap:.6rem;margin-top:1.6rem;border-radius:var(--webis_radius_sm);background:var(--portal);color:#fff;font-size:1.5rem;font-weight:700} .ws_fortune_hero_wrap .es_input_area .bs_button:hover {filter:brightness(.94)} .ws_fortune_hero_wrap .es_summary_area {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:2rem;display:flex;flex-direction:column} .ws_fortune_hero_wrap .es_summary_area .bs_title {font-size:1.5rem;font-weight:800} .ws_fortune_hero_wrap .es_summary_area .bs_title small {color:var(--webis_muted_light);font-weight:500} .ws_fortune_hero_wrap .es_summary_area .bs_quote {padding:1.6rem 0;color:var(--webis_ink_soft);font-size:1.5rem;line-height:1.75} .ws_fortune_hero_wrap .es_summary_area .bs_list_field {display:grid;flex:1;align-content:space-between} .ws_fortune_hero_wrap .es_summary_area .bs_list_field .is_item {display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.2rem;border-bottom:.1rem solid #f0f2f5;font-size:1.38rem;color:var(--webis_ink_soft)} .ws_fortune_hero_wrap .es_summary_area .bs_list_field .is_item:last-child {border-bottom:0} .ws_fortune_hero_wrap .es_summary_area .bs_list_field .is_item .ss_value {font-weight:800;color:var(--webis_ink)} .ws_zodiac_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_zodiac_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_zodiac_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_zodiac_wrap .es_head_area .bs_more {color:var(--webis_muted);font-size:1.3rem} .ws_zodiac_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} .ws_zodiac_wrap .es_grid_area {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;padding:1.6rem 2rem 2rem} .ws_zodiac_wrap .es_grid_area .bs_item {display:flex;min-height:11.8rem;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_sm);background:#fff;padding:1.4rem .8rem 1.6rem;font-size:1.4rem;font-weight:700} .ws_zodiac_wrap .es_grid_area .bs_item:hover {border-color:var(--portal);background:color-mix(in srgb,var(--portal) 5%,#fff)} .ws_zodiac_wrap .es_grid_area .bs_item .is_glyph {display:grid;width:4.8rem;height:4.8rem;place-items:center;margin-bottom:.5rem;border-radius:50%;background:color-mix(in srgb,var(--portal,#4846f5) 9%,#fff);font-size:2.5rem;line-height:1} .ws_zodiac_wrap .es_grid_area .bs_item .is_note {color:var(--webis_muted_light);font-size:1.2rem;font-weight:500} .ws_linklist_wrap .es_list_area .bs_column .ss_item .ks_link .ks_glyph {display:inline-grid;width:2.4rem;height:2.4rem;place-items:center;margin-right:.6rem;border-radius:50%;background:color-mix(in srgb,var(--portal,#4846f5) 9%,#fff);color:var(--portal,#4846f5);font-size:1.3rem;font-weight:700;flex:0 0 auto} /* [CONTAINER-SUB] 114 빠른번호 · 지역칩 · 도구 그리드 · 계산기 */ .ws_service_hero_wrap .es_search_area .bs_quick_box {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1.8rem} .ws_service_hero_wrap .es_search_area .bs_quick_box .is_quick {display:flex;min-height:7.4rem;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_sm);background:#fafbfd;font-size:1.3rem;font-weight:600;color:var(--webis_ink_soft)} .ws_service_hero_wrap .es_search_area .bs_quick_box .is_quick:hover {border-color:var(--portal);color:var(--webis_ink)} .ws_service_hero_wrap .es_search_area .bs_quick_box .is_quick strong {color:var(--portal);font-size:1.8rem;font-weight:800} .ws_rank_wrap .es_list_area .bs_item .is_note {color:var(--webis_muted_light);font-size:1.25rem} .ws_chipfilter_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_chipfilter_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_chipfilter_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_chipfilter_wrap .es_head_area .bs_more {color:var(--webis_muted);font-size:1.3rem} .ws_chipfilter_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} .ws_chipfilter_wrap .es_chip_area {display:flex;flex-wrap:wrap;gap:.8rem;padding:1.4rem 2rem} .ws_chipfilter_wrap .es_chip_area .bs_chip {display:inline-flex;min-height:3.4rem;align-items:center;border:.1rem solid var(--webis_line_strong);border-radius:1.7rem;background:#fff;padding:0 1.3rem;color:#4a5464;font-size:1.3rem;font-weight:600} .ws_chipfilter_wrap .es_chip_area .bs_chip:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .ws_chipfilter_wrap .es_chip_area .bs_chip.wsa_active {border-color:var(--portal);background:color-mix(in srgb,var(--portal) 8%,#fff);color:var(--portal)} /* 도구 */ .ws_calc_wrap, .ws_tools_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_calc_wrap .es_head_area, .ws_tools_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.2rem;padding:0 2rem;border-bottom:.1rem solid #f0f2f5} .ws_calc_wrap .es_head_area .bs_title, .ws_tools_wrap .es_head_area .bs_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_calc_wrap .es_head_area .bs_title em, .ws_tools_wrap .es_head_area .bs_title em {margin-left:.4rem;color:var(--portal);font-style:normal;font-size:1.3rem;font-weight:700} .ws_calc_wrap .es_head_area .bs_more, .ws_tools_wrap .es_head_area .bs_more {color:var(--webis_muted);font-size:1.3rem} .ws_calc_wrap .es_head_area .bs_more:hover, .ws_tools_wrap .es_head_area .bs_more:hover {color:var(--webis_ink)} .ws_calc_wrap .es_form_area {padding:2rem} .ws_calc_wrap .es_form_area .bs_field_box {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} .ws_calc_wrap .es_form_area .bs_field_box .is_field {display:grid;gap:.5rem;color:var(--webis_muted);font-size:1.3rem;font-weight:700} .ws_calc_wrap .es_form_area .bs_field_box .is_field input, .ws_calc_wrap .es_form_area .bs_field_box .is_field select {height:4.8rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.2rem;font-size:1.5rem;font-variant-numeric:tabular-nums} .ws_calc_wrap .es_form_area .bs_field_box .is_field input:focus, .ws_calc_wrap .es_form_area .bs_field_box .is_field select:focus {border-color:var(--portal);outline:0} .ws_calc_wrap .es_form_area .bs_result_box {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.6rem;border-radius:var(--webis_radius_sm);background:#fafbfd;border:.1rem solid var(--webis_line);padding:1.6rem 2rem} .ws_calc_wrap .es_form_area .bs_result_box .is_label {color:var(--webis_muted);font-size:1.35rem;font-weight:600} .ws_calc_wrap .es_form_area .bs_result_box .is_value {color:var(--portal);font-size:2.3rem;font-weight:800;font-variant-numeric:tabular-nums} .ws_calc_wrap .es_form_area .bs_result_box .is_note {width:100%;color:var(--webis_muted_light);font-size:1.25rem} .ws_tools_wrap .es_grid_area {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;padding:1.6rem 2rem 2rem} .ws_tools_wrap .es_grid_area .bs_card {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem;align-items:center;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:1.6rem;transition:border-color .15s ease} .ws_tools_wrap .es_grid_area .bs_card:hover {border-color:var(--portal)} .ws_tools_wrap .es_grid_area .bs_card .is_icon {display:grid;width:4.4rem;height:4.4rem;place-items:center;border-radius:1.3rem;background:color-mix(in srgb,var(--portal,#4846f5) 9%,#fff);color:var(--portal,#4846f5);font-size:2.1rem} .ws_tools_wrap .es_grid_area .bs_card .is_body_box .ss_title {display:block;font-size:1.5rem;font-weight:700} .ws_tools_wrap .es_grid_area .bs_card .is_body_box .ss_desc {margin-top:.3rem;color:var(--webis_muted);font-size:1.3rem} .ws_tools_wrap .es_grid_area .bs_card .is_go {color:var(--webis_muted_light);font-size:1.6rem} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 게시판 스킨 10종 — 갤러리·웹진·카드·일정·랭킹·리스트·FAQ + 뷰 하단 목록 (--portal 스왑) * ---------------------------------------------------------------------------------------------------- */ .ws_gallery_skin_wrap, .ws_webzine_wrap, .ws_card_skin_wrap, .ws_schedule_wrap, .ws_ranking_skin_wrap, .ws_list_skin_wrap, .ws_faq_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_gallery_skin_wrap .es_head_area, .ws_webzine_wrap .es_head_area, .ws_card_skin_wrap .es_head_area, .ws_schedule_wrap .es_head_area, .ws_ranking_skin_wrap .es_head_area, .ws_list_skin_wrap .es_head_area, .ws_faq_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.4rem;padding:0 2.2rem;border-bottom:.1rem solid #f0f2f5} .ws_gallery_skin_wrap .es_head_area .bs_title, .ws_webzine_wrap .es_head_area .bs_title, .ws_card_skin_wrap .es_head_area .bs_title, .ws_schedule_wrap .es_head_area .bs_title, .ws_ranking_skin_wrap .es_head_area .bs_title, .ws_list_skin_wrap .es_head_area .bs_title, .ws_faq_wrap .es_head_area .bs_title {font-size:1.65rem;font-weight:800;letter-spacing:-.03em} .ws_gallery_skin_wrap .es_head_area .bs_more, .ws_webzine_wrap .es_head_area .bs_more, .ws_card_skin_wrap .es_head_area .bs_more, .ws_schedule_wrap .es_head_area .bs_more, .ws_ranking_skin_wrap .es_head_area .bs_more, .ws_list_skin_wrap .es_head_area .bs_more, .ws_faq_wrap .es_head_area .bs_more {color:var(--webis_muted);font-size:1.3rem} /* 갤러리 */ .ws_gallery_skin_wrap .es_grid_area {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.6rem;padding:2rem} .ws_gallery_skin_wrap .es_grid_area .bs_item {display:grid;gap:.7rem} .ws_gallery_skin_wrap .es_grid_area .bs_item .is_thumb_box {position:relative;aspect-ratio:4/3;border-radius:var(--webis_radius_sm);overflow:hidden;background:#eef0f4} .ws_gallery_skin_wrap .es_grid_area .bs_item .is_thumb_box img {width:100%;height:100%;object-fit:cover;transition:transform .2s ease} .ws_gallery_skin_wrap .es_grid_area .bs_item:hover .is_thumb_box img {transform:scale(1.04)} .ws_gallery_skin_wrap .es_grid_area .bs_item .is_thumb_box .ss_count {position:absolute;right:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.3rem;border-radius:.4rem;background:rgba(12,16,26,.72);color:#fff;padding:.2rem .7rem;font-size:1.2rem;font-weight:600} .ws_gallery_skin_wrap .es_grid_area .bs_item .is_title {font-size:1.42rem;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ws_gallery_skin_wrap .es_grid_area .bs_item .is_source {color:var(--webis_muted_light);font-size:1.25rem} /* 웹진 */ .ws_webzine_wrap .es_list_area {display:grid;padding:0 2.2rem} .ws_webzine_wrap .es_list_area .bs_item {display:grid;grid-template-columns:21rem minmax(0,1fr);gap:2rem;padding:2rem 0;border-bottom:.1rem solid #f0f2f5} .ws_webzine_wrap .es_list_area .bs_item:last-child {border-bottom:0} .ws_webzine_wrap .es_list_area .bs_item .is_image {width:21rem;height:14rem;border-radius:var(--webis_radius_sm);object-fit:cover} .ws_webzine_wrap .es_list_area .bs_item .is_content_box .ss_title a {font-size:1.8rem;font-weight:700;line-height:1.45;letter-spacing:-.02em} .ws_webzine_wrap .es_list_area .bs_item .is_content_box .ss_title a:hover {color:var(--webis_link);text-decoration:underline} .ws_webzine_wrap .es_list_area .bs_item .is_content_box .ss_desc {margin-top:.7rem;color:#59626f;font-size:1.42rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ws_webzine_wrap .es_list_area .bs_item .is_content_box .ss_meta_field {display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;color:var(--webis_muted_light);font-size:1.28rem} .ws_webzine_wrap .es_list_area .bs_item .is_content_box .ss_meta_field b {color:var(--webis_ink_soft);font-weight:700} /* 카드 */ .ws_card_skin_wrap .es_grid_area {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;padding:2rem} .ws_card_skin_wrap .es_grid_area .bs_item {display:grid;gap:.6rem;align-content:start;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);padding:1.8rem;transition:border-color .15s ease} .ws_card_skin_wrap .es_grid_area .bs_item:hover {border-color:var(--portal,var(--webis_color))} .ws_card_skin_wrap .es_grid_area .bs_item .is_kicker {color:var(--portal,var(--webis_color));font-size:1.22rem;font-weight:800;letter-spacing:.04em} .ws_card_skin_wrap .es_grid_area .bs_item .is_title {font-size:1.55rem;font-weight:700;line-height:1.45} .ws_card_skin_wrap .es_grid_area .bs_item .is_desc {color:var(--webis_muted);font-size:1.35rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ws_card_skin_wrap .es_grid_area .bs_item .is_meta {margin-top:.6rem;color:var(--webis_muted_light);font-size:1.25rem} /* 일정 */ .ws_schedule_wrap .es_list_area {display:grid;padding:.6rem 2.2rem 1.6rem} .ws_schedule_wrap .es_list_area .bs_link {display:grid;grid-template-columns:6rem minmax(0,1fr) auto;gap:1.6rem;align-items:center;padding:1.4rem 0;border-bottom:.1rem solid #f0f2f5} .ws_schedule_wrap .es_list_area .bs_link:last-child {border-bottom:0} .ws_schedule_wrap .es_list_area .bs_link:hover .is_title {color:var(--portal,var(--webis_color))} .ws_schedule_wrap .es_list_area .bs_link .is_date {display:grid;place-items:center;width:6rem;height:6rem;border-radius:var(--webis_radius_md);background:color-mix(in srgb,var(--portal,#4846f5) 7%,#fff);color:var(--portal,var(--webis_color));line-height:1.15} .ws_schedule_wrap .es_list_area .bs_link .is_date b {font-size:2rem;font-weight:800} .ws_schedule_wrap .es_list_area .bs_link .is_date small {font-size:1.2rem;font-weight:700} .ws_schedule_wrap .es_list_area .bs_link .is_body .ss_title {font-size:1.5rem;font-weight:700} .ws_schedule_wrap .es_list_area .bs_link .is_body .ss_meta_field {display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.4rem;color:var(--webis_muted);font-size:1.3rem} .ws_schedule_wrap .es_list_area .bs_link .is_badge {justify-self:end;display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700} .ws_schedule_wrap .es_list_area .bs_link .is_badge.wsd_status_new {background:#fdeeee;color:var(--webis_up)} .ws_schedule_wrap .es_list_area .bs_link .is_badge.wsd_status_hot {background:var(--webis_color_50);color:var(--webis_color_550)} /* 랭킹 */ .ws_ranking_skin_wrap .es_list_area {display:grid;padding:.6rem 2.2rem 1.6rem} .ws_ranking_skin_wrap .es_list_area .bs_link {display:grid;grid-template-columns:3.4rem minmax(0,1fr) 8.8rem;gap:1.4rem;align-items:center;padding:1.3rem 0;border-bottom:.1rem solid #f0f2f5} .ws_ranking_skin_wrap .es_list_area .bs_link:last-child {border-bottom:0} .ws_ranking_skin_wrap .es_list_area .bs_link .is_rank {font-style:normal;font-size:2rem;font-weight:800;color:var(--webis_muted_light);text-align:center} .ws_ranking_skin_wrap .es_list_area .bs_link:nth-child(-n+3) .is_rank {color:var(--portal,var(--webis_color))} .ws_ranking_skin_wrap .es_list_area .bs_link .is_body .ss_title {font-size:1.5rem;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ws_ranking_skin_wrap .es_list_area .bs_link .is_body .ss_meta_field {display:flex;gap:1rem;margin-top:.4rem;color:var(--webis_muted_light);font-size:1.28rem} .ws_ranking_skin_wrap .es_list_area .bs_link .is_thumb {width:8.8rem;height:6.2rem;border-radius:var(--webis_radius_sm);object-fit:cover} /* 리스트 (기본 게시판) */ .ws_list_skin_wrap .es_list_area {display:grid;padding:.4rem 1.2rem 1.2rem} .ws_list_skin_wrap .es_list_area .bs_link {display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:1rem;align-items:center;min-height:4.4rem;border-radius:var(--webis_radius_sm);padding:0 1rem;font-size:1.42rem} .ws_list_skin_wrap .es_list_area .bs_link:hover {background:#f4f6f9} .ws_list_skin_wrap .es_list_area .bs_link .is_badge {display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700;flex:0 0 auto} .ws_list_skin_wrap .es_list_area .bs_link .is_badge.wsd_status_new {background:#fdeeee;color:var(--webis_up)} .ws_list_skin_wrap .es_list_area .bs_link .is_badge.wsd_status_hot {background:var(--webis_color_50);color:var(--webis_color_550)} .ws_list_skin_wrap .es_list_area .bs_link .is_title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .ws_list_skin_wrap .es_list_area .bs_link .is_title em {margin-left:.5rem;color:var(--webis_up);font-size:1.25rem;font-style:normal;font-weight:800} .ws_list_skin_wrap .es_list_area .bs_link .is_meta {display:flex;gap:1rem;color:var(--webis_muted);font-size:1.25rem;white-space:nowrap} .ws_list_skin_wrap .es_list_area .bs_link .is_time {color:var(--webis_muted_light);font-size:1.25rem;white-space:nowrap} /* FAQ (native details) */ .ws_faq_wrap .es_list_area {display:grid;padding:0 2rem 1.6rem} .ws_faq_wrap .es_list_area .bs_item {border-bottom:.1rem solid #f0f2f5} .ws_faq_wrap .es_list_area .bs_item:last-child {border-bottom:0} .ws_faq_wrap .es_list_area .bs_item summary {display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:1rem;align-items:center;min-height:5.4rem;padding:.6rem 0;cursor:pointer;list-style:none;font-size:1.5rem;font-weight:600} .ws_faq_wrap .es_list_area .bs_item summary::-webkit-details-marker {display:none} .ws_faq_wrap .es_list_area .bs_item summary:hover {color:var(--webis_color_550)} .ws_faq_wrap .es_list_area .bs_item summary .ss_q {color:var(--portal,var(--webis_color));font-size:1.5rem;font-weight:800} .ws_faq_wrap .es_list_area .bs_item summary .ss_toggle {color:var(--webis_muted_light);font-size:1.6rem;transition:transform .18s ease} .ws_faq_wrap .es_list_area .bs_item[open] summary .ss_toggle {transform:rotate(180deg)} .ws_faq_wrap .es_list_area .bs_item .is_answer {display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:0 0 1.8rem} .ws_faq_wrap .es_list_area .bs_item .is_answer .ss_a {color:var(--webis_point);font-size:1.5rem;font-weight:800} .ws_faq_wrap .es_list_area .bs_item .is_answer .ss_text {color:#4a5464;font-size:1.42rem;line-height:1.7} /* 뷰 하단 "목록" 헤더 */ .ws_list_skin_wrap > .es_viewlist_area {display:flex;align-items:center;justify-content:space-between;min-height:5rem;padding:0 2.2rem;border-top:.6rem solid var(--webis_soft);border-bottom:.1rem solid #f0f2f5} .ws_list_skin_wrap > .es_viewlist_area strong {font-size:1.5rem;font-weight:800} .ws_list_skin_wrap > .es_viewlist_area a {color:var(--webis_muted);font-size:1.3rem} .ws_list_skin_wrap > .es_viewlist_area a:hover {color:var(--webis_ink)} /* [CONTAINER] - 뷰페이지 (게시글·기사·공고·질문·문서 공용) — 본문·댓글·이전다음 */ .ws_post_wrap {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;overflow:hidden} .ws_post_wrap .es_head_area {padding:2.4rem 2.4rem 0} .ws_post_wrap .es_head_area .bs_badge_box {display:flex;align-items:center;gap:.8rem;margin-bottom:1rem} .ws_post_wrap .es_head_area .bs_badge_box .is_badge {display:inline-flex;height:2rem;align-items:center;border-radius:.5rem;padding:0 .6rem;font-size:1.2rem;font-weight:700} .ws_post_wrap .es_head_area .bs_badge_box .is_badge.wsd_status_new {background:#fdeeee;color:var(--webis_up)} .ws_post_wrap .es_head_area .bs_badge_box .is_badge.wsd_status_hot {background:var(--webis_color_50);color:var(--webis_color_550)} .ws_post_wrap .es_head_area .bs_badge_box .is_cat {color:var(--webis_muted);font-size:1.3rem} .ws_post_wrap .es_head_area .bs_title {font-size:2.6rem;font-weight:800;line-height:1.4;letter-spacing:-.04em} .ws_post_wrap .es_head_area .bs_meta_field {display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:1.2rem;padding-bottom:1.8rem;border-bottom:.1rem solid #f0f2f5;color:var(--webis_muted);font-size:1.35rem} .ws_post_wrap .es_head_area .bs_meta_field b {color:var(--webis_ink);font-weight:700} .ws_post_wrap .es_body_area {padding:2.2rem 2.4rem;max-width:76rem} .ws_post_wrap .es_body_area p {margin-bottom:1.6rem;color:#2c3443;font-size:1.55rem;line-height:1.85} .ws_post_wrap .es_body_area img {border-radius:var(--webis_radius_md);margin:.6rem 0} .ws_post_wrap .es_body_area figcaption {margin:-.2rem 0 1.6rem;color:var(--webis_muted_light);font-size:1.28rem} .ws_post_wrap .es_action_area {display:flex;flex-wrap:wrap;gap:.8rem;padding:0 2.4rem 2.4rem} .ws_post_wrap .es_action_area .bs_action {display:inline-flex;min-height:4.2rem;align-items:center;justify-content:center;gap:.6rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.5rem;font-size:1.4rem;font-weight:600} .ws_post_wrap .es_action_area .bs_action:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .ws_post_wrap .es_action_area .bs_action.wsd_primary {border-color:var(--portal,var(--webis_color));background:var(--portal,var(--webis_color));color:#fff} .ws_post_wrap .es_comment_area {padding:.6rem 2.4rem 2.4rem} .ws_post_wrap .es_comment_area .bs_item {display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;padding:1.6rem 0;border-bottom:.1rem solid #f0f2f5} .ws_post_wrap .es_comment_area .bs_item:last-of-type {border-bottom:0} .ws_post_wrap .es_comment_area .bs_item .is_avatar {display:grid;width:3.8rem;height:3.8rem;place-items:center;border-radius:50%;background:var(--avatar,#eef0fe);color:var(--avatar-c,var(--webis_color));font-size:1.5rem;font-weight:800} .ws_post_wrap .es_comment_area .bs_item .is_body .ss_head {display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;font-size:1.35rem} .ws_post_wrap .es_comment_area .bs_item .is_body .ss_head b {font-weight:800} .ws_post_wrap .es_comment_area .bs_item .is_body .ss_head small {color:var(--webis_muted_light);font-size:1.22rem} .ws_post_wrap .es_comment_area .bs_item .is_body .ss_text {margin-top:.4rem;color:#3d4557;font-size:1.42rem;line-height:1.65} .ws_post_wrap .es_comment_area .bs_item .is_body .ss_tools {display:flex;gap:1.2rem;margin-top:.6rem;color:var(--webis_muted_light);font-size:1.25rem} .ws_post_wrap .es_comment_area .bs_item .is_body .ss_tools button:hover {color:var(--webis_ink);text-decoration:underline} .ws_post_wrap .es_comment_area .bs_write_box {display:grid;gap:.8rem;margin-top:1.6rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);padding:1.4rem} .ws_post_wrap .es_comment_area .bs_write_box .is_textarea {min-height:8rem;border:0;outline:0;resize:vertical;font-size:1.42rem;line-height:1.6} .ws_post_wrap .es_comment_area .bs_write_box .is_foot {display:flex;align-items:center;justify-content:space-between;color:var(--webis_muted_light);font-size:1.25rem} .ws_post_wrap .es_comment_area .bs_write_box .is_foot .ss_submit {display:inline-flex;min-height:3.8rem;align-items:center;padding:0 1.6rem;border-radius:var(--webis_radius_sm);background:var(--portal,var(--webis_color));color:#fff;font-size:1.35rem;font-weight:700} .ws_post_wrap .es_prevnext_area {display:grid;border-top:.1rem solid var(--webis_line)} .ws_post_wrap .es_prevnext_area .bs_link {display:grid;grid-template-columns:8rem minmax(0,1fr) auto;gap:1.2rem;align-items:center;min-height:4.8rem;padding:0 2.4rem;border-bottom:.1rem solid #f0f2f5;font-size:1.4rem} .ws_post_wrap .es_prevnext_area .bs_link:hover {background:#fafbfd} .ws_post_wrap .es_prevnext_area .bs_link .is_dir {color:var(--webis_muted);font-size:1.3rem;font-weight:700} .ws_post_wrap .es_prevnext_area .bs_link .is_subject {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .ws_post_wrap .es_prevnext_area .bs_link .is_time {color:var(--webis_muted_light);font-size:1.25rem} mark.wsd_highlight {background:none;color:var(--portal,var(--webis_color));font-weight:800} /* [CONTAINER-SUB] 공고 스펙카드 · 위키 문서 2열 · 인기글 히어로 */ .ws_post_wrap .es_spec_area {display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;padding:1.8rem 2.4rem 0} .ws_post_wrap .es_spec_area .bs_spec {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_sm);background:#fafbfd;padding:1.2rem 1.4rem} .ws_post_wrap .es_spec_area .bs_spec .is_label {color:var(--webis_muted);font-size:1.25rem} .ws_post_wrap .es_spec_area .bs_spec .is_value {display:block;margin-top:.2rem;font-size:1.5rem;font-weight:800} .ws_post_wrap .es_body_area .bs_wikigrid {display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2.4rem} .ws_post_wrap .es_body_area .bs_wikigrid .wsd_main h2 {font-size:1.8rem;font-weight:800;letter-spacing:-.03em;margin:2rem 0 .6rem;padding-top:1.6rem;border-top:.1rem solid #f0f2f5} .ws_post_wrap .es_body_area .bs_wikigrid .is_infobox {align-self:start;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);overflow:hidden} .ws_post_wrap .es_body_area .bs_wikigrid .is_infobox img {width:100%;height:14rem;object-fit:cover;border-radius:0;margin:0} .ws_post_wrap .es_body_area .bs_wikigrid .is_infobox table {width:100%;border-collapse:collapse;font-size:1.28rem} .ws_post_wrap .es_body_area .bs_wikigrid .is_infobox td {border-bottom:.1rem solid #f0f2f5;padding:.9rem 1.2rem;color:#3d4557} .ws_post_wrap .es_body_area .bs_wikigrid .is_infobox tr:last-child td {border-bottom:0} .ws_hot_hero_wrap {display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 1fr;gap:1.2rem} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 지도 셸 (map_template / service_realty) — 아이콘레일 + 패널 + 상세 + 캔버스 + 필터시트, --portal 스왑 * 원본 soto.css "map app v2" 1:1 이식. 상태: wsa_active · wsa_sheet_collapsed · wsa_panel_closed * ---------------------------------------------------------------------------------------------------- */ .ws_map_app_wrap {position:relative;display:grid;height:100vh;grid-template-columns:7.2rem 38rem minmax(0,1fr);overflow:hidden;background:#e8ecef} /* 아이콘레일 */ .ws_map_app_wrap .es_iconrail_area {position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.3rem;background:#fff;border-right:.1rem solid var(--webis_line);padding:1.2rem .8rem;overflow-y:auto} .ws_map_app_wrap .es_iconrail_area .bs_brand {display:inline-flex;margin-bottom:1rem} .ws_map_app_wrap .es_iconrail_area .bs_brand .is_mark {display:grid;width:4rem;height:4rem;place-items:center;border-radius:1.2rem;background:var(--webis_brand_gradient);color:#fff;font-size:1.8rem;font-weight:800} .ws_map_app_wrap .es_iconrail_area .bs_cat {display:flex;width:5.6rem;flex-direction:column;align-items:center;gap:.4rem;border:.1rem solid transparent;border-radius:var(--webis_radius_md);padding:.9rem 0 .7rem;color:#525c6d;font-size:1.2rem;font-weight:600;text-align:center} .ws_map_app_wrap .es_iconrail_area .bs_cat i {font-size:2rem} .ws_map_app_wrap .es_iconrail_area .bs_cat:hover {background:#f4f6f9;color:var(--webis_ink)} .ws_map_app_wrap .es_iconrail_area .bs_cat.wsa_active {border-color:color-mix(in srgb,var(--portal,#4846f5) 35%,#fff);background:color-mix(in srgb,var(--portal,#4846f5) 8%,#fff);color:var(--portal,#4846f5);font-weight:800} .ws_map_app_wrap .es_iconrail_area .bs_foot_box {margin-top:auto;display:grid;gap:.2rem;padding-top:1rem} .ws_map_app_wrap .es_iconrail_area .bs_foot_box .is_link {display:grid;width:4.4rem;height:4.4rem;place-items:center;border-radius:var(--webis_radius_md);color:#6c7684;font-size:1.9rem} .ws_map_app_wrap .es_iconrail_area .bs_foot_box .is_link:hover {background:#f4f6f9;color:var(--webis_ink)} /* 결과 패널 */ .ws_map_app_wrap .es_panel_area {position:relative;z-index:5;display:flex;flex-direction:column;background:#fff;border-right:.1rem solid var(--webis_line);overflow:hidden} .ws_map_app_wrap .es_panel_area .bs_sheet_button {display:none} .ws_map_app_wrap .es_panel_area .bs_head_box {background:var(--portal,#4846f5);padding:1.4rem 1.6rem 1.2rem} .ws_map_app_wrap .es_panel_area .bs_head_box .is_brand_field {display:flex;align-items:center;justify-content:space-between;color:#fff} .ws_map_app_wrap .es_panel_area .bs_head_box .is_brand_field .ss_title {color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_map_app_wrap .es_panel_area .bs_head_box .is_brand_field .ss_links_zone {display:flex;align-items:center;gap:.2rem} .ws_map_app_wrap .es_panel_area .bs_head_box .is_brand_field .ss_links_zone .ks_link {display:grid;width:3.4rem;height:3.4rem;place-items:center;border-radius:.8rem;color:rgba(255,255,255,.85);font-size:1.7rem} .ws_map_app_wrap .es_panel_area .bs_head_box .is_brand_field .ss_links_zone .ks_link:hover {background:rgba(255,255,255,.14);color:#fff} .ws_map_app_wrap .es_panel_area .bs_head_box .is_search_field {display:flex;height:4.8rem;margin-top:1.2rem;border-radius:var(--webis_radius_sm);background:#fff;overflow:hidden} .ws_map_app_wrap .es_panel_area .bs_head_box .is_search_field .ss_input {min-width:0;flex:1;border:0;padding:0 1.4rem;outline:0;font-size:1.45rem} .ws_map_app_wrap .es_panel_area .bs_head_box .is_search_field .ss_button {display:grid;width:4.8rem;place-items:center;color:var(--portal,#4846f5);font-size:1.9rem} .ws_map_app_wrap .es_panel_area .bs_tab_box {display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:.1rem solid var(--webis_line)} .ws_map_app_wrap .es_panel_area .bs_tab_box .is_tab {position:relative;height:4.6rem;color:var(--webis_muted);font-size:1.4rem;font-weight:600} .ws_map_app_wrap .es_panel_area .bs_tab_box .is_tab:hover {color:var(--webis_ink)} .ws_map_app_wrap .es_panel_area .bs_tab_box .is_tab.wsa_active {color:var(--portal,#4846f5);font-weight:800} .ws_map_app_wrap .es_panel_area .bs_tab_box .is_tab.wsa_active::after {content:'';position:absolute;right:1.2rem;bottom:0;left:1.2rem;height:.25rem;background:var(--portal,#4846f5)} .ws_map_app_wrap .es_panel_area .bs_filter_box {display:flex;gap:.6rem;padding:1rem 1.6rem;border-bottom:.1rem solid #f0f2f5;overflow-x:auto;scrollbar-width:none;white-space:nowrap} .ws_map_app_wrap .es_panel_area .bs_filter_box::-webkit-scrollbar {display:none} .ws_map_app_wrap .es_panel_area .bs_meta_box {display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.6rem;border-bottom:.1rem solid #f0f2f5;color:var(--webis_muted);font-size:1.3rem} .ws_map_app_wrap .es_panel_area .bs_meta_box .is_count {} .ws_map_app_wrap .es_panel_area .bs_meta_box b {color:var(--webis_ink);font-weight:800} .ws_map_app_wrap .es_panel_area .bs_result_box {flex:1;overflow-y:auto;overscroll-behavior:contain} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item {padding:1.6rem;border-bottom:.1rem solid #f0f2f5;cursor:pointer} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item:hover, .ws_map_app_wrap .es_panel_area .bs_result_box .is_item.wsa_active {background:#f6f8fb} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item.has_thumb {display:grid;grid-template-columns:minmax(0,1fr) 8.8rem;gap:1.2rem;align-items:start} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_thumb {width:8.8rem;height:6.6rem;border-radius:var(--webis_radius_sm);object-fit:cover;background:#eef0f4} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_head_zone {display:flex;align-items:baseline;gap:.8rem} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_head_zone .os_title {font-size:1.55rem;font-weight:700} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_head_zone .os_cat {color:var(--webis_muted_light);font-size:1.25rem} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_line {margin-top:.4rem;color:var(--webis_muted);font-size:1.32rem} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_line.is_price {margin-top:.5rem;color:var(--webis_ink);font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_line.is_price span {color:#6c7684;font-weight:500;font-size:1.3rem} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_line.wsd_type_tel {color:var(--webis_url);font-weight:700} .ws_map_app_wrap .es_panel_area .bs_result_box .is_item .ss_content_field .ks_line.wsd_status_hot {color:var(--portal,#f07822);font-weight:700} .ws_map_app_wrap .es_panel_area .bs_foot_box {display:flex;align-items:center;justify-content:space-between;border-top:.1rem solid var(--webis_line);padding:1rem 1.6rem;color:var(--webis_muted_light);font-size:1.2rem;background:#fafbfd} .ws_map_app_wrap .es_panel_area .bs_foot_box .is_link:hover {color:var(--webis_ink)} /* 상세 패널 */ .ws_map_app_wrap .es_detail_area {position:absolute;top:0;bottom:0;left:calc(7.2rem + 38rem);z-index:7;width:38rem;background:#fff;border-right:.1rem solid var(--webis_line);box-shadow:var(--webis_shadow_float);overflow-y:auto;overscroll-behavior:contain} .ws_map_app_wrap .es_detail_area .bs_head_box {position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:.1rem solid #f0f2f5;padding:1rem 1rem 1rem 1.6rem} .ws_map_app_wrap .es_detail_area .bs_head_box .is_title {font-size:1.45rem;font-weight:800} .ws_map_app_wrap .es_detail_area .bs_head_box .is_close_button {display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:var(--webis_radius_sm);color:#525c6d;font-size:1.8rem} .ws_map_app_wrap .es_detail_area .bs_head_box .is_close_button:hover {background:#f1f3f7;color:var(--webis_ink)} .ws_map_app_wrap .es_detail_area .bs_item .is_photo_field {display:grid;grid-template-columns:2fr 1fr;gap:.4rem;padding:1.2rem 1.6rem 0} .ws_map_app_wrap .es_detail_area .bs_item .is_photo_field .ss_image {width:100%;height:100%;min-height:9rem;object-fit:cover;border-radius:.6rem;background:#eef0f4} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field {padding:1.6rem} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_title {font-size:1.8rem;font-weight:800;letter-spacing:-.03em} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_title small {margin-left:.6rem;color:var(--webis_muted_light);font-size:1.25rem;font-weight:500} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_price {margin-top:.6rem;font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_price small {margin-left:.6rem;color:var(--webis_muted);font-size:1.3rem;font-weight:500} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_tag_zone {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_row_zone {display:grid;margin-top:1.2rem} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_row_zone .ks_row {display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:3.9rem;border-bottom:.1rem solid #f0f2f5;font-size:1.35rem} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_row_zone .ks_row .os_label {color:var(--webis_muted)} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_row_zone .ks_row .os_value {font-weight:600;text-align:right} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone {margin-top:1.8rem} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone .ks_title {margin-bottom:.6rem;font-size:1.4rem;font-weight:800} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone .ks_table {width:100%;border-collapse:collapse;font-size:1.32rem} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone .ks_table th {border-bottom:.1rem solid var(--webis_line_strong);background:#fafbfd;padding:.9rem 1rem;color:var(--webis_ink_soft);font-weight:700;text-align:left} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone .ks_table td {border-bottom:.1rem solid #f0f2f5;padding:.9rem 1rem;color:#3d4557} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone .ks_table .is_num {text-align:right;font-variant-numeric:tabular-nums} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_section_zone .ks_table .is_strong {font-weight:800;color:var(--webis_ink)} .ws_map_app_wrap .es_detail_area .bs_item .is_body_field .ss_action_zone {display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.6rem} /* 칩·액션 (지도 공용) */ .wsd_map_chip {display:inline-flex;min-height:3.2rem;align-items:center;gap:.5rem;border:.1rem solid var(--webis_line_strong);border-radius:1.7rem;background:#fff;padding:0 1.1rem;color:#4a5464;font-size:1.25rem;font-weight:600;flex:0 0 auto;cursor:pointer} .wsd_map_chip:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .wsd_map_chip.wsa_active {border-color:var(--portal,#4846f5);background:color-mix(in srgb,var(--portal,#4846f5) 8%,#fff);color:var(--portal,#4846f5)} .wsd_map_action {display:inline-flex;min-height:4.4rem;align-items:center;justify-content:center;gap:.6rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.2rem;font-size:1.35rem;font-weight:600} .wsd_map_action:hover {border-color:var(--webis_line_hover);background:#f8f9fb} .wsd_map_action.wsd_primary {border-color:var(--portal,#4846f5);background:var(--portal,#4846f5);color:#fff} /* 캔버스 */ .ws_map_app_wrap .es_canvas_area {position:relative;overflow:hidden;background:#eef1ea} .ws_map_app_wrap .es_canvas_area svg {position:absolute;inset:0;width:100%;height:100%} .ws_map_app_wrap .es_canvas_area .bs_marker {position:absolute;z-index:4;display:grid;width:3.8rem;height:3.8rem;place-items:center;border:.3rem solid #fff;border-radius:50% 50% 50% 0;background:var(--portal,#4846f5);color:#fff;box-shadow:0 .6rem 1.4rem rgba(20,26,48,.28);transform:rotate(-45deg);font-size:1.6rem} .ws_map_app_wrap .es_canvas_area .bs_marker i {transform:rotate(45deg)} .ws_map_app_wrap .es_canvas_area .bs_price_tag {position:absolute;z-index:4;transform:translate(-50%,-120%);border:.1rem solid #d5dbe4;border-radius:.6rem;background:#fff;padding:.4rem .8rem;font-size:1.25rem;font-weight:800;box-shadow:var(--webis_shadow_raise);white-space:nowrap;font-variant-numeric:tabular-nums} .ws_map_app_wrap .es_canvas_area .bs_price_tag.wsa_active {border-color:var(--portal,#4846f5);background:var(--portal,#4846f5);color:#fff} .ws_map_app_wrap .es_canvas_area .bs_chipbar_box {position:absolute;top:1.4rem;left:1.6rem;z-index:6;display:flex;gap:.6rem} .ws_map_app_wrap .es_canvas_area .bs_chipbar_box .wsd_map_chip {box-shadow:var(--webis_shadow_raise);border-color:#dfe4ea} .ws_map_app_wrap .es_canvas_area .bs_mode_box {position:absolute;top:1.4rem;right:1.6rem;z-index:6;display:flex;border:.1rem solid #dfe4ea;border-radius:var(--webis_radius_sm);background:#fff;overflow:hidden;box-shadow:var(--webis_shadow_raise)} .ws_map_app_wrap .es_canvas_area .bs_mode_box .is_button {height:3.8rem;padding:0 1.4rem;font-size:1.3rem;font-weight:600;color:var(--webis_muted)} .ws_map_app_wrap .es_canvas_area .bs_mode_box .is_button.wsa_active {background:var(--portal,#4846f5);color:#fff;font-weight:700} .ws_map_app_wrap .es_canvas_area .bs_zoom_box {position:absolute;right:1.6rem;bottom:2.4rem;z-index:6;display:grid;border:.1rem solid #dfe4ea;border-radius:var(--webis_radius_sm);background:#fff;overflow:hidden;box-shadow:var(--webis_shadow_raise)} .ws_map_app_wrap .es_canvas_area .bs_zoom_box .is_button {display:grid;width:4rem;height:4rem;place-items:center;color:#3d4557;font-size:1.7rem} .ws_map_app_wrap .es_canvas_area .bs_zoom_box .is_button + .is_button {border-top:.1rem solid var(--webis_line)} .ws_map_app_wrap .es_canvas_area .bs_zoom_box .is_button:hover {background:#f4f6f9} .ws_map_app_wrap .es_canvas_area .bs_scale {position:absolute;left:1.6rem;bottom:1.4rem;z-index:6;color:#59626f;font-size:1.2rem;background:rgba(255,255,255,.85);border-radius:.4rem;padding:.2rem .8rem} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box {display:none} /* 패널 접기 토글 */ .ws_map_app_wrap .es_panel_toggle {position:absolute;top:50%;left:calc(7.2rem + 38rem);z-index:7;display:none;width:2.6rem;height:5.6rem;place-items:center;border:.1rem solid #dfe4ea;border-left:0;border-radius:0 .8rem .8rem 0;background:#fff;color:#525c6d;transform:translateY(-50%);box-shadow:var(--webis_shadow_raise)} /* 전체필터 시트 */ .ws_map_app_wrap .es_filtersheet_area {position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(15,19,32,.42);padding:2rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box {display:flex;width:min(44rem,100%);max-height:min(66rem,100%);flex-direction:column;background:#fff;border-radius:var(--webis_radius_xl);overflow:hidden} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_head_field {display:flex;align-items:center;justify-content:space-between;border-bottom:.1rem solid var(--webis_line);padding:1.4rem 1.4rem 1.4rem 2rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_head_field .ss_title {font-size:1.6rem;font-weight:800} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_head_field .ss_close_button {display:grid;width:3.8rem;height:3.8rem;place-items:center;border-radius:var(--webis_radius_sm);color:#525c6d;font-size:1.8rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_head_field .ss_close_button:hover {background:#f1f3f7;color:var(--webis_ink)} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_body_field {flex:1;overflow-y:auto;padding:.4rem 2rem 1.6rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_body_field .ss_title {margin:1.8rem 0 .8rem;font-size:1.4rem;font-weight:800} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_body_field .ss_title small {color:#97a1b0;font-weight:500} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_body_field .ss_chip_zone .wsd_map_chip {margin:0 .4rem .4rem 0} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_body_field .ss_select_zone {display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_body_field .ss_select_zone select {height:4.6rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.2rem;font-size:1.4rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_foot_field {display:grid;grid-template-columns:1fr 2fr;gap:.8rem;border-top:.1rem solid var(--webis_line);padding:1.2rem 2rem;background:#fafbfd} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_foot_field .wsd_map_action {min-height:4.8rem} .ws_map_app_wrap .es_filtersheet_area .bs_card_box .is_foot_field .wsd_map_action.wsd_primary {background:var(--portal,#4846f5);border-color:var(--portal,#4846f5)} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 로그인·가입 · 가이드 · 정책문서 · 전체 서비스 허브 * ---------------------------------------------------------------------------------------------------- */ .ws_auth_wrap {min-height:100vh;display:grid;align-content:center;justify-items:center;background:var(--webis_soft);padding:4rem 1.6rem} .ws_auth_wrap .es_card_area {width:min(42rem,100%);border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_xl);background:#fff;padding:3.2rem 3.2rem 2.8rem} .ws_auth_wrap .es_card_area .bs_brand {display:inline-flex;align-items:center;gap:.9rem;font-weight:800;font-size:2rem;letter-spacing:-.05em} .ws_auth_wrap .es_card_area .bs_brand .is_mark {display:grid;width:3rem;height:3rem;place-items:center;border-radius:.9rem;background:var(--webis_brand_gradient);color:#fff;font-size:1.4rem;font-weight:800} .ws_auth_wrap .es_card_area .bs_brand .is_text span {color:var(--webis_color)} .ws_auth_wrap .es_card_area .bs_title {margin-top:2.2rem;font-size:2.3rem;font-weight:800;letter-spacing:-.04em} .ws_auth_wrap .es_card_area .bs_desc {margin-top:.5rem;color:var(--webis_muted);font-size:1.4rem} .ws_auth_wrap .es_card_area .bs_field_box {display:grid;gap:1rem;margin-top:2.2rem} .ws_auth_wrap .es_card_area .bs_field_box .is_field {display:grid;gap:.5rem;color:var(--webis_muted);font-size:1.3rem;font-weight:700} .ws_auth_wrap .es_card_area .bs_field_box .is_field input {height:5.2rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.4rem;font-size:1.5rem;outline:0} .ws_auth_wrap .es_card_area .bs_field_box .is_field input:focus {border-color:var(--webis_color)} .ws_auth_wrap .es_card_area .bs_row {display:flex;align-items:center;justify-content:space-between;margin-top:1.2rem;color:var(--webis_muted);font-size:1.3rem} .ws_auth_wrap .es_card_area .bs_row a:hover {color:var(--webis_ink);text-decoration:underline} .ws_auth_wrap .es_card_area .bs_submit {display:grid;width:100%;place-items:center;min-height:5.2rem;margin-top:1.6rem;border-radius:var(--webis_radius_sm);background:var(--webis_color);color:#fff;font-size:1.55rem;font-weight:700} .ws_auth_wrap .es_card_area .bs_submit:hover {background:var(--webis_color_550)} .ws_auth_wrap .es_card_area .bs_divider {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;margin:2rem 0 1.4rem;color:var(--webis_muted_light);font-size:1.25rem} .ws_auth_wrap .es_card_area .bs_divider::before, .ws_auth_wrap .es_card_area .bs_divider::after {content:'';height:.1rem;background:var(--webis_line)} .ws_auth_wrap .es_card_area .bs_sns_box {display:grid;gap:.8rem} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns {display:grid;grid-template-columns:2.4rem minmax(0,1fr) 2.4rem;align-items:center;min-height:4.8rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);background:#fff;padding:0 1.4rem;font-size:1.42rem;font-weight:600;text-align:center} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns:hover {filter:brightness(.97)} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns i {font-size:1.8rem} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns .is_provider_mark {font-size:1.6rem;font-weight:800} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns.wsd_sns_kakao {border-color:#fee500;background:#fee500;color:#191919} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns.wsd_sns_naver {border-color:#03c75a;background:#03c75a;color:#fff} .ws_auth_wrap .es_card_area .bs_sns_box .is_sns.wsd_sns_apple {border-color:#111;background:#111;color:#fff} .ws_auth_wrap .es_card_area .bs_foot {margin-top:2.2rem;text-align:center;color:var(--webis_muted);font-size:1.35rem} .ws_auth_wrap .es_card_area .bs_foot a {color:var(--webis_color);font-weight:700} .ws_auth_wrap .es_card_area .bs_step_box {display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:2.2rem} .ws_auth_wrap .es_card_area .bs_step_box .is_step {display:grid;place-items:center;min-height:3.6rem;border-radius:var(--webis_radius_sm);background:#f2f3f6;color:var(--webis_muted);font-size:1.25rem;font-weight:700} .ws_auth_wrap .es_card_area .bs_step_box .is_step.wsa_active {background:var(--webis_color_50);color:var(--webis_color_550)} .ws_auth_wrap .es_card_area .bs_agree_box {display:grid;gap:.2rem;margin-top:2rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);padding:1.4rem 1.6rem} .ws_auth_wrap .es_card_area .bs_agree_box .is_agree {display:flex;align-items:center;gap:.9rem;min-height:3.6rem;font-size:1.38rem;color:var(--webis_ink_soft);cursor:pointer} .ws_auth_wrap .es_card_area .bs_agree_box .is_agree.wsd_all {border-bottom:.1rem solid #f0f2f5;padding-bottom:1rem;margin-bottom:.6rem;font-weight:800;color:var(--webis_ink)} .ws_auth_wrap .es_card_area .bs_agree_box .is_agree input {width:1.8rem;height:1.8rem;accent-color:var(--webis_color)} .ws_auth_wrap .es_card_area .bs_agree_box .is_agree a {margin-left:auto;color:var(--webis_muted_light);font-size:1.25rem} .ws_auth_wrap > .es_foot_area {margin-top:2rem;color:var(--webis_muted_light);font-size:1.25rem} .ws_auth_wrap > .es_foot_area a:hover {color:var(--webis_ink)} /* 가이드 */ .ws_guide_wrap {padding:2.8rem 0 8rem} .ws_guide_wrap > .we_area {display:grid;grid-template-columns:24rem minmax(0,1fr) 18rem;gap:3.6rem;align-items:start} .ws_guide_wrap .es_side_area {position:sticky;top:8rem;display:grid;gap:1.8rem;max-height:calc(100vh - 10rem);overflow-y:auto} .ws_guide_wrap .es_side_area .bs_group .is_label {display:block;margin-bottom:.4rem;color:var(--webis_ink);font-size:1.3rem;font-weight:800} .ws_guide_wrap .es_side_area .bs_group .is_link {display:flex;align-items:center;min-height:3.6rem;border-left:.2rem solid var(--webis_line);padding:0 1.2rem;color:var(--webis_muted);font-size:1.38rem} .ws_guide_wrap .es_side_area .bs_group .is_link:hover {color:var(--webis_ink);border-left-color:var(--webis_line_strong)} .ws_guide_wrap .es_side_area .bs_group .is_link.wsa_active {border-left-color:var(--webis_color);color:var(--webis_color_550);font-weight:700;background:linear-gradient(90deg,rgba(72,70,245,.05),transparent)} .ws_guide_wrap .es_body_area {max-width:72rem} .ws_guide_wrap .es_body_area .bs_crumb {display:flex;align-items:center;gap:.6rem;color:var(--webis_muted_light);font-size:1.3rem} .ws_guide_wrap .es_body_area .bs_title {margin-top:1rem;font-size:3rem;font-weight:800;letter-spacing:-.045em} .ws_guide_wrap .es_body_area .bs_lead {margin-top:.8rem;color:var(--webis_muted);font-size:1.55rem;line-height:1.65} .ws_guide_wrap .es_body_area h2 {margin:3.6rem 0 1rem;padding-top:2rem;border-top:.1rem solid var(--webis_line);font-size:2rem;font-weight:800;letter-spacing:-.03em} .ws_guide_wrap .es_body_area p {margin-top:.8rem;color:#3d4557;font-size:1.48rem;line-height:1.75} .ws_guide_wrap .es_body_area .bs_steps {display:grid;gap:.8rem;margin-top:1.4rem;counter-reset:gstep} .ws_guide_wrap .es_body_area .bs_steps li {display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1.2rem;align-items:start;counter-increment:gstep;font-size:1.45rem;line-height:1.7;color:#3d4557} .ws_guide_wrap .es_body_area .bs_steps li::before {content:counter(gstep);display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--webis_color_50);color:var(--webis_color_550);font-size:1.3rem;font-weight:800} .ws_guide_wrap .es_body_area .bs_callout {display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;margin-top:1.8rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fafbfd;padding:1.4rem 1.6rem} .ws_guide_wrap .es_body_area .bs_callout i {color:var(--webis_color);font-size:2rem} .ws_guide_wrap .es_body_area .bs_callout.wsd_warning i {color:var(--webis_up)} .ws_guide_wrap .es_body_area .bs_callout p {margin:0;font-size:1.4rem;color:var(--webis_ink_soft)} .ws_guide_wrap .es_toc_area {position:sticky;top:8rem;display:grid;gap:.2rem;border-left:.1rem solid var(--webis_line);padding-left:1.4rem} .ws_guide_wrap .es_toc_area .bs_label {margin-bottom:.4rem;color:var(--webis_muted);font-size:1.2rem;font-weight:800;letter-spacing:.06em} .ws_guide_wrap .es_toc_area .bs_link {min-height:3rem;display:flex;align-items:center;color:var(--webis_muted);font-size:1.3rem} .ws_guide_wrap .es_toc_area .bs_link:hover {color:var(--webis_color_550)} /* 정책문서 */ .ws_doc_wrap {padding:2.8rem 0 8rem} .ws_doc_wrap .es_body_area {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:2.8rem 3.2rem;max-width:none} .ws_doc_wrap .es_body_area .bs_title {font-size:2.8rem;font-weight:800;letter-spacing:-.045em} .ws_doc_wrap .es_body_area .bs_meta {display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:1rem;color:var(--webis_muted);font-size:1.35rem} .ws_doc_wrap .es_body_area .bs_meta select {height:3.8rem;border:.1rem solid var(--webis_line_strong);border-radius:var(--webis_radius_sm);padding:0 1rem;font-size:1.3rem} .ws_doc_wrap .es_body_area h2 {margin:3.4rem 0 .8rem;font-size:1.8rem;font-weight:800;letter-spacing:-.03em} .ws_doc_wrap .es_body_area p, .ws_doc_wrap .es_body_area li {color:#3d4557;font-size:1.45rem;line-height:1.75} .ws_doc_wrap .es_body_area ul {display:grid;gap:.4rem;margin-top:.6rem;padding-left:1.8rem;list-style:disc} .ws_doc_wrap .es_body_area table {width:100%;border-collapse:collapse;font-size:1.38rem;margin-top:1.2rem} .ws_doc_wrap .es_body_area th {border-bottom:.1rem solid var(--webis_line_strong);background:#fafbfd;padding:1.1rem 1.2rem;color:var(--webis_ink_soft);font-weight:700;text-align:left} .ws_doc_wrap .es_body_area td {border-bottom:.1rem solid #f0f2f5;padding:1.1rem 1.2rem;color:#3d4557} /* 전체 서비스 허브 */ .ws_directory_wrap {padding:4.4rem 0 8rem} .ws_directory_wrap .es_head_area {margin-bottom:2.8rem} .ws_directory_wrap .es_head_area .bs_kicker {color:var(--webis_color);font-size:1.3rem;font-weight:800;letter-spacing:.08em} .ws_directory_wrap .es_head_area .bs_title {margin-top:.4rem;font-size:3.4rem;font-weight:800;letter-spacing:-.05em} .ws_directory_wrap .es_head_area .bs_desc {margin-top:.6rem;color:var(--webis_muted);font-size:1.5rem} .ws_directory_wrap .es_group_area {display:grid;grid-template-columns:20rem minmax(0,1fr);gap:2.4rem;padding:2.8rem 0;border-top:.1rem solid var(--webis_line_strong)} .ws_directory_wrap .es_group_area .bs_head_box .is_title {font-size:1.8rem;font-weight:800;letter-spacing:-.03em} .ws_directory_wrap .es_group_area .bs_head_box .is_desc {margin-top:.5rem;color:var(--webis_muted);font-size:1.3rem;line-height:1.6} .ws_directory_wrap .es_group_area .bs_list_box {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem} .ws_directory_wrap .es_group_area .bs_list_box .is_item {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem;align-items:center;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_lg);padding:1.4rem;background:#fff} .ws_directory_wrap .es_group_area .bs_list_box .is_item:hover {border-color:#c4cbd8} .ws_directory_wrap .es_group_area .bs_list_box .is_item .ss_icon {display:grid;width:4.6rem;height:4.6rem;place-items:center;border-radius:1.4rem;background:color-mix(in srgb,var(--service,#4846f5) 10%,#fff);color:var(--service,#4846f5);font-size:2.1rem} .ws_directory_wrap .es_group_area .bs_list_box .is_item .ss_body .ks_name {display:block;font-size:1.5rem;font-weight:700} .ws_directory_wrap .es_group_area .bs_list_box .is_item .ss_body .ks_desc {display:block;margin-top:.3rem;color:var(--webis_muted);font-size:1.28rem} .ws_directory_wrap .es_group_area .bs_list_box .is_item .ss_go {color:var(--webis_muted_light);font-size:1.6rem} /* ---------------------------------------------------------------------------------------------------- * [CONTAINER] - 디자인 레퍼런스 * ---------------------------------------------------------------------------------------------------- */ .ws_reference_wrap {padding:4.4rem 0 8rem} .ws_reference_wrap .es_head_area {margin-bottom:2.8rem} .ws_reference_wrap .es_head_area .bs_kicker {color:var(--webis_color);font-size:1.3rem;font-weight:800;letter-spacing:.08em} .ws_reference_wrap .es_head_area .bs_title {margin-top:.4rem;font-size:3.4rem;font-weight:800;letter-spacing:-.05em} .ws_reference_wrap .es_head_area .bs_desc {margin-top:.8rem;max-width:72rem;color:var(--webis_muted);font-size:1.5rem;line-height:1.7} .ws_reference_wrap .es_head_area .bs_desc a {color:var(--webis_link);font-weight:700} .ws_reference_wrap .es_head_area .bs_desc a:hover {text-decoration:underline} .ws_reference_wrap .es_section_area {border-top:.1rem solid var(--webis_line_strong);padding:2.8rem 0} .ws_reference_wrap .es_section_area .bs_title {margin-bottom:1.6rem;font-size:1.8rem;font-weight:800;letter-spacing:-.03em} .ws_reference_wrap .es_section_area .bs_title small {color:var(--webis_muted_light);font-size:1.3rem;font-weight:500} .ws_reference_wrap .es_section_area .bs_note {margin-top:1.4rem;color:var(--webis_muted);font-size:1.35rem;line-height:1.6} .ws_reference_wrap .es_section_area .bs_note a {color:var(--webis_link)} .ws_reference_wrap .es_section_area code {border-radius:.4rem;background:#eef0f4;padding:.1rem .6rem;font-size:1.25rem;color:var(--webis_color_850)} .ws_reference_wrap .es_section_area .bs_note .is_grad {display:inline-block;width:8rem;height:1.6rem;border-radius:.8rem;background:var(--webis_brand_gradient);vertical-align:middle} .ws_reference_wrap .es_section_area .bs_swatch_box {display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));gap:.8rem} .ws_reference_wrap .es_section_area .bs_swatch_box .is_item {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_sm);background:#fff;padding:1rem 1.2rem;font-size:1.3rem} .ws_reference_wrap .es_section_area .bs_swatch_box .is_item .ss_swatch {width:3.2rem;height:3.2rem;border:.1rem solid rgba(0,0,0,.06);border-radius:.8rem} .ws_reference_wrap .es_section_area .bs_swatch_box .is_item .ss_name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} .ws_reference_wrap .es_section_area .bs_type_box {display:grid;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:.6rem 2rem} .ws_reference_wrap .es_section_area .bs_type_box .is_item {display:grid;grid-template-columns:6rem minmax(0,1fr);gap:1.6rem;align-items:baseline;min-height:4.6rem;border-bottom:.1rem solid #f0f2f5} .ws_reference_wrap .es_section_area .bs_type_box .is_item:last-child {border-bottom:0} .ws_reference_wrap .es_section_area .bs_type_box .is_item .ss_px {color:var(--webis_muted_light);font-size:1.25rem;font-weight:700} .ws_reference_wrap .es_section_area .bs_type_box .is_item .ss_sample {overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws_reference_wrap .es_section_area .bs_portal_box {display:flex;flex-wrap:wrap;gap:.6rem} .ws_reference_wrap .es_section_area .bs_portal_box .is_item {display:inline-flex;align-items:center;gap:.7rem;border:.1rem solid var(--webis_line);border-radius:1.9rem;background:#fff;padding:.7rem 1.3rem;font-size:1.35rem;font-weight:700} .ws_reference_wrap .es_section_area .bs_portal_box .is_item .ss_dot {width:1.4rem;height:1.4rem;border-radius:50%;background:var(--portal)} .ws_reference_wrap .es_section_area .bs_rule_box, .ws_reference_wrap .es_section_area .bs_action_box {display:grid;grid-template-columns:repeat(auto-fill,minmax(30rem,1fr));gap:.8rem} .ws_reference_wrap .es_section_area .bs_rule_box .is_item, .ws_reference_wrap .es_section_area .bs_action_box .is_item {border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);background:#fff;padding:1.6rem 1.8rem} .ws_reference_wrap .es_section_area .bs_rule_box .is_item .ss_name, .ws_reference_wrap .es_section_area .bs_action_box .is_item .ss_name {display:inline-block;margin-bottom:.6rem;font-size:1.42rem;font-weight:800} .ws_reference_wrap .es_section_area .bs_rule_box .is_item .ss_desc, .ws_reference_wrap .es_section_area .bs_action_box .is_item .ss_desc {color:var(--webis_ink_soft);font-size:1.35rem;line-height:1.65} .ws_reference_wrap .es_section_area .bs_demo_box {display:grid;grid-template-columns:repeat(auto-fill,minmax(34rem,1fr));gap:1.2rem} .ws_reference_wrap .es_section_area .bs_demo_box .is_item .ss_name {display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:800} .ws_reference_wrap .es_section_area .bs_demo_box .is_item .ss_stage {position:relative;display:flex;justify-content:flex-end;min-height:8rem;border:.1rem dashed var(--webis_line_strong);border-radius:var(--webis_radius_md);background:#fff;padding:1.6rem} .ws_reference_wrap .es_section_area .bs_demo_box .is_item .ss_stage .ws_trend_wrap {margin-right:auto} .ws_reference_wrap .es_section_area .bs_bp_box {display:grid;gap:.6rem} .ws_reference_wrap .es_section_area .bs_bp_box .is_item {display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_sm);background:#fff;padding:1.1rem 1.6rem;font-size:1.38rem} .ws_reference_wrap .es_section_area .bs_bp_box .is_item .ss_name {min-width:16rem;font-weight:800} .ws_reference_wrap .es_section_area .bs_bp_box .is_item .ss_arrow {color:var(--webis_muted_light)} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - ROLLING * ---------------------------------------------------------------------------------------------------- */ /* [ROLLING] - DEFAULT */ .ws_rolling_wrap {} .ws_rolling_wrap .we_area {} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - FOOTER * ---------------------------------------------------------------------------------------------------- */ /* [FOOTER] - DEFAULT */ .ws_footer_wrap {} .ws_footer_wrap .we_area {} /* [FOOTER] - MENU */ .ws_footer_menu_wrap {} /* [FOOTER] - INFO */ .ws_footer_info_wrap {} /* [FOOTER] - COPYRIGHT */ .ws_footer_copyright_wrap {} /* [FOOTER] - BANNER */ .ws_footer_banner_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [FOOTER] - 검색 홈과 통합검색 * ---------------------------------------------------------------------------------------------------- */ .ws_footer_wrap {border-top:.1rem solid var(--webis_header_line);background:#fff} .ws_footer_wrap .we_area {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;min-height:6.4rem;padding-top:1rem;padding-bottom:1rem} .ws_footer_wrap .es_link_area {display:flex;flex-wrap:wrap;gap:.2rem} .ws_footer_wrap .es_link_area .bs_link {display:inline-flex;height:3.2rem;align-items:center;border-radius:.6rem;padding:0 1rem;color:#59626f;font-size:1.3rem} .ws_footer_wrap .es_link_area .bs_link:hover {background:#f1f3f7;color:var(--webis_ink)} .ws_footer_wrap .es_copy {color:var(--webis_muted_light);font-size:1.25rem} /* ---------------------------------------------------------------------------------------------------- * * [FOOTER] - 서브 포털 * ---------------------------------------------------------------------------------------------------- */ .ws_portal_footer_wrap {background:#20242e;color:#9aa2b1;padding:3.2rem 0 3.6rem;font-size:1.3rem} .ws_portal_footer_wrap .we_area .es_link_area {display:flex;flex-wrap:wrap;gap:.2rem 1.8rem;margin-bottom:1.4rem;color:#c6ccd8;font-weight:600} .ws_portal_footer_wrap .we_area .es_link_area .bs_link:hover {color:#fff} .ws_portal_footer_wrap .we_area .es_desc {color:#7d8595;font-size:1.25rem;line-height:1.7} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - FLOAT * ---------------------------------------------------------------------------------------------------- */ /* [FLOAT] - LEFT */ .ws_float_left_wrap {} /* [FLOAT] - RIGHT */ .ws_float_right_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [FLOAT] - 공통 유틸리티 * ---------------------------------------------------------------------------------------------------- */ .ws_util_wrap {position:relative;display:flex;align-items:center;gap:.3rem;color:#59626f;font-size:1.4rem} .ws_util_wrap .es_login {display:inline-flex;height:3.8rem;align-items:center;gap:.5rem;border-radius:var(--webis_radius_sm);padding:0 1.1rem;font-weight:600} .ws_util_wrap .es_notif_button, .ws_util_wrap .es_launcher_button {display:inline-grid;width:3.8rem;height:3.8rem;place-items:center;border-radius:var(--webis_radius_sm);font-size:1.9rem} .ws_util_wrap .es_login:hover, .ws_util_wrap .es_notif_button:hover, .ws_util_wrap .es_launcher_button:hover {background:#f1f3f7;color:var(--webis_ink)} /* ---------------------------------------------------------------------------------------------------- * * [FLOAT] - 알림 패널 * ---------------------------------------------------------------------------------------------------- */ .ws_notif_wrap {display:none;position:absolute;top:calc(100% + 1rem);right:0;z-index:120;width:36rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_xl);background:#fff;box-shadow:var(--webis_shadow_float);overflow:hidden} .ws_notif_wrap.wsa_active {display:block} .ws_notif_wrap .es_head_area {display:flex;align-items:center;justify-content:space-between;min-height:5.2rem;padding:0 1.8rem;border-bottom:.1rem solid #f0f2f5} .ws_notif_wrap .es_head_area .bs_title {font-size:1.55rem;font-weight:800;letter-spacing:-.03em} .ws_notif_wrap .es_head_area .bs_readall_button {color:var(--webis_muted);font-size:1.25rem} .ws_notif_wrap .es_head_area .bs_readall_button:hover {color:var(--webis_ink);text-decoration:underline} .ws_notif_wrap .es_list_area {display:grid;max-height:38rem;overflow-y:auto;overscroll-behavior:contain;padding:.6rem} .ws_notif_wrap .es_list_area .bs_item {position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;border-radius:var(--webis_radius_md);padding:1.1rem 1.2rem} .ws_notif_wrap .es_list_area .bs_item:hover {background:#f4f6f9} .ws_notif_wrap .es_list_area .bs_item.wsa_unread {background:#f6f7ff} .ws_notif_wrap .es_list_area .bs_item.wsa_unread:hover {background:#eef0fe} .ws_notif_wrap .es_list_area .bs_item .is_icon {display:grid;width:3.8rem;height:3.8rem;place-items:center;border-radius:1.2rem;background:color-mix(in srgb,var(--notif,var(--webis_color)) 10%,#fff);color:var(--notif,var(--webis_color));font-size:1.8rem} .ws_notif_wrap .es_list_area .bs_item .is_content_box {} .ws_notif_wrap .es_list_area .bs_item .is_content_box .ss_message {display:block;font-size:1.38rem;line-height:1.5;color:var(--webis_ink_soft)} .ws_notif_wrap .es_list_area .bs_item .is_content_box .ss_message b {color:var(--webis_ink);font-weight:700} .ws_notif_wrap .es_list_area .bs_item .is_content_box .ss_time {display:block;margin-top:.3rem;color:var(--webis_muted_light);font-size:1.2rem} .ws_notif_wrap .es_list_area .bs_item .is_dot {position:absolute;top:1.4rem;right:1.2rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--webis_up)} .ws_notif_wrap .es_foot_area {display:flex;border-top:.1rem solid #f0f2f5;background:#fafbfd} .ws_notif_wrap .es_foot_area .bs_link {flex:1;display:grid;place-items:center;min-height:4.6rem;color:#525c6d;font-size:1.35rem;font-weight:600} .ws_notif_wrap .es_foot_area .bs_link:hover {background:#f1f3f7;color:var(--webis_ink)} .ws_notif_wrap .es_foot_area .bs_link + .bs_link {border-left:.1rem solid #f0f2f5} /* ---------------------------------------------------------------------------------------------------- * * [FLOAT] - 전체 서비스 런처 * ---------------------------------------------------------------------------------------------------- */ .ws_launcher_wrap {display:none;position:absolute;top:calc(100% + 1rem);right:0;z-index:120;width:40rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_xl);background:#fff;box-shadow:var(--webis_shadow_float);overflow:hidden} .ws_launcher_wrap.wsa_active {display:block} .ws_launcher_wrap .es_head_area {display:flex;align-items:flex-start;justify-content:space-between;gap:1.6rem;padding:2rem 2rem 1.4rem} .ws_launcher_wrap .es_head_area .bs_intro_box {} .ws_launcher_wrap .es_head_area .bs_intro_box .is_title {display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em} .ws_launcher_wrap .es_head_area .bs_intro_box .is_desc {display:block;margin-top:.3rem;color:var(--webis_muted);font-size:1.3rem} .ws_launcher_wrap .es_head_area .bs_close_button {display:grid;width:3.4rem;height:3.4rem;place-items:center;border-radius:var(--webis_radius_sm);color:#6c7684;font-size:1.7rem} .ws_launcher_wrap .es_head_area .bs_close_button:hover {background:#f1f3f7;color:var(--webis_ink)} .ws_launcher_wrap .es_grid_area {display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:0 1.4rem 1.2rem} .ws_launcher_wrap .es_grid_area .bs_item {display:flex;min-height:8.6rem;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;border-radius:var(--webis_radius_md);padding:.8rem .4rem;color:#3d4557;font-size:1.3rem;font-weight:600;text-align:center} .ws_launcher_wrap .es_grid_area .bs_item:hover {background:#f4f6f9;color:var(--webis_ink)} .ws_launcher_wrap .es_grid_area .bs_item .is_icon {display:grid;width:4.4rem;height:4.4rem;place-items:center;border-radius:1.3rem;background:var(--app-bg,#eef3ff);color:var(--app-color,var(--webis_color));font-size:2.1rem} .ws_launcher_wrap .es_grid_area .bs_item .is_text {} .ws_launcher_wrap .es_feature_link {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem;margin:0 1.8rem 1.4rem;border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_lg);padding:1.2rem 1.4rem;background:#fafbfd} .ws_launcher_wrap .es_feature_link:hover {border-color:#c6ccd8;background:#f4f6f9} .ws_launcher_wrap .es_feature_link .bs_icon {display:grid;width:4.2rem;height:4.2rem;place-items:center;border-radius:1.2rem;background:var(--webis_color_50);color:var(--webis_color);font-size:2rem} .ws_launcher_wrap .es_feature_link .bs_content_box .is_title {display:block;font-size:1.4rem;font-weight:700} .ws_launcher_wrap .es_feature_link .bs_content_box .is_desc {display:block;margin-top:.2rem;color:var(--webis_muted);font-size:1.2rem} .ws_launcher_wrap .es_feature_link .bs_arrow {color:var(--webis_muted_light);font-size:1.7rem} .ws_launcher_wrap .es_foot_area {display:flex;align-items:center;justify-content:space-between;border-top:.1rem solid var(--webis_line);background:#fafbfd;padding:1.2rem 1.8rem;color:var(--webis_muted);font-size:1.25rem} .ws_launcher_wrap .es_foot_area .bs_more {display:inline-flex;align-items:center;gap:.4rem;color:var(--webis_color);font-weight:700} .ws_launcher_wrap .es_foot_area .bs_more:hover {color:var(--webis_color_550)} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - MODAL * ---------------------------------------------------------------------------------------------------- */ /* [MODAL] - DEFAULT */ .ws_modal_wrap {} /* ---------------------------------------------------------------------------------------------------- * * [MODAL] - 포털 검색 * ---------------------------------------------------------------------------------------------------- */ .ws_search_modal_wrap {display:none;position:fixed;inset:0;z-index:60;align-content:start;justify-items:center;background:rgba(15,19,32,.46);padding:10vh 1.6rem 0} .ws_search_modal_wrap.wsa_active {display:grid} .ws_search_modal_wrap .es_card_area {width:min(52rem,100%);border-radius:var(--webis_radius_xl);background:#fff;box-shadow:var(--webis_shadow_float);padding:1.6rem 1.6rem 2rem} .ws_search_modal_wrap .es_card_area .bs_head_box {display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem} .ws_search_modal_wrap .es_card_area .bs_head_box .is_title {font-size:1.6rem;font-weight:800;letter-spacing:-.03em} .ws_search_modal_wrap .es_card_area .bs_head_box .is_close_button {display:grid;width:3.8rem;height:3.8rem;place-items:center;border-radius:var(--webis_radius_sm);color:#525c6d;font-size:1.8rem} .ws_search_modal_wrap .es_card_area .bs_head_box .is_close_button:hover {background:#f1f3f7;color:var(--webis_ink)} .ws_search_modal_wrap .es_card_area .bs_search_box {display:flex;width:100%;height:5.2rem;align-items:center;gap:.6rem;border:.1rem solid var(--webis_line_strong);border-radius:2.6rem;background:#fff;padding:0 .5rem 0 1.6rem} .ws_search_modal_wrap .es_card_area .bs_search_box:focus-within {border-color:var(--portal,#4846f5)} .ws_search_modal_wrap .es_card_area .bs_search_box .is_input {min-width:0;flex:1;border:0;outline:0;font-size:1.4rem} .ws_search_modal_wrap .es_card_area .bs_search_box .is_submit_button {display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:50%;color:var(--portal,#4846f5);font-size:1.8rem} /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - ATTRIBUTE CONTROL * ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - ANIMATION * ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- * * [WEBIS-DESIGN] - RESPONSIVE * ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- * * [BREAKPOINT] - 2SS ABOVE (480px) * ---------------------------------------------------------------------------------------------------- */ @media all and (min-width:480px) { .ws_component_provider_sample_wrap .es_button_area .bs_wsd_button {width:auto} } /* ---------------------------------------------------------------------------------------------------- * * [BREAKPOINT] - LG BELOW (1280px) * ---------------------------------------------------------------------------------------------------- */ @media all and (max-width:1279px) { .ws_serp_wrap .we_area {grid-template-columns:minmax(0,1fr) 30rem} .ws_news_hero_wrap {grid-template-columns:minmax(0,1fr) 30rem} .ws_news_hero_wrap > .ws_rank_wrap {display:none} .ws_map_app_wrap {grid-template-columns:6.4rem 33rem minmax(0,1fr)} .ws_map_app_wrap .es_detail_area {left:calc(6.4rem + 33rem);width:33rem} .ws_map_app_wrap .es_panel_toggle {left:calc(6.4rem + 33rem)} .ws_guide_wrap > .we_area {grid-template-columns:22rem minmax(0,1fr)} .ws_guide_wrap .es_toc_area {display:none} } /* ---------------------------------------------------------------------------------------------------- * * [BREAKPOINT] - SM TO LG (768px ~ 1279px) * ---------------------------------------------------------------------------------------------------- */ @media all and (min-width:768px) and (max-width:1279px) { .ws_map_app_wrap .es_panel_toggle {display:grid} .ws_map_app_wrap.wsa_panel_closed .es_panel_area {display:none} .ws_map_app_wrap.wsa_panel_closed .es_panel_toggle {left:6.4rem} .ws_map_app_wrap.wsa_panel_closed .es_detail_area {left:6.4rem} } /* ---------------------------------------------------------------------------------------------------- * * [BREAKPOINT] - MD BELOW (1024px) * ---------------------------------------------------------------------------------------------------- */ @media all and (max-width:1023px) { .ws_search_header_wrap .es_main_area .we_area {grid-template-columns:auto minmax(0,1fr) auto;gap:1.6rem} .ws_search_header_wrap .es_main_area .we_area .ws_util_wrap .es_login {display:none} .ws_serp_wrap .we_area {grid-template-columns:minmax(0,1fr)} .ws_serp_wrap .we_area .es_aside_area {display:none} .ws_stage_wrap .es_insight_area {grid-template-columns:1fr} .ws_service_hero_wrap {grid-template-columns:1fr} .ws_portal_main_wrap .we_area .es_body_area {grid-template-columns:minmax(0,1fr)} .ws_portal_identity_wrap .we_area {gap:1.6rem} .ws_portal_identity_wrap .we_area > .es_search_area {display:none} .ws_portal_identity_wrap .we_area .es_search_fab_button {display:grid;width:4.6rem;height:4.6rem;flex:0 0 auto;place-items:center;border:.1rem solid var(--webis_line_strong);border-radius:50%;background:#fff;color:var(--portal,#4846f5);font-size:2rem} .ws_portal_identity_wrap .we_area .es_search_fab_button:hover {background:color-mix(in srgb,var(--portal,#4846f5) 8%,#fff)} .ws_job_news_wrap .es_list_area {grid-template-columns:1fr;gap:0} .ws_visual_wrap .es_layout_area {grid-template-columns:minmax(0,1fr)} .ws_lotto_hero_wrap, .ws_fortune_hero_wrap {grid-template-columns:minmax(0,1fr)} .ws_gallery_skin_wrap .es_grid_area {grid-template-columns:repeat(3,minmax(0,1fr))} .ws_card_skin_wrap .es_grid_area {grid-template-columns:repeat(2,minmax(0,1fr))} .ws_post_wrap .es_spec_area {grid-template-columns:repeat(2,1fr)} .ws_post_wrap .es_body_area .bs_wikigrid {grid-template-columns:1fr} .ws_hot_hero_wrap {grid-template-columns:1fr 1fr} .ws_hot_hero_wrap > .ws_feature_wrap:first-child {grid-column:1/-1} .ws_guide_wrap {padding-top:2rem} .ws_guide_wrap > .we_area {grid-template-columns:1fr;gap:2rem} .ws_guide_wrap .es_side_area {position:static;max-height:none;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));border:.1rem solid var(--webis_line);border-radius:var(--webis_radius_md);padding:1.6rem;background:#fff} .ws_directory_wrap .es_group_area {grid-template-columns:1fr;gap:1.4rem} .ws_directory_wrap .es_group_area .bs_list_box {grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------------------------------------------------------------------------------------------------- * * [BREAKPOINT] - SM BELOW (768px) * ---------------------------------------------------------------------------------------------------- */ @media all and (max-width:767px) { .ws_stage_wrap {min-height:calc(100vh - 12.4rem);padding:7vh 1.2rem 4rem} .ws_stage_wrap .es_brand_area {margin-bottom:2.6rem} .ws_stage_wrap .es_brand_area .bs_mark {width:4.8rem;height:4.8rem;border-radius:1.4rem;font-size:2rem} .ws_stage_wrap .es_brand_area .bs_text {font-size:4.4rem} .ws_stage_wrap .es_search_area .ws_search_wrap .es_frame_area .bs_form_box {min-height:5.8rem} .ws_stage_wrap .es_search_area .ws_search_wrap .es_frame_area .bs_form_box .is_input {height:4.8rem;font-size:1.6rem} .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_keyboard_button {display:none} .ws_stage_wrap .es_dock_area {margin-top:2.6rem;gap:.2rem} .ws_stage_wrap .es_dock_area .bs_item {width:8rem;padding:1rem .3rem .8rem;font-size:1.2rem} .ws_stage_wrap .es_dock_area .bs_item .is_icon {width:4.8rem;height:4.8rem;border-radius:1.5rem;font-size:2.2rem} .ws_stage_wrap .es_insight_area {margin-top:3rem} .ws_stage_wrap .es_insight_area .bs_live_box .is_list_field {grid-template-columns:1fr} .ws_stage_wrap .es_notice_area {padding:0 1.4rem} .ws_stage_wrap .es_notice_area .bs_more {display:none} .ws_footer_wrap .we_area {justify-content:center;text-align:center} .ws_search_header_wrap .es_main_area .we_area {grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;min-height:6.4rem} .ws_search_header_wrap .es_main_area .we_area .bs_brand_box .is_text {display:none} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box {min-height:4.8rem} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_input {height:4.2rem;font-size:1.5rem} .ws_search_header_wrap .es_main_area .we_area .ws_search_wrap .es_frame_area .bs_form_box .is_tool_field .ss_camera_link {display:none} .ws_suggest_wrap {border-radius:var(--webis_radius_lg)} .ws_search_header_wrap .es_nav_area .we_area .bs_link {padding:0 1rem;font-size:1.4rem} .ws_search_header_wrap .es_nav_area .we_area .bs_tool_box {display:none} .ws_portal_top_wrap .we_area .es_brand_area {min-width:0} .ws_portal_top_wrap .we_area .es_brand_area .bs_link_box {display:none} .ws_portal_top_wrap .we_area .ws_util_wrap {flex:0 0 auto} .ws_serp_wrap {padding-top:1rem} .ws_kpanel_wrap .es_head_area, .ws_place_wrap .es_head_area, .ws_image_wrap .es_head_area, .ws_news_wrap .es_head_area, .ws_blog_wrap .es_head_area, .ws_webdoc_wrap .es_head_area, .ws_video_wrap .es_head_area, .ws_trend_wrap .es_head_area, .ws_category_wrap .es_head_area, .ws_service_wrap .es_head_area {min-height:5rem;padding:0 1.6rem} .ws_kpanel_wrap .es_body_area {grid-template-columns:minmax(0,1fr)} .ws_image_wrap .es_strip_area, .ws_news_wrap .es_list_area, .ws_video_wrap .es_grid_area {padding-left:1.6rem;padding-right:1.6rem} .ws_related_wrap .es_list_area {padding:0 1.6rem} .ws_web_result_wrap .es_sort_area, .ws_job_list_wrap .es_filter_area {padding-left:1.6rem;padding-right:1.6rem} .ws_web_result_wrap .es_list_area, .ws_blog_wrap .es_list_area, .ws_webdoc_wrap .es_list_area, .ws_place_wrap .es_list_area {padding:0 1.6rem} .ws_web_result_wrap .es_list_area .bs_item, .ws_blog_wrap .es_list_area .bs_item, .ws_webdoc_wrap .es_list_area .bs_item {padding:1.8rem 0} .ws_web_result_wrap .es_list_area .bs_item .is_title, .ws_blog_wrap .es_list_area .bs_item .is_title, .ws_webdoc_wrap .es_list_area .bs_item .is_title {font-size:1.7rem} .ws_web_result_wrap .es_list_area .bs_item:has(> .is_thumb) {grid-template-columns:minmax(0,1fr) 9rem;gap:1.2rem} .ws_web_result_wrap .es_list_area .bs_item .is_thumb {width:9rem;height:6.8rem} .ws_web_result_wrap .es_list_area .bs_item .is_sitelink_box {grid-template-columns:1fr;gap:.2rem} .ws_image_wrap .es_strip_area {grid-template-columns:repeat(3,minmax(0,1fr))} .ws_image_wrap .es_strip_area .bs_link:nth-child(n+4) {display:none} .ws_news_wrap .es_list_area .bs_item {grid-template-columns:minmax(0,1fr) 9rem;gap:1.2rem} .ws_news_wrap .es_list_area .bs_item .is_thumb {width:9rem;height:6.6rem} .ws_video_wrap .es_grid_area {grid-template-columns:repeat(2,minmax(0,1fr))} .ws_place_wrap .es_list_area .bs_item {grid-template-columns:1fr} .ws_notif_wrap, .ws_launcher_wrap {position:fixed;top:6.8rem;right:1.2rem;left:1.2rem;width:auto} .ws_launcher_wrap {max-height:calc(100vh - 8rem);overflow:auto} .ws_portal_identity_wrap .we_area .es_title_area .bs_content_box .is_title {font-size:2.3rem} .ws_portal_identity_wrap .we_area .es_title_area .bs_icon {width:4.2rem;height:4.2rem;border-radius:1.2rem;font-size:2rem} .ws_service_hero_wrap .es_search_area .bs_form_box {flex-direction:column} .ws_service_hero_wrap .es_search_area .bs_form_box .is_select, .ws_service_hero_wrap .es_search_area .bs_form_box .is_input {flex:0 0 auto;width:100%;height:5.2rem} .ws_service_hero_wrap .es_search_area .bs_form_box .is_submit_button {width:100%;justify-content:center} .ws_job_list_wrap .es_list_area .bs_item {grid-template-columns:1fr;gap:.8rem;padding:1.5rem 1.6rem} .ws_job_list_wrap .es_list_area .bs_item .is_side_box {display:flex;align-items:baseline;gap:1.2rem;text-align:left} .ws_job_list_wrap .es_list_area .bs_item .is_side_box .ss_due {margin-top:0} .ws_job_board_wrap .es_list_area .bs_link {grid-template-columns:auto minmax(0,1fr) auto} .ws_job_board_wrap .es_list_area .bs_link .is_meta {display:none} .ws_image_result_wrap .es_filter_area, .ws_video_result_wrap .es_filter_area {padding-left:1.6rem;padding-right:1.6rem} .ws_image_result_wrap .es_grid_area {grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem;padding:1.6rem} .ws_video_result_wrap .es_grid_area {grid-template-columns:repeat(2,minmax(0,1fr));padding:1.6rem} .ws_visual_wrap {padding-top:1rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_head_field, .ws_visual_guide_wrap .es_head_area, .ws_visual_recent_wrap .es_head_area {padding:0 1.6rem} .ws_visual_wrap .es_layout_area .bs_upload_box .is_body_field {padding:1.6rem} .ws_news_hero_wrap {grid-template-columns:1fr} .ws_news_hero_wrap > .ws_rank_wrap {display:block} .ws_major_wrap .es_head_area, .ws_rank_wrap .es_head_area, .ws_linklist_wrap .es_head_area, .ws_gallery_wrap .es_head_area, .ws_notice_wrap .es_head_area, .ws_section_link_wrap .es_head_area, .ws_table_wrap .es_head_area {padding:0 1.6rem} .ws_linklist_wrap .es_list_area {grid-template-columns:1fr;gap:0} .ws_gallery_wrap .es_gallery_area {grid-template-columns:1fr 1fr} .ws_gallery_wrap .es_gallery_area .bs_item:first-child {grid-column:1/-1;grid-row:auto;min-height:18rem} .ws_section_link_wrap .es_grid_area {padding-left:1.2rem;padding-right:1.2rem} .ws_catlink_wrap .es_head_area, .ws_doctoday_wrap .es_head_area, .ws_adopt_wrap .es_head_area {padding:0 1.6rem} .ws_catlink_wrap .es_grid_area {grid-template-columns:repeat(2,1fr)} .ws_doctoday_wrap .es_body_area {grid-template-columns:1fr} .ws_lotto_result_wrap {padding:1.8rem 1.6rem} .ws_lotto_result_wrap .es_balls_area .bs_ball {width:4.2rem;height:4.2rem;font-size:1.5rem} .ws_fortune_hero_wrap .es_input_area .bs_field_box {grid-template-columns:1fr} .ws_zodiac_wrap .es_head_area, .ws_numbers_wrap .es_head_area {padding:0 1.6rem} .ws_zodiac_wrap .es_grid_area {grid-template-columns:repeat(3,1fr);padding:1.4rem 1.6rem 1.6rem} .ws_chipfilter_wrap .es_head_area, .ws_calc_wrap .es_head_area, .ws_tools_wrap .es_head_area {padding:0 1.6rem} .ws_service_hero_wrap .es_search_area .bs_quick_box {grid-template-columns:repeat(2,1fr)} .ws_calc_wrap .es_form_area .bs_field_box {grid-template-columns:1fr} .ws_tools_wrap .es_grid_area {grid-template-columns:1fr} .ws_gallery_skin_wrap .es_head_area, .ws_webzine_wrap .es_head_area, .ws_card_skin_wrap .es_head_area, .ws_schedule_wrap .es_head_area, .ws_ranking_skin_wrap .es_head_area, .ws_list_skin_wrap .es_head_area, .ws_faq_wrap .es_head_area, .ws_list_skin_wrap > .es_viewlist_area {padding-left:1.6rem;padding-right:1.6rem} .ws_gallery_skin_wrap .es_grid_area {grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem;padding:1.6rem} .ws_webzine_wrap .es_list_area {padding:0 1.6rem} .ws_webzine_wrap .es_list_area .bs_item {grid-template-columns:1fr;gap:1rem} .ws_webzine_wrap .es_list_area .bs_item .is_image {width:100%;height:auto;aspect-ratio:16/9} .ws_card_skin_wrap .es_grid_area {grid-template-columns:1fr;padding:1.6rem} .ws_schedule_wrap .es_list_area {padding:.4rem 1.6rem 1.4rem} .ws_schedule_wrap .es_list_area .bs_link {grid-template-columns:5rem minmax(0,1fr)} .ws_schedule_wrap .es_list_area .bs_link .is_badge {display:none} .ws_schedule_wrap .es_list_area .bs_link .is_date {width:5rem;height:5rem} .ws_ranking_skin_wrap .es_list_area {padding:.4rem 1.6rem 1.4rem} .ws_ranking_skin_wrap .es_list_area .bs_link {grid-template-columns:2.8rem minmax(0,1fr)} .ws_ranking_skin_wrap .es_list_area .bs_link .is_thumb {display:none} .ws_list_skin_wrap .es_list_area .bs_link {grid-template-columns:auto minmax(0,1fr) auto} .ws_list_skin_wrap .es_list_area .bs_link .is_meta {display:none} .ws_post_wrap .es_head_area {padding:2rem 1.6rem 0} .ws_post_wrap .es_body_area {padding:1.8rem 1.6rem} .ws_post_wrap .es_body_area p {font-size:1.5rem} .ws_post_wrap .es_action_area {padding:0 1.6rem 2rem} .ws_post_wrap .es_comment_area {padding:.6rem 1.6rem 2rem} .ws_post_wrap .es_prevnext_area .bs_link {padding:0 1.6rem} .ws_map_app_wrap {display:block;height:100vh} .ws_map_app_wrap .es_iconrail_area {display:none} .ws_map_app_wrap .es_canvas_area {position:fixed;inset:0} .ws_map_app_wrap .es_canvas_area .bs_chipbar_box, .ws_map_app_wrap .es_canvas_area .bs_scale {display:none} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box {position:fixed;top:1.2rem;right:1.2rem;left:1.2rem;z-index:12;display:flex;gap:.8rem} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box .is_cat_button {display:grid;width:4.8rem;height:4.8rem;flex:0 0 auto;place-items:center;border-radius:var(--webis_radius_md);background:var(--portal,#4846f5);color:#fff;font-size:2.1rem;box-shadow:var(--webis_shadow_raise)} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box .is_search_field {display:flex;min-width:0;flex:1;align-items:center;gap:.8rem;border:.1rem solid #dfe4ea;border-radius:var(--webis_radius_md);background:#fff;padding:0 1.4rem;box-shadow:var(--webis_shadow_raise)} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box .is_search_field .ss_icon {color:var(--portal,#4846f5);font-size:1.8rem} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box .is_search_field .ss_input {min-width:0;flex:1;height:4.6rem;border:0;outline:0;font-size:1.45rem;background:transparent} .ws_map_app_wrap .es_canvas_area .bs_mobiletop_box .is_filter_button {display:grid;width:4.8rem;height:4.8rem;flex:0 0 auto;place-items:center;border:.1rem solid #dfe4ea;border-radius:var(--webis_radius_md);background:#fff;color:#3d4557;font-size:1.9rem;box-shadow:var(--webis_shadow_raise)} .ws_map_app_wrap .es_canvas_area .bs_mode_box {top:7.2rem} .ws_map_app_wrap .es_canvas_area .bs_zoom_box {bottom:calc(46vh + 1.6rem);transition:bottom .22s ease} .ws_map_app_wrap.wsa_sheet_collapsed .es_canvas_area .bs_zoom_box {bottom:11.2rem} .ws_map_app_wrap .es_panel_area {position:fixed;top:auto;right:0;bottom:0;left:0;z-index:14;width:auto;height:46vh;border-right:0;border-top:.1rem solid var(--webis_line);border-radius:1.6rem 1.6rem 0 0;box-shadow:0 -1rem 3rem rgba(20,26,48,.18);transform:none;transition:height .22s ease} .ws_map_app_wrap.wsa_sheet_collapsed .es_panel_area {height:9.6rem;overflow:hidden} .ws_map_app_wrap .es_panel_area .bs_head_box {display:none} .ws_map_app_wrap .es_panel_toggle {display:none !important} .ws_map_app_wrap .es_panel_area .bs_sheet_button {display:flex;width:100%;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem 0 .7rem;color:var(--webis_ink);font-size:1.35rem;font-weight:700} .ws_map_app_wrap .es_panel_area .bs_sheet_button::before {content:'';width:4.4rem;height:.4rem;border-radius:.2rem;background:#d4dae2} .ws_map_app_wrap .es_detail_area {position:fixed;inset:0;left:0;width:auto;z-index:30;border-right:0} .ws_map_app_wrap .es_filtersheet_area {padding:0;place-items:stretch} .ws_map_app_wrap .es_filtersheet_area .bs_card_box {width:100%;max-height:none;border-radius:0} .ws_auth_wrap .es_card_area {padding:2.4rem 2rem} .ws_doc_wrap .es_body_area {padding:2rem 1.6rem} .ws_directory_wrap .es_head_area .bs_title {font-size:2.8rem} .ws_directory_wrap .es_group_area .bs_list_box {grid-template-columns:1fr} .ws_reference_wrap {padding:3rem 0 6rem} .ws_reference_wrap .es_head_area .bs_title {font-size:2.8rem} } /* ---------------------------------------------------------------------------------------------------- * * [BREAKPOINT] - 2SS BELOW (480px) * ---------------------------------------------------------------------------------------------------- */ @media all and (max-width:479px) { .ws_stage_wrap .es_brand_area .bs_text {font-size:3.8rem} .ws_stage_wrap .es_dock_area .bs_item {width:7.4rem} .ws_video_wrap .es_grid_area {grid-template-columns:1fr} .ws_image_result_wrap .es_grid_area {grid-template-columns:1fr 1fr} .ws_video_result_wrap .es_grid_area {grid-template-columns:1fr} .ws_table_wrap.wsd_mobile_cards .es_table_area {padding:.8rem 1.2rem 1.2rem;overflow:visible} .ws_table_wrap.wsd_mobile_cards .es_table_area table, .ws_table_wrap.wsd_mobile_cards .es_table_area tbody {display:block} .ws_table_wrap.wsd_mobile_cards .es_table_area thead {position:absolute;width:.1rem;height:.1rem;margin:-.1rem;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .ws_table_wrap.wsd_mobile_cards .es_table_area tbody {display:grid;gap:.8rem} .ws_table_wrap.wsd_mobile_cards .es_table_area tr {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem 1.2rem;border:.1rem solid #edf0f4;border-radius:1rem;padding:1.2rem} .ws_table_wrap.wsd_mobile_cards .es_table_area td {border:0;padding:0} .ws_table_wrap.wsd_mobile_cards .es_table_area td:nth-child(2) {color:var(--webis_muted);font-size:1.25rem} .ws_table_wrap.wsd_mobile_cards .es_table_area td:nth-child(3) {grid-column:1/-1} .ws_table_wrap.wsd_mobile_cards .es_table_area td:nth-child(3) > span {display:flex} .ws_table_wrap.wsd_mobile_cards .es_table_area td:nth-child(4) {grid-column:3;grid-row:1;text-align:right} .ws_lotto_result_wrap .es_balls_area {gap:.6rem} .ws_lotto_result_wrap .es_balls_area .bs_ball {width:3.8rem;height:3.8rem;font-size:1.4rem} .ws_lotto_result_wrap .es_stats_area {grid-template-columns:1fr 1fr} .ws_hot_hero_wrap {grid-template-columns:1fr} .ws_post_wrap .es_spec_area {grid-template-columns:1fr 1fr} } }