@charset "UTF-8";
@import url('base.css');



/* 头部 */
header{ position:absolute; left:0; top:0; width:100%; padding:0 .15rem; z-index:9;}
header .logo{ padding:.4rem 0;}
header .logo img{ max-width:1.8rem;}
header .pr{ position:relative;}
header menu{ line-height:1.5; position:absolute; left:0; top:75%; visibility:hidden; opacity:0; transition:all .3s;}
header menu li{ padding:.1rem 0; font-size:var(--font-size18); width:100%;}
header menu li a{ color:rgba(255,255,255,.6);}
header menu li a:hover{ text-decoration:underline;}
header .logo:hover menu{ visibility:inherit; opacity:1; top:80%;}
header .language a{ font-weight:400; display:block; margin-left:.3rem; color:rgba(var(--rgb-white),0.7);}
header .language a.on{color:rgba(var(--rgb-white),1);}
header .open-menu{ display:none;}
@media(max-width:1024px){
header .logo:hover menu{ visibility:hidden; opacity:0;}
header .logo{ padding:.25rem 0;}
header .language{ margin-right:55px;font-size:var(--font-size16); display:none;}
header .open-menu{ font-size:0; cursor:pointer; width:30px; height:30px; position:absolute; right:0; z-index:12; display:-webkit-flex; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
header .open-menu i{ -webkit-transition: all .4s ease-out; transition: all .4s ease-out; display:block; height:2px; background:#fff; border-radius:5px; width:100%;}
header menu{ position:absolute;top:90%;left:0; min-width:20%; z-index:10; padding:0;}
header menu li{ padding:.05rem 0;}
header menu li a{ color:#fff;}
.menu-show header .language{ display:-webkit-flex; display:flex; align-items:center;}
.menu-show header .open-menu i:nth-of-type(1){ margin:0; width:30px; transform: rotate(45deg) translate(6px,6px);}
.menu-show header .open-menu i:nth-of-type(2){opacity:0;}
.menu-show header .open-menu i:nth-of-type(3){ width:30px; transform: rotate(-45deg) translate(8px,-8px);}
.menu-show header .logo menu{top:100%; visibility: inherit; opacity:1;}
}
@media(max-width:640px){
header menu{ min-width:100%;}
header menu li{ padding:.1rem 0; font-size:var(--font-size28);}
header .language{font-size:var(--font-size28);}
}


/* banner */
.index-banner{font-family:'Roboto'; color:#fff;}
.index-banner img{ width:100%;}
.index-banner .web_img{ display:none;}
.index-banner .text{ line-height:1.1; position:absolute; top:50%; left:0; width:100%; z-index:5; padding:0.15rem; transform:translateY(-50%);}
.index-banner .tit-big{ font-size:var(--font-size140); font-weight:700;}
.index-banner .tit-big2{ font-size:2rem; font-weight:700;}
.index-banner .tit-small{ font-size:var(--font-size60); font-weight:400;}
.index-banner .slick-slide{ position:relative;}
.index-banner li a{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 35;}
.index-banner .vide_ok{ position:absolute; left:0; top:0; width:100%; height:100%;}
.index-banner .vide_ok .open-video{ width:.6rem; height:.6rem; background-image: url(../images/play.svg); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background-size:contain; background-repeat:no-repeat; background-position:center;}
.index-banner .video-show .vide_ok .open-video{ display:none;}
.index-banner .vide_ok video{ display:block; width:100%; height:100%; object-fit:cover;}
.index-banner .slick-dots{ bottom:0.32rem; position:absolute; z-index:10; left:0; width:100%; text-align:center; line-height:12px;}
.index-banner .slick-dots li{font-size:0;display:inline-block;width:0.14rem;height:0.14rem; margin:0 0.11rem; vertical-align:middle; padding:0; position:relative; cursor:pointer; border-radius:50%; border:0.02rem solid #fff;}
.index-banner .slick-dots li button{font-size:0;width:100%;height:100%;background-color:transparent;padding:0;position:absolute; left:0;top:0;border-radius:50%;border:0.02rem solid #fff; cursor:pointer; display:none;}
.index-banner .slick-dots li.slick-active{ background-color:#fff;}
@media(max-width:1440px){
.index-banner .tit-big{ font-size:var(--font-size110);}
.index-banner .tit-big2{ font-size:1.8rem;}
}
@media(max-width:1024px){
.index-banner .tit-small{ font-size:var(--font-size30);display:none;}
.index-banner .tit-big{ font-size:var(--font-size50);}
.index-banner .tit-big2{ font-size:var(--font-size80);}
.index-banner .pc_img{ display:none;}
.index-banner .web_img{ display:block; width:100%; height:100vh; object-fit:cover;}
.index-banner .textcenter{ text-align:center;}
}
@media(max-width:640px){
.index-banner .web-shell{ position:relative; padding-bottom:100%; padding-right:100%;}
.index-banner .web-shell img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
}




/* 首页 */
.index-one{ background:var(--rgb-white); line-height:1.2;}
.index-one .text{ padding:.8rem .15rem;}
.index-one h3{ margin:0; font-size:var(--font-size64);}
.index-one .tit{ margin-bottom:.6em; font-size:var(--font-size24);}
.index-one .tit::before{ content:''; display:inline-block; width:.25em; height:.25em; background:#000; border-radius:1rem; margin-right:.5em;}
.index-two{ border-top:solid 1px #ccc; border-bottom:solid 1px #ccc;}
.index-two li{ position:relative; padding:.15rem; width:50%; border-left:solid 1px #ccc; overflow:hidden;}
.index-two li .pic{ position:relative; width:100%; border-radius:.1rem; overflow:hidden;}
.index-two li .pic figure{ position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat; background-size:cover; background-position:center; transition:0.3s ease-in-out;}
.index-two li .txt{color:rgba(var(--rgb-white));text-align:center;position:absolute;left:0;top:0;width:100%;height:100%;padding:.15rem; line-height:1.5; opacity:0; transition:0.3s ease-in-out;}
.index-two li .txt .spell{font-size:var(--font-size60); font-weight:700;}
.index-two li .txt .tit{font-size:var(--font-size40); font-weight:400;}
.index-two li:last-child{border-right:solid 1px #ccc;}
.index-two li a{ display:block;}
.index-two li a:hover .pic figure{left:-5%;top:-5%;width:110%;height:110%; filter:blur(10px); -webkit-filter:blur(10px); }
.index-two li a:hover .txt{ opacity:1;}
.index-three{padding:.6rem 0;}
.index-three video{object-fit:cover;max-width:100%}
.index-four{ border-top:solid 1px #ccc;}
.index-four .more-but{ font-size:var(--font-size24); padding:.3rem 0; border-top:solid 1px #ccc;}
.index-four .more-but a{color:#000000;}
.index-four .more-but a i{ font-style: normal;}
.index-four .auto-inner{ border-right:solid 1px #ccc;}
.index-four .list-grid{--content-width:calc(minmax(100vw,1920px) - min(.8rem,4.17vw) * 2); --gutter:0; --columns:5; --row-size:calc(( var(--content-width) -(var(--gutter) *(var(--columns) - 1))) / var(--columns)); display:grid; grid-template-columns:repeat(5,1fr); grid-gap:0; grid-auto-rows:minmax(var(--row-size),auto); overflow:hidden; border-left:solid 1px #ccc; margin-right:-1px; margin-bottom:-1px;}
.index-four .list-grid li .txt{color:rgba(var(--rgb-white));text-align:center;position:absolute;left:0;top:0;width:100%;height:100%;padding:.15rem; opacity:0; background:rgba(0,0,0,.2); transition:0.3s ease-in-out;}
.index-four .list-grid li .txt .tit-en{ margin-bottom:.1rem; font-weight:700; font-size:var(--font-size40);}
.index-four .list-grid li .txt .tit-cn{ font-weight:400; font-size:var(--font-size24);}
.index-four .list-grid li .pic{ position:relative; width:100%; border-radius:.1rem; overflow:hidden;}
.index-four .list-grid li .pic figure{ position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat; background-size:contain; background-position:center; transition:0.3s ease-in-out; background-color:#fff;}
.index-four .list-grid li:hover .pic figure{left:-5%; top:-5%; width:110%; height:110%; filter:blur(10px); -webkit-filter:blur(10px);}
.index-four .list-grid li:hover .txt{opacity:1;}
.index-four .list-grid li{ position:relative; border:solid 1px #ccc; margin-left:-1px; margin-top:-1px; overflow:hidden;}
.index-four .list-grid li a{ display:-webkit-flex; display:flex; width:100%; height:100%;}
.index-four .list-grid li:nth-child(1){grid-column:1/3;grid-row:1}

.index-five{ color:black; width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw; overflow:hidden;}
.index-five .text{ font-size:var(--font-size40); line-height:2; font-weight:700; white-space:nowrap; animation: translate 75s linear infinite; -webkit-animation: translate 75s linear infinite; -webkit-text-stroke:2px black; width:max-content; }
@keyframes translate {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }
}

@media(max-width:1024px){
.index-one .tit{ margin-bottom:.6em; font-size:var(--font-size20);}
.index-one h3{ font-size:var(--font-size40);}
.index-three{ padding:.3rem 0;}
.index-four .list-grid li .txt .tit-en{ font-size:var(--font-size18);}
.index-four .list-grid li .txt .tit-cn{ font-size:var(--font-size18);}
.index-five .text{-webkit-text-stroke:0;}
}
@media(max-width:640px){
.index-one .tit{ font-size:var(--font-size26);}
.index-four .list-grid{--columns:2;grid-template-columns:repeat(2,1fr);}
.index-four .list-grid li{ position:relative; border:solid 1px #ccc; margin-left:-1px; margin-top:-1px;}
.index-four .list-grid li:nth-child(1){grid-column:1/3;grid-row:1}
.index-four .list-grid li .txt .tit-en{ font-size:var(--font-size24);}
.index-four .list-grid li .txt .tit-cn{ font-size:var(--font-size24);}
.index-two li{ width:100%; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc;}
.index-two li .txt .spell,
.index-two li .txt .tit{ font-size:var(--font-size24);}
.index-two li:last-child{ border-bottom:none;}
}



/* 底部 */
footer{ background:#000; color:rgba(var(--rgb-white)); padding:.75rem .15rem;}
footer .footer-one{ margin-bottom:.75rem;}
footer .footer-one .nav{ line-height:1.7; width:68%; font-size: var(--font-size16);}
footer .footer-one .nav dl dt::before{content:''; display:inline-block; width:.06rem; height:.06rem; background:#fff; border-radius:1rem; margin-right:.3em;}
footer .footer-one .nav dl dt a{ color:rgba(var(--rgb-white),1);}
footer .footer-one .nav dl dd{ margin:.1rem 0;}
footer .footer-one .nav dl dd a{ color:rgba(var(--rgb-white),0.5);}
footer .footer-one .nav dl dd a:hover{ color:rgba(var(--rgb-white)); text-decoration: underline;}
footer .lxfs{ max-width:30%; line-height:1.7; text-align:right;}
footer .lxfs .wz{ margin:.1rem 0; color:rgba(var(--rgb-white),0.5);}
.footer-two .share-box .item{ margin-right:.2rem;}
.footer-two .share-box .item .icon{ max-width:.41rem; background-color:rgba(255,255,255,.2);border-radius:100%;overflow:hidden;transition:.3s ease-in-out;}
.footer-two .share-box .item .icon img{opacity:.5;transition:.3s ease-in-out;height:.41rem;}
.footer-two .share-box .item .QRcode{ position:absolute; left:50%; bottom:90%; margin-left:-.5rem; padding-bottom:.1rem; visibility: hidden; opacity:0; transition:.3s ease-in-out;width:150px;}
.footer-two .share-box .item .QRcode img{ width:1rem; height:1rem;border-radius:5px;}
.footer-two .share-box .item:hover .icon{background-color:#999;}
.footer-two .share-box .item:hover img{opacity:1;}
.footer-two .share-box .item:hover .QRcode{ bottom:100%; visibility: inherit; opacity:1;}
.footer-des{ line-height:1.6; max-width:3.2rem; text-align:right;}
.footer-des .logo-tu img{ max-height:.4rem;}
.footer-des a{color:rgba(var(--rgb-white),0.5);}
.footer-des .text{color:rgba(var(--rgb-white),0.5); margin-top:.3rem;}
.footer-des aside{color:rgba(var(--rgb-white),0.5);}
.footer-des aside a{ color:rgba(var(--rgb-white),0.5);}
.footer-des aside em:last-child{ display:none;}
.footer-des a:hover{ color:rgba(var(--rgb-white));}
@media(max-width:1024px){
footer{ padding:.5rem .15rem;}
footer .footer-one .nav{ width:100%;}
footer .footer-one .nav dl dd{ margin:.05rem 0;}
footer .lxfs{ margin-top:.2rem; max-width:100%; text-align:left;}
footer .lxfs .wz{ margin:.05rem 0;}
footer .footer-one{ margin-bottom:.4rem;}
}
@media(max-width:640px){
.footer-two .share-box .item .icon{ width:.6rem; max-width:.6rem;}
.footer-two .share-box .item .icon img{ height:.6rem;}
.footer-des{ margin-top:.5rem; width:100%; max-width:100%!important; text-align:left;}
.footer-des .text{ margin:.15rem 0;}
footer .footer-one .nav{ font-size:.24rem;}
footer .footer-one .nav dl{ width:100%; padding:.2rem 0; border-bottom:solid 1px rgba(255,255,255,.6);}
footer .footer-one .nav dl dt{ position: relative;}
footer .footer-one .nav dl dt::after{ display:block; content:''; width:.5rem; height:100%; background-image: url(../images/jia.svg); background-repeat:no-repeat; background-position:center right; background-size:.18rem; position:absolute; right:0; top:0; }
footer .footer-one .nav dl dt.on::after{ background-image: url(../images/jian.svg); background-repeat:no-repeat; background-position:center right; background-size:.18rem;}
footer .footer-one .nav dl dd{ display:none; padding-left:.1rem;}
footer .lxfs{ width:100%; display:-webkit-flex; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
}


/* 内页 */
.Inside-one{ background:var(--rgb-white); line-height:1.2; border-bottom:solid 1px #ccc;}
.Inside-one .text{ padding:.8rem .5rem; border-left:solid 1px #ccc; border-right:solid 1px #ccc;}
.Inside-one h3{ margin:0; font-size:var(--font-size64);}
.Inside-one .tit{ margin-bottom:.6em; font-size:var(--font-size24);}
.Inside-one .tit::before{ content:''; display:inline-block; width:.25em; height:.25em; background:#000; border-radius:1rem; margin-right:.5em;}
@media(max-width:1024px){
.Inside-one .tit{ margin-bottom:.6em; font-size:var(--font-size20);}
.Inside-one h3{ font-size:var(--font-size40);}
.Inside-one .text{ padding:.8rem .15rem;}
}
@media(max-width:640px){
.Inside-one .tit{ font-size:var(--font-size26);}
}


/* 详情 */
.Inside-info-one{ background:var(--rgb-white); line-height:1.2; border-bottom:solid 1px #ccc;}
.Inside-info-one .line-box{ padding:1.3rem .5rem .8rem; border-left:solid 1px #ccc; border-right:solid 1px #ccc;}
.Inside-info-one .CategoryDes{ color:#333333;}
.Inside-info-one .CategoryDes .tit{ max-width:35%; font-weight:700; font-size:var(--font-size80);}
.Inside-info-one .CategoryDes .text{ line-height:1.7; max-width:62%; font-size:var(--font-size30);}
.Inside-info-one .Categorybigtu{ margin-top:1.3rem; overflow:hidden; border-radius:.1rem; -webkit-border-radius:.1rem; -moz-border-radius:.1rem; -ms-border-radius:.1rem; -o-border-radius:.1rem; }
.Inside-info-one .Categorybigtu img{ width:100%;}
.Inside-info-list .item{ border-bottom:solid 1px #ccc;}
.Inside-info-list .item .line-box{border-left:solid 1px #ccc;border-right:solid 1px #ccc;}
.Inside-info-list .item .title{font-weight:700; font-size:var(--font-size50); padding:.6rem .5rem; cursor:pointer;}
.Inside-info-list .item .title::before{ content:'next'; font-family:swiper-icons; width:.5rem; display:block; text-align:center; transition:.3s ease-in-out;}
.Inside-info-list .item .title .wz{ margin-left:.2rem; width:calc(100% - .7rem);}
.Inside-info-list .item .des{ margin-top:.1rem; line-height:1.5; font-weight:400; font-size: var(--font-size30);}
.Inside-info-list .item .title.on::before{ transform: rotate(90deg);}
.Inside-info-list .carousel-box{ margin-top:.7rem;}
.Inside-info-list .carousel-box .swiper{ width:100%;}
.Inside-info-list .carousel-box .tit{ margin:.3rem 0; font-size:var(--font-size24); color:#b3b3b3;line-height: 0.3rem;height: 0.6rem;}
.Inside-info-list .carousel-box .pic{ border-radius:.1rem; overflow:hidden;}
.Inside-info-list .carousel-box .pic img{ width:100%;}
.Inside-info-list .carousel-box .swiper-but{color:#fff;width:.65rem;height:.65rem;background:rgba(0,0,0,1);border-radius:1rem; margin-top:0.26rem;}
.Inside-info-list .carousel-box .swiper-but:after{ font-size:var(--font-size22);}
.Inside-info-list .carousel-box .swiper-button-next.swiper-button-disabled,
.Inside-info-list .carousel-box .swiper-button-prev.swiper-button-disabled{opacity:1;background:rgba(0,0,0,.4);}
.Inside-info-list .interac{ display:none; padding:0 .6rem .8rem;}

.Inside-dotu{ border-bottom:solid 1px #ccc; border-top:solid 1px #ccc; margin-top:-1px;}
.Inside-dotu .ul{ border-right:solid 1px #ccc; border-left:solid 1px #ccc; margin-bottom:-1px;}
.Inside-dotu li{position:relative;width:20%;border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; overflow:hidden;}
.Inside-dotu li .pic{ opacity:0; position:relative; z-index:3; padding-bottom:100%; transition:.3s ease-in-out; background:#fff;}
.Inside-dotu li .pic img{ position:absolute; left:0; top:0; height:100.5%; width:100%; object-fit:cover;}
.Inside-dotu li .por{ position:absolute; bottom:0; left:0; width:100%; height: 100%;}
.Inside-dotu li .por .img{ width:100%;height: 100%;}
.Inside-dotu li .por .img figure{ display:block; height: 100%;background-size:contain; background-position:center; background-repeat:no-repeat;}
.Inside-dotu li .text{ opacity: 0;position: absolute;left: 0;bottom: 0;padding:.3rem;color: #333;font-size:var(--font-size18); /* margin-top:.35rem; */}
.Inside-dotu li .text .tit-cn{ margin-bottom:.1rem; font-weight:400;}
.Inside-dotu li .text .tit-en{ font-weight:700;}
.Inside-dotu li:first-child{ border-left:none;}
.Inside-dotu li:nth-child(5n){ border-right:none;}
.Inside-dotu li:hover .pic{ opacity:1;}
.Inside-dotu li:hover .text{opacity: 1;z-index: 5;}
.Inside-swiper{ padding:.15rem 0; border-bottom:solid 1px #ccc;}
.Inside-swiper .pic img{ display:none; width:100%;}
.Inside-swiper .pic{ border-radius:.1rem; overflow:hidden;}
.Inside-swiper .pic figure{ display:block; padding-bottom:60%; background-size:cover; background-position:center; background-repeat:no-repeat;}
.Inside-swiper .swiper-but{color:#fff;width:.65rem;height:.65rem;background:rgba(0,0,0,.4);border-radius:1rem; transition:.3s ease-in-out; margin-top:-.325rem;}
.Inside-swiper .swiper-but:after{ font-size:var(--font-size22);}
.Inside-swiper .swiper-but:hover{opacity:1;background:rgba(0,0,0,.9);}

.Inside-three{padding:.6rem 0; border-bottom:solid 1px #ccc;}
.Inside-three .auto-inner{ padding:0 .5rem;}

.Inside-push{ border-bottom:solid 1px #ccc;border-top:solid 1px #ccc;}
.Inside-push .ul{ border-left:solid 1px #ccc; border-right:solid 1px #ccc;}
.Inside-push li{ position:relative; padding:.15rem; width:25%; border-bottom:solid 1px #ccc; border-left:solid 1px #ccc; margin-bottom:-1px; overflow:hidden;}
.Inside-push li a{ display:-webkit-flex; display:flex; width:100%; min-height:100%;}
.Inside-push li:nth-child(4n+1){ border-left:none;}
.Inside-push li .pic{ position:relative; width:100%; border-radius:.1rem; overflow:hidden;}
.Inside-push li .pic figure{ position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat; background-size:cover; background-position:center; transition:0.3s ease-in-out;}
.Inside-push li .txt{color:rgba(var(--rgb-white));text-align:center;position:absolute;left:0;top:0;width:100%;height:100%;padding:.15rem; line-height:1.5; opacity:0; transition:0.3s ease-in-out;}
.Inside-push li .txt .spell{font-size:var(--font-size50); font-weight:700;}
.Inside-push li .txt .tit{font-size:var(--font-size32); font-weight:400;}
.Inside-push li:nth-last-of-type(-n+3) { border-bottom:none;}
.Inside-push li a:hover .pic figure{left:-5%;top:-5%;width:110%;height:110%; filter:blur(10px); -webkit-filter:blur(10px); }
.Inside-push li a:hover .txt{ opacity:1;}

@media(max-width:1024px){
.Inside-info-one .line-box{ padding:.5rem;}
.Inside-info-one .Categorybigtu{ margin-top:.5rem;}
.Inside-info-one .CategoryDes .tit{ font-size:var(--font-size50); max-width:100%; width:100%; margin-bottom:.3rem;}
.Inside-info-one .CategoryDes .text{ max-width:100%; width:100%;}
.Inside-info-list .item .title{ padding:.35rem; font-size:var(--font-size36);}
.Inside-dotu li .pic{ padding-bottom:110%;}
.Inside-dotu li .text{ margin-top:.15rem; font-size:var(--font-size12);}
.Inside-dotu li .por{ padding:.2rem .15rem;}
.Inside-swiper .swiper-but{ top:50%; width:.5rem; height:.5rem; margin-top:-.25rem;}
.Inside-swiper .swiper-but:after{ font-size:.16rem;}
}
@media(max-width:640px){
.Inside-dotu .auto-inner{ overflow:inherit; border-right:solid 1px #ccc;}
.Inside-dotu .ul{ border-right:none;}
.Inside-dotu .ul li:nth-child(5n),
.Inside-dotu .ul li{ width:50%; border-right:solid 1px #ccc;}
.Inside-dotu .ul li:nth-child(2n){ border-right:none;}
.Inside-dotu .ul li .por{ padding:.35rem .15rem;}
.Inside-dotu .ul li .pic{ padding-bottom:100%;}
.Inside-dotu .ul li .text{ font-size:var(--font-size24);}
.Inside-info-list .carousel-box .swiper-but{width:.5rem;height:.5rem;margin-top:-.28rem; top:65%;}
.Inside-push li{ width:50%; border-right:solid 1px #ccc; border-left:none;}
.Inside-push li:nth-child(2n){ border-right:none;}
.Inside-push li:nth-last-of-type(-n+3){border-bottom:solid 1px #ccc;}
.Inside-swiper{ padding:2%;}
.Inside-info-list .item .des table td{ display: block;}
.Inside-info-list .item .des table td *{font-size: var(--font-size30)!important;}
}


/*  */
.Inside-list{ border-bottom:solid 1px #ccc;}
.Inside-list .ul{ border-left:solid 1px #ccc; border-right:solid 1px #ccc; overflow:hidden;}
.Inside-list li{ position:relative; padding:.15rem; width:calc(25% + 1px); border-bottom:solid 1px #ccc; border-left:solid 1px #ccc; margin-bottom:-1px; margin-left:-1px;}
.Inside-list li:nth-child(4n+1){ border-left:none;}
.Inside-list li .pic{ position:relative; width:100%; height: 100%;border-radius:.1rem; overflow:hidden;}
.Inside-list li .pic figure{ position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat; background-size:cover; background-position:center; transition:0.3s ease-in-out;}
.Inside-list li .txt{color:rgba(var(--rgb-white));text-align:center;position:absolute;left:0;top:0;width:100%;height:100%;padding:.15rem; line-height:1.5; opacity:0; transition:0.3s ease-in-out;}
.Inside-list li .txt .spell{font-size:var(--font-size50); font-weight:700; line-height:1.1; margin-bottom:.1rem;}
.Inside-list li .txt .tit{font-size:var(--font-size32); font-weight:400;}
.Inside-list li:last-child{border-right:solid 1px #ccc;}
.Inside-list li a:hover .pic figure{left:-5%;top:-5%;width:110%;height:110%; filter:blur(10px); -webkit-filter:blur(10px); }
.Inside-list li a:hover .txt{ opacity:1;}

@media(max-width:1024px){
.Inside-list li .txt .spell{ font-size:var(--font-size22);}
.Inside-list li .txt .tit{ font-size:var(--font-size22);}
}

@media(max-width:640px){
.Inside-list li{ width:100%;}
.Inside-list li .txt .spell{ font-size:var(--font-size34);}
.Inside-list li .txt .tit{ font-size:var(--font-size34);}
}

.single-piece{ padding:.5rem 0;}