/*초기화 코드*/


@charset "euc-kr";
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, 
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section ,article{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:10pt;
  font-family:'나눔고딕', NanumGothic, 'Nanum Gothic',arial, Helvetica, AppleGothic, sans-serif;
  vertical-align:baseline;
  color:#2c2c2c;
}


a:link {text-decoration:none;color:#3d3d3d;}
a:visited {text-decoration:none;color:#3d3d3d;}
a:active {text-decoration:none;color:#3d3d3d;}
a:hover {text-decoration:none;color:#3d3d3d;}

body{ background-color:#fff;margin-left:0;margin-top:0;margin-right:0;}
body,button{ line-height:1.8em;font-size:12px; color:#3d3d3d; }

input,select{
font-size:11px;
font-family:arial, Helvetica, AppleGothic, sans-serif;
color:#3d3d3d;
border:1px solid #bbb;
}

img,fieldset,iframe{border:0 none}
br{letter-spacing:0px;}
header, footer, aside, section, article,div { display:block; }
div,ul,li{margin:0;padding:0;list-style:none;display:block}

/*640px CSS코드*/

#wrap{width:640px;margin:0 auto; position:relative;}



/*이미지 슬라이더 CSS*/
.bx-controls {position:relative;}
.bx-controls .bx-pager{position:absolute; top:-70px; right:50%; z-index:999; margin-right:-61px;}
.bx-controls .bx-pager .bx-pager-item{display:inline-block; margin:0 2px; z-index:9999;}
.bx-wrapper .bx-pager.bx-default-pager a{background-image:url('/img/main/best_dot01.png'); width:18px; height:18px; display:block; }
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background-image: url('/img/main/best_dot02.png'); width:68px; height:18px; display:block;
}
.bx-controls-direction{display:none;}

.maintop {position:relative;}
.maintop > img{width:640px;}
.maintop .logo{position:absolute; top:0; left:0;}
.maintop .logo > a > img {width:640px;}

.maincot {position:relative;}
.maincot > img {width:640px;}
.maincot > .btn01{position:absolute; display:block; width:160px; height:160px; top:60px; left:0;}
.maincot > .btn02{position:absolute; display:block; width:160px; height:160px; top:60px; left:160px;}
.maincot > .btn03{position:absolute; display:block; width:160px; height:160px; top:60px; left:320px;}
.maincot > .btn04{position:absolute; display:block; width:160px; height:160px; top:60px; left:480px;}
.maincot > .btn05{position:absolute; display:block; width:360px; height:60px; bottom:35px; left:140px;}

.footer > img{width:640px;}

/* SUB CSS */

.subtop > .logo > a > img{width:640px;}
.subtitle > img {width:640px;}
.subcon > img {width:640px;}
.subcon {position:relative;}
.subcon > .map {position:absolute; top:120px; left:20px;}
.subcon > .map > iframe{width:600px; height:400px;}


/*미디어쿼리*/
/*-------------------------미디어쿼리 320px 구간------------------------------*/

@media all and (max-width:320px){

	#wrap {width:320px; margin:0 auto;}

	.maintop {position:relative;}
	.maintop > img{width:320px;}
	.maintop .logo{position:absolute; top:0; left:0;}
	.maintop .logo > a > img {width:320px;}

	.maincot {position:relative;}
	.maincot > img {width:320px;}
	.maincot > .btn01{position:absolute; display:block; width:80px; height:80px; top:30px; left:0;}
	.maincot > .btn02{position:absolute; display:block; width:80px; height:80px; top:30px; left:80px;}
	.maincot > .btn03{position:absolute; display:block; width:80px; height:80px; top:30px; left:160px;}
	.maincot > .btn04{position:absolute; display:block; width:80px; height:80px; top:30px; left:240px;}
	.maincot > .btn05{position:absolute; display:block; width:180px; height:30px; bottom:17px; left:70px;}

	.footer > img{width:320px;}

	/* SUB CSS */
	
	.subtop > .logo > a > img{width:320px;}
	.subtitle > img {width:320px;}
	.subcon > img {width:320px;}

	.subcon {position:relative;}
	.subcon > .map {position:absolute; top:60px; left:10px;}
	.subcon > .map > iframe{width:300px; height:200px;}
	



}

/*---------------------------미디어쿼리 360px 구간---------------------------------*/

@media all and (min-width:321px) and (max-width:480px){ 

	#wrap {width:360px; margin:0 auto;}

	.maintop {position:relative;}
	.maintop > img{width:360px;}
	.maintop .logo{position:absolute; top:0; left:0;}
	.maintop .logo > a > img {width:360px;}

	.maincot {position:relative;}
	.maincot > img {width:360px;}
	.maincot > .btn01{position:absolute; display:block; width:90px; height:90px; top:33px; left:0;}
	.maincot > .btn02{position:absolute; display:block; width:90px; height:90px; top:33px; left:90px;}
	.maincot > .btn03{position:absolute; display:block; width:90px; height:90px; top:33px; left:180px;}
	.maincot > .btn04{position:absolute; display:block; width:90px; height:90px; top:33px; left:271px;}
	.maincot > .btn05{position:absolute; display:block; width:203px; height:33px; bottom:19px; left:79px;}

	.footer > img{width:360px;}

	/* SUB CSS */

	.subtop > .logo > a > img{width:360px;}
	.subtitle > img {width:360px;}
	.subcon > img {width:360px;}

	.subcon {position:relative;}
	.subcon > .map {position:absolute; top:67px; left:11px;}
	.subcon > .map > iframe{width:339px; height:226px;}	


}