/* RESET */
html { margin: 0; padding: 0;}


/* TYPE */
body { 
  margin: 0px; padding: 0px; overflow-y: scroll; 
  background-color: #2a3954; 
  line-height: 1.8em; font-size: 0.8em; 
  color: #abb; 
  font-family: Verdana, Arial, sans-serif;
}

/* LAYOUT */
.clear { clear: both; }
#bg { 
  /* background: url("../images/bg.gif") center top repeat-y; */
  background-color: #07070a;
}
#header { width: 950px; margin: 0 auto; position: relative; height: 300px;}
#wrapper { width: 950px; margin: 0 auto; overflow: hidden; position: relative; font-family: Verdana, Arial, sans-serif; color: #6e665f; line-height: 1.0em; font-size: 1em; }
#main { width: 950px; margin: 0 auto; height: 100%; position: relative;  }
#nav { width: 860px; }
#footer { width: 950px; margin: 0 auto; }
#copyright { text-align: left; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #7f7973; padding: 15px 10px; }
.page { padding: 40px 15px 40px 15px; }


/* HEADER */
#header { position: relative; overflow: hidden; }
#header .top-dl { position: absolute; left: 580px; top:120px; z-index:1;  }
#header .top-logo { position: absolute; left: 60px; top:90px; z-index:2; }
#header .top-share { position: absolute; top:0; right: 15px; z-index:90; }
#header .top-share .sharing { float: left; width: 280px; height: 35px; padding: 0px;}
#header .top-rthk { position: absolute; top:15px; left: 15px; z-index:91; }
#header .top-bg { position: absolute; left:0; top: 0; z-index:0; }


/* NAV */
#nav { position: absolute; width: 940px; height: 45px; padding-left: 10px; bottom: 0px; z-index:99; }
#nav .tag{ float: left; width: 107px; height: 45px; padding-right: 5px; }
#nav .tag2{ float: left; width: 130px; height: 45px; padding-right: 0px; }
#nav .tag4{ float: left; width: 250px; height: 45px; padding-left: 100px; }
#nav .tag5{ float: left; width: 300px; height: 45px; padding-left: 130px; }

/*song list*/
.songlist { display: block; width: 280px; padding: 20px; color: #828e15; line-height: 1.5em; border:solid 2px #c4bba7; }
.photo { display: block; position: relative;z-index: 9; width: 150px; height:150px; padding: 0px 20px 10px 0px; }
.photo span { position:absolute; width: 150px; height: 150px; top: 20; left: 20; display: block; background: url("../images/icons_playbutton_large.png") no-repeat left top; }

#media {
	width: 80px;
    height: 80px;
    position: relative;
    bottom: 90px;
    left: 10px;
	}

.video_container {
	width: 530px;
	height: 298px;
	border: 1px solid #ccc;
	margin: 20px 0px;
	position: relative;	
	}
	
.content_title { font-size: 1.3em; font-weight: bold; color: #bfc5dd; }
.content_detail { font-size: 14px; line-height: 1.6em; padding-bottom: 10px; letter-spacing: 1px;}
.content_detail :link {  text-decoration: none; color: #64c1d6;}
.content_line { clear: both; background:#c7bead; display:block; width:570px; height:1px; margin: 15px 0 25px 0; }

/*about page*/
.cube { font-size: 1.8em; }
.b { color: #838e16;}
.screencap { padding: 10px 50px 30px 10px; }
.hr { background: url("../images/dotline.gif") center top repeat-x; border: 0; height: 1px; margin: 15px 0; }
.subtitle { font-weight: bold; display: block; }
.desc { padding-left: 30px; padding-top: 0px; margin-top: 0px; display: block; }

/*about page*/
.cube { font-size: 1.8em; }
.b { color: #64c1d6;}
.screencap { padding: 10px 50px 30px 10px; }
.hr { background: url("../images/dotline.gif") center top repeat-x; border: 0; height: 1px; margin: 15px 0; }
.subtitle { font-weight: bold; display: block; }
.desc { padding-left: 30px; padding-top: 0px; margin-top: 0px; display: block; }

.songlist a:link, a:visited, a:active 
{ text-decoration: none; }  

.cp-container img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/*functions page*/
.border{
	border: 1px solid #CCC; margin: 0px 0px 0px 15px;
  }
  
/* shift buttons */
#btn { padding: 5px 0px 5px 0px; margin-bottom: 15px; margin-top: 15px; margin-left: 15px;}
#btn a.selected {
  float: left; display: inline-block; color: white; 
  border: solid 1px #404e84;  
  padding: 0px 20px 0px 20px; margin: 0px 8px 8px 0px; line-height: 30px;
  border-radius: 2px; 
  background-color: #6573ad; 
  text-decoration:none; 
}

#btn a.next {
  float: left; display: inline-block; color: black; 
  border: solid 1px #6573ad;  
  padding: 0px 20px 0px 20px; margin: 0px 8px 8px 0px; line-height: 30px; 
  border-radius: 2px; background-color: #fff; 
  text-decoration:none; 
}
#btn a.next:hover { 
  background-color:#fbaf42; 
  color:#fff; 
}

/* -------------------function page-------------------------- */

.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
img{ vertical-align: middle; }
a:link { text-decoration: none;}

.mainWrap { 
  position: relative; max-width: 960px; height: auto; 
  margin: 15px auto 0 auto; 
  /* background-color: rgb(147, 129, 163);  */
}
.conBlockWrap { display: flex; }
.conBlock { 
  display: block;
  position: relative;  width: 50%; height: auto; 
  box-sizing: border-box; padding: 2% 2% 4% 2%;
  float: left;
  border-bottom: 1px solid rgb(89, 90, 101);
}
/* .conBlock.rigline { border-right: 1px solid rgb(89, 90, 101);} */
.conBlock.left { float: left;}
.conGistWrap { position: relative; float: left; width: 50%; margin-left: 8%; margin-top: 25px; }
.conGistWrap.full { width:84%; margin: 15px 0 0 0; }
.titTxt { font-size: 18px; letter-spacing: 2px; color: rgb(136, 136, 180); margin-bottom: 15px; }
.gistxt { font-size: 14px; letter-spacing: 2px; color: rgb(214, 222, 230); }
.conImgWrap { width:40%; height: auto; float: left;  margin-top: 25px; border: 1px solid rgb(104, 104, 125);}
.conImgWrap.dou { width:40%; height: auto; border: 1px solid rgb(104, 104, 125); }
.conImgWrap.dou.left { float: left; }
.conImgWrap.dou.right { float: right; margin-right: 2%; }
.conImg { width: 100%; display: block;}
@media screen and (max-width: 760px) {
  .conBlockWrap { display: block; }
  .conBlock { width:100% }
}