html, body {position: relative;height: 100%; overflow: hidden;}
body{background: url(../images/guide.webp) no-repeat center;background-size: cover;display: flex;align-items: center;}
.container{  max-width:1000px;}
.home-logo{text-align: center}
.home-logo img{width:300px}
.boxlist{display:grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: auto;gap: 4rem;margin-top:3rem ;}
.boxlist .boxli{position:relative;text-align:center;transition:all 0.5s linear;    border-radius: 1rem;overflow: hidden;background: #000000d4;}
.boxlist .boxli .box-title { background: #cc0000;font-weight: bold;color: #fff;font-size:1.2rem;  height: 2.8rem;line-height: 2.5rem; overflow: hidden;}
.boxlist .boxli  a{ text-decoration: none;}
.boxlist .boxli:hover{transform: scale(1.1);}
.boxlist .boxli  .box-img img{width: 100%;}
.boxlist .boxli  .box-content{padding: 1rem;;}
.boxlist .boxli  .box-content p{font-weight: bold;margin:0px}
.boxlist .boxli  .box-content p:first-child{color:#fddf6b;font-size: 1.2rem;}
.boxlist .boxli  .box-content .time{color:#fff;  padding: 0.5rem;}
.boxlist .boxli .btn { background: #cc0000; color: #fff; padding: 0.5rem 1.5rem; margin: 0.3rem;}
.footer { text-align: center;margin: 0px;line-height: 1rem; margin-top: 3rem;color: #fff;text-shadow: 0 0 4px #434343, 0 0 10px rgb(130 130 130);}
.footer a{color:#fddf6b}
.home-warp{position: relative;z-index: 1;}
.smoke-bg {position: fixed;width: 100%;height: 600px;left: 0px;bottom: 0px;overflow: hidden;pointer-events: none;}
.smoke-bg ul{display: flex; height: 100%; animation: yd 10s linear infinite;}
.smoke-bg ul li {list-style: none;width: 1333px;}
.smoke-bg ul li img{width: 1333px;height: auto;}
@keyframes yd{
to{transform: translate(-1333px); }
}

@media screen and (min-width: 2000px) {
:root{font-size: 18px;}
.container {max-width: 1200px;}
}

@media screen and (max-width:768px){
.boxlist{grid-template-columns: repeat(1, 1fr); gap: 2rem;padding: 20px;margin-top:0px}
html, body {height: auto; overflow: initial;}
.boxlist .boxli .btn{width: 100%}
.footer {margin-top: 11px;line-height: 22px;color: #8d8d8d;text-shadow: none;}
.footer a {color: #707070;}
.footer p{margin: 0;font-size: 12px;}
body {background: url(../images/guide-m.png) no-repeat center; background-size: 100%;background-position: 0 -50px; }
.home-logo{text-align: left; height:213px}
.home-logo img{width: 94px;position: relative;left: -10px;top: 5px;}
.boxlist {padding: 0;gap: 1rem;}
.smoke-bg {display: none;}
}