.wrap {position: relative;background: url(../../images/42/wrap-bg.jpg) no-repeat 50%;background-size: cover;z-index: 10;}
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* newsBox */
#newsBox {position: relative;display: inline-block;padding: 2vw 0;z-index: 2;}
#newsBox .newslist:after {position: absolute;display: block;top: 81px;right: -43%;width: 69%;height: 100%;background: url(../../images/42/nave.png) 50% no-repeat;background-size: contain;content: "";}
#newsBox .adsBox {position: relative;display: inline-block;width: 35%;text-align: left;margin: 0 5vw;}
#newsBox .adsBox ul { font-size: 0;}
#newsBox .adsBox ul li {width: calc((100% / 2) - 40px);display: inline-block;margin: 20px;transform: skewX(-7deg);}
#newsBox .adsBox ul li a{outline: 10px solid #b8a37e;}
#newsBox .newslist {position: relative;display: inline-block;width: 35%;text-align: right;margin: 3vw 0 3vw 2vw;background: rgb(0 0 0 / 0.7);} 
#newsBox .newslist .titleBox {position: relative;padding: 15px 0 0px;text-align: center;}
#newsBox .newslist .titleBox h2.title {display: inline-block;font-size: 30px;color: #fff;}
#newsBox .newslist .titleBox:before , #newsBox .newslist .titleBox:after {margin: 0 15px;width: 7px;height: 7px;background: #b8a37f;border-radius: 50%;display: inline-block;content: "";}
#newsBox .newslist ul {padding: 10px 30px 0px;}
#newsBox .newslist ul li {padding: 10px 20px 0px;border-bottom: 1px #292929 solid;}
#newsBox .newslist ul li p {display: inline-block;font-family: 'Frank Ruhl Libre', serif;color: #ffffff;border: 1px solid #b8a37e;background: #b8a37e;padding: 0px 10px;font-size: 12px;}
#newsBox .newslist ul li article {width: 85%;height: 25px;max-height: initial;overflow: hidden;-webkit-line-clamp: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;font-size: 14px;font-weight: 300;color: #848484;margin: 0px 0 8px;}
#newsBox .newslist ul li h4{display: inline-block;width: 65%;}
#newsBox .newslist ul li h4 a {font-weight: 400;font-size: 18px;color: #f7f7f7;-webkit-line-clamp: 1;line-height: 180%;}

/* aboutBox */
#aboutBox {overflow: hidden;}
#aboutBox .imgs {position: absolute;width: 50vw;height: 100%;top: 0;left: 0;z-index: 1;}
#aboutBox .imgs .list {height: 40vw;background: no-repeat 50% / cover;}
#aboutBox .info {position: relative;padding: 70px 0 70px 55vw;width: 490px;z-index: 3;}
#aboutBox .info .bgTxt {text-align: left; }
#aboutBox .info .stitle {position: relative;margin-bottom: 25px;padding: 0px 0 15px;font-size: 18px;color: #6D6D6D;}
#aboutBox .info .stitle:after{position: absolute;top: 33%;width: 70px;height: 1px;display: inline-block;background: #CCC;content: "";}
#aboutBox .info article {line-height: 200%;color: #6D6D6D;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

/* productBox */
#productBox {padding: 2vw 0;}
#productBox ul{margin-bottom: -30px;}
#productBox ul li { position: relative; margin: 10px 0 70px; padding: 30px; }
#productBox ul li .img {position: absolute;height: calc(100% - 50px);width: calc(100% - 50px);border: 6px solid #b8a37f;-webkit-box-shadow: 0 7px 14px rgba(56, 5, 5, .37);box-shadow: 0 7px 14px rgba(56, 5, 5, .37);-webkit-transition: -webkit-transform .3s cubic-bezier(.25,.46,.45,.94);transition: -webkit-transform .3s cubic-bezier(.25,.46,.45,.94);transition: transform .3s cubic-bezier(.25,.46,.45,.94);transition: transform .3s cubic-bezier(.25,.46,.45,.94),-webkit-transform .3s cubic-bezier(.25,.46,.45,.94);left: 20px;top: 20px;}
#productBox ul li .img:before { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); background: #fff; display: block; content: ""; }
#productBox ul li a.photo {position: relative;margin: 10px;z-index: 2;}
#productBox ul li a.photo:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 0.5); content: ""; opacity: 0;z-index:-1; }
#productBox ul li .prolink {position: absolute;left: calc((100% - 75%) / 2);width: 75%;transition-duration: .3s;transform: translateY(-6vw);opacity: 0;z-index: 9;}
#productBox ul li .prolink a {display: inline-block;width: 100%;text-align: center;font-size: 28px;color: #fff;}
#productBox ul li .prolink span {display: inline-block;width: 100%;text-align: center;font-size: 1.5em;margin-top: -57px;}

/* bookBox bookList*/
#bookBox {font-size: 0;}
#bookBox .row { position: relative; width: 100%; }
#bookBox #BookList {padding-bottom: 7vh;}
#bookBox #BookList ul li { position: relative; width: 100%; max-width: 1180px; -webkit-box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3);   }
#bookBox #BookList ul li.slick-slide {position: relative;-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform: scale(0.8);z-index: -1;margin: 0 -70px;filter: blur(3px);}
#bookBox #BookList ul li.slick-slide:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgb(215 162 151 / 78%);content: "";}
#bookBox #BookList ul li.slick-center{ z-index: 1; -webkit-transform: scaleY(0.9); -ms-transform: scaleY(0.9); transform: scaleY(0.9); filter: none}
#bookBox #BookList ul li.slick-center:after { display: none; }
#bookBox #BookList ul li h3 {position: absolute;width: 100%;left: 0;bottom: 35px;}
#bookBox #BookList ul li h3 a {height: 70px;color: #fff;font-size: 3rem;font-weight: bold;text-shadow: 0 0 10px rgb(0 0 0 / 50%);text-align: center;-webkit-line-clamp: 1;}

/* customBox */
#customBox{ position: relative; width: 100%;}
#customBox ul{position: relative;box-sizing: border-box;width: 100%;display: flex;align-items: center;padding: 3vw 0;}
#customBox ul li{display: flex;flex: 1;justify-content: center;align-items: center;color: #fff;border-left: #555 1px solid;}
#customBox ul li img{ width: 60px; height: 60px; margin-right: 20px; }
#customBox ul li h3{flex-direction: column;display: flex;justify-content: center;font-size: 30px;font-weight: bold;margin-left: 22px;}
#customBox ul li span{color: #888;font-weight: 400;}

@media screen and (min-width: 1281px) {
	#newsBox .newslist ul li:hover { background: #444444}
	#productBox ul li:hover .img { -webkit-transform: scale(.95); transform: scale(.95); }
    #productBox ul li:hover a:after { opacity: 1; }
    #productBox ul li:hover .prolink { transform:translateY(-11vw); opacity: 1;}
    #productBox ul li .prolink a:hover { transform: scale(1.1)}
}
@media screen and (max-width: 1280px) {
	#newsBox .adsBox, #newsBox .newslist{width: 90%;text-align: center;margin-top: 15vw;}
	#newsBox .newslist{margin-left: 5vw;margin-top: 20vw;}
	#newsBox .newslist:after{right: -23%;}
	#newsBox .adsBox ul li{}
	#newsBox .adsBox ul li a.photo{ background-size: 100% auto; }
}
@media screen and (max-width: 1110px) {
	#customBox ul { display: block}
	#customBox ul li{display: inline-block;width: calc((100% / 2) - 64px);margin: 30px;text-align: center;border: 0;}
    #customBox ul li h3{display: inline-block;text-align: center;margin: 0;}
    #customBox ul li span{vertical-align: top;font-size: 12px;}
}
@media screen and (max-width: 680px) {
	#newsBox .newslist:before{bottom: 106px;width: 100%;}
	#newsBox .newslist .titleBox h2.title{font-size: 22px;font-weight: 400;}
	#newsBox .newslist ul li h4, #newsBox .newslist ul li article{ width: 100%}
	#newsBox .newslist:after{top: 110px;right: 0%;width: 35%;height: 72%;}
	#productBox .proList {padding: 5vh 0 1vh;}
	#productBox .proList li.slick-center {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
    #bookBox #customBox .info article{width: 90%;padding: 8vw 0 0;}
}
@media screen and (max-width: 450px) {	
	#customBox ul li{width: 100%;border-bottom: 1px solid #2f2f2f;margin: 0;padding: 10px 0;}
	#customBox ul li:last-child{ border-bottom: 0}
	#customBox ul li h3{text-align: left;font-size: 20px;}
}