body{
  background-image:linear-gradient(to bottom,#fdf4e2 50%,#ffcbae)
}
body .footer{
  background-color: #d34045;
}
.message{
  padding:35px 0;
  margin-top:70px;
  position:relative;
  background-image: linear-gradient(217deg, 
		rgba(236, 205, 138, 0.35) 0%, 
		rgba(255, 241, 211, 0.35) 100%), 
	linear-gradient(
		#ffffff, 
		#ffffff);
	background-blend-mode: normal, 
		normal;
	box-shadow: 0px 3px 6px 1px 
		rgba(0, 0, 0, 0.28);
	border-radius: 20px 0px 20px 0px;
}
.message-title{
  width:calc( 202 / 1280 * 100% );
  position:absolute;
  z-index:99;
  top:0;
  transform:translateY( calc(-42 / 61 * 100%) );
  left:18px;
  min-width:160px;
}
.message-bottom{
  width:calc( 221 / 1280 * 100% );
  min-width:140px;
  position:absolute;
  z-index:99;
  transform:translateY( calc(26 / 105 * 100%) );
  bottom:0;
  right:-9px;
}
.message-content-inner{
  width:94%;
  margin:0 auto;
}
.message-content-unit{
  font-size: 20px;
  line-height: 33px;
  color: #450d00;
  text-indent:40px;
  text-align:justify;
}
.page-list{
  display:flex;
  flex-wrap:wrap;
}
.page-list-unit{
  width:24%;
  margin-left:calc( (1 - 0.24 * 4) / 3 * 100% );
  padding-top:16px;
  padding-bottom:33px;
  box-shadow: 0px 4px 30px 5px 
		rgba(118, 10, 10, 0);
  transition:0.5s;
  border-radius: 10px;
  background-image:url(https://tkww-static.tkww.hk/special/articles/unit_bg.jpg);
  margin-top:53px;
  background-size:100% 100%;
}
.page-list-unit:nth-child( 4n - 3 ){
  margin-left:0;
}
.page-list-unit-inner{
  width:90%;
  color: #450d00;
  margin:0 auto;
}
.page-list-unit-img,.page-list-unit-img-inner-img{
  width:100%;
}
.page-list-unit-title{
  font-size: 14px;
  line-height: 24px;
  margin-top: 8px;
  height: 46px;
}
.page-list-unit-title-name{
  font-size: 18px;
  font-weight: 600;
}
.page-list-unit-line{
  width:100%;
  height: 2px;
  background-color: #ff9f6f;
  border-radius: 1px;
  margin-top:8px;
}
.page-list-unit-content{
  margin-top:7px;
  font-size: 16px;
  line-height: 26px;
  height:calc( 26px * 12 );
  text-align:justify;
}
.page-list-unit-content-inner{
  width:90%;
  margin:0 auto;
}
body .page-list-unit-img>.swiper-pagination-bullets{
  bottom:0;
}
.page-list-unit-img>.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 4px;
  width: 16px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 3px;
  margin-left: 13px;
  opacity: 1;
}
.page-list-unit-img>.swiper-pagination-bullets .swiper-pagination-bullet-active{
  width: 38px;
  background-color: #e20413;
}
.share-list-box{
  width:59px;
  position:fixed;
  left:3vw;
  top:32vw;
  z-index:99;
  background-color:#ffffff;
  border-radius: 10px 10px 0px 0px;
  border: solid 1px rgba(146,146,146,0.5);
  padding-top:6px;
}
.share-list-box-close{
  width:11px;
  margin-left:auto;
  margin-right:6px;
  cursor:pointer;
  margin-bottom:5px;
}
.share-list-unit{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background-color:#ffffff;
  transition:0.5s;
  border-top: solid 1px rgba(146,146,146,0.5);
  cursor:pointer;
}
.share-list-unit-img,.share-list-unit-img-active{
  width:34px;
}
.share-list-unit-img{
  position:relative;
  z-index:10;
}
.share-list-unit-img-active{
  transition:0.5s;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:99;
  opacity:0;
}
.share-list-unit:hover{
  background-color: #426d99;
}
.share-list-unit:hover .share-list-unit-img-active{
  opacity:1;
}
.share-weixin-box {
  padding: 5px;
  position: absolute;
  transform: scaleX(0) scaleY(0);
  transform-origin: 0 0;
  transition: 0.5s;
  left: 100%;
  top: 0;
  background: rgba(32,76,120,0.3);
  border-radius: 5px;
  /* transform: scaleX(1) scaleY(1) translateY(-50%); */
  opacity: 0;
}
.weixin-qrcode {
  padding: 3px;
  background: #ffffff;
}
.share-list-unit:hover .share-weixin-box {
  transform: scaleX(1) scaleY(1);
  opacity: 1;
}
@media ( min-width:1100px ){
  .page-list-unit:hover{
    box-shadow: 0px 4px 30px 5px 
      rgba(118, 10, 10, 0.47);
  }
  /*.page-list-unit-content::-webkit-scrollbar{
    width: 10px;
  }
  .page-list-unit-content::-webkit-scrollbar-track{
    background: rgba(0,0,0,0);
  }
  .page-list-unit-content::-webkit-scrollbar-thumb{
    background-color: #e55656;
    border-radius:0;
  }*/
}
@media ( max-width:1099px ){
  .share-list-box{
    left:4.5vw;
  }
  .share-list-box-close{
    width:20px;
  }
  .nicescroll-cursors{
    width:5px!important;
  }
}
@media ( max-width:767px ){
  .nicescroll-cursors{
    width:10px!important;
  }
  .page-list-unit{
    margin-left:0;
  }
  .share-list-box{
    top:65vw;
  }
  .share-list-box{
    left:1.87vw;
  }
  .message-title{
    width:27vw;
    left:2.4vw;
    min-width:unset;
  }
  .message-bottom{
    width:21vw;
    min-width:unset;
    right:1.47vw;
    transform:translateY(0);
    bottom:unset;
    top:-5.53vw;
  }
  .message{
    margin-top:6.3vw;
    padding:4vw 0;
  }
  .message-content{
    max-height:calc( 5.6vw * 6 );
  }
  .message-content-unit{
    font-size: 3.73vw;
    line-height: 5.6vw;
    text-indent:calc( 3.73vw * 2 );
  }
  .page-list{
    display:block;
  }
  .page-list-unit{
    width:100%;
    border-radius: 0;
  }
  .page-list-unit-inner-top{
    display:flex;
    align-items:flex-end;
  }
  .page-list-unit-img{
    width:45vw;
    flex:none;
  }
  .page-list-unit-title{
    font-size: 3.2vw;
    line-height:4.8vw;
    height:unset;
    -webkit-line-clamp: 3;
    flex:1;
    margin-left:1.47vw;
  }
  .page-list-unit-title-name{
    font-size: 4.27vw;
  }
  .page-list-unit-title-work{
    display:block;
    margin-top:0.8vw;
  }
  .page-list-unit-content{
    font-size:3.73vw;
    line-height:5vw;
    height:unset;
    max-height:calc( 5vw * 12 );
  }
}