/* wrapbg */
.wrapbg #gradient { width: 100%; height: 100%; }

/* more */
p.more a { position: relative; padding-bottom: 10px; display: inline-block; font-size: 12px; color: #161616; }
p.more a:after { position: absolute; width: calc(100% - 29px); height: 2px; background: #161616; display: block; left: 0; bottom: 0; content: ""; }
p.more:hover a:after { width: 0; }
p.more a font.dote span { position: absolute; width: 4px; height: 4px; background: #161616; border-radius: 50%; display: inline-block; right: 0; bottom: -1px; }
p.more a font.dote span:nth-child(1) { right: 12px; }
p.more a font.dote span:nth-child(2) { right: 6px; }
p.more:hover a font.dote span:nth-child(1) { right: calc(100% - 5px); }
p.more:hover a font.dote span:nth-child(2) { right: calc(50% - 2px); }

/* aboutBox */
#aboutBox { overflow: hidden; padding: 50px 0 0; }
#aboutBox .workframe { text-align: center; }
#aboutBox .pa { width: calc((55% - 20px) / 2); display: inline-block; }
#aboutBox .leftTxt { margin-bottom: 10%; }
#aboutBox .leftTxt h2 { font-size: 3vw; text-shadow: 0 0 15px #bcbcbc; }
#aboutBox .aboutImg { width: 45%; box-shadow: rgb(195, 195, 195) 0px 0px 20px; }
#aboutBox .rightTxt { position: relative; margin-bottom: 10%; vertical-align: bottom; }
#aboutBox .rightTxt .line { position: absolute; top: -38px; left: 30px; }
#aboutBox .rightTxt .line span { margin-right: 8px; width: 2px; height: 30px; background: #161616; display: inline-block; transform: rotate(30deg) translateX(0); }
#aboutBox .rightTxt p { margin-left: 70px; }
#aboutBox .rightTxt p.arts { font-size: 18px; }
#aboutBox .rightTxt #SeoStarRating { margin: 10px 0 10px 70px; }

/* product */
#product { padding: 50px 0 0; }
#product h2.titleBox { margin: 30px 0px; text-align: center; font-size: 4vw; color: #617472; }
#product h2.titleBox font { position: relative; display: inline-block; }
#product h2.titleBox font:after { position: absolute; width: 30%; height: 20px; display: block; background: #ebff79; z-index: -1; content: ""; right: 0; bottom: 30px; }
#product .pro-list >div .bgBox { position: relative; margin: 10px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
#product .pro-list >div .bgBox:hover { background-position: 50% -80px; box-shadow: 0 0 10px #676767; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); filter: none; }
#product .pro-list >div .bgBox a.link { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
#product .pro-list >div .bgBox .info { position: absolute; overflow: hidden; padding: 10px 20px; width: calc(100% - 40px); background: #fff; bottom: -90px; left: 0; }
#product .pro-list >div .bgBox:hover .info { bottom: 0; }
#product .pro-list >div .bgBox .info h3 { height: 34px; font-size: 20px; -webkit-line-clamp: 1; }
#product .pro-list >div .bgBox .info .price { width: calc(100% - 50px); min-height: 30px; display: inline-block; vertical-align: bottom; }
#product .pro-list >div .bgBox .info .price span { font-size: 18px; }
#product .pro-list >div .bgBox .info .price span.old { margin-right: 15px; font-size: 14px; text-decoration-line: line-through; color: #888; }
#product .pro-list >div .bgBox .info .goTxt { width: 38px; display: inline-block; font-size: 12px; }
#product p.more { text-align: center; }

/* NewsBox */
#NewsBox { position: relative; padding: 100px 0 0; }
#NewsBox .bg { position: absolute; width: 100%; height: calc(100% - 300px); background: #766051; top: 200px; left: 0; }
#NewsBox h2 { position: absolute; }
#NewsBox .leftPhoto { position: absolute; width: calc((55% - 50px) / 2); bottom: 15%; left: 0; z-index: 2; }
#NewsBox .leftPhoto a { position: relative; }
#NewsBox .leftPhoto a.photo img { width: 100%; }
#NewsBox .leftPhoto a font { position: absolute; padding: 15px 20px; width: calc(100% - 40px); background: rgba(0, 0, 0, 0.7); font-size: 16px; color: #fff; left: 0; bottom: 0; }
#NewsBox ul li { position: relative; text-align: center; }
#NewsBox ul li .newImg { margin: 10px 0; width: 45%; box-shadow: 0 0 10px rgba(79, 69, 62, 0.65); display: inline-block; }
#NewsBox ul li .info { position: absolute; width: calc((65% - 50px) / 2); top: 40%; right: 0; }
#NewsBox ul li .info h3 { margin: 0 0 30px 10px; height: 53px; line-height: 53px; color: #fafafa; text-shadow: 0 0 6px #623f29; -webkit-line-clamp: 1; }
#NewsBox ul li .info h3 a { font-size: 50px; color: #fafafa; }
#NewsBox ul li .info p { margin-left: 90px; font-size: 18px; color: #fafafa; }
#NewsBox ul li .info p.describe { height: 120px; -webkit-line-clamp: 4; }
#NewsBox ul li .info p.more { margin-top: 20px; text-align: right; }
#NewsBox ul li .info p.more a { color: #fafafa; }
#NewsBox ul li .info p.more a:after , #NewsBox ul li .info p.more a font.dote span { background: #fafafa; }

/* customBox */
#customBox { overflow: hidden; margin-top: -130px; padding: 160px 0; background: url(/images/30/img-customBg.jpg) fixed center top /  100% auto; }
#customBox .rightBox { margin: 0 0 0 auto; width: 50%; }
#customBox .rightBox .youtube { position: absolute; top: 120px; }
#customBox .rightBox .youtube a.photo { position: relative; box-shadow: 0 0 10px #929292; }
#customBox .rightBox .youtube a.photo img { background: rgba(0, 0, 0, 0.6); }
#customBox .rightBox .youtube a.photo svg { position: absolute; width: 25px; height: 25px; top: calc((100% - 25px) / 2); left: calc((100% - 25px) / 2); -webkit-animation: playsvg 2s infinite alternate ease-in-out; animation: playsvg 2s infinite alternate ease-in-out; z-index: 2; }
#customBox .rightBox .youtube a.photo .line { position: absolute; width: 100%; height: 2px; background: #fff; display: block; top: 0; left: 0; -webkit-animation: line1 5s infinite ease-out; animation: line1 5s infinite ease-out; opacity: 0; }
#customBox .rightBox .youtube a.photo .line.right { width: 2px; height: 100%; left: auto; right: 0; -webkit-animation-name: line2; animation-name: line2; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
#customBox .rightBox .youtube a.photo .line.bottom { top: auto; bottom: 0; -webkit-animation-name: line3; animation-name: line3; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
#customBox .rightBox .youtube a.photo .line.left { width: 2px; height: 100%; -webkit-animation-name: line4; animation-name: line4; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
#customBox .rightBox ul li h2 { font-size: 3vw; }
#customBox .rightBox ul li article { margin: 30px 0 0 250px; font-size: 18px; }

/* bookBox */
#bookBox { padding: 60px 0; }
#bookBox h2 { margin-bottom: 30px; text-align: center; font-size: 4vw; }
#bookBox ul li a { margin: 0 10px; position: relative;}
#bookBox ul li a img { width: 100%; }
#bookBox p.more { text-align: center; }
#bookBox a.photo font {
    position: absolute;
    padding: 10px;
    width: 100%;
    background: rgba(0, 0, 0, .3);
    display: block;
    font-size: 16px;
    color: #fff;
    left: 0;
    bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (max-width: 1500px) {
	#aboutBox .pa { width: calc((60% - 20px) / 2); }
	#aboutBox .aboutImg , #NewsBox ul li .newImg { width: 40%; }
	#aboutBox .rightTxt { margin-bottom: 0; }
	#NewsBox ul li .info { top: 200px; }
}
@media screen and (max-width: 1279px) {
	#aboutBox .leftTxt { position: absolute; top: 30%; left: 0; z-index: 3; }
	#aboutBox .aboutImg { width: 50%; }
	#aboutBox .rightTxt { width: calc(40% - 20px); }
	#customBox { padding: 150px 0 70px; }
}
@media screen and (max-width: 1160px) {
	#NewsBox { padding-top: 60px; }
	#NewsBox .bg { height: calc(100% - 120px); top: 90px; }
	#NewsBox ul li .info { top: 120px; }
	#customBox { margin-top: -60px; padding: 60px 0 50px; }
}
@media screen and (max-width: 980px) {
	#NewsBox .leftPhoto { width: 150px; border: 3px #ccc solid; bottom: -60px; }
	#NewsBox .leftPhoto a.photo img { height: 150px; }
	#NewsBox .leftPhoto a font { display: none; }
	#NewsBox ul li { text-align: left; }
	#NewsBox ul li .newImg { margin-left: 5%; }
	#NewsBox ul li .info { position: relative; float: right; width: calc(60% - 50px); top: 60px; }
	#NewsBox ul li .info h3 { margin: 0 0 10px 10px; }
	#NewsBox ul li .info h3 a { font-size: 30px; }
	#customBox .rightBox { width: 80%; }
}
@media screen and (max-width: 800px) {
	#aboutBox .aboutImg { width: 70%; }
	#aboutBox .rightTxt { position: absolute; padding: 15px; width: calc(100% - 30px); background: rgba(255, 255, 255, .6); left: 0; bottom: 0; }
	#aboutBox .rightTxt .line { position: absolute; top: auto; left: auto; }
	#NewsBox .bg { top: 30px;  height: 100%; }
	#NewsBox .leftPhoto { bottom: -140px; }
	#customBox { margin-top: 0; padding: 90px 0 80px; background-size: cover; }
	#customBox .rightBox { margin: 0 auto; width: 90%; }
}
@media screen and (max-width: 640px) {
	#aboutBox .leftTxt { display: none; }
	#aboutBox .aboutImg { width: 80%; }
	#NewsBox .leftPhoto { bottom: -160px; left: auto; right: 0; }
	#NewsBox ul li .newImg { width:  30%; }
	#NewsBox ul li .info { width: calc(70% - 50px); top: 0; }
	#NewsBox ul li .info p { margin-left: 20px; font-size: 16px; }
	#NewsBox ul li .info p.describe { height: 60px; -webkit-line-clamp: 2; }
	#customBox .rightBox { padding: 10px 15px; width: calc(90% - 30px); background: rgba(216, 216, 216, .2); }
	#customBox .rightBox .youtube { display: none; }
	#customBox .rightBox ul li article { margin: 10px 0; }
}