#product { margin-left: 90px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-color: #f9f9f9; position: relative; border-bottom: 1px solid #ededed; }

#product .slick-list { overflow: visible; }
#prolay { width: calc(100% - 90px); position: relative; z-index: 3; display: inline-block; }
#prolay .pro-list { overflow: visible; }
#prolay .p-box { padding: 50px; transition: all linear .2s; background: #fff; border-right: 1px solid #ededed; }
#prolay .p-box .p-border .p-info { margin-bottom: 40px; }
#prolay .p-box .p-border .p-info h3 { height: 56px; overflow: hidden; }
#prolay .p-box .p-border .p-info h3 a { font-size: 26px; line-height: 110%; color: #2b2626; }
#prolay .p-box .p-border .p-info .describe { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 140%; margin: 10px 0; height: 23px; }
#prolay .p-box .p-border .photo { position: relative; }
#prolay .p-box .p-border .photo a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-color: #f9f9f9; }
#prolay .p-box .p-border .photo a img { width: 100%; }
#prolay .p-box .p-border .photo .price { position: absolute; bottom: 20px; left: 20px; width: 100%; }
#prolay .p-box .p-border .photo .price span { display: block; font-size: 20px; line-height: 120%; color: #b72424; font-weight: 700; }
#prolay .p-box .p-border .photo .price span.old { font-size: 13px; color: #7b7b7b; margin-bottom: 5px; font-weight: 400; }
#product .speBox .subBoxTitle b { color: #bd3738; font-weight: 700; display: block; }

#freebox { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; position: relative; }
#freebox .webframe { position: relative; z-index: 3; color: #fff; padding: 230px 0; }
#freebox:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(3, 18, 23, 0.69); z-index: 1; }
#freebox .webframe>div { position: relative; z-index: 2; }
#freebox span { position: absolute; width: 1px; height: 100%; top: 0; left: 0; display: block; background: rgba(255, 255, 255, 0.12); }
#freebox span:nth-child(4) { left: calc(100% / 3); }
#freebox span:nth-child(5) { left: calc((100% / 3) * 2); }
#freebox span:nth-child(6) { left: calc((100% / 3) * 3); }
#freebox .speBox { margin-bottom: 70px; }
#freebox .speBox .speBoxTitle { font-size: 50px; line-height: 110%; }
#freebox #freeboxlist { overflow: hidden; }
#freebox #freeboxlist>div { display: inline-block; margin-right: -4px; width: calc(100% / 3); vertical-align: top; }
#freebox #freeboxlist .free { width: 80%; }
#freebox #freeboxlist .free h3 { font-size: 24px; line-height: 120%; margin-bottom: 20px; }
#freebox #freeboxlist .free p { font-size: 16px; line-height: 150%; }

#aboutFunc { background: #efefef; padding: 150px 0; position: relative; }
#aboutFunc .speBox { position: relative; z-index: 2; width: 50%; }
#aboutFunc .speBox .speBoxTitle { font-size: 50px; line-height: 110%; }
#aboutFunc .speBox .subBoxTitle { color: #757575; }
#aboutFunc #about { background: #fff; padding: 50px 70px; width: calc(70% - 140px); margin-top: 50px; position: relative; z-index: 2; overflow: hidden; }
#aboutFunc #about .arts { line-height: 180%; font-size: 16px; float: left; width: calc(100% - 180px); }
#aboutFunc #about .more { text-align: right; float: right; width: 180px; }
#aboutFunc #about .more a { display: inline-block; border: 1px solid #bd3738; color: #bd3738; padding: 12px 35px; font-size: 12px; line-height: 110%; transition: all linear .2s; }
#aboutFunc #about .more a:hover { background: #bd3738; color: #fff; }

#youtube { position: absolute; right: 0; width: 40%; top: 10%; right: 10%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#youtube .UTwo { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#youtube .UTwo a { display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); position: absolute; z-index: 5; color: #dcdcdc; font-size: 30px; left: calc(50% - 50px); top: calc(50% - 50px); transition: all linear .3s; }
#youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; left: calc(50% - 55px); top: calc(50% - 55px); font-size: 34px; }
#youtube .UTwo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#NewsBox { padding: 100px 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#NewsBox .speBox { margin-bottom: 50px; }
#NewsBox .speBox .webframe { overflow: hidden; position: relative; }
#NewsBox .speBox .webframe:after, #bookBox .speBox .webframe:after { content: ''; display: block; width: 100%; height: 1px; background: #e8e8e8; position: absolute; bottom: 50%; left: 0; }
#NewsBox .speBox .speBoxTitle, #bookBox .speBox h2 { font-size: 60px; line-height: 100%; float: left; color: #252525; position: relative; z-index: 2; background: #fff; padding-right: 40px; }
#NewsBox .speBox .subBoxTitle, #bookBox .speBox p { float: right; position: relative; z-index: 2; margin-top: 8px; }
#NewsBox .speBox .subBoxTitle a, #bookBox .speBox p a { color: #929292; font-weight: 400; font-size: 15px; display: inline-block; padding: 10px 15px; background: #fff; margin-right: 25px; }
#NewsBox #news li { float: left; width: calc(50% - 5px); position: relative; margin: 0 5px 10px 0; }
#NewsBox #news li:nth-child(even) { float: right; margin: 0 0 10px 5px; }
#NewsBox #news li a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 3; }
#NewsBox #news li .border { position: relative; z-index: 2; overflow: hidden; }
#NewsBox #news li .border .photo { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden; transition: all linear .3s; }
#NewsBox #news li .border .photo img { width: 100%; }
#NewsBox #news li:hover .border .photo { transform: scale(1.1); }
#NewsBox #news li .news-info { position: absolute; top: 0; left: 0; width: calc(100% - 160px); height: calc(100% - 160px); padding: 80px; color: #fff; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; background-color: rgba(0, 0, 0, .5); background-image: linear-gradient(to top, transparent, #1f1f1f); -moz-opacity: .9; -khtml-opacity: .9; -webkit-opacity: .9; opacity: .9; -ms-filter: alpha(opacity=90); filter: alpha(opacity=90); transition: all linear .3s; }
#NewsBox #news li:hover .news-info { background-image: none; background: #bd3738; }
#NewsBox #news li .news-info .news-bottom .date { font-size: 15px; }
#NewsBox #news li .news-info .news-bottom h3 { font-size: 40px; line-height: 120%; margin: 50px 0 30px; max-height: 96px; overflow: hidden; }
#NewsBox #news li .news-info .news-bottom .describe { line-height: 150%; font-size: 16px; max-height: 74px; overflow: hidden; }
#NewsBox #news li .news-info .news-bottom .more { display: inline-block; border: 1px solid #fff; padding: 10px 25px; font-size: 13px; margin-top: 50px; }

#bookBox { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; padding: 70px 0; background-color: #ededed; }
#bookBox .webframe { background: #fff; overflow: hidden; position: relative; }
#bookBox .speBox h2 { float: left; margin: 30px 50px; }
#bookBox .speBox p { float: right; margin-top: 40px; }
#bookBox #book .bList { margin: 0 24px 24px; }
#bookBox #book .bList .mofd { margin: 16px; }
#bookBox #book .bList .mofd .photo { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#bookBox #book .bList .mofd .photo a { display: block; }
#bookBox #book .bList .mofd .photo a img { width: 100%; }
#bookBox #book .bList .mofd h3 { margin-top: 15px; font-size: 20px; font-weight: 400; color: #423c3c; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#bookBox #book .bList .mofd h3 i { color: #bd3738; }

@media screen and (min-width: 1441px) {
	#product .speBox { width: 90px; background: #f9f9f9; display: inline-block; margin-right: -4px; position: absolute; right: 0; top: 0; height: 100%; z-index: 2; }
	#product .speBox .speSet { text-align: center; margin-top: calc(50% + 78px); }
	#product .speBox .speBoxTitle { text-align: center; line-height: 120%; color: #4e4e4e; writing-mode: tb-rl; display: inline-block; font-size: 26px; }
	#product .speBox .subBoxTitle { text-align: center; font-size: 14px; line-height: 120%; writing-mode: tb-rl; display: inline-block; }
	#product .speBox a { position: absolute; top: 0; right: 0; width: 90px; height: 100%; z-index: 3; transition: all linear .2s; }
	#product .speBox a:hover { background: rgba(189, 55, 56, 0.24); }
}
@media screen and (max-width: 1440px) {
	#prolay { width: 100%; }
	#product .speBox { position: relative; }
	#product .speSet { padding: 30px 0; }
	#product .speBox .speBoxTitle { text-align: center; line-height: 120%; color: #4e4e4e; font-size: 26px; }
	#product .speBox .subBoxTitle { text-align: center; font-size: 14px; line-height: 120%; }
	#product .speBox a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; transition: all linear .2s; }
	#product .speBox a:hover { background: rgba(189, 55, 56, 0.24); }
	#freebox .speBox .speBoxTitle { font-size: 40px; }
	#freebox .webframe { padding: 180px 0; }
	#NewsBox #news li .news-info { width: calc(100% - 100px); height: calc(100% - 100px); padding: 50px; }
	#NewsBox #news li .news-info .news-bottom h3 { font-size: 32px; margin: 30px 0; max-height: 78px; }
	#NewsBox #news li .news-info .news-bottom .more { margin-top: 30px; }
}
@media screen and (max-width: 1280px) {
	#freebox .webframe { padding: 130px 0; }
	#NewsBox #news li .news-info .news-bottom .describe { max-height: 50px; }
	#NewsBox #news li .news-info .news-bottom h3 { font-size: 26px; margin: 30px 0; max-height: 62px; }
}
@media screen and (min-width: 1025px) {
	#prolay .p-box:hover { transform: scale(1.05); z-index: 3; background: #c12b2b; border-right: 1px solid #c12b2b; }
	#prolay .p-box:hover .p-border .p-info h3 a, #prolay .p-box:hover .p-border .p-info .describe { color: #fff; }
	#NewsBox .speBox .subBoxTitle a:hover, #bookBox .speBox p a:hover { color: #bd3738; }
}
@media screen and (max-width: 1024px) {
	#product { margin-left: 0; }
	#prolay .p-box .p-border .p-info h3 a { font-size: 22px; }
	#prolay .p-box .p-border .p-info h3 { height: 48px; }
	#freebox #freeboxlist>div { margin-right: 0; width: 100%; }
	#freebox .speBox .speBoxTitle { font-size: 30px; }
	#freebox #freeboxlist .free { width: 100%; margin-bottom: 50px; }
	#freebox #freeboxlist>div:last-child .free { margin-bottom: 0; }
}
@media screen and (max-width: 980px) {
	#freebox .webframe { padding: 100px 0; }
	#aboutFunc #about { padding: 50px; width: calc(80% - 100px); }
	#youtube { width: 50%; right: 5%; }
	#aboutFunc .speBox .speBoxTitle { font-size: 40px; }
	#NewsBox #news li .news-info .news-bottom .more { margin-top: 20px; padding: 8px 20px; }
	#NewsBox #news li .news-info .news-bottom h3 { font-size: 22px; margin: 20px 0; max-height: 52px; }
}
@media screen and (max-width: 768px) {
	#NewsBox #news li .news-info { width: calc(100% - 60px); height: calc(100% - 60px); padding: 30px; }
	#NewsBox #news li .news-info .news-bottom .describe { max-height: initial; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media screen and (max-width: 640px) {
	#aboutFunc #about { width: calc(100% - 100px); }
	#youtube { position: inherit; width: 100%; }
	#aboutFunc .speBox { width: 100%; }
	#aboutFunc #about .arts { width: 100%; }
	#aboutFunc #about .more { width: auto; margin-top: 20px; }
	#NewsBox, #aboutFunc { padding: 70px 0; }
	#NewsBox #news li, #NewsBox #news li:nth-child(even) { width: 100%; margin: 5px 0 0; float: none; }
}
@media screen and (max-width: 480px) {
	#prolay .p-box { padding: 40px 30px; }
	#prolay .p-box .p-border .p-info h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: auto; }
	#prolay .p-box .p-border .p-info { margin-bottom: 20px; }
	#freebox span { left: 50%; }
	#freebox span:nth-child(4), #freebox span:nth-child(5), #freebox span:nth-child(6) { display: none; }
	#aboutFunc #about { width: calc(100% - 70px); padding: 35px; margin-top: 30px; }
	#NewsBox .speBox .speBoxTitle, #bookBox .speBox h2 { font-size: 45px; }
	#NewsBox .speBox .subBoxTitle, #bookBox .speBox p { float: none; clear: both; text-align: right; margin: 0; }
	#NewsBox .speBox .webframe:after, #bookBox .speBox .webframe:after { bottom: 20px; }
	#bookBox .speBox h2 { margin: 30px 30px 0; }
	#bookBox #book .bList { margin: 0; }
	#NewsBox #news li .news-info { width: calc(100% - 80px); height: calc(100% - 80px); padding: 40px; }
}