@charset "utf-8";
.title{font-size:34px;background:url(../images/title-after.png) no-repeat;margin: 50px auto 30px;}
.title:after{}
#about{position:relative;overflow: hidden;background: url(../images/about-bg.jpg) no-repeat center;}
.aboutR{position:absolute;height:100%;top:0;z-index: 1;right:0;width: 40%;}
.aboutL{float:left;width:60%;padding-bottom:50px}
.aboutL .title{background-position:bottom left;margin-bottom: 10px;}
.aboutL p{font-size: 20px;margin-bottom: 20px;}
.aboutL div{color: #ddd;margin-bottom:30px;}
.more{
    display: block;
    background: url(../images/bg_2.jpg) repeat-x;
    width: 120px;
    text-align: center;
    font-size: 17px;
    height: 38px;
    line-height: 38px;
    margin-top: 16px;
}
.more:hover{}
@media (max-width:769px){
	.title{font-size:20px;margin:10px auto}
	.title:after{}
	#about>div{}
	#about:before,#about:after{position:unset}
	#about:before{width:100%}
	#about:after{}
	.aboutL{float:none;width:100%;overflow:hidden;padding-bottom: 15px;}
	.aboutL .title{text-align:center;background-position:center bottom}
	.aboutL div{font-size:14px;margin-bottom:10px}
	.more{margin:0 auto}
	.aboutR{position:unset;width:100%}
	.aboutR img{max-width:100%;display:block}
}
#product{background: rgba(0,0,0,0.2);overflow:hidden;padding-bottom: 50px;}
#product .title{text-align:center;background-position:center bottom}
.product{}
.product li{}
.product a{display:block;position:relative;margin: 0 auto;max-width: 360px;border: 3px solid #fff;}
.product img{display:block;max-width: 100%;box-sizing: border-box;}
.product p{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    line-height: 44px;
    text-align: center;
    font-size: 20px;
}
@media (max-width:769px){
	#product{padding-bottom:20px}
	#product .title{}
	.product{}
	.product li{margin-bottom: 10px;}
	.product li:nth-child(2){}
	.product li:nth-child(4){margin:0 0 0 16.6%;margin-top:10px}
	.product li:nth-child(5){margin-top:10px}
	.product a{}
	.product img{}
}

#video{overflow:hidden;background: url(../images/video_bg.jpg) no-repeat center;color:#fff;padding: 50px 0;}
.video{
    background: rgba(0,0,0,0.5);
    max-width: 450px;
    box-sizing: border-box;
    padding: 20px 50px;
}
#video .title{background-position:left bottom;margin: 20px 0;}
#video h4{font-size: 20px;margin-bottom: 30px;font-weight: normal;}
.play{display:flex}
.play span{display:block;width: 50px;height: 50px;background:url(../images/play.png) no-repeat center;margin-right:20px;cursor:pointer;transition: 0.5s all;background-size: contain;}
.play span:hover{
    transform: scale(1.2);
}
.play p{font-size:14px;font-weight:bold;line-height: 1.8;}
.videos{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index: 99;}
video:focus{border:0;outline:0}
.videos span{display:block;content:'x';position:absolute;top:10px;right:10px;color:#fff;z-index:999;width:30px;line-height:30px;text-align:center;border-radius:5px;cursor:pointer;font-size:30px}
.videos video{z-index:3;position:absolute;top:50%;left:50%;display:block;max-width:100%;max-height:100%;transform:translateX(-50%) translateY(-50%);border-radius:10px;overflow:hidden}
@media (max-width:769px){
	#video{padding: 20px;}
	#video .video{
    padding: 20px;
}
    #video .title{
    margin: 0 0 20px;
}
	#video h4{font-size: 16px;line-height: 1.5;margin-bottom: 10px;}
	.play{}
	.play span{width: 45px;height: 45px;background-size: 100%;}
	.play p{line-height: 1.5;font-weight: normal;}
}