@charset "UTF-8";

@import url("/static/css/reset.css");
@import url("/static/css/fonts.css");
@import url("/static/css/swiper-bundle.min.css");
@import url("/static/css/fancybox.css");



:root{
  
    --c0: #FFFFFF;
    --c1: #151515;
    --c2: #ededed;
    --c3: #e8ba19;
    --c4: #f1e0a1;
    --c5: #adadad;
    --c6: #146e9c;
    --c7: #ba930a;
    --c8: #f4f4f4;
    
    
    --wr: 60rem;
    --iwr: 40rem;
    --awr: calc(-1 * var(--wr));
    --sl: max(1px, 1rem);
    --gap: 25rem;
    
    --f-xs: max(11px, 12rem);
    --f-s: max(12px, 14rem);
    --f-d: max(13px, 16rem);
    --f-m: max(14px, 18rem);
    --f-b: max(16px, 21rem);
    --f-l: max(20px, 30rem);
    --f-xl: max(30px, 72rem);   
    
}

/* globals */
@media screen{
    

    html{font-size: 0.1vw;background-color: var(--c2);}

    .document{font-weight: 400;font-family: 'Helios', sans-serif;font-size: var(--f-d);line-height: 1.5;color: var(--c1);background-color: var(--c2);letter-spacing: normal;scroll-snap-type: y mandatory;scroll-padding: 0;}

    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: 1200rem;}

    .icon{display: flex;max-height: 100%;align-items:center;justify-content:center;line-height: 0;max-width: 100%;width: auto;height: auto;}
    .cover,
    .contain{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-position: center;pointer-events: none;}
    .cover{object-fit: cover;}
    .contain{object-fit: contain;}
    .fill::after{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}

    .button{display: inline-flex;align-items: center;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;position: relative;overflow: hidden;background-color: var(--c3);color: var(--c1);padding: 0 80rem;height: max(40px, 50rem);}
    .button-text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;position: relative;z-index: 1;font-size: var(--f-s);text-transform: uppercase;letter-spacing: .1em;font-weight: 700;}

    .textfield{display: flex;width: 100%;border-radius: 0;overflow: hidden;background-color: var(--c8);align-items: center;}
    .textfield-input{resize: none;flex: auto;width: 100%;min-height: 0;text-overflow: ellipsis;padding: 15rem 30rem;transition-duration: .15s;font-weight: 400;transition-property: background-color, box-shadow;}
    .textfield-icon{flex: none;margin-right: 20rem;display: flex;align-items: center;justify-content: center;width: 20rem;height: 20rem;}
    
    .textfield.focus{background-color: var(--c0);box-shadow: inset 0 0 0 var(--sl) var(--c3);}

    .container{display: flex;flex-direction: column;min-height: 100vh;}
    
    .header{flex: none;position: relative;z-index: 9;}
    .topbar{height: 0;display: flex;position: relative;align-items: flex-start;}
    .topbar-logo{width: 100rem;height: 140rem;position: absolute;top: 30rem;z-index: 1;}
    .topbar-nav{position: fixed;right: 0;top: 50%;transform: translateY(-50%);z-index: 10;user-select: none;}
    .topbar-nav-button{padding: 5rem 15rem;cursor: pointer;display: inline-flex;align-items: center;color: var(--c0);background-color: var(--c3);outline: var(--sl) solid var(--c7);}
    .topbar-nav-button-text{text-transform: uppercase;letter-spacing: .1em;color: var(--c0);font-size: var(--f-s);margin-top: .35em;font-weight: 400;}
    .topbar-nav-button-icon{flex: none;margin-right: 5rem;width: max(20px, 20rem);height: max(20px, 20rem);display: flex;align-items: center;justify-content: center;padding: 2rem;color: var(--c1);transition: transform .5s;will-change: transform;}
    .topbar-nav-list{position: absolute;right: 100%;top: 50%;transform: translateY(-50%);pointer-events: none;}
    .topbar-nav-list ul{background-color: var(--c3);display: grid;grid-template-columns: auto;padding: 30rem 0;grid-gap: 0;will-change: transform;transition: all .5s;opacity: 0;visibility: hidden;transform-origin: right;transform: scaleX(0);pointer-events: all;}
    .topbar-nav-list li{text-transform: uppercase;letter-spacing: .1em;color: var(--c0);font-size: var(--f-xs);white-space: nowrap;position: relative;padding: 10rem 30rem;width: 100%;}
    
    .topbar-nav.active .topbar-nav-button-icon{transform: rotate(225deg);} 
    .topbar-nav.active .topbar-nav-list ul{opacity: 1;visibility: visible;transform: scaleX(1);}
    
    .title{font-size: var(--f-l);line-height: 1.3;font-weight: 700;}
    
    .main{flex: auto;}
    .section{scroll-snap-stop: always;scroll-snap-align: start;overflow: hidden;}
    
    .footer{flex: none;padding: 30rem 0;background-color: var(--c2);}
    .footer-grid{grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: flex-start;display: grid;font-weight: 400;}
    
    .fancybox-slide--image .fancybox-content{border-radius: 0;}
    .fancybox-button{background-color: var(--c3);color: var(--c1);}
    
}

/* sections */
@media screen{
    
    .s1{background-color: var(--c1);color: var(--c3);min-height: 100vh;padding: 50rem 0;display: flex;align-items: flex-end;overflow: hidden;position: relative;}
    .s1-0{position: absolute;top: 0;left: 0;width: 100%;height: 120%;z-index: 1;transform: translateY(-8.5%);}
    .s1-0 img{object-position: left center;}
    .s1-1{display: flex;align-items: flex-start;flex-direction: column;position: relative;z-index: 1;}
    .s1-3{font-weight: 300;font-size: var(--f-m);max-width: 550rem;hyphens: auto;margin-top: 20rem;color: var(--c4);}
    .s1-4{position: relative;margin-top: 25rem;border: var(--sl) solid var(--c4);text-transform: uppercase;line-height: 1;font-size: var(--f-xs);padding: 10rem 20rem;letter-spacing: .1em;}
    
    .s2{background-color: var(--c0);color: var(--c1);padding: 50rem 0;}
    .s2-1{}
    .s2-2{text-align: center;margin-bottom: 30rem;}
    .s2-3{font-weight: 300;font-size: var(--f-b);text-align: center;max-width: 745rem;margin: .5em auto;}
    .s2-4{width: max(20px, 24rem);height: max(20px, 24rem);display: flex;align-items: center;justify-content: center;background-color: var(--c3);color: var(--c0);padding: 2rem;cursor: pointer;margin: 0 auto;}
    .s2-4 .icon{will-change: transform;transition: transform .25s;}
    .s2-4.active .icon{transform: rotate(225deg);}
    .s2-4:not(.active) ~ .s2-3{display: none;}
    
    .s3{background-color: var(--c2);color: var(--c1);padding: 50rem 0;}
    .s3-1{display: grid;grid-template-columns: 1fr 400rem 1fr;grid-gap: 30rem;align-items: flex-start;}
    .s3-2{display: flex;align-items: center;justify-content: center;position: relative;border-radius: 50%;overflow: hidden;}
    .s3-2::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s3-2::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;pointer-events: none;border-radius: 50%;box-shadow: inset 0 0 0 30rem rgba(237,237,237,.15);}
    .s3-3{display: grid;grid-template-columns: auto;grid-gap: 50rem;}
    .s3-4{position: relative;padding: 30rem;border: 2rem dotted var(--c5);border-radius: 50%;background-color: var(--c2);}
    .s3-5{background-color: var(--c2);position: absolute;z-index: 1;border-radius: 50%;top: 25%;left: 25%;right: 25%;bottom: 25%;background-position: center;background-repeat: no-repeat;background-size: 60%;background-image: url(../img/i-03-01.png);}
    .s3-6{position: relative;padding: 30rem;border: 2rem dotted var(--c5);border-radius: 50%;background-color: rgba(0,0,0,.01);will-change: transform;transition: transform .25s;}
    .s3-7{display: flex;flex-direction: column;transition: all .5s .75s;will-change: transform;}
    .s3-7-1{font-weight: 700;font-size: var(--f-b);}
    .s3-7-2{font-size: var(--f-xs);text-transform: uppercase;letter-spacing: .1em;margin-top: 5rem;opacity: .8;max-width: 400rem;}
    .s3-8{position: absolute;top: 0;left: 50%;height: 100%;}
    .s3-9{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .s3-9::before{content: "";width: 10rem;height: 10rem;border-radius: 50%;background-color: currentColor;margin: -6rem 0 0 -5rem;position: absolute;top: 0;left: 0;will-change: transform;transition: transform .5s .5s;}
    
    .s3-3__1 .s3-7:nth-child(1) .s3-7-1::before{color: #30302e;}
    .s3-3__1 .s3-7:nth-child(2) .s3-7-1::before{color: #726e63;}
    .s3-3__2 .s3-7:nth-child(1) .s3-7-1::before{color: #a89f78;}
    .s3-3__2 .s3-7:nth-child(2) .s3-7-1::before{color: #f4de8b;}
    .s3-3__2 .s3-7:nth-child(3) .s3-7-1::before{color: #f4de8b;}
    .s3-3__2 .s3-7:nth-child(4) .s3-7-1::before{color: #ed5e5a;}
    
    .s3-9:nth-child(1){color: #30302e;transform: rotate(0deg);}
    .s3-9:nth-child(2){color: #726e63;transform: rotate(90deg);}
    .s3-9:nth-child(3){color: #a89f78;transform: rotate(135deg);}
    .s3-9:nth-child(4){color: #f4de8b;transform: rotate(180deg);}
    .s3-9:nth-child(5){color: #d13737;transform: rotate(240deg);}
    .s3-9:nth-child(6){color: #ed5e5a;transform: rotate(300deg);}
    
    .chart{width:100%;height: 100%;position: absolute;top: 0;left: 0;}

    .unit{fill: none;stroke-width: 20;cursor: pointer;transition: all .5s .25s;}

    .unit:nth-child(1) {stroke: #30302e;stroke-dasharray: 30 90;stroke-dashoffset: -75;}
    .unit:nth-child(2) {stroke: #726e63;stroke-dasharray: 20 100;stroke-dashoffset: 15;}
    .unit:nth-child(3) {stroke: #a89f78;stroke-dasharray: 20 100;stroke-dashoffset: -5;}
    .unit:nth-child(4) {stroke: #f4de8b;stroke-dasharray: 20 100;stroke-dashoffset: -25;}
    .unit:nth-child(5) {stroke: #d13737;stroke-dasharray: 10 110;stroke-dashoffset: -45;}
    .unit:nth-child(6) {stroke: #ed5e5a;stroke-dasharray: 20 100;stroke-dashoffset: -55;}

    .s3:not(.active) .s3-2 .unit{stroke-dasharray: 0 120;}
    .s3:not(.active) .s3-6{transform: scale(0);}
    .s3:not(.active) .s3-9::before{transform: scale(0);}
    
    .s4{background-color: var(--c1);color: var(--c0);background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(../img/i-04-01.png);padding: 50rem 0;}
    .s4-1{display: flex;flex-direction: column;align-items: center;}
    .s4-2{text-align: center;}
    .s4-3{margin-top: 30rem;display: flex;align-items: flex-start;text-align: center;padding: 0 var(--iwr);}
    .s4-4{flex: auto;}
    .s4-4-1{font-size: var(--f-xl);font-weight: 700;color: var(--c3);}
    .s4-4-2{margin-top: 15rem;text-transform: uppercase;letter-spacing: .1em;font-size: var(--f-s);}
    .s4-5{flex: none;margin: -.1em 10rem 0;font-size: var(--f-xl);font-weight: 700;}
    .s4-5::before{content: "+";}
    
    .s5{background-color: var(--c2);color: var(--c1);padding: 50rem 0;}
    .s5-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 80rem;}
    .s5-3{color: var(--c5);font-weight: 700;font-size: var(--f-m);}
    .s5-4:not(:first-child){margin-top: 25rem;}
    .s5-4-1{font-weight: 700;font-size: var(--f-m);}
    .s5-4-2{margin-top: 15rem;font-weight: 300;}
    .s5-4-2 li{list-style: inside disc;}
    .s5-4-3{margin-top: 15rem;display: inline-flex;align-items: center;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;position: relative;overflow: hidden;background-color: var(--c3);color: var(--c0);padding: 5rem 8rem 3rem;white-space: nowrap;text-align: center;font-size: var(--f-xs);text-transform: uppercase;letter-spacing: .1em;}
    
    .s6{background-color: var(--c0);color: var(--c1);padding: 50rem 0;}
    .s6-2{text-align: center;}
    .s6-3{margin-top: 30rem;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 0;}
    .s6-4{position: relative;display: flex;overflow: hidden;background-color: var(--c1);}
    .s6-4::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s6-4-1{position: absolute;bottom: 0;top: 0;left: 0;right: 0;transform: scale(1.1);}
    .s6-4-2{position: absolute;bottom: 0;text-align: center;font-size: var(--f-xs);text-transform: uppercase;letter-spacing: .1em;background-color: var(--c0);padding: 15rem;width: 100%;transform: translateY(100%);user-select: none;}
    .s6-4-2:empty{display: none;}
    
    .s7{background-color: var(--c0);color: var(--c1);padding: 50rem 0 100rem;}
    .s7-2{text-align: center;}
    .s7-3{margin: 30rem -15rem 0;overflow: hidden;padding: 0 var(--iwr);}
    .s7-4{display: flex;margin: 0 15rem;position: relative;border: var(--sl) solid var(--c2);}
    .s7-4::before{content: "";flex: none;width: 0;padding-top: 150%;}
    
    .s8{background-color: var(--c2);color: var(--c1);padding: 50rem 0 20rem;}
    .s8 .swiper-wrapper{transition-timing-function: linear!important;}
    .s8-2{text-align: center;color: var(--c5);font-size: var(--f-b);font-weight: 700;line-height: 1.3;}
    .s8-3{margin: 20rem -25rem 0;padding: 0;}
    .s8-3 .carousel{overflow: visible;}
    .s8-4{display: flex;margin: 0 25rem;position: relative;}
    .s8-4::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s8-4 img{backdrop-filter: none;}
    
    .s9{background-color: var(--c0);color: var(--c1);padding: 50rem 0 100rem;}
    .s9-1{padding: 0 var(--iwr);}
    .s9-2{text-align: center;display: flex;flex-direction: column;align-items: center;font-size: var(--f-b);font-weight: 700;line-height: 1.3;}
    .s9-2::before{content: "";margin-bottom: 20rem;flex: none;width: 50rem;height: 50rem;border-radius: 50%;background-color: var(--c3);background-image: url(../img/i-09-01.png);background-position: center;background-repeat: no-repeat;}
    .s9-3{margin-top: 30rem;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);}
    .s9-4{margin-top: 40rem;display: flex;align-items: baseline;}
    .s9-4-1{margin-right: 50rem;font-size: var(--f-b);font-weight: 700;line-height: 1.3;}
    .s9-5{display: grid;grid-template-columns: auto;grid-gap: 10rem;justify-content: flex-start;}
    .s9-5-1{font-size: var(--f-l);font-weight: 700;}
    .s9-5-2,
    .s9-5-3{font-size: var(--f-m);}
    .s9-5-2{display: inline-flex;align-items: center;position: relative;}
    .s9-5-2::after{content: "";flex: none;width: 35rem;height: 35rem;background-image: url(../img/pin.png);background-size: contain;background-repeat: no-repeat;background-position: center;margin-left: 5rem;}
    .s9-5-3 a{color: var(--c6);border-bottom: var(--sl) dotted;}
    .s9-6{display: grid;grid-template-columns: auto;grid-gap: 10rem;}
    .s9-7-1{font-size: var(--f-m);font-weight: 700;}
    .s9-7-2{font-size: var(--f-s);font-weight: 300;}
    
    .s10{background-color: var(--c0);color: var(--c1);}
    .s10-2{display: flex;}
    .s10-2-1{font-size: var(--f-l);line-height: 1.3;font-weight: 300;position: relative;padding: 0 var(--iwr) 30rem;}
    .s10-2-1::after{content: "";width: 25rem;height: 25rem;background-color: var(--c3);position: absolute;bottom: 0;left: 50%;margin-left: -10rem;clip-path: polygon(0 0, 15% 100%, 100% 100%);}
    .s10-3{background-color: var(--c3);color: var(--c1);padding: 30rem var(--iwr);}
    .s10-4{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);padding: 0 var(--iwr);}
    
    .s10-4-4 .button{background-color: var(--c7);color: var(--c0);}
    
    .popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: auto;display: flex;visibility: hidden;z-index: 999;align-items: flex-start;}
    .popup-wrapper{background-color: var(--c0);width: 100%;margin: 40rem auto;pointer-events: all;padding: 60rem;max-width: 900rem;position: relative;}
    .popup-title{text-align: center;margin-bottom: 50rem;}
    .popup-close{position: absolute;top: 0;right: 0;width: 30rem;height: 30rem;display: flex;align-items: center;justify-content: center;margin: 20rem;cursor: pointer;opacity: .5;transition: opacity .25s;}
    
    .popup-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99;background-color: var(--c1);opacity: .5;visibility: hidden;}
    
    .popup.active{visibility: visible;}
    .popup.active ~ .popup-overlay{visibility: visible;}
    
    .formbox{display: grid;grid-template-columns: auto;grid-gap: 30rem;}
    .formbox-row{display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 30rem;}
    .formbox-cell{display: flex;align-items: center;}
    .formbox-cell-dash{min-width: 0;margin: 0 20rem;flex: none;}
    .formbox-cell:only-child{grid-column: 1/-1;}
    
    .formbox-footer{margin-top: 50rem;display: flex;justify-content: center;}
    .formbox-label{padding: 0 30rem;}
    .formbox-note{text-align: center;width: 100%;opacity: .5;font-size: var(--f-s);}

    .map{display: flex;position: relative;background-color: var(--c2);}
    .map::before{content: "";flex: none;width: 0;padding-top: 50%;}
    
}

@media screen and (max-width: 639.98px) {
    
    :root{

        --wr: 20rem;
        --iwr: 0;
        --gap: 10rem;

        --f-xs: 11rem;
        --f-s: 12rem;
        --f-d: 13rem;
        --f-m: 14rem;
        --f-b: 16rem;
        --f-l: 20rem;
        --f-xl: 30rem 

    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .button{height: 40rem;width: 100%;}
    .textfield-input{padding: 10rem 15rem;}
    
    .topbar-logo{width: 80rem;height: 100rem;}
    
    .topbar-nav{transform: none;top: 0;}
    .topbar-nav-button{top: 0;}
    .topbar-nav-list{right: 0;transform: none;top: 100%;}
    
    .s1-0 img{object-position: top center;}
    
    .s3-1{grid-template-columns: auto;grid-gap: 20rem;}
    .s3-3{grid-gap: 20rem;}
    .s3-4{padding: 20rem;}
    .s3-6{order: -1;padding: 20rem;}
    .s3-7-1{position: relative;}
    .s3-7-1::before{content: "\2022\a0";position: absolute;right: 100%;}
    .s3-7-2{max-width: none;}
    .s3-7-2 br{display: none;}
    
    .s3-9:nth-child(2){transform: rotate(75deg);}
    .s3-9:nth-child(4){transform: rotate(195deg);}
    .s3-9:nth-child(6){transform: rotate(285deg);}
    
    .s4-3{flex-direction: column;}
    .s4-4-2{margin-top: 0;}
    .s4-5{margin: 10rem auto;}
    
    .s5-1{grid-template-columns: auto;grid-gap: 50rem;}
    
    .s6-3{grid-template-columns: auto;grid-gap: 20rem;}
    .s6-4{flex-direction: column;background-color: var(--c0);}
    .s6-4::before{display: none;}
    .s6-4-1{transform: scale(1);position: relative;display: flex;width: 100%;background-color: var(--c1);}
    .s6-4-1::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s6-4-2{transform: none;position: static;}
    
    .s7{padding: 0 0 30rem;}
    .s7 .swiper-pagination-bullet-active{background-color: var(--c1);}
    .s7-3{overflow: visible;margin-left: -5rem;margin-right: -5rem;position: relative;padding-bottom: 40rem;}
    .s7-3 .carousel{margin: 0;overflow: visible;}
    .s7-4{margin: 0 5rem;}
    
    .s9-5-2, 
    .s9-5-3{font-size: var(--f-d);}
    .s9-3{grid-template-columns: auto;}
    .s9-4{flex-direction: column;align-items: center;margin-top: 50rem;}
    .s9-4-1{margin: 0 0 20rem;text-align: center;}
    .s9-4-2{width: 100%;}
    
    .s10-2-1{margin: 0 auto;font-weight: 700;}
    .s10-4{grid-template-columns: auto;}
    .s10-4-3,
    .s10-4-4{grid-column: 1/-1;}
    
    .footer-grid{grid-template-columns: auto;text-align: center;}
    
    .popup-wrapper{margin: 0 var(--awr);padding: 60rem var(--wr) 30rem;width: auto;min-height: 100vh;}
    .popup-close{opacity: 1;margin: 10rem;}
    
    .formbox{grid-gap: var(--gap);}
    .formbox-row{grid-template-columns: auto;grid-gap: var(--gap);}
    .formbox-label{padding: 0;}
    
    .map{min-height: 75vh;}
    
}

@media screen and (min-width: 640px) {
    
    .mobile{display: none!important;}
    
    html{scroll-snap-type: y mandatory;scroll-padding: 0;}
    
    .s3-3__1 .s3-7{min-height: 175rem;}
    .s3-3__1 .s3-7:nth-child(1){justify-content: flex-end;}
    .s3-3__1 .s3-7:nth-child(2){}
    .s3-3__2 .s3-7{min-height: 100rem;}
    .s3-3__2 .s3-7:nth-child(1){margin-left: -30rem;}
    .s3-3__2 .s3-7:nth-child(2){}
    .s3-3__2 .s3-7:nth-child(3){margin-left: -30rem;}
    .s3-3__2 .s3-7:nth-child(4){margin-left: calc(-30rem - 200rem);}
    
    .s3:not(.active) .s3-3__1 .s3-7{opacity: 0;transform: translateX(-50%);}
    .s3:not(.active) .s3-3__2 .s3-7{opacity: 0;transform: translateX(50%);}
    
    .s10-4-1{order: 1;}
    .s10-4-2{order: 3;}
    .s10-4-3{order: 2;grid-row-end: span 2;position: relative;}
    .s10-4-4{order: 4;grid-column: 2/-1;}
    .s10-4-3 .textfield,
    .s10-4-3 .textfield-input{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
    
    .formbox-cell__2{grid-column-end: span 2;}
    .formbox-cell__3{grid-column-end: span 3;}
    .formbox-cell__4{grid-column-end: span 4;}
    
}

@media screen and (min-width: 1024px) {
    
    html{font-size: 1px;}
    
}


/* hover animations */

@media (hover: hover) and (pointer: fine) {
    
    .s6-4-1{transition: all .5s;will-change: transform;}
    .s6-4-2{transition: transform .5s;will-change: transform;}
    .s5-4-3,
    .topbar-nav-list li,
    .button,
    .topbar-nav-button{transition: background-color .15s;}
    .popup-close{transition: opacity .25s;}
    
    .popup-close:hover{opacity: 1;}
    
    .s6-4:hover .s6-4-1{transform: scale(1);opacity: .3;}
    .s6-4:hover .s6-4-2{transform: translateY(0);}
    
    .s5-4-3:hover,
    .button:hover,
    .topbar-nav-list li:hover,
    .topbar-nav-button:hover{background-color: var(--c7);}
    
    .unit:hover{stroke-width: 25;}
    
}