#contents { 
	background-image: url('../imgs/pro.jpg'); 
	background-image: radial-gradient(at 39% 135% , #259ed0 -67%, #181528 80%);
	background-image: -webkit-radial-gradient(at 39% 135% , #259ed0 -67%, #181528 80%);
	background-image: -moz-radial-gradient(at 39% 135% , #259ed0 -67%, #181528 80%);
	background-image: -o-radial-gradient(at 39% 135% , #259ed0 -67%, #181528 80%); 
}

.filterBar { background-color: #1169a2 }

#contents ul li .top.private { background-color: #005d9d }

header ul li:first-child .planet { margin-left: 31px; margin-right: 16px; }
header span.userImg { margin-left: 21px }
header ul li:first-child .planet { margin-left: 21px; margin-right: 18px }

#contents ul li { border-right: 1px solid #263b55; border-bottom: 1px solid #263b55 }




#contents ul li .cover { display: inline-block; width: 120px; height: 120px; margin: 13px 0; background: url('../imgs/proCover_1.jpg') no-repeat; background-size: cover; border-radius: 50%; transiton: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; }
.mid a:hover .cover {  box-shadow: #10CEE9 0px 0px 30px; transiton: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out;}


#contents ul li:nth-child(2) .cover { background-image: url('../imgs/proCover_2.jpg'); }
#contents ul li:nth-child(3) .cover { background-image: url('../imgs/proCover_3.jpg'); }
#contents ul li:nth-child(4) .cover { background-image: url('../imgs/proCover_4.jpg'); }
#contents ul li:nth-child(5) .cover { background-image: url('../imgs/proCover_5.jpg'); }
#contents ul li:nth-child(6) .cover { background-image: url('../imgs/proCover_6.jpg'); }
#contents ul li:nth-child(7) .cover { background-image: url('../imgs/proCover_7.jpg'); }
#contents ul li:nth-child(8) .cover { background-image: url('../imgs/proCover_8.jpg'); }
#contents ul li:nth-child(9) .cover { background-image: url('../imgs/proCover_9.jpg'); }
#contents ul li:nth-child(10) .cover { background-image: url('../imgs/proCover_10.jpg'); }
#contents ul li:nth-child(11) .cover { background-image: url('../imgs/proCover_11.jpg'); }
#contents ul li:nth-child(12) .cover { background-image: url('../imgs/proCover_12.jpg'); }
#contents ul li:nth-child(13) .cover { background-image: url('../imgs/proCover_13.jpg'); }
#contents ul li:nth-child(14) .cover { background-image: url('../imgs/proCover_14.jpg'); }
#contents ul li:nth-child(15) .cover { background-image: url('../imgs/proCover_15.jpg'); }

#contents ul li .mid p { height: 40px; margin-top: 130px; }


.btm { position: absolute; top: 295px; left: 0; width: 100%; height: 100px; overflow: hidden; }
#contents .btm > ul { width: 100%; margin-top: 15px; text-align: left; }
#contents .btm > ul > li { position: absolute; height: 33px; left: 20%; width: 70%; overflow: hidden; border-right: 0 none; border-bottom: 0 none;  font-size: 1em;  text-align: left; opacity: 0.7 }
#contents .btm > ul > li ul li { position: static; height: 20px; border-right: 0 none; border-bottom: 0 none; width: 100%; text-align: left;  }
#contents .btm > ul > li:nth-child(2) { right: 100%; left: auto; }

.btm .break { display: block }
.completionBar { margin-top: 15px; display: inline-block; width: 60%; height: 7px; background-color: #111320 }
.completionBar span { display: inline-block;float: left; width: 90%; height: 100%; text-align: left; background-color: #008ae6 }
.btm .completionBar.hundred span { background-color: #00b3e6; width: 100%; }
.btm .completionBar.eighty span { background-color: #008e65; width: 80%; }
.btm .completionBar.fifty span { background-color: #d18f00; width: 50%; }
.btm .completionBar.forty span { background-color: #d08400; width: 40%; }
.btm .completionBar.thirty span { background-color: #d05e00; width: 20%; }
.btm .completionBar.twenty span { background-color: #d000cc; width: 20%; }
.btm .completionBar.ten span { background-color: #d00000; width: 10%; }
.btm h4 { font-weight: 400; color: #a2adb8 }

.btm p { width: 200px; text-align: center; display: inline-block; margin-top: 25px; line-height: 30px; }
.btm p a { display: inline-block; width: 200px; height: 30px; background-color: #121233; letter-spacing: 0.15em; border-radius: 25px; opacity: 0.5; }
.btm p a:hover{ opacity: 0.8; }

.prevNext { width: 100% }
#contents .prevNext a { position: absolute; right: 5%; top: 65px; display: block; width: 25px; height: 25px; background-color: #000; opacity: 0.3; border-radius: 50%; text-indent: -99999px; background: #000 url('../imgs/right.png') no-repeat center center;  }
#contents .prevNext a:hover { opacity: 0.5; }
#contents .prevNext a:first-child { display: none; left: 5%; right: auto; background-image: url('../imgs/left.png'); }



@media only screen and (max-width: 2000px) {
	header ul li:first-child .planet { margin-left: 23px; margin-right: 16px; }
	header ul li:first-child a { width: 239px; }
	header ul li:nth-child(2) a { left: 547px }
	header ul li:nth-child(3) a { left: 612px }
	header ul li:nth-child(4) a { left: 677px }



	#contents ul li .cover { width: 100px; height: 100px; }
	#contents .btm ul li a { margin-bottom: 8px }
	.btm { position: absolute; top: 280px; }
	#contents ul li .mid p { margin-top: 125px }
	
	.btm p { margin-top: 20px }
	#contents .prevNext a { right: 0; border-radius: 0 }
	#contents .prevNext a:first-child { left: 0; right: auto; }

	#contents ul li:nth-child(13), #contents ul li:nth-child(14), #contents ul li:nth-child(15) { display: none }


}

@media only screen and (max-width: 1300px) {

	header ul li:first-child a { width: 239px; }
	header ul li:nth-child(2) a { left: 512px }
	header ul li:nth-child(3) a { left: 562px }
	header ul li:nth-child(4) a { left: 612px }


	#contents .btm > ul > li { left: 16%; font-size: 1em }
}

@media only screen and (max-width: 1120px) {

	#contents ul li .cover { width: 90px; height: 90px }
	
	.btm { top: 260px }
	#contents ul li .mid p {margin-top: 110px; }
	.completionBar { margin-top: 11px; }

	.btm p { width: 160px; margin-top: 16px; font-size: 1em }
	#contents .btm > ul > li { font-size: 0.9em }
	#contents .prevNext a { top: 57px }
}

@media only screen and (max-width: 1024px) {
	header ul li:first-child a {width: 50px; }
	header ul li:first-child .planet { margin-left: 12.5px; margin-right: 15px; margin-top: 8px; }
	header ul li:first-child a { left: 242px; background-color: #1f1f38 }
	header ul li:nth-child(2) a { left: 292px }
	header ul li:nth-child(3) a { left: 342px }
	header ul li:nth-child(4) a { left: 392px }
	header ul li:nth-child(4) a:hover .words, header ul li:nth-child(3) a:hover .words, header ul li:nth-child(2) a:hover .words { display: none !important }




	#contents ul li .mid p { margin-top: 120px; height: 33px }
	.btm { top: 235px }
	#contents ul li .cover { width: 70px; height: 70px; margin: 8px 0 } 




	#contents { 

	background-image: radial-gradient(at 47% 199% , #259ed0 -56%, #181528 99%);
	background-image: -webkit-radial-gradient(at 47% 199% , #259ed0 -56%, #181528 99%);
	background-image: -moz-radial-gradient(at 47% 199% , #259ed0 -56%, #181528 99%);
	background-image: -o-radial-gradient(at 47% 199% , #259ed0 -56%, #181528 99%); 
}

}


@media only screen and (max-width: 870px) {

}


@media only screen and (max-width: 650px) {
	header ul li:first-child a { left: 102px }
	header ul li:nth-child(2) a { left: 153px }
	header ul li:nth-child(3) a { left: 203px }
	header ul li:nth-child(4) a { left: 254px }
	header span.userImg { margin-left: 13px }



	.btm { top: 224px }
	#contents ul li .cover { margin: 14px 0; }
	#contents ul li .mid p { margin-top: 99px }
	#contents .btm > ul { margin-top: 10px;  }
	#contents .prevNext a { top: 53px }
	.btm p { }
}

@media only screen and (max-width: 520px) {
	.btm .num { margin-right: 5px }
}

@media only screen and (max-width: 430px) {
	header ul li:first-child a { display: none }
	header ul li:nth-child(2) a { left: 102px }
	header ul li:nth-child(3) a { left: 153px }
	header ul li:nth-child(4) a {left: 203px  }
	
	.btm .num { margin-right: 10px }

	#contents ul li { border-right: 0 none; }

}

@media only screen and (max-width: 370px) {

	header ul li:nth-child(2) a { left: 102px }
	header ul li:nth-child(3) a { left: 143px }
	header ul li:nth-child(4) a {left: 188px  }
}

@media only screen and (max-width: 360px) {
	#contents .btm ul li { left: 34% }
}


@media only screen and (max-width: 340px) {
	header ul li:nth-child(2) a { left: 102px }
	header ul li:nth-child(3) a { left: 138px }
	header ul li:nth-child(4) a {left: 176px  }
	header ul li .planet svg { width: 23px; height: 23px }
}
@media only screen and (max-width: 330px) {
	header ul li:nth-child(2) a { left: 100px }
	header ul li:nth-child(3) a { left: 133px }
	header ul li:nth-child(4) a {left: 168px  }
	header ul li .planet svg { width: 23px; height: 23px }
}