#content{background:url(/images/22/bg.png);background-attachment: fixed; }
.wow{animation-duration:1.5s;animation-name:fadeInUp}

#aboutFunc{padding:90px 0 90px}
#youtube{background-size: cover;}
#aboutFunc .speBox{overflow:hidden;position:relative;min-height:670px}
.about-bg{
	background: rgba(43, 43, 43, 0.85);
    position: absolute;
    top: 0px;
    left: -18%;
    z-index: 0;
}
#aboutFunc .youtubebox{z-index: 2; width:calc(50% - 70px);padding:70px 70px;background-repeat:no-repeat;background-position:0;background-size:cover;position:absolute;left:0;top:0}
#aboutFunc #youtube{animation-name:fadeInLeft}
#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%}
#aboutFunc #about{float:right;width:calc(50% - 160px);padding:80px;position:relative}
#aboutFunc #about .about-info{position: relative;z-index: 2;width: 80%;margin: 0 auto;margin-top: 120px;}
#aboutFunc #about .speBoxTitle{text-align:center;line-height:120%;font-size:40px;color: #fff;}
#aboutFunc #about .subBoxTitle{text-align:center;color:#fff;font-weight:400;font-size:20px;line-height:120%;margin:10px 0 50px}
#aboutFunc #about .arts{box-sizing: border-box; height: 80px; text-align:center;color:#fff;font-size:16px;line-height:180%;margin-bottom:40px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
#aboutFunc #about .more{position:absolute;bottom:0;border-bottom:1px solid #eee;right:0;width:35%;padding-bottom:10px}
#aboutFunc #about .more a{font-family:'Oswald',sans-serif;font-weight:400;color:#eee;font-size:20px;line-height:110%;display:inline-block;transition:all linear .2s}
#product{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;padding-bottom:100px;padding-top:100px}
#product .speBox{position:relative}

.pro-list .p-box{padding:20px;margin: 0 15px; box-sizing: border-box;background: #ffc600;transition: ease .3s; }
.pro-list .p-box .photo{background-size: contain;background-repeat: no-repeat;background-position: center;}
.pro-list .p-box .p-info h3{
	color: #000;
    font-size: 20px;
    padding: 10px 0px;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	transition: ease .3s; 
}
.pro-list .p-box .p-info .describe{
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	height: 42px;
	color: #000;
	transition: ease .3s; 
}

#product .titleSet{
	display: inline-block;
    text-align: center;
    position: relative;
    height: 165px;
    margin-left: 270px;
}
#product .titleSet .speBoxTitle{
	left: 247px;
    top: 45px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 12px;
    -moz-transform: rotate(-90deg);
    font-size: 42px;
    width: 100%;
    line-height: 1;
}
#product .titleSet h3.subBoxTitle{width: 35%;border-bottom: 1px solid #eee;padding-top: 15px;}
#product .titleSet .subBoxTitle a{
	color: #fff;
    padding: 15px 0px;
    display: inline-block;
    transition: ease .3s;
}
#product .titleSet .subBoxTitle a:hover{letter-spacing: .2em;}

#prolay .pro-list .p-box:hover{background: #8d0809;}
#prolay .pro-list .p-box:hover .p-info h3{ color: #fff;}
#prolay .pro-list .p-box:hover .p-info .describe{color: #fff;}

.controller{position:relative;overflow:hidden}
.controller #NewsBox{float:left;width:65%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-color:#000;background-image:url(/images/22/index_news_bg.jpg)}
#NewsBox .speBox{padding:80px 50px;text-align:right;}
#NewsBox .speBox .titleSet{color:#fff;display:inline-block;margin-right:50px;}
#NewsBox .speBox .titleSet h2,#bookBox .speBox h2{text-align:center;font-size:35px;line-height:110%;margin-bottom:5px}
#NewsBox .speBox .titleSet h3{text-align:right;position: relative;}
#NewsBox .speBox .titleSet h3::after{content: "";position: absolute;bottom: 0px;right: 0px;width: 45%;display: inline-block;height: 1px;background: #eee;}
#NewsBox .speBox .titleSet h3 a,#bookBox .speBox p a{font-weight:400;color:#eaeaea;font-size:15px;display:inline-block;line-height:120%;transition:all linear .2s;padding: 15px 0 10px;}
#news{margin-top:120px;margin-right:280px}
#news .border{margin:0 13px;position:relative}
#news .border a{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;display:block}
#news .border .photo,#book .mofd .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000}
#news .border .photo img,#book .mofd .photo a img{width:100%}
#news .border .news-info{
	padding: 10px 20px;
    background: #ffc600cf;
    margin: 10px 20px;
    margin-top: -50px;
}
#news .border .news-info p{font-size:13px;text-align:center;color:#000;font-family:'Oswald',sans-serif}
#news .border .news-info h3{text-align:center;color:#fff;font-weight:400;font-size:16px;line-height:160%;margin:10px 0 40px;height:50px;overflow:hidden}
#news .border .news-info span{position:relative;display:block;margin:0 auto;width:40px;height:1px;background:#fff;transition:all linear .2s}
#news .border .news-info span:before{content:'';width:10px;height:1px;background:#fff;display:block;position:absolute;right:0;transform:rotate(35deg);transform-origin:right}
.controller #bookBox,#bookBoxbg{width:50%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:absolute;right:0;top:203px;background-color:#000;height:calc(100% - 203px)}
#bookBoxbg{background-image:url(/images/22/bookBoxbg.jpg);background-size: contain;}
#bookBox .speBox{position:absolute;top:-120px;left:calc(280px + 10%);z-index:3}
#bookBox .speBox p a{color:#9a9a9a}
#book{padding:80px}
#book .bList{position:relative}
#book .bList >div{z-index:3}
#book .bList:before{content:'';display:block;background-image:url(/images/22/index_more_leave.png);background-repeat:no-repeat;background-position:100% 100%;width:360px;height:290px;position:absolute;right:0;bottom:100%;z-index:2;max-width:50%;background-size:contain}
#book .bList:after{content:'';display:block;background-image:url(/images/22/index_more_icon.png);background-repeat:no-repeat;background-position:50%;width:240px;height:200px;position:absolute;left:0;bottom:0;z-index:2}
#book .mofd .photo{background-size:cover}
#book .mofd h3{padding:50px 0;text-align:right}
#book .mofd h3 a{display:inline-block;color:#fff;font-weight:400;font-size:18px;line-height:110%;border-bottom:1px solid rgba(255,255,255,0.27);padding:10px;padding-right:170px}
#freebox #freeboxlist{overflow:hidden}
#freebox #freeboxlist >div{display:inline-block;width:calc(100% / 3);margin-right:-4px}
#freebox #freeboxlist .free{padding:70px}
#freebox #freeboxlist .free h3{text-align:center;font-size:30px;line-height:120%;color:#2b2929;margin-bottom:20px}
#freebox #freeboxlist .free p{text-align:center;color:#545454;font-size:16px;line-height:160%}


@media screen and (min-width: 1025px) {

#aboutFunc .youtubebox,.controller #NewsBox,.controller #bookBox{background-attachment:fixed}
#prolay .p-box:hover .p-border:after{width:45%;left:0;opacity:1}
#prolay .p-box:hover .p-border .p-info:after{left:0}
#prolay .p-box:hover .p-border .p-info{left:0;opacity:1}
#news .slick-track >div .border{transition: ease .3s;}
#news .slick-track >div.slick-center .border{margin-top:50px}
#news .border:hover .news-info span{width:50px}
#product .flytxt{position:absolute;bottom:calc(100% + 90px);right:60px;font-size:22px}

#prolay{display:inline-block;width:calc(100% - 248px);margin-left:247px;}
#aboutFunc #about .more a:hover,#NewsBox .speBox .titleSet h3 a:hover,#bookBox .speBox p a:hover{letter-spacing:.2em}
}
@media screen and (max-width: 1440px) {
	#aboutFunc .speBox{min-height: 520px;}
	#aboutFunc #about .about-info{margin-top: 60px;}
#news{margin-right:160px}
}
@media screen and (max-width: 1280px) {
	header #menubar{width: calc(100% - 600px);}
#news{margin-right:140px}
#news .border{margin:0 8px}
#NewsBox .speBox{padding:80px 50px 80px 10px}
#book{padding:80px 0 80px 80px}
}
@media screen and (max-width: 1199px) {
	#NewsBox .speBox .titleSet h3::after{right: auto;left: 50%;transform: translateX(-50%);width: 120px;}
	#product{padding-top: 20px;}
	#NewsBox .speBox .titleSet h3{text-align: center;}
	#aboutFunc #about .about-info{width: 100%;}
	#aboutFunc #about .subBoxTitle{margin: 10px 0 20px;}
	#aboutFunc #about .speBoxTitle{font-size: 30px;}
	#aboutFunc #about .about-info{margin-top: 0px;}
.controller #NewsBox{width:100%;float:none}
.controller #bookBox{width:100%;position:initial;height:auto}
#bookBoxbg{display:none}
#book .bList:before{width:200px;height:160px}
#bookBox .speBox{position:initial;display:block;padding-top:60px}
#bookBox .speBox h2{color:#fff}
#bookBox .speBox p{text-align:center}
#news{margin:0}
#news .slick-track >div:nth-child(3n-1) .border{margin-top:0}
#NewsBox .speBox .titleSet{width:auto;display:block;margin:0 auto 50px}
#NewsBox .speBox{padding:80px 10px}
#book{padding:40px 20px}
#book .bList:after{background-size:contain;width:150px;background-position:50% 100%}
}

@media screen and (max-width: 1024px) {
	#product .titleSet{width: 100%;margin-left: 0px;}
	#product .titleSet h3.subBoxTitle{width: 100%;position: relative;border-bottom: none;}
	#product .titleSet h3.subBoxTitle::after{
		content: "";
	    position: absolute;
	    bottom: 0px;
	 	right: auto;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 120px;
	    display: inline-block;
	    height: 1px;
	    background: #eee;
	}
	#product{padding-top: 90px;}
	.about-bg{left: 0%;min-height: 400px;}
	#aboutFunc #about .about-info{width: 80%;}
	header ul.btn-section{margin-top: 18px;}
#aboutFunc{padding:10px 0}
#aboutFunc .speBox{min-height:initial}
#aboutFunc .youtubebox{width:calc(100% - 160px);padding:50px;margin:30px;position:initial}
#aboutFunc #about{width:calc(100% - 60px);padding:50px 30px}
#aboutFunc #about .speBoxTitle,#product .titleSet .speBoxTitle{font-size:32px}
#aboutFunc #about .subBoxTitle,#product .titleSet .subBoxTitle a{font-size:16px;margin:0 0 30px}
#product .flytxt{text-align:center;font-size:17px;line-height:120%;color:#2d2c2c}
#prolay{margin-top:10px}
#product .titleSet .speBoxTitle{text-align:center}
#product .titleSet .subBoxTitle{text-align:center;margin-top:10px}
#product .titleSet .subBoxTitle a{color:#fff;font-weight:400;display:block;margin-bottom:0px}
#prolay .p-box .p-border:after{width:45%;left:0;opacity:1}
#prolay .p-box .p-border .p-info:after{left:0}
#prolay .p-box .p-border .p-info{left:0;opacity:1}
#freebox #freeboxlist >div{width:100%;margin-right:0}
}
@media screen and (max-width: 768px) {
#prolay .p-box .p-border .p-info h3{font-size:18px}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 60px);padding:30px}
#prolay .p-box .p-border:after{width:55%}
#prolay .p-box .p-border .p-info .describe{height:46px;overflow:hidden}
#prolay .p-box .p-border .p-info .price span{display:block}
#freebox #freeboxlist .free{padding:70px 50px}
}
@media screen and (max-width: 640px) {
	#content{background:#000;}
	#aboutFunc #about .about-info{width: 95%;}
	#aboutFunc #about .speBoxTitle, #product .titleSet .speBoxTitle,#NewsBox .speBox .titleSet h2{font-size: 28px;}
	#aboutFunc #about .more{position: static;}
	#SeoStarRating{margin-bottom: 30px;}
#aboutFunc .youtubebox{width:calc(100% - 70px);padding:20px;margin:10px 15px}
#aboutFunc #about .more{width:50%}
#aboutFunc #about .more a{font-size:17px}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 40px);padding:20px}
#book .mofd h3{padding:30px 0 50px}
#prolay .p-box .p-border .p-info{position:initial;max-width:calc(100% - 40px);width:calc(100% - 40px)}
#prolay .p-box .p-border:after{display:none}
#prolay .p-box{margin:10px}
}
@media screen and (max-width: 480px) {
#news .border .news-info{margin:10px 0;margin-top:-50px;padding:10px}
#news .border .news-info h3{margin:10px 0 20px}
#book .bList:after{background-size:100%;width:80px;background-position:100% 100%}
#book .mofd h3 a{padding-right:100px}
#book .mofd h3{padding:20px 0 30px}
#prolay .p-box{margin:15px}
#prolay .p-box .p-border .p-info h3{font-size:17px}
#prolay .p-box .p-border .p-info .describe{margin:10px 0}
#freebox #freeboxlist .free{padding:50px 30px}
#freebox #freeboxlist .free h3{font-size:24px}
}