@charset "utf-8"; :root{ --line-height-basic: 150%; --line-height-um: 1.5; --line-height-umem: 1.5em; } /* 공통: lh 유틸 적용 시 li는 상대위치 + 행간 적용 */ .COM_li ul[class*="lh"] > li { line-height: var(--line-height-basic); position: relative; /* ::before 기준 */ } ul,ol{list-style:none;margin:0;padding:0; } .COM_tit{ width: 100%;display: flow-root } .COM_tit .sub_stit_box{ width: 100%; display: flow-root} .wg_box, .wg_box_in {width: 100%; display: flow-root} .COM_li { width: 100%; display: flow-root ;position: relative} .COM_li.pl40 { padding-left:40px; } .COM_li.box_gray { padding:20px; background:#f7f7f7; border-radius:20px; } .COM_li ul { display:flex; flex-direction:column; grid-gap:5px; margin-bottom: 0PX} .COM_li ul li { position:relative;} /**** 모바일 ****/ @media only all and (max-width:767px) { .COM_li ul li { font-family: var(--ff-ko10)!important;} .COM_li ul li em{font-family: var(--ff-ko10)!important; } .COM_box{ font-family: var(--ff-ko10)!important;} .COM_box em{ font-family: var(--ff-ko10)!important;} .COM_tit{ font-family: var(--ff-ko10)!important;} .COM_tit em{ font-family: var(--ff-ko10)!important;} } /* 구분 //end -----------------------------------*/ .COM_tit.upc{ text-transform: uppercase!important} /* 깊이 */ .COM_li.li-1d ul { ; } .COM_li.li-2d ul { padding-left: 20px; } .COM_li.li-3d ul { padding-left: 40px; } .COM_li ul[class*="li_gap"] { width: 100%; float: left; display: flex; flex-direction: column; } /* px 대신 clamp(최소, 뷰포트 기반, 최대) */ .COM_li ul.li_gap_2 { gap: clamp(1px, 0.5vw, 2px); } .COM_li ul.li_gap_5 { gap: clamp(2px, 0.5vw, 5px); } .COM_li ul.li_gap_7 { gap: clamp(3px, 0.5vw, 7px); } .COM_li ul.li_gap_10 { gap: clamp(4px, 0.5vw, 10px); } .COM_li ul.li_gap_12 { gap: clamp(5px, 0.5vw, 12px); } .COM_li ul.li_gap_15 { gap: clamp(6px, 0.5vw, 15px); } .COM_li ul.li_gap_20 { gap: clamp(8px, 0.5vw, 20px); } .COM_li ul.li_gap_25 { gap: clamp(10px, 0.5vw, 25px); } .COM_li ul.li_gap_30 { gap: clamp(12px, 0.5vw, 30px); } .COM_li ul.li_gap_40 { gap: clamp(16px, 0.5vw, 40px); } .COM_li ul.li_gap_50 { gap: clamp(20px, 0.5vw, 50px); } /* 불릿 */ .COM_li ul.basic>li { font-size: var(--tx-sm-size); color:#3b3b3b; } .COM_li ul.dot>li { font-size: var(--tx-sm-size); color:#3b3b3b; padding-left:15px; } .COM_li ul.dot>li:before { content:""; position:absolute; left:5px; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); width:3px; height:3px; border-radius:50%; background:var(--ink, #333); } .COM_li ul.dot2>li { font-size: var(--tx-sm-size); color:#3b3b3b; padding-left:22px; } .COM_li ul.dot2>li:before { content:""; position:absolute; left:5px; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); width:3px; height:3px; border-radius:50%; background:var(--primary, #2563eb); } .COM_li ul.dot3>li { font-size: var(--tx-sm-size); color:#3b3b3b; padding-left:22px; } .COM_li ul.dot3>li:before { content:""; position:absolute; left:5px;top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--primary, #2563eb); } .COM_li ul.dash>li { padding-left:22px; } .COM_li ul.dash>li:before { content:"-"; position:absolute; left:2px; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); } /* icon(프리셋은 부모 문서 CSS에도 정의돼 있지만, 프리뷰 일관성 위해 기본값 재정의) 추가 작업하기 */ .COM_li ul.icon>li { padding-left:25px; } .COM_li ul.icon>li:before { content:"\eb19"; font-family:unicons-line; position: absolute; left: 0; top:46%; transform: translateY(-50%); /* 줄의 시작 지점 */ height: var(--line-height-um); /* li의 한 줄(line-height) 높이 */ display: flex; align-items: center; /* 수직 중앙정렬 */ font-size: 40px; line-height: 1; /* 아이콘 크기는 자유 */ color: var(--ink,#000);} .COM_li ul.icon.li-icon1>li:before { content:"\eb6e"; } /* cue */ .COM_li ul.cue { counter-reset:cue; } .COM_li ul.cue>li { padding-left:28px; } .COM_li ul.cue>li:before { counter-increment:cue; content:counter(cue); position:absolute; left:0; top: calc(var(--line-height-um) /2); transform: translateY(-50%); width:20px; height:20px; border-radius:50%; border:1px solid var(--ink,#111); display:inline-flex; align-items:center; justify-content:center; font-size:12px; } .COM_li ul.star { counter-reset:cue; } .COM_li ul.star>li { padding-left:15px; position: relative} .COM_li ul.star>li:before { content: "*"; position:absolute; left:0; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); } .COM_li ul.num_normal { counter-reset: numc; } .COM_li ul.num_normal > li { padding-left: 20px; position: relative; /* ::before 위치 기준 */; } .COM_li ul.num_normal > li:before { counter-increment: numc; content: counter(numc) "."; position: absolute; left: 0px; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); color: #333; font-size: calc(var(--tx-sm-size) * 1); flex-wrap: 800; } .COM_li ul.num_bracket { counter-reset: numc; } .COM_li ul.num_bracket > li { padding-left: 20px; position: relative; /* ::before 위치 기준 */ font-size: calc(var(--tx-sm-size) * 0.9); } .COM_li ul.num_bracket > li:before { counter-increment: numc; content: counter(numc) ")"; position: absolute; left: 0px;top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); color: #333; font-size: calc(var(--tx-sm-size) * 0.9); flex-wrap: 800; } .COM_li ul.num { counter-reset:numc; } .COM_li ul.num>li { padding-left:30px; } .COM_li ul.num>li:before { counter-increment:numc; content:counter(numc); position:absolute; left:0; top: calc(1em * var(--line-height-um) / 2); /* line-height 150%의 절반 */width: 25px; height: 25px; border-radius: 100%; display: flex; justify-content: center; align-items: center; color: #333; font-size:calc(var(--tx-sm-size) * 0.9); background-color: #333; } .COM_li ul.num_b { counter-reset:numc; } .COM_li ul.num_b>li { padding: 5px 0px 5px 45px; font-size:calc(var(--tx-sm-size) * 1.2); line-height: var(--line-height-basic)} .COM_li ul.num_b>li:before { counter-increment:numc; content:counter(numc); position:absolute; left:0; top: calc(1em * var(--line-height-um) / 2); /* line-height 150%의 절반 */ width: 35px; height: 35px; border-radius: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size:calc(var(--tx-sm-size) * 0.95); background-color: #333; } .COM_li ul.num_b.square>li:before { border-radius:6px!important; } .COM_li ul.num_m { counter-reset:numc; } .COM_li ul.num_m>li { padding-left:30px; line-height: var(--line-height-basic) } .COM_li ul.num_m>li:before { counter-increment:numc; content:counter(numc); position:absolute; left:0;top: calc(1em * var(--line-height-um) / 2); /* line-height 150%의 절반 */ width: 25px; height: 25px; border-radius: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size:calc(var(--tx-sm-size) * 0.95); background-color: #333; } .COM_li ul.num_m.square>li:before { border-radius:6px!important; } .COM_li ul.num_s { counter-reset:numc; } .COM_li ul.num_s>li { padding-left:25px; line-height: var(--line-height-basic) } .COM_li ul.num_s>li:before { counter-increment:numc; content:counter(numc); position:absolute; left:0; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%); /* line-height 150%의 절반 */ width: 22px; height: 22px; border-radius: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size:calc(var(--tx-sm-size) * 0.95); background-color: #333; } .COM_li ul.num_s.square>li:before { border-radius:4px!important; font-size:calc(var(--tx-sm-size) * 0.8); display: flex; justify-content: center; align-items: center; } /* ── white 컬러 세트 ── */ .COM_li ul.dot.white>li, .COM_li ul.dot2.white>li, .COM_li ul.dot3.white>li, .COM_li ul.dash.white>li, .COM_li ul.icon.white>li, .COM_li ul.cue.white>li, .COM_li ul.star.white>li, .COM_li ul.num_normal.white>li, .COM_li ul.num_bracket.white>li, .COM_li ul.basic.white>li { color:#fff; } /* ::before 색상 */ .COM_li ul.dot.white>li:before, .COM_li ul.dot2.white>li:before, .COM_li ul.dot3.white>li:before { background:#fff; } .COM_li ul.dash.white>li:before, .COM_li ul.star.white>li:before, .COM_li ul.num_normal.white>li:before, .COM_li ul.num_bracket.white>li:before { color:#fff; } .COM_li ul.icon.white>li:before { color:#fff; } .COM_li ul.cue.white>li:before { border-color:#fff; color:#fff; } .COM_li ul.num.white>li:before, .COM_li ul.num_b.white>li:before, .COM_li ul.num_m.white>li:before, .COM_li ul.num_s.white>li:before { background:#fff; color:#333; } .COM_li ul.num.white>li, .COM_li ul.num_b.white>li, .COM_li ul.num_m.white>li, .COM_li ul.num_s.white>li { color:#fff; } /* 1. li 두께 (기본 500) */ .COM_li ul>li { font-weight:500 !important; } .COM_li ul.w300>li { font-weight:300 !important; } .COM_li ul.w400>li { font-weight:400 !important; } .COM_li ul.w500>li { font-weight:500 !important; } .COM_li ul.w600>li { font-weight:600 !important; } .COM_li ul.w700>li { font-weight:700 !important; } .COM_li ul.w800>li { font-weight:800 !important; } /* 2. li 색상 (기본 #000) */ .COM_li ul>li { color:#000; } .COM_li ul.Black>li { color:#000; } .COM_li ul.gray333>li { color:#333; } .COM_li ul.gray666>li { color:#666; } .COM_li ul.gray999>li { color:#999; } .COM_li ul.white>li { color:#FFF; } .COM_li ul.white-T>li { color:#FFFFFF80; } /* 3. li line-height (기본 150%) */ .COM_li ul>li { line-height:150% !important; } .COM_li ul.lh100>li{ line-height:100% !important; } .COM_li ul.lh110>li{ line-height:110% !important; } .COM_li ul.lh120>li{ line-height:120% !important; } .COM_li ul.lh130>li{ line-height:130% !important; } .COM_li ul.lh140>li{ line-height:140% !important; } .COM_li ul.lh150>li{ line-height:150% !important; } .COM_li ul.lh160>li{ line-height:160% !important; } .COM_li ul.lh170>li{ line-height:170% !important; } .COM_li ul.lh180>li{ line-height:180% !important; } .COM_li ul.lh190>li{ line-height:190% !important; } .COM_li ul.lh200>li{ line-height:200% !important; } /* 4-1. em 공통 */ .COM_li ul>li em { color:#000 !important; font-style:normal; font-weight:500 !important; } /* 4-2. em 색상 */ .COM_li ul.em-primary>li em { color: var(--primary, #2563eb) !important; } .COM_li ul.em-secondary>li em{ color: var(--secondary, #3b82f6) !important; } .COM_li ul.em-tertiary>li em { color: var(--tertiary, #0ea5e9) !important; } .COM_li ul.em-deep>li em { color: var(--deep, #111827) !important; } .COM_li ul.em-red>li em { color: var(--red, #ef4444) !important; } .COM_li ul.em-success>li em { color: var(--success, #10b981) !important; } .COM_li ul.em-cancel>li em { color: var(--cancel, #a3a3a3) !important; } .COM_li ul.em-Black >li em { color:#000 !important; } .COM_li ul.em-gray333>li em { color:#333 !important; } .COM_li ul.em-gray666>li em { color:#666 !important; } .COM_li ul.em-gray999>li em { color:#999 !important; } .COM_li ul.em-white>li em { color:#fff !important; } .COM_li ul.em-white-T>li em { color:#FFFFFF80 !important; } /* 5. em 두께 */ .COM_li ul.em-w300>li em{ font-weight:300 !important; } .COM_li ul.em-w400>li em{ font-weight:400 !important; } .COM_li ul.em-w500>li em{ font-weight:500 !important; } .COM_li ul.em-w600>li em{ font-weight:600 !important; } .COM_li ul.em-w700>li em{ font-weight:700 !important; } .COM_li ul.em-w800>li em{ font-weight:800 !important; } /* 6. em 앱솔루트 + 좌여백 */ .COM_li ul.em_absolute>li em { position:absolute; left:0px; top:calc(1em * var(--line-height-um) / 2); transform:translateY(-50%); } .COM_li ul.li_pl_5>li { padding-left: clamp(3px, 2.474px + 0.132vw, 5px); } .COM_li ul.li_pl_10>li { padding-left: clamp(6px, 4.947px + 0.263vw, 10px); } .COM_li ul.li_pl_15>li { padding-left: clamp(9px, 7.421px + 0.395vw, 15px); } .COM_li ul.li_pl_20>li { padding-left: clamp(12px, 9.895px + 0.526vw, 20px); } .COM_li ul.li_pl_25>li { padding-left: clamp(15px, 12.368px + 0.658vw, 25px); } .COM_li ul.li_pl_30>li { padding-left: clamp(18px, 14.842px + 0.789vw, 30px); } .COM_li ul.li_pl_35>li { padding-left: clamp(21px, 17.316px + 0.921vw, 35px); } .COM_li ul.li_pl_40>li { padding-left: clamp(24px, 19.789px + 1.053vw, 40px); } .COM_li ul.li_pl_45>li { padding-left: clamp(27px, 22.263px + 1.184vw, 45px); } .COM_li ul.li_pl_50>li { padding-left: clamp(30px, 24.737px + 1.316vw, 50px); } .COM_li ul.li_pl_50>li { padding-left: clamp(30px, 24.737px + 1.316vw, 50px); } .COM_li ul.li_pl_60>li { padding-left: clamp(36px, 29.684px + 1.579vw, 60px); } .COM_li ul.li_pl_70>li { padding-left: clamp(42px, 34.632px + 1.842vw, 70px); } .COM_li ul.li_pl_80>li { padding-left: clamp(48px, 39.579px + 2.105vw, 80px); } .COM_li ul.li_pl_90>li { padding-left: clamp(54px, 44.526px + 2.368vw, 90px); } .COM_li ul.li_pl_100>li { padding-left: clamp(60px, 49.474px + 2.632vw, 100px); } .COM_li ul.li_pl_110>li { padding-left: clamp(66px, 54.421px + 2.895vw, 110px); } .COM_li ul.li_pl_120>li { padding-left: clamp(72px, 59.368px + 3.158vw, 120px); } .COM_li ul.li_pl_130>li { padding-left: clamp(78px, 64.316px + 3.421vw, 130px); } .COM_li ul.li_pl_140>li { padding-left: clamp(84px, 69.263px + 3.684vw, 140px); } .COM_li ul.li_pl_150>li { padding-left: clamp(90px, 74.211px + 3.947vw, 150px); } .COM_li ul.li_pl_160>li { padding-left: clamp(96px, 79.158px + 4.211vw, 160px); } .COM_li ul.li_pl_170>li { padding-left: clamp(102px, 84.105px + 4.474vw, 170px); } .COM_li ul.li_pl_180>li { padding-left: clamp(108px, 89.053px + 4.737vw, 180px); } .COM_li ul.li_pl_190>li { padding-left: clamp(114px, 94px + 5vw, 190px); } .COM_li ul.li_pl_200>li { padding-left: clamp(120px, 98.947px + 5.263vw, 200px); } .COM_li ul.li_pl_210>li { padding-left: clamp(126px, 103.895px + 5.526vw, 210px); } .COM_li ul.li_pl_220>li { padding-left: clamp(132px, 108.842px + 5.789vw, 220px); } .COM_li ul.li_pl_230>li { padding-left: clamp(138px, 113.789px + 6.053vw, 230px); } .COM_li ul.li_pl_240>li { padding-left: clamp(144px, 118.737px + 6.316vw, 240px); } .COM_li ul.li_pl_250>li { padding-left: clamp(150px, 123.684px + 6.579vw, 250px); } .COM_li ul.li_pl_260>li { padding-left: clamp(156px, 128.632px + 6.842vw, 260px); } .COM_li ul.li_pl_270>li { padding-left: clamp(162px, 133.579px + 7.105vw, 270px); } .COM_li ul.li_pl_280>li { padding-left: clamp(168px, 138.526px + 7.368vw, 280px); } .COM_li ul.li_pl_290>li { padding-left: clamp(174px, 143.474px + 7.632vw, 290px); } .COM_li ul.li_pl_300>li { padding-left: clamp(180px, 148.421px + 7.895vw, 300px); } /* 7. 프리셋 + 배율 */ .COM_li ul.f_sm >li { --_base-size: var(--tx-sm-size); font-size: var(--_base-size); } .COM_li ul.f_mds >li { --_base-size: var(--tit-mds-size); font-size: var(--_base-size); } .COM_li ul.f_md >li { --_base-size: var(--tit-md-size); font-size: var(--_base-size); } .COM_li ul.f_lg >li { --_base-size: var(--tit-lg-size); font-size: var(--_base-size); } .COM_li ul.scale-07>li { font-size: calc(var(--_base-size) * 0.75 * var(--_ff-m, 1)); } .COM_li ul.scale-08>li { font-size: calc(var(--_base-size) * 0.85 * var(--_ff-m, 1)); } .COM_li ul.scale-09>li { font-size: calc(var(--_base-size) * 0.95 * var(--_ff-m, 1)); } .COM_li ul.scale-11>li { font-size: calc(var(--_base-size) * 1.10 * var(--_ff-m, 1)); } .COM_li ul.scale-12>li { font-size: calc(var(--_base-size) * 1.20 * var(--_ff-m, 1)); } .COM_li ul.scale-13>li { font-size: calc(var(--_base-size) * 1.30 * var(--_ff-m, 1)); } .COM_li ul.scale-14>li { font-size: calc(var(--_base-size) * 1.40 * var(--_ff-m, 1)); } .COM_li ul.scale-157>li { font-size: calc(var(--_base-size) * 1.50 * var(--_ff-m, 1)); } /* ===== 110% ~ 200% 행간 유틸 (UL에 클래스 부여) ===== */ /* UL에 선언된 변수는 하위 li, ::before의 top: calc(1em * var(--line-height-um) / 2) 계산에 자동 반영됩니다. */ .COM_li ul.lh110 { --line-height-basic:110%; --line-height-um:1.10; } .COM_li ul.lh120 { --line-height-basic:120%; --line-height-um:1.20; } .COM_li ul.lh130 { --line-height-basic:130%; --line-height-um:1.30; } .COM_li ul.lh140 { --line-height-basic:140%; --line-height-um:1.40; } .COM_li ul.lh150 { --line-height-basic:150%; --line-height-um:1.50; } .COM_li ul.lh160 { --line-height-basic:160%; --line-height-um:1.60; } .COM_li ul.lh170 { --line-height-basic:170%; --line-height-um:1.70; } .COM_li ul.lh180 { --line-height-basic:180%; --line-height-um:1.80; } .COM_li ul.lh190 { --line-height-basic:190%; --line-height-um:1.90; } .COM_li ul.lh200 { --line-height-basic:200%; --line-height-um:2.00; } /* 구분 -----------------------------------*/ /**** pc ****/ @media only all and (min-width:768px) { } /**** pc2 ****/ @media all and (max-width:1280px) and (min-width:768px) { } /**** 모바일 ****/ @media only all and (max-width:767px) { .COM_li ul.li_pl_200>li { padding-left:0px } .COM_li ul.li_pl_200.em_absolute>li em { width: 100%; float: left; position: absolute; } } /**** 모바일2 ****/ @media only all and (max-width:400px) { } /* 구분 //end -----------------------------------*/ /* ========== .COM_li ul - li 내부 em 컬러 ========== */ /* ========== 타이틀 베이스 ========== */ .COM_tit{ --_base-size: var(--tit-md-size); /* 기본은 md */ font-size: var(--_base-size); line-height: 1.5; font-weight: 700; color:#000; margin:0; /* div용 */ } /* 폰트 패밀리 (공통) */ .ff-ko1{font-family:var(--ff-ko1)!important} .ff-ko2{font-family:var(--ff-ko2)!important} .ff-ko3{font-family:var(--ff-ko3)!important} .ff-ko4{font-family:var(--ff-ko4)!important} .ff-ko5{font-family:var(--ff-ko5)!important} .ff-ko6{font-family:var(--ff-ko6)!important} .ff-ko7{font-family:var(--ff-ko7)!important} .ff-ko8{font-family:var(--ff-ko8)!important} .ff-ko9{font-family:var(--ff-ko9)!important} .ff-ko10{font-family:var(--ff-ko10)!important} .ff-ko11{font-family:var(--ff-ko11)!important} /* em font-family (공통) */ em.ff-ko1 {font-family: var(--ff-ko1)!important} em.ff-ko2 {font-family: var(--ff-ko2)!important} em.ff-ko3 {font-family: var(--ff-ko3)!important} em.ff-ko4 {font-family: var(--ff-ko4)!important} em.ff-ko5 {font-family: var(--ff-ko5)!important} em.ff-ko6 {font-family: var(--ff-ko6)!important} em.ff-ko7 {font-family: var(--ff-ko7)!important} em.ff-ko8 {font-family: var(--ff-ko8)!important} em.ff-ko9 {font-family: var(--ff-ko9)!important} em.ff-ko10 {font-family: var(--ff-ko10)!important} em.ff-ko11 {font-family: var(--ff-ko11)!important} /* 폰트 패밀리 (공통) */ ul.ff-ko1 li{font-family:var(--ff-ko1)!important} ul.ff-ko2 li{font-family:var(--ff-ko2)!important} ul.ff-ko3 li{font-family:var(--ff-ko3)!important} ul.ff-ko4 li{font-family:var(--ff-ko4)!important} ul.ff-ko5 li{font-family:var(--ff-ko5)!important} ul.ff-ko6 li{font-family:var(--ff-ko6)!important} ul.ff-ko7 li{font-family:var(--ff-ko7)!important} ul.ff-ko8 li{font-family:var(--ff-ko8)!important} ul.ff-ko9 li{font-family:var(--ff-ko9)!important} ul.ff-ko10 li{font-family:var(--ff-ko10)!important} ul.ff-ko11 li{font-family:var(--ff-ko11)!important} /* em font-family (공통) */ ul.ff-ko1 li em{font-family: var(--ff-ko1)!important} ul.ff-ko2 li em{font-family: var(--ff-ko2)!important} ul.ff-ko3 li em{font-family: var(--ff-ko3)!important} ul.ff-ko4 li em{font-family: var(--ff-ko4)!important} ul.ff-ko5 li em{font-family: var(--ff-ko5)!important} ul.ff-ko6 li em{font-family: var(--ff-ko6)!important} ul.ff-ko7 li em{font-family: var(--ff-ko7)!important} ul.ff-ko8 li em{font-family: var(--ff-ko8)!important} ul.ff-ko9 li em{font-family: var(--ff-ko9)!important} ul.ff-ko10 li em{font-family: var(--ff-ko10)!important} ul.ff-ko11 li em{font-family: var(--ff-ko11)!important} /* 크기 프리셋 */ .COM_tit.f_sm { --_base-size: var(--tx-sm-size); } .COM_tit.f_mds { --_base-size: var(--tit-mds-size); } .COM_tit.f_md { --_base-size: var(--tit-md-size); } .COM_tit.f_lg { --_base-size: var(--tit-lg-size); } /* ========== 배율(곱하기) ========== */ /* 주의: ‘부모 100%’가 아니라 자신의 --_base-size를 곱합니다. */ /* --_ff-m: 특정 폰트의 모바일 축소 비율 (setting_css.php에서 동적 생성, 기본값 1) */ .scale-07 { font-size: calc(var(--_base-size) * 0.72 * var(--_ff-m, 1)); } .scale-08 { font-size: calc(var(--_base-size) * 0.83 * var(--_ff-m, 1)); } .scale-09 { font-size: calc(var(--_base-size) * 0.92 * var(--_ff-m, 1)); } .scale-11 { font-size: calc(var(--_base-size) * 1.1 * var(--_ff-m, 1)); } .scale-12 { font-size: calc(var(--_base-size) * 1.2 * var(--_ff-m, 1)); } .scale-13 { font-size: calc(var(--_base-size) * 1.3 * var(--_ff-m, 1)); } .scale-14 { font-size: calc(var(--_base-size) * 1.4 * var(--_ff-m, 1)); } .scale-15 { font-size: calc(var(--_base-size) * 1.5 * var(--_ff-m, 1)); } /* ======================================== 1. COM_tit 자체 텍스트 색상 ======================================== */ /* 기본 색상 */ .COM_tit.primary { color: var(--primary) !important; } .COM_tit.secondary { color: var(--secondary) !important; } .COM_tit.tertiary { color: var(--tertiary) !important; } .COM_tit.deep { color: var(--deep) !important; } .COM_tit.red { color: var(--red) !important; } .COM_tit.success { color: var(--success) !important; } .COM_tit.cancel { color: var(--cancel) !important; } .COM_tit.darkgray { color: var(--darkgray) !important; } .COM_tit.blue { color: var(--blue) !important; } .COM_tit.point { color: var(--point) !important; } .COM_tit.point1 { color: var(--point1) !important; } .COM_tit.point2 { color: var(--point2) !important; } .COM_tit.point3 { color: var(--point3) !important; } .COM_tit.point4 { color: var(--point4) !important; } .COM_tit.point5 { color: var(--point5) !important; } .COM_tit.gray333 { color: #333 !important; } .COM_tit.gray666 { color: #666 !important; } .COM_tit.gray999 { color: #999 !important; } .COM_tit.white { color: #fff !important; } .COM_tit.white-T { color: #FFFFFF80 !important; } /* Primary Shades */ .COM_tit.primary-50 { color: var(--primary-50) !important; } .COM_tit.primary-100 { color: var(--primary-100) !important; } .COM_tit.primary-200 { color: var(--primary-200) !important; } .COM_tit.primary-300 { color: var(--primary-300) !important; } .COM_tit.primary-400 { color: var(--primary-400) !important; } .COM_tit.primary-500 { color: var(--primary-500) !important; } .COM_tit.primary-600 { color: var(--primary-600) !important; } .COM_tit.primary-700 { color: var(--primary-700) !important; } .COM_tit.primary-800 { color: var(--primary-800) !important; } .COM_tit.primary-900 { color: var(--primary-900) !important; } /* Primary Opacity */ .COM_tit.primary-op10 { color: var(--primary-op10) !important; } .COM_tit.primary-op20 { color: var(--primary-op20) !important; } .COM_tit.primary-op30 { color: var(--primary-op30) !important; } .COM_tit.primary-op40 { color: var(--primary-op40) !important; } .COM_tit.primary-op50 { color: var(--primary-op50) !important; } .COM_tit.primary-op60 { color: var(--primary-op60) !important; } .COM_tit.primary-op70 { color: var(--primary-op70) !important; } .COM_tit.primary-op80 { color: var(--primary-op80) !important; } .COM_tit.primary-op90 { color: var(--primary-op90) !important; } /* Secondary Shades */ .COM_tit.secondary-50 { color: var(--secondary-50) !important; } .COM_tit.secondary-100 { color: var(--secondary-100) !important; } .COM_tit.secondary-200 { color: var(--secondary-200) !important; } .COM_tit.secondary-300 { color: var(--secondary-300) !important; } .COM_tit.secondary-400 { color: var(--secondary-400) !important; } .COM_tit.secondary-500 { color: var(--secondary-500) !important; } .COM_tit.secondary-600 { color: var(--secondary-600) !important; } .COM_tit.secondary-700 { color: var(--secondary-700) !important; } .COM_tit.secondary-800 { color: var(--secondary-800) !important; } .COM_tit.secondary-900 { color: var(--secondary-900) !important; } /* Secondary Opacity */ .COM_tit.secondary-op10 { color: var(--secondary-op10) !important; } .COM_tit.secondary-op20 { color: var(--secondary-op20) !important; } .COM_tit.secondary-op30 { color: var(--secondary-op30) !important; } .COM_tit.secondary-op40 { color: var(--secondary-op40) !important; } .COM_tit.secondary-op50 { color: var(--secondary-op50) !important; } .COM_tit.secondary-op60 { color: var(--secondary-op60) !important; } .COM_tit.secondary-op70 { color: var(--secondary-op70) !important; } .COM_tit.secondary-op80 { color: var(--secondary-op80) !important; } .COM_tit.secondary-op90 { color: var(--secondary-op90) !important; } /* Tertiary Shades */ .COM_tit.tertiary-50 { color: var(--tertiary-50) !important; } .COM_tit.tertiary-100 { color: var(--tertiary-100) !important; } .COM_tit.tertiary-200 { color: var(--tertiary-200) !important; } .COM_tit.tertiary-300 { color: var(--tertiary-300) !important; } .COM_tit.tertiary-400 { color: var(--tertiary-400) !important; } .COM_tit.tertiary-500 { color: var(--tertiary-500) !important; } .COM_tit.tertiary-600 { color: var(--tertiary-600) !important; } .COM_tit.tertiary-700 { color: var(--tertiary-700) !important; } .COM_tit.tertiary-800 { color: var(--tertiary-800) !important; } .COM_tit.tertiary-900 { color: var(--tertiary-900) !important; } /* Tertiary Opacity */ .COM_tit.tertiary-op10 { color: var(--tertiary-op10) !important; } .COM_tit.tertiary-op20 { color: var(--tertiary-op20) !important; } .COM_tit.tertiary-op30 { color: var(--tertiary-op30) !important; } .COM_tit.tertiary-op40 { color: var(--tertiary-op40) !important; } .COM_tit.tertiary-op50 { color: var(--tertiary-op50) !important; } .COM_tit.tertiary-op60 { color: var(--tertiary-op60) !important; } .COM_tit.tertiary-op70 { color: var(--tertiary-op70) !important; } .COM_tit.tertiary-op80 { color: var(--tertiary-op80) !important; } .COM_tit.tertiary-op90 { color: var(--tertiary-op90) !important; } /* Gray Shades */ .COM_tit.gray-50 { color: var(--gray-50) !important; } .COM_tit.gray-100 { color: var(--gray-100) !important; } .COM_tit.gray-200 { color: var(--gray-200) !important; } .COM_tit.gray-300 { color: var(--gray-300) !important; } .COM_tit.gray-400 { color: var(--gray-400) !important; } .COM_tit.gray-500 { color: var(--gray-500) !important; } .COM_tit.gray-600 { color: var(--gray-600) !important; } .COM_tit.gray-700 { color: var(--gray-700) !important; } .COM_tit.gray-800 { color: var(--gray-800) !important; } .COM_tit.gray-900 { color: var(--gray-900) !important; } /* Gray Opacity */ .COM_tit.gray-op10 { color: var(--gray-op10) !important; } .COM_tit.gray-op20 { color: var(--gray-op20) !important; } .COM_tit.gray-op30 { color: var(--gray-op30) !important; } .COM_tit.gray-op40 { color: var(--gray-op40) !important; } .COM_tit.gray-op50 { color: var(--gray-op50) !important; } .COM_tit.gray-op60 { color: var(--gray-op60) !important; } .COM_tit.gray-op70 { color: var(--gray-op70) !important; } .COM_tit.gray-op80 { color: var(--gray-op80) !important; } .COM_tit.gray-op90 { color: var(--gray-op90) !important; } /* Other Colors Opacity */ .COM_tit.deep-op10 { color: var(--deep-op10) !important; } .COM_tit.deep-op20 { color: var(--deep-op20) !important; } .COM_tit.deep-op30 { color: var(--deep-op30) !important; } .COM_tit.deep-op40 { color: var(--deep-op40) !important; } .COM_tit.deep-op50 { color: var(--deep-op50) !important; } .COM_tit.deep-op60 { color: var(--deep-op60) !important; } .COM_tit.deep-op70 { color: var(--deep-op70) !important; } .COM_tit.deep-op80 { color: var(--deep-op80) !important; } .COM_tit.deep-op90 { color: var(--deep-op90) !important; } .COM_tit.red-op10 { color: var(--red-op10) !important; } .COM_tit.red-op20 { color: var(--red-op20) !important; } .COM_tit.red-op30 { color: var(--red-op30) !important; } .COM_tit.red-op40 { color: var(--red-op40) !important; } .COM_tit.red-op50 { color: var(--red-op50) !important; } .COM_tit.red-op60 { color: var(--red-op60) !important; } .COM_tit.red-op70 { color: var(--red-op70) !important; } .COM_tit.red-op80 { color: var(--red-op80) !important; } .COM_tit.red-op90 { color: var(--red-op90) !important; } .COM_tit.success-op10 { color: var(--success-op10) !important; } .COM_tit.success-op20 { color: var(--success-op20) !important; } .COM_tit.success-op30 { color: var(--success-op30) !important; } .COM_tit.success-op40 { color: var(--success-op40) !important; } .COM_tit.success-op50 { color: var(--success-op50) !important; } .COM_tit.success-op60 { color: var(--success-op60) !important; } .COM_tit.success-op70 { color: var(--success-op70) !important; } .COM_tit.success-op80 { color: var(--success-op80) !important; } .COM_tit.success-op90 { color: var(--success-op90) !important; } .COM_tit.cancel-op10 { color: var(--cancel-op10) !important; } .COM_tit.cancel-op20 { color: var(--cancel-op20) !important; } .COM_tit.cancel-op30 { color: var(--cancel-op30) !important; } .COM_tit.cancel-op40 { color: var(--cancel-op40) !important; } .COM_tit.cancel-op50 { color: var(--cancel-op50) !important; } .COM_tit.cancel-op60 { color: var(--cancel-op60) !important; } .COM_tit.cancel-op70 { color: var(--cancel-op70) !important; } .COM_tit.cancel-op80 { color: var(--cancel-op80) !important; } .COM_tit.cancel-op90 { color: var(--cancel-op90) !important; } .COM_tit.darkgray-op10 { color: var(--darkgray-op10) !important; } .COM_tit.darkgray-op20 { color: var(--darkgray-op20) !important; } .COM_tit.darkgray-op30 { color: var(--darkgray-op30) !important; } .COM_tit.darkgray-op40 { color: var(--darkgray-op40) !important; } .COM_tit.darkgray-op50 { color: var(--darkgray-op50) !important; } .COM_tit.darkgray-op60 { color: var(--darkgray-op60) !important; } .COM_tit.darkgray-op70 { color: var(--darkgray-op70) !important; } .COM_tit.darkgray-op80 { color: var(--darkgray-op80) !important; } .COM_tit.darkgray-op90 { color: var(--darkgray-op90) !important; } .COM_tit.blue-op10 { color: var(--blue-op10) !important; } .COM_tit.blue-op20 { color: var(--blue-op20) !important; } .COM_tit.blue-op30 { color: var(--blue-op30) !important; } .COM_tit.blue-op40 { color: var(--blue-op40) !important; } .COM_tit.blue-op50 { color: var(--blue-op50) !important; } .COM_tit.blue-op60 { color: var(--blue-op60) !important; } .COM_tit.blue-op70 { color: var(--blue-op70) !important; } .COM_tit.blue-op80 { color: var(--blue-op80) !important; } .COM_tit.blue-op90 { color: var(--blue-op90) !important; } .COM_tit.point-op10 { color: var(--point-op10) !important; } .COM_tit.point-op20 { color: var(--point-op20) !important; } .COM_tit.point-op30 { color: var(--point-op30) !important; } .COM_tit.point-op40 { color: var(--point-op40) !important; } .COM_tit.point-op50 { color: var(--point-op50) !important; } .COM_tit.point-op60 { color: var(--point-op60) !important; } .COM_tit.point-op70 { color: var(--point-op70) !important; } .COM_tit.point-op80 { color: var(--point-op80) !important; } .COM_tit.point-op90 { color: var(--point-op90) !important; } .COM_tit.point1-op10 { color: var(--point1-op10) !important; } .COM_tit.point1-op20 { color: var(--point1-op20) !important; } .COM_tit.point1-op30 { color: var(--point1-op30) !important; } .COM_tit.point1-op40 { color: var(--point1-op40) !important; } .COM_tit.point1-op50 { color: var(--point1-op50) !important; } .COM_tit.point1-op60 { color: var(--point1-op60) !important; } .COM_tit.point1-op70 { color: var(--point1-op70) !important; } .COM_tit.point1-op80 { color: var(--point1-op80) !important; } .COM_tit.point1-op90 { color: var(--point1-op90) !important; } .COM_tit.point2-op10 { color: var(--point2-op10) !important; } .COM_tit.point2-op20 { color: var(--point2-op20) !important; } .COM_tit.point2-op30 { color: var(--point2-op30) !important; } .COM_tit.point2-op40 { color: var(--point2-op40) !important; } .COM_tit.point2-op50 { color: var(--point2-op50) !important; } .COM_tit.point2-op60 { color: var(--point2-op60) !important; } .COM_tit.point2-op70 { color: var(--point2-op70) !important; } .COM_tit.point2-op80 { color: var(--point2-op80) !important; } .COM_tit.point2-op90 { color: var(--point2-op90) !important; } .COM_tit.point3-op10 { color: var(--point3-op10) !important; } .COM_tit.point3-op20 { color: var(--point3-op20) !important; } .COM_tit.point3-op30 { color: var(--point3-op30) !important; } .COM_tit.point3-op40 { color: var(--point3-op40) !important; } .COM_tit.point3-op50 { color: var(--point3-op50) !important; } .COM_tit.point3-op60 { color: var(--point3-op60) !important; } .COM_tit.point3-op70 { color: var(--point3-op70) !important; } .COM_tit.point3-op80 { color: var(--point3-op80) !important; } .COM_tit.point3-op90 { color: var(--point3-op90) !important; } .COM_tit.point4-op10 { color: var(--point4-op10) !important; } .COM_tit.point4-op20 { color: var(--point4-op20) !important; } .COM_tit.point4-op30 { color: var(--point4-op30) !important; } .COM_tit.point4-op40 { color: var(--point4-op40) !important; } .COM_tit.point4-op50 { color: var(--point4-op50) !important; } .COM_tit.point4-op60 { color: var(--point4-op60) !important; } .COM_tit.point4-op70 { color: var(--point4-op70) !important; } .COM_tit.point4-op80 { color: var(--point4-op80) !important; } .COM_tit.point4-op90 { color: var(--point4-op90) !important; } .COM_tit.point5-op10 { color: var(--point5-op10) !important; } .COM_tit.point5-op20 { color: var(--point5-op20) !important; } .COM_tit.point5-op30 { color: var(--point5-op30) !important; } .COM_tit.point5-op40 { color: var(--point5-op40) !important; } .COM_tit.point5-op50 { color: var(--point5-op50) !important; } .COM_tit.point5-op60 { color: var(--point5-op60) !important; } .COM_tit.point5-op70 { color: var(--point5-op70) !important; } .COM_tit.point5-op80 { color: var(--point5-op80) !important; } .COM_tit.point5-op90 { color: var(--point5-op90) !important; } /* ======================================== 2. COM_tit 자체 배경색 ======================================== */ /* Primary */ .COM_tit.bg-primary { background-color: var(--primary) !important; } .COM_tit.bg-primary-50 { background-color: var(--primary-50) !important; } .COM_tit.bg-primary-100 { background-color: var(--primary-100) !important; } .COM_tit.bg-primary-200 { background-color: var(--primary-200) !important; } .COM_tit.bg-primary-300 { background-color: var(--primary-300) !important; } .COM_tit.bg-primary-400 { background-color: var(--primary-400) !important; } .COM_tit.bg-primary-500 { background-color: var(--primary-500) !important; } .COM_tit.bg-primary-600 { background-color: var(--primary-600) !important; } .COM_tit.bg-primary-700 { background-color: var(--primary-700) !important; } .COM_tit.bg-primary-800 { background-color: var(--primary-800) !important; } .COM_tit.bg-primary-900 { background-color: var(--primary-900) !important; } .COM_tit.bg-primary-op10 { background-color: var(--primary-op10) !important; } .COM_tit.bg-primary-op20 { background-color: var(--primary-op20) !important; } .COM_tit.bg-primary-op30 { background-color: var(--primary-op30) !important; } .COM_tit.bg-primary-op40 { background-color: var(--primary-op40) !important; } .COM_tit.bg-primary-op50 { background-color: var(--primary-op50) !important; } .COM_tit.bg-primary-op60 { background-color: var(--primary-op60) !important; } .COM_tit.bg-primary-op70 { background-color: var(--primary-op70) !important; } .COM_tit.bg-primary-op80 { background-color: var(--primary-op80) !important; } .COM_tit.bg-primary-op90 { background-color: var(--primary-op90) !important; } /* Secondary */ .COM_tit.bg-secondary { background-color: var(--secondary) !important; } .COM_tit.bg-secondary-50 { background-color: var(--secondary-50) !important; } .COM_tit.bg-secondary-100 { background-color: var(--secondary-100) !important; } .COM_tit.bg-secondary-200 { background-color: var(--secondary-200) !important; } .COM_tit.bg-secondary-300 { background-color: var(--secondary-300) !important; } .COM_tit.bg-secondary-400 { background-color: var(--secondary-400) !important; } .COM_tit.bg-secondary-500 { background-color: var(--secondary-500) !important; } .COM_tit.bg-secondary-600 { background-color: var(--secondary-600) !important; } .COM_tit.bg-secondary-700 { background-color: var(--secondary-700) !important; } .COM_tit.bg-secondary-800 { background-color: var(--secondary-800) !important; } .COM_tit.bg-secondary-900 { background-color: var(--secondary-900) !important; } .COM_tit.bg-secondary-op10 { background-color: var(--secondary-op10) !important; } .COM_tit.bg-secondary-op20 { background-color: var(--secondary-op20) !important; } .COM_tit.bg-secondary-op30 { background-color: var(--secondary-op30) !important; } .COM_tit.bg-secondary-op40 { background-color: var(--secondary-op40) !important; } .COM_tit.bg-secondary-op50 { background-color: var(--secondary-op50) !important; } .COM_tit.bg-secondary-op60 { background-color: var(--secondary-op60) !important; } .COM_tit.bg-secondary-op70 { background-color: var(--secondary-op70) !important; } .COM_tit.bg-secondary-op80 { background-color: var(--secondary-op80) !important; } .COM_tit.bg-secondary-op90 { background-color: var(--secondary-op90) !important; } /* Tertiary */ .COM_tit.bg-tertiary { background-color: var(--tertiary) !important; } .COM_tit.bg-tertiary-50 { background-color: var(--tertiary-50) !important; } .COM_tit.bg-tertiary-100 { background-color: var(--tertiary-100) !important; } .COM_tit.bg-tertiary-200 { background-color: var(--tertiary-200) !important; } .COM_tit.bg-tertiary-300 { background-color: var(--tertiary-300) !important; } .COM_tit.bg-tertiary-400 { background-color: var(--tertiary-400) !important; } .COM_tit.bg-tertiary-500 { background-color: var(--tertiary-500) !important; } .COM_tit.bg-tertiary-600 { background-color: var(--tertiary-600) !important; } .COM_tit.bg-tertiary-700 { background-color: var(--tertiary-700) !important; } .COM_tit.bg-tertiary-800 { background-color: var(--tertiary-800) !important; } .COM_tit.bg-tertiary-900 { background-color: var(--tertiary-900) !important; } .COM_tit.bg-tertiary-op10 { background-color: var(--tertiary-op10) !important; } .COM_tit.bg-tertiary-op20 { background-color: var(--tertiary-op20) !important; } .COM_tit.bg-tertiary-op30 { background-color: var(--tertiary-op30) !important; } .COM_tit.bg-tertiary-op40 { background-color: var(--tertiary-op40) !important; } .COM_tit.bg-tertiary-op50 { background-color: var(--tertiary-op50) !important; } .COM_tit.bg-tertiary-op60 { background-color: var(--tertiary-op60) !important; } .COM_tit.bg-tertiary-op70 { background-color: var(--tertiary-op70) !important; } .COM_tit.bg-tertiary-op80 { background-color: var(--tertiary-op80) !important; } .COM_tit.bg-tertiary-op90 { background-color: var(--tertiary-op90) !important; } /* Gray */ .COM_tit.bg-gray { background-color: var(--gray) !important; } .COM_tit.bg-gray-50 { background-color: var(--gray-50) !important; } .COM_tit.bg-gray-100 { background-color: var(--gray-100) !important; } .COM_tit.bg-gray-200 { background-color: var(--gray-200) !important; } .COM_tit.bg-gray-300 { background-color: var(--gray-300) !important; } .COM_tit.bg-gray-400 { background-color: var(--gray-400) !important; } .COM_tit.bg-gray-500 { background-color: var(--gray-500) !important; } .COM_tit.bg-gray-600 { background-color: var(--gray-600) !important; } .COM_tit.bg-gray-700 { background-color: var(--gray-700) !important; } .COM_tit.bg-gray-800 { background-color: var(--gray-800) !important; } .COM_tit.bg-gray-900 { background-color: var(--gray-900) !important; } .COM_tit.bg-gray-op10 { background-color: var(--gray-op10) !important; } .COM_tit.bg-gray-op20 { background-color: var(--gray-op20) !important; } .COM_tit.bg-gray-op30 { background-color: var(--gray-op30) !important; } .COM_tit.bg-gray-op40 { background-color: var(--gray-op40) !important; } .COM_tit.bg-gray-op50 { background-color: var(--gray-op50) !important; } .COM_tit.bg-gray-op60 { background-color: var(--gray-op60) !important; } .COM_tit.bg-gray-op70 { background-color: var(--gray-op70) !important; } .COM_tit.bg-gray-op80 { background-color: var(--gray-op80) !important; } .COM_tit.bg-gray-op90 { background-color: var(--gray-op90) !important; } /* Other Colors */ .COM_tit.bg-deep { background-color: var(--deep) !important; } .COM_tit.bg-deep-op10 { background-color: var(--deep-op10) !important; } .COM_tit.bg-deep-op20 { background-color: var(--deep-op20) !important; } .COM_tit.bg-deep-op30 { background-color: var(--deep-op30) !important; } .COM_tit.bg-deep-op40 { background-color: var(--deep-op40) !important; } .COM_tit.bg-deep-op50 { background-color: var(--deep-op50) !important; } .COM_tit.bg-deep-op60 { background-color: var(--deep-op60) !important; } .COM_tit.bg-deep-op70 { background-color: var(--deep-op70) !important; } .COM_tit.bg-deep-op80 { background-color: var(--deep-op80) !important; } .COM_tit.bg-deep-op90 { background-color: var(--deep-op90) !important; } .COM_tit.bg-red { background-color: var(--red) !important; } .COM_tit.bg-red-op10 { background-color: var(--red-op10) !important; } .COM_tit.bg-red-op20 { background-color: var(--red-op20) !important; } .COM_tit.bg-red-op30 { background-color: var(--red-op30) !important; } .COM_tit.bg-red-op40 { background-color: var(--red-op40) !important; } .COM_tit.bg-red-op50 { background-color: var(--red-op50) !important; } .COM_tit.bg-red-op60 { background-color: var(--red-op60) !important; } .COM_tit.bg-red-op70 { background-color: var(--red-op70) !important; } .COM_tit.bg-red-op80 { background-color: var(--red-op80) !important; } .COM_tit.bg-red-op90 { background-color: var(--red-op90) !important; } .COM_tit.bg-success { background-color: var(--success) !important; } .COM_tit.bg-success-op10 { background-color: var(--success-op10) !important; } .COM_tit.bg-success-op20 { background-color: var(--success-op20) !important; } .COM_tit.bg-success-op30 { background-color: var(--success-op30) !important; } .COM_tit.bg-success-op40 { background-color: var(--success-op40) !important; } .COM_tit.bg-success-op50 { background-color: var(--success-op50) !important; } .COM_tit.bg-success-op60 { background-color: var(--success-op60) !important; } .COM_tit.bg-success-op70 { background-color: var(--success-op70) !important; } .COM_tit.bg-success-op80 { background-color: var(--success-op80) !important; } .COM_tit.bg-success-op90 { background-color: var(--success-op90) !important; } .COM_tit.bg-cancel { background-color: var(--cancel) !important; } .COM_tit.bg-cancel-op10 { background-color: var(--cancel-op10) !important; } .COM_tit.bg-cancel-op20 { background-color: var(--cancel-op20) !important; } .COM_tit.bg-cancel-op30 { background-color: var(--cancel-op30) !important; } .COM_tit.bg-cancel-op40 { background-color: var(--cancel-op40) !important; } .COM_tit.bg-cancel-op50 { background-color: var(--cancel-op50) !important; } .COM_tit.bg-cancel-op60 { background-color: var(--cancel-op60) !important; } .COM_tit.bg-cancel-op70 { background-color: var(--cancel-op70) !important; } .COM_tit.bg-cancel-op80 { background-color: var(--cancel-op80) !important; } .COM_tit.bg-cancel-op90 { background-color: var(--cancel-op90) !important; } .COM_tit.bg-darkgray { background-color: var(--darkgray) !important; } .COM_tit.bg-darkgray-op10 { background-color: var(--darkgray-op10) !important; } .COM_tit.bg-darkgray-op20 { background-color: var(--darkgray-op20) !important; } .COM_tit.bg-darkgray-op30 { background-color: var(--darkgray-op30) !important; } .COM_tit.bg-darkgray-op40 { background-color: var(--darkgray-op40) !important; } .COM_tit.bg-darkgray-op50 { background-color: var(--darkgray-op50) !important; } .COM_tit.bg-darkgray-op60 { background-color: var(--darkgray-op60) !important; } .COM_tit.bg-darkgray-op70 { background-color: var(--darkgray-op70) !important; } .COM_tit.bg-darkgray-op80 { background-color: var(--darkgray-op80) !important; } .COM_tit.bg-darkgray-op90 { background-color: var(--darkgray-op90) !important; } .COM_tit.bg-blue { background-color: var(--blue) !important; } .COM_tit.bg-blue-op10 { background-color: var(--blue-op10) !important; } .COM_tit.bg-blue-op20 { background-color: var(--blue-op20) !important; } .COM_tit.bg-blue-op30 { background-color: var(--blue-op30) !important; } .COM_tit.bg-blue-op40 { background-color: var(--blue-op40) !important; } .COM_tit.bg-blue-op50 { background-color: var(--blue-op50) !important; } .COM_tit.bg-blue-op60 { background-color: var(--blue-op60) !important; } .COM_tit.bg-blue-op70 { background-color: var(--blue-op70) !important; } .COM_tit.bg-blue-op80 { background-color: var(--blue-op80) !important; } .COM_tit.bg-blue-op90 { background-color: var(--blue-op90) !important; } .COM_tit.bg-point { background-color: var(--point) !important; } .COM_tit.bg-point-op10 { background-color: var(--point-op10) !important; } .COM_tit.bg-point-op20 { background-color: var(--point-op20) !important; } .COM_tit.bg-point-op30 { background-color: var(--point-op30) !important; } .COM_tit.bg-point-op40 { background-color: var(--point-op40) !important; } .COM_tit.bg-point-op50 { background-color: var(--point-op50) !important; } .COM_tit.bg-point-op60 { background-color: var(--point-op60) !important; } .COM_tit.bg-point-op70 { background-color: var(--point-op70) !important; } .COM_tit.bg-point-op80 { background-color: var(--point-op80) !important; } .COM_tit.bg-point-op90 { background-color: var(--point-op90) !important; } .COM_tit.bg-point1 { background-color: var(--point1) !important; } .COM_tit.bg-point1-op10 { background-color: var(--point1-op10) !important; } .COM_tit.bg-point1-op20 { background-color: var(--point1-op20) !important; } .COM_tit.bg-point1-op30 { background-color: var(--point1-op30) !important; } .COM_tit.bg-point1-op40 { background-color: var(--point1-op40) !important; } .COM_tit.bg-point1-op50 { background-color: var(--point1-op50) !important; } .COM_tit.bg-point1-op60 { background-color: var(--point1-op60) !important; } .COM_tit.bg-point1-op70 { background-color: var(--point1-op70) !important; } .COM_tit.bg-point1-op80 { background-color: var(--point1-op80) !important; } .COM_tit.bg-point1-op90 { background-color: var(--point1-op90) !important; } .COM_tit.bg-point2 { background-color: var(--point2) !important; } .COM_tit.bg-point2-op10 { background-color: var(--point2-op10) !important; } .COM_tit.bg-point2-op20 { background-color: var(--point2-op20) !important; } .COM_tit.bg-point2-op30 { background-color: var(--point2-op30) !important; } .COM_tit.bg-point2-op40 { background-color: var(--point2-op40) !important; } .COM_tit.bg-point2-op50 { background-color: var(--point2-op50) !important; } .COM_tit.bg-point2-op60 { background-color: var(--point2-op60) !important; } .COM_tit.bg-point2-op70 { background-color: var(--point2-op70) !important; } .COM_tit.bg-point2-op80 { background-color: var(--point2-op80) !important; } .COM_tit.bg-point2-op90 { background-color: var(--point2-op90) !important; } .COM_tit.bg-point3 { background-color: var(--point3) !important; } .COM_tit.bg-point3-op10 { background-color: var(--point3-op10) !important; } .COM_tit.bg-point3-op20 { background-color: var(--point3-op20) !important; } .COM_tit.bg-point3-op30 { background-color: var(--point3-op30) !important; } .COM_tit.bg-point3-op40 { background-color: var(--point3-op40) !important; } .COM_tit.bg-point3-op50 { background-color: var(--point3-op50) !important; } .COM_tit.bg-point3-op60 { background-color: var(--point3-op60) !important; } .COM_tit.bg-point3-op70 { background-color: var(--point3-op70) !important; } .COM_tit.bg-point3-op80 { background-color: var(--point3-op80) !important; } .COM_tit.bg-point3-op90 { background-color: var(--point3-op90) !important; } .COM_tit.bg-point4 { background-color: var(--point4) !important; } .COM_tit.bg-point4-op10 { background-color: var(--point4-op10) !important; } .COM_tit.bg-point4-op20 { background-color: var(--point4-op20) !important; } .COM_tit.bg-point4-op30 { background-color: var(--point4-op30) !important; } .COM_tit.bg-point4-op40 { background-color: var(--point4-op40) !important; } .COM_tit.bg-point4-op50 { background-color: var(--point4-op50) !important; } .COM_tit.bg-point4-op60 { background-color: var(--point4-op60) !important; } .COM_tit.bg-point4-op70 { background-color: var(--point4-op70) !important; } .COM_tit.bg-point4-op80 { background-color: var(--point4-op80) !important; } .COM_tit.bg-point4-op90 { background-color: var(--point4-op90) !important; } .COM_tit.bg-point5 { background-color: var(--point5) !important; } .COM_tit.bg-point5-op10 { background-color: var(--point5-op10) !important; } .COM_tit.bg-point5-op20 { background-color: var(--point5-op20) !important; } .COM_tit.bg-point5-op30 { background-color: var(--point5-op30) !important; } .COM_tit.bg-point5-op40 { background-color: var(--point5-op40) !important; } .COM_tit.bg-point5-op50 { background-color: var(--point5-op50) !important; } .COM_tit.bg-point5-op60 { background-color: var(--point5-op60) !important; } .COM_tit.bg-point5-op70 { background-color: var(--point5-op70) !important; } .COM_tit.bg-point5-op80 { background-color: var(--point5-op80) !important; } .COM_tit.bg-point5-op90 { background-color: var(--point5-op90) !important; } /* Fixed Colors */ .COM_tit.bg-gray333 { background-color: #333 !important; } .COM_tit.bg-gray666 { background-color: #666 !important; } .COM_tit.bg-gray999 { background-color: #999 !important; } .COM_tit.bg-white { background-color: #fff !important; } /* ======================================== 3. COM_tit em 텍스트 색상 (부모 선언) ======================================== */ /* 기본 색상 */ .COM_tit.em-primary em { color: var(--primary) !important; font-style: normal; } .COM_tit.em-secondary em { color: var(--secondary) !important; font-style: normal; } .COM_tit.em-tertiary em { color: var(--tertiary) !important; font-style: normal; } .COM_tit.em-deep em { color: var(--deep) !important; font-style: normal; } .COM_tit.em-red em { color: var(--red) !important; font-style: normal; } .COM_tit.em-success em { color: var(--success) !important; font-style: normal; } .COM_tit.em-cancel em { color: var(--cancel) !important; font-style: normal; } .COM_tit.em-darkgray em { color: var(--darkgray) !important; font-style: normal; } .COM_tit.em-blue em { color: var(--blue) !important; font-style: normal; } .COM_tit.em-point em { color: var(--point) !important; font-style: normal; } .COM_tit.em-point1 em { color: var(--point1) !important; font-style: normal; } .COM_tit.em-point2 em { color: var(--point2) !important; font-style: normal; } .COM_tit.em-point3 em { color: var(--point3) !important; font-style: normal; } .COM_tit.em-point4 em { color: var(--point4) !important; font-style: normal; } .COM_tit.em-point5 em { color: var(--point5) !important; font-style: normal; } .COM_tit.em-Black em { color: #000 !important; font-style: normal; } .COM_tit.em-gray333 em { color: #333 !important; font-style: normal; } .COM_tit.em-gray666 em { color: #666 !important; font-style: normal; } .COM_tit.em-gray999 em { color: #999 !important; font-style: normal; } .COM_tit.em-white em { color: #fff !important; font-style: normal; } .COM_tit.em-white-T em { color: #FFFFFF80 !important; font-style: normal; } /* Primary Shades */ .COM_tit.em-primary-50 em { color: var(--primary-50) !important; font-style: normal; } .COM_tit.em-primary-100 em { color: var(--primary-100) !important; font-style: normal; } .COM_tit.em-primary-200 em { color: var(--primary-200) !important; font-style: normal; } .COM_tit.em-primary-300 em { color: var(--primary-300) !important; font-style: normal; } .COM_tit.em-primary-400 em { color: var(--primary-400) !important; font-style: normal; } .COM_tit.em-primary-500 em { color: var(--primary-500) !important; font-style: normal; } .COM_tit.em-primary-600 em { color: var(--primary-600) !important; font-style: normal; } .COM_tit.em-primary-700 em { color: var(--primary-700) !important; font-style: normal; } .COM_tit.em-primary-800 em { color: var(--primary-800) !important; font-style: normal; } .COM_tit.em-primary-900 em { color: var(--primary-900) !important; font-style: normal; } /* Primary Opacity */ .COM_tit.em-primary-op10 em { color: var(--primary-op10) !important; font-style: normal; } .COM_tit.em-primary-op20 em { color: var(--primary-op20) !important; font-style: normal; } .COM_tit.em-primary-op30 em { color: var(--primary-op30) !important; font-style: normal; } .COM_tit.em-primary-op40 em { color: var(--primary-op40) !important; font-style: normal; } .COM_tit.em-primary-op50 em { color: var(--primary-op50) !important; font-style: normal; } .COM_tit.em-primary-op60 em { color: var(--primary-op60) !important; font-style: normal; } .COM_tit.em-primary-op70 em { color: var(--primary-op70) !important; font-style: normal; } .COM_tit.em-primary-op80 em { color: var(--primary-op80) !important; font-style: normal; } .COM_tit.em-primary-op90 em { color: var(--primary-op90) !important; font-style: normal; } /* Secondary Shades */ .COM_tit.em-secondary-50 em { color: var(--secondary-50) !important; font-style: normal; } .COM_tit.em-secondary-100 em { color: var(--secondary-100) !important; font-style: normal; } .COM_tit.em-secondary-200 em { color: var(--secondary-200) !important; font-style: normal; } .COM_tit.em-secondary-300 em { color: var(--secondary-300) !important; font-style: normal; } .COM_tit.em-secondary-400 em { color: var(--secondary-400) !important; font-style: normal; } .COM_tit.em-secondary-500 em { color: var(--secondary-500) !important; font-style: normal; } .COM_tit.em-secondary-600 em { color: var(--secondary-600) !important; font-style: normal; } .COM_tit.em-secondary-700 em { color: var(--secondary-700) !important; font-style: normal; } .COM_tit.em-secondary-800 em { color: var(--secondary-800) !important; font-style: normal; } .COM_tit.em-secondary-900 em { color: var(--secondary-900) !important; font-style: normal; } /* Secondary Opacity */ .COM_tit.em-secondary-op10 em { color: var(--secondary-op10) !important; font-style: normal; } .COM_tit.em-secondary-op20 em { color: var(--secondary-op20) !important; font-style: normal; } .COM_tit.em-secondary-op30 em { color: var(--secondary-op30) !important; font-style: normal; } .COM_tit.em-secondary-op40 em { color: var(--secondary-op40) !important; font-style: normal; } .COM_tit.em-secondary-op50 em { color: var(--secondary-op50) !important; font-style: normal; } .COM_tit.em-secondary-op60 em { color: var(--secondary-op60) !important; font-style: normal; } .COM_tit.em-secondary-op70 em { color: var(--secondary-op70) !important; font-style: normal; } .COM_tit.em-secondary-op80 em { color: var(--secondary-op80) !important; font-style: normal; } .COM_tit.em-secondary-op90 em { color: var(--secondary-op90) !important; font-style: normal; } /* Tertiary Shades */ .COM_tit.em-tertiary-50 em { color: var(--tertiary-50) !important; font-style: normal; } .COM_tit.em-tertiary-100 em { color: var(--tertiary-100) !important; font-style: normal; } .COM_tit.em-tertiary-200 em { color: var(--tertiary-200) !important; font-style: normal; } .COM_tit.em-tertiary-300 em { color: var(--tertiary-300) !important; font-style: normal; } .COM_tit.em-tertiary-400 em { color: var(--tertiary-400) !important; font-style: normal; } .COM_tit.em-tertiary-500 em { color: var(--tertiary-500) !important; font-style: normal; } .COM_tit.em-tertiary-600 em { color: var(--tertiary-600) !important; font-style: normal; } .COM_tit.em-tertiary-700 em { color: var(--tertiary-700) !important; font-style: normal; } .COM_tit.em-tertiary-800 em { color: var(--tertiary-800) !important; font-style: normal; } .COM_tit.em-tertiary-900 em { color: var(--tertiary-900) !important; font-style: normal; } /* Tertiary Opacity */ .COM_tit.em-tertiary-op10 em { color: var(--tertiary-op10) !important; font-style: normal; } .COM_tit.em-tertiary-op20 em { color: var(--tertiary-op20) !important; font-style: normal; } .COM_tit.em-tertiary-op30 em { color: var(--tertiary-op30) !important; font-style: normal; } .COM_tit.em-tertiary-op40 em { color: var(--tertiary-op40) !important; font-style: normal; } .COM_tit.em-tertiary-op50 em { color: var(--tertiary-op50) !important; font-style: normal; } .COM_tit.em-tertiary-op60 em { color: var(--tertiary-op60) !important; font-style: normal; } .COM_tit.em-tertiary-op70 em { color: var(--tertiary-op70) !important; font-style: normal; } .COM_tit.em-tertiary-op80 em { color: var(--tertiary-op80) !important; font-style: normal; } .COM_tit.em-tertiary-op90 em { color: var(--tertiary-op90) !important; font-style: normal; } /* Gray Shades */ .COM_tit.em-gray-50 em { color: var(--gray-50) !important; font-style: normal; } .COM_tit.em-gray-100 em { color: var(--gray-100) !important; font-style: normal; } .COM_tit.em-gray-200 em { color: var(--gray-200) !important; font-style: normal; } .COM_tit.em-gray-300 em { color: var(--gray-300) !important; font-style: normal; } .COM_tit.em-gray-400 em { color: var(--gray-400) !important; font-style: normal; } .COM_tit.em-gray-500 em { color: var(--gray-500) !important; font-style: normal; } .COM_tit.em-gray-600 em { color: var(--gray-600) !important; font-style: normal; } .COM_tit.em-gray-700 em { color: var(--gray-700) !important; font-style: normal; } .COM_tit.em-gray-800 em { color: var(--gray-800) !important; font-style: normal; } .COM_tit.em-gray-900 em { color: var(--gray-900) !important; font-style: normal; } /* Gray Opacity */ .COM_tit.em-gray-op10 em { color: var(--gray-op10) !important; font-style: normal; } .COM_tit.em-gray-op20 em { color: var(--gray-op20) !important; font-style: normal; } .COM_tit.em-gray-op30 em { color: var(--gray-op30) !important; font-style: normal; } .COM_tit.em-gray-op40 em { color: var(--gray-op40) !important; font-style: normal; } .COM_tit.em-gray-op50 em { color: var(--gray-op50) !important; font-style: normal; } .COM_tit.em-gray-op60 em { color: var(--gray-op60) !important; font-style: normal; } .COM_tit.em-gray-op70 em { color: var(--gray-op70) !important; font-style: normal; } .COM_tit.em-gray-op80 em { color: var(--gray-op80) !important; font-style: normal; } .COM_tit.em-gray-op90 em { color: var(--gray-op90) !important; font-style: normal; } /* Other Colors Opacity */ .COM_tit.em-deep-op10 em { color: var(--deep-op10) !important; font-style: normal; } .COM_tit.em-deep-op20 em { color: var(--deep-op20) !important; font-style: normal; } .COM_tit.em-deep-op30 em { color: var(--deep-op30) !important; font-style: normal; } .COM_tit.em-deep-op40 em { color: var(--deep-op40) !important; font-style: normal; } .COM_tit.em-deep-op50 em { color: var(--deep-op50) !important; font-style: normal; } .COM_tit.em-deep-op60 em { color: var(--deep-op60) !important; font-style: normal; } .COM_tit.em-deep-op70 em { color: var(--deep-op70) !important; font-style: normal; } .COM_tit.em-deep-op80 em { color: var(--deep-op80) !important; font-style: normal; } .COM_tit.em-deep-op90 em { color: var(--deep-op90) !important; font-style: normal; } .COM_tit.em-red-op10 em { color: var(--red-op10) !important; font-style: normal; } .COM_tit.em-red-op20 em { color: var(--red-op20) !important; font-style: normal; } .COM_tit.em-red-op30 em { color: var(--red-op30) !important; font-style: normal; } .COM_tit.em-red-op40 em { color: var(--red-op40) !important; font-style: normal; } .COM_tit.em-red-op50 em { color: var(--red-op50) !important; font-style: normal; } .COM_tit.em-red-op60 em { color: var(--red-op60) !important; font-style: normal; } .COM_tit.em-red-op70 em { color: var(--red-op70) !important; font-style: normal; } .COM_tit.em-red-op80 em { color: var(--red-op80) !important; font-style: normal; } .COM_tit.em-red-op90 em { color: var(--red-op90) !important; font-style: normal; } .COM_tit.em-success-op10 em { color: var(--success-op10) !important; font-style: normal; } .COM_tit.em-success-op20 em { color: var(--success-op20) !important; font-style: normal; } .COM_tit.em-success-op30 em { color: var(--success-op30) !important; font-style: normal; } .COM_tit.em-success-op40 em { color: var(--success-op40) !important; font-style: normal; } .COM_tit.em-success-op50 em { color: var(--success-op50) !important; font-style: normal; } .COM_tit.em-success-op60 em { color: var(--success-op60) !important; font-style: normal; } .COM_tit.em-success-op70 em { color: var(--success-op70) !important; font-style: normal; } .COM_tit.em-success-op80 em { color: var(--success-op80) !important; font-style: normal; } .COM_tit.em-success-op90 em { color: var(--success-op90) !important; font-style: normal; } .COM_tit.em-cancel-op10 em { color: var(--cancel-op10) !important; font-style: normal; } .COM_tit.em-cancel-op20 em { color: var(--cancel-op20) !important; font-style: normal; } .COM_tit.em-cancel-op30 em { color: var(--cancel-op30) !important; font-style: normal; } .COM_tit.em-cancel-op40 em { color: var(--cancel-op40) !important; font-style: normal; } .COM_tit.em-cancel-op50 em { color: var(--cancel-op50) !important; font-style: normal; } .COM_tit.em-cancel-op60 em { color: var(--cancel-op60) !important; font-style: normal; } .COM_tit.em-cancel-op70 em { color: var(--cancel-op70) !important; font-style: normal; } .COM_tit.em-cancel-op80 em { color: var(--cancel-op80) !important; font-style: normal; } .COM_tit.em-cancel-op90 em { color: var(--cancel-op90) !important; font-style: normal; } .COM_tit.em-darkgray-op10 em { color: var(--darkgray-op10) !important; font-style: normal; } .COM_tit.em-darkgray-op20 em { color: var(--darkgray-op20) !important; font-style: normal; } .COM_tit.em-darkgray-op30 em { color: var(--darkgray-op30) !important; font-style: normal; } .COM_tit.em-darkgray-op40 em { color: var(--darkgray-op40) !important; font-style: normal; } .COM_tit.em-darkgray-op50 em { color: var(--darkgray-op50) !important; font-style: normal; } .COM_tit.em-darkgray-op60 em { color: var(--darkgray-op60) !important; font-style: normal; } .COM_tit.em-darkgray-op70 em { color: var(--darkgray-op70) !important; font-style: normal; } .COM_tit.em-darkgray-op80 em { color: var(--darkgray-op80) !important; font-style: normal; } .COM_tit.em-darkgray-op90 em { color: var(--darkgray-op90) !important; font-style: normal; } .COM_tit.em-blue-op10 em { color: var(--blue-op10) !important; font-style: normal; } .COM_tit.em-blue-op20 em { color: var(--blue-op20) !important; font-style: normal; } .COM_tit.em-blue-op30 em { color: var(--blue-op30) !important; font-style: normal; } .COM_tit.em-blue-op40 em { color: var(--blue-op40) !important; font-style: normal; } .COM_tit.em-blue-op50 em { color: var(--blue-op50) !important; font-style: normal; } .COM_tit.em-blue-op60 em { color: var(--blue-op60) !important; font-style: normal; } .COM_tit.em-blue-op70 em { color: var(--blue-op70) !important; font-style: normal; } .COM_tit.em-blue-op80 em { color: var(--blue-op80) !important; font-style: normal; } .COM_tit.em-blue-op90 em { color: var(--blue-op90) !important; font-style: normal; } .COM_tit.em-point-op10 em { color: var(--point-op10) !important; font-style: normal; } .COM_tit.em-point-op20 em { color: var(--point-op20) !important; font-style: normal; } .COM_tit.em-point-op30 em { color: var(--point-op30) !important; font-style: normal; } .COM_tit.em-point-op40 em { color: var(--point-op40) !important; font-style: normal; } .COM_tit.em-point-op50 em { color: var(--point-op50) !important; font-style: normal; } .COM_tit.em-point-op60 em { color: var(--point-op60) !important; font-style: normal; } .COM_tit.em-point-op70 em { color: var(--point-op70) !important; font-style: normal; } .COM_tit.em-point-op80 em { color: var(--point-op80) !important; font-style: normal; } .COM_tit.em-point-op90 em { color: var(--point-op90) !important; font-style: normal; } .COM_tit.em-point1-op10 em { color: var(--point1-op10) !important; font-style: normal; } .COM_tit.em-point1-op20 em { color: var(--point1-op20) !important; font-style: normal; } .COM_tit.em-point1-op30 em { color: var(--point1-op30) !important; font-style: normal; } .COM_tit.em-point1-op40 em { color: var(--point1-op40) !important; font-style: normal; } .COM_tit.em-point1-op50 em { color: var(--point1-op50) !important; font-style: normal; } .COM_tit.em-point1-op60 em { color: var(--point1-op60) !important; font-style: normal; } .COM_tit.em-point1-op70 em { color: var(--point1-op70) !important; font-style: normal; } .COM_tit.em-point1-op80 em { color: var(--point1-op80) !important; font-style: normal; } .COM_tit.em-point1-op90 em { color: var(--point1-op90) !important; font-style: normal; } .COM_tit.em-point2-op10 em { color: var(--point2-op10) !important; font-style: normal; } .COM_tit.em-point2-op20 em { color: var(--point2-op20) !important; font-style: normal; } .COM_tit.em-point2-op30 em { color: var(--point2-op30) !important; font-style: normal; } .COM_tit.em-point2-op40 em { color: var(--point2-op40) !important; font-style: normal; } .COM_tit.em-point2-op50 em { color: var(--point2-op50) !important; font-style: normal; } .COM_tit.em-point2-op60 em { color: var(--point2-op60) !important; font-style: normal; } .COM_tit.em-point2-op70 em { color: var(--point2-op70) !important; font-style: normal; } .COM_tit.em-point2-op80 em { color: var(--point2-op80) !important; font-style: normal; } .COM_tit.em-point2-op90 em { color: var(--point2-op90) !important; font-style: normal; } .COM_tit.em-point3-op10 em { color: var(--point3-op10) !important; font-style: normal; } .COM_tit.em-point3-op20 em { color: var(--point3-op20) !important; font-style: normal; } .COM_tit.em-point3-op30 em { color: var(--point3-op30) !important; font-style: normal; } .COM_tit.em-point3-op40 em { color: var(--point3-op40) !important; font-style: normal; } .COM_tit.em-point3-op50 em { color: var(--point3-op50) !important; font-style: normal; } .COM_tit.em-point3-op60 em { color: var(--point3-op60) !important; font-style: normal; } .COM_tit.em-point3-op70 em { color: var(--point3-op70) !important; font-style: normal; } .COM_tit.em-point3-op80 em { color: var(--point3-op80) !important; font-style: normal; } .COM_tit.em-point3-op90 em { color: var(--point3-op90) !important; font-style: normal; } .COM_tit.em-point4-op10 em { color: var(--point4-op10) !important; font-style: normal; } .COM_tit.em-point4-op20 em { color: var(--point4-op20) !important; font-style: normal; } .COM_tit.em-point4-op30 em { color: var(--point4-op30) !important; font-style: normal; } .COM_tit.em-point4-op40 em { color: var(--point4-op40) !important; font-style: normal; } .COM_tit.em-point4-op50 em { color: var(--point4-op50) !important; font-style: normal; } .COM_tit.em-point4-op60 em { color: var(--point4-op60) !important; font-style: normal; } .COM_tit.em-point4-op70 em { color: var(--point4-op70) !important; font-style: normal; } .COM_tit.em-point4-op80 em { color: var(--point4-op80) !important; font-style: normal; } .COM_tit.em-point4-op90 em { color: var(--point4-op90) !important; font-style: normal; } .COM_tit.em-point5-op10 em { color: var(--point5-op10) !important; font-style: normal; } .COM_tit.em-point5-op20 em { color: var(--point5-op20) !important; font-style: normal; } .COM_tit.em-point5-op30 em { color: var(--point5-op30) !important; font-style: normal; } .COM_tit.em-point5-op40 em { color: var(--point5-op40) !important; font-style: normal; } .COM_tit.em-point5-op50 em { color: var(--point5-op50) !important; font-style: normal; } .COM_tit.em-point5-op60 em { color: var(--point5-op60) !important; font-style: normal; } .COM_tit.em-point5-op70 em { color: var(--point5-op70) !important; font-style: normal; } .COM_tit.em-point5-op80 em { color: var(--point5-op80) !important; font-style: normal; } .COM_tit.em-point5-op90 em { color: var(--point5-op90) !important; font-style: normal; } /* ======================================== 4. COM_tit em 배경색 (부모 선언, Opacity만) ======================================== */ /* Primary Opacity */ .COM_tit.em-bg-primary-op10 em { background-color: var(--primary-op10) !important; } .COM_tit.em-bg-primary-op20 em { background-color: var(--primary-op20) !important; } .COM_tit.em-bg-primary-op30 em { background-color: var(--primary-op30) !important; } .COM_tit.em-bg-primary-op40 em { background-color: var(--primary-op40) !important; } .COM_tit.em-bg-primary-op50 em { background-color: var(--primary-op50) !important; } .COM_tit.em-bg-primary-op60 em { background-color: var(--primary-op60) !important; } .COM_tit.em-bg-primary-op70 em { background-color: var(--primary-op70) !important; } .COM_tit.em-bg-primary-op80 em { background-color: var(--primary-op80) !important; } .COM_tit.em-bg-primary-op90 em { background-color: var(--primary-op90) !important; } /* Secondary Opacity */ .COM_tit.em-bg-secondary-op10 em { background-color: var(--secondary-op10) !important; } .COM_tit.em-bg-secondary-op20 em { background-color: var(--secondary-op20) !important; } .COM_tit.em-bg-secondary-op30 em { background-color: var(--secondary-op30) !important; } .COM_tit.em-bg-secondary-op40 em { background-color: var(--secondary-op40) !important; } .COM_tit.em-bg-secondary-op50 em { background-color: var(--secondary-op50) !important; } .COM_tit.em-bg-secondary-op60 em { background-color: var(--secondary-op60) !important; } .COM_tit.em-bg-secondary-op70 em { background-color: var(--secondary-op70) !important; } .COM_tit.em-bg-secondary-op80 em { background-color: var(--secondary-op80) !important; } .COM_tit.em-bg-secondary-op90 em { background-color: var(--secondary-op90) !important; } /* Tertiary Opacity */ .COM_tit.em-bg-tertiary-op10 em { background-color: var(--tertiary-op10) !important; } .COM_tit.em-bg-tertiary-op20 em { background-color: var(--tertiary-op20) !important; } .COM_tit.em-bg-tertiary-op30 em { background-color: var(--tertiary-op30) !important; } .COM_tit.em-bg-tertiary-op40 em { background-color: var(--tertiary-op40) !important; } .COM_tit.em-bg-tertiary-op50 em { background-color: var(--tertiary-op50) !important; } .COM_tit.em-bg-tertiary-op60 em { background-color: var(--tertiary-op60) !important; } .COM_tit.em-bg-tertiary-op70 em { background-color: var(--tertiary-op70) !important; } .COM_tit.em-bg-tertiary-op80 em { background-color: var(--tertiary-op80) !important; } .COM_tit.em-bg-tertiary-op90 em { background-color: var(--tertiary-op90) !important; } /* Gray Opacity */ .COM_tit.em-bg-gray-op10 em { background-color: var(--gray-op10) !important; } .COM_tit.em-bg-gray-op20 em { background-color: var(--gray-op20) !important; } .COM_tit.em-bg-gray-op30 em { background-color: var(--gray-op30) !important; } .COM_tit.em-bg-gray-op40 em { background-color: var(--gray-op40) !important; } .COM_tit.em-bg-gray-op50 em { background-color: var(--gray-op50) !important; } .COM_tit.em-bg-gray-op60 em { background-color: var(--gray-op60) !important; } .COM_tit.em-bg-gray-op70 em { background-color: var(--gray-op70) !important; } .COM_tit.em-bg-gray-op80 em { background-color: var(--gray-op80) !important; } .COM_tit.em-bg-gray-op90 em { background-color: var(--gray-op90) !important; } /* Other Colors Opacity */ .COM_tit.em-bg-deep-op10 em { background-color: var(--deep-op10) !important; } .COM_tit.em-bg-deep-op20 em { background-color: var(--deep-op20) !important; } .COM_tit.em-bg-deep-op30 em { background-color: var(--deep-op30) !important; } .COM_tit.em-bg-deep-op40 em { background-color: var(--deep-op40) !important; } .COM_tit.em-bg-deep-op50 em { background-color: var(--deep-op50) !important; } .COM_tit.em-bg-deep-op60 em { background-color: var(--deep-op60) !important; } .COM_tit.em-bg-deep-op70 em { background-color: var(--deep-op70) !important; } .COM_tit.em-bg-deep-op80 em { background-color: var(--deep-op80) !important; } .COM_tit.em-bg-deep-op90 em { background-color: var(--deep-op90) !important; } .COM_tit.em-bg-red-op10 em { background-color: var(--red-op10) !important; } .COM_tit.em-bg-red-op20 em { background-color: var(--red-op20) !important; } .COM_tit.em-bg-red-op30 em { background-color: var(--red-op30) !important; } .COM_tit.em-bg-red-op40 em { background-color: var(--red-op40) !important; } .COM_tit.em-bg-red-op50 em { background-color: var(--red-op50) !important; } .COM_tit.em-bg-red-op60 em { background-color: var(--red-op60) !important; } .COM_tit.em-bg-red-op70 em { background-color: var(--red-op70) !important; } .COM_tit.em-bg-red-op80 em { background-color: var(--red-op80) !important; } .COM_tit.em-bg-red-op90 em { background-color: var(--red-op90) !important; } .COM_tit.em-bg-success-op10 em { background-color: var(--success-op10) !important; } .COM_tit.em-bg-success-op20 em { background-color: var(--success-op20) !important; } .COM_tit.em-bg-success-op30 em { background-color: var(--success-op30) !important; } .COM_tit.em-bg-success-op40 em { background-color: var(--success-op40) !important; } .COM_tit.em-bg-success-op50 em { background-color: var(--success-op50) !important; } .COM_tit.em-bg-success-op60 em { background-color: var(--success-op60) !important; } .COM_tit.em-bg-success-op70 em { background-color: var(--success-op70) !important; } .COM_tit.em-bg-success-op80 em { background-color: var(--success-op80) !important; } .COM_tit.em-bg-success-op90 em { background-color: var(--success-op90) !important; } .COM_tit.em-bg-cancel-op10 em { background-color: var(--cancel-op10) !important; } .COM_tit.em-bg-cancel-op20 em { background-color: var(--cancel-op20) !important; } .COM_tit.em-bg-cancel-op30 em { background-color: var(--cancel-op30) !important; } .COM_tit.em-bg-cancel-op40 em { background-color: var(--cancel-op40) !important; } .COM_tit.em-bg-cancel-op50 em { background-color: var(--cancel-op50) !important; } .COM_tit.em-bg-cancel-op60 em { background-color: var(--cancel-op60) !important; } .COM_tit.em-bg-cancel-op70 em { background-color: var(--cancel-op70) !important; } .COM_tit.em-bg-cancel-op80 em { background-color: var(--cancel-op80) !important; } .COM_tit.em-bg-cancel-op90 em { background-color: var(--cancel-op90) !important; } .COM_tit.em-bg-darkgray-op10 em { background-color: var(--darkgray-op10) !important; } .COM_tit.em-bg-darkgray-op20 em { background-color: var(--darkgray-op20) !important; } .COM_tit.em-bg-darkgray-op30 em { background-color: var(--darkgray-op30) !important; } .COM_tit.em-bg-darkgray-op40 em { background-color: var(--darkgray-op40) !important; } .COM_tit.em-bg-darkgray-op50 em { background-color: var(--darkgray-op50) !important; } .COM_tit.em-bg-darkgray-op60 em { background-color: var(--darkgray-op60) !important; } .COM_tit.em-bg-darkgray-op70 em { background-color: var(--darkgray-op70) !important; } .COM_tit.em-bg-darkgray-op80 em { background-color: var(--darkgray-op80) !important; } .COM_tit.em-bg-darkgray-op90 em { background-color: var(--darkgray-op90) !important; } .COM_tit.em-bg-blue-op10 em { background-color: var(--blue-op10) !important; } .COM_tit.em-bg-blue-op20 em { background-color: var(--blue-op20) !important; } .COM_tit.em-bg-blue-op30 em { background-color: var(--blue-op30) !important; } .COM_tit.em-bg-blue-op40 em { background-color: var(--blue-op40) !important; } .COM_tit.em-bg-blue-op50 em { background-color: var(--blue-op50) !important; } .COM_tit.em-bg-blue-op60 em { background-color: var(--blue-op60) !important; } .COM_tit.em-bg-blue-op70 em { background-color: var(--blue-op70) !important; } .COM_tit.em-bg-blue-op80 em { background-color: var(--blue-op80) !important; } .COM_tit.em-bg-blue-op90 em { background-color: var(--blue-op90) !important; } .COM_tit.em-bg-point-op10 em { background-color: var(--point-op10) !important; } .COM_tit.em-bg-point-op20 em { background-color: var(--point-op20) !important; } .COM_tit.em-bg-point-op30 em { background-color: var(--point-op30) !important; } .COM_tit.em-bg-point-op40 em { background-color: var(--point-op40) !important; } .COM_tit.em-bg-point-op50 em { background-color: var(--point-op50) !important; } .COM_tit.em-bg-point-op60 em { background-color: var(--point-op60) !important; } .COM_tit.em-bg-point-op70 em { background-color: var(--point-op70) !important; } .COM_tit.em-bg-point-op80 em { background-color: var(--point-op80) !important; } .COM_tit.em-bg-point-op90 em { background-color: var(--point-op90) !important; } .COM_tit.em-bg-point1-op10 em { background-color: var(--point1-op10) !important; } .COM_tit.em-bg-point1-op20 em { background-color: var(--point1-op20) !important; } .COM_tit.em-bg-point1-op30 em { background-color: var(--point1-op30) !important; } .COM_tit.em-bg-point1-op40 em { background-color: var(--point1-op40) !important; } .COM_tit.em-bg-point1-op50 em { background-color: var(--point1-op50) !important; } .COM_tit.em-bg-point1-op60 em { background-color: var(--point1-op60) !important; } .COM_tit.em-bg-point1-op70 em { background-color: var(--point1-op70) !important; } .COM_tit.em-bg-point1-op80 em { background-color: var(--point1-op80) !important; } .COM_tit.em-bg-point1-op90 em { background-color: var(--point1-op90) !important; } .COM_tit.em-bg-point2-op10 em { background-color: var(--point2-op10) !important; } .COM_tit.em-bg-point2-op20 em { background-color: var(--point2-op20) !important; } .COM_tit.em-bg-point2-op30 em { background-color: var(--point2-op30) !important; } .COM_tit.em-bg-point2-op40 em { background-color: var(--point2-op40) !important; } .COM_tit.em-bg-point2-op50 em { background-color: var(--point2-op50) !important; } .COM_tit.em-bg-point2-op60 em { background-color: var(--point2-op60) !important; } .COM_tit.em-bg-point2-op70 em { background-color: var(--point2-op70) !important; } .COM_tit.em-bg-point2-op80 em { background-color: var(--point2-op80) !important; } .COM_tit.em-bg-point2-op90 em { background-color: var(--point2-op90) !important; } .COM_tit.em-bg-point3-op10 em { background-color: var(--point3-op10) !important; } .COM_tit.em-bg-point3-op20 em { background-color: var(--point3-op20) !important; } .COM_tit.em-bg-point3-op30 em { background-color: var(--point3-op30) !important; } .COM_tit.em-bg-point3-op40 em { background-color: var(--point3-op40) !important; } .COM_tit.em-bg-point3-op50 em { background-color: var(--point3-op50) !important; } .COM_tit.em-bg-point3-op60 em { background-color: var(--point3-op60) !important; } .COM_tit.em-bg-point3-op70 em { background-color: var(--point3-op70) !important; } .COM_tit.em-bg-point3-op80 em { background-color: var(--point3-op80) !important; } .COM_tit.em-bg-point3-op90 em { background-color: var(--point3-op90) !important; } .COM_tit.em-bg-point4-op10 em { background-color: var(--point4-op10) !important; } .COM_tit.em-bg-point4-op20 em { background-color: var(--point4-op20) !important; } .COM_tit.em-bg-point4-op30 em { background-color: var(--point4-op30) !important; } .COM_tit.em-bg-point4-op40 em { background-color: var(--point4-op40) !important; } .COM_tit.em-bg-point4-op50 em { background-color: var(--point4-op50) !important; } .COM_tit.em-bg-point4-op60 em { background-color: var(--point4-op60) !important; } .COM_tit.em-bg-point4-op70 em { background-color: var(--point4-op70) !important; } .COM_tit.em-bg-point4-op80 em { background-color: var(--point4-op80) !important; } .COM_tit.em-bg-point4-op90 em { background-color: var(--point4-op90) !important; } .COM_tit.em-bg-point5-op10 em { background-color: var(--point5-op10) !important; } .COM_tit.em-bg-point5-op20 em { background-color: var(--point5-op20) !important; } .COM_tit.em-bg-point5-op30 em { background-color: var(--point5-op30) !important; } .COM_tit.em-bg-point5-op40 em { background-color: var(--point5-op40) !important; } .COM_tit.em-bg-point5-op50 em { background-color: var(--point5-op50) !important; } .COM_tit.em-bg-point5-op60 em { background-color: var(--point5-op60) !important; } .COM_tit.em-bg-point5-op70 em { background-color: var(--point5-op70) !important; } .COM_tit.em-bg-point5-op80 em { background-color: var(--point5-op80) !important; } .COM_tit.em-bg-point5-op90 em { background-color: var(--point5-op90) !important; } /* ======================================== 5. COM_tit em 배경색 + 텍스트색 (em 직접 선언, Shades + on-color) ======================================== */ /* Primary */ .COM_tit em.bg-primary { background-color: var(--primary) !important; color: var(--on-primary-500) !important; } .COM_tit em.bg-primary-50 { background-color: var(--primary-50) !important; color: var(--on-primary-50) !important; } .COM_tit em.bg-primary-100 { background-color: var(--primary-100) !important; color: var(--on-primary-100) !important; } .COM_tit em.bg-primary-200 { background-color: var(--primary-200) !important; color: var(--on-primary-200) !important; } .COM_tit em.bg-primary-300 { background-color: var(--primary-300) !important; color: var(--on-primary-300) !important; } .COM_tit em.bg-primary-400 { background-color: var(--primary-400) !important; color: var(--on-primary-400) !important; } .COM_tit em.bg-primary-500 { background-color: var(--primary-500) !important; color: var(--on-primary-500) !important; } .COM_tit em.bg-primary-600 { background-color: var(--primary-600) !important; color: var(--on-primary-600) !important; } .COM_tit em.bg-primary-700 { background-color: var(--primary-700) !important; color: var(--on-primary-700) !important; } .COM_tit em.bg-primary-800 { background-color: var(--primary-800) !important; color: var(--on-primary-800) !important; } .COM_tit em.bg-primary-900 { background-color: var(--primary-900) !important; color: var(--on-primary-900) !important; } /* Secondary */ .COM_tit em.bg-secondary { background-color: var(--secondary) !important; color: var(--on-secondary-500) !important; } .COM_tit em.bg-secondary-50 { background-color: var(--secondary-50) !important; color: var(--on-secondary-50) !important; } .COM_tit em.bg-secondary-100 { background-color: var(--secondary-100) !important; color: var(--on-secondary-100) !important; } .COM_tit em.bg-secondary-200 { background-color: var(--secondary-200) !important; color: var(--on-secondary-200) !important; } .COM_tit em.bg-secondary-300 { background-color: var(--secondary-300) !important; color: var(--on-secondary-300) !important; } .COM_tit em.bg-secondary-400 { background-color: var(--secondary-400) !important; color: var(--on-secondary-400) !important; } .COM_tit em.bg-secondary-500 { background-color: var(--secondary-500) !important; color: var(--on-secondary-500) !important; } .COM_tit em.bg-secondary-600 { background-color: var(--secondary-600) !important; color: var(--on-secondary-600) !important; } .COM_tit em.bg-secondary-700 { background-color: var(--secondary-700) !important; color: var(--on-secondary-700) !important; } .COM_tit em.bg-secondary-800 { background-color: var(--secondary-800) !important; color: var(--on-secondary-800) !important; } .COM_tit em.bg-secondary-900 { background-color: var(--secondary-900) !important; color: var(--on-secondary-900) !important; } /* Tertiary */ .COM_tit em.bg-tertiary { background-color: var(--tertiary) !important; color: var(--on-tertiary-500) !important; } .COM_tit em.bg-tertiary-50 { background-color: var(--tertiary-50) !important; color: var(--on-tertiary-50) !important; } .COM_tit em.bg-tertiary-100 { background-color: var(--tertiary-100) !important; color: var(--on-tertiary-100) !important; } .COM_tit em.bg-tertiary-200 { background-color: var(--tertiary-200) !important; color: var(--on-tertiary-200) !important; } .COM_tit em.bg-tertiary-300 { background-color: var(--tertiary-300) !important; color: var(--on-tertiary-300) !important; } .COM_tit em.bg-tertiary-400 { background-color: var(--tertiary-400) !important; color: var(--on-tertiary-400) !important; } .COM_tit em.bg-tertiary-500 { background-color: var(--tertiary-500) !important; color: var(--on-tertiary-500) !important; } .COM_tit em.bg-tertiary-600 { background-color: var(--tertiary-600) !important; color: var(--on-tertiary-600) !important; } .COM_tit em.bg-tertiary-700 { background-color: var(--tertiary-700) !important; color: var(--on-tertiary-700) !important; } .COM_tit em.bg-tertiary-800 { background-color: var(--tertiary-800) !important; color: var(--on-tertiary-800) !important; } .COM_tit em.bg-tertiary-900 { background-color: var(--tertiary-900) !important; color: var(--on-tertiary-900) !important; } /* Gray */ .COM_tit em.bg-gray { background-color: var(--gray) !important; color: var(--on-gray-500) !important; } .COM_tit em.bg-gray-50 { background-color: var(--gray-50) !important; color: var(--on-gray-50) !important; } .COM_tit em.bg-gray-100 { background-color: var(--gray-100) !important; color: var(--on-gray-100) !important; } .COM_tit em.bg-gray-200 { background-color: var(--gray-200) !important; color: var(--on-gray-200) !important; } .COM_tit em.bg-gray-300 { background-color: var(--gray-300) !important; color: var(--on-gray-300) !important; } .COM_tit em.bg-gray-400 { background-color: var(--gray-400) !important; color: var(--on-gray-400) !important; } .COM_tit em.bg-gray-500 { background-color: var(--gray-500) !important; color: var(--on-gray-500) !important; } .COM_tit em.bg-gray-600 { background-color: var(--gray-600) !important; color: var(--on-gray-600) !important; } .COM_tit em.bg-gray-700 { background-color: var(--gray-700) !important; color: var(--on-gray-700) !important; } .COM_tit em.bg-gray-800 { background-color: var(--gray-800) !important; color: var(--on-gray-800) !important; } .COM_tit em.bg-gray-900 { background-color: var(--gray-900) !important; color: var(--on-gray-900) !important; } /* Other Single Colors */ .COM_tit em.bg-deep { background-color: var(--deep) !important; color: #ffffff !important; } .COM_tit em.bg-red { background-color: var(--red) !important; color: #ffffff !important; } .COM_tit em.bg-success { background-color: var(--success) !important; color: #ffffff !important; } .COM_tit em.bg-cancel { background-color: var(--cancel) !important; color: #ffffff !important; } .COM_tit em.bg-darkgray { background-color: var(--darkgray) !important; color: #ffffff !important; } .COM_tit em.bg-blue { background-color: var(--blue) !important; color: #ffffff !important; } .COM_tit em.bg-point { background-color: var(--point) !important; color: #ffffff !important; } .COM_tit em.bg-point1 { background-color: var(--point1) !important; color: #ffffff !important; } .COM_tit em.bg-point2 { background-color: var(--point2) !important; color: #ffffff !important; } .COM_tit em.bg-point3 { background-color: var(--point3) !important; color: #ffffff !important; } .COM_tit em.bg-point4 { background-color: var(--point4) !important; color: #ffffff !important; } .COM_tit em.bg-point5 { background-color: var(--point5) !important; color: #ffffff !important; } .COM_tit em.bg-white { background-color: #ffffff !important; color: #333 !important; } /* ======================================== 6. COM_tit em 텍스트색 (em 직접 선언) ======================================== */ /* Primary */ .COM_tit em.c-primary { color: var(--primary) !important; font-style: normal; } .COM_tit em.c-primary-50 { color: var(--primary-50) !important; font-style: normal; } .COM_tit em.c-primary-100 { color: var(--primary-100) !important; font-style: normal; } .COM_tit em.c-primary-200 { color: var(--primary-200) !important; font-style: normal; } .COM_tit em.c-primary-300 { color: var(--primary-300) !important; font-style: normal; } .COM_tit em.c-primary-400 { color: var(--primary-400) !important; font-style: normal; } .COM_tit em.c-primary-500 { color: var(--primary-500) !important; font-style: normal; } .COM_tit em.c-primary-600 { color: var(--primary-600) !important; font-style: normal; } .COM_tit em.c-primary-700 { color: var(--primary-700) !important; font-style: normal; } .COM_tit em.c-primary-800 { color: var(--primary-800) !important; font-style: normal; } .COM_tit em.c-primary-900 { color: var(--primary-900) !important; font-style: normal; } .COM_tit em.c-primary-hover { color: var(--primary-hover) !important; font-style: normal; } /* Secondary */ .COM_tit em.c-secondary { color: var(--secondary) !important; font-style: normal; } .COM_tit em.c-secondary-50 { color: var(--secondary-50) !important; font-style: normal; } .COM_tit em.c-secondary-100 { color: var(--secondary-100) !important; font-style: normal; } .COM_tit em.c-secondary-200 { color: var(--secondary-200) !important; font-style: normal; } .COM_tit em.c-secondary-300 { color: var(--secondary-300) !important; font-style: normal; } .COM_tit em.c-secondary-400 { color: var(--secondary-400) !important; font-style: normal; } .COM_tit em.c-secondary-500 { color: var(--secondary-500) !important; font-style: normal; } .COM_tit em.c-secondary-600 { color: var(--secondary-600) !important; font-style: normal; } .COM_tit em.c-secondary-700 { color: var(--secondary-700) !important; font-style: normal; } .COM_tit em.c-secondary-800 { color: var(--secondary-800) !important; font-style: normal; } .COM_tit em.c-secondary-900 { color: var(--secondary-900) !important; font-style: normal; } .COM_tit em.c-secondary-hover { color: var(--secondary-hover) !important; font-style: normal; } /* Tertiary */ .COM_tit em.c-tertiary { color: var(--tertiary) !important; font-style: normal; } .COM_tit em.c-tertiary-50 { color: var(--tertiary-50) !important; font-style: normal; } .COM_tit em.c-tertiary-100 { color: var(--tertiary-100) !important; font-style: normal; } .COM_tit em.c-tertiary-200 { color: var(--tertiary-200) !important; font-style: normal; } .COM_tit em.c-tertiary-300 { color: var(--tertiary-300) !important; font-style: normal; } .COM_tit em.c-tertiary-400 { color: var(--tertiary-400) !important; font-style: normal; } .COM_tit em.c-tertiary-500 { color: var(--tertiary-500) !important; font-style: normal; } .COM_tit em.c-tertiary-600 { color: var(--tertiary-600) !important; font-style: normal; } .COM_tit em.c-tertiary-700 { color: var(--tertiary-700) !important; font-style: normal; } .COM_tit em.c-tertiary-800 { color: var(--tertiary-800) !important; font-style: normal; } .COM_tit em.c-tertiary-900 { color: var(--tertiary-900) !important; font-style: normal; } .COM_tit em.c-tertiary-hover { color: var(--tertiary-hover) !important; font-style: normal; } /* Gray */ .COM_tit em.c-gray { color: var(--gray) !important; font-style: normal; } .COM_tit em.c-gray-50 { color: var(--gray-50) !important; font-style: normal; } .COM_tit em.c-gray-100 { color: var(--gray-100) !important; font-style: normal; } .COM_tit em.c-gray-200 { color: var(--gray-200) !important; font-style: normal; } .COM_tit em.c-gray-300 { color: var(--gray-300) !important; font-style: normal; } .COM_tit em.c-gray-400 { color: var(--gray-400) !important; font-style: normal; } .COM_tit em.c-gray-500 { color: var(--gray-500) !important; font-style: normal; } .COM_tit em.c-gray-600 { color: var(--gray-600) !important; font-style: normal; } .COM_tit em.c-gray-700 { color: var(--gray-700) !important; font-style: normal; } .COM_tit em.c-gray-800 { color: var(--gray-800) !important; font-style: normal; } .COM_tit em.c-gray-900 { color: var(--gray-900) !important; font-style: normal; } .COM_tit em.c-gray-hover { color: var(--gray-hover) !important; font-style: normal; } /* Other Single Colors */ .COM_tit em.c-deep { color: var(--deep) !important; font-style: normal; } .COM_tit em.c-deep-hover { color: var(--deep-hover) !important; font-style: normal; } .COM_tit em.c-red { color: var(--red) !important; font-style: normal; } .COM_tit em.c-red-hover { color: var(--red-hover) !important; font-style: normal; } .COM_tit em.c-success { color: var(--success) !important; font-style: normal; } .COM_tit em.c-success-hover { color: var(--success-hover) !important; font-style: normal; } .COM_tit em.c-cancel { color: var(--cancel) !important; font-style: normal; } .COM_tit em.c-cancel-hover { color: var(--cancel-hover) !important; font-style: normal; } .COM_tit em.c-darkgray { color: var(--darkgray) !important; font-style: normal; } .COM_tit em.c-darkgray-hover { color: var(--darkgray-hover) !important; font-style: normal; } .COM_tit em.c-blue { color: var(--blue) !important; font-style: normal; } .COM_tit em.c-blue-hover { color: var(--blue-hover) !important; font-style: normal; } .COM_tit em.c-point { color: var(--point) !important; font-style: normal; } .COM_tit em.c-point-hover { color: var(--point-hover) !important; font-style: normal; } .COM_tit em.c-point1 { color: var(--point1) !important; font-style: normal; } .COM_tit em.c-point1-hover { color: var(--point1-hover) !important; font-style: normal; } .COM_tit em.c-point2 { color: var(--point2) !important; font-style: normal; } .COM_tit em.c-point2-hover { color: var(--point2-hover) !important; font-style: normal; } .COM_tit em.c-point3 { color: var(--point3) !important; font-style: normal; } .COM_tit em.c-point3-hover { color: var(--point3-hover) !important; font-style: normal; } .COM_tit em.c-point4 { color: var(--point4) !important; font-style: normal; } .COM_tit em.c-point4-hover { color: var(--point4-hover) !important; font-style: normal; } .COM_tit em.c-point5 { color: var(--point5) !important; font-style: normal; } .COM_tit em.c-point5-hover { color: var(--point5-hover) !important; font-style: normal; } .COM_tit em.c-Black{color:#000!important;font-style:normal} .COM_tit em.c-gray333{color:#333!important;font-style:normal} .COM_tit em.c-gray666{color:#666!important;font-style:normal} .COM_tit em.c-gray999{color:#999!important;font-style:normal} .COM_tit em.c-white{ color:#fff !important; } .COM_tit em.c-white-T { color:#FFFFFF80 !important; } .COM_tit em.w300 {font-weight:400;} .COM_tit em.w400 {font-weight:400;} .COM_tit em.w500 { font-weight:500; } .COM_tit em.w600 { font-weight:600; } .COM_tit em.w700 { font-weight:700; } .COM_tit em.w800 { font-weight:800; } .COM_tit em.w900 { font-weight:800; } .COM_tit em.mr3 {margin-right: 3px} .COM_tit em.mr5 {margin-right: 5px} .COM_tit em.mr7 {margin-right: 7px} .COM_tit em.mr10 {margin-right: 10px} .COM_tit em.line-primary {border-bottom: 1px solid var(--primary) } .COM_tit em.line-secondary {border-bottom: 1px solid var(--secondary) } .COM_tit em.line-tertiary {border-bottom: 1px solid var(--tertiary) } .COM_tit em.line-deep {border-bottom: 1px solid var(--deep) } .COM_tit em.line-red {border-bottom: 1px solid var(--red) } .COM_tit em.line-success {border-bottom: 1px solid var(--success) } .COM_tit em.line-cancel {border-bottom: 1px solid var(--cancel) } .COM_tit em.line-Black {border-bottom: 1px solid #000 } .COM_tit em.line-gray333 {border-bottom: 1px solid #333 } .COM_tit em.line-gray666 {border-bottom: 1px solid #666 } .COM_tit em.line-gray999 {border-bottom: 1px solid #999 } .COM_tit em.line-white {border-bottom: 1px solid #FFF } .COM_tit em.line-white-T {border-bottom: 1px solid #FFFFFF80 } .COM_tit em.line-point1 {border-bottom: 1px solid var(--point1) } .COM_tit em.line-point2 {border-bottom: 1px solid var(--point2) } .COM_tit em.line-point3 {border-bottom: 1px solid var(--point3) } .COM_tit em {display: inline-block} /* (옵션) 정렬/두께 유틸 */ .COM_tit.center { text-align:center; } .COM_tit.right { text-align:right; } .COM_tit.w400 { font-weight:400; } .COM_tit.w500 { font-weight:500; } .COM_tit.w600 { font-weight:600; } .COM_tit.w700 { font-weight:700; } .COM_tit.w800 { font-weight:800; } /* 공통 스타일 */ [class*="icon_ar"] { position: relative; padding-left: 30px; } /* = icon_ar1 세트 = */ .COM_tit.icon_ar1:before { content: "\eb19"; font-family: unicons-line; position: absolute; left: 0; top: 0; } .icon_ar1_sc01:before { font-size: calc(var(--tx-sm-size) * 1.0); } .icon_ar1_sc02:before { font-size: calc(var(--tx-sm-size) * 1.2); } .icon_ar1_sc03:before { font-size: calc(var(--tx-sm-size) * 1.5); } .icon_ar1_sc04:before { font-size: calc(var(--tx-sm-size) * 2.0); } /* = icon_ar2 세트 = */ .COM_tit.icon_ar2:before { content: "\eb3f"; font-family: unicons-line; position: absolute; left: 0; top: 0; } .icon_ar2_sc01:before { font-size: calc(var(--tx-sm-size) * 1.0); } .icon_ar2_sc02:before { font-size: calc(var(--tx-sm-size) * 1.2); } .icon_ar2_sc03:before { font-size: calc(var(--tx-sm-size) * 1.5); } .icon_ar2_sc04:before { font-size: calc(var(--tx-sm-size) * 2.0); } /* = icon_ar3 세트 = */ .COM_tit.icon_ar3:before { content: "\eb55"; font-family: unicons-line; position: absolute; left: 0; top: 0; } .icon_ar3_sc01:before { font-size: calc(var(--tx-sm-size) * 1.0); } .icon_ar3_sc02:before { font-size: calc(var(--tx-sm-size) * 1.2); } .icon_ar3_sc03:before { font-size: calc(var(--tx-sm-size) * 1.5); } .icon_ar3_sc04:before { font-size: calc(var(--tx-sm-size) * 2.0); } /* = icon_ar4 세트 = */ .COM_tit.icon_ar4:before { content: "\eb88"; font-family: unicons-line; position: absolute; left: 0; top: 0; } .icon_ar4_sc01:before { font-size: calc(var(--tx-sm-size) * 1.0); } .icon_ar4_sc02:before { font-size: calc(var(--tx-sm-size) * 1.2); } .icon_ar4_sc03:before { font-size: calc(var(--tx-sm-size) * 1.5); } .icon_ar4_sc04:before { font-size: calc(var(--tx-sm-size) * 2.0); } .letter-05 {letter-spacing: -0.5} .letter-1 {letter-spacing: -1 } .letter-15 {letter-spacing: -1.5 } .letter-2 {letter-spacing: -2 } .letter-3 {letter-spacing: -3 } em.letter-05 {letter-spacing: -0.5!important} em.letter-1 {letter-spacing: -1!important } em.letter-15 {letter-spacing: -1.5!important } em.letter-2 {letter-spacing: -2!important } em.letter-3 {letter-spacing: -3!important } .COM_tit.em-pa-lc1 em {position: absolute; left: 0px; top:50%;transform: translateY(-50%);} .COM_tit.em-pa-lc2 em {position: absolute; left: 0px; top: calc(1em * var(--line-height-um) / 2); transform: translateY(-50%);} /* ===== em 크기 프리셋 (--_base-size만 설정) ===== */ .COM_tit em.f_sm{--_base-size:var(--tx-sm-size)!important} .COM_tit em.f_mds{--_base-size:var(--tit-mds-size)!important} .COM_tit em.f_md{--_base-size:var(--tit-md-size)!important} .COM_tit em.f_lg{--_base-size:var(--tit-lg-size)!important} /* ===== em 스케일 클래스 (더 구체적인 셀렉터 사용) ===== */ .COM_tit em.scale-07{font-size:calc(var(--_base-size) * 0.72 * var(--_ff-m, 1))!important} .COM_tit em.scale-08{font-size:calc(var(--_base-size) * 0.83 * var(--_ff-m, 1))!important} .COM_tit em.scale-09{font-size:calc(var(--_base-size) * 0.92 * var(--_ff-m, 1))!important} .COM_tit em.scale-11{font-size:calc(var(--_base-size) * 1.1 * var(--_ff-m, 1))!important} .COM_tit em.scale-12{font-size:calc(var(--_base-size) * 1.2 * var(--_ff-m, 1))!important} .COM_tit em.scale-13{font-size:calc(var(--_base-size) * 1.3 * var(--_ff-m, 1))!important} .COM_tit em.scale-14{font-size:calc(var(--_base-size) * 1.4 * var(--_ff-m, 1))!important} .COM_tit em.scale-15{font-size:calc(var(--_base-size) * 1.5 * var(--_ff-m, 1))!important} /* ===== em 크기만 사용 (스케일 없을 때) ===== */ .COM_tit em.f_sm:not([class*="scale"]){font-size:var(--_base-size)!important} .COM_tit em.f_mds:not([class*="scale"]){font-size:var(--_base-size)!important} .COM_tit em.f_md:not([class*="scale"]){font-size:var(--_base-size)!important} .COM_tit em.f_lg:not([class*="scale"]){font-size:var(--_base-size)!important} ul.letter-05 li{letter-spacing: -0.5} ul.letter-1 li{letter-spacing: -1 } ul.letter-15 li{letter-spacing: -1.5 } ul.letter-2 li{letter-spacing: -2 } ul.letter-3 li{letter-spacing: -3 } ul.letter-05 li em {letter-spacing: -0.5!important} ul.letter-1 li em {letter-spacing: -1!important } ul.letter-15 li em {letter-spacing: -1.5!important } ul.letter-2 li em {letter-spacing: -2!important } ul.letter-3 li em {letter-spacing: -3!important } /* ========== 7. COM_tit 라운드 (border-radius) ========== */ .COM_tit.round-0 { border-radius: 0 !important; } .COM_tit.round-4 { border-radius: 4px !important; } .COM_tit.round-8 { border-radius: 8px !important; } .COM_tit.round-12 { border-radius: 12px !important; } .COM_tit.round-16 { border-radius: 16px !important; } .COM_tit.round-20 { border-radius: 20px !important; } .COM_tit.round-24 { border-radius: 24px !important; } .COM_tit.round-30 { border-radius: 30px !important; } .COM_tit.round-40 { border-radius: 40px !important; } .COM_tit.round-50 { border-radius: 50px !important; } .COM_tit.round-60 { border-radius: 60px !important; } .COM_tit.round-70 { border-radius: 70px !important; } .COM_tit.round-80 { border-radius: 80px !important; } .COM_tit.round-90 { border-radius: 90px !important; } .COM_tit.round-100 { border-radius: 100px !important; } .COM_tit.round-full { border-radius: 9999px !important; } /* ========== 8. em 포지션 확장 (6방향) ========== */ .COM_tit.em-pa-lt em { position: absolute; left: 0; top: 0; } .COM_tit.em-pa-lc em { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .COM_tit.em-pa-lb em { position: absolute; left: 0; bottom: 0; } .COM_tit.em-pa-rt em { position: absolute; right: 0; top: 0; } .COM_tit.em-pa-rc em { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .COM_tit.em-pa-rb em { position: absolute; right: 0; bottom: 0; } /* ========== 9. a 태그 포지션 ========== */ .COM_tit.a-pa-lt a { position: absolute; left: 0; top: 0; } .COM_tit.a-pa-lc a { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .COM_tit.a-pa-lb a { position: absolute; left: 0; bottom: 0; } .COM_tit.a-pa-rt a { position: absolute; right: 0; top: 0; } .COM_tit.a-pa-rc a { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .COM_tit.a-pa-rb a { position: absolute; right: 0; bottom: 0; } /* ========== 10. 안쪽 div 포지션 ========== */ .COM_tit.div-pa-lt > div:not(.COM_tit) { position: absolute; left: 0; top: 0; } .COM_tit.div-pa-lc > div:not(.COM_tit) { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .COM_tit.div-pa-lb > div:not(.COM_tit) { position: absolute; left: 0; bottom: 0; } .COM_tit.div-pa-rt > div:not(.COM_tit) { position: absolute; right: 0; top: 0; } .COM_tit.div-pa-rc > div:not(.COM_tit) { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .COM_tit.div-pa-rb > div:not(.COM_tit) { position: absolute; right: 0; bottom: 0; } /* ========== .COM_li ul - li 배경 컬러 ========== */ /* Primary */ .COM_li ul.li-bg-primary>li{background-color:var(--primary)!important;color:var(--on-primary-500)!important} .COM_li ul.li-bg-primary-50>li{background-color:var(--primary-50)!important;color:var(--on-primary-50)!important} .COM_li ul.li-bg-primary-100>li{background-color:var(--primary-100)!important;color:var(--on-primary-100)!important} .COM_li ul.li-bg-primary-200>li{background-color:var(--primary-200)!important;color:var(--on-primary-200)!important} .COM_li ul.li-bg-primary-300>li{background-color:var(--primary-300)!important;color:var(--on-primary-300)!important} .COM_li ul.li-bg-primary-400>li{background-color:var(--primary-400)!important;color:var(--on-primary-400)!important} .COM_li ul.li-bg-primary-500>li{background-color:var(--primary-500)!important;color:var(--on-primary-500)!important} .COM_li ul.li-bg-primary-600>li{background-color:var(--primary-600)!important;color:var(--on-primary-600)!important} .COM_li ul.li-bg-primary-700>li{background-color:var(--primary-700)!important;color:var(--on-primary-700)!important} .COM_li ul.li-bg-primary-800>li{background-color:var(--primary-800)!important;color:var(--on-primary-800)!important} .COM_li ul.li-bg-primary-900>li{background-color:var(--primary-900)!important;color:var(--on-primary-900)!important} /* Secondary */ .COM_li ul.li-bg-secondary>li{background-color:var(--secondary)!important;color:var(--on-secondary-500)!important} .COM_li ul.li-bg-secondary-50>li{background-color:var(--secondary-50)!important;color:var(--on-secondary-50)!important} .COM_li ul.li-bg-secondary-100>li{background-color:var(--secondary-100)!important;color:var(--on-secondary-100)!important} .COM_li ul.li-bg-secondary-200>li{background-color:var(--secondary-200)!important;color:var(--on-secondary-200)!important} .COM_li ul.li-bg-secondary-300>li{background-color:var(--secondary-300)!important;color:var(--on-secondary-300)!important} .COM_li ul.li-bg-secondary-400>li{background-color:var(--secondary-400)!important;color:var(--on-secondary-400)!important} .COM_li ul.li-bg-secondary-500>li{background-color:var(--secondary-500)!important;color:var(--on-secondary-500)!important} .COM_li ul.li-bg-secondary-600>li{background-color:var(--secondary-600)!important;color:var(--on-secondary-600)!important} .COM_li ul.li-bg-secondary-700>li{background-color:var(--secondary-700)!important;color:var(--on-secondary-700)!important} .COM_li ul.li-bg-secondary-800>li{background-color:var(--secondary-800)!important;color:var(--on-secondary-800)!important} .COM_li ul.li-bg-secondary-900>li{background-color:var(--secondary-900)!important;color:var(--on-secondary-900)!important} /* Tertiary */ .COM_li ul.li-bg-tertiary>li{background-color:var(--tertiary)!important;color:var(--on-tertiary-500)!important} .COM_li ul.li-bg-tertiary-50>li{background-color:var(--tertiary-50)!important;color:var(--on-tertiary-50)!important} .COM_li ul.li-bg-tertiary-100>li{background-color:var(--tertiary-100)!important;color:var(--on-tertiary-100)!important} .COM_li ul.li-bg-tertiary-200>li{background-color:var(--tertiary-200)!important;color:var(--on-tertiary-200)!important} .COM_li ul.li-bg-tertiary-300>li{background-color:var(--tertiary-300)!important;color:var(--on-tertiary-300)!important} .COM_li ul.li-bg-tertiary-400>li{background-color:var(--tertiary-400)!important;color:var(--on-tertiary-400)!important} .COM_li ul.li-bg-tertiary-500>li{background-color:var(--tertiary-500)!important;color:var(--on-tertiary-500)!important} .COM_li ul.li-bg-tertiary-600>li{background-color:var(--tertiary-600)!important;color:var(--on-tertiary-600)!important} .COM_li ul.li-bg-tertiary-700>li{background-color:var(--tertiary-700)!important;color:var(--on-tertiary-700)!important} .COM_li ul.li-bg-tertiary-800>li{background-color:var(--tertiary-800)!important;color:var(--on-tertiary-800)!important} .COM_li ul.li-bg-tertiary-900>li{background-color:var(--tertiary-900)!important;color:var(--on-tertiary-900)!important} /* Gray */ .COM_li ul.li-bg-gray>li{background-color:var(--gray)!important;color:var(--on-gray-500)!important} .COM_li ul.li-bg-gray-50>li{background-color:var(--gray-50)!important;color:var(--on-gray-50)!important} .COM_li ul.li-bg-gray-100>li{background-color:var(--gray-100)!important;color:var(--on-gray-100)!important} .COM_li ul.li-bg-gray-200>li{background-color:var(--gray-200)!important;color:var(--on-gray-200)!important} .COM_li ul.li-bg-gray-300>li{background-color:var(--gray-300)!important;color:var(--on-gray-300)!important} .COM_li ul.li-bg-gray-400>li{background-color:var(--gray-400)!important;color:var(--on-gray-400)!important} .COM_li ul.li-bg-gray-500>li{background-color:var(--gray-500)!important;color:var(--on-gray-500)!important} .COM_li ul.li-bg-gray-600>li{background-color:var(--gray-600)!important;color:var(--on-gray-600)!important} .COM_li ul.li-bg-gray-700>li{background-color:var(--gray-700)!important;color:var(--on-gray-700)!important} .COM_li ul.li-bg-gray-800>li{background-color:var(--gray-800)!important;color:var(--on-gray-800)!important} .COM_li ul.li-bg-gray-900>li{background-color:var(--gray-900)!important;color:var(--on-gray-900)!important} /* Others */ .COM_li ul.li-bg-deep>li{background-color:var(--deep)!important;color:#ffffff!important} .COM_li ul.li-bg-red>li{background-color:var(--red)!important;color:#ffffff!important} .COM_li ul.li-bg-success>li{background-color:var(--success)!important;color:#ffffff!important} .COM_li ul.li-bg-cancel>li{background-color:var(--cancel)!important;color:#ffffff!important} .COM_li ul.li-bg-darkgray>li{background-color:var(--darkgray)!important;color:#ffffff!important} .COM_li ul.li-bg-blue>li{background-color:var(--blue)!important;color:#ffffff!important} .COM_li ul.li-bg-point>li{background-color:var(--point)!important;color:#ffffff!important} .COM_li ul.li-bg-point1>li{background-color:var(--point1)!important;color:#ffffff!important} .COM_li ul.li-bg-point2>li{background-color:var(--point2)!important;color:#ffffff!important} .COM_li ul.li-bg-point3>li{background-color:var(--point3)!important;color:#ffffff!important} .COM_li ul.li-bg-point4>li{background-color:var(--point4)!important;color:#ffffff!important} .COM_li ul.li-bg-point5>li{background-color:var(--point5)!important;color:#ffffff!important} .COM_li ul.li-bg-white>li{background-color:#ffffff!important;color:#333!important} .COM_li ul.li-bg-black>li{background-color:#000!important;color:#fff!important} /* ========== .COM_li ul - li 자체 텍스트 컬러 ========== */ /* Primary */ .COM_li ul.primary>li{color:var(--primary)!important} .COM_li ul.primary-50>li{color:var(--primary-50)!important} .COM_li ul.primary-100>li{color:var(--primary-100)!important} .COM_li ul.primary-200>li{color:var(--primary-200)!important} .COM_li ul.primary-300>li{color:var(--primary-300)!important} .COM_li ul.primary-400>li{color:var(--primary-400)!important} .COM_li ul.primary-500>li{color:var(--primary-500)!important} .COM_li ul.primary-600>li{color:var(--primary-600)!important} .COM_li ul.primary-700>li{color:var(--primary-700)!important} .COM_li ul.primary-800>li{color:var(--primary-800)!important} .COM_li ul.primary-900>li{color:var(--primary-900)!important} /* Secondary */ .COM_li ul.secondary>li{color:var(--secondary)!important} .COM_li ul.secondary-50>li{color:var(--secondary-50)!important} .COM_li ul.secondary-100>li{color:var(--secondary-100)!important} .COM_li ul.secondary-200>li{color:var(--secondary-200)!important} .COM_li ul.secondary-300>li{color:var(--secondary-300)!important} .COM_li ul.secondary-400>li{color:var(--secondary-400)!important} .COM_li ul.secondary-500>li{color:var(--secondary-500)!important} .COM_li ul.secondary-600>li{color:var(--secondary-600)!important} .COM_li ul.secondary-700>li{color:var(--secondary-700)!important} .COM_li ul.secondary-800>li{color:var(--secondary-800)!important} .COM_li ul.secondary-900>li{color:var(--secondary-900)!important} /* Tertiary */ .COM_li ul.tertiary>li{color:var(--tertiary)!important} .COM_li ul.tertiary-50>li{color:var(--tertiary-50)!important} .COM_li ul.tertiary-100>li{color:var(--tertiary-100)!important} .COM_li ul.tertiary-200>li{color:var(--tertiary-200)!important} .COM_li ul.tertiary-300>li{color:var(--tertiary-300)!important} .COM_li ul.tertiary-400>li{color:var(--tertiary-400)!important} .COM_li ul.tertiary-500>li{color:var(--tertiary-500)!important} .COM_li ul.tertiary-600>li{color:var(--tertiary-600)!important} .COM_li ul.tertiary-700>li{color:var(--tertiary-700)!important} .COM_li ul.tertiary-800>li{color:var(--tertiary-800)!important} .COM_li ul.tertiary-900>li{color:var(--tertiary-900)!important} /* Gray */ .COM_li ul.gray>li{color:var(--gray)!important} .COM_li ul.gray-50>li{color:var(--gray-50)!important} .COM_li ul.gray-100>li{color:var(--gray-100)!important} .COM_li ul.gray-200>li{color:var(--gray-200)!important} .COM_li ul.gray-300>li{color:var(--gray-300)!important} .COM_li ul.gray-400>li{color:var(--gray-400)!important} .COM_li ul.gray-500>li{color:var(--gray-500)!important} .COM_li ul.gray-600>li{color:var(--gray-600)!important} .COM_li ul.gray-700>li{color:var(--gray-700)!important} .COM_li ul.gray-800>li{color:var(--gray-800)!important} .COM_li ul.gray-900>li{color:var(--gray-900)!important} /* Others */ .COM_li ul.deep>li{color:var(--deep)!important} .COM_li ul.red>li{color:var(--red)!important} .COM_li ul.success>li{color:var(--success)!important} .COM_li ul.cancel>li{color:var(--cancel)!important} .COM_li ul.darkgray>li{color:var(--darkgray)!important} .COM_li ul.blue>li{color:var(--blue)!important} .COM_li ul.point>li{color:var(--point)!important} .COM_li ul.point1>li{color:var(--point1)!important} .COM_li ul.point2>li{color:var(--point2)!important} .COM_li ul.point3>li{color:var(--point3)!important} .COM_li ul.point4>li{color:var(--point4)!important} .COM_li ul.point5>li{color:var(--point5)!important} .COM_li ul.Black>li{color:#000!important} .COM_li ul.White>li{color:#fff!important} /* Primary */ .COM_li ul.em-primary>li em{color:var(--primary)!important} .COM_li ul.em-primary-50>li em{color:var(--primary-50)!important} .COM_li ul.em-primary-100>li em{color:var(--primary-100)!important} .COM_li ul.em-primary-200>li em{color:var(--primary-200)!important} .COM_li ul.em-primary-300>li em{color:var(--primary-300)!important} .COM_li ul.em-primary-400>li em{color:var(--primary-400)!important} .COM_li ul.em-primary-500>li em{color:var(--primary-500)!important} .COM_li ul.em-primary-600>li em{color:var(--primary-600)!important} .COM_li ul.em-primary-700>li em{color:var(--primary-700)!important} .COM_li ul.em-primary-800>li em{color:var(--primary-800)!important} .COM_li ul.em-primary-900>li em{color:var(--primary-900)!important} /* Secondary */ .COM_li ul.em-secondary>li em{color:var(--secondary)!important} .COM_li ul.em-secondary-50>li em{color:var(--secondary-50)!important} .COM_li ul.em-secondary-100>li em{color:var(--secondary-100)!important} .COM_li ul.em-secondary-200>li em{color:var(--secondary-200)!important} .COM_li ul.em-secondary-300>li em{color:var(--secondary-300)!important} .COM_li ul.em-secondary-400>li em{color:var(--secondary-400)!important} .COM_li ul.em-secondary-500>li em{color:var(--secondary-500)!important} .COM_li ul.em-secondary-600>li em{color:var(--secondary-600)!important} .COM_li ul.em-secondary-700>li em{color:var(--secondary-700)!important} .COM_li ul.em-secondary-800>li em{color:var(--secondary-800)!important} .COM_li ul.em-secondary-900>li em{color:var(--secondary-900)!important} /* Tertiary */ .COM_li ul.em-tertiary>li em{color:var(--tertiary)!important} .COM_li ul.em-tertiary-50>li em{color:var(--tertiary-50)!important} .COM_li ul.em-tertiary-100>li em{color:var(--tertiary-100)!important} .COM_li ul.em-tertiary-200>li em{color:var(--tertiary-200)!important} .COM_li ul.em-tertiary-300>li em{color:var(--tertiary-300)!important} .COM_li ul.em-tertiary-400>li em{color:var(--tertiary-400)!important} .COM_li ul.em-tertiary-500>li em{color:var(--tertiary-500)!important} .COM_li ul.em-tertiary-600>li em{color:var(--tertiary-600)!important} .COM_li ul.em-tertiary-700>li em{color:var(--tertiary-700)!important} .COM_li ul.em-tertiary-800>li em{color:var(--tertiary-800)!important} .COM_li ul.em-tertiary-900>li em{color:var(--tertiary-900)!important} /* Gray */ .COM_li ul.em-gray>li em{color:var(--gray)!important} .COM_li ul.em-gray-50>li em{color:var(--gray-50)!important} .COM_li ul.em-gray-100>li em{color:var(--gray-100)!important} .COM_li ul.em-gray-200>li em{color:var(--gray-200)!important} .COM_li ul.em-gray-300>li em{color:var(--gray-300)!important} .COM_li ul.em-gray-400>li em{color:var(--gray-400)!important} .COM_li ul.em-gray-500>li em{color:var(--gray-500)!important} .COM_li ul.em-gray-600>li em{color:var(--gray-600)!important} .COM_li ul.em-gray-700>li em{color:var(--gray-700)!important} .COM_li ul.em-gray-800>li em{color:var(--gray-800)!important} .COM_li ul.em-gray-900>li em{color:var(--gray-900)!important} /* Others */ .COM_li ul.em-deep>li em{color:var(--deep)!important} .COM_li ul.em-red>li em{color:var(--red)!important} .COM_li ul.em-success>li em{color:var(--success)!important} .COM_li ul.em-cancel>li em{color:var(--cancel)!important} .COM_li ul.em-darkgray>li em{color:var(--darkgray)!important} .COM_li ul.em-blue>li em{color:var(--blue)!important} .COM_li ul.em-point>li em{color:var(--point)!important} .COM_li ul.em-point1>li em{color:var(--point1)!important} .COM_li ul.em-point2>li em{color:var(--point2)!important} .COM_li ul.em-point3>li em{color:var(--point3)!important} .COM_li ul.em-point4>li em{color:var(--point4)!important} .COM_li ul.em-point5>li em{color:var(--point5)!important} /* ========== .COM_li ul>li em 직접 텍스트 컬러 ========== */ /* Primary Colors */ .COM_li ul>li em.c-primary{color:var(--primary)!important;font-style:normal} .COM_li ul>li em.c-primary-50{color:var(--primary-50)!important;font-style:normal} .COM_li ul>li em.c-primary-100{color:var(--primary-100)!important;font-style:normal} .COM_li ul>li em.c-primary-200{color:var(--primary-200)!important;font-style:normal} .COM_li ul>li em.c-primary-300{color:var(--primary-300)!important;font-style:normal} .COM_li ul>li em.c-primary-400{color:var(--primary-400)!important;font-style:normal} .COM_li ul>li em.c-primary-500{color:var(--primary-500)!important;font-style:normal} .COM_li ul>li em.c-primary-600{color:var(--primary-600)!important;font-style:normal} .COM_li ul>li em.c-primary-700{color:var(--primary-700)!important;font-style:normal} .COM_li ul>li em.c-primary-800{color:var(--primary-800)!important;font-style:normal} .COM_li ul>li em.c-primary-900{color:var(--primary-900)!important;font-style:normal} .COM_li ul>li em.c-primary-hover{color:var(--primary-hover)!important;font-style:normal} /* Secondary Colors */ .COM_li ul>li em.c-secondary{color:var(--secondary)!important;font-style:normal} .COM_li ul>li em.c-secondary-50{color:var(--secondary-50)!important;font-style:normal} .COM_li ul>li em.c-secondary-100{color:var(--secondary-100)!important;font-style:normal} .COM_li ul>li em.c-secondary-200{color:var(--secondary-200)!important;font-style:normal} .COM_li ul>li em.c-secondary-300{color:var(--secondary-300)!important;font-style:normal} .COM_li ul>li em.c-secondary-400{color:var(--secondary-400)!important;font-style:normal} .COM_li ul>li em.c-secondary-500{color:var(--secondary-500)!important;font-style:normal} .COM_li ul>li em.c-secondary-600{color:var(--secondary-600)!important;font-style:normal} .COM_li ul>li em.c-secondary-700{color:var(--secondary-700)!important;font-style:normal} .COM_li ul>li em.c-secondary-800{color:var(--secondary-800)!important;font-style:normal} .COM_li ul>li em.c-secondary-900{color:var(--secondary-900)!important;font-style:normal} .COM_li ul>li em.c-secondary-hover{color:var(--secondary-hover)!important;font-style:normal} /* Tertiary Colors */ .COM_li ul>li em.c-tertiary{color:var(--tertiary)!important;font-style:normal} .COM_li ul>li em.c-tertiary-50{color:var(--tertiary-50)!important;font-style:normal} .COM_li ul>li em.c-tertiary-100{color:var(--tertiary-100)!important;font-style:normal} .COM_li ul>li em.c-tertiary-200{color:var(--tertiary-200)!important;font-style:normal} .COM_li ul>li em.c-tertiary-300{color:var(--tertiary-300)!important;font-style:normal} .COM_li ul>li em.c-tertiary-400{color:var(--tertiary-400)!important;font-style:normal} .COM_li ul>li em.c-tertiary-500{color:var(--tertiary-500)!important;font-style:normal} .COM_li ul>li em.c-tertiary-600{color:var(--tertiary-600)!important;font-style:normal} .COM_li ul>li em.c-tertiary-700{color:var(--tertiary-700)!important;font-style:normal} .COM_li ul>li em.c-tertiary-800{color:var(--tertiary-800)!important;font-style:normal} .COM_li ul>li em.c-tertiary-900{color:var(--tertiary-900)!important;font-style:normal} .COM_li ul>li em.c-tertiary-hover{color:var(--tertiary-hover)!important;font-style:normal} /* Gray Colors */ .COM_li ul>li em.c-gray{color:var(--gray)!important;font-style:normal} .COM_li ul>li em.c-gray-50{color:var(--gray-50)!important;font-style:normal} .COM_li ul>li em.c-gray-100{color:var(--gray-100)!important;font-style:normal} .COM_li ul>li em.c-gray-200{color:var(--gray-200)!important;font-style:normal} .COM_li ul>li em.c-gray-300{color:var(--gray-300)!important;font-style:normal} .COM_li ul>li em.c-gray-400{color:var(--gray-400)!important;font-style:normal} .COM_li ul>li em.c-gray-500{color:var(--gray-500)!important;font-style:normal} .COM_li ul>li em.c-gray-600{color:var(--gray-600)!important;font-style:normal} .COM_li ul>li em.c-gray-700{color:var(--gray-700)!important;font-style:normal} .COM_li ul>li em.c-gray-800{color:var(--gray-800)!important;font-style:normal} .COM_li ul>li em.c-gray-900{color:var(--gray-900)!important;font-style:normal} .COM_li ul>li em.c-gray-hover{color:var(--gray-hover)!important;font-style:normal} /* Deep */ .COM_li ul>li em.c-deep{color:var(--deep)!important;font-style:normal} .COM_li ul>li em.c-deep-hover{color:var(--deep-hover)!important;font-style:normal} /* Red */ .COM_li ul>li em.c-red{color:var(--red)!important;font-style:normal} .COM_li ul>li em.c-red-hover{color:var(--red-hover)!important;font-style:normal} /* Success */ .COM_li ul>li em.c-success{color:var(--success)!important;font-style:normal} .COM_li ul>li em.c-success-hover{color:var(--success-hover)!important;font-style:normal} /* Cancel */ .COM_li ul>li em.c-cancel{color:var(--cancel)!important;font-style:normal} .COM_li ul>li em.c-cancel-hover{color:var(--cancel-hover)!important;font-style:normal} /* Darkgray */ .COM_li ul>li em.c-darkgray{color:var(--darkgray)!important;font-style:normal} .COM_li ul>li em.c-darkgray-hover{color:var(--darkgray-hover)!important;font-style:normal} /* Blue */ .COM_li ul>li em.c-blue{color:var(--blue)!important;font-style:normal} .COM_li ul>li em.c-blue-hover{color:var(--blue-hover)!important;font-style:normal} /* Point */ .COM_li ul>li em.c-point{color:var(--point)!important;font-style:normal} .COM_li ul>li em.c-point-hover{color:var(--point-hover)!important;font-style:normal} /* Point1 */ .COM_li ul>li em.c-point1{color:var(--point1)!important;font-style:normal} .COM_li ul>li em.c-point1-hover{color:var(--point1-hover)!important;font-style:normal} /* Point2 */ .COM_li ul>li em.c-point2{color:var(--point2)!important;font-style:normal} .COM_li ul>li em.c-point2-hover{color:var(--point2-hover)!important;font-style:normal} /* Point3 */ .COM_li ul>li em.c-point3{color:var(--point3)!important;font-style:normal} .COM_li ul>li em.c-point3-hover{color:var(--point3-hover)!important;font-style:normal} /* Point4 */ .COM_li ul>li em.c-point4{color:var(--point4)!important;font-style:normal} .COM_li ul>li em.c-point4-hover{color:var(--point4-hover)!important;font-style:normal} /* Point5 */ .COM_li ul>li em.c-point5{color:var(--point5)!important;font-style:normal} .COM_li ul>li em.c-point5-hover{color:var(--point5-hover)!important;font-style:normal} /* ========== .COM_li ul>li 배경 컬러 ========== */ /* Primary Colors */ .COM_li ul>li em.bg-primary{background-color:var(--primary)!important;color:var(--on-primary-500)!important} .COM_li ul>li em.bg-primary-50{background-color:var(--primary-50)!important;color:var(--on-primary-50)!important} .COM_li ul>li em.bg-primary-100{background-color:var(--primary-100)!important;color:var(--on-primary-100)!important} .COM_li ul>li em.bg-primary-200{background-color:var(--primary-200)!important;color:var(--on-primary-200)!important} .COM_li ul>li em.bg-primary-300{background-color:var(--primary-300)!important;color:var(--on-primary-300)!important} .COM_li ul>li em.bg-primary-400{background-color:var(--primary-400)!important;color:var(--on-primary-400)!important} .COM_li ul>li em.bg-primary-500{background-color:var(--primary-500)!important;color:var(--on-primary-500)!important} .COM_li ul>li em.bg-primary-600{background-color:var(--primary-600)!important;color:var(--on-primary-600)!important} .COM_li ul>li em.bg-primary-700{background-color:var(--primary-700)!important;color:var(--on-primary-700)!important} .COM_li ul>li em.bg-primary-800{background-color:var(--primary-800)!important;color:var(--on-primary-800)!important} .COM_li ul>li em.bg-primary-900{background-color:var(--primary-900)!important;color:var(--on-primary-900)!important} /* Secondary Colors */ .COM_li ul>li em.bg-secondary{background-color:var(--secondary)!important;color:var(--on-secondary-500)!important} .COM_li ul>li em.bg-secondary-50{background-color:var(--secondary-50)!important;color:var(--on-secondary-50)!important} .COM_li ul>li em.bg-secondary-100{background-color:var(--secondary-100)!important;color:var(--on-secondary-100)!important} .COM_li ul>li em.bg-secondary-200{background-color:var(--secondary-200)!important;color:var(--on-secondary-200)!important} .COM_li ul>li em.bg-secondary-300{background-color:var(--secondary-300)!important;color:var(--on-secondary-300)!important} .COM_li ul>li em.bg-secondary-400{background-color:var(--secondary-400)!important;color:var(--on-secondary-400)!important} .COM_li ul>li em.bg-secondary-500{background-color:var(--secondary-500)!important;color:var(--on-secondary-500)!important} .COM_li ul>li em.bg-secondary-600{background-color:var(--secondary-600)!important;color:var(--on-secondary-600)!important} .COM_li ul>li em.bg-secondary-700{background-color:var(--secondary-700)!important;color:var(--on-secondary-700)!important} .COM_li ul>li em.bg-secondary-800{background-color:var(--secondary-800)!important;color:var(--on-secondary-800)!important} .COM_li ul>li em.bg-secondary-900{background-color:var(--secondary-900)!important;color:var(--on-secondary-900)!important} /* Tertiary Colors */ .COM_li ul>li em.bg-tertiary{background-color:var(--tertiary)!important;color:var(--on-tertiary-500)!important} .COM_li ul>li em.bg-tertiary-50{background-color:var(--tertiary-50)!important;color:var(--on-tertiary-50)!important} .COM_li ul>li em.bg-tertiary-100{background-color:var(--tertiary-100)!important;color:var(--on-tertiary-100)!important} .COM_li ul>li em.bg-tertiary-200{background-color:var(--tertiary-200)!important;color:var(--on-tertiary-200)!important} .COM_li ul>li em.bg-tertiary-300{background-color:var(--tertiary-300)!important;color:var(--on-tertiary-300)!important} .COM_li ul>li em.bg-tertiary-400{background-color:var(--tertiary-400)!important;color:var(--on-tertiary-400)!important} .COM_li ul>li em.bg-tertiary-500{background-color:var(--tertiary-500)!important;color:var(--on-tertiary-500)!important} .COM_li ul>li em.bg-tertiary-600{background-color:var(--tertiary-600)!important;color:var(--on-tertiary-600)!important} .COM_li ul>li em.bg-tertiary-700{background-color:var(--tertiary-700)!important;color:var(--on-tertiary-700)!important} .COM_li ul>li em.bg-tertiary-800{background-color:var(--tertiary-800)!important;color:var(--on-tertiary-800)!important} .COM_li ul>li em.bg-tertiary-900{background-color:var(--tertiary-900)!important;color:var(--on-tertiary-900)!important} /* Gray Colors */ .COM_li ul>li em.bg-gray{background-color:var(--gray)!important;color:var(--on-gray-500)!important} .COM_li ul>li em.bg-gray-50{background-color:var(--gray-50)!important;color:var(--on-gray-50)!important} .COM_li ul>li em.bg-gray-100{background-color:var(--gray-100)!important;color:var(--on-gray-100)!important} .COM_li ul>li em.bg-gray-200{background-color:var(--gray-200)!important;color:var(--on-gray-200)!important} .COM_li ul>li em.bg-gray-300{background-color:var(--gray-300)!important;color:var(--on-gray-300)!important} .COM_li ul>li em.bg-gray-400{background-color:var(--gray-400)!important;color:var(--on-gray-400)!important} .COM_li ul>li em.bg-gray-500{background-color:var(--gray-500)!important;color:var(--on-gray-500)!important} .COM_li ul>li em.bg-gray-600{background-color:var(--gray-600)!important;color:var(--on-gray-600)!important} .COM_li ul>li em.bg-gray-700{background-color:var(--gray-700)!important;color:var(--on-gray-700)!important} .COM_li ul>li em.bg-gray-800{background-color:var(--gray-800)!important;color:var(--on-gray-800)!important} .COM_li ul>li em.bg-gray-900{background-color:var(--gray-900)!important;color:var(--on-gray-900)!important} /* Deep */ .COM_li ul>li em.bg-deep{background-color:var(--deep)!important;color:#ffffff!important} /* Red */ .COM_li ul>li em.bg-red{background-color:var(--red)!important;color:#ffffff!important} /* Success */ .COM_li ul>li em.bg-success{background-color:var(--success)!important;color:#ffffff!important} /* Cancel */ .COM_li ul>li em.bg-cancel{background-color:var(--cancel)!important;color:#ffffff!important} /* Darkgray */ .COM_li ul>li em.bg-darkgray{background-color:var(--darkgray)!important;color:#ffffff!important} /* Blue */ .COM_li ul>li em.bg-blue{background-color:var(--blue)!important;color:#ffffff!important} /* Point */ .COM_li ul>li em.bg-point{background-color:var(--point)!important;color:#ffffff!important} /* Point1 */ .COM_li ul>li em.bg-point1{background-color:var(--point1)!important;color:#ffffff!important} /* Point2 */ .COM_li ul>li em.bg-point2{background-color:var(--point2)!important;color:#ffffff!important} /* Point3 */ .COM_li ul>li em.bg-point3{background-color:var(--point3)!important;color:#ffffff!important} /* Point4 */ .COM_li ul>li em.bg-point4{background-color:var(--point4)!important;color:#ffffff!important} /* Point5 */ .COM_li ul>li em.bg-point5{background-color:var(--point5)!important;color:#ffffff!important} /* White */ .COM_li ul>li em.bg-white{background-color:#ffffff!important;color:#333!important} .COM_li ul>li em.br_0 { border-radius: 0px !important; } .COM_li ul>li em.br_2 { border-radius: 2px !important; } .COM_li ul>li em.br_4 { border-radius: 4px !important; } .COM_li ul>li em.br_5 { border-radius: 5px !important; } .COM_li ul>li em.br_7 { border-radius: 7px !important; } .COM_li ul>li em.br_10 { border-radius: 10px !important; } /* ** align ** */ .text-right { text-align: right !important; } .text-center { text-align: center !important; }