@charset "UTF-8";
/* CSS Document */

.cd-hero {
	border-top:1px solid #CCC;
}

.body {
	width:100%;
	margin:0 auto;
	border-top:1px solid #CCC;
}

.banner {
	max-width:1170px;
	margin:0 auto;
}

.newphone img {
	overflow:hidden;
}

.new {
	width:100%;
	border-top:solid 1px #CCCCCC;
	border-bottom:solid 1px #CCCCCC;
	background-color:#F5F5F5;
	clear:both;
	display:inline-block;
	padding:30px 0;
}

.topics {
	max-width:1170px;
	margin:0 auto;
}

.nt {
	max-width:1100px;
	height: 20px;
    border-top: 1px solid #000000;
    position: relative;
    margin: 70px auto 40px auto;
}

.nt h2 {
	width: 220px;
	margin-left: -110px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: -20px;
    left: 50%;
    background-color: #000;
    color: #FFFFFF;
    letter-spacing:2px;
	font-family: 'Raleway', sans-serif;	
	text-align:center;
	color:#FFEA00;
}

.yellow {
	color:#FFFFFF;
}

.topics-box {
	width:300px;
	margin:45px;
	float:left;
}

.topics-box img {
	width:100%;
	border:solid 1px #000000;
}

.topics-box img {
	width:100%;
	border:solid 1px #000000;
}

.topics-box h4 {
	margin:20px 0 10px 0;
	font-weight:bold;
	padding-bottom:4px;
	border-bottom:solid 1px #000;
}

.topics-box p {
	line-height:1.2em;
	font-size:smaller;
}

.footer {
	font-family: 'Raleway', sans-serif;
}

/* smartphone  */
@media screen and (max-width:480px){
	.newphone {
	float:none;
	width:70%;
	margin:10% 15%;
	}
	
	.topics-box {
	width:80%;
	margin:10%;
	float:none;
	}
}

/* tablet */
@media screen and (min-width:480px) and ( max-width:768px) {
	.banner {
	margin-top:20px;
	margin-bottom:20px;
	}
	
	.newphone {
	float:left;
	width:40%;
	margin:5%;
	}
	
	.topics-box {
	width:80%;
	margin:10%;
	float:none;
	}
}

/* below 769px~1170px */
@media screen and (min-width:769px) and ( max-width:1170px) {
	.banner {
	margin-top:20px;
	margin-bottom:20px;
	}
	
	.newphone {
	float:left;
	width:40%;
	margin:5%;
	}
	
	.topics-box {
	width:25%;
	margin:4%;
	float:left;
	}
}

/* above 1170px */
@media screen and (min-width:1170px) {
	.banner {
	margin-top:20px;
	margin-bottom:20px;
	}
	
	.newphone {
	float:left;
	width:40%;
	margin:5%;
	}
	
	.topics-box {
	width:25%;
	margin:4%;
	float:left;
	}
}