html, body{
    width:100%;
    height:100%;
}
body{
    overflow-x: hidden;
}
header{
    z-index:17;
    background: transparent;
    box-shadow: none;
}
header.sticky{
    background:var(--white-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
main{
    width:100%;
    height:100%;
}
section.mainProducts{
    --mps-height: calc(100% - 75px);
    --mps-direction: row;
    --mps-ratio: 1 / 1.15;
    --mps-product-height:auto;
    --mps-content-padding: 60px 50px;
    --mps-content-font: 70px;
    --mps-certificate-align: right;
    --mps-card-align: left;
    --mps-gap: 30px;
    --mps-figure-bottom: 0;
    --mps-button-padding:12px 22px;
    --mps-button-font: 20px;
    --mps-header-stroke:2px;
    --mps-ps-padding:0;
    --mps-background: #ABCEEF;

    height: var(--mps-height);
}
section.mainProducts .container{
    height: 100%;
}
section.mainProducts .main-product-switch{
    display:flex;
    align-items: center;
    gap: var(--mps-gap);
    height: 100%;
    flex-direction: var(--mps-direction);
    padding: var(--mps-ps-padding);
}
section.mainProducts .main-product-switch .product{
    background: var(--mps-background);
    width: 100%;
    max-height:100%;
    aspect-ratio: var(--mps-ratio);
    border-radius: 20px;
    height: var(--mps-product-height);
    overflow: hidden;
    position: relative;
    cursor:pointer;
    z-index: 3;
    transition: 0.5s;
}
section.mainProducts .main-product-switch .product:hover{
    z-index:2;
}
section.mainProducts .main-product-switch .product.certificate{
    background: linear-gradient(180deg, var(--yellow-color) 0%, var(--light-yelow-color) 100%);
}
section.mainProducts .main-product-switch .product figure{
    width:100%;
    position:absolute;
    bottom:var(--mps-figure-bottom);
    left:0;
    margin:0;
    z-index:2;
}
section.mainProducts .main-product-switch .product figure img{
    width:100%;
    display: block;
    transition: 0.5s;
}
section.mainProducts .main-product-switch .product .content{
    width:100%;
    position:absolute;
    top: 0;
    left:0;
    z-index:3;
    padding: var(--mps-content-padding);
    transition: 0.5s;
    text-align: var(--mps-card-align);
}
section.mainProducts .main-product-switch .product .product-header{
    font-size: var(--mps-content-font);
    color:var(--white-color);
    text-decoration: none;
    line-height: 100%;
    display: block;
    font-weight: 900;
    margin-bottom: 30px;
    transition: 0.5s;
    letter-spacing: 4px;
}
section.mainProducts .main-product-switch .product .blue-btn{
    padding: var(--mps-button-padding);
    font-size: var(--mps-button-font);
    font-weight: 900;
    transition: 0;
    opacity:0;
}
section.mainProducts .main-product-switch .product:hover .blue-btn{
    background:var(--blue-color);
    color: var(--white-color);
    transform: scale(1.1);
    opacity:0;
}

section.mainProducts .main-product-switch .product .blue-btn.flying{
    position:fixed;
    transition: none;
    transform: translateX(-50%) translateY(-50%);
    opacity:1;
}

section.mainProducts .main-product-switch .product.certificate .content{
    text-align: var(--mps-certificate-align);
}
section.mainProducts .main-product-switch .product:hover figure img{
    transform: scale(1.1);
}
section.mainProducts .main-product-switch .product:hover .product-header{
    color:transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: var(--mps-header-stroke) var(--white-color);
}

section.mainProducts .main-product-switch-menu{
    display:none;
    gap:0;
    align-items: center;
    position: relative;
    z-index:12;
}
section.mainProducts .main-product-switch-menu button{
    width:50%;
    padding:10px 25px;
    border:solid 2px var(--main-color);
    color:var(--main-color);
    font-weight: bold;
    border-radius: 30px 0 0 30px;
}
section.mainProducts .main-product-switch-menu button:nth-child(2) {
    border-radius: 0 30px 30px 0;
}
section.mainProducts .main-product-switch-menu button.active{
    background:var(--main-color);
    color:var(--white-color);
}
section.mainProducts .main-product-switch-button{
    display: none;
}


.fly-button-fix{
    z-index:12;
    position: absolute;
    background: transparent;
}
.fly-button-fix.left{
    width:10px;
    left:-10px;
    top:0;
    height:100%;
}
.fly-button-fix.center{
    width:10px;
    left:50%;
    transform: translateX(-50%);
    top:0;
    height:100%;
}
.fly-button-fix.right{
    width:10px;
    right:-10px;
    top:0;
    height:100%;
}
.fly-button-fix.bottom{
    width:100%;
    left:0;
    bottom:-10px;
    height:10px;
}


section.mainProducts .fly-round{
    position:absolute;
    top:0;
    overflow:hidden;
    transition: 0.8s;
}
section.mainProducts .fly-round img{
    position:relative;
    width: 100%;
    height:100%;
    object-fit: contain;
    transition: 0.8s;
}

section.mainProducts .round01{
    width:380px;
    height:380px;
    z-index:16;
    top:30px;
}
section.mainProducts .round01 img{
    left:-40px;
    transform: rotate(-110deg);
    animation: 18s 2s round01-moving infinite;
}

section.mainProducts .round02{
    width:180px;
    height:180px;
    z-index:16;
    top:30px;
    left: calc(50% - 80px);
}
section.mainProducts .round02 img{
    transform: rotate(100deg);
    animation: 15s 0s round02-moving infinite;
}

section.mainProducts .round03{
    width:280px;
    height:320px;
    z-index:16;
    top:0;
    right:0;
}
section.mainProducts .round03 img{
    right:-70px;
    top:-40px;
    transform: rotate(190deg);
    animation: 14s 2s round03-moving infinite;
}

section.mainProducts .round04{
    width:220px;
    height:230px;
    z-index:1;
    top:48%;
    left:7%;
}
section.mainProducts .round04 img{
    transform: rotate(-20deg);
    animation: 10s 2s round04-moving infinite;
}

section.mainProducts .round05{
    width:225px;
    height:210px;
    z-index:16;
    top:40%;
    right:8%;
}
section.mainProducts .round05 img{
    top:0;
    right:0;
    transform: rotate(0deg);
    animation: 8s 2s round05-moving infinite;
}

section.mainProducts .round06{
    width:360px;
    height:350px;
    z-index:16;
    top:auto;
    bottom:-100px;
    left:0;
}
section.mainProducts .round06 img{
    left:-4%;
    top:auto;
    bottom:0;
    transform: rotate(-30deg);
    animation: 22s 1.5s round06-moving infinite;
}

section.mainProducts .round07{
    width:220px;
    height:180px;
    z-index:16;
    top:auto;
    bottom:-20px;
    left:calc(50% - 110px);
}
section.mainProducts .round07 img{
    left:0;
    top:auto;
    bottom:0;
    transform: rotate(0deg);
    animation: 15s 1s round07-moving infinite;
}
section.mainProducts .round08{
    width:400px;
    height:380px;
    z-index:16;
    top:auto;
    bottom:-120px;
    right:0;
}
section.mainProducts .round08 img{
    width:100%;
    height:100%;
    right:-30%;
    top:auto;
    bottom:0;
    transform: rotate(35deg);
    animation: 15s 1s round08-moving infinite;
}

section.mainProducts.position-l .round01,
section.mainProducts.position-l .round04,
section.mainProducts.position-l .round06,
section.mainProducts.position-r .round03,
section.mainProducts.position-r .round05,
section.mainProducts.position-r .round08,
section.mainProducts.position-t .round02,
section.mainProducts.position-b .round07{
    transform: scale(1.2);
}
/*section.mainProducts.position-r .round01,
section.mainProducts.position-r .round04,
section.mainProducts.position-r .round06,
section.mainProducts.position-l .round03,
section.mainProducts.position-l .round05,
section.mainProducts.position-l .round08,
section.mainProducts.position-b .round02,
section.mainProducts.position-t .round07{
    transform: scale(0.9);
}*/

@keyframes round01-moving {
    0%{
        transform: scale(1) rotate(-110deg);
    }
    50%{
        transform: scale(0.90) rotateY(20deg) rotateX(30deg)  rotateZ(-132deg);
    }
    100%{
        transform: scale(1) rotate(-110deg);
    }
}

@keyframes round02-moving {
    0%{
        transform: scale(1) rotate(100deg);
    }
    50%{
        transform: scale(0.90) rotateY(20deg) rotateX(30deg)  rotateZ(23deg);
    }
    100%{
        transform: scale(1) rotate(100deg);
    }
}

@keyframes round03-moving {
    0%{
        transform: scale(1) rotate(190deg);
    }
    50%{
        transform: scale(1.1) rotate(200deg);
    }
    100%{
        transform: scale(1) rotate(190deg);
    }
}

@keyframes round04-moving {
    0%{
        transform: scale(1) rotate(-20deg);
    }
    50%{
        transform: scale(0.8) rotateZ(0deg) rotateX(12deg) translateX(10px);
    }
    100%{
        transform: scale(1)  rotate(-20deg);
    }
}

@keyframes round05-moving {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.8) rotateZ(10deg) rotateX(12deg) translateX(-16px) translateY(-10px);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes round06-moving {
    0%{
        transform: scale(1) rotate(-30deg);
    }
    50%{
        transform: scale(0.8) rotateZ(-30deg) rotateX(12deg) translateX(-16px) translateY(-10px);
    }
    100%{
        transform: scale(1) rotate(-30deg);
    }
}

@keyframes round07-moving {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.8) rotateZ(-30deg) rotateX(12deg) translateX(-16px) translateY(-10px);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes round08-moving {
    0%{
        transform: scale(1) rotate(35deg);
    }
    50%{
        transform: scale(0.8) rotateZ(-35deg) rotateX(12deg) translateX(-16px) translateY(-10px);
    }
    100%{
        transform: scale(1) rotate(35deg);
    }
}





@media (max-width: 480px) {
    section.mainProducts {
        --mps-gap: 30px;
        /*--mps-direction: column;*/
        --mps-ratio: none;
        --mps-content-padding: 40px;
        --mps-content-font: 28px;
        --mps-figure-bottom:0;
        --mps-certificate-align: center;
        --mps-card-align: center;
        --mps-product-height:100%;
        --mps-button-padding:6px 15px;
        --mps-button-font: 14px;
        --mps-header-stroke:1px;
        --mps-ps-padding: 20px 0;
        --mps-background: #accff1;
    }
    section.mainProducts .container{
        overflow: hidden;
        width:100%;
        display: flex;
        flex-direction: column;
        height:100%;

    }
    section.mainProducts .main-product-switch{
        width: calc(200% + 30px);
        transition: 0.5s;
        z-index: 15;
    }
    section.mainProducts .main-product-switch-button{
        padding: 10px 0 30px 0;
        position: relative;
        z-index:16;
        display:block;
    }
    section.mainProducts .main-product-switch-button button{
        width:100%;
        padding:10px 25px;
    }
    section.mainProducts .main-product-switch.swiped{
        transform: translateX(calc(-50% - 15px));
    }
    section.mainProducts .main-product-switch .product{
        max-height:480px;
    }
    section.mainProducts .main-product-switch .product .blue-btn{
        display: none;
    }
    section.mainProducts .round01{
        width:100px;
        height:100px;
        left:0;
        top:85px;
        z-index:0;
    }
    section.mainProducts .round02{
        width:80px;
        height:80px;
        top:110px;
        left: 50%;
        z-index:0;
    }
    section.mainProducts .round03{
        width:80px;
        height:150px;
        top:100px;
    }
    section.mainProducts .round03 img{
        right:-50px;
    }
    section.mainProducts .round04{
        width:180px;
        height:200px;
        z-index:16;
        top:36%;
        left:0;
        display:none;
    }
    section.mainProducts .round04 img{
        left:-40px;
    }
    section.mainProducts .round05{
        width:185px;
        height:160px;
        top:48%;
        right:0;
        display:none;
    }
    section.mainProducts .round05 img{
        right:-50px;
    }
    section.mainProducts .round06{
        width:170px;
        height:170px;
        bottom:0;
        z-index:13;
    }
    section.mainProducts .round06 img{
        left:-100px;
        bottom:0;
    }
    section.mainProducts .round07{
        width:110px;
        height:90px;
        bottom:70px;
        z-index:15;
        left: calc(50% - 20px);
    }
    section.mainProducts .round08{
        width:180px;
        height:150px;
        top:auto;
        z-index:15;
    }
    section.mainProducts .round08 img{
        right: -70px;
    }
    section.mainProducts .main-product-switch-menu{
        display: flex;
    }
}
@media (min-width: 481px) and  (max-width: 768px){
    section.mainProducts {
        --mps-gap: 30px;
        /*--mps-direction: column;*/
        --mps-ratio: none;
        --mps-content-padding: 40px;
        --mps-content-font: 42px;
        --mps-figure-bottom:-40px;
        --mps-certificate-align: center;
        --mps-card-align: center;
        --mps-product-height:100%;
        --mps-button-padding:12px 25px;
        --mps-button-font: 18px;
        --mps-header-stroke:1px;
        --mps-ps-padding: 20px 0;
    }
    section.mainProducts .container{
        overflow: hidden;
        width:100%;
        display: flex;
        flex-direction: column;
        height:100%;
    }
    section.mainProducts .main-product-switch{
        width: calc(200% + 30px);
        transition: 0.5s;
    }
    section.mainProducts .main-product-switch-button{
        padding: 10px 0 30px 0;
        position: relative;
        z-index:17;
    }
    section.mainProducts .main-product-switch-button button{
        width:100%;
        padding:10px 25px;
    }
    section.mainProducts .main-product-switch.swiped{
        transform: translateX(calc(-50% - 15px));
    }
    section.mainProducts .main-product-switch .product{
        max-height:560px;
    }
    section.mainProducts .main-product-switch .product .blue-btn{
        display: none;
    }
    section.mainProducts .round01{
        width:190px;
        height:190px;
        left:0;
        top:85px;
        z-index:0;
    }
    section.mainProducts .round02{
        width:126px;
        height:126px;
        top:80px;
        left: 50%;
        z-index:0;
    }
    section.mainProducts .round03{
        width:120px;
        height:225px;
        top:70px;
    }
    section.mainProducts .round03 img{
        right:-50px;
    }
    section.mainProducts .round04{
        width:138px;
        height:153px;
        z-index:16;
        top:42%;
        left:0;
    }
    section.mainProducts .round04 img{
        left:-40px;
    }
    section.mainProducts .round05{
        width:180px;
        height:160px;
        top:48%;
        right:0;
    }
    section.mainProducts .round05 img{
        right:-50px;
    }
    section.mainProducts .round06{
        width:221px;
        height:221px;
        bottom:0;
        z-index:13;
    }
    section.mainProducts .round06 img{
        left:-100px;
        bottom:0;
    }
    section.mainProducts .round07{
        width:143px;
        height:117px;
        bottom:50px;
        z-index:15;
        left: calc(50% - 60px);
    }
    section.mainProducts .round08{
        width:243px;
        height:195px;
        top:auto;
        z-index:15;
    }
    section.mainProducts .round08 img{
        right: -70px;
    }
    section.mainProducts .main-product-switch-menu{
        display: flex;
    }
}
@media (min-width: 769px) and  (max-width: 1000px){
    section.mainProducts {
        --mps-gap: 25px;
        --mps-ratio: 1 / 1.5;
        --mps-content-padding: 70px 40px;
        --mps-content-font: 32px;
        --mps-product-height:auto;
        --mps-button-padding:6px 15px;
        --mps-button-font: 14px;
        --mps-header-stroke:1px;
        --mps-ps-padding: 20px 0;
    }
    section.mainProducts .main-product-switch .product .blue-btn{
        opacity:1;
    }
    section.mainProducts .round01{
        width:230px;
        height:230px;
        left:-50px;
    }
    section.mainProducts .round02{
        top:50px;
    }
    section.mainProducts .round03{
        width: 220px;
        height: 260px;
    }
    section.mainProducts .round04{
        left:-30px;
    }
    section.mainProducts .round05{
        right:0;
    }
    section.mainProducts .round05 img{
        right: -50px;
    }
    section.mainProducts .round06 img{
        left: -40%;
        top: 40%;
    }
    section.mainProducts .round08 img{
        bottom:-40%;
        right: -40%;
    }
}
@media (min-width: 1001px) and  (max-width: 1200px){
    section.mainProducts {
        --mps-content-padding: 50px 40px;
        --mps-content-font: 42px;
    }
    section.mainProducts .round01{
        top:-60px;
        left:-40px;
    }
    section.mainProducts .round04{
        left:-40px;
    }
}
@media (min-width: 1201px) and  (max-width: 1400px){
    section.mainProducts {
        --mps-content-padding: 50px 70px;
        --mps-content-font: 45px;
    }
}