/* 首页 
https://www.toto.com.cn/cn/ld/index.html
设计款 
https://www.toto.com.cn/cn/ld/design/index.html
设计款2是收纳   

https://www.toto.com.cn/cn/ld/storage/index.html
一体化台盆（18年台盆柜 网址暂不换）
https://www.toto.com.cn/cn/bathroomcabinets/index.html
紧凑款 
https://www.toto.com.cn/cn/ld/compact/index.html
深型陶瓷台盆 
https://www.toto.com.cn/cn/ld/deep/index.html
一体化陶瓷台盆
https://www.toto.com.cn/cn/ld/integration/index.html
视频（品质检测） 
https://www.toto.com.cn/cn/ld/quality/index.html */



.index-top-text{text-align: center;font-size: 1.2rem;padding:0.5rem;margin: 1.4rem;padding-top: 27px;}
.index-top-text .title{font-size: 2rem;}
.index-item-list.ld-pc{font-size: 0}
.index-item-list.ld-pc a.item .button{opacity: 0;width: 15%;background-color: rgba(255,255,255,0.4);font-size: 1.2vw;text-align: center;border: 1px solid #fff;text-shadow: 0px 0px 2px black;}
.index-item-list.ld-pc a.item:hover img{opacity: 1!important;}
.index-item-list.ld-pc a.item:hover .bg{transform: scale(1.05)}
.index-item-list.ld-pc a.item:hover .button{opacity: 1;}
.index-item-list.ld-pc .item {overflow: hidden; display: inline-block;font-size: 1rem;position: relative;cursor: pointer;-webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.index-item-list.ld-pc .item .bg{width: 100%}
.index-item-list.ld-pc .item .text,
.index-item-list.ld-pc .item .button{position: absolute;color: #fff; }
.index-item-list.ld-pc .item .text{left: 0;top: 0; color: #fff;text-shadow: 0px 0px 7px black;font-size: 1.6vw;}
.index-item-list.ld-pc .item .text h3{margin-bottom: 4px;} 
.index-item-list.ld-pc .item .text span{font-size: 1.4vw;}
.index-item-list.ld-pc .item:nth-of-type(1),
.index-item-list.ld-pc .item:nth-of-type(2){
  width: 50%;
}
.index-item-list.ld-pc .item:nth-of-type(1) .text{left: 6%;top: 17%; }
/*.index-item-list.ld-pc .item:nth-of-type(2) .text{right: 6%;top: 17%;text-align: right; }*/
.index-item-list.ld-pc .item:nth-of-type(1) .button{left: 6%;top: 38%; }
/*.index-item-list.ld-pc .item:nth-of-type(2) .button{right: 6%;top: 38%; }*/


.index-item-list.ld-pc .item:nth-of-type(1){
    width: 100%;
}

.index-item-list.ld-pc .item:nth-of-type(2),
.index-item-list.ld-pc .item:nth-of-type(3){
    width: 50%;
}

.index-item-list.ld-pc .item:nth-of-type(4){
    width: 100%
}

.index-item-list.ld-pc .item:nth-of-type(1) .text{
    right: 6%;
    top: 30%;
    left: auto;
}
.index-item-list.ld-pc .item:nth-of-type(1) .button{
    right: 16.6%;
    top: 56%;
    left: auto;
}
.index-item-list.ld-pc .item:nth-of-type(2) .button{
    left: 57%;
    top: 42%;
}
.index-item-list.ld-pc .item:nth-of-type(2) .text{
    left: 57%;
    top: 14%;
} 
.index-item-list.ld-pc .item:nth-of-type(3) .button{
    left: 7%;
    top: 42%;
}
.index-item-list.ld-pc .item:nth-of-type(3) .text{
    left: 7%;
    top: 14%;
}
.index-item-list.ld-pc .item:nth-of-type(4) .text{top: 50%;transform: translateY(-50%)}
.index-item-list.ld-pc .item:nth-of-type(4) .button{left: 50%;top: 50%;transform: translate(-50%, 100%);width: 7%}

/*.index-item-list.ld-pc .item:nth-of-type(3),
.index-item-list.ld-pc .item:nth-of-type(4),
.index-item-list.ld-pc .item:nth-of-type(5){
  width: calc(100% / 3 - 0.01px)
}*/

/*.index-item-list.ld-pc .item:nth-of-type(3) .text,
.index-item-list.ld-pc .item:nth-of-type(4) .text,
.index-item-list.ld-pc .item:nth-of-type(5) .text{left: 9%;top:12%}
.index-item-list.ld-pc .item:nth-of-type(3) .button,
.index-item-list.ld-pc .item:nth-of-type(4) .button,
.index-item-list.ld-pc .item:nth-of-type(5) .button{right: 9%; top: 33%;  width: 21%;left:9%;right:auto }
.index-item-list.ld-pc .item:nth-of-type(3) .button{left:9%;right:auto}
.index-item-list.ld-pc .item:nth-of-type(6) .text{top: 50%;transform: translateY(-50%)}
.index-item-list.ld-pc .item:nth-of-type(6) .button{left: 50%;top: 50%;transform: translate(-50%, 100%);width: 7%}

.index-item-list.ld-pc .item:nth-of-type(7){
  width: 100%;background-color: #212121;padding: 1rem;text-align: center
}
.index-item-list.ld-pc .item:nth-of-type(7) .button{opacity: 1;position: static}
*/


.index-item-list.ld-sp{margin-top: 50px;}
.index-item-list.ld-sp .item{font-size: 0}
.index-item-list.ld-sp .text-container{text-align: center;padding: 0.6rem 0;line-height: 1.8;font-size: 16px;}
.index-item-list.ld-sp .text-container .title{font-weight: bolder;font-size: 1.4rem}
.index-item-list.ld-sp .text-container .text{font-size: 0.8rem}
.index-item-list.ld-sp .text-container .link-button{font-size: 1rem; border: 1px solid #000; padding:0.2rem 1.2rem;margin-top: 0.6rem;display: inline-block}

.index-item-list.ld-sp .item{display: flex;align-items:center}
.index-item-list.ld-sp .item .bg,
.index-item-list.ld-sp .item .text-container{width: 50%;display: inline-block;}
.index-item-list.ld-sp .item .text-container{padding: 0 0.4rem;}
/*.index-item-list.ld-sp .item:nth-of-type(4){flex-direction:row-reverse;}*/

.index-item-list.ld-sp .item:nth-of-type(1),
.index-item-list.ld-sp .item:nth-of-type(2),
.index-item-list.ld-sp .item:nth-of-type(3),
.index-item-list.ld-sp .item:nth-of-type(4){display: block;padding-bottom: 16px;} 
.index-item-list.ld-sp .item:nth-of-type(4){padding-bottom: 0}
.index-item-list.ld-sp .item:nth-of-type(1) .text-container,
.index-item-list.ld-sp .item:nth-of-type(2) .text-container,
.index-item-list.ld-sp .item:nth-of-type(3) .text-container,
.index-item-list.ld-sp .item:nth-of-type(4) .text-container{padding-top: 0.6rem;padding-bottom: 0.8rem}
.index-item-list.ld-sp .item:nth-of-type(1) .bg,
.index-item-list.ld-sp .item:nth-of-type(1) .text-container,
.index-item-list.ld-sp .item:nth-of-type(2) .bg,
.index-item-list.ld-sp .item:nth-of-type(2) .text-container,
.index-item-list.ld-sp .item:nth-of-type(3) .bg,
.index-item-list.ld-sp .item:nth-of-type(3) .text-container,
.index-item-list.ld-sp .item:nth-of-type(4) .bg,
.index-item-list.ld-sp .item:nth-of-type(4) .text-container{width: 100%;display: inline-block;}  

.index-item-list.ld-sp .item:nth-of-type(4) .text-container{padding:1rem 1rem 2rem 1rem;}
@media screen and (min-width: 0) and (max-width: 320px){
  .index-item-list.ld-sp .text-container{font-size: 12px;}
  .index-item-list.ld-sp .text-container .title{font-size: 1.2rem}
  .index-item-list.ld-sp .text-container .text{font-size: 0.6rem}
  .index-item-list.ld-sp .text-container .link-button{font-size: 0.9rem}
}

/* .index-item-list.ld-sp .item:nth-of-type(3) .bg,
.index-item-list.ld-sp .item:nth-of-type(3) .text-container{width: 50%;display: inline-block;vertical-align: middle;}
.index-item-list.ld-sp .item:nth-of-type(3) .text-container{padding: 0 0.4rem;} */