@charset "utf-8";
/* CSS Document */
html {scroll-behavior:smooth;}
body {background-color:#3accca;}
.wrap {width:14rem;}
.header {height:7.89rem;text-indent:-100%;background:url("http://ats.chinataiwan.cn/other/2024/jkzxtqtqzjzmg/images/banner.png") center top no-repeat;background-size:auto 100%;overflow:hidden;}
.years .list {font-size:0;line-height:0em;text-align:center;}
.years .list-item {display:inline-block;vertical-align:middle;margin:1em 0.5em 0;font-size:24px;line-height:2em;font-weight:bold;overflow:hidden;}
.years .list-item a {position:relative;margin:2px;padding:0 1em;color:#3accca;outline:1px solid #3accca;background:#fff;}
.years .list-item a:before {position:absolute;left:-2px;top:-2px;content:"";display:block;width:calc(100% + 4px);height:calc(100% + 4px);transform-origin:left bottom;transform:rotate(-90deg);transition:transform 0.3s ease 0s;background:#3accca;z-index:-1;}
.main {margin-top:0.4rem;}
.type1.list {perspective:500px;}
.type1 .list-item {transform-style:preserve-3d;width:6.4rem;margin:0 auto;padding:0.44rem 0.59rem 0.61rem 0.37rem;font-size:0.24rem;line-height:1.5em;transition:transform 0.1s ease-in 0s,box-shadow 0.1s ease-in 0s;background:url("http://ats.chinataiwan.cn/other/2024/jkzxtqtqzjzmg/images/bg_item.png") center center no-repeat;background-size:auto 100%;overflow:hidden;}
.type1 .list-item.scaled {box-shadow:7px 7px 10px #999,-7px -7px 12px rgba(255, 255, 255, 0.9),0px 0px 0px rgba(255, 255, 255, 0.9),inset 0 0 0 rgba(0, 0, 0, 0.4);transform:scale(1.01);}
.type1 .list-item>a {position:relative;outline:1px solid #e9e9e9;overflow:hidden;}
.type1 .list-item>a:after {position:absolute;left:0;top:0;content:"";display:block;width:100%;height:100%;}
.type1 .list-item.error>a {background:linear-gradient(to right,#000,#000) center center no-repeat;overflow:hidden;background-size:16em 3em;}
.type1 .list-item.error>a:before,.type1 .list-item.error>a:after {position:absolute;left:0;top:0;content:"ERROR";display:block;width:100%;height:100%;line-height:4.26rem;font-size:0.6rem;font-weight:bold;text-align:center;text-indent:calc(0.5em - 0.05rem);letter-spacing:0.5em;}
@supports(mix-blend-mode:lighten){
.type1 .list-item.error>a:before,.type1 .list-item.error>a:after {text-align:center;color:aqua;background:transparent;animation:error 0.95s ease 0s infinite;}
.type1 .list-item.error>a:after {text-indent:calc(0.5em + 0.05rem);color:red;mix-blend-mode:lighten;animation:error 1s ease 0s infinite;}
@keyframes error {
0% {transform:translate(-1px,2px);}
10% {transform:translate(-2px,1px);}
20% {transform:translate(0px,1px);}
30% {transform:translate(0px,0px);}
40% {transform:translate(-1px,-1px);}
50% {transform:translate(1px,0px);}
60% {transform:translate(-1px,1px);}
70% {transform:translate(0px,-1px);}
80% {transform:translate(1px,-1px);}
90% {transform:translate(2px,0px);}
100% {transform:translate(1px,1px);}
}
}
.type1 .list-item>a:after {background:#fff;z-index:1;}
.type1 .list-item.pending>a:before,.type1 .list-item.pending>a:after,.type1 .list-item.ready>a:after {position:absolute;left:50%;top:50%;content:"";display:block;width:30%;height:calc(30% * 1.5);border:0.1rem solid #3accca;border-color:#3accca #3accca transparent transparent;border-radius:50%;transform:translate(-50%,-50%) rotate(0deg);animation:loading 2s ease 0s infinite;}
.type1 .list-item.pending>a:after {width:calc(30% - 0.02rem);height:calc((30% - 0.02rem) * 1.5);border-width:0.13rem;border-color:#b4f4f2 #b4f4f2 transparent transparent;animation-timing-function:ease-in-out;background:none;}
@keyframes loading {
100% {transform:translate(-50%,-50%) rotate(360deg);}
}
.type1 .list-item.ready>a:after {width:100%;height:100%;border:none;border-radius:0;animation:blur 1s ease-in 0s 1 forwards;transform:translate(-50%,-50%) scale(1);background:rgba(255,255,255,0.5);}
@supports(backdrop-filter:blur(0.1rem)){
.type1 .list-item.ready>a:after {backdrop-filter:blur(0.1rem);}
}
@keyframes blur {
100% {transform:translate(-50%,-50%) scale(0);}
}
.type1 .list-item img {width:100%;height:4.26rem;outline:1px solid #e9e9e9;opacity:0;}
.type1 .list-item.ready img {opacity:1;}
.type1 .list-item-title {position:relative;margin-top:0.1rem;font-size:0.18rem;line-height:1.77em;}
.type1 .list-item-title a {border:1px solid transparent;border-width:0.2em 0.5em 0.375em;}
.type1 .list-item-title a {position:relative;display:inline;color:transparent;border:none;background:linear-gradient(to right,#b4f4f2,#b4f4f2) no-repeat;background-size:100% 100%;background-position:center right;transition:background-size 0.5s ease 0s;/* animation:identifier 1s 1 forwards; */}
.type1 .list-item-title:before {position:absolute;left:0;top:0;content:attr(data-title);display:block;width:100%;height:100%;color:#333;}
.type1 .list-item.ready .list-item-title a,.type1 .list-item.error .list-item-title a {background-size:0% 100%;}
.footer-mobile {margin-top:1rem;}
/* //////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width:1025px){
.years .list-item:hover a:before {transform:rotate(0deg);}
.type1 .list-item {float:left;width:3.58rem;margin-left:0.19rem;}
.type1 .list-item:nth-child(3n+1) {margin-left:0;}
.type1 .list-item:nth-child(n+4) {margin-top:0.4rem;}
.type1 .list-item img {height:2.39rem;}
.type1 .list-item.error>a:before,.type1 .list-item.error>a:after {font-size:0.4rem;line-height:2.39rem;}
}
@media screen and (max-width:1590px) and (min-width:1025px){
html {font-size:6.28vw;}
}
@media screen and (max-width:1024px){
.header {height:3.1rem;margin-bottom:0.3rem;}
.wrap {width:auto;margin:0;}
.type1 .list-item {padding:0.25rem;border-radius:0 0.5rem/0.5rem;box-shadow:0 0 0 0.14rem #3accca,0 0 0 0.18rem #b4f4f2;background:#b4f4f2;}
.years {position:relative;height:calc(3em + 4px);font-size:20px;line-height:2em;overflow:hidden;}
.years:before,.years:after {position:absolute;left:0;top:0;content:"";display:block;width:1em;height:100%;background:linear-gradient(to right,#efefdd 30%,transparent);z-index:1;}
.years:after {left:auto;right:0;transform:rotate(180deg);}
.years .list {padding-bottom:999px;white-space:nowrap;overflow:auto;}
.years .list-item {font-size:20px;}
.type1 .list-item:nth-child(n+2) {margin-top:0.66rem;}
.type1 .list-item-title {font-size:16px;}
}
@media screen and (max-width:480px){
.header {height:2.3rem;}
.type1 .list-item {width:3.6rem;}
.type1 .list-item img {height:2.4rem;}
.type1 .list-item.error>a:before,.type1 .list-item.error>a:after {font-size:0.4rem;line-height:2.4rem;}
}