:root{--bg:#15c8d1;--hcr:#A1E9ED;--bgcr:#008b92;--btn:#FFF;--wh:1208px;--whb20:1168px;}
body{margin:0;background:var(--bg);font-size:14px;}
i,s,u,em{font-style:normal;text-decoration:none;}
dl,dd,dt,p,ul,li{margin:0;padding:0;list-style:none;} 
a{text-decoration:none;}
a:hover{text-decoration:underline;}
header{background:#FFFFFF99;height:60px;}
header > div,footer > div{height:100%;margin:0 auto;max-width:var(--wh);}
header > div{display:flex;}
header img{height:100%;}
header a{display:inline-block;height:90%;vertical-align:bottom;color:#FFF;margin-top:3px;}
header > div > div{text-align:right;flex:1;white-space:nowrap;overflow-x:auto;font-size:16px;}
header > div > div a{height:30px;line-height:28px;background:var(--bg);margin:15px 0 0 15px;padding:2px 10px 2px 2px;border-radius:5px;}
header > div > div a img{height:100%;vertical-align:middle;margin:0 5px 0 0;border-radius:3px 0 0 3px;display:inline-block;float:left;}
header > div > div a:nth-child(n+9){display:none;}
header > div > div a i{display:none;}

#main{margin:20px auto 0;display:flex;gap: 20px;max-width:var(--wh);}
#main >div{width:200px;flex-shrink: 0;}

#main #game{flex:1;box-shadow:0px 3px 5px 3px #5d6b8433;}
#main #game dd{display:block;}
#main #game iframe{flex:0 0 1;width:100%;height:580px;display:block;background:#F8F8F8;}
#main #game dt{display:block;background:#F8F8F8;padding:10px;}
#main #game dt img{width:40px;height:40px;display:inline-block;border-radius:5px;margin-right:10px;vertical-align:middle;}
#main #game dt span{float:right;}
#main #game dt span svg{margin:10px 10px 0 0;}
#main #game dt a{font-size:16px;color:var(--bgcr);}

body.full{overflow:hidden;}
body.full #main{width:100%;height:100%;max-width:100%;position: fixed;margin:0;left:0;top:0;z-index:99999;}
body.full #main #game {display: flex;height:100%;left:0;z-index:2;position:absolute;top:0;width:100%;flex-direction: column;flex-grow: 0;}
body.full #main #game dd{border:0;flex-grow: 1;}
body.full #main #game iframe{height:100%;}

#path{margin:20px auto 0;max-width:var(--wh);}
#path a,#path span{color:#FFF;margin:0 10px 0 0;padding:0 15px 0 0;position:relative;}
#path a::after{position:absolute;border-right:2px solid #EEE;border-top:2px solid #EEE;content:'';display:inline-block;width:4px;height:4px;-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);right:0;top:7px;}
#path a:first-child{padding-left:22px;}
#path a:first-child::before{content:'';width:18px;height:18px;display:inline-block;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjRkZGIj48cGF0aCBkPSJNMTYwLTE2MHYtMzc1bC03MiA1NS00Ny02MyA0MzktMzM3IDQ0MCAzMzYtNDggNjQtMzkyLTMwMC0yNDAgMTg0djM1NmgxNjB2ODBIMTYwWm01NDAgOTVxLTQyIDI5LTkyLjUgMjQuNVQ1MjEtODFxLTM2LTM2LTQwLjUtODYuNVQ1MDUtMjYwcS0yOS00Mi0yNC41LTkyLjVUNTIxLTQzOXEzNi0zNiA4Ni41LTQwLjVUNzAwLTQ1NXE0Mi0yOSA5Mi41LTI0LjVUODc5LTQzOXEzNiAzNiA0MC41IDg2LjVUODk1LTI2MHEyOSA0MiAyNC41IDkyLjVUODc5LTgxcS0zNiAzNi04Ni41IDQwLjVUNzAwLTY1Wm0wLTk4IDQ2IDMycTE4IDEzIDM5IDExdDM3LTE4cTE2LTE2IDE4LTM3dC0xMS0zOWwtMzItNDYgMzItNDZxMTMtMTggMTEtMzl0LTE4LTM3cS0xNi0xNi0zNy0xOHQtMzkgMTFsLTQ2IDMyLTQ2LTMycS0xOC0xMy0zOS0xMXQtMzcgMThxLTE2IDE2LTE4IDM3dDExIDM5bDMyIDQ2LTMyIDQ2cS0xMyAxOC0xMSAzOXQxOCAzN3ExNiAxNiAzNyAxOHQzOS0xMWw0Ni0zMlptMC00N3EyMSAwIDM1LjUtMTQuNVQ3NTAtMjYwcTAtMjEtMTQuNS0zNS41VDcwMC0zMTBxLTIxIDAtMzUuNSAxNC41VDY1MC0yNjBxMCAyMSAxNC41IDM1LjVUNzAwLTIxMFpNNDgwLTQ3MFptMjIwIDIxMFoiLz48L3N2Zz4=') no-repeat center center / 100% 100%;position:absolute;left:0;top:1px;}
#path a:last-child::after{display:none;}
#more{max-width:var(--wh);margin:20px auto 0;}
#more h2{color:#FFF;}

#cls{max-width:var(--whb20);margin:20px auto 0;background:#FFF;padding:20px;}
#cls h1{margin-top:0;font-size:25px;}
#cls::after{content:'';clear:both;display:block;}
#cls img{float:right;height:200px;}
#cls > div{max-height:300px;overflow-y:auto;}
#cls > div h2,#cls > div h3{font-size:16px;}
#cls > div p{margin:0 0 20px;}
#cls > div ul{padding:0 0 0 20px;}
#cls > div li{margin:0 0 10px;}

.p404{text-align:center;padding-bottom:40px;}
.p404 h2{margin:100px 0;color:#666;}
.p404 a{background:var(--bg);color:#FFF !important;padding:10px 20px;}

.als a{display:inline-block;position:relative;text-align:center;align-items:center;justify-content: center;border-radius:16px;overflow:hidden;}
.als.his a:before{content:'';display:inline-block;width:23px;height:23px;padding:1px;position:absolute;right:5px;top:5px;border-radius:50%;background:#FFF url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjMTVjOGQxIj48cGF0aCBkPSJNNDgwLTEyMHEtMTM4IDAtMjQwLjUtOTEuNVQxMjItNDQwaDgycTE0IDEwNCA5Mi41IDE3MlQ0ODAtMjAwcTExNyAwIDE5OC41LTgxLjVUNzYwLTQ4MHEwLTExNy04MS41LTE5OC41VDQ4MC03NjBxLTY5IDAtMTI5IDMydC0xMDEgODhoMTEwdjgwSDEyMHYtMjQwaDgwdjk0cTUxLTY0IDEyNC41LTk5VDQ4MC04NDBxNzUgMCAxNDAuNSAyOC41dDExNCA3N3E0OC41IDQ4LjUgNzcgMTE0VDg0MC00ODBxMCA3NS0yOC41IDE0MC41dC03NyAxMTRxLTQ4LjUgNDguNS0xMTQgNzdUNDgwLTEyMFptMTEyLTE5Mkw0NDAtNDY0di0yMTZoODB2MTg0bDEyOCAxMjgtNTYgNTZaIi8+PC9zdmc+') no-repeat center center/ 100% 100%;}
.als a img{display:block;width:100%;height:100%;box-shadow:0px 7px 10px 4px #5d6b844d;}
.als a span{bottom: 0;color: #fff;left: 0;padding: 6px;position: absolute;right: 0;z-index: 6;-webkit-font-smoothing: antialiased;opacity: 0;pointer-events: none;text-align: center;transform: translateY(8px);transition: transform .3s cubic-bezier(.25,.1,.25,1) .1s,opacity .3s cubic-bezier(.25,.1,.25,1) .1s}
.als a:after {background: linear-gradient(#0000 25%,#0000004d);border-radius: 16px;bottom: 0;contain: strict;content: "";height: 100%;left: 0;opacity: 0;position: absolute;transition: opacity .3s cubic-bezier(.25,.1,.25,1);width: 100%;z-index: 5}
.als a:hover:after {box-shadow: 0px 12px 16px 8px #5d6b844d;opacity: 1}
.als a:hover {transform: scale(1.04) translateY(-4px);transition-duration: .3s}
.als a:hover span {opacity: 1;transform: translate(0);}

#more .als{display: grid;gap: 20px;grid-template-columns: repeat(8, 1fr);}
#more .als2{display: grid;gap:20px;grid-template-columns: repeat(4, 1fr);height:auto;margin-top:20px;}
#more .als2 a{height:120px;background:#FFFFFF90;border-radius:16px;overflow:hidden;font-size:23px;color:var(--bgcr);white-space:normal;word-break:break-all;white-space:pre-wrap;}

#more .als2 a:hover,#info a.play-img img:hover,#main #game dt a:hover img{text-decoration:none;transform: scale(1.04) translateY(-4px);transition-duration: .3s;box-shadow: 0px 12px 16px 8px #5d6b844d;}
#info h1 a:hover{text-decoration:none;transform: scale(1.04) translateY(-4px);transition-duration: .3s;box-shadow: 0px 6px 8px 4px #5d6b844d;}

#more .als2 a img{width:auto;height:100%;margin:0 10px 0 0;vertical-align:middle;}
#main>div a{width:calc(50% - 10px);vertical-align:middle;margin:0 5px 15px 5px;font-size:12px;}

#info{
    max-width:var(--whb20);
    margin:20px auto 0;
    background:#FFF;
    padding:20px;
    box-shadow:0px 7px 10px 4px #5d6b844d;
}
#info #mr{margin:0 0 10px;}
#info #mr span{background:#BBB;margin:0 5px 5px 0;color:#F8F8F8;padding:0 10px;border-radius:5px;}
#info a{color:var(--bg);}
#info > ul li{display:inline-block;margin:10px 15px 0 0;background:var(--bg);border-radius:10px;}
#info > ul li a{display:block;padding:5px 15px;color:#FFF;}
#info h1 a{font-size:23px;font-weight:400;background:var(--bg);color:var(--btn);border-radius:30px;padding:0 15px;display:inline-block;margin:0 0 0 10px;animation: autoScale 1.8s ease-in-out infinite;}
@keyframes autoScale {0%   { transform: scale(1); }50%  { transform: scale(1.1); }100%{ transform: scale(1); }}
#det{max-height:400px;overflow-y:auto;margin-bottom:20px;padding-bottom:20px;}
#det a.play-img{float:right;max-width:30%;margin:0 20px 20px 20px;}
#det a.play-img span{margin:20px auto 0;display:block;width:30%;text-align:center;}
#det img{width:100%;display:block;border-radius:10px;box-shadow:0px 3px 5px 2px #5d6b844d;}
#info::after{content:'';display:block;clear:both;}
footer{
    margin:20px auto 0;
    padding:20px 0 30px;
    background:var(--hcr);
    color:var(--bgcr);
    text-align:center;
    font-size:16px;
    line-height:2;
}
footer a{
    color:var(--bgcr);
    margin:0 10px;
}

@media (max-width: 1440px) {
    
}
@media (max-width: 1220px) {
    header > div, footer > div,#path,#main,#info,#more,#cls{
        margin-left:20px;margin-right:20px;
    }
    header > div > div a{margin:15px 0 0 10px;}
    #det a.play-img{max-width:40%;}
    header > div > div a:nth-child(n+7){display:none;}
}

@media (max-width: 992px) {
    #more .als{gap:15px;grid-template-columns: repeat(6, 1fr);}

    #more .als2{gap:15px;grid-template-columns: repeat(3, 1fr);}
    #more .als2 a{height:100px;font-size: 18px;}

    #main > div:nth-child(1){display:none;}
   
    header > div span{width:35px;display:inline-block;margin-top:20px;height:18px;position:absolute;right:20px;border-bottom:4px solid var(--btn);border-top:4px solid var(--btn);cursor:pointer;}
    header > div span::before{content:'';width:100%;height:4px;background:var(--btn);display:block;margin:7px 0;}
    header > div > div a:nth-child(n+7){display:block;}
    header > div > div{display:none;}
    body:has(.open){overflow:hidden;}
    header > div.open > div{display:block;position:fixed;right:0;top:60px;height:calc(100vh - 100px);width:calc(50% - 20px);background:#000000AA;z-index:10000;padding:10px 10px 30px;}
    header > div.open > div a{display:block;text-align:center;border-radius:0;margin:0 0 1px;}
    header > div.open > div a i{display:inline-block;}
    header > div.open > div a{height:auto;padding:2px 0 2px 5px;text-align:left;display:block;overflow:hidden;line-height:40px;font-size:14px;}
    header > div.open > div a img{width:40px;height:40px;border-radius:5px;margin:0 10px 0 0;}
    header > div.open span{border-right:4px solid var(--btn);width:20px;height:20px;border-top:0;transform: rotate(45deg);margin-top:15px;}
    header > div.open span::before{display:none;}
}

@media (max-width: 768px) {
    #more .als{gap:15px;grid-template-columns: repeat(4, 1fr);}
    .als a span{font-size:12px;}
    #main{display:block;margin-top:10px;}

    #cls h1{font-size:18px;}
    
    #main .als{width:auto;display:grid;gap: 15px;grid-template-columns: repeat(4, 1fr);margin-top:20px;}
    #main .als:nth-child(1){display:grid;gap:5px;grid-template-columns: repeat(6, 1fr);margin:0 0 5px;}
    #main>div a{width:100%;margin:0;}
    #main .als:nth-child(1) a{    border-radius:10px;}
    #more .als2{grid-template-columns: repeat(2, 1fr);}
    #more .als2 a{height:60px;font-size: 14px;}
    #info > ul li{margin: 5px 8px 5px 0;}
}
@media (max-width: 480px) {
    #det a.play-img{width:50%;margin: 0 0 10px 10px;}
    footer{font-size:13px;}
    footer a{margin:0 3px;}
    #cls{font-size:13px;}
    #cls img{display:block;height:100px;}
    #cls h1{font-size:16px;}
    #cls > div{clear:both;}
    #cls h2,#cls h3{font-size:13px;}
    #info > ul li a{padding: 3px 8px;}
    .als.his a:before{width:15px;height:15px;}
}   
@media (min-width: 480px) {
    ::-webkit-scrollbar{width: 4px;height: 4px;background-color: rgba(255,255,255,.2);}
    ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 2px;background-color: rgba(255,255,255,.2);}
    ::-webkit-scrollbar-thumb{border-radius: 2px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: rgba(70,70,70,.5);}
}