.wrap {position: relative;z-index: 10;}
.wrap h4.stitle {margin-bottom: 30px;position: relative;display: block;color: #000000;font-size: 40px;font-weight: bold;letter-spacing: 0px;line-height: 1.2;text-transform: uppercase;}
.wrap h2.title {margin-bottom: 0px;font-size: 22px;color: #565656;display: none;}
.wrap p.more a {padding: 14px 40px;background: #e70012;display: inline-block;color: #fff;}
.wrap p.more a span {margin-right: 30px;color: #fff;font-weight: bold;}
.wrap p.more a i {color: #fff;font-weight: bold;}

/* productBox */
#productBox  {padding: 4vw 0 7vw;background: #0f0f0f;}
#productBox .bgTxt {position: absolute;width: 100%;font-weight: 700;text-align: center;font-size: 6.5vw;color: rgb(30 30 30);z-index: 0;bottom: -12vw;left: 0;-webkit-transform: skewX(-10deg);transform: skewX(-10deg);}
#productBox .list { position: relative; z-index: 2; }
#productBox .list .item {position: relative;margin: 20px;background: #fff no-repeat 50% / cover;}
#productBox .list .item img {position: relative;width: 100%;z-index: 0;}
#productBox .list .item a {/* position: absolute; */width: 100%;height: 100%;display: block;top: 0;left: 0;}
#productBox .list .item .info {position: absolute;width: 100%;top: 110%;-webkit-transition: all 0.6s linear;-o-transition: all 0.6s linear;transition: all 0.6s linear;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;}
#productBox .list .item .info h3 {padding: 0 9%;height: 40px;font-weight: normal;color: #fff;-webkit-line-clamp: 2;}
#productBox .list .item .info h3 font{
    font-size: 22px;
    font-weight: bold;
}
#productBox .list .item .text-clamp {
    margin: 10px 20px;
}
#productBox .list .item .text-clamp font{
    color: rgb(13, 13, 13);
    font-size: 18px;
    line-height: 150%;
    height: 52px;
    overflow: hidden;
    display: block;
}
#productBox .list .item .info .more a {
  display: inline-block;
  width: 146px;
  height: 45px;
  line-height: 45px;
  font-size: 13px;
  font-weight: 400;
  font-family: "Lato", "微軟正黑體", sans-serif;
  letter-spacing: 1px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  background-color: rgb(231 0 18);
  color: #fff;
}

#productBox .list .item .info .more a:before {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 8px;
  height: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  -webkit-animation: anti01 1.5s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation: anti01 1.5s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

#productBox .list .item .info .more a:hover {
  background-color: #e8cb44;
  color: #fff;
  border-color: #ffe778;
}

#productBox .list .item .info .more a:hover:before {
  border-color: #fff;
}

@-webkit-keyframes anti01 {
  0% {
    right: 30px;
    opacity: 0;
  }
  100% {
    right: 15px;
    opacity: 1;
  }
}

@keyframes anti01 {
  0% {
    right: 30px;
    opacity: 0;
  }
  100% {
    right: 15px;
    opacity: 1;
  }
}
#productBox .list .item .info p { padding: 13px 20px; background: #fff; }

/* aboutBox */
#aboutBox {font-size: 0;width: 100%;background-color: #1e1e1e;}
#aboutBox .info::before {
    content: '';
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    padding: 150px 0 100px 0;
    background: #f5f7fa;
    box-shadow: 7px 0 30px rgb(0 0 0 / 19%);
    position: absolute;
    top: -30px;
    left: -40px;
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    z-index: -1;
}
*:before, *:after {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#aboutBox >div , #customBox .row {margin: 0 0% 0 0;width: 23%;display: inline-block;}
#aboutBox .aboutImg{
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    width: 25%;
    margin: 0 -4% 0 -4%;
    }
#aboutBox .aboutImg2{
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    width: 39%;
    margin: 0 0% 0 0%;
    box-shadow: 11px 7px 20px 0px rgba(0, 0, 0, 0.19);
    }    
#aboutBox .aboutImg2 a.photo{background-image: url(/images/33/img002.jpg);}
#aboutBox .info , #customBox .youtubeBox {margin: 0 0px 0 0%;padding: 40px 60px;width: 22%;}
#aboutBox .info h4, #aboutBox .info p.arts{transform: skewX(-10deg);}
#aboutBox .info p.arts {margin-bottom: 50px;color: #272727;font-size: 17px;text-align: justify;font-weight: bold;letter-spacing: 1px;}
#aboutBox .info p.more , #aboutBox .info #SeoStarRating {text-align: right;transform: skewX(-10deg);}

/* customBox */
#customBox { position: relative; padding: 110px 0 0; font-size: 0; z-index: 2; }
#customBox:before { position: absolute; width: 100%; height: calc(100% - 110px); background: #16172e; display: block; top: 0; left: 0; z-index: 1; content: ""; }
#customBox .workframe { z-index: 2; font-size: 0; }
#customBox .row { vertical-align: top; }
#customBox .listBox ul li h3 { margin: 20px 0 10px; font-size: 40px; color: #fff; }
#customBox .listBox ul li article { font-size: 18px; color: #909090; }
#customBox .listBox .btn { text-align: right; }
#customBox .listBox .btn a { position: relative; color: #eee; text-align: center; }
#customBox .listBox .btn a#nextBtn:before { color: #6b6b78; content: "|"; }
#customBox .listBox .btn a span { position: absolute; width: 80px; height: 27px; display: block; text-align: center; line-height: 27px; top: 0; left: 0; -webkit-transform: translate(0) scale(0); transform: translate(0) scale(0); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .listBox .btn a i { text-align: center; width: 80px; height: 27px; font-size: 27px; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .youtubeBox { position: relative; }
#customBox .youtubeBox:before { position: absolute; width: 40%; height: 100%; background: url(/images/33/dote.png) 0 0; top: -2vw; left: 90%; z-index: -1; opacity: 0.4; content: ""; }
#customBox .youtubeBox iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#customBox .youtubeBox .playBtn { position: absolute; width: 100px; height: 100px; background: #ff5860; border-radius: 50%; display: block; text-align: center; line-height: 100px; top: calc((100% - 100px) / 2); left: -50px; -webkit-animation: playbtn 1s infinite alternate ease-in-out; animation: playbtn 1s infinite alternate ease-in-out; }
#customBox .youtubeBox .playBtn i { font-size: 36px; color: #fff; }
#customBox .contact { position: absolute; padding-left: calc((100% - 1300px) / 2); width: 650px; height: 110px; background: #21bcd8; line-height: 110px; bottom: 0; left: 0; z-index: 3; }
#customBox .contact a { display: inline-block; }
#customBox .contact font { text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 40px; color: #fff; }
#customBox .contact i { margin: 10px 0 10px 30px; font-size: 30px; color: #fff; -webkit-animation: arrowright 1s infinite alternate ease-in-out; animation: arrowright 1s infinite alternate ease-in-out; }

/* NewsBox */
#NewsBox {position: relative;padding: 100px 0 80px;}
#NewsBox .bg , #bookBox .bg {position: absolute;width: 100%;height: 100%;background: linear-gradient(180deg, #1e1e1e 0%, #00000000 100%);top: 0;left: 0;}
#NewsBox h4.stitle , #NewsBox h2.title {text-align: center;color: #fff;margin-bottom: 50px;}
#NewsBox #newList li >div {margin: 0 20px;}
#NewsBox #newList li .img a.photo img , #bookBox ul li a.photo img { width: 100%; }
#NewsBox #newList li .info p a {margin-right: 15px;padding: 2px 15px;background: #f0f0f0;display: inline-block;color: #585858;}
#NewsBox #newList li .info p {color: #fff;margin-top: 10px;}
#NewsBox #newList li .info h3 a {margin-top: 5px;height: 30px;font-weight: 500;font-size: 18px;color: #fff;-webkit-line-clamp: 1;}
#NewsBox p.more , #bookBox p.more {margin-top: 40px;text-align: center;}

/* bookBox */
#bookBox { position: relative; padding: 80px 0; background: #222; }
#bookBox h2.title { text-align: center; color: #fff; }
#bookBox ul li a.photo , #bookBox ul li h3 { margin: 0 20px; background-color: #fff; }
#bookBox ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

@keyframes playbtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@-webkit-keyframes playbtn { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } }
@keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }
@-webkit-keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }

@media screen and (max-width:1500px) {
	#customBox .contact { padding-left: calc((100% - 1280px) / 2); width: 640px; }
	#aboutBox .info, #customBox .youtubeBox{width: 30%;}
}
@media screen and (max-width:1360px) {
	#customBox .contact { padding-left: calc((100% - 1160px) / 2); width: 580px; }
}
@media screen and (min-width:1281px) {
	.webBox .wrapper{background-attachment: fixed;}
	#productBox .list .item:hover img {background: rgb(255 255 255 / 49%);}
	#productBox .list .item:hover .info {top: 60%;}
	#customBox .listBox .btn a:hover span { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
	#customBox .listBox .btn a:hover i { -webkit-transform: rotate(0) scale(0); transform: rotate(0) scale(0); }
	#customBox .youtubeBox .playBtn:hover { background: #2c2a2a; }
	#NewsBox #newList li .info p a:hover {background: #5b5b5b;color: #fff;}
	#bookBox ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
}
@media screen and (max-width:1280px) {
	#productBox .list .item img {background: rgb(228 228 228 / 18%);}
	#productBox .list .item .info {top: 0;display: none;}
}
@media screen and (max-width:1024px) {
	#customBox { padding: 7vw 0; }
	#customBox:before { height: 100%; }
	#customBox .row { margin: 0 0 30px; width: 80%; }
	#customBox .youtubeBox { margin: 10px 0 0; width: auto; }
	#customBox .contact { padding-left: 5%; width: 85%; bottom: -20px; }
.wrap h4.stitle{
    font-size: 30px;
}
}
@media screen and (max-width:980px) {
	#productBox{padding: 40px 0 10px;}
	#productBox .bgTxt {font-size: 8vw;bottom: -15vw;}
	#aboutBox {position: relative;margin-bottom: 0;padding: 9vw 5% 1vw;width: 90%;}
	#aboutBox .aboutImg {position: absolute;width: 160%;height: 100%;display: block;left: 0;top: 0;z-index: 1;margin: 0 -4% 0 -24%;}
	#aboutBox .aboutImg a.photo { height: 100%; }
    #aboutBox .aboutImg2{
    display: none;
}
	#aboutBox .info {position: relative;margin: 0;width: 60%;display: block;z-index: 2;}
	#NewsBox #newList { margin: 0 auto; width: 80%; }
}
@media screen and (max-width:640px) {
	#aboutBox .info h4, #aboutBox .info p.arts, #aboutBox .info p.more, #aboutBox .info #SeoStarRating{transform:none;}
	.wrap p.more a{padding:14px 20px;}
	#aboutBox .info p.arts{font-size: 15px;letter-spacing: 0;}
	#aboutBox .info::before{width:100%;transform:none;height: 100%;padding: 0;top: 0;left: 0;}
	#productBox .list .item { margin: 0 10px 10px; }
#aboutBox .info {
    position: relative;
    margin: 0;
    width: 70%;
    display: block;
    z-index: 2;
    padding: 30px;
}
}
@media screen and (max-width:600px) {
	#productBox .list .item {margin: 0 10vw 10px;box-shadow: 2px -20px 20px 0px rgba(0, 0, 0, 0.25);}
}
@media screen and (max-width:500px) {
	#customBox .contact { height: 14vw; line-height: 14vw; }
	#customBox .contact font { font-size: 9vw; }
	#customBox .contact i { font-size: 8vw; }
	#NewsBox #newList { width: 100%; }
}