@charset "utf-8";
body {
	background: url(../img/bg.jpg) center top no-repeat #e2dbd1;
}
.banner , .footer_m {
	display: none;
}

/*浮动模块*/
.floatblock {
	position: relative;
	top: 540px;
	left: 50%;
	margin-left: 70px;
	width: 419px;
}
.floatblock .fws {
	width: 419px;
	height: 92px;
	margin-bottom: 30px;
}
.floatblock .fws img {
	width: 100%;
	height: 100%;
}
.floatblock .nav {
	text-align: center;
	width: 419px;
	margin-bottom: 10px;
}
.floatblock .nav li {
	display: inline-block;
	width: 155px;
	height: 49px;
	line-height: 49px;
	background: url(../img/btn_bg.png) center center no-repeat;
	background-size: 100%;
	margin: 0 18px;
}
.floatblock .nav li:hover {
	background: url(../img/btn_bg_hover.png) center center no-repeat;
	background-size: 100%;
}
.floatblock .nav li a {
	font-size: 16px;
	display: block;
	width: 100%;
	height: 100%;
}
.floatblock .nav li a.m {
	display: none;
}

.main {
	width: 100%;
	margin-top: 650px;
	margin-bottom: 100px;
}

/*标题*/
.main .title {
	width: 100%;
	height: 51px;
	line-height: 51px;
	background: url(../img/title_bg.png) center center no-repeat;
	text-align: center;
	color: #9f743b;
	font-size: 24px;
	margin: 20px auto;
}

/*作品*/
.main .works {
	width: 1200px;
	margin: 0 auto;
}
.main .works .list {
}
.main .works .list li {
	width: 215px;
	display: inline-block;
	margin: 30px 40px 0;
	text-align: center;
}
.main .works .list li .pic {
	position: relative;
	width: 185px;
	height: 185px;
	padding: 15px;
	background: url(../img/works_bg.png) center center no-repeat;
}
.main .works .list li .pic img {
	border-radius: 50%;
	width: 100%;
	height: 100%;
}
.main .works .list li .pic i {
	display: none;
}
.main .works .list li .pic:hover i {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/works_play.png) center center no-repeat;
}
.main .works .list li .name {
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 16px;
	font-weight: bold;
	color: #9f743b;
	background: url(../img/works_name_bg.png) center center no-repeat;
	margin: 10px auto;
}
.main .works .list li .poll {
	color: #9f743b;
	font-size: 14px;
	line-height: 2;
}
.main .works .list li .poll span {
	color: #f33221;
	font-weight: bold;
}
.main .works .list li .btn {
	width: 100px;
	height: 32px;
	line-height: 32px;
	color: #fff;
	background: url(../img/btn_bg.png) center center no-repeat;
	background-size: 100%;
	margin: 10px auto;
	cursor: pointer;
}
.main .works .list li .btn:hover {
	background: url(../img/btn_bg_hover.png) center center no-repeat;
	background-size: 100%;
}

/*播放器*/
.main .video {
	width: 1200px;
	margin: 0 auto;
}
.main .video .player {
	width: 900px;
	height: 500px;
	margin: 0 auto;
	background: #000;
}
.main .video .info {
	text-align: center;
	margin: 20px auto 40px;
}
.main .video .info li {
	display: inline-block;
	font-size: 16px;
    color: #9f743b;
	width: 200px;
    height: 40px;
    line-height: 40px;
	text-align: left;
}
.main .video .info li span {
	font-size: 16px;
    font-weight: bold;
}
.main .video .info .name {
	width: 260px;
}
.main .video .info .name img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.main .video .info .poll span {
	color: #f33221;
}
.main .video .info .btn {
	width: 100px;
	height: 32px;
	line-height: 32px;
	color: #fff;
	background: url(../img/btn_bg.png) center center no-repeat;
	background-size: 100%;
	margin: 10px auto;
	cursor: pointer;
	text-align: center;
}
.main .video .info .btn:hover {
	background: url(../img/btn_bg_hover.png) center center no-repeat;
	background-size: 100%;
}
.main .video .info .des {
	width: 600px;
	margin: 20px auto;
	text-align: left;
	font-size: 16px;
	line-height: 2;
	color: #9f743b;
	font-weight: bold;
}
.main .video .info .des p {
	font-size: 16px;
	font-weight: normal;
	text-indent: 2em;
}
.main .video .lyric {
	width: 418px;
	margin: 0 auto;
}
.main .video .lyric h3 {
    font-size: 45px;
    color: #8b6c58;
    line-height: 45px;
    margin-bottom: 40px;
    font-weight: 400;
    text-align: center;
}
.main .video .lyric p {
    font-size: 15px;
    color: #7d6250;
    text-align: center;
    margin-bottom: 15px;
    height: 15px;
    line-height: 15px;
}
.main .video .lyric .lyric-lp {
    width: 204px;
    float: left;
}
.main .video .lyric .lyric-rp {
    width: 204px;
    float: right;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.main .video .home {
	margin: 0 auto 100px;
	width: 155px;
	height: 49px;
	line-height: 49px;
	font-weight: bold;
	background: url(../img/btn_bg.png) center center no-repeat;
	background-size: 100%;
	text-align: center;
}
.main .video .home:hover {
	background: url(../img/btn_bg_hover.png) center center no-repeat;
	background-size: 100%;
}
.main .video .home a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 18px;
}

.tips {
	display: none;
	width: 240px;
	height: 110px;
	line-height: 110px;
	background: url(../img/tips.jpg) center center no-repeat;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -120px;
	margin-top: -55px;
	text-align: center;
	color: #9f743b;
    font-size: 20px;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
	.topbar , .footer { display: none;}

	body { width: 100%; font-size: 62.5%; background-image: none;}

	.banner { display: block; width: 100%;}
	.banner img { width: 100%;}

	.floatblock { top: 1rem; left: 0; margin-left: 0; width: 100%;}
	.floatblock .fws { width: 100%;	height: 6rem; line-height: 6rem; margin-bottom: 1rem}
	.floatblock .fws img { width: 100%;	height: auto; vertical-align: middle;}
	.floatblock .nav { width: 100%;}
	.floatblock .nav li { width: 30%; height: 2.5rem; line-height: 2.5rem; margin: 0 2%;}
	.floatblock .nav li a.pc { display: none;}
	.floatblock .nav li a.m { display: block;}

	.main { margin-top: 1rem; margin-bottom: 1rem;}
	.main .title { height: 3rem; line-height: 3rem; font-size: 18px; font-weight: bold;}

	.main .works { width: 96%; margin: 0 2%;}
	.main .works .list { text-align: center;}
	.main .works .list li { width: 46%; margin: 0.5rem 2%;}
	.main .works .list li .pic { width: 8rem; height: 8rem; margin: 0 auto; padding: 0.5rem; background-size: 100%; }
	.main .works .list li .pic i , .main .works .list li .pic:hover i { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/works_play.png) center center no-repeat; background-size: 30%;}



	.main .video { width: 96%; margin: 0 2%;}
	.main .video .player { width: 96%; height: 15rem;}
	.main .video .info { text-align: center; margin: 2rem auto; }
	.main .video .info .name , .main .video .info .poll { width: 49%; text-align: center;}
	.main .video .info .btn { margin: 1.5rem auto;}
	.main .video .info .des { width: 100%;}
	.main .video .lyric { width: 100%;}
	.main .video .lyric h3 { font-size: 26px; line-height: 26px; margin-bottom: 1rem;}
	.main .video .lyric .lyric-lp , .main .video .lyric .lyric-rp { width: 100%; float: left;}
	.main .video .home { margin-top: 1rem;}

	.tips { width: 10rem; height: 4.6rem; line-height: 4.6rem; background-size: 100%; margin-left: -5rem; margin-top: -2.3rem; font-size: 14px;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.floatblock { width: 40%; margin: 0 auto;}
	.main .works .list li { width: 30%; margin: 1.5rem 1%;}
	.main .video .player { width: 80%; height: 25rem;}
	.main .video .info .des { width: 80%;}
	.main .video .lyric .lyric-lp, .main .video .lyric .lyric-rp { width: 50%;}
}

@media screen and (max-width: 1024px) and (orientation:landscape) {
	.floatblock { width: 40%; margin: 0 auto;}
	.main .works .list li { width: 30%; margin: 1.5rem 1%;}
	.main .video .player { width: 65%; height: 25rem;}
	.main .video .info .des { width: 65%;}
	.main .video .lyric .lyric-lp, .main .video .lyric .lyric-rp { width: 50%;}
}