/* blog main style */
html {
box-sizing: border-box;
overflow-x: hidden;
}
body {
box-sizing: border-box;
/* transition: background-color 1s, color 1s; */
background-color: var(--system-bg);
color: var(--systemPrimary);
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, a, nav, form {
box-sizing: border-box;
}
ol, ul, li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.img-wrp {
width: 100%;
}
.img-wrp img {
max-width: 100%;
height: auto;
border: 0;
display: block;
}
button {
border: 0;
background: transparent;
cursor: pointer;
}
/* */
/* */
* {
padding: var(--systemSpacing-0);
margin: var(--systemSpacing-0);
font-family: 'Roboto Flex', sans-serif;
box-sizing: border-box;
font-variation-settings: "wght" 100, "wdth" 100, "opsz" 8;
}
/* */
/* scroll */
.scroll::-webkit-scrollbar {
display: none;
}
.scroll {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* */
/* root */
:root {
/**/
/* */
/* font size */
--d0-fontSize: 10rem; /* 160px */
--d1-fontSize: 7.5rem; /* 120px */
--d2-fontSize: 5rem; /* 80px */
--d3-fontSize: 3.75rem; /* 60px */
--h1-fontSize: 3rem; /* 48px */
--h2-fontSize: 2.625rem; /* 42px */
--h3-fontSize: 2.25rem; /* 36px */
--h4-fontSize: 1.875rem; /* 30px */
--h5-fontSize: 1.5rem; /* 24px */
--h6-fontSize: 1.25rem; /* 20px */
--ph-fontSize: 1.125rem; /* 18px */
--p-fontSize: 1rem; /* 16px */
--ps-fontSize: 0.95rem; /* 15.2px */
--ch-fontSize: 0.875rem; /* 14px */
--c1-fontSize: 0.75rem; /* 12px */
--c2-fontSize: 0.625rem; /* 10px */
/* */
/* colour system */
/* */
/* system colour */
/* --systemAccent: #1FA1FF;
--systemWhite: #FCFCFC;
--systemBlack: #0F0F0F;
--system-bg: #FFFFFF; */
--system-bg-secondary: #FAFAFA;
/* --systemBG: #F5F5F5; */
/* */
/* primary to quinary colour */
/* --systemPrimary: #000000EB;
--systemPrimary-onLight: #000000E0;
--systemPrimary-onDark: #000000F0;
--systemSecondary: #000000A3;
--systemSecondary-onLight: #0000009E;
--systemSecondary-onDark: #000000AD;
--systemTertiary: #0000007A;
--systemTertiary-onLight: #0000007A;
--systemTertiary-onDark: #0000007A;
--systemQuaternary: #0000002E;
--systemQuaternary-onLight: #00000029;
--systemQuaternary-onDark: #00000033;
--systemQuinary: #0000001A;
--systemQuinary-onLight: #0000001F;
--systemQuinary-onDark: #00000024; */
/* */
/* state disabled */
/* --disabled-txt: #3C3C3C4D;
--disabled-bg: #DCDCDC; */
/* */
/* background colour */
/* */
/* common */
--light-bg-default: #F5F5F7;
--onMaterial-bg:
linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.92) 100%), rgba(245, 245, 245, 0.18);
/*
background-blend-mode: color-dodge, normal;
backdrop-filter: blur(20px);
*/
/* */
/* accent */
/* --systemAccent-bg-filled: #1FA1FF;
--systemAccent-bg-filledTonal: #1FA1FF0D; */
/* */
/* primary */
/* --systemPrimary-bg-filled: #000000EB;
--systemPrimary-bg-filledTonal: #0000009E; */
/* */
/* action colour content part */
/* */
/* hover */
/* --systemAccent-hover: #1FA1FFC7;
--systemPrimary-hover: #000000B8;
--systemWhite-hover: #e0e0e0; */
/* */
/* press */
/* --systemAccent-hover: #1FA1FFC7;
--systemPrimary-hover: #0000006B; */
/* */
/* action colour background part */
/* */
/* hover */
/* */
/* common */
/* --light-bg-hover: #F0F0F0; */
/* */
/* accent */
/* --systemAccent-bg-filled-hover: #1FA1FFC7;
--systemAccent-bg-filledTonal-hover: #1FA1FF26;
--systemAccent-bg-borderless-hover: #1FA1FF17;
--systemAccent-bg-border-hover: #1FA1FF17; */
/* */
/* primary */
/* --systemPrimary-bg-filled-hover: #000000B8;
--systemPrimary-bg-filledTonal-hover: #000000C7;
--systemPrimary-bg-borderless-hover: #0000000D;
--systemPrimary-bg-border-hover: #000000; */
/* */
/* press */
/* */
/* common */
/* --light-bg-press: #E5E5E5; */
/* */
/* accent */
/* --systemAccent-bg-filled-press: #1FA1FF7A;
--systemAccent-bg-filledTonal-press: #1FA1FF3B;
--systemAccent-bg-borderless-press: #1FA1FF3B;
--systemAccent-bg-border-press: #1FA1FF3B; */
/* */
/* primary */
/* --systemPrimary-bg-filled-press: #0000008C;
--systemPrimary-bg-filledTonal-press: #000000E0;
--systemPrimary-bg-borderless-press: #0000003B;
--systemPrimary-bg-border-press: #0000003B; */
/* positive spacing */
--systemSpacing-0: 0rem;
--systemSpacing-1: 0.0625rem;
--systemSpacing-2: 0.125rem;
--systemSpacing-4: 0.25rem;
--systemSpacing-6: 0.375rem;
--systemSpacing-8: 0.5rem;
--systemSpacing-10: 0.625rem;
--systemSpacing-12: 0.75rem;
--systemSpacing-16: 1rem;
--systemSpacing-20: 1.25rem;
--systemSpacing-22: 1.375rem;
--systemSpacing-24: 1.5rem;
--systemSpacing-28: 1.75rem;
--systemSpacing-32: 2rem;
--systemSpacing-36: 2.25rem;
--systemSpacing-40: 2.5rem;
--systemSpacing-44: 2.75rem;
--systemSpacing-48: 3rem;
--systemSpacing-52: 3.25rem;
--systemSpacing-56: 3.5rem;
--systemSpacing-60: 3.75rem;
--systemSpacing-64: 4rem;
--systemSpacing-68: 4.25rem;
--systemSpacing-70: 4.375rem;
--systemSpacing-72: 4.5rem;
--systemSpacing-80: 5rem;
--systemSpacing-88: 5.5rem;
--systemSpacing-96: 6rem;
--systemSpacing-100: 6.25rem;
--systemSpacing-120: 7.5rem;
--systemSpacing-128: 8rem;
--systemSpacing-132: 8.25rem;
--systemSpacing-140: 8.75rem;
--systemSpacing-160: 10rem;
--systemSpacing-180: 11.25rem;
--systemSpacing-200: 12.5rem;
--systemSpacing-240: 15rem;
--systemSpacing-280: 17.5rem;
--systemSpacing-300: 18.75rem;
--systemSpacing-320: 20rem;
--systemSpacing-360: 22.5rem;
--systemSpacing-400: 25rem;
--systemSpacing-420: 26.25rem;
--systemSpacing-440: 27.5rem;
--systemSpacing-480: 30rem;
--systemSpacing-520: 32.5rem;
--systemSpacing-560: 35rem;
--systemSpacing-600: 37.5rem;
--systemSpacing-680: 42.5rem;
--systemSpacing-720: 45rem;
--systemSpacing-740: 46.25rem;
--systemSpacing-800: 50rem;
--systemSpacing-820: 51.25rem;
--systemSpacing-840: 52.5rem;
--systemSpacing-880: 55rem;
--systemSpacing-920: 57.5rem;
--systemSpacing-960: 60rem;
--systemSpacing-1000: 62.5rem;
--systemSpacing-1100: 68.75rem;
--systemSpacing-1152: 72rem;
--systemSpacing-1200: 75rem;
--systemSpacing-1294: 80.875rem;
--systemSpacing-1400: 87.5rem;
--systemSpacing-1520: 95rem;
--systemSpacing-1600: 100rem;
--systemSpacing-9999: 625rem;
/* negative spacing */
--negative-systemSpacing-1: -0.0625rem;
--negative-systemSpacing-2: -0.125rem;
--negative-systemSpacing-4: -0.25rem;
--negative-systemSpacing-6: -0.375rem;
--negative-systemSpacing-8: -0.5rem;
--negative-systemSpacing-10: -0.625rem;
--negative-systemSpacing-12: -0.75rem;
--negative-systemSpacing-16: -1rem;
--negative-systemSpacing-20: -1.25rem;
--negative-systemSpacing-24: -1.5rem;
--negative-systemSpacing-32: -2rem;
--negative-systemSpacing-40: -2.5rem;
--negative-systemSpacing-120: -7.5rem;
--negative-systemSpacing-160: -10rem;
/* dim */
--systemDim-10: rgba(0, 0, 0, 0.1);
--systemDim-15: rgba(0, 0, 0, 0.15);
--systemDim-20: rgba(0, 0, 0, 0.2);
--systemDim-25: rgba(0, 0, 0, 0.25);
--systemDim-30: rgba(0, 0, 0, 0.3);
--systemDim-35: rgba(0, 0, 0, 0.35);
--systemDim-40: rgba(0, 0, 0, 0.4);
--systemDim-45: rgba(0, 0, 0, 0.45);
--systemDim-50: rgba(0, 0, 0, 0.5);
--systemDim-55: rgba(0, 0, 0, 0.55);
--systemDim-60: rgba(0, 0, 0, 0.6);
--systemDim-65: rgba(0, 0, 0, 0.65);
--systemDim-70: rgba(0, 0, 0, 0.7);
--systemDim-75: rgba(0, 0, 0, 0.75);
--systemDim-80: rgba(0, 0, 0, 0.8);
--systemDim-85: rgba(0, 0, 0, 0.85);
--systemDim-90: rgba(0, 0, 0, 0.9);
--systemDim-95: rgba(0, 0, 0, 0.95);
--systemDim-100: rgba(0, 0, 0, 1.0);
/* hashtag colour */
--hashtag-bg: #f4f4f4;
}
.darkmode {
/* colour system */
/* system colour */
--systemAccent: #24A6FF;
--systemBlack: #FAFAFA;
--systemWhite: #0F0F0F;
--system-bg: #1F1F1F;
--system-bg-secondary: #1C1C1C;
--systemBG: #1c1c1c;
/* */
/* primary to quinary colour */
--systemPrimary: #FFFFFFD9;
--systemPrimary-onLight: #FFFFFFE0;
--systemPrimary-onDark: #FFFFFFD1;
--systemSecondary: #FFFFFF8C;
--systemSecondary-onLight: #FFFFFF94;
--systemSecondary-onDark: #FFFFFF85;
--systemTertiary: #FFFFFF40;
--systemTertiary-onLight: #FFFFFF40;
--systemTertiary-onDark: #FFFFFF40;
--systemQuaternary: #FFFFFF1A;
--systemQuaternary-onLight: #FFFFFF1F;
--systemQuaternary-onDark:#FFFFFF14;
--systemQuinary: #FFFFFF0D;
--systemQuinary-onLight: #FFFFFF12;
--systemQuinary-onDark: #FFFFFF0D;
/* state disabled */
--disabled-txt: #EBEBF54D;
--disabled-bg: #7676803D;
/* background colour */
/* common */
--light-bg-default: #252525;
--onMaterial-bg:
linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.92) 100%), rgba(245, 245, 245, 0.18);
/*
background-blend-mode: color-dodge, normal;
backdrop-filter: blur(20px);
*/
/* accent */
--systemAccent-bg-filled: #1FA1FFE0;
--systemAccent-bg-filledTonal: #1FA1FF73;
/* primary */
--systemPrimary-bg-filled: #FFFFFFD9;
--systemPrimary-bg-filledTonal: #FFFFFF17;
/* action colour content part */
/* hover */
--systemAccent-hover: #1FA1FFC7;
--systemPrimary-hover: #FFFFFF9E;
/* press */
--systemAccent-hover: #1FA1FF99;
--systemPrimary-hover: #FFFFFF6B;
/* action colour background part */
/* hover */
/* common */
--light-bg-hover: #323232;
/* accent */
--systemAccent-bg-filled-hover: #1FA1FFC7;
--systemAccent-bg-filledTonal-hover: #1FA1FF7A;
--systemAccent-bg-borderless-hover: #1FA1FF3D;
--systemAccent-bg-border-hover: #1FA1FF3D;
/* primary */
--systemPrimary-bg-filled-hover: #FFFFFFB8;
--systemPrimary-bg-filledTonal-hover: #FFFFFF24;
--systemPrimary-bg-borderless-hover: #FFFFFF24;
--systemPrimary-bg-border-hover: #FFFFFF24;
/* press */
/* common */
--light-bg-press: #1C1C1C;
/* accent */
--systemAccent-bg-filled-press: #1FA1FF99;
--systemAccent-bg-filledTonal-press: #1FA1FF1F;
--systemAccent-bg-borderless-press: #1FA1FF1F;
--systemAccent-bg-border-press: #1FA1FF1F;
/* primary */
--systemPrimary-bg-filled-press: #FFFFFF7A;
--systemPrimary-bg-filledTonal-press: #FFFFFF0A;
--systemPrimary-bg-borderless-press: #FFFFFF0A;
--systemPrimary-bg-border-press: #FFFFFF0A;
/* hashtag colour */
--hashtag-bg: #1f1f1f;
}
/* frequently used custom */
/* align items */
.t-a-c {
text-align: center;
}
/* */
/* margin */
.mrg-auto {
margin: auto;
}
.mrg-0-auto {
margin: 0 auto;
}
.mrg-auto-0 {
margin: auto 0;
}
/* margin custom */
.mrg-t-cstm {
margin-top: var(--systemSpacing-160);
}
.mrg-b-cstm {
margin-bottom: var(--systemSpacing-160);
}
.mrg-t-1 {
margin-top: var(--systemSpacing-16);
}
.mrg-t-2 {
margin-top: var(--systemSpacing-32);
}
.mrg-t-4 {
margin-top: var(--systemSpacing-64);
}
.mrg-t-5 {
margin-top: var(--systemSpacing-80);
}
.mrg-b-05 {
margin-bottom: var(--systemSpacing-8);
}
.mrg-b-1 {
margin-bottom: var(--systemSpacing-16);
}
.mrg-b-2 {
margin-bottom: var(--systemSpacing-32);
}
.mrg-b-4 {
margin-bottom: var(--systemSpacing-64);
}
.mrg-b-5 {
margin-bottom: var(--systemSpacing-80);
}
/* padding custom */
.pd-r-cstm {
padding-right: var(--systemSpacing-128);
}
.pd-l-cstm {
padding-left: var(--systemSpacing-128);
}
/* */
@media screen and (max-width: 960px) {
/* */
/* padding custom */
.pd-r-cstm {
padding-right: var(--systemSpacing-0);
}
.pd-l-cstm {
padding-left: var(--systemSpacing-0);
}
/* */
/* margin custom */
.mrg-t-cstm {
margin-top: var(--systemSpacing-80);
}
}
/* blog gen style*/
/* */
/* header */
.top__header-ctnr {
position: sticky;
top: var(--systemSpacing-0);
z-index: 9999;
}
.top__header-ctnr .top__header-wrp {
display: flex;
flex-direction: row;
align-items: center;
max-width: 72rem;
height: 4rem;
margin: 0rem auto;
justify-content: space-between;
text-decoration: none;
color: inherit;
}
.top__header-ctnr .top__header-wrp .svg__tl-wrp {
color: currentColor;
}
.top__header-ctnr .top__header-wrp .svg__tl-wrp .header__svg-wrp .header-svg {
fill: currentColor;
display: block;
}
.top__header-ctnr .top__header-wrp .search__svg-wrp .mg-svg {
display: block;
fill: currentColor;
cursor: pointer;
border-radius: 0.8rem;
}
.top__header-ctnr .top__header-wrp .search__svg-wrp:hover {
background-color: var(--fg);
border-radius: 0.8rem;
fill: var(--bg);
}
.top__header-ctnr .top__header-wrp .search__svg-wrp:hover .mg-svg {
fill: var(--bg);
}
.top__header-ctnr .top__header-wrp .search__svg-wrp:hover .close-svg {
fill: var(--bg);
}
.top__header-ctnr .top__header-wrp .search__svg-wrp .close-svg {
display: none;
fill: currentColor;
cursor: pointer;
border-radius: 0.8rem;
}
.top__header-ctnr .top__header-wrp .search__svg-wrp .close-svg:hover {
background-color: var(--systemPrimary-bg-borderless-hover);
}
.top__header-ctnr .top__header-wrp .notification-search-wrp {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--systemSpacing-4);
position: relative;
}
/* */
/* search-ctnr */
.search-ctnr {
position: fixed;
top: var(--systemSpacing-0);
left: var(--systemSpacing-0);
width: 100%;
/* background: linear-gradient(rgba(0, 0, 0, 0.92) 100%), rgba(245, 245, 245, 0.18); */
background-blend-mode: color-dodge, normal;
backdrop-filter: blur(var(--systemSpacing-64));
height: 100%;
z-index: 9990;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-ctnr.open {
opacity: 1;
visibility: visible;
}
/* */
/* dark mode */
.darkmode-wrp {
position: fixed;
bottom: 5%;
right: 5%;
background-color: var(--system-bg-secondary);
z-index: 9990;
width: var(--systemSpacing-64);
height: var(--systemSpacing-64);
border-radius: var(--systemSpacing-9999);
border: none;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.darkmode-wrp:hover {
opacity: 80%;
}
.darkmode-wrp .sns__icon-wrp {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.darkmode-wrp .sns__icon-wrp svg {
display: block;
fill: var(--systemSecondary-onLight);
justify-content: center;
align-items: center;
}
/* */
/* footer */
/* .footer-ctnr {
background-color: var(--system-bg-secondary);
} */
/* */
/* 1294px */
@media screen and (max-width: 1294px) {
.top__header-ctnr .top__header-wrp {
margin: var(--systemSpacing-0) var(--systemSpacing-32);
max-width: 100%;
}
}
/**/
/**/
@media (hover: hover) and (pointer: fine) {
a:hover {
color: inherit;
opacity: inherit;
}
button:hover {
color: inherit;
opacity: inherit;
}
div:hover {
color: inherit;
opacity: inherit;
}
svg:hover {
color: inherit;
opacity: inherit;
}
img:hover {
color: inherit;
opacity: inherit;
}
}
/* blog home style */
/* */
/* header */
.header-tl {
font-size: var(--h6-fontSize);
color: var(--systemPrimary);
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
/* */
/* article highlight */
.art__hl-tl-lg {
font-size: var(--d2-fontSize);
font-weight: 300;
line-height: 1.1;
color: var(--systemPrimary);
margin-bottom: var(--systemSpacing-16)
}
.art__hl-dt {
font-size: var(--ph-fontSize);
font-weight: 900;
color: var(--systemTertiary);
font-family: 'Roboto Mono', monospace;
}
.art__hl-dsc {
font-size: var(--ph-fontSize);
font-weight: 300;
color: var(--systemSecondary);
line-height: 1.5;
}
/* */
/* article general */
.art__gen-tl-md {
font-size: var(--h2-fontSize);
font-weight: 300;
color: var(--systemPrimary);
line-height: 1.1;
margin-bottom: var(--systemSpacing-16);
}
.art__gen-dt {
font-size: var(--p-fontSize);
font-weight: 400;
color: var(--systemTertiary);
font-family: 'Roboto Mono', monospace;
}
.art__gen-dsc {
font-size: var(--ph-fontSize);
font-weight: 300;
color: var(--systemSecondary);
line-height: 1.5;
}
.category-hashtag {
font-family: 'Roboto Mono', monospace;
text-transform: uppercase;
font-size: var(--c1-fontSize);
color: var(--systemSecondary);
background-color: var(--system-bg-secondary);
width: fit-content;
padding: var(--systemSpacing-4) var(--systemSpacing-4);
border-radius: var(--systemSpacing-4);
margin-bottom: var(--systemSpacing-32);
}
/* */
/* article container */
.art-ctnr {
max-width: var(--systemSpacing-1152);
margin: var(--systemSpacing-0) auto;
}
/* */
/* common */
.img-wrp {
width: 100%;
}
.img-wrp img {
max-width: 100%;
display: block;
border-radius: 1rem;
pointer-events: none;
user-select: none;
}
/* */
/* article highlight */
.art-ctnr .art__hl .art__hl-ctnr {
margin-top: 8rem;
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp {
display: flex;
flex-direction: row;
align-items: center;
transition: all 0.1s ease-in;
text-decoration: none;
border-radius: var(--systemSpacing-16);
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp:hover {
opacity: 80%;
}
/* image */
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp:hover .art__hl-img-wrp img {
border-radius: var(--systemSpacing-32);
transition: all 0.2s ease-in;
}
/* video */
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp .art__hl-video-wrp {
width: 100%;
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp .art__hl-video-wrp video {
border-radius: var(--systemSpacing-16);
max-width: 100%;
display: block;
pointer-events: none;
user-select: none;
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp:hover .art__hl-video-wrp video {
border-radius: var(--systemSpacing-32);
transition: all 0.2s ease-in;
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp .art__hl-txt-wrp {
display: flex;
flex-direction: column;
width: 100%;
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp .art__hl-txt-wrp .art__hl-dt-dsc-wrp {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-8);
}
/* */
/* article all container */
.art-ctnr .art__all-ctnr {
display: flex;
flex-flow: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10rem;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr {
width: 50%;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr .art__gen-wrp {
text-decoration: none;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr .art__gen-wrp:hover {
opacity: 80%;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr .art__gen-wrp:hover .art__gen-img-wrp img {
border-radius: 2rem;
transition: all 0.2s ease-in;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr .art__gen-wrp .art__gen-txt-wrp .art__gen-dt-dsc-wrp {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2.5rem;
}
/* */
/* media query */
/**/
/* 1294 */
@media screen and (max-width: 1294px) {
/* */
/* article container */
.art-ctnr {
max-width: 100%;
margin: 0rem 2rem;
}
.art-ctnr .art__hl .art__hl-ctnr {
margin-top: 5rem;
}
.art__hl-tl-lg {
font-size: var(--d3-fontSize);
}
/* */
/* article general */
.art-ctnr .art__all-ctnr .art__gen-ctnr .art__gen-wrp .art__gen-txt-wrp .art__gen-dt-dsc-wrp {
flex-direction: column;
}
}
/**/
/* 960 */
@media screen and (max-width: 960px) {
/* */
/* text guideline */
/* */
/* article highlight */
/* */
/* article highlight */
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-32);
}
.art-ctnr .art__hl .art__hl-ctnr .art__hl-wrp .art__hl-txt-wrp .art__hl-dt-dsc-wrp {
flex-direction: column;
}
/* */
/* article general */
.art-ctnr .art__all-ctnr {
gap: 1rem;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr {
width: 48%;
}
}
/**/
/* 600 */
@media screen and (max-width: 600px) {
/* */
/* text guideline */
/* */
/* article highlight */
.art__hl-tl-lg {
font-size: var(--h3-fontSize);
font-weight: 300;
margin-bottom: 1rem;
}
.art__hl-dt {
font-size: var(--p-fontSize);
}
.art__hl-dsc {
font-size: var(--p-fontSize);
}
/* */
/* article general */
.art__gen-tl-md {
font-size: var(--h3-fontSize);
font-weight: 300;
margin-bottom: 1rem;
}
.art__gen-dt {
font-size: var(--p-fontSize);
}
.art__gen-dsc {
font-size: var(--p-fontSize);
}
/* */
/* article container */
.art-ctnr {
max-width: 100%;
margin: 0rem 2rem;
}
/* */
/* article general */
.art-ctnr .art__all-ctnr .art__gen-ctnr {
width: 100%;
}
.art-ctnr .art__all-ctnr .art__gen-ctnr .art__gen-wrp .art__gen-txt-wrp .art__gen-dt-dsc-wrp {
flex-direction: column;
margin-bottom: 2rem;
}
}
/* news gen style */
.news-ctnr {
max-width: 72rem;
margin: 0rem auto;
}
.txt-bold {
font-variation-settings: "wght" 400, "wdth" 100, "opsz" 8;
}
/* clipboard link copied */
.clipboard-link-copied-ctnr {
display: none;
opacity: 0;
position: fixed;
width: fit-content;
top: var(--systemSpacing-80);
left: 50%;
transform: translate(-50%, -100%);
background-color: var(--light-bg-default);
border-radius: var(--systemSpacing-9999);
z-index: 9998;
box-shadow: var(--systemSpacing-0) var(--systemSpacing-4) var(--systemSpacing-16) var(--systemSpacing-0) var(--systemQuinary);
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.clipboard-link-copied-ctnr.show {
transform: translate(-50%, 0);
opacity: 1;
}
.clipboard-link-copied-ctnr.hide {
transform: translate(-50%, -100%);
opacity: 0;
}
.clipboard-link-copied-txt {
font-size: var(--p-fontSize);
font-weight: 500;
color: var(--systemPrimary);
padding: var(--systemSpacing-20) var(--systemSpacing-32);
text-align: center;
white-space: nowrap;
}
.art-category-hashtag {
font-family: 'Roboto Mono', monospace;
text-transform: uppercase;
font-size: var(--c1-fontSize);
color: var(--systemSecondary);
/* background-color: var(--system-bg-secondary); */
border: 0.1px solid currentColor;
width: fit-content;
padding: var(--systemSpacing-4) var(--systemSpacing-4);
border-radius: var(--systemSpacing-4);
margin-bottom: var(--systemSpacing-20);
}
.art-category-hashtag:hover {
color: var(--bg);
background-color: var(--fg);
}
/* news text */
.news__dt-sm {
color: var(--systemTertiary);
font-weight: 400;
margin-bottom: 1rem;
font-family: 'Roboto Mono', monospace;
}
.news__tl-lg {
font-size: var(--d2-fontSize);
font-weight: 300;
color: var(--systemPrimary);
line-height: 1.1;
}
.news__tl-lg:hover {
color: var(--systemPrimary);
}
.news__stl-lg {
font-size: var(--h2-fontSize);
color: var(--systemSecondary);
line-height: 1.2;
font-weight: 300;
width: 100%;
}
/* */
/* news info */
.news-ctnr .news__info-ctnr .news__info-all-wrp {
display: flex;
flex-direction: column;
}
.news-ctnr .news__info-ctnr {
margin: 8rem 0rem 5rem 0rem;
}
/* */
/* date and title */
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__dt-tl-wrp {
margin-bottom: 4rem;
}
/* */
/* subtitle and sns */
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp {
display: flex;
flex-direction: row;
margin-bottom: 2rem;
gap: 4rem;
transition: all 0.1s ease-in-out;
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp {
display: flex;
flex-direction: column;
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp {
display: flex;
flex-direction: row;
align-items: center;
border: var(--systemSpacing-1) solid currentColor;
padding: 0.8rem 1.6rem;
text-decoration: none;
color: inherit;
border-radius: var(--systemSpacing-16);
margin-bottom: 0.5rem;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp:hover {
border-radius: 4rem;
background-color: var(--fg);
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp .sns__icon-wrp {
margin-right: 0.5rem;
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp .sns__icon-wrp svg {
display: block;
fill: var(--fg);
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp .sns-name {
font-variation-settings: "wght" 400, "wdth" 100, "opsz" 8;
font-size: var(--p-fontSize);
white-space: nowrap;
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp:hover .sns__icon-wrp svg {
fill: var(--bg);
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp .sns-wrp:hover .sns-name {
color: var(--bg);
}
/* */
/* writer */
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__writer-wrp {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__writer-wrp .writer__img-wrp {
width: 3rem;
border-radius: var(--systemSpacing-9999);
border: var(--systemSpacing-1) solid var(--fg);
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__writer-wrp .writer__img-wrp img {
max-width: 100%;
display: block;
border-radius: 50%;
pointer-events: none;
user-select: none;
}
.writer-info {
color: var(--fg);
font-size: var(--h6-fontSize);
}
.writer-name {
font-variation-settings: "wght" 500, "wdth" 100, "opsz" 8;
}
.writer-role {
font-variation-settings: "wght" 300, "wdth" 100, "opsz" 8;
}
/* */
/* news dsc */
.news-ctnr .news__dsc-all-ctnr .news__col-all-wrp .news__col-wrp {
align-items: center;
/* overflow: hidden; */
}
.news-ctnr .news__dsc-all-ctnr .news__col-all-wrp .news__col-wrp .news__hl-img-wrp {
width: 100%;
margin-bottom: var(--systemSpacing-48);
}
.news-ctnr .news__dsc-all-ctnr .news__col-all-wrp .news__col-wrp .news__hl-img-wrp img {
max-width: 100%;
display: block;
border-radius: var(--systemSpacing-32);
pointer-events: none;
user-select: none;
}
.col-img-wrp {
width: 100%;
}
.col-img-wrp img {
max-width: 100%;
display: block;
pointer-events: none;
user-select: none;
}
/* video */
.news-ctnr .news__dsc-all-ctnr .news__col-all-wrp .news__col-wrp .news__hl-video-wrp {
width: 100%;
margin-bottom: var(--systemSpacing-48);
border-radius: var(--systemSpacing-32);
}
.news-ctnr .news__dsc-all-ctnr .news__col-all-wrp .news__col-wrp .news__hl-video-wrp video {
max-width: 100%;
display: block;
border-radius: var(--systemSpacing-32);
pointer-events: none;
user-select: none;
}
/* */
/* text */
.col__dsc-wrp {
padding: var(--systemSpacing-0) var(--systemSpacing-128);
margin: var(--systemSpacing-16) var(--systemSpacing-0) var(--systemSpacing-64) var(--systemSpacing-0);
overflow: hidden;
}
.col__tl-lg {
font-size: var(--h2-fontSize);
font-weight: 300;
color: var(--systemPrimary);
margin: var(--systemSpacing-16) var(--systemSpacing-0);
}
.col__stl-md {
font-size: var(--h4-fontSize);
font-weight: 300;
color: var(--systemPrimary);
margin: var(--systemSpacing-32) var(--systemSpacing-0) var(--systemSpacing-16) var(--systemSpacing-0);
line-height: 1.4;
}
.col-dsc {
color: var(--systemPrimary);
font-size: var(--h5-fontSize);
font-weight: 200;
line-height: 1.6;
}
/* */
/* image wrap */
.news__img-wrp {
width: 100%;
padding: var(--systemSpacing-0) var(--systemSpacing-128);
}
.news__img-wrp img {
max-width: 100%;
display: block;
pointer-events: none;
user-select: none;
}
/* */
/* video wrap */
.news__video-wrp {
width: 100%;
padding: var(--systemSpacing-0) var(--systemSpacing-128);
}
.news__video-wrp video {
max-width: 100%;
display: block;
pointer-events: none;
user-select: none;
}
/* */
/* italic text */
.txt__bold-italic {
color: var(--systemTertiary);
font-style: oblique;
line-height: 1.4;
font-size: var(--p-fontSize);
}
.txt__bold-italic:hover {
color: var(--systemTertiary);
}
.txt__bold-italic .caption-link {
color: var(--systemTertiary);
text-decoration: underline;
font-style: oblique;
line-height: 1.4;
font-size: var(--p-fontSize);
transition: all 0.1s ease-in-out;
}
.txt__bold-italic .caption-link:hover {
text-decoration: none;
}
/* */
/* service link */
.col__dsc-wrp .col-dsc .service-link {
text-decoration: underline;
color: var(--systemPrimary);
font-size: var(--h5-fontSize);
line-height: 1.6;
transition: all 0.1s ease-in-out;
}
.col__dsc-wrp .col-dsc .service-link:hover {
text-decoration: none;
}
/* */
/* column stl link */
.col__dsc-wrp .col__stl-md .col__stl-link {
text-decoration: underline;
color: var(--systemPrimary);
font-size: var(--h4-fontSize);
line-height: 1.4;
cursor: pointer;
transition: all 0.1s ease-in-out;
/* text-decoration-thickness: 0.12rem; */
}
.col__dsc-wrp .col__stl-md .col__stl-link:hover {
text-decoration: none;
}
/* */
/* scroll button */
.col__dsc-wrp .col-dsc .scrollBtn {
text-decoration: underline;
color: var(--systemPrimary);
font-size: var(--h5-fontSize);
line-height: 1.6;
transition: all 0.1s ease-in-out;
cursor: pointer;
/* text-decoration-thickness: 0.12rem; */
}
.col__dsc-wrp .col-dsc .scrollBtn:hover {
text-decoration: none;
}
/* */
/* upnext */
/* grid */
/* .systemGrid-4x2 {
display: grid;
grid-gap: var(--systemSpacing-16);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: row;
grid-template-columns: auto;
grid-template-rows: auto;
} */
/* */
.news-ctnr .upnext-ctnr {
margin: var(--systemSpacing-96) var(--systemSpacing-0) var(--systemSpacing-64) var(--systemSpacing-0);
}
.news-ctnr .upnext-ctnr .upnext__all-wrp {
padding: var(--systemSpacing-0) var(--systemSpacing-128);
}
.news-ctnr .upnext-ctnr .upnext__all-wrp .upnext__art-all-wrp {
display: grid;
grid-column-gap: var(--systemSpacing-16);
grid-row-gap: var(--systemSpacing-40);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: row;
/* grid-template-columns: auto;
grid-template-rows: auto; */
}
#upNextArt-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
#upNextArt-2 {
grid-column: 3 / 5;
grid-row: 1 / 2;
}
#upNextArt-3 {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
.news-ctnr .upnext-ctnr .upnext__all-wrp .upnext__art-all-wrp .upnext__art-wrp {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-12);
text-decoration: none;
transition: all 0.1s ease-in-out;
color: inherit;
}
.news-ctnr .upnext-ctnr .upnext__all-wrp .upnext__all-wrp .upnext__art-all-wrp .upnext__art-wrp:hover {
opacity: 80%;
}
.upnext__txt-wrp {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-8);
}
.upnext__tl-lg {
font-size: var(--h2-fontSize);
color: var(--systemPrimary);
font-weight: 300;
margin-bottom: var(--systemSpacing-40);
}
/* */
/* upnext article text */
.upnext__dt-md {
font-size: var(--p-fontSize);
color: var(--systemTertiary);
text-decoration: none;
font-weight: 400;
font-family: 'Roboto Mono', monospace;
}
.upnext__art-tl-sm {
font-size: var(--h6-fontSize);
color: var(--systemPrimary);
font-weight: 300;
}
.upnext__art-img-wrp {
width: 100%;
}
.upnext__art-img-wrp img {
max-width: 100%;
display: block;
border-radius: var(--systemSpacing-16);
pointer-events: none;
user-select: none;
}
/* */
/* media query */
/* */
/* 1294px */
@media screen and (max-width: 1294px) {
/* */
/* news container */
.news-ctnr {
max-width: 100%;
margin: var(--systemSpacing-0) var(--systemSpacing-48);
}
}
/* */
/* 960px */
@media screen and (max-width: 960px) {
.news__tl-lg {
font-size: var(--d3-fontSize);
}
/* */
/* news info */
/* */
/* text */
.news__stl-lg {
width: 100%;
}
/* */
/* */
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__dt-tl-wrp {
margin-bottom: var(--systemSpacing-32);
}
/* */
/* subtitle news */
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp {
flex-direction: column;
gap: var(--systemSpacing-32);
}
.news-ctnr .news__info-ctnr .news__info-all-wrp .news__stl-sns-wrp .sns__all-wrp {
display: flex;
flex-direction: row;
gap: var(--systemSpacing-8);
}
/* */
/* column description */
/* */
/* text */
.col__dsc-wrp {
padding: var(--systemSpacing-0) var(--systemSpacing-32);
margin: var(--systemSpacing-16) var(--systemSpacing-0) var(--systemSpacing-48) var(--systemSpacing-0);
}
.news__img-wrp {
padding: var(--systemSpacing-0) var(--systemSpacing-32);
}
.news__video-wrp {
padding: var(--systemSpacing-0) var(--systemSpacing-32);
}
/* */
/* upnext */
.news-ctnr .upnext-ctnr .upnext__all-wrp {
padding: var(--systemSpacing-0) var(--systemSpacing-32);
}
}
/* */
/* 600px */
@media screen and (max-width: 600px) {
/* */
/* news container */
.news-ctnr {
max-width: 100%;
margin: var(--systemSpacing-0) var(--systemSpacing-32);
}
/* */
/* news info */
/* */
/* text */
.news__tl-lg {
font-size: var(--h2-fontSize);
}
.news__stl-lg {
font-size: var(--h5-fontSize);
}
/* */
/* news info container */
.news-ctnr .news__info-ctnr {
margin: var(--systemSpacing-64) var(--systemSpacing-0);
}
/* */
/* news date and title */
/* */
/* column description */
/* */
/* text */
.col__tl-lg {
font-size: var(--h3-fontSize);
}
.col__stl-md {
font-size: var(--h5-fontSize);
margin: var(--systemSpacing-16) var(--systemSpacing-0);
}
.col-dsc {
font-size: var(--ph-fontSize);
}
.col__dsc-wrp .col__stl-md .col__stl-link {
font-size: var(--h5-fontSize);
}
.col__dsc-wrp .col-dsc .scrollBtn {
font-size: var(--ph-fontSize);
}
/* */
/* */
.news__img-wrp {
padding: var(--systemSpacing-0);
}
.news__video-wrp {
padding: var(--systemSpacing-0);
}
.col__dsc-wrp {
padding: var(--systemSpacing-0);
}
/* */
/* servic link */
.col__dsc-wrp .col-dsc .service-link {
font-size: var(--ph-fontSize);
}
/* */
/* upnext */
/* */
/* text */
.upnext__tl-lg {
font-size: var(--h3-fontSize);
margin-bottom: var(--systemSpacing-32);
}
.news-ctnr .upnext-ctnr .upnext__all-wrp .upnext__art-all-wrp {
display: grid;
grid-gap: var(--systemSpacing-40);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: row;
}
#upNextArt-1 {
grid-column: 1 / 5;
grid-row: 1 / 2;
}
#upNextArt-2 {
grid-column: 1 / 5;
grid-row: 2 / 3;
}
#upNextArt-3 {
grid-column: 1 / 5;
grid-row: 3 / 4;
}
/* */
/* */
.news-ctnr .upnext-ctnr .upnext__all-wrp {
padding: var(--systemSpacing-0);
}
}
/* footer */
/* */
/* text */
.footer-link {
font-size: var(--ps-fontSize);
color: var(--systemSecondary);
font-weight: 300;
text-decoration: none;
transition: all 0.1s ease-in-out;
text-decoration: underline;
}
.footer__dsc-sm {
font-size: var(--ps-fontSize);
color: var(--systemSecondary);
font-variation-settings: "wght" 300, "wdth" 100, "opsz" 8;
line-height: 1.4;
}
.footer__eg-all-wrp .footer__info-wrp .footer_info {
color: var(--systemSecondary);
font-size: var(--ps-fontSize);
font-weight: 300;
text-decoration: underline;
transition: all 0.1s ease-in-out;
}
.footer-ctnr .footer__all-wrp {
display: flex;
flex-direction: column;
max-width: 72rem;
margin: 0rem auto;
padding: 4rem 0rem 1rem 0rem;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp {
display: flex;
flex-direction: row;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__icon-wrp {
margin-right: 3.5rem;
width: fit-content;
color: currentColor;
text-decoration: none;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__icon-wrp .footer__home-svg {
display: block;
fill: currentColor;
text-decoration: none;
transition: all 0.1s ease-in-out;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__txt-sns-wrp {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 40rem;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__txt-sns-wrp .footer__sns-wrp {
display: flex;
flex-direction: row;
gap: 2rem;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__txt-sns-wrp .footer__sns-wrp .footer-link:hover {
text-decoration: none;
color: var(--systemSecondary);
}
/* */
/* footer border */
.footer-ctnr .footer__all-wrp .footer-brdr {
border: solid 0.01rem var(--systemQuinary);
margin: 2rem 0rem;
}
/* */
/* secondary footer */
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp {
display: flex;
flex-direction: row;
align-items: center;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__eg-icon-wrp {
width: fit-content;
margin-right: 6rem;
color: currentColor;
text-decoration: none;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__eg-icon-wrp .footer-logo-svg {
fill: currentColor;
display: block;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__info-wrp {
display: flex;
flex-direction: row;
gap: 2rem;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__info-wrp .footer_info:hover {
text-decoration: none;
}
/* */
/* media query */
@media screen and (max-width: 1294px) {
.footer-ctnr .footer__all-wrp {
margin: 0rem 2rem;
}
}
@media screen and (max-width: 960px) {
.footer-ctnr .footer__all-wrp {
padding: 2rem 0rem 2rem 0rem;
}
/* */
/* */
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp {
display: flex;
flex-direction: column;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__icon-wrp {
margin-bottom: 1rem;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__txt-sns-wrp {
max-width: 100%;
}
.footer-ctnr .footer__all-wrp .footer__icon-txt-wrp .footer__txt-sns-wrp .footer__sns-wrp {
gap: 1rem;
}
/* */
/* secondary footer*/
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp {
display: flex;
flex-direction: column;
align-items: normal;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__eg-icon-wrp {
margin-right: 0rem;
margin-bottom: 1rem;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__info-wrp {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-ctnr .footer__all-wrp .footer__eg-all-wrp .footer__info-wrp .footer_info:hover {
text-decoration: none;
}
}
/* search */
/**/
.search-section-ctnr {
display:flex;
flex-direction: column;
justify-content: space-between;
gap: var(--systemSpacing-80);
width: 100%;
max-width: var(--systemSpacing-1152);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.search-input-hashtag-all-wrp {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-20);
}
.search-hashtag-all-wrp {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: var(--systemSpacing-8);
}
.hashtag-name {
padding: var(--systemSpacing-4) var(--systemSpacing-8);
width: fit-content;
border-radius: var(--systemSpacing-8);
font-size: var(--ch-fontSize);
color: var(--systemPrimary);
border: 0.1px solid currentColor;
font-family: 'Roboto Mono', monospace;
}
.hashtag-name:hover {
opacity: 80%;
}
.search__svg-input-wrp {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--systemSpacing-4);
}
.search__svg-input-wrp .search-input {
font-size: var(--h6-fontSize);
color: var(--systemPrimary);
border: none;
outline: none;
background-color: transparent;
border-bottom: solid var(--systemSpacing-1) var(--systemPrimary);
width: 100%;
padding: var(--systemSpacing-8) var(--systemSpacing-0);
}
.search__svg-input-wrp .search-input::placeholder {
color: var(--systemTertiary);
}
.search__svg-input-wrp .mg__svg-wrp .inbox__mg-svg {
fill: currentColor;
display: block;
scale: 1.1;
}
.search__svg-input-wrp .txt-del__svg-wrp .inbox__txt-del-svg:hover {
fill: var(--systemPrimary-hover);
}
.search__result-ctnr {
width: 100%;
}
.search__result-ctnr .search__result-all-wrp {
display: flex;
flex-direction: column;
}
.search__result-ctnr .search__result-all-wrp .result-tl {
font-size: var(--h4-fontSize);
color: var(--systemTertiary);
font-weight: 300;
margin-bottom: var(--systemSpacing-12);
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp {
display: flex;
flex-direction: column;
height: var(--systemSpacing-320);
overflow-y: scroll;
gap: var(--systemSpacing-8);
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp:hover {
text-decoration: none;
color: var(--systemPrimary-hover);
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp:hover .result-data {
text-decoration: none;
color: var(--systemPrimary-hover);
transition: all 0.1s ease-in-out;
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result-data {
color: var(--systemPrimary);
font-size: var(--h2-fontSize);
text-decoration: underline;
text-decoration-thickness: 0.15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 70%;
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result__data-dt {
color: var(--systemSecondary);
font-size: var(--h4-fontSize);
margin-left: 2rem;
}
.search__result-ctnr .search__result-recommend .recommend__all-wrp .recommend-tl {
font-size: var(--h2-fontSize);
color: var(--systemPrimary);
}
/* */
/* media query */
@media screen and (max-width: 1294px) {
/* */
/* search */
.search-section-ctnr {
display:flex;
flex-direction: column;
justify-content: space-between;
gap: var(--systemSpacing-80);
max-width: calc(100% - var(--systemSpacing-64));
}
/* .search__result-ctnr .search__result-all-wrp {
max-width: 100%;
} */
/* .search__svg-input-wrp .search-input {
font-size: var(--h2-fontSize);
} */
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result-data {
font-size: var(--h3-fontSize);
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result__data-dt {
font-size: var(--h5-fontSize);
}
}
/* */
/* 960px */
@media screen and (max-width: 960px) {
/* */
/* search */
.search__svg-input-wrp .search-input {
font-size: var(--h6-fontSize);
}
.search__result-ctnr .search__result-all-wrp .result-tl {
font-size: var(--h5-fontSize);
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result-data {
font-size: var(--h4-fontSize);
width: 60%;
}
.search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result__data-dt {
font-size: var(--h6-fontSize);
}
.search__svg-input-wrp .mg__svg-wrp .inbox__mg-svg {
scale: 1.1;
}
.search__svg-input-wrp .txt-del__svg-wrp .inbox__txt-del-svg {
scale: 1.5;
}
}
/* */
/* 600px */
@media screen and (max-width: 600px) {
/* */
/* search */
.search-ctnr .search__svg-input-wrp .search-input {
font-size: var(--h6-fontSize);
}
.search-ctnr .search__svg-input-wrp .txt-del__svg-wrp {
display: none;
}
.search-ctnr .search__result-ctnr .search__result-all-wrp .result__all-data-wrp {
height: var(--systemSpacing-160)
}
.search-ctnr .search__result-ctnr .search__result-all-wrp .result-tl {
font-size: var(--h6-fontSize);
}
.search-ctnr .search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result-data {
width: 100%;
font-size: var(--h6-fontSize);
}
.search-ctnr .search__result-ctnr .search__result-all-wrp .result__all-data-wrp .result__data-wrp .result__data-dt {
display: none;
font-size: var(--ph-fontSize);
}
.hashtag-name {
font-size: var(--c1-fontSize);
}
}
.notification-svg {
fill: currentColor;
display: block;
transition: all 0.1s ease-in-out;
cursor: pointer;
border-radius: var(--systemSpacing-12);
}
.notification-svg:hover {
background-color: currentColor;
}
.notification-svg:hover {
fill: var(--bg);
background-color: currentColor;
}
.notification-centre-ctnr {
position: absolute;
background-color: var(--bg);
top: var(--systemSpacing-40);
right: var(--systemSpacing-0);
border-radius: var(--systemSpacing-20);
width: var(--systemSpacing-400);
height: var(--systemSpacing-400);
max-height: 0;
overflow: scroll;
opacity: 0;
transition: max-height 0.35s ease, opacity 0.25s ease;
box-shadow: var(--systemSpacing-0) var(--systemSpacing-4) var(--systemSpacing-16) var(--systemSpacing-0) rgba(0, 0, 0, 0.12);
overscroll-behavior: none;
}
.notification-centre-ctnr.active {
max-height: var(--systemSpacing-600);
opacity: 1;
}
.notification-centre-all-wrp {
display: flex;
flex-direction: column;
padding: var(--systemSpacing-20);
}
.notification-section-tl {
font-size: var(--p-fontSize);
color: var(--systemPrimary);
margin-bottom: var(--systemSpacing-32);
font-family: 'Roboto Flex', sans-serif;
font-variation-settings: "wght" 600, "wdth" 100, "opsz" 8;
}
.notification-ctnr {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-28);
border-radius: var(--systemSpacing-12);
}
.notification-wrp {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: var(--systemSpacing-8);
margin: var(--negative-systemSpacing-12);
padding: var(--systemSpacing-8);
border-radius: var(--systemSpacing-16);
color: var(--fg);
}
.notification-wrp:hover {
background-color: var(--fg);
color: var(--bg);
}
.notification-img-txt-wrp {
display: flex;
flex-direction: row;
gap: var(--systemSpacing-12);
}
.notification-img-wrp {
width: var(--systemSpacing-48);
height: var(--systemSpacing-48);
}
.notification-img-wrp img {
display: block;
max-width: 100%;
border-radius: var(--systemSpacing-12);
}
.notification-txt-wrp {
display: flex;
flex-direction: column;
gap: var(--systemSpacing-2);
}
.notification-tl {
font-size: var(--p-fontSize);
color: currentColor;
font-family: 'Roboto Flex', sans-serif;
font-variation-settings: "wght" 400, "wdth" 100, "opsz" 8;
}
.notification-dsc {
font-size: var(--ch-fontSize);
color: currentColor;
font-family: 'Roboto Flex', sans-serif;
font-variation-settings: "wght" 100, "wdth" 100, "opsz" 8;
}
.notification-date {
font-size: var(--c1-fontSize);
color: currentColor;
white-space: nowrap;
font-family: 'Roboto Flex', sans-serif;
font-variation-settings: "wght" 200, "wdth" 100, "opsz" 8;
}
@media screen and (max-width: 450px) {
.notification-centre-ctnr {
width: var(--systemSpacing-320);
height: var(--systemSpacing-320);
}
.notification-wrp {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: var(--systemSpacing-8);
margin: var(--negative-systemSpacing-12);
padding: var(--systemSpacing-8);
border-radius: var(--systemSpacing-16);
}
.notification-tl {
font-size: var(--ch-fontSize);
color: var(--systemPrimary);
}
.notification-dsc {
font-size: var(--c1-fontSize);
color: var(--systemSecondary);
}
}