/* 서울로펌 테마 CSS = 레거시 seoul.vn head 인라인 · slf_global.css · 포스트 보정 · 설문 통합, 생성 = _tools/slfk/tmpl/slfk_tmpl.py */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap'); /* ---- 폰트 클래스 */ .en_1 { font-family: 'Noto Sans', sans-serif; font-weight: 100; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_2 { font-family: 'Noto Sans', sans-serif; font-weight: 200; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_3 { font-family: 'Noto Sans', sans-serif; font-weight: 300; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_4 { font-family: 'Noto Sans', sans-serif; font-weight: 400; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_5 { font-family: 'Noto Sans', sans-serif; font-weight: 500; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_6 { font-family: 'Noto Sans', sans-serif; font-weight: 600; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_7 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_8 { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .en_9 { font-family: 'Noto Sans', sans-serif; font-weight: 900; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_1 { font-family: 'Noto Sans', sans-serif; font-weight: 100; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_2 { font-family: 'Noto Sans', sans-serif; font-weight: 200; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_3 { font-family: 'Noto Sans', sans-serif; font-weight: 300; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_4 { font-family: 'Noto Sans', sans-serif; font-weight: 400; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_5 { font-family: 'Noto Sans', sans-serif; font-weight: 500; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_6 { font-family: 'Noto Sans', sans-serif; font-weight: 600; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_7 { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_8 { font-family: 'Noto Sans', sans-serif; font-weight: 800; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .vi_9 { font-family: 'Noto Sans', sans-serif; font-weight: 900; font-style: normal; -font-optical-sizing: auto; font-variation-settings: 'wdth' /* 62.5 75 */ 87.5 /* 100 */; } .ko_1 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 100; font-style: normal; -font-optical-sizing: auto; } .ko_2 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 200; font-style: normal; -font-optical-sizing: auto; } .ko_3 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 300; font-style: normal; -font-optical-sizing: auto; } .ko_4 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 400; font-style: normal; -font-optical-sizing: auto; } .ko_5 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 500; font-style: normal; -font-optical-sizing: auto; } .ko_6 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 600; font-style: normal; -font-optical-sizing: auto; } .ko_7 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 700; font-style: normal; -font-optical-sizing: auto; } .ko_8 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 800; font-style: normal; -font-optical-sizing: auto; } .ko_9 { font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; font-weight: 900; font-style: normal; -font-optical-sizing: auto; } .zh_1 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 100; font-style: normal; -font-optical-sizing: auto; } .zh_2 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 200; font-style: normal; -font-optical-sizing: auto; } .zh_3 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 300; font-style: normal; -font-optical-sizing: auto; } .zh_4 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 400; font-style: normal; -font-optical-sizing: auto; } .zh_5 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 500; font-style: normal; -font-optical-sizing: auto; } .zh_6 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 600; font-style: normal; -font-optical-sizing: auto; } .zh_7 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 700; font-style: normal; -font-optical-sizing: auto; } .zh_8 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 800; font-style: normal; -font-optical-sizing: auto; } .zh_9 { font-family: 'Noto Sans SC', 'Noto Sans', sans-serif; font-weight: 900; font-style: normal; -font-optical-sizing: auto; } .oswald_2 { font-family: 'Oswald' , sans-serif; font-weight: 200; font-style: normal; -font-optical-sizing: auto; } .oswald_3 { font-family: 'Oswald' , sans-serif; font-weight: 300; font-style: normal; -font-optical-sizing: auto; } .oswald_4 { font-family: 'Oswald' , sans-serif; font-weight: 400; font-style: normal; -font-optical-sizing: auto; } .oswald_5 { font-family: 'Oswald' , sans-serif; font-weight: 500; font-style: normal; -font-optical-sizing: auto; } .oswald_6 { font-family: 'Oswald' , sans-serif; font-weight: 600; font-style: normal; -font-optical-sizing: auto; } .oswald_7 { font-family: 'Oswald' , sans-serif; font-weight: 700; font-style: normal; -font-optical-sizing: auto; } /* ---- 색 변수 */ :root { --bs_primary_t_0: #EEBB55; --bs_primary_s_0: #EEBB55; --bs_primary_t_10: #F0C266; --bs_primary_s_10: #D6A84D; --bs_primary_t_20: #F1C977; --bs_primary_s_20: #BE9644; --bs_primary_t_25: #F2CC80; --bs_primary_s_25: #B38C40; --bs_primary_t_30: #F3CF88; --bs_primary_s_30: #A7833C; --bs_primary_t_40: #F5D699; --bs_primary_s_40: #8F7033; --bs_primary_t_50: #F7DDAA; --bs_primary_s_50: #775E2B; --bs_primary_t_60: #F8E4BB; --bs_primary_s_60: #5F4B22; --bs_primary_t_70: #FAEBCC; --bs_primary_s_70: #47381A; --bs_primary_t_75: #FBEED5; --bs_primary_s_75: #3C2F15; --bs_primary_t_80: #FCF1DD; --bs_primary_s_80: #302511; --bs_primary_t_90: #FDF8EE; --bs_primary_s_90: #181309; --bs_primary_t_100: #FFFFFF; --bs_primary_s_100: #000000; } :root, [data-bs-theme='light'] { --bs-primary : #EEBB55 ; --bs-primary-rgb : 238, 187, 85; --bs-primary-bg-subtle: #FCF1DD; --bs-primary-border-subtle: #F8E4BB; --bs-primary-text-emphasis: #5F4B22; } [data-bs-theme='dark' ] { --bs-primary-bg-subtle: #302511; --bs-primary-border-subtle: #8F7033; --bs-primary-text-emphasis: #F8E4BB; } .link-primary:focus, .link-primary:hover { color: rgba( 190, 150, 68, var( --bs-link-opacity , 1 ) ) !important; -webkit-text-decoration-color: rgba( 190, 150, 68, var( --bs-link-underline-opacity, 1 ) ) !important; text-decoration-color: rgba( 190, 150, 68, var( --bs-link-underline-opacity, 1 ) ) !important; } .btn-primary { --bs-btn-bg : #EEBB55 ; --bs-btn-bg-rgb : 238, 187, 85 ; --bs-btn-border-color : #EEBB55 ; --bs-btn-disabled-bg : #EEBB55 ; --bs-btn-disabled-border-color: #EEBB55 ; --bs-btn-hover-border-color : #F1C977 ; --bs-btn-active-bg : #F1C977 ; --bs-btn-hover-bg : #CA9F48 ; --bs-btn-focus-shadow-rgb: 241, 197, 111; } .btn-outline-primary { --bs-btn-color : #EEBB55 ; --bs-btn-border-color : #EEBB55 ; --bs-btn-hover-bg : #EEBB55 ; --bs-btn-hover-border-color : #EEBB55 ; --bs-btn-active-bg : #EEBB55 ; --bs-btn-active-border-color : #EEBB55 ; --bs-btn-disabled-color : #EEBB55 ; --bs-btn-disabled-border-color: #EEBB55 ; --bs-btn-focus-shadow-rgb: 238, 187, 85 ; } .progress, .progress-stacked { --bs-progress-bar-bg: #EEBB55; } :root, [data-bs-theme=light] { --bs-link-color: #EEBB55; --bs-link-color-rgb: 238, 187, 85; --bs-link-hover-color: #BE9644; --bs-link-hover-color-rgb: 190, 150, 68; } [data-bs-theme=dark ] { --bs-link-color: #F5D699; --bs-link-color-rgb: 245, 214, 153; --bs-link-hover-color: #F7DEAD; --bs-link-hover-color-rgb: 247, 222, 173; } /* ---- 본문 골격 · 인쇄 */ @page { size: A4; margin : 8mm; } @media print { html, body { zoom: 1; width: 210mm; padding: 0 ; } } /* @media screen { html, body { zoom: 1; max-width: 226mm; padding: 4mm; } } */ #body_back { background: linear-gradient( 150deg, var( --bs_primary_t_30 ), var( --bs_primary_t_60 ) ); } [ data-bs-theme='dark' ] #body_back { background: linear-gradient( 150deg, var( --bs_primary_s_90 ), var( --bs_primary_s_60 ) ); } @media print { #body_back { display: none; } } @media ( max-width: 209.98mm ), print { #body_main { margin: 0rem auto; border-radius: 0 ; box-shadow: 0 ; } } @media ( min-width: 210mm ) { #body_main { margin: 3rem auto; border-radius: var( --bs-border-radius ); box-shadow: var( --bs-box-shadow-lg ); } } @media ( max-width: 209.98mm ) { .col_12_4 { width: 100% !important; } .col_12_6 { width: 100% !important; } .col_12_8 { width: 100% !important; } .rb_bl { border-bottom: 1px solid var( --bs-border-color ); border-right: 0px solid var( --bs-border-color ); } .rb_nt { border-top: 0px solid var( --bs-border-color ); margin-top: -.5rem; } } /* Responsive Border */ @media ( min-width: 210mm ), print { .col_12_4 { width: 33.33333333% !important; } .col_12_6 { width: 50% !important; } .col_12_8 { width: 66.66666666% !important; } .rb_bl { border-bottom: 0px solid var( --bs-border-color ); border-right: 1px solid var( --bs-border-color ); } .rb_nt { border-top: 1px solid var( --bs-border-color ); margin-top: 0 ; } } /* ---- slf_global.css */ html, body { font-family: 'Noto Sans', 'Noto Sans KR', 'Noto Sans SC', sans-serif; font-variation-settings: 'wdth' 87.5; font-weight: 400; font-style: normal; font-optical-sizing: auto; } a { text-decoration: none ; } hr { border-color : var( --bs-border-color ); opacity: 1; } ul { padding-left: 0 ; } li { padding-left: .5rem; margin-bottom: .5rem; list-style-type: none; border-left: calc( var( --bs-border-width ) * 1 ) var( --bs-border-style ) var( --bs-primary ) !important; } li:last-of-type { margin-bottom: 0 ; } input:focus, textarea:focus { outline: none; } ::placeholder { color: rgba( var( --bs-primary-rgb ), .5 ) !important; } /* .desktop */ ::-webkit-scrollbar { background: rgba( var( --bs-body-rgb ), 1 ); width: .5rem; height: .5rem; } /* .desktop */ ::-webkit-scrollbar-corner { background: rgba( var( --bs-primary-rgb ), .25 ); } /* .desktop */ ::-webkit-scrollbar-thumb { background: rgba( var( --bs-primary-rgb ), .25 ); border-radius: .25rem; } /* .desktop */ ::-webkit-scrollbar-thumb:hover { background: rgba( var( --bs-primary-rgb ), .75 ); } .form-control:focus { box-shadow: 0 0 0 .25rem rgba( var( --bs-primary-rgb ), .25 ); } .pf { position: fixed; } .pa { position: absolute; } .pr { position: relative; } .pf_tl { position: fixed; top : 0; left : 0; } .pa_tl { position: absolute; top : 0; left : 0; } .pf_tr { position: fixed; top : 0; right: 0; } .pa_tr { position: absolute; top : 0; right: 0; } .pf_bl { position: fixed; bottom: 0; left : 0; } .pa_bl { position: absolute; bottom: 0; left : 0; } .pf_br { position: fixed; bottom: 0; right: 0; } .pa_br { position: absolute; bottom: 0; right: 0; } .br { border-radius: var( --bs-border-radius-xl ) !important; } .br_t { border-radius: var( --bs-border-radius-xl ) var( --bs-border-radius-xl ) 0 0 !important; } .br_tl { border-radius: var( --bs-border-radius-xl ) 0 0 0 !important; } .br_b { border-radius: 0 0 var( --bs-border-radius-xl ) var( --bs-border-radius-xl ) !important; } .br_tr { border-radius: 0 var( --bs-border-radius-xl ) 0 0 !important; } .br_l { border-radius: var( --bs-border-radius-xl ) 0 0 var( --bs-border-radius-xl ) !important; } .br_bl { border-radius: 0 0 0 var( --bs-border-radius-xl ) !important; } .br_r { border-radius: 0 var( --bs-border-radius-xl ) var( --bs-border-radius-xl ) 0 !important; } .br_br { border-radius: 0 0 var( --bs-border-radius-xl ) 0 !important; } .nm_t { margin-top : calc( var( --bs-border-width ) * -1 ) !important; } /* Negative Margin */ .nm_b { margin-bottom: calc( var( --bs-border-width ) * -1 ) !important; } .nm_l { margin-left : calc( var( --bs-border-width ) * -1 ) !important; } .nm_r { margin-right : calc( var( --bs-border-width ) * -1 ) !important; } .bgi { background-position: center; /* Background Image */ background-size : cover ; } .bgp_c { background-position: center; } .bgs_c { background-size : cover ; } .o_100 { opacity: 1 ; } .oh_100:hover { opacity: 1 !important; } .o_75 { opacity: .75; } .oh_75:hover { opacity: .75 !important; } .o_50 { opacity: .5 ; } .oh_50:hover { opacity: .5 !important; } .o_25 { opacity: .25; } .oh_25:hover { opacity: .25 !important; } .o_10 { opacity: .1 ; } .oh_10:hover { opacity: .1 !important; } .o_0 { opacity: 0 ; } .oh_0:hover { opacity: 0 !important; } .ar_1_1 { aspect-ratio: 1 / 1; } .ar_3_4 { aspect-ratio: 3 / 4; } .ar_4_3 { aspect-ratio: 4 / 3; } .ar_5_7 { aspect-ratio: 5 / 7; } .ar_7_5 { aspect-ratio: 7 / 5; } /* Standard Playing Card */ .ar_9_16 { aspect-ratio: 9 / 16; } .ar_16_9 { aspect-ratio: 16 / 9; } .fs_50 { font-size: 50% !important; } .fs_75 { font-size: 75% !important; } .fs_875 { font-size: 875% !important; } @media print { .p_ba_p { break-after : page ; } .p_pba_a { page-break-after : always; } .p_bb_p { break-before: page ; } .p_pbb_a { page-break-before: always; } .p_bi_a { break-inside: avoid ; } .p_d_n { display : none !important; } } .as_3_4 { aspect-ratio: 3 / 4; } .as_9_16 { aspect-ratio: 9 / 16; } .f_g_100, .f_g { filter: grayscale( 100% ); } .f_g:hover { filter: grayscale( 0% ); } .slf_article h2, .slf_article h3, .slf_article p { margin-bottom: 0; padding : 1rem; border-top: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); } .slf_article h2 { margin-top: 3rem; margin-left: 0 ; font-size: calc( 1.275rem + .3vw ); font-weight: bold; } .slf_article h3 { margin-top: 3rem; margin-left: 3rem; font-size: 1.25rem ; } .slf_article h3 + p + p + p + p, .slf_article h3 + p + p + p , .slf_article h3 + p + p , .slf_article h3 + p { margin-left: 3rem; opacity: .5; } /* @media ( max-width: 767.98px ) { di-md { display: none ; } dn-md { display: inline; } } */ /* @media ( min-width: 768px ) { di-md { display: inline; } dn-md { display: none ; } } */ @media ( max-width: 575.98px ) { di-sm { display: none; } dn-sm { display: inline; } } @media ( min-width: 576px ) { di-sm { display: inline; } dn-sm { display: none; } } @media ( max-width: 767.98px ) { di-md { display: none; } dn-md { display: inline; } } @media ( min-width: 768px ) { di-md { display: inline; } dn-md { display: none; } } .slf_article figcaption { padding: 1rem; font-size: 75%; opacity: .5; text-align: center; } .slf_article img { width: 100%; max-width: 100%; border-radius: var( --bs-border-radius ); } .slf_article table { width: 100%; max-width: 100%; border-bottom: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); } .slf_article table td { padding : .5rem; border-top : var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); vertical-align: top; } .slf_article table td:first-of-type { padding-left : 1rem; } .slf_article table td:last-of-type { padding-right: 1rem; } /* .slf_article table .btn { margin: -.25rem 0; } */ .slf_article ul { padding : 1rem; border-top : var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); } .slf_article li { padding-left: 1rem; margin-bottom: .5rem; list-style-type: none; border-left: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); } .slf_article p:first-child, .slf_article p + p , .slf_article p + ul , .slf_article ul + p { border-top: 0; margin-top: -1rem; margin-bottom: 0; } .slf_article li:last-of-type { margin-bottom: 0; } .slf_article mark { -color: rgba( var( --bs-body-color-rgb ), var( --bs-text-opacity ) ) !important; padding: 0; } .slf_article mark[style="background-color:#EEEADD"] { background-color: var( --bs-primary-bg-subtle ) !important; } .slf_article mark[style="background-color:#D1D1E4"] { background-color: transparent !important; opacity: .5; } .slf_article sub { font-size: 75%; bottom: inherit; } /* ---- 포스트 보정 */ h1 br, .slf_article h2 br, .slf_article h3 br, .slf_article p br, .slf_article li br { display: block; content: ' '; margin: .25rem 0; } .slf_article ol li { border: 0 !important; list-style: inherit !important; margin-bottom: 1rem !important; } .slf_article ol li:last-of-type { margin-bottom: 0 !important; } /*.slf_article ol li { border: 0 !important; list-style: inherit !important; margin-bottom: .5rem !important; margin-left: 2rem; }*/ /*.slf_article ol li:last-of-type { margin-bottom: 1rem !important; }*/ .slf_article h2 + ol { border-top: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); padding-top: 1rem; } .slf_article table { width: calc( 100% - 2rem ); margin-left: 1rem; margin-right: 1rem; } .slf_article table th { background-color: var( --bs-light );} .slf_article table th, .slf_article table td { padding: .5rem 1rem; } /* ---- 설문 */ .survey_content .form-check { margin-bottom: .5rem ; } .survey_content .survey_answer .form-check:last-of-type { margin-bottom: 1rem ; } .survey_content .survey_answer:last-of-type .form-check:last-of-type { margin-bottom: 0rem ; } .survey_content .survey_answer:last-of-type .form-control { margin-bottom: 0rem !important; } /* ---- 내비 국기 */ #nav a img { width: 1.33rem; height: 1rem; object-fit: cover; display: inline-block; vertical-align: middle; } /* 레거시 .fi inline-block 동형 = 앵커 줄 높이 1.5 = 세로 간격 */