2186 lines
48 KiB
CSS
2186 lines
48 KiB
CSS
@charset "UTF-8";
|
||
:root {
|
||
/* text - 텍스트 색상 */
|
||
--text-intro-base: #1b1810;
|
||
--text-base: #131313;
|
||
--text-revers: #fff;
|
||
--text-primary: #3c3321;
|
||
--text-secondary: #747474;
|
||
--text-accent: #ff5c00;
|
||
--text-myclass: #ffdf60;
|
||
--text-main-primary: #4a4040;
|
||
--text-main-secondary: #3a200d;
|
||
--text-title-accent: #f5651d;
|
||
--text-pick: #2b5045;
|
||
--text-keyword-base: #c4c2c0;
|
||
--text-keyword-primary: #fff;
|
||
--text-keyword-secondary: #999999;
|
||
--text-video-primary: #b6d5a7;
|
||
--text-video-secondary: #ddd;
|
||
--text-cate-primary: #edd8c2;
|
||
--text-cate-secondary: #b6d5a7;
|
||
--text-cate-tertiary: #e8cfe4;
|
||
--text-comment-primary: #fff;
|
||
--text-comment-secondary: #8d8d8d;
|
||
--text-learning-base: #8d8888;
|
||
--text-learning-primary: #ff5c00;
|
||
--text-learning-secondary: #008c49;
|
||
--text-card-category: #252525;
|
||
--text-card-title-active: #ff7d33;
|
||
--text-card-title-complete: #66ba92;
|
||
--text-card-author: #d1cfcf;
|
||
/* 배경 */
|
||
--bg-base: #e4ddcf;
|
||
--bg-primary: #ece3d2;
|
||
--bg-secondary:
|
||
radial-gradient(
|
||
93.89% 93.89% at 49.32% 6.11%,
|
||
rgba(255, 255, 255, 0) 0%,
|
||
rgba(255, 255, 255, 0.11) 86.06%,
|
||
rgba(134, 114, 77, 0.2) 88.94%
|
||
),
|
||
linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
|
||
--bg-main-card: rgba(255, 255, 255, 0.6);
|
||
--bg-intro-mask: #1b1810;
|
||
--bg-intro: linear-gradient(
|
||
180deg,
|
||
#f9f5f2 0%,
|
||
#fff 18.77%,
|
||
#fff 41.8%,
|
||
#ece8e4 100%
|
||
);
|
||
--bg-main:
|
||
linear-gradient(
|
||
90deg,
|
||
#0f3025 0%,
|
||
#194335 38%,
|
||
#0b221b 87.51%,
|
||
#0d231c 100%
|
||
)
|
||
top / 100% 114px no-repeat,
|
||
#ece3d2;
|
||
--bg-video: #1b1b1b;
|
||
--bg-comment: #2a2a2a;
|
||
--bg-nav: linear-gradient(
|
||
90deg,
|
||
#0f3025 0%,
|
||
#194335 38%,
|
||
#0b221b 87.51%,
|
||
#0d231c 100%
|
||
);
|
||
--bg-nav-depth: #fff;
|
||
--bg-nav-alerts: #ff2200;
|
||
--bg-nav-alerts-hover: #188f6b;
|
||
--bg-cate-primary: #ded7cf;
|
||
--bg-cate-secondary: #d4decf;
|
||
--bg-cate-tertiary: #e8cfe4;
|
||
--bg-pick: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #d5ede6 100%);
|
||
--bg-gauge-base: #b4b4b4;
|
||
--bg-gauge-primary: #ff5c00;
|
||
--bg-search: #e4dbc9;
|
||
--bg-keyword-base: rgba(230, 205, 177, 0.3);
|
||
--bg-keyword-primary: #e47703;
|
||
--bg-keyword-primary-hover: #e6cdb1;
|
||
--bg-keyword-secondary: #786c60;
|
||
--bg-keyword-secondary-hover: #dcd3c9;
|
||
--bg-lecture-state: linear-gradient(270deg, #00ab66 0%, #058bb0 100%);
|
||
--bg-lecture-progress-primary: rgba(3, 9, 7, 0.3);
|
||
--bg-lecture-progress-secondary: #07855c;
|
||
--bg-btn-base: #000;
|
||
--bg-btn-primary: #ff5c00;
|
||
--bg-btn-secondary: #1f1f1f;
|
||
--bg-card: rgba(255, 255, 255, 0.6);
|
||
--bg-card-hover-start: #ff6600;
|
||
--bg-card-hover-end: rgba(255, 132, 0, 0.7);
|
||
--bg-card-thumb-overlay: rgba(255, 255, 255, 0.3);
|
||
--bg-card-shadow: rgba(217, 202, 190, 0.5);
|
||
--bg-card-hover-shadow: rgba(198, 187, 177, 0.5);
|
||
--bg-card-shadow-inner: rgba(0, 0, 0, 1);
|
||
--bg-pick-shadow: rgba(166, 154, 97, 0.25);
|
||
--bg-modal: rgba(0, 0, 0, 0.8);
|
||
--bg-modal-content: #f6f1e9;
|
||
--bg-modal-close-hover: #e00400;
|
||
--bg-scrollbar-thumb: #D0D0D0;
|
||
--bg-scrollbar-thumb-dark: #383838;
|
||
--bg-scrollbar-track: #F3F3F3;
|
||
--bg-scrollbar-thumb-light: rgba(255, 255, 255, 0.2);
|
||
--bg-scrollbar-thumb-light-hover: rgba(255, 255, 255, 0.3);
|
||
--bg-scrollbar-track-light: rgba(255, 255, 255, 0.05);
|
||
--bg-video-gauge: #171717;
|
||
--bg-video-gauge-fill: #ff6c19;
|
||
--bg-video-gauge-border: rgba(0, 0, 0, 0.4);
|
||
--bg-learning-line: #c6c3c3;
|
||
--bg-learning-dot: #8d8888;
|
||
--bg-learning-active: rgba(255, 92, 0, 0.2);
|
||
--bg-learning-active-line: #ffad7f;
|
||
--bg-learning-active-dot: #ff5c00;
|
||
--bg-learning-complete: rgba(0, 140, 73, 0.2);
|
||
--bg-learning-complete-line: #7fc5a4;
|
||
--bg-learning-complete-dot: #008c49;
|
||
--bg-chapter-current: #146b51;
|
||
--bg-chapter-completed: #ba9a85;
|
||
--bg-card-base: #7e7e7e;
|
||
--bg-card-current: #1d9b75;
|
||
--bg-card-current-border: #1f9b76;
|
||
--bg-card-current-bg: #dbefe9;
|
||
--bg-card-completed: #ab3d00;
|
||
--bg-gauge-fill: #e25e00;
|
||
--bg-shadow: #8a7d64;
|
||
--bg-puzzle-family: #7ed29b;
|
||
--bg-puzzle-hanmac: #ffccca;
|
||
--bg-puzzle-value: #87a7d6;
|
||
--bg-puzzle-company: #b49a65;
|
||
--bg-piece-1: #1d375d;
|
||
--bg-piece-2: #662a0d;
|
||
--bg-piece-3: #5b4822;
|
||
--bg-piece-4: #2a5338;
|
||
--bg-circle-border: #a7790f;
|
||
--bg-circle-start: rgba(127, 47, 0, 0.1);
|
||
--bg-circle-end: rgba(167, 121, 15, 0.5);
|
||
--bg-circle-dot: rgba(221, 144, 0, 0.6);
|
||
--bg-circle-dot-hover: rgba(221, 144, 0, 0.8);
|
||
--bg-circle-dot-stroke: rgba(221, 144, 0, 0.2);
|
||
--bg-gradient-start: #ece3d2;
|
||
--bg-gradient-end: #fff;
|
||
--bg-learning-line-color: #edba8a;
|
||
--bg-modal-header: #f04400;
|
||
--bg-textarea: #2a2a2a;
|
||
--bg-textarea-placeholder: rgba(255, 255, 255, 0.5);
|
||
/* border */
|
||
--border-base: rgba(0, 0, 0, 0.05);
|
||
--border-primary: #fff;
|
||
--border-keyword-base: rgba(0, 0, 0, 0.05);
|
||
--border-keyword-primary: rgba(255, 255, 255, 0.4);
|
||
--border-keyword-primary-hover: rgba(0, 0, 0, 0.05);
|
||
--border-keyword-secondary: rgba(255, 255, 255, 0.4);
|
||
--border-keyword-secondary-hover: rgba(0, 0, 0, 0.1);
|
||
--border-pick: rgba(255, 255, 255, 0.5);
|
||
--border-video: rgba(255, 255, 255, 0.1);
|
||
--border-btn: rgba(255, 255, 255, 0.2);
|
||
--border-card: rgba(255, 255, 255, 0.8);
|
||
--border-modal: #888;
|
||
--border-comment-resizer: rgba(230, 227, 225, 0.1);
|
||
/* drop */
|
||
--text-shadow:
|
||
-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||
--text-stroke: drop-shadow(0 0 0.5px #000);
|
||
/* shadow */
|
||
--shadow-pagination: rgba(0, 0, 0, 0.4);
|
||
--shadow-modal: rgba(0, 0, 0, 0.25);
|
||
--shadow-card-drop: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
--shadow-card-drop-small: 0 4px 2px rgba(0, 0, 0, 0.05);
|
||
--shadow-gauge-inset: rgba(0, 0, 0, 0.3);
|
||
--shadow-comment: 0 8px 22px 22px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
/* 페이드 전환 */
|
||
.fade-out {
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
|
||
.fade-in {
|
||
opacity: 1;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
@keyframes arrow-next {
|
||
0%, 100% {
|
||
right: 72px;
|
||
}
|
||
50% {
|
||
right: 50px;
|
||
}
|
||
}
|
||
@keyframes bounce {
|
||
0%, 100% {
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateX(-50%) translateY(-12px);
|
||
}
|
||
}
|
||
@keyframes slideUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
@keyframes scroll-down {
|
||
0% {
|
||
transform-origin: 50% 100%;
|
||
transform: scaleY(1);
|
||
}
|
||
50% {
|
||
transform-origin: 50% 100%;
|
||
transform: scaleY(0);
|
||
}
|
||
50.1% {
|
||
transform-origin: 50% 0;
|
||
transform: scaleY(0);
|
||
}
|
||
to {
|
||
transform-origin: 50% 0;
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 0.2;
|
||
}
|
||
50% {
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
@keyframes borderFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
@keyframes borderPulse {
|
||
0%, 100% {
|
||
border-color: #fff;
|
||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
|
||
}
|
||
50% {
|
||
border-color: #fff;
|
||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
|
||
}
|
||
}
|
||
@keyframes fillGauge {
|
||
from {
|
||
width: 0;
|
||
}
|
||
to {
|
||
width: 100%;
|
||
}
|
||
}
|
||
html {
|
||
font-size: 10px;
|
||
}
|
||
html[lang=ko-KR], html[lang=ko] {
|
||
font-family: "Noto Sans KR", sans-serif;
|
||
}
|
||
html[lang=en],
|
||
html *[lang=en] {
|
||
font-family: "Noto Sans KR", Arial, sans-serif, serif;
|
||
}
|
||
html[lang=en] body,
|
||
html *[lang=en] body {
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
}
|
||
html body {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 1.4;
|
||
color: #000;
|
||
letter-spacing: -0.04em;
|
||
overflow: hidden;
|
||
}
|
||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
main {
|
||
display: block;
|
||
}
|
||
|
||
pre {
|
||
font-family: monospace, monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
abbr[title] {
|
||
border-bottom: none;
|
||
text-decoration: underline;
|
||
-webkit-text-decoration: underline dotted;
|
||
text-decoration: underline dotted;
|
||
}
|
||
|
||
b,
|
||
em,
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
code,
|
||
kbd,
|
||
samp {
|
||
font-family: monospace, monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
small {
|
||
font-size: 80%;
|
||
}
|
||
|
||
sub,
|
||
sup {
|
||
font-size: 75%;
|
||
line-height: 0;
|
||
position: relative;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
img {
|
||
border-style: none;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
optgroup,
|
||
select,
|
||
textarea {
|
||
font-family: inherit;
|
||
font-size: 100%;
|
||
line-height: 1.15;
|
||
margin: 0;
|
||
}
|
||
|
||
button,
|
||
input {
|
||
overflow: visible;
|
||
}
|
||
|
||
button,
|
||
select {
|
||
text-transform: none;
|
||
}
|
||
|
||
button,
|
||
[type=button],
|
||
[type=reset],
|
||
[type=submit] {
|
||
-webkit-appearance: button;
|
||
}
|
||
|
||
button::-moz-focus-inner,
|
||
[type=button]::-moz-focus-inner,
|
||
[type=reset]::-moz-focus-inner,
|
||
[type=submit]::-moz-focus-inner {
|
||
border-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
button:-moz-focusring,
|
||
[type=button]:-moz-focusring,
|
||
[type=reset]:-moz-focusring,
|
||
[type=submit]:-moz-focusring {
|
||
outline: 1px dotted ButtonText;
|
||
}
|
||
|
||
fieldset {
|
||
padding: 0.35em 0.75em 0.625em;
|
||
}
|
||
|
||
legend {
|
||
box-sizing: border-box;
|
||
color: inherit;
|
||
display: table;
|
||
max-width: 100%;
|
||
padding: 0;
|
||
white-space: normal;
|
||
}
|
||
|
||
progress {
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
textarea {
|
||
overflow: auto;
|
||
}
|
||
|
||
[type=checkbox],
|
||
[type=radio] {
|
||
box-sizing: border-box;
|
||
padding: 0;
|
||
}
|
||
|
||
[type=number]::-webkit-inner-spin-button,
|
||
[type=number]::-webkit-outer-spin-button {
|
||
height: auto;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
[type=search] {
|
||
-webkit-appearance: textfield;
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
[type=search]::-webkit-search-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
::-webkit-file-upload-button {
|
||
-webkit-appearance: button;
|
||
font: inherit;
|
||
}
|
||
|
||
details {
|
||
display: block;
|
||
}
|
||
|
||
summary {
|
||
display: list-item;
|
||
}
|
||
|
||
template {
|
||
display: none;
|
||
}
|
||
|
||
[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
/* reset */
|
||
html * {
|
||
box-sizing: border-box;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
body,
|
||
div,
|
||
dl,
|
||
dt,
|
||
dd,
|
||
ul,
|
||
ol,
|
||
li,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
pre,
|
||
code,
|
||
form,
|
||
figure,
|
||
legend,
|
||
input,
|
||
textarea,
|
||
button,
|
||
p,
|
||
blockquote,
|
||
th,
|
||
td,
|
||
form,
|
||
fieldset,
|
||
blockquote,
|
||
iframe {
|
||
margin: 0;
|
||
padding: 0;
|
||
-webkit-text-size-adjust: 100%;
|
||
-moz-text-size-adjust: 100%;
|
||
text-size-adjust: 100%;
|
||
}
|
||
|
||
article,
|
||
aside,
|
||
canvas,
|
||
details,
|
||
embed,
|
||
figcaption,
|
||
figure,
|
||
footer,
|
||
header,
|
||
hgroup,
|
||
menu,
|
||
nav,
|
||
section,
|
||
summary {
|
||
display: block;
|
||
}
|
||
|
||
command,
|
||
datalist,
|
||
keygen,
|
||
mark,
|
||
meter,
|
||
progress,
|
||
rp,
|
||
rt,
|
||
ruby,
|
||
time,
|
||
wbr {
|
||
display: inline;
|
||
}
|
||
|
||
img {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
max-width: 100%;
|
||
border: 0;
|
||
image-rendering: -moz-crisp-edges; /* firefox */
|
||
image-rendering: -o-crisp-edges; /* opera */
|
||
image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
|
||
image-rendering: crisp-edges;
|
||
transform: translateZ(0);
|
||
}
|
||
|
||
fieldset {
|
||
border: 0;
|
||
}
|
||
|
||
ul,
|
||
ol,
|
||
li {
|
||
list-style: none;
|
||
}
|
||
|
||
pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
legend,
|
||
caption {
|
||
position: relative;
|
||
clip: rect(0 0 0 0);
|
||
clip-path: inset(50%);
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
border: 0;
|
||
padding: 0;
|
||
white-space: nowrap;
|
||
clear: both;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
cursor: pointer;
|
||
background-color: transparent;
|
||
}
|
||
a:link {
|
||
text-decoration: none;
|
||
}
|
||
a:hover, a:focus, a:active, a:visited {
|
||
text-decoration: none;
|
||
}
|
||
|
||
em,
|
||
i,
|
||
address,
|
||
cite {
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
}
|
||
|
||
input,
|
||
textarea,
|
||
select,
|
||
button,
|
||
table {
|
||
font-size: inherit;
|
||
font-family: inherit;
|
||
border: 0;
|
||
background-color: transparent;
|
||
}
|
||
|
||
button,
|
||
select {
|
||
cursor: pointer;
|
||
}
|
||
|
||
textarea,
|
||
input,
|
||
select {
|
||
border-radius: 0;
|
||
border: 0;
|
||
outline-color: -moz-use-text-color;
|
||
outline-width: medium;
|
||
}
|
||
|
||
textarea {
|
||
resize: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
label {
|
||
cursor: pointer;
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
table {
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
select::-ms-expand {
|
||
display: none;
|
||
}
|
||
|
||
html::-webkit-scrollbar {
|
||
height: 10px;
|
||
width: 7px;
|
||
}
|
||
html::-webkit-scrollbar-thumb {
|
||
background-color: var(--bg-scrollbar-thumb);
|
||
border-radius: 8px;
|
||
background-clip: padding-box;
|
||
border-top: 1px solid transparent;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
html::-webkit-scrollbar-track {
|
||
background-color: var(--bg-scrollbar-track);
|
||
}
|
||
|
||
.clearfix:after {
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
|
||
.blind {
|
||
position: absolute;
|
||
clip: rect(0 0 0 0);
|
||
clip-path: inset(50%);
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
border: 0;
|
||
padding: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.hidden,
|
||
.d-none {
|
||
display: none !important;
|
||
}
|
||
|
||
.btn-full {
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-primary {
|
||
height: 36px;
|
||
border-radius: 3px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
background: radial-gradient(117.51% 77.94% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #FF8200;
|
||
background-blend-mode: screen, normal;
|
||
color: #fff;
|
||
}
|
||
.btn-primary:disabled {
|
||
background: #C4C4C4;
|
||
border-color: #B1B1B1;
|
||
color: #E8E8E8;
|
||
}
|
||
|
||
[class^=ico-] {
|
||
display: inline-block;
|
||
}
|
||
|
||
.ico-play {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-image: url("/img/ico/ico_watch.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.ico-bookmark {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-image: url("/img/ico/ico_bookmark.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.ico-pin {
|
||
width: 24px;
|
||
height: 32px;
|
||
background-image: url("/img/ico/ico_pin.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.ico-comment {
|
||
width: 22px;
|
||
height: 22px;
|
||
background-image: url("/img/ico/ico_comment.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.input-group {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
.input-group .btn-clear {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 16px;
|
||
translate: 0 -50%;
|
||
width: 12px;
|
||
height: 12px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
display: none;
|
||
background-image: url("/img/ico/ico_clear.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.input-group .btn-clear:hover {
|
||
opacity: 0.7;
|
||
}
|
||
.input-group:has(input:not(:-moz-placeholder)) .input-group .btn-clear {
|
||
display: block;
|
||
}
|
||
.input-group:has(input[value]:not([value=""])) .input-group .btn-clear, .input-group:has(input:not(:placeholder-shown)) .input-group .btn-clear {
|
||
display: block;
|
||
}
|
||
|
||
.checkbox {
|
||
position: relative;
|
||
}
|
||
.checkbox input[type=checkbox] {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
[class^=keyword] {
|
||
flex-wrap: wrap;
|
||
-moz-column-gap: 8px;
|
||
column-gap: 8px;
|
||
row-gap: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
[class^=keyword] {
|
||
-moz-column-gap: 16px;
|
||
column-gap: 16px;
|
||
row-gap: 12px;
|
||
}
|
||
}
|
||
[class^=keyword][class*=list] {
|
||
max-width: 470px;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
[class^=keyword][class*=list] {
|
||
-moz-column-gap: 8px;
|
||
column-gap: 8px;
|
||
row-gap: 6px;
|
||
}
|
||
}
|
||
[class^=keyword][class*=tag] label:has(:checked) {
|
||
color: var(--text-keyword-primary);
|
||
background: var(--bg-keyword-primary);
|
||
border: 1px solid var(--border-keyword-primary);
|
||
}
|
||
[class^=keyword] label {
|
||
position: relative;
|
||
display: block;
|
||
min-width: 52px;
|
||
padding: 10px 12px;
|
||
border-radius: 24px;
|
||
color: var(--text-keyword-base);
|
||
background: var(--bg-keyword-base);
|
||
border: 1px solid var(--border-keyword-base);
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
[class^=keyword] label {
|
||
padding: 8px 8px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
[class^=keyword] label:has(+ [type=checkbox]:checked) {
|
||
color: var(--text-keyword-secondary);
|
||
background: var(--bg-keyword-primary-hover);
|
||
border: 1px solid var(--border-keyword-primary-hover);
|
||
}
|
||
[class^=keyword] label:has(+ [type=checkbox]:checked):has(:checked) {
|
||
color: var(--text-keyword-primary);
|
||
background: var(--bg-keyword-primary);
|
||
border: 1px solid var(--border-keyword-primary);
|
||
}
|
||
[class^=keyword] label input[type=checkbox] {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 0;
|
||
}
|
||
[class^=keyword] .kw-box {
|
||
position: relative;
|
||
}
|
||
[class^=keyword] .kw-box label::after {
|
||
content: " ";
|
||
display: block;
|
||
position: absolute;
|
||
top: -2px;
|
||
right: 0;
|
||
width: 14px;
|
||
height: 14px;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
border-radius: 50%;
|
||
background-image: url("/img/ico/ico_add.svg");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
[class^=keyword] .kw-box label:has(:checked)::after {
|
||
background-image: url("/img/ico/ico_remove.svg");
|
||
}
|
||
[class^=keyword] .kw-allow {
|
||
color: var(--text-keyword-secondary);
|
||
background: var(--bg-keyword-primary-hover);
|
||
border: 1px solid var(--border-keyword-primary-hover);
|
||
}
|
||
[class^=keyword] .kw-allow:has(:checked) {
|
||
color: var(--text-keyword-primary);
|
||
background: var(--bg-keyword-primary);
|
||
border: 1px solid var(--border-keyword-primary);
|
||
}
|
||
[class^=keyword] .kw-deny {
|
||
color: var(--text-keyword-secondary);
|
||
background: var(--bg-keyword-secondary-hover);
|
||
border: 1px solid var(--border-keyword-secondary-hover);
|
||
}
|
||
[class^=keyword] .kw-deny:has(:checked) {
|
||
color: var(--text-keyword-primary);
|
||
background: var(--bg-keyword-secondary);
|
||
border: 1px solid var(--border-keyword-secondary);
|
||
}
|
||
|
||
.item-info .leader {
|
||
background: var(--bg-cate-primary);
|
||
}
|
||
.item-info .insight {
|
||
background: var(--bg-cate-secondary);
|
||
}
|
||
.item-info .biz {
|
||
background: var(--bg-cate-tertiary);
|
||
}
|
||
.item-info .myclass {
|
||
background: #F3CDA5;
|
||
}
|
||
.item-info .onboarding {
|
||
background-color: #DEEAB9;
|
||
}
|
||
.item-info .learning {
|
||
background-color: #C4E6EA;
|
||
}
|
||
|
||
.page-title {
|
||
padding-top: min(3.8541%, 74px);
|
||
text-align: center;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.page-title {
|
||
padding-top: 34px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 767px) {
|
||
.page-title {
|
||
padding-top: 24px;
|
||
padding-bottom: 16px;
|
||
}
|
||
}
|
||
.page-title p {
|
||
font-size: 40px;
|
||
font-weight: 400;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.page-title p {
|
||
font-size: 24px;
|
||
text-wrap: balance;
|
||
word-break: keep-all;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 767px) {
|
||
.page-title p {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
.page-title p.fw-b {
|
||
font-weight: 700;
|
||
}
|
||
.page-title p em {
|
||
font-weight: 700;
|
||
color: var(--text-title-accent);
|
||
}
|
||
.page-title p small {
|
||
font-size: 32px;
|
||
font-weight: 400;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.page-title p small {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
.page-title h3 {
|
||
font-size: 32px;
|
||
font-weight: 300;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.page-title h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
.page-title h3 span {
|
||
font-weight: 400;
|
||
}
|
||
.page-title h3 em {
|
||
font-weight: 500;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
}
|
||
|
||
.badge-danger {
|
||
border-radius: 4px;
|
||
color: var(--text-keyword-primary);
|
||
background: var(--bg-nav-alerts);
|
||
text-align: center;
|
||
}
|
||
|
||
.bookmark {
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
.bookmark input[type=checkbox] {
|
||
height: 10px;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
cursor: pointer;
|
||
background-image: url("/img/ico/ico_bookmark_off.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
width: 12px;
|
||
aspect-ratio: 1/1;
|
||
}
|
||
.bookmark input[type=checkbox]:checked {
|
||
background-image: url("/img/ico/ico_bookmark_on.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
width: 12px;
|
||
aspect-ratio: 1/1;
|
||
}
|
||
|
||
.m-br {
|
||
display: none;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.m-br {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.pc-txt {
|
||
display: block;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.pc-txt {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.mo-txt {
|
||
display: none;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.mo-txt {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 30;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: var(--bg-modal);
|
||
overflow: auto;
|
||
}
|
||
.modal .modal-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
translate: -50% -50%;
|
||
background-color: var(--bg-modal-content);
|
||
padding: 40px 20px 20px;
|
||
border: 1px solid var(--border-modal);
|
||
width: 470px;
|
||
min-height: 500px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
.modal .close {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 12px;
|
||
display: block;
|
||
width: 26px;
|
||
height: 26px;
|
||
color: #000;
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
background: none;
|
||
filter: var(--text-shadow);
|
||
transition: all 0.1s ease-in-out;
|
||
}
|
||
.modal .close:hover, .modal .close:focus {
|
||
color: var(--bg-modal-close-hover);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
text-shadow: var(--text-stroke);
|
||
}
|
||
.modal.video::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 10px;
|
||
}
|
||
.modal.video::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.modal.video::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-dark);
|
||
border-radius: 8px;
|
||
}
|
||
.modal.video::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(81.5, 81.5, 81.5);
|
||
}
|
||
|
||
@media only screen and (min-width: 1024px) {
|
||
.modal.video > .comment-wrap .comment-resizer {
|
||
display: none;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video > .comment-wrap {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 55vh;
|
||
max-height: 85vh;
|
||
transform: translateY(100%);
|
||
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
||
z-index: 100;
|
||
pointer-events: none;
|
||
border-radius: 16px 16px 0 0;
|
||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
|
||
background: rgba(42, 42, 42, 0.98);
|
||
backdrop-filter: blur(12px);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.modal.video > .comment-wrap .comment-resizer {
|
||
position: relative;
|
||
left: auto;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 28px;
|
||
min-height: 28px;
|
||
flex-shrink: 0;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid #161616;
|
||
}
|
||
.modal.video > .comment-wrap .comment-resizer::before {
|
||
content: "";
|
||
width: 36px;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: rgba(255, 255, 255, 0.35);
|
||
}
|
||
.modal.video > .comment-wrap .comment-resizer .resizer-handle {
|
||
display: none;
|
||
}
|
||
.modal.video > .comment-wrap .comment-list-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
max-height: none;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video.is-comment-open > .comment-wrap {
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.modal.video .close {
|
||
color: var(--text-revers);
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
width: 22px;
|
||
height: 22px;
|
||
top: 14px;
|
||
right: 16px;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .close {
|
||
position: fixed;
|
||
z-index: 10;
|
||
/* .modal-content에 transform 있음 → 이 모달 영역 기준 상단 고정 */
|
||
}
|
||
}
|
||
.modal.video .modal-content {
|
||
width: 90%;
|
||
max-width: 1720px;
|
||
height: 900px;
|
||
max-height: 900px;
|
||
padding: 0;
|
||
background: var(--bg-video);
|
||
border: none;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
}
|
||
@media (max-height: 899px) {
|
||
.modal.video .modal-content {
|
||
height: 100vh;
|
||
max-height: 100vh;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .modal-content {
|
||
width: 100%;
|
||
border-radius: 0;
|
||
height: var(--window-inner-height);
|
||
max-height: var(--window-inner-height);
|
||
overflow: hidden;
|
||
transform: translateZ(0); /* fixed 자식이 이 요소 기준으로 위치 */
|
||
}
|
||
}
|
||
.modal.video .modal-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 437px;
|
||
height: 100%;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .modal-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
.modal.video .modal-body::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 10px;
|
||
}
|
||
.modal.video .modal-body::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.modal.video .modal-body::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-dark);
|
||
border-radius: 8px;
|
||
}
|
||
.modal.video .modal-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(81.5, 81.5, 81.5);
|
||
}
|
||
.modal.video .modal-body {
|
||
border-right: 1px solid var(--border-video);
|
||
}
|
||
}
|
||
.modal.video .video-contents {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 900px;
|
||
border-right: 1px solid var(--border-video);
|
||
}
|
||
@media (max-height: 899px) {
|
||
.modal.video .video-contents {
|
||
height: 100vh;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-contents {
|
||
display: contents; /* 영상이 modal-body 직계 자식처럼 동작 → 스크롤 내내 sticky 유지 */
|
||
border-right: none;
|
||
}
|
||
}
|
||
.modal.video .video-area {
|
||
flex: 1;
|
||
border-bottom: 1px solid var(--border-video);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-area {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
flex: 0 0 auto;
|
||
background: var(--bg-video);
|
||
order: -1; /* display: contents 사용 시 video-contents 안에서도 맨 위에 오도록 */
|
||
}
|
||
}
|
||
.modal.video .video-box {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
padding-top: 56.0405%;
|
||
overflow: hidden;
|
||
}
|
||
.modal.video .video-box iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.modal.video .video-info {
|
||
height: 188px;
|
||
padding: 0 36px;
|
||
text-align: left;
|
||
color: var(--text-revers);
|
||
overflow-y: auto;
|
||
}
|
||
.modal.video .video-info::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 10px;
|
||
}
|
||
.modal.video .video-info::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.modal.video .video-info::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-dark);
|
||
border-radius: 8px;
|
||
}
|
||
.modal.video .video-info::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(81.5, 81.5, 81.5);
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-info {
|
||
height: auto;
|
||
padding: 0 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
.modal.video .video-info .tit-box {
|
||
width: 100%;
|
||
min-height: 80px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid var(--border-video);
|
||
background: var(--bg-video);
|
||
}
|
||
@media only screen and (min-width: 1024px) {
|
||
.modal.video .video-info .tit-box {
|
||
position: sticky;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-info .tit-box {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
}
|
||
.modal.video .video-info .tit-box h3 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
padding-right: 80px;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-info .tit-box h3 {
|
||
padding-right: 0;
|
||
font-size: 18px;
|
||
grid-column: 1/4;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-info .tit-box .tit-right {
|
||
grid-column: 2/3;
|
||
grid-row: 1/2;
|
||
padding-right: 12px;
|
||
gap: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex-direction: row;
|
||
}
|
||
}
|
||
.modal.video .video-info .tit-box .tit-right .btn-comment {
|
||
gap: 4px;
|
||
border: 1px solid var(--border-btn);
|
||
background: #1F1F1F;
|
||
border-radius: 4px;
|
||
padding: 8px 8px;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
@media only screen and (min-width: 1024px) {
|
||
.modal.video .video-info .tit-box .tit-right .btn-comment {
|
||
display: none;
|
||
}
|
||
}
|
||
.modal.video .video-info .tit-box .tit-right .btn-comment .ico-comment {
|
||
width: 12px;
|
||
height: 12px;
|
||
background-image: url("/img/ico/ico_chat_msg.svg");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.modal.video .video-info .tit-box .bookmark {
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
background: #1F1F1F;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
width: -moz-max-content;
|
||
width: max-content;
|
||
}
|
||
@media only screen and (min-width: 1024px) {
|
||
.modal.video .video-info .tit-box .bookmark {
|
||
position: absolute;
|
||
bottom: 18px;
|
||
right: 0;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-info .tit-box .bookmark {
|
||
background: #1F1F1F;
|
||
}
|
||
}
|
||
.modal.video .video-info .meta {
|
||
font-size: 14px;
|
||
color: var(--text-video-primary);
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-info .meta {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.modal.video .video-info .meta span {
|
||
position: relative;
|
||
display: inline-block;
|
||
color: var(--text-video-primary);
|
||
}
|
||
.modal.video .video-info .meta span::after {
|
||
content: " ";
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 10px;
|
||
background: url("/img/ico/ico_arrow_meta.svg") no-repeat center center;
|
||
}
|
||
/*온보딩, 법정교육 영상모달 '>' 제거 20260401 추가*/
|
||
.modal.video .video-info .meta.no-arrow span::after {
|
||
display: none;
|
||
}
|
||
.modal.video .video-info .meta em {
|
||
font-weight: 700;
|
||
}
|
||
.modal.video .video-info .desc {
|
||
padding: 22px 0;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-video-secondary);
|
||
}
|
||
.modal.video .video-side {
|
||
display: grid;
|
||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||
grid-auto-rows: auto;
|
||
max-height: 900px;
|
||
overflow: hidden;
|
||
}
|
||
@media (max-height: 899px) {
|
||
.modal.video .video-side {
|
||
max-height: 100vh;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-side {
|
||
flex-shrink: 0;
|
||
max-height: none;
|
||
overflow: visible;
|
||
min-height: 0;
|
||
}
|
||
}
|
||
.modal.video .video-side > * {
|
||
min-height: 0;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-side .video-list {
|
||
height: auto !important;
|
||
overflow-y: visible !important;
|
||
}
|
||
}
|
||
.modal.video .video-side .comment-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow: visible;
|
||
align-self: end;
|
||
}
|
||
.modal.video .video-side .comment-wrap:has(.comment-list) {
|
||
border-top: 1px solid var(--border-video);
|
||
box-shadow: var(--shadow-comment);
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-side .comment-wrap {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 55vh;
|
||
max-height: 85vh;
|
||
transform: translateY(100%);
|
||
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
||
z-index: 100;
|
||
pointer-events: none;
|
||
border-radius: 16px 16px 0 0;
|
||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
|
||
background: rgba(42, 42, 42, 0.98);
|
||
backdrop-filter: blur(12px);
|
||
overflow: hidden;
|
||
flex-direction: column;
|
||
}
|
||
.modal.is-comment-open .modal.video .video-side .comment-wrap, .modal.video.is-comment-open .modal.video .video-side .comment-wrap {
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
justify-content: space-between;
|
||
}
|
||
.modal.video .video-side .comment-wrap .comment-resizer {
|
||
position: relative;
|
||
left: auto;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 44px;
|
||
min-height: 44px;
|
||
flex-shrink: 0;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
padding: 0 16px;
|
||
}
|
||
.modal.video .video-side .comment-wrap .comment-resizer::before {
|
||
content: "";
|
||
width: 36px;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: rgba(255, 255, 255, 0.35);
|
||
}
|
||
.modal.video .video-side .comment-wrap .comment-resizer::after {
|
||
content: "×";
|
||
font-size: 24px;
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1;
|
||
}
|
||
.modal.video .video-side .comment-wrap .comment-resizer .resizer-handle {
|
||
display: none;
|
||
}
|
||
.modal.video .video-side .comment-wrap .comment-list-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
max-height: none;
|
||
}
|
||
}
|
||
.modal.video .video-side.step:has(:not(.comment-wrap)) .video-list {
|
||
padding-bottom: 20px;
|
||
}
|
||
.modal.video .video-side.step .video-header {
|
||
flex-direction: column;
|
||
background: linear-gradient(271deg, rgba(255, 244, 233, 0.04) 1.54%, rgba(255, 244, 233, 0.09) 99.11%), #1b1b1b;
|
||
height: -moz-max-content;
|
||
height: max-content;
|
||
}
|
||
.modal.video .video-side.step .video-header .tit-box {
|
||
gap: 12px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
.modal.video .video-side.step .video-header .sub-txt {
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
word-break: keep-all;
|
||
text-align: left;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-side.step .video-header .sub-txt {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-container {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-bar {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 15px;
|
||
background: var(--bg-video-gauge);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
border: 0.5px solid var(--bg-video-gauge-border);
|
||
margin-bottom: 8px;
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-fill {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
background: var(--bg-video-gauge-fill);
|
||
border-radius: 4px;
|
||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-fill::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 191, 0, 0.4) 100%), var(--bg-video-gauge-fill);
|
||
mix-blend-mode: color-dodge;
|
||
opacity: 0.4;
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-ticks {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
mix-blend-mode: plus-lighter;
|
||
opacity: 0.2;
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-labels {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
}
|
||
.modal.video .video-side.step .video-header .gauge-labels em {
|
||
font-weight: 700;
|
||
margin: 0 2px;
|
||
}
|
||
.modal.video .video-side.step .video-list {
|
||
padding-top: 20px;
|
||
}
|
||
.modal.video .video-header {
|
||
padding: 38px 16px 16px;
|
||
min-height: 80px;
|
||
color: var(--text-revers);
|
||
gap: 16px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-header {
|
||
padding: 22px 16px;
|
||
}
|
||
}
|
||
.modal.video .video-header .tit {
|
||
line-height: 26px;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .video-header .tit {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.modal.video .video-header .badge {
|
||
width: 60px;
|
||
height: 26px;
|
||
background: var(--bg-keyword-primary);
|
||
font-size: 14px;
|
||
color: var(--text-keyword-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
border-radius: 25px;
|
||
}
|
||
.modal.video .video-list {
|
||
overflow-y: auto;
|
||
align-self: start;
|
||
}
|
||
.modal.video .video-list::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 10px;
|
||
}
|
||
.modal.video .video-list::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.modal.video .video-list::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-dark);
|
||
border-radius: 8px;
|
||
}
|
||
.modal.video .video-list::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(81.5, 81.5, 81.5);
|
||
}
|
||
.modal.video .video-list .tit {
|
||
color: #fff;
|
||
margin-bottom: 8px;
|
||
}
|
||
.modal.video .learning-list {
|
||
position: relative;
|
||
color: var(--text-learning-base);
|
||
}
|
||
.modal.video .learning-list::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 10px;
|
||
}
|
||
.modal.video .learning-list::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.modal.video .learning-list::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-dark);
|
||
border-radius: 8px;
|
||
}
|
||
.modal.video .learning-list::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(81.5, 81.5, 81.5);
|
||
}
|
||
.modal.video .learning-list::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: 56px;
|
||
width: 1px;
|
||
height: var(--scroll-height, calc(100% - 5px));
|
||
opacity: 0.2;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 10%, #fff 90%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
.modal.video .learning-list > li {
|
||
border: none;
|
||
}
|
||
.modal.video .learning-list .list {
|
||
gap: 12px;
|
||
padding: 0;
|
||
margin-bottom: 5px;
|
||
grid-template-columns: 44px 1fr;
|
||
}
|
||
.modal.video .learning-list .list .learning-box {
|
||
position: relative;
|
||
gap: 12px;
|
||
padding: 8px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
}
|
||
.modal.video .learning-list .list .learning-box::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
width: 20px;
|
||
height: 1px;
|
||
background-color: var(--bg-learning-line);
|
||
}
|
||
.modal.video .learning-list .list .learning-box::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: -6px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background-color: var(--bg-learning-dot);
|
||
border-radius: 50%;
|
||
outline: 2px solid var(--bg-learning-line);
|
||
}
|
||
.modal.video .learning-list .list .learning-box .title {
|
||
color: var(--text-card-author);
|
||
}
|
||
.modal.video .learning-list .list .thumb {
|
||
min-width: 105px;
|
||
max-width: 105px;
|
||
}
|
||
.modal.video .learning-list .list .seq,
|
||
.modal.video .learning-list .list .state {
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .learning-list .list .seq,
|
||
.modal.video .learning-list .list .state {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.modal.video .learning-list .list .seq {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.modal.video .learning-list .active {
|
||
color: var(--text-learning-primary);
|
||
}
|
||
.modal.video .learning-list .active .seq,
|
||
.modal.video .learning-list .active .state {
|
||
font-weight: 600;
|
||
}
|
||
.modal.video .learning-list .active .learning-box {
|
||
background: linear-gradient(90deg, var(--bg-learning-active) 0%, rgba(255, 92, 0, 0) 100%);
|
||
}
|
||
.modal.video .learning-list .active .learning-box::before {
|
||
background-color: var(--bg-learning-active-line);
|
||
}
|
||
.modal.video .learning-list .active .learning-box::after {
|
||
background-color: var(--bg-learning-active-dot);
|
||
outline-color: var(--bg-learning-active-line);
|
||
}
|
||
.modal.video .learning-list .active .learning-box .title {
|
||
color: var(--text-card-title-active);
|
||
font-weight: 600;
|
||
}
|
||
.modal.video .learning-list .complet {
|
||
color: var(--text-learning-secondary);
|
||
}
|
||
.modal.video .learning-list .complet .learning-box {
|
||
background: linear-gradient(90deg, var(--bg-learning-complete) 0%, rgba(0, 140, 73, 0) 100%);
|
||
}
|
||
.modal.video .learning-list .complet .learning-box::before {
|
||
background-color: var(--bg-learning-complete-line);
|
||
}
|
||
.modal.video .learning-list .complet .learning-box::after {
|
||
background-color: var(--bg-learning-complete-dot);
|
||
outline-color: var(--bg-learning-complete-line);
|
||
}
|
||
.modal.video .learning-list .complet .learning-box .title {
|
||
color: var(--text-card-title-complete);
|
||
}
|
||
.modal.video .comment-box {
|
||
width: 100%;
|
||
padding: 8px;
|
||
gap: 8px;
|
||
border-top: 1px solid var(--border-video);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
}
|
||
.modal.video textarea {
|
||
flex-grow: 1;
|
||
min-height: 32px;
|
||
max-height: 120px;
|
||
color: var(--text-revers);
|
||
background: var(--bg-textarea);
|
||
height: 32px;
|
||
border-radius: 4px;
|
||
padding: 6px 8px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
resize: none;
|
||
overflow-y: auto;
|
||
transition: height 0.3s linear;
|
||
}
|
||
.modal.video textarea::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 10px;
|
||
}
|
||
.modal.video textarea::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.modal.video textarea::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-dark);
|
||
border-radius: 8px;
|
||
}
|
||
.modal.video textarea::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(81.5, 81.5, 81.5);
|
||
}
|
||
.modal.video textarea::-moz-placeholder {
|
||
color: var(--bg-textarea-placeholder);
|
||
}
|
||
.modal.video textarea::placeholder {
|
||
color: var(--bg-textarea-placeholder);
|
||
}
|
||
.modal.video .btn-area {
|
||
gap: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
.modal.video .btn-active {
|
||
background: var(--bg-btn-primary);
|
||
}
|
||
.modal.video [class^=btn] {
|
||
min-width: 40px;
|
||
min-height: 32px;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
.modal.video [class^=btn]:not([class*=area]) {
|
||
background: var(--bg-btn-base);
|
||
}
|
||
.modal.video [class^=btn]:disabled {
|
||
color: #8f8f8f;
|
||
background: var(--bg-btn-secondary);
|
||
border: 1px solid var(--border-btn);
|
||
}
|
||
.modal.video [class^=btn][class*=save]:not(:disabled) {
|
||
background: var(--text-accent);
|
||
border: none;
|
||
}
|
||
|
||
.video-list {
|
||
padding: 0 16px;
|
||
}
|
||
.video-list li {
|
||
border-bottom: 1px solid var(--border-video);
|
||
}
|
||
.video-list .list {
|
||
width: 100%;
|
||
gap: 20px;
|
||
padding: 8px;
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr;
|
||
align-items: center;
|
||
}
|
||
.video-list .thumb {
|
||
position: relative;
|
||
min-height: 68px;
|
||
max-height: 94px;
|
||
border-radius: 4px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
.video-list .thumb img {
|
||
width: 100%;
|
||
height: auto;
|
||
max-width: auto;
|
||
}
|
||
.video-list .txt-box {
|
||
gap: 4px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
.video-list .txt-box .checkbox {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 42px;
|
||
width: 24px;
|
||
height: 24px;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18' fill='none'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.79455 11 2.04033C9.801 0.79455 7.964 0 6.05 0C2.662 0 0 2.36403 0 5.39509C0 9.09319 3.74 12.1243 9.405 16.7052L11 18L12.595 16.7052C18.26 12.1243 22 9.09319 22 5.39509C22 2.36403 19.338 0 15.95 0Z' fill='white'/%3E%3Cpath d='M15.9502 0.75C19.0079 0.750089 21.25 2.85803 21.25 5.39551C21.2499 6.96829 20.4613 8.47481 18.8691 10.2119C17.2723 11.9541 14.9715 13.8187 12.123 16.1221L12.1221 16.123L11 17.0332L9.87793 16.123L9.87695 16.1221L7.8457 14.4717C5.92217 12.894 4.3285 11.5185 3.13086 10.2119C1.5387 8.47481 0.750138 6.96829 0.75 5.39551C0.75 2.85803 2.99208 0.75009 6.0498 0.75C7.76714 0.75 9.40728 1.4668 10.46 2.56055L11 3.12207L11.54 2.56055C12.5927 1.4668 14.2329 0.75 15.9502 0.75Z' stroke='%23060505' stroke-opacity='0.2' stroke-width='1.5'/%3E%3C/svg%3E");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
}
|
||
.video-list .txt-box .checkbox:has(:checked) {
|
||
background-image: url("data:image/svg+xml,%3Csvg width='22' height='18' viewBox='0 0 22 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.79455 11 2.04033C9.801 0.79455 7.964 0 6.05 0C2.662 0 0 2.36403 0 5.39509C0 9.09319 3.74 12.1243 9.405 16.7052L11 18L12.595 16.7052C18.26 12.1243 22 9.09319 22 5.39509C22 2.36403 19.338 0 15.95 0Z' fill='%23ff5c00'/%3E%3Cpath d='M15.9502 0.75C19.0079 0.750089 21.25 2.85803 21.25 5.39551C21.2499 6.96829 20.4613 8.47481 18.8691 10.2119C17.2723 11.9541 14.9715 13.8187 12.123 16.1221L12.1221 16.123L11 17.0332L9.87793 16.123L9.87695 16.1221L7.8457 14.4717C5.92217 12.894 4.3285 11.5185 3.13086 10.2119C1.5387 8.47481 0.750138 6.96829 0.75 5.39551C0.75 2.85803 2.99208 0.75009 6.0498 0.75C7.76714 0.75 9.40728 1.4668 10.46 2.56055L11 3.12207L11.54 2.56055C12.5927 1.4668 14.2329 0.75 15.9502 0.75Z' stroke='white' stroke-opacity='0.2' stroke-width='1.5'/%3E%3C/svg%3E%0A");
|
||
}
|
||
.video-list .txt-box .category {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
.video-list .txt-box .category.leader {
|
||
color: var(--text-cate-primary);
|
||
}
|
||
.video-list .txt-box .category.insight {
|
||
color: var(--text-cate-secondary);
|
||
}
|
||
.video-list .txt-box .category.biz {
|
||
color: var(--text-cate-tertiary);
|
||
}
|
||
.video-list .txt-box .title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
color: var(--text-revers);
|
||
text-align: left;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
@media only screen and (max-width: 1023px) {
|
||
.video-list .txt-box .title {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.comment-wrap {
|
||
position: relative;
|
||
background: var(--bg-comment);
|
||
}
|
||
.comment-box {
|
||
flex-shrink: 0;
|
||
}
|
||
.comment-resizer {
|
||
position: absolute;
|
||
left: calc(50% - 21px);
|
||
top: -24px;
|
||
width: 42px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
background: var(--bg-comment);
|
||
border-radius: 8px 8px 0 0;
|
||
border-top: 1px solid var(--border-comment-resizer);
|
||
border-right: 1px solid var(--border-comment-resizer);
|
||
border-left: 1px solid var(--border-comment-resizer);
|
||
cursor: ns-resize;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
.comment-resizer:hover .resizer-handle, .comment-resizer.resizing .resizer-handle {
|
||
background-color: var(--text-myclass);
|
||
}
|
||
.comment-resizer .resizer-handle {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: auto;
|
||
transition: background 0.2s ease;
|
||
background-color: var(--text-revers);
|
||
mask-image: url("/img/ico/ico_drag.svg");
|
||
mask-size: contain;
|
||
mask-position: center;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-image: url("/img/ico/ico_drag.svg");
|
||
-webkit-mask-size: contain;
|
||
-webkit-mask-position: center;
|
||
-webkit-mask-repeat: no-repeat;
|
||
width: 18px;
|
||
aspect-ratio: 1/1;
|
||
}
|
||
.comment-list-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
max-height: 340px;
|
||
}
|
||
.comment-list-wrap::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.comment-list-wrap::-webkit-scrollbar-track {
|
||
background: var(--bg-scrollbar-track-light);
|
||
}
|
||
.comment-list-wrap::-webkit-scrollbar-thumb {
|
||
background: var(--bg-scrollbar-thumb-light);
|
||
border-radius: 3px;
|
||
}
|
||
.comment-list-wrap::-webkit-scrollbar-thumb:hover {
|
||
background: var(--bg-scrollbar-thumb-light-hover);
|
||
}
|
||
.comment-list {
|
||
padding: 16px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
.comment-list .empty {
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
font-size: 13px;
|
||
}
|
||
.comment-list .comment-info {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
.comment-list .comment-info .user-comment {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.comment-list .comment-info .comment-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
margin-left: 8px;
|
||
align-self: center;
|
||
}
|
||
.comment-list .comment-info .comment-actions button {
|
||
padding: 3px 8px;
|
||
font-size: 12px;
|
||
border: 1px solid #555;
|
||
border-radius: 3px;
|
||
background: #333;
|
||
color: #ddd;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.comment-list .comment-info .comment-actions button:hover {
|
||
background: #555;
|
||
color: #fff;
|
||
}
|
||
.comment-info {
|
||
padding: 0 20px;
|
||
gap: 12px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
}
|
||
.comment-info .photo {
|
||
width: 20px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
}
|
||
.comment-info .photo img {
|
||
width: 20px;
|
||
aspect-ratio: 1/1;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: var(--text-comment-secondary);
|
||
overflow: hidden;
|
||
}
|
||
.comment-info .user-comment {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
}
|
||
.comment-info .user-name {
|
||
font-weight: 700;
|
||
color: var(--text-comment-secondary);
|
||
line-height: 32px;
|
||
}
|
||
.comment-info .user-text {
|
||
color: var(--text-comment-primary);
|
||
height: 32px;
|
||
word-break: keep-all;
|
||
overflow-y: hidden;
|
||
}
|
||
.comment-info .user-text:disabled {
|
||
background: none;
|
||
}
|
||
|
||
@media only screen and (min-width: 1440px) {
|
||
html {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 991px) {
|
||
html {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 767px) {
|
||
html {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 639px) {
|
||
html {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 479px) {
|
||
html {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 374px) {
|
||
html {
|
||
font-size: 9px;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 319px) {
|
||
html {
|
||
font-size: 8px;
|
||
}
|
||
} |