﻿.top-archive .top-area .insi .ent:before{position:absolute;bottom:0;height:30px;width:200%;background:var(--body);content:"";position:absolute;right:-50%;z-index:10}
.top-archive .top-area .insi{margin-bottom:30px;height:400px;background-color:var(--color);background-image:url('../img/shapes/frame.webp'),url('../img/shapes/frame2.webp');background-repeat:no-repeat, no-repeat;background-position:left bottom, right top;background-size:auto, auto}
.top-archive .top-area .insi:after,.top-archive .top-area .insi .ent:after{content:"";position:absolute;bottom:0;right:0;height:500px;z-index:20;width:100%}
.top-archive .top-area .insi .ent{width:700px;right:calc(50% - 350px);bottom:-30px}
.top-archive .top-area .insi .ent .hale{animation:fa-spin 20s infinite linear;width:740px;max-width:740px;height:550px;right:calc(50% - 370px);top:calc(50% - 425px);z-index:1}
.top-archive .top-area .insi .ent .stage{z-index:11}
.top-archive .top-area .insi .ent .cup-1{left:-80px;bottom:260px;animation:animation-blinkxxxspp 15s ease-in-out infinite alternate}
.top-archive .top-area .insi .ent .cup-2{right:50px;bottom:290px;animation:animation-blinkxxxspp 10s ease-in-out infinite alternate}
.top-archive .top-area .insi .paper-1{right:0;bottom:0;height:100%;opacity:.5}
.top-archive .top-area .insi .paper-2{left:0;bottom:0;height:100%;opacity:.5}
.top-archive .top-area .insi .ins{width:174px;margin:50px calc(50% - 87px) 0}
.top-archive .top-area .insi .ins:before,.top-archive .top-area .insi .ins:after{filter:brightness(100);position:absolute;content:"";width:15px;height:15px;background:url('../img/shapes/deglines.svg') no-repeat center;background-size:100%}
.top-archive .top-area .insi .ins:before{right:0;top:0}
.top-archive .top-area .insi .ins:after{transform:rotate(180deg);bottom:0;left:0}
.top-archive .top-area .insi .ins .titr:after{content:"";position:absolute;bottom:0;height:20px;right:40px;width:calc(100% - 80px);background:#fff;opacity:.15;z-index:0}
.top-archive .top-area .insi .ent .item{width:120px;padding:10px 5px;border:5px rgba(255, 255, 255, 0.2) solid;background:#a8bc4c;z-index:30;box-shadow:0 18px 20px 0 rgba(0, 0, 0, 0.3)}
.top-archive .top-area .insi .ent .item .title a{text-shadow:0 1px 5px rgba(0, 0, 0, 0.3)}
.top-archive .top-area .insi .ent .item.item-1{transform:perspective(800px) rotateX(10deg) rotateY(-5deg) rotate(2deg);right:calc(50% - 60px);bottom:155px}
.top-archive .top-area .insi .ent .item.item-2{transform:perspective(800px) rotateX(10deg) rotateY(-5deg) rotate(2deg) scale(.9);left:calc(16% - 60px);bottom:110px;background:#7daf7e}
.top-archive .top-area .insi .ent .item.item-3{transform:perspective(800px) rotateX(10deg) rotateY(-5deg) rotate(2deg) scale(.85);right:calc(17% - 60px);bottom:82px;background:#918d4b}
.top-archive .top-area .insi .ent .item .pic{width:80px;height:80px;margin:0 calc(50% - 40px);border:2px rgba(255, 255, 255, 0.4) solid}
@keyframes spinScale{ 0% {  transform: scale(1) rotate(0deg); } 50% {  transform: scale(0) rotate(180deg); } 100% {transform: scale(1) rotate(360deg);}}
.top-archive .top-area .insi .ent .item.item-1:before{animation:spinScale 3s linear 1s infinite;content:"";width:50px;height:50px;background:url('../img/shapes/top-9.svg') no-repeat center;background-size:100%;position:absolute;left:-20px;top:-20px}
.top-archive .top-area .insi .ent .item.item-1:after{animation:spinScale 3s linear 2s infinite;content:"";width:40px;height:40px;background:url('../img/shapes/top-1.svg') no-repeat center;background-size:100%;position:absolute;right:-20px;bottom:-20px}
.top-archive .top-area .insi .ent .item.item-2:before{animation:spinScale 3s linear 3s infinite;content:"";width:40px;height:40px;background:url('../img/shapes/top-2.svg') no-repeat center;background-size:100%;position:absolute;left:-20px;top:-20px}
.top-archive .top-area .insi .ent .item.item-3:before{animation:spinScale 3s linear 4s infinite;content:"";width:40px;height:40px;background:url('../img/shapes/top-2.svg') no-repeat center;background-size:100%;position:absolute;right:-20px;top:-20px}
.top-archive .entery{display:flex;flex-wrap:wrap;margin:30px 0 40px}
.top-archive .entery .item{flex:1 0 calc(25% - 15px);max-width:calc(25% - 15px);margin:7.5px;border:2px #8ECF85 solid}
.top-archive .entery .item .ins{background:linear-gradient(to right,#EEF9ED,#fff);padding:15px;border:1px #8ECF85 solid}
.top-archive .entery .item .ins .adad{width:42px;font-family:var(--adad);margin-left:10px;padding:16px 0}
.top-archive .entery .item .pic-area{width:68px}
.top-archive .entery .item .pic-area .pic{height:68px}
.top-archive .entery .item header{width:calc(100% - 133px)}
.top-archive .entery .item header .title a.titr-ltr{direction:ltr;text-align:right}
.top-archive .entery .item header .title a{border-bottom:2px var(--blur) dashed;padding-bottom:10px;margin-bottom:10px}
.top-archive .entery .item header .inf{margin-right:15px}
.top-archive .entery .item header .inf.right{margin-right:0}
.top-archive .entery .item header .inf i{width:20px;height:20px;margin-left:5px}
.dark-mode .top-archive .entery .item header .title a,.dark-mode .top-archive .entery .item header .inf{color:#fff}
.dark-mode .top-archive .entery .item .ins{background:linear-gradient(to right,rgba(84, 178, 71, 0.2),#2e2e2e)}
.dark-mode .top-archive .entery .item,.dark-mode .top-archive .entery .item .ins{border-color:#516f61}


.top-archive.top-consolepage{--color:#03B6DA;}
.top-archive.top-consolepage .top-area .insi .ins{width:270px;margin:50px calc(50% - 135px) 0}
.top-archive.top-consolepage .entery .item,.top-archive.top-consolepage .entery .item .ins{border-color:#90d8e6}
.top-archive.top-consolepage .entery .item .ins{background:linear-gradient(to right,#baf2fe,#fff)}
.top-archive.top-consolepage .top-area .insi .ent .hale{filter:brightness(10)}
.dark-mode .top-archive.top-consolepage .entery .item .ins{background:linear-gradient(to right,#09788e,#224857)}
.dark-mode .top-archive.top-consolepage .entery .item,.dark-mode .top-archive.top-consolepage .entery .item .ins{border-color:#04677b}



@media only screen and (min-width:920px){
.top-archive .top-area .insi .ent .item:hover{transform:perspective(800px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1)}
.top-archive .top-area .insi .ent .item.item-1:hover{transform:perspective(800px) rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1.1)}
.top-archive .entery .item:hover .ins{box-shadow:0 0 10px 0 rgba(0, 0, 0, .15);transform:translate(-10px,-10px) scale(1.03);background:#fff;border-color:transparent !important}
.dark-mode .top-archive .entery .item:hover .ins{background:#3c3e3e;border-color:transparent !important}

.top-archive.top-consolepage .entery .item:hover .ins{background:#fff !important;border-color:transparent !important}
.dark-mode .top-archive.top-consolepage .entery .item:hover .ins{background:#3c3e3e !important;border-color:transparent !important}

}
@media only screen and (max-width:1200px){
.top-archive .entery .item{flex:1 0 calc(33.33% - 15px);max-width:calc(33.33% - 15px)}
}
@media only screen and (max-width:920px){
.top-archive .entery{margin:20px 0 30px;width:calc(100% + 15px);transform:translateX(7.5px)}
.top-archive .entery .item{border-radius:12px}
.top-archive .entery .item .pic-area{width:50px;border-radius:10px}
.top-archive .entery .item .pic-area .pic{height:50px;border-radius:10px}
.top-archive .entery .item header .title{font-size:14px;text-align:center}
.top-archive .entery .item header .title a{padding-bottom:5px;margin-bottom:5px;text-align:center !important}
.top-archive .entery .item .ins .adad{font-size:21px;width:30px;padding:13px 0}
.top-archive .entery .item header{width:calc(100% - 105px)}
.top-archive .entery .item header .inf{font-size:13px;margin-left:10px}
.top-archive .entery .item header .inf:last-child{margin-left:0}
.top-archive .entery .item header .inf i{width:16px;height:16px;margin-left:2px;margin-top:2px}

.top-archive.top-consolepage .top-area .insi .ins{width:220px;margin:30px calc(50% - 110px) 0}

}
@media only screen and (max-width:750px){
.top-archive .entery{width:calc(100% + 10px);transform:translateX(5px)}
.top-archive .entery .item{flex:1 0 calc(50% - 10px);max-width:calc(50% - 10px);margin:5px}
.top-archive .top-area .insi{height:280px}
.top-archive .top-area .insi .ins{margin:30px calc(50% - 65px) 0;width:130px}
.top-archive .top-area .insi .paper-1,.top-archive .top-area .insi .paper-2{display:none}
.top-archive .top-area .insi .ins .titr::after{width:calc(100% - 20px);right:10px}
.top-archive .top-area .insi .ins .titr{font-size:20px}
.top-archive .top-area .insi .ent .cup-1{left:0;bottom:180px}
.top-archive .top-area .insi .ent .cup-2{right:0;bottom:190px}
.top-archive .top-area .insi .ent{width:380px;right:calc(50% - 190px)}
.top-archive .top-area .insi .ent .hale{top:calc(50% - 340px);width:600px;height:446px;max-width:600px;right:calc(50% - 300px)}
.top-archive .top-area .insi .ent .item{width:100px;padding:5px}
.top-archive .top-area .insi .ent .item.item-1{bottom:84px;right:calc(50% - 50px)}
.top-archive .top-area .insi .ent .item.item-2{bottom:56px;left:calc(16% - 50px)}
.top-archive .top-area .insi .ent .item.item-3{bottom:38px;right:calc(17% - 50px)}
}
@media only screen and (max-width:520px){
.top-archive .entery .item{border-radius:10px}
.top-archive .entery .item .ins .adad{float:left;margin:7px 0 0 0;text-align:left;padding:0;font-size:50px;opacity:.5;width:calc(100% - 90px);direction:ltr}
.top-archive .entery .item .pic-area{width:70px}
.top-archive .entery .item .pic-area .pic{height:70px}
.top-archive .entery .item .ins{padding:10px;border:0}
.top-archive .entery .item header{width:100%;margin-top:10px}
.top-archive .entery .item header .inf:last-child{float:left}
}
@media only screen and (max-width:400px){
.top-archive .entery .item .ins .adad{font-size:38px;margin-top:10px}
}