@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */
#skipToContent a {z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden;}
#skipToContent a:focus,
#skipToContent a:active {width:200px; height:50px; background:#21272e; color:#fff; font-size:14px; font-weight:bold; text-align:center; text-decoration:none; line-height:50px;}
.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.contain {width:100%; max-width:1596px; padding-left:30px; padding-right:30px; margin:0 auto;}
.main-section .contain,
#footer .contain {max-width:1780px; position: relative;}
#container {overflow:hidden;}
.btn-more {display:inline-flex; align-items:center; flex-shrink:0; gap:24px; padding:20px 30px; border:1px solid #fff; border-radius:99px; color:#fff; font-weight:500; line-height:1.5em; letter-spacing:-0.03em; transition:.2s;}
.btn-more img {width:16px; height:16px; flex-shrink:0;}
.btn-more:hover {background:rgba(255,255,255,.15);}
.btn-more--dark {border-color:var(--color-title); background:#fff; color:var(--color-title);}
.btn-more--dark:hover {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.btn-more--dark img {transition:filter .2s;}
.btn-more--dark:hover img {filter:brightness(0) invert(1);}
.btn-more--wide {padding:20px 36px; border-color:rgba(255,255,255,.6); font-weight:600; line-height:1.4em; white-space:nowrap;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:100px; background:transparent; transition:.2s; z-index:100; overflow:visible;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width:1780px; width:100%; height:100%; z-index:10;}
.sitelogo {position:relative; z-index:2; flex-shrink:0;}
.sitelogo a {display:block; width:110px;}
#gnb {display:flex; align-items:center; justify-content:center; flex:1; min-width:0; padding:0 40px;}
#gnb > ul {display:flex; align-items:center; justify-content:center; gap:100px;}
#gnb > ul > li {position:relative;}
#gnb > ul > li > a {display:block; color:#fff; font-size:var(--font-size20); font-weight:600; line-height:1.4em; letter-spacing:-0.03em; white-space:nowrap;}
#gnb > ul > li:hover::after {content:""; position:absolute; left:0; right:0; top:33px; height:3px; background:var(--color-primary);}
#gnb .submenu {position:absolute; top:100%; left:50%; transform:translateX(-50%); width:180px; padding-top:36px; display:none !important; z-index:20;}
#gnb > ul > li:hover .submenu {display:block !important;}
#gnb .submenu > ul {display:flex; flex-direction:column; align-items:center; gap:22px; padding:30px 20px; background:var(--color-primary); border-radius:0 0 8px 8px;}
#gnb .submenu > ul > li > a {display:block; width:100%; color:rgba(255,255,255,.7); font-size:var(--font-size18); font-weight:500; line-height:1.4em; letter-spacing:-0.03em; text-align:center; white-space:nowrap;}
#gnb .submenu > ul > li > a:hover,
#gnb .submenu > ul > li.active > a {color:#fff;}
.submenu-bg {display:none; position:fixed; top:100px; left:0; right:0; bottom:0; height:auto !important; background:rgba(0,0,0,.5); z-index:1; pointer-events:none;}
#header.hover .submenu-bg {display:block;}
.pull-right {display:flex; align-items:center; gap:40px; z-index:2;}
.hd-btns {display:flex; align-items:center; gap:6px;}
.hd-btn {display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:8px; color:#fff; font-size:14px; font-weight:600; line-height:1.4em; letter-spacing:-0.03em; white-space:nowrap;}
.hd-btn-outline {border:1px solid rgba(255,255,255,.5);}
.hd-btn-primary {background:var(--color-sub);}
.hd-btn-icon {flex-shrink:0; width:16px; height:16px;}
.language {position:relative; display:inline-block;}
.language .toggle-button {display:flex; flex-direction:column; align-items:center; gap:4px; width:24px; height:45px; padding:0; background:transparent; border:0; color:#fff;}
.language .toggle-button .ico {display:block; width:24px; height:24px; margin:0; background:url(/images/all/icon-globe.svg) no-repeat center / contain;}
.language .toggle-button .txt {margin:0; color:#fff; font-size:12px; font-weight:600; line-height:1.4em; letter-spacing:-0.03em; text-align:center; white-space:nowrap;}
.language .toggle-button .chevron {display:none;}
#header.is-scrolled .language .toggle-button .txt,
#header.hover .language .toggle-button .txt {color:var(--color-title);}
#header.is-scrolled .language .toggle-button .ico,
#header.hover .language .toggle-button .ico {filter:brightness(0) saturate(100%);}
.language .toggle-layer {display:none; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); min-width:56px; text-align:center; z-index:20;}
.language .toggle-layer ul {padding:10px; background:#fff; box-shadow:0 0 8px 0 rgba(0,0,0,.08);}
.language .toggle-layer a {display:block; width:100%; color:#999; font-size:12px; font-weight:400; line-height:1.7em; letter-spacing:-0.03em;}
.language .toggle-layer li.active a,
.language .toggle-layer a:hover {color:var(--color-primary); font-weight:600;}
.btn-m-menu {display:none;}
#header.is-scrolled,
#header.hover {background:#fff;}
#header.is-scrolled #gnb > ul > li > a,
#header.hover #gnb > ul > li > a {color:var(--color-title);}
#header.is-scrolled .hd-btn-outline,
#header.hover .hd-btn-outline {color:var(--color-title); border-color:rgba(18,18,18,.3);}
#header.is-scrolled .hd-btn-outline .hd-btn-icon,
#header.hover .hd-btn-outline .hd-btn-icon {filter:brightness(0) saturate(100%);}
/* for mobile */
.btn-m-menu {display:block; width:32px; height:24px; }
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#fff;}
#header.active .btn-m-menu span {background:#000;}
#header.is-scrolled .btn-m-menu span, 
#header.hover .btn-m-menu span {background:#000;}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:30px; width:24px; height:24px; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#fff;}
#sub:not(:has(.sub-visual)) .btn-m-menu span {background:#242424}
#header.active .btn-m-menu span {background:#242424;}

.mobile-navigation {display:block;position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {max-height:60px; padding: 19px 20px;}
.mobile-navigation .home a {display: block;  color: #2c2c2c; font-size:20px; font-weight: 700; line-height: 1.3em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:block; padding:13px 20px; color:#242424; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a div {display:flex; align-items:flex-end; gap:5px;}
.mobile-navigation .nav-menu>ul>li>a .en {order:2;  font-size:.8em; font-weight:500; line-height:1.3em; opacity:.4;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:12px; height:12px; border-right:2px solid #454545; border-bottom:2px solid #454545;}
.mobile-navigation .nav-menu>ul>li.active>a:after  {transform:translateY(-35%) rotate(-135deg); border-color:var(--color-primary);}
.mobile-navigation .nav-menu .submenu {display:none; background:var(--color-primary); padding: 10px 0;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:flex; align-items:flex-end; gap:5px; padding:8px 20px; color:#fff; font-size:16px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu > ul > li > a .bar {display:none;}
.mobile-navigation .nav-menu .submenu > ul > li > a .en {order:2; font-size:.8em; line-height:1.3em; font-weight:400; opacity:.4;}
.mobile-navigation .close {position:absolute; top:15px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main visual */
.main-visual {position:relative; width:100%; height:100vh; overflow:hidden;}
.main-visual .slick-slide {position:relative; height:100vh; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item:after {content:""; position:absolute; inset:0; background:rgba(0,0,0,.2); pointer-events:none;}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; transform:translate(-50%,-50%);}
.main-visual .caption {position:absolute; left:0; bottom:120px; width:100%; z-index:2; text-align:left;}
.main-visual .caption .contain {max-width:1780px;}
.main-visual .caption .txt {width:100%; max-width:800px; transform:translateX(-50px); opacity:0; transition:opacity 0s 2s, transform 0s 2s; color:#fff;}
.main-visual .items .slick-active .caption .txt {transform:translateX(0); opacity:1; transition:opacity 2s, transform 1s; transition-delay:.6s;}
.main-visual .items .reset-animation .caption .txt {transform:translateX(-50px); opacity:0; transition:all 0s;}
.main-visual .caption h2 {margin-bottom:30px; color:#fff; font-size:64px; font-weight:500; line-height:1.1em; letter-spacing:-0.03em;}
.main-visual .caption p {color:#fff; font-size:var(--font-size20); font-weight:400; line-height:1.4em; letter-spacing:-0.03em;}
.main-visual .slick-dots {position:absolute; right:100px; bottom:120px; left:auto; width:auto; display:flex; align-items:center; gap:8px; padding:10px 16px; background:rgba(0,0,0,.25); border-radius:99px; z-index:5; line-height:0; font-size:0;}
.main-visual .slick-dots li {display:flex; align-items:center; width:auto; height:8px; margin:0; line-height:0; font-size:0;}
.main-visual .slick-dots li button {display:block; width:8px; height:8px; padding:0; background:rgba(255,255,255,.5); border:none; border-radius:99px; overflow:hidden; line-height:0; font-size:0; text-indent:0; color:transparent; transition:background .25s, width .25s;}
.main-visual .slick-dots li button:before {display:none;}
.main-visual .slick-dots li.slick-active button {width:24px; height:8px; background:#fff;}
.main-visual .slick-arrow {position:absolute; top:50%; z-index:5; width:56px; height:56px; transform:translateY(-50%); text-indent:-9999em;}

/* main about */
.sec-about {position:relative; width:100%; display:grid; grid-template-columns:1fr 1fr; min-height:1014px; background:#fff;}
.sec-about__rotate {position:absolute; right:30px; top:-200px; width:785px; height:785px; animation:rotate-slow 20s linear infinite; pointer-events:none; z-index:0; opacity:.5;}
.sec-about__rotate img {width:100%; height:100%; object-fit:contain;}
@keyframes rotate-slow {from {transform:rotate(0deg);} to {transform:rotate(360deg);}}
.sec-about__image {overflow:hidden; border-radius:0 0 240px 0;}
.sec-about__image img {width:100%; height:100%; object-fit:cover; display:block;}
.sec-about__text {position:relative; z-index:1; display:flex; flex-direction:column; gap:100px; padding:180px max(30px, calc((100vw - 1780px) / 2 + 30px)) 100px 120px;}
.sec-about__header {display:flex; flex-direction:column; gap:60px;}
.sec-labels {display:flex; flex-direction:column; gap:20px;}
.sec-label {color:var(--color-sub); font-size:var(--font-size20); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.sec-about__title {color:var(--color-title); font-size:var(--font-size56); font-weight:500; line-height:1.3em; letter-spacing:-0.03em;}
.sec-about__body {display:flex; flex-direction:column; gap:40px;}
.sec-about__desc {color:var(--color-body); font-size:var(--font-size18); font-weight:400; line-height:1.6em; letter-spacing:-0.03em;}
.sec-about__list {display:flex; flex-direction:column; gap:16px;}
.sec-about__item {display:flex; align-items:center; gap:8px; color:var(--color-title); font-size:var(--font-size18); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.sec-about__item::before {content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--color-sub);}
.sec-about .btn-more {align-self:flex-end;}

/* main process */
.sec-process {position:relative; width:100%; padding:200px 0; background:#fff; overflow:hidden;}
.sec-process__header {position:relative; z-index:1; display:flex; flex-direction:column; gap:30px; margin-bottom:80px;}
.sec-process__title {color:var(--color-title); font-size:var(--font-size56); font-weight:500; line-height:1.3em; letter-spacing:-0.03em;}
.sec-process__desc {color:var(--color-title); font-size:var(--font-size18); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.process-row {position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:60px; align-items:flex-start; width:100%;}
.process-card {flex:0 0 calc((100% - 180px) / 4); display:flex; flex-direction:column; gap:40px; box-sizing:border-box;}
.process-card__photo {position:relative; width:100%; flex-shrink:0;}
.process-card__photo img {width:100%; height:100%; object-fit:cover; display:block; border-radius:16px;}
.process-card:not(:last-child) .process-card__photo:after {content:""; position:absolute; top:50%; left:calc(100% + 20px); transform: translateY(-50%); width:20px; height:20px; background:url("/images/all/img.svg") no-repeat 50% 50% / contain; pointer-events:none;}
.process-card__info {display:flex; flex-direction:column; gap:30px;}
.process-card__meta {display:flex; flex-direction:column; gap:10px;}
.process-card__step-wrap {display:flex; flex-direction:column; gap:4px;}
.process-card__step {color:var(--color-primary); font-size:16px; font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.process-card__name {color:var(--color-title); font-size:var(--font-size28); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.process-card__divider {width:100%; height:1px; background:var(--color-title);}
.process-card__desc {color:var(--color-title); font-size:var(--font-size18); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
/* main equipment */
.sec-equipment {position:relative; width:100%; padding:200px 0; overflow:hidden;}
.sec-equipment .contain {position:relative; z-index:1; display:flex; flex-direction:column; gap:120px;}
.sec-equipment__bg {position:absolute; inset:0; pointer-events:none;}
.sec-equipment__bg img {width:100%; height:100%; object-fit:cover;}
.sec-equipment__bg::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 60.09%), linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%);}
.sec-equipment__header {position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; width:100%;}
.sec-equipment .sec-label {color:var(--color-sub);}
.sec-equipment__title {color:#fff; font-size:var(--font-size56); font-weight:500; line-height:1.3em; letter-spacing:-0.03em;}
.equip-slider-wrap {position:relative; z-index:1; width:100%;}
.equip-slider-arrow {position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; justify-content:center; width:18px; padding:0; background:none; border:none; cursor:pointer;}
.equip-slider-arrow--prev {left:-40px;}
.equip-slider-arrow--next {right:-40px; transform:translateY(-50%) scaleX(-1);}
.equip-slider-arrow img {; object-fit:contain; display:block;}
.equip-slider-arrow:disabled {opacity:.4; cursor:default;}
.equip-slider {width:100%; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; container-type:inline-size;}
.equip-slider.is-dragging {cursor:grabbing;}
.equip-slider__track {display:flex; gap:24px; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.equip-card {flex:0 0 calc((100cqi - 48px) / 3); display:flex; flex-direction:column; gap:40px; height:480px; padding:50px 40px; border-radius:16px; background:rgba(255,255,255,.1); backdrop-filter:blur(15px); overflow:hidden; text-decoration:none; transition:background .25s;}
.equip-card:hover {background:rgba(255,255,255,.18);}
.equip-card__name {color:#fff; font-size:var(--font-size32); font-weight:700; line-height:1.4em; letter-spacing:-0.03em;}
.equip-card__image {flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.equip-card__image img {max-width:100%; max-height:100%; object-fit:contain; display:block; -webkit-user-drag:none; pointer-events:none;}

/* main contact */
.sec-contact {width:100%; padding:150px 0; background:#fff;}
.sec-contact__box {position:relative; display:flex; flex-direction:column; align-items:center; gap:80px; padding:150px 100px; border-radius:24px; overflow:hidden;}
.sec-contact__bg {position:absolute; inset:0; pointer-events:none;}
.sec-contact__bg img {width:100%; height:100%; object-fit:cover; display:block;}
.sec-contact__inner {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;}
.sec-contact__label {color:var(--color-sub); font-size:var(--font-size20); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.sec-contact__title {color:#fff; font-size:var(--font-size56); font-weight:500; line-height:1.3em; letter-spacing:-0.03em;}
.sec-contact__desc {color:#fff; font-size:var(--font-size18); font-weight:500; line-height:1.4em; letter-spacing:-0.03em;}
.sec-contact__btns {position:relative; z-index:1; display:flex; align-items:center; gap:16px;}


/* sub visual · LNB */
.sub-visual {position:relative; width:100%; height:700px; overflow:hidden;}
.sub-visual__bg {position:absolute; width: 100%; height: 100%; inset:0; background-position:50% 50%; background-size:cover; animation:sv-zoomIn 5s forwards linear;}
.sub-visual__bg.bg1 {background-image:url("../images/all/hero-company.png")}
.sub-visual__bg.bg2 {background-image:url("../images/all/hero-equipment.png")}
.sub-visual__bg.bg3 {background-image:url("../images/all/hero-affiliate.png")}
.sub-visual__bg.bg4 {background-image:url("../images/all/hero-community.png")}
.sub-visual__bg:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 48.143%, rgba(0,0,0,.2) 100%), linear-gradient(90deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.1) 100%); pointer-events:none;}
.sub-visual__bottom {position:absolute; top:539px; left:0; right:0; height:101px;}
.sub-visual .contain {display:flex; align-items:flex-end; justify-content:space-between; max-width:1596px; height:100%;}
.sub-visual__title {display:flex; flex-direction:column; gap:5px; justify-content:flex-end;}
.sub-visual__en {color:rgba(255,255,255,.3); font-size:var(--font-size20); font-weight:700; line-height:1.4em; letter-spacing:-0.03em;}
.sub-visual__ko {color:#fff; font-size:72px; font-weight:700; line-height:1.1em; letter-spacing:-0.03em; white-space:nowrap;}

@keyframes sv-zoomIn {
    0% {transform:scale(1.1);}
    100% {transform:scale(1);}
}

.lnb-wrap {position:relative;}
.lnb ul {display:flex; align-items:center; gap:60px;}
.lnb ul li a {color:rgba(255,255,255,.6); font-size:var(--font-size22); font-weight:700; line-height:1.4em; letter-spacing:-0.03em; white-space:nowrap;}
.lnb ul li.active a {color:#fff;}
#contArea {max-width:1596px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
.sub-title {position:relative; display:none;}
.real-cont {min-height:300px; padding-top: 150px; padding-bottom:180px;}

/* footer */
#footer {width:100%; background:var(--color-title); padding-bottom:60px; z-index:1; position:relative;}
#footer .ft-top {height:90px; border-bottom:1px solid rgba(255,255,255,.2);}
#footer .ft-top .contain {display:flex; align-items:center; justify-content:space-between; height:100%;}
.ft-menu {display:flex; align-items:center; gap:50px;}
.ft-menu-link {color:#fff; font-weight:400; line-height:1.5em; letter-spacing:-0.03em; white-space:nowrap; opacity:.5; transition:opacity .2s;}
.ft-menu-link:hover {opacity:1; text-decoration:underline; text-underline-offset:2px;}
.ft-policy {display:flex; align-items:center; gap:30px;}
.ft-policy-link {color:#fff; font-weight:500; line-height:1.5em; letter-spacing:-0.03em; white-space:nowrap;}
.ft-policy-link.is-dim {opacity:.5;}
.ft-body {width:100%; margin:60px auto 0;}
.ft-body .contain {display:flex; align-items:flex-start; justify-content:space-between;}
.ft-info {display:flex; flex-direction:column; gap:20px;}
.ft-info-row {display:flex; align-items:center; gap:30px;}
.ft-info-label {flex-shrink:0; width:94px; color:#fff; font-weight:700; line-height:1.5em; letter-spacing:-0.03em;}
.ft-info-value {color:#fff; font-weight:400; line-height:1.5em; letter-spacing:-0.03em; opacity:.5; white-space:nowrap;}
.ft-side {display:flex; flex-direction:column; align-items:flex-end; gap:40px;}
.ft-logo {width:110px; height:56px;}
.ft-logo img {width:100%; height:100%; object-fit:contain;}
.ft-side-bottom {display:flex; flex-direction:column; align-items:flex-end; gap:20px;}
.ft-btns {display:flex; align-items:center; gap:6px;}
.ft-btn {display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:8px; background:rgba(255,255,255,.2); color:rgba(255,255,255,.5); font-size:14px; font-weight:600; line-height:1.4em; letter-spacing:-0.03em; white-space:nowrap;}
.ft-btn-icon {flex-shrink:0; width:16px; height:16px;}
.ft-copyright {color:#fff; font-size:14px; font-weight:400; line-height:1.5em; letter-spacing:-0.03em; text-align:right; opacity:.5; white-space:nowrap;}
.scroll-top {display:flex; align-items:center; justify-content:center; position:fixed; right:40px; bottom:40px; width:56px; height:56px; background:var(--color-primary); color:#fff; font-size:12px; font-weight:600; line-height:1.3em; border-radius:50%; z-index:90;}