@charset "utf-8";

#magazine{
	margin: 20px auto;
	padding: 0 20px;
	width: 100%;
	/*max-width: 600px;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}
#magazine.newMag .wrapper h1, #magazine.newMag .wrapper div, #magazine.newMag .wrapper a {
	max-width: 600px;
}

#magazine p.notice{
	margin-bottom: 20px;
	color: #454545;
	font-size: 14px;
}

#magazine h2{
	margin-top: 0;
	margin-bottom: 12px;
	padding-left: 6px;
	font-size: 20px;
	font-weight: bold;
	border-left: #3faee2 solid 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.imgBox img{
	margin-bottom: 20px;
	border: #ccc solid 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.b640,
.b480{
	display: none;
}

/* INTRODUCE +++++++++++++++++++++ */

#introduceBox{
	padding-top: 20px;
	font-size: 14px;
	color: #666;
	line-height: 22px;
}

#introduceBox .dlwrapper{
	margin-bottom: 20px;
}

#introduceBox h3{
	margin: 0 0 16px;
	padding: 4px;
	font-size: 14px;
	color: #000;
	background: #e3f4fc;
}

#introduceBox .subject h3{
	background: #ffe2c9;
}

#introduceBox b{
	display: block;
	margin: 0 0 8px;
	padding-top: 4px;
	font-weight: normal;
	color: #0071bc;
	border-bottom: #29abe2 solid 1px;
}

#sellection2 #introduceBox h3{
	background: #e4faf8;
}

#sellection2 #introduceBox .subject h3{
	background: #fff7f9;
}

#sellection2 #introduceBox b{
	color: #0a968b;
}

#sellection2 #introduceBox b{
	border-bottom: #0a968b solid 1px;
}

#sellection2 #introduceBox .subject b{
	color: #fc5b87;
}

#sellection2 #introduceBox .subject b{
	border-bottom: #fc5b87 solid 1px;
}

#introduceBox .subject b{
	color: #cc551b;
	border-bottom: #ffbfbf solid 1px;
}

#introduceBox dl{
	display: table;
	margin-bottom: 4px;
	width: 100%;
}

#introduceBox dt,
#introduceBox dd
{
	display: table-cell;
	vertical-align: middle;
	background: url('/top-page/images/preLogin/dot.png') 0 8px repeat-x;
}

#introduceBox dt em{
	padding-right: 4px;
	background: #fff;
}
#introduceBox.magazine-bg dt em{
	background: #f0f0f0;
}

#introduceBox dd em
{
	padding-left: 4px;
	background: #fff;
}
#introduceBox.magazine-bg dd em
{
	background: #f0f0f0;
}

#introduceBox dt{
	text-align: left;
	font-weight: normal;
}

#introduceBox dd{
	text-align: right;
}

#colorbox.clBox #cboxContent{
	margin: 0 !important;

}
#colorbox.clBox #cboxPrevious,
#colorbox.clBox #cboxNext,
#colorbox.clBox #cboxClose{
	top: unset;
	text-indent: unset;
	height: unset;
	color: #29abe2 !important;
}

#colorbox.clBox #cboxTitle,
#colorbox.clBox #cboxCurrent{
	position: unset;
	top: unset;
	right: unset;

}

@media only screen and (max-width: 767px) and (min-width: 641px){

}

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

	#magazine{
		margin: 0 auto 32px;
		padding: 0 8px;
		width: 100%;
		max-width: 600px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}



	#cach{
		position:absolute;
		bottom: -28px;
		right: 0;
		width: 158%;
		font-size: 20px;
		color: #e26a0e;
		font-weight: bold;
	}

	#baloon{
		display: table;
		position: absolute;
		bottom: 0px;
		width: 100px;
		height: 100px;
		border: #3faee2 solid 3px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}
	.b640{
		display: inline;
	}
}

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

	#introduceBox dl dt,
	#introduceBox dl dd{
		font-size: 13px;
	}

}

@media only screen and (max-width: 480px){
	.b480{
		display: inline;
	}


	#circleWanted h1,
	#magazine h1{
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 28px;
	}

	#magazine .wrapper a.button:last-child{
		margin-bottom: 0;
	}


	#introduceBox dl{
		position: relative;
		z-index: 11;
		margin-bottom: 12px;
		line-height: 16px;
		/* border-bottom: #ccc dotted 1px; */
		background: url('/top-page/images/preLogin/dotDl.png') left bottom repeat-x;
	}


	#introduceBox dl dt,
	#introduceBox dl dd
	{
		display:inline;
	}

	#introduceBox dl dt{
		padding-right: 72px;
		background: unset;
		/* float: left; */
	}

	#introduceBox dl dd{
		position: absolute;
		right: 0;
		bottom: 2px;
		/*float: right;
		display: inline-block;
		width: 100%; */
	}

}