.typelist { font-size: 0; padding: 1rem; height: 100%; overflow: hidden; }

.typelist img { width: 100%; height: 100%; object-fit: contain; }

.typelist a { display: block; padding: 0.2rem; height: 100%; box-sizing: border-box; }

.typelist a > div { position: relative; }

.typelist a .title, .typelist a .img { position: absolute; }

.typelist a .title { width: 1.5rem; left: 1.5rem; top: 1.7rem; }

.typelist .firstbox { display: flex; height: 25.8%; }

.typelist .firstbox a { width: 50%; }

.typelist .tq, .typelist .jyq { height: 100%; }

.typelist .tq { background: #b2c2c2; }

.typelist .tq .img { width: 57%; height: 78%; right: 12%; bottom: 2%; }

.typelist .jyq { background: #ddd0c0 url(../img/type/jyq-bg.jpg) no-repeat center top/100% auto; }

.typelist .jyq .img { width: 114%; right: -4%; bottom: -8%; height: 81%; }

.typelist .secbox { height: 22.2%; }

.typelist .ysq { height: 100%; background: url(../img/type/ysq-bg.jpg) repeat center/30%; }

.typelist .ysq .img { width: 97%; right: 1.5%; bottom: 0%; height: 93%; }

.typelist .thirdbox { display: flex; height: 52%; }

.typelist .thirdbox > a:first-child { width: 44%; flex-shrink: 0; }

.typelist .tcq { height: 100%; background: #7d998a url(../img/type/tcq-bg.jpg) no-repeat top center/100% auto; }

.typelist .tcq .img { width: 104%; right: -2%; bottom: 7%; height: 71%; }

.typelist .fourbox { display: flex; flex-flow: column; width: 100%; overflow: hidden; }

.typelist .fourbox > a { height: 50%; }

.typelist .fourbox .sk, .typelist .fourbox .qt { height: 100%; background: url(../img/type/sk-bg.jpg) no-repeat top center/cover; }

.typelist .fourbox .sk { background-image: url(../img/type/sk-bg.jpg); background-position-y: bottom; overflow: hidden; }

.typelist .fourbox .sk .img { width: 82%; right: 0; bottom: 0; height: 90%; }

.typelist .fourbox .qt { background-image: url(../img/type/qt-bg.jpg); }

.typelist .fourbox .qt .img { width: 96%; right: -2%; bottom: 1%; height: 88%; }

@keyframes fadeInUp10 { 0% { opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); }
  100% { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUp10 { -webkit-animation-name: fadeInUp10; animation-name: fadeInUp10; }