.is-topbar {
    background: none !important;
    /* background: linear-gradient(180deg, rgba(132,132,132,0.4744748241093313) 0%, rgba(82,82,82,0.3428221630449054) 35%, rgba(252,252,252,0.19716389973958337) 100%); */
}
.menu > li a {
    color: rgba(3,3,3,1) !important;
}
.container{
    position: absolute;
    left:45%;
    top:45%;
    transform: translate(-45%,-45%);
    width:80% !important;
    height:80% !important;
    padding:50px;
    background-color: #f5f5f5;
    box-shadow: 0 10px 20px #303030;
}
#slide{
    width:max-content;
    margin-top:50px;
}
.item{
    width:200px;
    height:300px;
    background-position: 50% 50%;
    display: inline-block;
    transition: 0.5s;
    background-size: cover;
    position: absolute;
    z-index: 1;
    top:50%;
    transform: translate(0,-50%);
    border-radius: 20px;
    box-shadow:  0 10px 20px #303030;
}
.item:nth-child(1),
.item:nth-child(2){
    left:0;
    top:0;
    transform: translate(0,0);
    border-radius: 0;
    width:100%;
    height:100%;
    box-shadow: none;
}
.item:nth-child(3){
    left:62%;
}
.item:nth-child(4){
    left:calc(63% + 220px);
}
.item:nth-child(5){
    left:calc(64% + 440px);
}
.item:nth-child(n+6){
    left:calc(65% + 660px);
    opacity: 0;
}
.item .content{
    position: absolute;
    top:38%;
    left:100px;
    width:420px;
    text-align: left;
    padding:0;
    color:#eee;
    transform: translate(0,-50%);
    display: none;
    font-family: system-ui;
}
.item:nth-child(2) .content{
    display: block;
    z-index: 11111;
}
.item .name{
    font-size: 58px;
    font-weight: bold;
    opacity: 0;
    animation:showcontent 1s ease-in-out 1 forwards
}
.item .des{
    font-size: 28px;
    margin: 0 0 20px 0;
    opacity: 0;
    animation:showcontent 1s ease-in-out 0.3s 1 forwards
}
.item button{
    padding:10px 20px;
    border:none;
    opacity: 0;
    animation:showcontent 1s ease-in-out 0.6s 1 forwards
}
@keyframes showcontent{
    from{
        opacity: 0;
        transform: translate(0,100px);
        filter:blur(33px);
    }to{
        opacity: 1;
        transform: translate(0,0);
        filter:blur(0);
    }
}
.buttons{
    position: absolute;
    bottom:30px;
    z-index: 222222;
    text-align: center;
    width:100%;
}
.buttons button{
    width:50px;
    height:50px;
    border-radius: 50%;
    border:1px solid #555;
    transition: 0.5s;
}.buttons button:hover{
    background-color: #bac383;
}

@media only screen and (max-width: 767px) { 
    .item .content{
        position: absolute;
        top:38%;
        left:10%;
        width:80% !important;
        text-align: left;
        padding:0;
        color:#eee;
        transform: translate(0,-50%);
        display: none;
        font-family: system-ui;
    }
    .item .name{
        font-size: 38px;
        font-weight: bold;
        opacity: 0;
        animation:showcontent 1s ease-in-out 1 forwards
    }
    .item .des{
        font-size: 22px;
        margin: 0 0 20px 0;
        opacity: 0;
        animation:showcontent 1s ease-in-out 0.3s 1 forwards
    }
}

@media only screen and (max-width: 1200px) { 
    .container{
        left: 50%;
        top: 45%;
        transform: translate(-50%,-45%);
        width: 80% !important;
        height: 80% !important;
        padding: 50px;
        background-color: #f5f5f5;
        box-shadow: 0 10px 20px #303030;
    }

    .item:nth-child(3),
    .item:nth-child(4),
    .item:nth-child(5),
    .item:nth-child(6){
        left:50%;
        opacity: 0;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1679px) {
    body:not(.is-print) .is-section.height-auto {
        height: 100vh !important;
    }
    .container{
        left: 50%;
        top: 45%;
        transform: translate(-50%,-45%);
        width: 80% !important;
        height: 80% !important;
    }
    .item{
        width:160px;
        height:230px;
    }

    .item:nth-child(3){
        left:58%;
    }
    .item:nth-child(4){
        left:calc(59% + 170px);
    }
    .item:nth-child(5){
        left:calc(60% + 340px);
    }
    .item:nth-child(n+6){
        left:calc(61% + 510px);
        opacity: 0;
    }
}

@media only screen and (max-width: 1680px) { 
    body:not(.is-print) .is-section.height-auto {
        height: 100vh !important;
    }
    .buttons{
        left: 0;
    }
}