/* Custom Stylesheet */
body, html {
      margin: 0;
      -webkit-font-smoothing: antialiased;
      background:#555;
      text-align: center;
      overflow: hidden;
      -webkit-transition: opacity 400ms;
      -moz-transition: opacity 400ms;
      transition: opacity 400ms;
}

body, .main, html {
  display: block;
  position: static;
  padding: 0;
  width: 100%;
  height: 100%;
  float: left;
}
li{	list-style-type:none;}
body .header{
  color: #ecf0f1;
}

.main p {
  color: #ecf0f1;
  font-size: 16px;
  font-weight: 100;
}

.nav-top a {
  color: #ecf0f1;
}

/* ALL DEMO */
h1 {
  color: #ecf0f1;
}

.main {
  margin-top: 0px;
}

.menu, .header, .nav-top {
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}



.section1 .page_container {
  position: absolute;
  bottom: 0;
  margin-left: -325px;
  left: 50%;
  margin-bottom: 50px;
  max-width: 650px;
}

.section1 .page_container h1 {
  letter-spacing: -1px;
  font-weight: 100;
  font-size: 40px;
}

.section1 .page_container p{
  line-height: 160%;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}


.section2 .page_container {
  position: absolute;
  margin-left: -420px;
  left: 50%;
  top: 40%;
  margin-bottom: 50px;
  max-width: 445px;
}

.section2 .page_container h1 {
  letter-spacing: -1px;
  font-weight: 100;
  font-size: 70px;
  color: black;
  margin-bottom: 10px;
  text-align: left;
}


.section2 .page_container p{
  line-height: 160%;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: rgba(0,0,0,0.5);
}

body .header h1 {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

body .nav-top span.right a {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

body.viewing-page-2 .header h1, body.viewing-page-2 .nav-top span.right a {
  color: black;
  
}

.section3 .page_container {
  position: absolute;
  margin-left: -325px;
  left: 50%;
  top: 40%;
  margin-bottom: 50px;
  max-width: 650px;
}

.section3 .page_container h1 {
  letter-spacing: -1px;
  font-weight: 100;
  font-size: 70px;
}
.content{ 
  overflow-x: hidden;
 	position: absolute;
    top:212px;
	margin-left: -500px;
    left: 50%;
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-right-radius:1em;
	border-bottom-left-radius:1em;
    background-color:rgba(255,255,255,0.7);
	
    color: #000;
	width: 1000px;
	line-height:1.5rem;
	overflow-y: scroll;
    height: 617px;
 /*   -ms-overflow-style: none;   //IE 10+
    overflow: -moz-scrollbars-none;    //Firefox*/
	-webkit-overflow-scrolling: touch;
	z-index:1;
  
	}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
 .content{ 
    background-color:#fff;
    filter:Alpha(opacity=70);
     /* position:static;IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
     /* *zoom:1;激活IE6、7的haslayout属性，让它读懂Alpha */
  }
}
.mline{border-bottom: 5px solid #adadad;}
	.content ul li{
		/*display: flex;*/
	font-size:14px;
	    padding: 6px 0;

    border-bottom: 1px #bcbcbc dashed;
	text-align: left;
	}
	.content ul{
		padding:10px 20px;line-height: 24px;
	}
	.content ul li span{
		color:#800101;
		font-weight: bolder;
		padding-right:10px;
		/*width: 900px;*/
	}
.bar{    position: absolute;
    top: 145px;
    margin-left: -517px;
    left: 50%;
	background-image:url(../img/bar.png);
	background-repeat:no-repeat;
	height:78px;
	line-height: 2rem;
	text-align: left;
    font-size: 1.5rem;
    padding: 10px 20px;
	width:718px;
	}
	.discrible {
    overflow: scroll; 
}
.home{
	color: #f00;
width: 32px;
    position: absolute;
    top: 50%;
    right: 4px;
	z-index: 2;
	margin-top: -160px;
	}
  .home img{border:0};
body::-webkit-scrollbar{display:none}
/*整个滚动条样式*/
.content::-webkit-scrollbar {  
    width: 10px; 
    height: 0px;
}
/*设置滚动条上的滚动滑块样式*/
.content::-webkit-scrollbar-thumb {
    background: transparent;
	
}
/*鼠标位于内容上时，滚动条样式*/
.content:hover::-webkit-scrollbar {
    width: 10px;
    height: 0px;
    
    border-radius: 6px;
}
/*鼠标位于内容上时，滚动滑块样式*/
.content:hover::-webkit-scrollbar-thumb {
    background: #ff7979;
    border-radius: 10px;
}
/*dialog*/
.footer{
		bottom: 0;
    left: 50%;
    position: absolute;
    margin-left: -300px;
}
/* .footer img{width:234px;    margin-left: -127px;} */
.show-dialog {
      width: 250px;
    /* height: 20px; */
    background-color:rgba(255,255,255,0.7);;
    border: 1px solid #CCD0D7;
    padding: 4px;
    position: absolute;
    border-radius: 4px;
}

.show-dialog>header {
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
}

.show-dialog>header>.note>span {
    display: block;
}

.show-dialog>header>.note>.title {
    color: #333;
    font-size: 14px;
}

.show-dialog>header>.note>.info {
    color: #99A2AA;
    font-size: 12px;
    /*display: flex;*/
    align-items: center;
    margin-top: 5px;
}

.show-dialog>header>.note>.info>.split {
    padding: 0 10px;
}

.show-dialog>header>.note>.info>.playcount, .show-dialog>header>.note>.info>.viewcount {
    padding: 0 25px 0 3px;
}

.hide{
	 display:none;
	}
.fbtn{
	z-index: 2;
    width: 96%;
    top: 50%;
    left: 50%;
    margin-left: -48%;
    position: absolute;
	/*display: flex;*/
	align-items:center;
	justify-content: space-between
}
.leftbtn{float: left;}
.rightbtn{float: right;}
@media screen and (max-width:1000px){
	.fbtn{top:50%;}
/* .footer img{
	bottom: 0;
    left: 50%;
    position: absolute;
    margin-left: -300px;
	} */
.content {
	width: 600px;
	margin-left: -300px;
	height: 80%;
	top:212px;
}
.bar {
	top:145px;
	margin-left: -317px;
	font-size:16px;
	line-height: 3rem;
	width:1000px;
	padding: 6px 17px;
}
/*.content ul li span{
		width: 500px;
	}*/
	.show-dialog {
		display:none}
}
@media screen and (max-width:600px){
	.fbtn{top:50%;}
		/* .footer img{width:120px;    margin-left: -60px;} */
.content {
	top:204px;
	width: 420px;
	margin-left: -210px;
	height: 80%;
}
/*.content ul li span{
		width: 500px;
	}*/

	.bar {margin-left: -227px;font-size:16px;line-height: 3rem;width:600px;padding: 6px 17px;top:136px}
	.show-dialog {
		display:none}
}
.section1 {
  background: url(../img/10jss_1_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section2 {
  background: url(../img/10jss_2_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section3 {
  background: url(../img/10jss_3_bg.jpg) center top no-repeat #fff ;background-size: cover;
}
.section4 {
  background: url(../img/10jss_4_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section5 {
  background: url(../img/10jss_5_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section6 {
  background: url(../img/10jss_6_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section7 {
  background: url(../img/10jss_7_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section8 {
  background: url(../img/10jss_8_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section9 {
  background: url(../img/10jss_9_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section10 {
  background: url(../img/10jss_10_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section11 {
  background: url(../img/10jss_11_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section12 {
  background: url(../img/10jss_12_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section13 {
  background: url(../img/10jss_13_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section14 {
  background: url(../img/10jss_14_bg.jpg) center top no-repeat #fff;background-size: cover;
}
.section15 {
  background: url(../img/10jss_15_bg.jpg) center top no-repeat #fff;background-size: cover;
}
@media screen and (max-width:420px){
	.fbtn{top:50%;}
		/* .footer img{width:120px;margin-left: -60px;} */
	.section1 {
  background: url(../img/10jss_1_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
	.section2 {
  background: url(../img/10jss_2_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section3 {
  background: url(../img/10jss_3_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section4 {
  background: url(../img/10jss_4_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section5 {
  background: url(../img/10jss_5_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section6 {
  background: url(../img/10jss_6_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section7 {
  background: url(../img/10jss_7_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section8 {
  background: url(../img/10jss_8_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section9 {
  background: url(../img/10jss_9_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section10 {
  background: url(../img/10jss_10_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section11 {
  background: url(../img/10jss_11_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section12 {
  background: url(../img/10jss_12_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section13 {
  background: url(../img/10jss_13_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section14 {
  background: url(../img/10jss_14_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section15 {
  background: url(../img/10jss_15_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.content {
	width: 400px;
	margin-left: -200px;top: 70px;
}

	.bar {margin-left: -217px;font-size:16px;line-height: 3rem;width:420px;top: 0px;padding: 6px 17px;height: 48px;}
	.show-dialog {
		display:none}
		.content ul li {
    font-size: 13px;}
}
@media screen and (max-width:375px){
	.fbtn{top:50%;}
		/* .footer img{width:120px;    margin-left: -60px;} */
.content {
width: 375px;
    margin-left: -187px;
    top: 176px;
}

	.bar {margin-left: -187px;
    font-size: 16px;
    line-height: 3rem;
    width: 375px;
    top: 114px;
    padding: 6px 17px;
    height: 48px;}
	.bar dt{width: 300px;
    line-height: 1.5rem;
    padding-left: 10px;}
	.show-dialog {
		display:none}
		.content ul li {
    font-size: 13px;}
    	.section1 {
			background: url(img/10jss_1_bg.jpg) center top no-repeat #fff;background-size: cover;
  background: url(../img/10jss_1_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
	.section2 {
  background: url(../img/10jss_2_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section3 {
  background: url(../img/10jss_3_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section4 {
  background: url(../img/10jss_4_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section5 {
  background: url(../img/10jss_5_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section6 {
  background: url(../img/10jss_6_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section7 {
  background: url(../img/10jss_7_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section8 {
  background: url(../img/10jss_8_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section9 {
  background: url(../img/10jss_9_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section10 {
  background: url(../img/10jss_10_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section11 {
  background: url(../img/10jss_11_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section12 {
  background: url(../img/10jss_12_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section13 {
  background: url(../img/10jss_13_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section14 {
  background: url(../img/10jss_14_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section15 {
  background: url(../img/10jss_15_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}

}
@media screen and (max-width:320px){
	.fbtn{top:50%;}
	/* .footer img{width:120px;    margin-left: -60px;} */
.content {
	width: 320px;
	margin-left: -160px;top: 70px;
}

	.bar {margin-left: -177px;font-size:16px;line-height: 3rem;width:320px;top: 0px;padding: 6px 17px;height: 48px;}
	.bar dt{width: 300px;
    line-height: 1.5rem;
    padding-left: 10px;}
	.show-dialog {
		display:none}
		.content ul li {
    font-size: 13px;}
    	.section1 {
  background: url(../img/10jss_1_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
	.section2 {
  background: url(../img/10jss_2_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section3 {
  background: url(../img/10jss_3_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section4 {
  background: url(../img/10jss_4_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section5 {
  background: url(../img/10jss_5_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section6 {
  background: url(../img/10jss_6_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section7 {
  background: url(../img/10jss_7_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section8 {
  background: url(../img/10jss_8_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section9 {
  background: url(../img/10jss_9_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section10 {
  background: url(../img/10jss_10_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section11 {
  background: url(../img/10jss_11_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section12 {
  background: url(../img/10jss_12_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section13 {
  background: url(../img/10jss_13_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section14 {
  background: url(../img/10jss_14_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
.section15 {
  background: url(../img/10jss_15_bg_s.jpg) center top no-repeat #fff;background-size: cover;
}
}