@charset "utf-8";
.cleator-name a{
	text-decoration: underline;
	color: #4d6a0c;
}
a{
	color:#ba5261;
	font-weight:normal;
}
#wrapper {
  background: url(../img/topBg-r2.jpg) repeat-x scroll top center #f6f6f6;
  font-size: 12px;
  font-weight: normal;
  position:relative;
}
#wrapper:before {
    background: none repeat scroll 0 0 #ddd;
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    top: 488px;
    width: 100%;
	border-bottom: solid 4px #eee;
}
.prjTit span {
/*  font-weight: bold;
  font-size:12px;*/
}
.prjContent ul li {
  color: #a286ba;
}
.prjContent02 h2 {
  color: #ce7f03;
  font-weight: normal;
}
.prjContent02 a{
	font-weight:normal;
}
.prjContent02 ul li {
  color: #ba5261;
  font-weight: normal;
  opacity:.5;
}
.prjContentinfo p {
  font-weight: normal;
}
.prjContentinfo p span {
	color:#7a3882;
}
.prjBannerImg{
	width:100%;
}

.entryBtn {
  background: none repeat scroll 0 0 #a286ba;
  border: 1px solid #a286ba;
}
.workDetailArea .entryBtn02 {
  background: none repeat scroll 0 0 #a286ba;
}


#top-contents{
  clear: both;
  margin: 0 auto 0px;
  overflow: hidden;
  padding-top: 20px;
  width: 1078px;
  height:450px;
  position:relative;
  z-index:10;
}

#left-content{
  float: left;
  margin-right: 30px;
  min-height: 1px;
  width: 668px;
}
#t-left-content{
  float: left;
  margin-right: 30px;
  min-height: 1px;
  width: 668px;
}

#right-content,
#t-right-content{
  float: left;
  width: 380px;
}
#left-content > section,
#right-content > section{
	background: none;
}
#topics{
  background:none;
  height: 400px;
  width: 100%;
}
.contentname,.subcontentname {
  font-weight: normal;
  position: relative;
  font-size:16px;
  border:none;
  margin-bottom:5px;
}
.contentname:after,.subcontentname:after {
	content:"";
	height:3px;
	display:block;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #191a19), color-stop(0.00, #949494));
	background: -webkit-linear-gradient(#949494, #191a19);
	background: -moz-linear-gradient(#949494, #191a19);
	background: -o-linear-gradient(#949494, #191a19);
	background: -ms-linear-gradient(#949494, #191a19);
	background: linear-gradient(#949494, #191a19);
}
.contentname:before {
    background: none repeat scroll 0 0 #a286ba;
    content: "";
    display: block;
    float: left;
    height: 20px;
    margin-right: 5px;
    opacity: 0.3;
    width: 10px;
}
#composition-compe .contentname:before {
    background: none repeat scroll 0 0 #EC8686;
	opacity:1;
}
#cleators .contentname:before {
    background: none repeat scroll 0 0 #9DB861;
	opacity:1;
}
#status .contentname:before {
    background: none repeat scroll 0 0 #74A9B6;
	opacity:1;
}
.cleator-li {
  border-bottom: dotted 1px #111;
  padding: 5px 0;
}
.prjList {
  padding: 5px;
  margin:5px;
  box-shadow: 1px 1px 5px rgba(0,0,0,.3);
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.3);
  background:#fff;
  border-radius:5px;
  -webkit-border-radius:5px;
}
#composition-list .prjContent02,
#auditions-list .prjContent02 {
  font-size: 11px;
}
#composition-list .prjContent02 h2,
#auditions-list .prjContent02 h2 {
  font-size: 120%;
  margin: 0;
  border-bottom:solid 2px #ddd;
}

.pickup-prj1,
.pickup-prj2 {
    display: block;
    text-align: center;
    width: 50%;
	float:left;
}
.pickup-prj1:hover,
.pickup-prj2:hover{
	opacity:.8;
}
/**********************************************
introduct
**********************************************/
#introBox{
	margin-top:20px;
}
#introduct h2{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 15px;
  word-break: break-all;
  word-wrap: break-word;
}
#introduct h2 span{
  color: #fff;
}
#introduct p{
  color:#fff;
  font-size: 14px;
  line-height:25px;
  }
#toRegister{
  margin: 10px 0;
  padding: 0;
  width: 100%;
}
#toRegister li{
  float: left;
  list-style-type: none;
  width: 50%;
}
.toRegisterBtn{
  background-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  width: 150px;
  border-radius:5px;
  box-shadow:1px 1px 5px rgba(0,0,0,.5);
}
#toHowto, #toContact{
  display: block;
  text-align: center;
  margin-bottom: 5px;
}
/*
#toHowto img{
  border-radius:10px;
  -webkit-border-radius:10px;
  border: 5px solid #999;
}
*/
/**********************************************
status
**********************************************/
#status {
  margin-bottom: 20px;
}
#status-list{
  margin: 10px 0 0;
  padding: 0;
  width: 100%;
}
.status-li{
  background-color: #a286ba;
  float: left;
  color:rgba(255,255,255,.7);
  margin-left: 7px;
  padding: 25px 0;
  text-align: center;
  width: 88px;
  height:38px;
  border-radius: 93px;
}
.status-li:first-child{
  margin-left: 0;
  opacity:.5;
/*  background:#7585A5;
  box-shadow:0 0 2px #7585A5,0 0 2px #7585A5,0 0 2px #7585A5;*/

}
.status-li:nth-child(2){
  opacity:.63;
/*  box-shadow:0 0 2px #48567A,0 0 2px #48567A,0 0 2px #48567A;*/
}
.status-li:nth-child(3){
  opacity:.86;
/*  box-shadow:0 0 2px #2D395B,0 0 2px #2D395B,0 0 2px #2D395B;*/
}
.status-li:nth-child(4){
  opacity:1;
/*  box-shadow:0 0 2px #141A30,0 0 2px #141A30,0 0 2px #141A30;*/
}
.status-name{
  font-size: 12px;
  line-height:12px;
  margin-top: 0;
  font-weight:normal;
}
.total{
  color: #fff;
  font-size: 25px;
  line-height:25px;
  font-weight: bold;
}
#status-list .labels{
  font-size: 12px;
}
/***********************************************
cleator
***********************************************/
.cleator-details{
  width: 82%;
}
.sumbImg{
  margin: 5px;
  border-radius:5px;
  -webkit-border-radius:5px;
}
#cleators-t-list .cleator-name{
  color: #a286ba;
}
#cleators-t-list .cleator-title{
  font-size: 11px;
}

/*************************************************
unslider
*************************************************/
#topics .contentname{
  color: #999;
  font-size: 14px;
  font-weight: normal;
  margin: 5px 5px 5px 20px;
  display:none;
}
.banner {
  overflow: hidden;
  position: relative;
  text-align: center;
}
.banner-ul {
	list-style: none;
	padding:10px 0;
	overflow:hidden;
	zoom:1;
	 }
.banner-ul:after{
	content:"";
	clear:both;
	display:block;
}
.banner-img{
/*
  height: 320px;
  width: 640px;
*/
  height: 230px;
  width: 560px;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
  border-radius:5px;
}
.banner-li{
    float:left;
    margin-right:-100%;
    width:100%;
}
.banner-li-box{
  display:block;
}
.banner .dots {
  bottom: 13px;
  left: 0;
  position: absolute;
  right: 0;
}
.banner .dots li {
  background: url(../img/bar-r.png) 50% 50%;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  height: 4px;
  margin: 0 1px;
  opacity: 1;
  text-indent: -999em;
  transition: background 0.7s ease 0s, opacity 0.7s ease 0s;
  -webkit-transition: background 0.7s ease 0s, opacity 0.7s ease 0s;
  width: 84px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.banner .dots .active {
  -moz-box-shadow: 5px 0px 0px rgba(255,0,0,0.9),0px 0px 5px rgba(255,0,0,0.9);
  box-shadow: 0px 0px 5px rgba(255,0,0,0.9),0px 0px 5px rgba(255,0,0,0.9);
  background: url(../img/bar-r-act.png) 50% 50%;
  opacity: 1;
}
.bannerBox{
  margin: 0;
  overflow:hidden;
}
.flex-control-nav li{
	margin: 0 1px;
	display: inline-block;
	background:url("../img/bar-r.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}
.flex-control-nav li a{
	cursor:pointer;
	display:block;
	width:84px;
	height:4px;
	text-indent:100%;
	white-space: nowrap;
	overflow:hidden;
}
.flex-control-nav li .flex-active{
  -moz-box-shadow: 5px 0px 0px rgba(255,0,0,0.9),0px 0px 5px rgba(255,0,0,0.9);
  box-shadow: 0px 0px 5px rgba(255,0,0,0.9),0px 0px 5px rgba(255,0,0,0.9);
  background: url(../img/bar-r-act.png) 50% 50%;
  opacity: 1;
	}
.flex-direction-nav li{
	position: relative;
}
.flex-prev{
	position:absolute;
	top:-15px;
	left:10px;
	color:#fff;
	line-height:15px;
}
.flex-prev:before{
	content:"";
	width:0;
	height:0;
	display:block;
	border: solid 7px rgba(0,0,0,0);
	border-right: solid 7px #FFF;
	float:left;
	margin-right:5px;

}
.flex-next{
	position:absolute;
	top:-15px;
	right:10px;
	color:#fff;
	line-height:15px;
}
.flex-next:before{
	content:"";
	width:0;
	height:0;
	display:block;
	border: solid 7px rgba(0,0,0,0);
	border-left: solid 7px #FFF;
	float:right;
	margin-left:5px;

}

#color{
	position:absolute;
	top:0;
	left:0;
	height:487px;
	width:100%;
	opacity:.3;
	background-color:transparent;
	-webkit-animation:color 50s infinite;
	-webkit-animation-timing-function: linear;
	animation:color 60s linear infinite;
}
.status-li{
	-webkit-animation:color-r 55s infinite;
	-webkit-animation-timing-function: linear;
	animation:color-r 65s linear infinite;
}
@keyframes color-r {
  0% { background-color: #00163e; }
  10% { background-color: #00163e; }
  20% { background-color: #7e0000; }
  30% { background-color: #8a5e00; }
  40% { background-color: #1f4900; }
  50% { background-color: #002775; }
  60% { background-color: #350054; }
  70% { background-color: #7e0000; }
  80% { background-color: #00163e}
  100% { background-color: #00163e}
}
@-webkit-keyframes color-r {
  0% { background-color: #00163e; }
  10% { background-color: #00163e; }
  20% { background-color: #7e0000; }
  30% { background-color: #8a5e00; }
  40% { background-color: #1f4900; }
  50% { background-color: #002775; }
  60% { background-color: #350054; }
  70% { background-color: #7e0000; }
  80% { background-color: #00163e}
  100% { background-color: #00163e}
}
@keyframes color {
  0% { background-color: rgba(0,0,0,0); }
  10% { background-color: rgba(0,0,0,0); }
  20% { background-color: #ff0000; }
  30% { background-color: #F9CD25; }
  40% { background-color: #47FF5E; }
  50% { background-color: #4194FD; }
  60% { background-color: #B200FD; }
  70% { background-color: #F5001C; }
  80% { background-color: rgba(0,0,0,0)}
  100% { background-color: rgba(0,0,0,0)}
}
@-webkit-keyframes color {
  0% { background-color: rgba(0,0,0,0); }
  20% { background-color: rgba(0,0,0,0); }
  30% { background-color: #F5001C; }
  40% { background-color: #F9CD25; }
  50% { background-color: #47FF5E; }
  60% { background-color: #4194FD; }
  70% { background-color: #B200FD; }
  80% { background-color: #F5001C; }
  90% { background-color: rgba(0,0,0,0)}
  100% { background-color: rgba(0,0,0,0)}
}

.prjList .ico-close-pr {
    font-size: 10px;
    line-height: 10px;
    font-weight: normal;
}



@media only screen and (min-device-width: 320px)
 and (max-device-width: 768px){



	#header{
		position:absolute;
		top:0;
		left:0;
	}
	#top-contents{
		background: url(../img/topBg-r2.jpg) repeat-x scroll top center;
		background-size: auto 100%;
		height:auto;
		padding-top:41px;
		padding-bottom:5px;
		position:relative;
	}
	#top-contents:after{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	opacity:.3;
	background-color:transparent;
	-webkit-animation:color 50s infinite;
	-webkit-animation-timing-function: linear;
	animation:color 60s linear infinite;
	z-index:2;
	}
	#left-content,#right-content,#t-left-content,#t-right-content{
		float:none;
		width:100%;
		margin:0;
	}
	#content,#top-contents{
		width:100%;
	}
	#toHowto img, #toContact img{
		width:80%;
		max-width:344px;
	}
	.pickup-prj1, .pickup-prj2{
		float:none;
		width:100%;
	}
	/********************
	topics
	********************/
	#topics{
		margin:0;
		padding: 0;
		height:auto;
	}
	#topics .contentname{
		margin:0 5px;
	}
	.banner-li{
		text-align:left;
	}
	.banner-img{
		width:100%;
		height:auto;
		border-radius:0;
		-webkit-border-radius:0;
		box-shadow: none;
		-webkit-box-shadow:none;
	}
	.bannerBox{
		margin:0;
	}
	.banner .dots{
		bottom:3px;
	}
	.contentname:after{
		width:0;
		display:none;
	}
	#t-left-content,
	#t-right-content{
		position:relative;
		z-index:5;
	}
	.flex-control-nav li a{
		width:42px;
	}
	.flex-direction-nav{
		display:block;
		position:relative;
		height:5px;
	}
	.flex-prev,
	.flex-next{
		white-space:nowrap;
		margin-top:-10px;
		text-indent:100%;
		height:30px;
		width:30px;
		display:block;
		border-radius:15px;
		-webkit-border-radius:15px;
		background:rgba(0,0,0,.5);
		overflow:hidden;
	}
	.flex-prev:before {
		margin-left: 3px;
		margin-top: 7px;
		opacity: 0.7;
	}
	.flex-next:before {
		margin-right: 3px;
		margin-top: 7px;
		opacity: 0.7;
	}
	#composition-list .prjContent02 h2,
	#auditions-list .prjContent02 h2{
		border-bottom:none;
	}
	.status-li{
		border-radius:5px;
		-webkit-border-radius:5px;
		height:auto;
		padding:10px 0;
	}

}
.ResultList {
    width:100%;
    margin: 0 auto;
    display:block;
}
.ResultList > li {
    display:block;
    float:left;
    width:32.3%;
    margin:.5%;
    overflow:hidden;
}
.ResultList > li > img{
    width:100%;
    display:block;
}
.pr-banne img{
	width:100%;
}
#composition-compe .prjList-clearfix-compe_mosaic{
  background-image: url(../img/mosaic_compe.png);
}
#OurClient .contentname::before {
    background: #ccc;
    opacity: 1;
}
.OurClient-List{
  text-align: center;
}
.OurClient-List li{
  display: inline-block;
  margin: 2px 20px;    
}
.OurClient-List li img{
  max-height:100%;
  max-width:150px;
  vertical-align:middle;
}

#OurClient {
    background: #fff;
    margin-bottom: -40px;
    padding-bottom: 45px;
}

.OurClient-List a {
    display: table-cell;
    height: 70px;
    vertical-align: middle;
}

#OurClient .contentname {
    margin: 0 10px 5px;
    padding-top: 5px;
}
#OurClient .contentname::before{
	display:none;
}
#OurClient .contentname::after {
    background: #333 none repeat scroll 0 0;
    content: "";
    height: 1px;
}