.navbar-header,.navbar-brand{
	width:100%;
}
.navbar-brand img{
	margin:0 auto;
}
#p-login .navbar-brand>img,#register .navbar-brand>img,#register_2 .navbar-brand>img,#p-buy .navbar-brand>img{
	top:4px;
}
.navbar>.container .navbar-brand{
	margin-left:0;
}
.icon{
	background-size:100%;
	display:block;
	width:75px;
	height:75px;
	margin: 0 auto;
}
.aboutBox p,.termsBox p{
	color: #000;
}
.icon.like{
	background-image:url("../images/like.png");
}
#likeBox.on .icon.like{
	background-image:url("../images/like_on.png");
}
.icon.gift{
	background-image:url("../images/gift.png");
}
#giftBox.on .icon.gift{
	background-image:url("../images/gift_on.png");
}
.icon.rate{
	background-image:url("../images/rate.png");
}
#rateBox.on .icon.rate{
	background-image:url("../images/rate_on.png");
}
.icon.sleep{
	background-image:url("../images/sleep.png");
}
#p-detail #likeBox div {
    margin-left: 90px;
}
#p-detail #rateBox div {
    margin-right: 90px;
}
.custom-navbar {
	-webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
	padding: 12px 0;
}
#topBox {height: 160px;}
.top-nav-collapse .nav li a {
    color: #242528;
}	
.i-back{
	background-image:url("../images/i-back.png");
    position: absolute;
    top: 13px;
    left: 15px;
    width: 48px;
    height: 48px;
    background-size: 100%;
}

.i-back-white{
	background-image:url("../images/i-back.png");
    position: absolute;
    top: 15px;
    left: 15px;
    width: 48px;
    height: 48px;
    background-size: 100%;
}
.i-back-white span{
    position: relative;
    top: 10px;
    left: 50px;
	font-size: 17px;
}

.team-thumb{
	margin-bottom:30px;
}
.team-thumb img{
	height:238px;		
}
.team-info {
	bottom: 15px;
}
#p-list .catBox {
    position: relative;
	top: -60px;
}
#p-list .writerBox .contentB {
	border-radius: 30px 30px 0 0;
}
#p-list #otherBooks{
	top: -70px;
}
#p-list .writerBox p{
	color:#242528;
}
#writers_list .listItem{
	text-align:center;
}
#writers_list .listItem img {
    border-radius: 50%;
	background-color: rgb(136,188,196);
}
#p-detail #dBox1{
	border-radius: 24px;
}
#p-detail .info_writer {
    top: -48px;
}
#p-detail #giftModal .modal-lg,#p-detail #rateModal .modal-lg,#p-listen #giftModal .modal-lg,#p-listen #rateModal .modal-lg{
	width: 340px;
}
#p-detail #rateModal .modal-body,#p-listen #rateModal .modal-body{
	height: 120px;
}
#p-detail #rateModal .star,#p-listen #rateModal .star{
	background-image:url("../images/rate_0.png");
	background-size: 100%;
	width:48px;
	height:48px;
	float:left;
	cursor:pointer;
}
#p-detail #rateModal .star.on,#p-listen #rateModal .star.on{
	background-image:url("../images/rate_1.png");	
}

#dBox1{
	margin-bottom:45px;
	padding: 30px 120px 60px;
	background-color:#4795C6;
}
#dBox1.dBox1{
	padding-bottom:0;
}
#dBox1 img.img1{
	position: relative;
    top: -80px;
	width:196px;
}
#dBox1 img.img2{
	position: relative;
	width:72px;
}
#dBox1.dBox1 .oh img{
	position:relative;
	top:15px;
}
#dBox1.dBox1 .info_writer{
	height: 124px;
}
#p-detail h2,#p-detail p{
	color:#332525;
}
#p-detail .secBox h3{
	margin-top:0;
}
#p-detail .secBox h2{
	font-size:18px;
}
#p-detail .secBox h3{
	font-size:14px;
}
#p-detail .info_writer .section-title, #p-detail .info_writer h2,#p-detail .secBox.t1 h2{
	padding:0;
}
#p-detail #playIconBox{	
	width:80%;
	margin: 0 auto;
    overflow-x: hidden;
	text-align: left;
}
#p-detail #playIconBox div{
	clear:both;
	min-height: 48px;
	float: inherit;
    height: 52px;
    border-bottom: 1px solid rgb(255 255 255 / 15%);
    margin-bottom: 3px;
}
#p-detail #playIconBox.oh div{
	border:none;
}
#p-detail #playIconBox div img{
	float:right;
	width: 48px;
}
#p-detail #playIconBox div span{
	display: inline-block;
	margin-top: 5px;
	color:#fff;
}
#p-detail #playIconBox h3{
    margin-bottom: 15px;
	color:#fff;
}
#p-detail #playIconBox.oh div {
    margin: 0 auto;
	text-align:center;
}
#p-detail #playIconBox.oh h3{
	display:none;
}
#p-detail #playIconBox.oh div img{
	float:inherit;
}
#p-detail #playIconBox.oh, #p-detail #playIconBox.oh .btnRec{
	width: 208px !important;
	height: inherit;
}
#events{
	overflow: initial;
}
#timerBtn{
	width: 65px;
	position:absolute;
	top:15px;
	right:15px;
	cursor:pointer;
}
#timerBtn i{
    width: 24px;
    height: 24px;
    display: inline-block;
	border-radius:50%;
}
#timerBtn span{
	position: relative;
    top: -7px;
}
#timerList {
    position: absolute;
    top: 55px;
    right: 24px;
}
#timerList ul{
	padding:5px;
	background-color:#999;
}
#timerList ul li {
    padding: 5px 20px;
    background-color: #ccc;
    margin-bottom: 2px;
	cursor: pointer;
}
#timerList ul li:hover{
	background-color: #fdbd15;
}
#timerList:before{
	border: solid transparent;
	position: absolute;
	border-color: rgba(194, 225, 245, 0);	
	bottom: 100%;
	left: 50%;
	content: "";
	height: 0;
	width: 0;
	border-bottom-color: #999;
    border-width: 12px;
    margin-left: -12.5px;
}
.listItem{
	float:left;
    width: 20%;
	height: 380px;
	padding-left: 0;
	padding-right: 30px;
}
.listItem .team-info{
	padding: 0;
}
.listItem .team-info h3{
	font-size: 17px;
}
.listItem img{
	max-height: 327px;
}

.mediPlayer{
	margin-top:10px;
}
#audio strong{
	font-size:20px;
}
#audio p{
	font-size:18px;
    margin-top: 10px;
}
#audio p.nickname{
	width:196px;
	margin: 0 auto;
	padding: 10px;
	background-color:#171224;
	border-radius: 0 0 0 18px;
}
#audio .col4 p{
    margin-top: 0;
}
.playerBox{
	width: 480px;
	margin: 30px auto;
}
#controlsBox {
	margin-bottom: 50px;
	z-index: 111;
	position:relative;
}
#controlsBox img{
	width:64px;
}
.writerBox {
    position: relative;
    top: -85px;
}
.writerBox .imgBox img{
	width:256px;
}
.writerBox .contentB{
	margin-bottom: 30px;
	padding: 15px 60px 30px;
	background-color:rgb(136,188,196);
}
.writerBox .contentB h2 {
	margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
}
.writerBox .listItem{
	margin-top: 15px;
}
.bookBox img{
	width:196px;
	margin-bottom: 15px;
	-webkit-box-shadow: 0px 13px 19px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 13px 19px -10px rgba(0,0,0,0.75);
	box-shadow: 0px 13px 19px -10px rgba(0,0,0,0.75);
	background-color:#171224;
}
#contact .form-control.fc{
	background-color:#fff;
}
.btnD{
	background-color: #fdbd15;
	color: #4a322e;
	width: 128px;
	margin: 0 auto;
	padding: 8px;
	position: relative;
	border-radius: 30px;
	border: none;
}
.btnDR{
	background-color: #fdbd15;
	color: #333;
	margin: 0 auto;
	padding: 8px;
	position: relative;
	border: none;
	font-weight:bold;
}
.secBox .col4{
	width:33.3%;
	float:left;
}
#p-search #products img{
	width:100%;
}
#p-search form{
	padding:0 15px;
}
#p-search .team-info {
    padding: 10px 30px 20px 0;
}
#p-login .login-content,#register .login-content{
	background-color:transparent;
}
#otherBooks {
    padding: 0;
}
#otherBooks .section-title {
    padding-bottom: 15px;
}
#p-listen .secBox {
    position: relative;
    top: -40px;
}
#p-listen #audio{
   padding: 30px 0 0;
}

@media only screen and (max-width: 1680px){
	.next_otherBooks {
		right: 70px !important;
	}
}
@media only screen and (max-width: 1440px){
	#otherBooks li {
		width: 168px;
		height: 252px;
	}
	.next_otherBooks {
		top: 165px;
		right: 92px !important;
	}
	.listItem img{
		max-height: 234px;
	}
}

@media only screen and (max-width: 1366px){
	#audio .secBox p{
		font-size: 14px;
	}
   #p-list #topBox {height: 80px;}
   #dBox1 {
		padding: 30px 90px 60px;
	}
   .next_otherBooks {
		top: 165px;
		right: 72px !important;
	}
	#p-list .catBox, #p-list #otherBooks {
		top: 0;
	}
	#p-list .writerBox{
		top: -15px;
	}
	.listItem {
		height: 270px;
	}
	#dBox1 img.img1 {
		width: 160px;
	}
	.bookBox img, #audio p.nickname {
		width: 160px;
	}
	#controlsBox img {
		width: 50px;
	}
	.icon {
		width: 52px;
		height: 52px;
	}
	#p-listen .secBox {
		top: -74px;
	}
	#dBox1 img.img2 {
		width: 52px;
	}
	.writerBox .imgBox img {
		width: 224px;
	}
}
@media only screen and (max-width: 1280px){
	.next_otherBooks {
		right: 52px !important;
	}
}
@media only screen and (max-width: 1200px){
	#otherBooks li {
		width: 172px;
	}
	.next_otherBooks {
		right: 26px !important;
	}
}
@media only screen and (max-width: 1024px){}
@media only screen and (max-width: 768px){
	.mediPlayer{
		margin-top:70px;
	}
	#audioInfo{
		text-align:center;
	}
	.ppq-audio-player{margin:40px auto 0 !important;}
	#otherBooks {
		padding: 15px;
	}
	#otherBooks li {
		width: 124px;
		height: 186px;
	}
	#dBox1 .col4 p,#audio .col4 p{font-size:14px;}
	.ppq-audio-player {
		height: 65px !important;
	}
	#p-detail #likeBox div {
		margin-left: 0;
	}
	#p-detail #rateBox div {
		margin-right: 0;
	}
	.listItem img {
		max-height: 171px;
	}
}
@media only screen and (max-width:480px) {   
	.playerBox {
		width: 380px;
	}
}
@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	#controlsBox {
		position: relative;
		top: -50px;
	}
}


@media only screen and (width: 768px){
	#otherBooks li {
		width: 122px;
	}
}

@media only screen and (max-width: 767px) {
	.listItem img {
		max-height: 154px;
	}
	#freeBox{
		overflow:hidden;
		margin-bottom: 30px;
	}
	.navbar>.container .navbar-brand {
		margin-left: 15px;
	}
	#topBox {height: 120px;}
	.listItem{
		width:33.33%;
		max-height: 185px;
		padding: 3%;
	}
	.navbar-toggle{display:none;}
	
   footer#footer {		
		bottom: 0;
	}
	.sh{
		margin-bottom: 300px;
	}
	
	.listItem .team-info h3 {
		font-size: 13px;
	    margin-top: 15px;
	}
	#p-detail .imgBox{
		height: 50px;
		margin-bottom: 35px;
	}
	#dBox1 img.img1{
		top: -210px;
	    width: 160px;
	}
	#dBox1 img.img2{
		top: 15px;
	}
	#p-detail #dBox1{
		margin: 180px 15px 24px;
		padding: 30px 0 0;
	}
	#p-detail #playIconBox h3 {
		font-size: 19px;
	}
	#p-list .writerBox {
		top: -15px;
	}
	#p-list #otherBooks {
		top: -65px;
	}
	#p-list .catBox {
		top: 15px;
	}
	#p-detail .info_writer .section-title{
		padding: 5px;
	}
	#p-detail .secBox {
		margin-bottom: 15px;
	}
	#p-detail .secBox p{
		margin:0;
	}
	#p-detail .btnRec{
		top: 0;
	}
	#p-detail #playIconBox{
		width: 295px !important;
		margin-top: 15px;
	}
	#p-detail #playIconBox div {
		float: inherit;
	}
	#p-detail #playIconBox.icons div {
		float: left;
		width: 33%;
		height: 100px;
	}
	#otherBooks {
		padding: 15px 0 0 15px;
	}
	#otherBooks li {
		width: 105px;
		height: 162px;
	}
	#otherBooks .section-title{
		padding-bottom:15px;
	}
	#dBox1 .col4 p, #audio .col4 p {
		font-size: 11px;
	}
	#p-search form .btn{
		margin-top: 15px;
	}
	#p-search .btnD{
		top:-2px;
	}
	#p-search #slider11 li, #p-search #slider12 li, #p-search #slider13 li, #p-search #slider14 li{
		width: 105px;
	}
	#p-search #products{
		padding-left:0;
	}
	#p-search #products h5{
		font-size:13px;
	}
	#p-listen .bookBox img{
		width: 164px;
	}
	#p-listen #audio{
		padding: 45px 0 0;
	}
	#p-listen .playerBox {
		margin: 0 auto;
	}
	#p-listen .secBox{
	    top: -30px;
	}
	#controlsBox{
		margin-bottom: 0;
	}
	#controlsBox img,#dBox1 img.img2,.icon {
		width: 48px;
		height: 48px;
	}
	#p-list .writerBox .imgBox img {
		width: 192px;
	}
	#audioInfo {
		margin-bottom: 15px;
	}
	.info_writer .section-title h2{
		font-size: 19px;
	}
	.info_writer h4 {
		font-size: 16px;
	}
	#otherBooks h3,.writerBox h3{font-size: 15px;}
}
@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) and (max-width: 767px)
{ @media {
    /*
      Define here the CSS styles applied only to Safari browsers
      (any version and any device)
     */
	#controlsBox {
		top: 5px;
		position: relative;
		z-index: 111;
	}
	 
}}
@media only screen and (max-width: 414px){
	
	.i-back-white span{
		left: 40px;
	}
}
@media only screen and (max-width: 375px){
	.playerBox {
		width: 360px;
	}
	#otherBooks li {
		width: 98px;
		height: 147px;
	}
	.info_writer .section-title h2{
		font-size: 17px;
	}
	.info_writer h4 {
		font-size: 14px;
	}
	#p-detail .secBox h2 {
		font-size: 14px;
	}
	#p-detail .secBox.t1 p,#p-detail .secBox h3,#p-detail .secBox.t2 p,#p-detail .secBox.t3 p{
		font-size: 11px;
	}
	#p-detail #playIconBox.oh{
		width: 256px !important;
	}
	#p-detail #playIconBox.icons {
		width: 254px !important;
	}
	.listItem {
		max-height: 175px;
	}
	.listItem img {
		max-height: 141px;
	}
}
@media only screen and (max-width: 360px){
	
	.playerBox {
		width: 330px;
	}
	#dBox1 .col4 p, #audio .col4 p {
		font-size: 8px;
	}
	#otherBooks li {
		width: 92px;
		height: 138px;
	}
	#p-detail #playIconBox.oh {
		width: 242px !important;
	}
	#p-detail #playIconBox.icons {
		width: 240px !important;
	}
	.listItem img {
		max-height: 135px;
	}
	#audio p{
		font-size:16px;
	}
}