@charset "utf-8";

/* Info
 ========================================================================== */
/**
 * 1. Writer: Hyerin Lim (Weaverloft Corp.)
 * 2. Production Date: 2026-02-03
 * 3. Client: 위버로프트
 * 4. Homepage : https://weaverloft.com/
 */

/*========== Loder ==========*/
.weaver-loading { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; justify-content: center; align-items: center;}
.weaver-loading img { width: 150px;}
@media screen and (max-width: 768px) {
  .weaver-loading img { width: 100px; }
}

/*========== Header ==========*/
#header { position: fixed; top: auto; bottom: 20px; left: 0; z-index: 4; width: 100%; --txt-color: #000; --txt-active-color: #fff; --border-color: #fff; --bg-color: #000;}
#header.dark { --txt-color: #fff; --txt-active-color: #000; --border-color: rgba(255,255,255,0.2); --bg-color: #fff;}
#header .header-pc { position: relative; display: flex; justify-content: center;}
#header .header-pc .header-bar {position: relative; padding: 9px 20px 9px 16px; background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color); backdrop-filter: blur(50px); border-radius: 60px;}
#header .header-pc .header-bar .header-link { display: flex; align-items: center; }
#header .header-pc .header-bar .header-link li a { display: flex; justify-content: center; align-items: center; min-width: 90px; height: 40px; padding: 0 10px; border-radius: 30px; font-size: 16px; font-weight: 500; color: var(--txt-color); transition: color 400ms, background 400ms;}
#header .header-pc .header-bar .header-link li a.on { color: var(--txt-active-color); background-color: var(--bg-color);}
#header .header-pc .header-bar .hoverbox { position: absolute; background: #fff; opacity: 0.25; border-radius: 60px; top: -1px; left: -1px; transition: all 0.3s ease; z-index: -99;}

/*mo*/
html:has(.mo-gnb.on) { overflow-y: hidden;}
#header .header-mo { display: none; padding-left: 10px;}
#header .header-mo .btn-mo-menu { display: flex; justify-content: center; align-items: center; width: 42px; height: auto; aspect-ratio: 1; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 400ms;}
body:has(.fin) #header .header-mo .btn-mo-menu { opacity: 1; pointer-events: auto;}
#header .header-mo .btn-mo-menu i { position: relative; width: 26px; height: auto; aspect-ratio: 1;}
#header .header-mo .btn-mo-menu i::before { content:''; position: absolute; top: 9px; left: 0; width: 100%; height: 2px; background-color: #000; transition: background 400ms;}
#header .header-mo .btn-mo-menu i::after { content:''; position: absolute; bottom: 9px; left: 0; width: 100%; height: 2px; background-color: #000; transition: background 400ms;}
#header.dark .header-mo .btn-mo-menu i::before,
#header.dark .header-mo .btn-mo-menu i::after { background-color: #fff;}
#header .header-mo .mo-gnb { position: fixed; top: 0; left: -100%; width: 0; height: 100vh; height: 100dvh; opacity: 0; }
#header .header-mo .mo-gnb::before { content: ''; position: absolute; top: 33px; left: 30px; width: 154px; height: 20px; background-image: url('../img/logo-weaverloft-w.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; opacity: 0; transition: opacity 400ms;}
#header .header-mo .mo-gnb.on { opacity: 1; width: 100%; left: 0;}
#header .header-mo .mo-gnb-bg { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100dvh; background-color: #000; transition: all ease .6s; }
#header .header-mo:has(.mo-gnb.on) .mo-gnb-bg { width: 100%;}
#header .header-mo .btn-close { position: absolute; top: 30px; right: 20px; width: 26px; height: auto; aspect-ratio: 1; cursor: pointer; opacity: 0; transition: opacity 400ms;}
#header .header-mo .btn-close i { position: relative; display: block; width: 100%; height: 100%; transform: translate(-3px, 8px);}
#header .header-mo .btn-close i::before,
#header .header-mo .btn-close i::after { content:''; position: absolute; left: calc(50% - 22px/2 + 3.07px); top: calc(50% - 2px/2 - 7.93px); width: 22px; height: 2px; background-color: #fff; transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0);}
#header .header-mo .btn-close i::after { transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);}
#header .header-mo .gnb-cont { position: absolute; top: 56px; left: 0; padding: 102px 20px 30px 30px; width: 100%; height: calc(100% - 56px); display: flex;     flex-direction: column; justify-content: space-between;}
#header .header-mo .gnb-cont .btn-download { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 65px; border-radius: 7px; padding: 0 15px 0 18px; overflow: hidden; background-image: url('../img/bg-download.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; transition: opacity 400ms;}
#header .header-mo .gnb-cont .btn-download span { display: block; width: 100%; background-image: url(../img/ico-download-w.svg); background-repeat: no-repeat; background-size: 24px auto; background-position: right center; font-size: 16px; font-weight: 500; color: #fff; font-weight: 500;}
#header .header-mo .gnb-list + .gnb-list { position: relative; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.2);}
#header .header-mo .gnb-list > span { display: block; margin-bottom: 20px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); line-height: 1.23;}
#header .header-mo .gnb-list li { margin-bottom: 18px; font-size: 30px; font-weight: 500; color: #fff; line-height: 1.2667;}
#header .header-mo .gnb-list li sup { margin-left: 5px; font-size: 16px; color: #05AC4B; line-height: 1.75;}
#header .header-mo .gnb-list:not(.menu) li sup { display: inline-block; width: 18px; height: 18px; background-image: url('../img/ico-arrow-diagonal-w.svg');}
#header .header-mo .mo-gnb.on::before,
#header .header-mo .mo-gnb.on .btn-close { opacity: 1; transition-delay: 500ms;}
#header .header-mo .gnb-list > span,
#header .header-mo .gnb-list li { opacity: 0; transform: translateX(-30px); transition: opacity 400ms, transform 400ms;}
#header .header-mo .mo-gnb.on .gnb-list > span,
#header .header-mo .mo-gnb.on .gnb-list li { opacity: 1; transform: translateX(0px)}
#header .header-mo .mo-gnb.on .gnb-list.menu > span { transition-delay: 1s;}
#header .header-mo .mo-gnb.on .gnb-list.menu li:nth-of-type(1) { transition-delay: 1.2s;}
#header .header-mo .mo-gnb.on .gnb-list.menu li:nth-of-type(2) { transition-delay: 1.4s;}
#header .header-mo .mo-gnb.on .gnb-list.menu li:nth-of-type(3) { transition-delay: 1.6s;}
#header .header-mo .mo-gnb.on .gnb-list.blog li:nth-of-type(1) { transition-delay: 1.8s;}
#header .header-mo .mo-gnb.on .gnb-cont .btn-download { opacity: 1; transition-delay: 500ms;}
@media screen and (max-width: 1440px) {
    #header .header-pc { padding-left: 20px; justify-content: flex-start;}
}
@media screen and (max-width: 1024px) {
    #header { bottom: clamp(10px,1.9531vw,20px);}
    #header .header-pc { padding-left: clamp(10px,1.9531vw,20px);}
    #header .header-pc .header-bar { padding: clamp(6px, calc(9 / 1024 * 100vw), 9px) clamp(10px, calc(20 / 1024 * 100vw), 20px) clamp(6px, calc(9 / 1024 * 100vw), 9px) clamp(8px, calc(16 / 1024 * 100vw), 16px);}
    #header .header-pc .header-bar .header-link li a { min-width: clamp(67px, calc(90 / 1024 * 100vw), 90px); height: clamp(30px, calc(40 / 1024 * 100vw), 40px); padding: 0 clamp(6px, calc(10 / 1024 * 100vw), 10px); font-size: clamp(13px, calc(16 / 1024 * 100vw), 16px);}
}
@media screen and (max-width: 767px) {
    #header .header-pc { display: none;}
    #header .header-mo { display: block;}
}

/*========== Floating ==========*/
.btn-floating { position: fixed; bottom: 20px; right: 20px; z-index: 4; opacity: 0; transition: opacity 400ms; pointer-events: none; display: flex; align-items: center; gap: 16px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); border-radius: 60px; padding: 9px 10px 9px 40px;}
body:has(.fin) .btn-floating { opacity: 1; pointer-events: auto;}
body:has(.mo-gnb.on) .btn-floating { z-index: 3;}
.btn-floating .flow-wrap { position: relative; width: 180px; height: 23px; overflow: hidden; transition: width 400ms ease;}
.btn-floating .flow span { flex-shrink: 0; position: relative; padding-right: 14px; margin-right: 10px; font-size: 16px; line-height: 20px; font-weight: 700; color: #fff;}
.btn-floating .flow span::after { content:''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: #fff;}
.btn-floating .flow { position: absolute; top: 0; left: 0; opacity: 0; display: flex; width: max-content; animation: marquee 4s linear infinite;}
.btn-floating.portfolio .flow.portfolio-flow,
.btn-floating.contact .flow.contact-flow,
.btn-floating.recruit .flow.recruit-flow { opacity: 1;}
.btn-floating .circle-wrap { width: 42px; height: 42px; padding: 6px; border-radius: 60px; background-color: #fff; overflow: hidden; transition: width 400ms ease; }
.btn-floating .circle-wrap .icon-wrap { display: flex; justify-content: flex-end; align-items: center; width: 100%;}
.btn-floating .circle-wrap i { flex-shrink: 0; width: 30px; height: 30px; background-image: url('../img/ico-arrow-diagonal-b.svg'); background-repeat: no-repeat; background-position: center; background-size: 18px auto; border-radius: 50%; transition: background 400ms ease;}
.btn-floating .circle-wrap .icon-wrap::before { content:''; font-size: 16px; line-height: 1.25; font-family: 'Google Sans Flex', 'SUIT', sans-serif; color: #000; font-style: normal; font-weight: 500; white-space: nowrap; overflow: hidden; pointer-events: none; opacity: 0; width: 0; transform-origin: right center; transition: width 400ms ease, opacity 400ms ease, margin-right 400ms ease; text-align: center;}
.btn-floating.portfolio .icon-wrap::before { content: 'PORTFOLIO'; }
.btn-floating.contact .icon-wrap::before { content: 'CONTACT'; }
.btn-floating.recruit .icon-wrap::before { content: 'RECRUIT'; }
@keyframes marquee {
    0% { transform: translateX(0);}
    100% { transform: translateX(calc(-100% / 3)); }
}
@media (hover: hover) and (min-width: 1025px) {
    .btn-floating:hover .flow-wrap { width: 277px;}
    .btn-floating:hover .circle-wrap { width: 157px;}
    .btn-floating:hover .circle-wrap .icon-wrap::before { opacity: 1; width: 100px; margin-right: 10px;}
    .btn-floating:hover .circle-wrap i { background-color: #000; background-image: url('../img/ico-arrow-diagonal-w.svg');}
}
@media screen and (max-width: 1024px) {
    .btn-floating { bottom: clamp(10px, calc(20 / 1024 * 100vw), 20px); right: clamp(10px, calc(20 / 1024 * 100vw), 20px); gap: clamp(12px, calc(16 / 1024 * 100vw), 16px); padding: clamp(6px, calc(9 / 1024 * 100vw), 9px) clamp(6px, calc(10 / 1024 * 100vw), 10px) clamp(6px, calc(9 / 1024 * 100vw), 9px) clamp(16px, calc(40 / 1024 * 100vw), 40px);}
    .btn-floating .flow-wrap { width: clamp(100px, calc(180 / 1024 * 100vw), 180px); height: clamp(16px, calc(23 / 1024 * 100vw), 23px);}
    .btn-floating .flow span { padding-right: clamp(10px, calc(14 / 1024 * 100vw), 14px); margin-right: clamp(8px, calc(10 / 1024 * 100vw), 10px); font-size: clamp(12px, calc(16 / 1024 * 100vw), 16px); line-height: clamp(16px, calc(20 / 1024 * 100vw), 20px);}
    .btn-floating .flow span::after {width: clamp(2px, calc(4 / 1024 * 100vw), 4px);}
    .btn-floating .circle-wrap { width: clamp(30px, calc(42 / 1024 * 100vw), 42px); height: clamp(30px, calc(42 / 1024 * 100vw), 42px);}
    .btn-floating .circle-wrap i { width: clamp(18px, calc(30 / 1024 * 100vw), 30px); height: clamp(18px, calc(30 / 1024 * 100vw), 30px);}
}

/*========== Footer ==========*/
#footer{width: 100%; padding: 60px; background-color: var(--balck-bg-color); --border-color: rgba(0,0,0,0.3);}
#footer .footer-inner{ display: grid; grid-template-columns: auto clamp(340px, calc(401 / 1920 * 100vw), 401px); grid-template-rows: 260px 230px; grid-template-areas: "top info" "bottom info"; gap: 20px 0; width: 100%; max-width: 1800px; margin: 0 auto; padding: 30px; border-radius: 10px; background-color: #fff; overflow: hidden;}
#footer .sub-title{font-size: 42px; font-weight: 500; line-height: 1.2;}
#footer .footer-cont.top{ grid-area: top; display: flex; flex-flow: row nowrap; align-items: stretch; padding-bottom: 30px; border-bottom: 1px solid var(--border-color);}
#footer .footer-cont.top .brand { flex: 1; display: flex; flex-flow: column wrap; justify-content: space-between; align-items: stretch; padding: 18px 30px 27px 20px; border-right: 1px solid var(--border-color); }
#footer .footer-cont.top .brand .sub-title{margin-top: -6px;}
#footer .footer-cont.top .brand .sub-title br{display: none;}
#footer .footer-cont.top .brand .download-link{position: relative; display: inline-block; margin-left: auto; padding: 0.625em 1.125em; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-weight: 500; }
#footer .footer-cont.top .brand .download-link::before{content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 0; border-radius: 6px; background-color: var(--balck-bg-color); transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#footer .footer-cont.top .brand .download-link span{position: relative; z-index: 1; display: inline-block; padding-right: 2.125em; background-image: url('../img/ico-download-b.svg'); background-repeat: no-repeat; background-size: 24px 24px; background-position: right center;}
#footer .footer-cont.top .contact{width: clamp(20px, calc(412 / 1920 * 100vw), 412px);}
#footer .footer-cont.top .contact .sub-title{margin-bottom: -6px;}
#footer .footer-cont.top .contact a{ position: relative; display: flex; flex-flow: column wrap; justify-content: space-between; align-items: stretch; height: 100%; padding: 0 0 30px 30px;}
#footer .footer-cont.top .contact a .contact-header{display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between;}
#footer .footer-cont.top .contact a .ready-text{padding-top: 30px; font-size: 16px; font-weight: 600; color: #999;}
#footer .footer-cont.top .contact a span:has(.arrow){position: absolute; top: 0; right: clamp(1px, calc(10 / 1920 * 100vw), 10px); display: flex; align-items: center; justify-content: center; overflow: hidden; width: clamp(80px, calc(100 / 1920 * 100vw), 100px); height: 100px; }
#footer .footer-cont.top .contact a .arrow{display: inline-block; width: 60px; height: auto; aspect-ratio: 1/1; background-image: url("../img/ico-arrow-diagonal-b.svg"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
@media (hover: hover) {
    #footer .footer-cont.top .brand .download-link:hover{color: #fff;}
    #footer .footer-cont.top .brand .download-link:hover::before{height: 100%;}
    #footer .footer-cont.top .brand .download-link:hover span{background-image: url('../img/ico-download-w.svg');}
    #footer .footer-cont.top .contact a:hover .arrow { animation: arrowtopright 400ms 200ms ease-in-out; }
}
@keyframes arrowtopright {
    0% { transform: translate(0%,0%);}
    49% { transform: translate(150%,-150%);}
    50% { transform: translate(-150%,150%);}
    100% { transform: translate(0%,0%); }
}
#footer .footer-cont.info { grid-area: info; display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: space-between; margin-left: 30px; padding: 0 0 30px 30px; border-left: 1px solid var(--border-color);}
#footer .footer-cont.info .social-links{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 10px;}
#footer .footer-cont.info .social-links a { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: auto; aspect-ratio: 1/1; padding: 10px; border-radius: 50%; background-color: #EDEDED; overflow: hidden; transition: color 0.3s ease;}
/* #footer .footer-cont.info .social-links a { transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
#footer .footer-cont.info .social-links a:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.25);} */
#footer .footer-cont.info .social-links a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background-color: var(--balck-bg-color); transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; z-index: 0;}
#footer .footer-cont.info .social-links a img { position: relative; z-index: 1; width: 100%; transition: filter 0.3s ease;}
#footer .footer-cont.info .social-links li:nth-child(1) a::before { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);}
#footer .footer-cont.info .social-links li:nth-child(2) a::before { background-color: #1877f2;}
@media (hover: hover) {
  #footer .footer-cont.info .social-links a:hover::before { width: 100%; height: 100%;}
  #footer .footer-cont.info .social-links a:hover img { filter: brightness(0) invert(1);}
}
#footer .footer-cont.info .company-details {font-size: 14px; line-height: 1.2;}
#footer .footer-cont.info .company-details .greeting{font-size: 32px; font-weight: 500; line-height: 1.4;}
#footer .footer-cont.info .company-details .greeting strong{font-weight: 800;}
#footer .footer-cont.info .company-details .email{margin: 34px 0 8px;}
#footer .footer-cont.info .company-details .phone{margin-right: 6px;}
#footer .footer-cont.info .company-details .address{margin: 12px 0 42px;}
#footer .footer-cont.bottom { grid-area: bottom; display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; padding: 20px 0 30px 25px;}
#footer .footer-cont.bottom .footer-nav{display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: flex-start; gap: 90px;}
#footer .footer-cont.bottom .footer-nav .nav-column {display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: flex-start; gap: 30px;}
#footer .footer-cont.bottom .footer-nav .nav-tit{font-size: 12px; font-weight: 600; color: #999;}
#footer .footer-cont.bottom .footer-nav ul{margin-top: -2px;}
#footer .footer-cont.bottom .footer-nav li:not(:last-child){ margin-bottom: 5px; }
#footer .footer-cont.bottom .footer-nav a{ position: relative; display: inline-block; padding: 6px 0; font-size: 18px; line-height: 1;}
#footer .footer-cont.bottom .footer-nav a[href="#none"]{cursor: default;}
#footer .footer-cont.bottom .footer-nav a::after { content: ""; position: absolute; width: 0; height: 2px; bottom: 0; right: 100%; background-color: var(--balck-bg-color); transition: width 0.3s ease, right 0.3s ease;}
@media (hover: hover) {
  #footer .footer-cont.bottom .footer-nav a:not([href="#none"]):hover::after { width: 100%; right: 0;}
}
#footer .footer-cont.bottom .right{ display: flex; flex-flow: column wrap; align-items: flex-end; justify-content: space-between; height: 100%;}
#footer .footer-cont.bottom .right .certification{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; gap: 40px;}
#footer .footer-cont.bottom .right .certification img{width: auto; height: 37px;}
#footer .footer-cont.bottom .right .copyright{font-size: 14px; color: #939393; line-height: 1; white-space: nowrap;}
@media screen and (max-width: 1680px) {
  #footer{ padding: clamp(20px, calc(60 / 1680 * 100vw), 60px) clamp(20px, calc(60 / 1680 * 100vw), 60px) 60px; }
  #footer .sub-title{font-size: clamp(36px, calc(42 / 1680 * 100vw), 42px);}
  #footer .footer-cont.top .contact a .ready-text{padding-top: clamp(20px, calc(30 / 1680 * 100vw), 30px); font-size: clamp(14px, calc(16 / 1680 * 100vw), 16px); }
  #footer .footer-cont.top .contact a span:has(.arrow){ right: -5%; width: clamp(45px, calc(80 / 1680 * 100vw), 80px); height: clamp(72px, calc(100 / 1680 * 100vw), 100px);}
  #footer .footer-cont.top .contact a .arrow{ width: 75%; }
}
@media screen and (max-width: 1440px) {
  #footer .footer-inner{grid-template-columns: auto clamp(280px, calc(340 / 1440 * 100vw), 340px);  grid-template-rows: clamp(200px, calc(260 / 1440 * 100vw), 260px) clamp(220px, calc(200 / 1440 * 100vw), 230px); gap: clamp(10px, calc(20 / 1440 * 100vw), 20px) 0; padding: clamp(20px, calc(30 / 1440 * 100vw), 30px);}
  #footer .sub-title{font-size: clamp(28px, calc(36 / 1440 * 100vw), 36px);}
  #footer .footer-cont.top{padding-bottom: clamp(20px, calc(30 / 1440 * 100vw), 30px);}
  #footer .footer-cont.top .brand{padding: 18px clamp(20px, calc(30 / 1440 * 100vw), 30px) clamp(20px, calc(27 / 1440 * 100vw), 27px) 20px;}
  #footer .footer-cont.top .brand .download-link{font-size: clamp(14px, calc(16 / 1440 * 100vw), 16px);}
  #footer .footer-cont.top .contact a{ padding: 0 0 clamp(20px, calc(30 / 1440 * 100vw), 30px) clamp(20px, calc(30 / 1440 * 100vw), 30px);}
  #footer .footer-cont.info{ margin-left: clamp(20px, calc(30 / 1440 * 100vw), 30px); padding: 0 0 clamp(20px, calc(30 / 1440 * 100vw), 30px) clamp(20px, calc(30 / 1440 * 100vw), 30px);}
  #footer .footer-cont.info .social-links a{ width: clamp(40px, calc(50 / 1440 * 100vw), 50px); padding: clamp(6px, calc(10 / 1440 * 100vw), 10px);}
  #footer .footer-cont.top .brand .download-link span{ background-size: clamp(18px, calc(24 / 1440 * 100vw), 24px) auto;}
  #footer .footer-cont.info .company-details .greeting{font-size: clamp(28px, calc(32 / 1440 * 100vw), 32px);}
  #footer .footer-cont.bottom{position: relative; padding: clamp(10px, calc(30 / 1440 * 100vw), 20px) 0 clamp(20px, calc(30 / 1440 * 100vw), 30px) clamp(20px, calc(25 / 1440 * 100vw), 25px);}
  #footer .footer-cont.bottom .footer-nav{gap: clamp(60px, calc(90 / 1440 * 100vw), 90px);}
  #footer .footer-cont.bottom .footer-nav a{font-size: clamp(16px, calc(18 / 1440 * 100vw), 18px);}
  #footer .footer-cont.bottom .right .certification{ gap: clamp(20px, calc(40 / 1440 * 100vw), 40px);}
  #footer .footer-cont.bottom .right .certification img{ height: clamp(32px, calc(37 / 1440 * 100vw), 37px);}
  #footer .footer-cont.bottom .right .copyright{position: absolute; bottom: clamp(20px, calc(30 / 1440 * 100vw), 30px); right: 0;}
}
@media screen and (max-width: 1100px) {
  #footer .footer-cont.bottom .right .certification{flex-direction: column; }
}
@media screen and (max-width: 1024px) {
  #footer .footer-inner{grid-template-columns: auto clamp(250px, calc(280 / 1024 * 100vw), 280px); grid-template-rows: auto auto; gap: 0;}
  #footer .sub-title{font-size: clamp(24px, calc(28 / 1024 * 100vw), 28px);}
  #footer .footer-cont.top{padding: 0;}
  #footer .footer-cont.top .brand{gap: clamp(30px, calc(50 / 1024 * 100vw), 50px); padding: 18px 0 20px clamp(10px, calc(20 / 1024 * 100vw), 20px); border: none;}
  #footer .footer-cont.top .brand .download-link{padding: clamp(7.5px, calc(9 / 1024 * 100vw), 9px) 16px;}
  #footer .footer-cont.top .brand .download-link span{padding-right: clamp(26px, calc(30 / 1024 * 100vw), 30px); background-size: clamp(16px, calc(18 / 1024 * 100vw), 18px) auto;}
  #footer .footer-cont.top .contact{display: none;}
  #footer .footer-cont.info .company-details{font-size: clamp(12px, calc(14 / 1024 * 100vw), 14px);}
  #footer .footer-cont.info .company-details .greeting{font-size: clamp(24px, calc(28 / 1024 * 100vw), 28px);}
  #footer .footer-cont.info .company-details .address{margin-bottom: clamp(30px, calc(42 / 1024 * 100vw), 42px);}
  #footer .footer-cont.bottom{flex-flow: column; gap: 50px; padding: 20px 0 20px clamp(10px, calc(20 / 1024 * 100vw), 20px); padding-right: 0;}
  #footer .footer-cont.bottom .footer-nav{gap: clamp(40px, calc(60 / 1024 * 100vw), 60px);}
  #footer .footer-cont.bottom .footer-nav .nav-column {gap: clamp(16px, calc(30 / 1024 * 100vw), 30px);}
  #footer .footer-cont.bottom .right{flex-flow: row wrap; justify-content: space-between; gap: 20px; width: 100%;}
  #footer .footer-cont.bottom .right .certification{flex-flow: row nowrap; gap: clamp(16px, calc(20 / 1024 * 100vw), 20px);}
  #footer .footer-cont.bottom .right .certification img{height: clamp(28px, calc(32 / 1024 * 100vw), 32px);}
  #footer .footer-cont.bottom .right .copyright{position: static; font-size: clamp(12px, calc(14 / 1024 * 100vw), 14px);}
}
@media screen and (max-width: 767px) {
  #footer .footer-inner{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "top" "info" "bottom"; padding: 20px 20px 40px;}
  #footer .footer-cont.top .brand {align-items: flex-start; padding: 0 0 20px;}
  #footer .footer-cont.top .brand .sub-title{margin: 0;}
  #footer .footer-cont.info{gap: 50px; margin: 0; padding: 20px 0; border: none; border-bottom: 1px solid var(--border-color);}
  #footer .footer-cont.info .social-links a{ width: clamp(32px, calc(40 / 1440 * 100vw), 40px); padding: clamp(5px, calc(10 / 1440 * 100vw), 10px);}
  #footer .footer-cont.info .company-details .greeting strong br{display: none;}
  #footer .footer-cont.info .company-details .email{margin-top: 24px;}
  #footer .footer-cont.bottom{flex-flow: row wrap; gap: 0; padding: 20px 0 0;}
  #footer .footer-cont.bottom .footer-nav{gap: 50px;}
  #footer .footer-cont.bottom .right{flex-flow: column wrap; width: auto;}
}
@media screen and (max-width: 660px) {
  #footer .footer-cont.bottom{flex-flow: column; gap: 50px; }
  #footer .footer-cont.bottom .right{flex-flow: row wrap; width: 100%;}
}
@media screen and (max-width: 440px) {
  #footer .footer-cont.top .brand .sub-title br{display: block;}
  #footer .footer-cont.top .brand .download-link{margin: 0;}
  #footer .footer-cont.info .company-details .greeting strong br{display: block;}
  #footer .footer-cont.bottom .footer-nav .nav-column{flex-flow: column;}
}
@media screen and (max-width: 359px) {
  #footer .footer-cont.top .brand .sub-title br{display: none;}
  #footer .footer-cont.info .company-details .greeting{word-break: keep-all;}
  #footer .footer-cont.info .company-details .greeting strong br{display: none;}
  #footer .footer-cont.bottom .footer-nav{flex-flow: row wrap;}
  #footer .footer-cont.bottom .right .copyright{white-space: inherit; line-height: 1.1;}
}