.wrap {position: relative;z-index: 10;}
.wrap h4.stitle {margin-bottom: 50px;text-transform: uppercase;font-weight: 700;font-style: italic;font-size: 23px;color: #666666;margin-left: 24px;line-height: 150%;}
.wrap h2.title {margin-bottom: -10px;margin-left: 30px;font-size: 55px;font-weight: 800;font-style: italic;color: #000;line-height: 150%;}
.wrap p.more a {padding: 14px 40px;background: #666666;display: inline-block;color: #fff;transform: skewX(-10deg);}
.wrap p.more a:hover{background: #07d1f4}
.wrap p.more a span { margin-right: 30px; }

/* productBox */
#productBox  {padding-bottom: 4vw;padding-top: 20vw;background-repeat: no-repeat;background-position: 50% 100%;background-size: cover;}
#productBox .bgTxt {position: absolute;width: 100%;top: -16vw;font-weight: 800;font-size: 5vw;font-style: italic;color: #000000;z-index: 1;left: 0;}
#productBox h2 {position: absolute;top: -12vw;left: 10vw;font-size: 6em;font-weight: 900;color: #666666;font-style: italic;line-height: 170%;}
#productBox .more {position: absolute;top: -8vw;right: 0;}
#productBox .list { position: relative; z-index: 2; }
#productBox .list .item {position: relative;margin: 20px 30px 80px;background: #fff no-repeat 50% / cover;box-shadow: 0 0 20px 0px rgb(0 0 0 / 40%);}
#productBox .list .item img { position: relative; width: 100%; z-index: 1; }
#productBox .list .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox .list .item .info {position: absolute;width: 100%;bottom: -70px;z-index: 2;}
#productBox .list .item .info h3 {padding: 20px 15%;margin-top: 24vw;font-weight: normal;color: #fff;background: #07d1f4;text-align: center;}
#productBox .list .item .info h3 font {font-size: 18px;font-weight: 600;font-style: italic;}
#productBox .list .item .info p { padding: 13px 20px; background: #fff; }

/* aboutBox */
#aboutBox {font-size: 0;width: 100%;background-color: #f5f5f5;padding-bottom: 50px;}
#aboutBox .info::before {content: '';width: calc(100% + 5px);height: calc(100% + 170px);background: #ffffff;box-shadow: 7px 0 30px rgb(0 0 0 / 19%);position: absolute;top: -80px;left: 50px;-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: 38%;margin: 3% 0% 0px 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: 30px 0px 60px 8vw;width: 35%;}
#aboutBox .info p.arts {margin-bottom: 80px;color: #000000;transform: skewX(-10deg);width: 95%;}
#aboutBox .info p.more , #aboutBox .info #SeoStarRating {margin: 0 75px 15px 0;text-align: right;font-weight: 700;}
#aboutBox h4.stitle::before{content: '';top: 17px;left: 50px;width:500px;height: 4px;color: #000000;z-index: 999;}

/* pictureBox */
#pictureBox {padding: 9em 0 12em;}
#pictureBox .slick-slider { margin-bottom: 0; }
#pictureBox ul{ text-align: center;}
#pictureBox li{position: relative;display: inline-block;margin: 10px 40px;}
#pictureBox li a.photo {margin: 0 20px;background-size: contain;}
#pictureBox li p {position: absolute;left: calc( 5% / 2 );width: 90%;text-align: center;margin-top: 20px;font-size: 20px;font-weight: 800;font-style: italic;}

/* NewsBox */
#NewsBox { position: relative; padding: 80px 0; }
#NewsBox .bg , #bookBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }
#NewsBox h4.stitle , #NewsBox h2.title { text-align: center; }
#NewsBox #newList li >div { margin: 0 20px 20px 0; }
#NewsBox #newList li:nth-child(2n) >div { margin: 0 0 20px 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: #ffd9db; display: inline-block; color: #ff5860; }
#NewsBox #newList li .info p font { font-family: 'Rubik', sans-serif; color: #656565; }
#NewsBox #newList li .info h3 a { margin-top: 10px; height: 70px; font-weight: 500; font-size: 22px; color: #434343; -webkit-line-clamp: 2; }
#NewsBox p.more , #bookBox p.more { margin-top: 60px; 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 (min-width:1281px) {
	#productBox .list .item:hover img {background: rgb(102 102 102 / 25%);}
	#productBox .list .item:hover .info { top: 0; }
	#NewsBox #newList li .info p a:hover { background: #ff5860; 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 {}
	#productBox .list .item .info {/* top: 46%; */}
}

@media screen and (max-width:980px) {
	#pictureBox li{
    margin: 60px 20px;
}
	#productBox .bgTxt {bottom: -12vw;font-size: 5em;}
	#productBox .list{
    padding-top: 15%;
}
	#productBox h2{
    top: -9vw;
}
	#productBox .more{
    position: relative;
    top: 8vw;
    text-align: center;
}
	#aboutBox {position: relative;margin-bottom: 0;padding: 8vw 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: 40%;display: block;z-index: 2;}
	#aboutBox .info::before{
    width: calc(100% + 100px);
    left: -5px;
}
	#NewsBox #newList { margin: 0 auto; width: 80%; }
}
@media screen and (max-width:640px) {
	#productBox .list .item .info{}
	#aboutBox .info p.arts{
    transform: none;
    text-align: justify;
}
    #aboutBox .info {position: relative;margin: 0 auto;width: 85%;display: block;z-index: 2;}
	#aboutBox .info::before{
    left: -55px;
    top: -30px;
    height: calc(100% + 35px);
}
	#productBox{
    padding-bottom: 30vw;
}
	#productBox .list .item { margin: 0 10px 10px; }
	#productBox .bgTxt{
    font-size: 3em;
    margin-top: 40px;
}
	#productBox h2{
    font-size: 2.6em;
    top: 7vw;
}
	#productBox .more{
    top: 26vw;
}
	#productBox .list{
    padding-top: 45%;
}
	.wrap h2.title{
    font-size: 36px;
    line-height: 110%;
}
	.wrap h4.stitle{
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}
}
@media screen and (max-width:600px) {
	#productBox .list .item {margin: 10px 10vw 80px;}
}
@media screen and (max-width:500px) {
	#NewsBox #newList { width: 100%; }
}