@charset "utf-8";

@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); 

body {
	width: 100%;
	height: 100%;
	font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum;
	text-transform: uppercase;

}
.inner {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
}
h1 {margin-top: 120px; font-size: 24px; font-weight: bold; color: #464b4b;}
.copy {font-size: 15px; color: #8b8c8c;}


#container ul {overflow: hidden; width: 960; margin-top: 170px;}
#container ul li {float: left; text-align: center; width: 430px; margin-left: 119px;}
#container ul li:first-child {margin-left: -38px;}
#container ul li:hover {color: #464b4b; transition: all 0.15s;}
h2 {font-size: 37px;}
h3, p {font-size: 20px;}

#container a {margin: 50px auto; background-size: contain; text-indent: -99999px; width: 345px; height: 50px; }
.ata_btn {display: block; background: url('../img/ata_off.png') no-repeat; }
.ata_btn:hover {background: url('../img/ata_on.png') no-repeat; transition: all 0.15s;}


.mds_btn {display: block; background: url('../img/mds_off.png') no-repeat;}
.mds_btn:hover {background: url('../img/mds_on.png') no-repeat; transition: all 0.15s;}

#footer {margin-top: 179px; text-indent: -99999px}



@media all and (max-width:768px) and (max-width:1024px) {
	.inner {width: 100%;}

	h1 {margin-top: 100px; margin-left: 50px; font-size: 20px; font-weight: bold; color: #464b4b;}
	.copy {font-size: 13px; color: #8b8c8c; margin-left: 50px;}

	#container ul {overflow: hidden; width: 380px;  margin-top: 70px;}
	#container ul li {text-align: center; width: 100%; margin: 60px 0 0 0;}
	#container ul li:first-child {margin: 0;}

	h2 {font-size: 20px;}
	h3, p {font-size: 13px;}

	#container a {margin: 10px auto 0; background-size: contain; text-indent: -99999px; width: 270px; }
}