/*초기화 코드*/


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

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, a, 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:12px;
  font-family:'나눔고딕', NanumGothic, 'Nanum Gothic',arial, Helvetica, AppleGothic, sans-serif;
  vertical-align:baseline;  
}


a:link {text-decoration:none;;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
a:hover {text-decoration:none;}

html, body { width: 100%; height: 100%; margin: 0; padding: 0; outline: 0; border: 0; }

table { border-collapse: collapse; border-spacing: 0; }
input{ outline-style:none;} , textarea{ outline-style:none;}
input,select{
	font-size:12px;
	font-family:'나눔고딕', NanumGothic, 'Nanum Gothic',arial, Helvetica, AppleGothic, sans-serif;
	color:#3d3d3d;
	border:1px solid #bbb;
}

img { max-width: 100%; vertical-align: middle; }
img,embed,object,video { max-width: 100%; }
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}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/*640px CSS코드*/

#wrap{max-width:640px;margin:0 auto; width:100%; position:relative; overflow:hidden;}

/*이미지 슬라이더 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;}

.topLine {width:100%; padding:1% 3%; background-color:#b7b7b7;}
.topLine > ul {}
.topLine > ul:after {content:''; display:block; clear:both;}
.topLine > ul > li {float:left; color:#fff; padding:0 5px;}
.topLine > ul > li > a {color:#fff;}
.TopWarp { position:relative; }
.TopWarp > h1 > a{display:block; text-align:center;}
.TopWarp > h1 > a > img {width:45%; padding:5% 0;}
.leftMenu-btnWrap {position:absolute; top:3%; left:5%;}
.leftMenu-btnWrap .leftMenu-btn {width:30px; height:40px; position:relative; padding:45px 0 0 0; margin:0 30px 0 0; }
.leftMenu-btnWrap .leftMenu-btn .Navibar {position:absolute; width:100%; height:2px; background-color:#000; transition:all 0.3s ease;}
.leftMenu-btnWrap .leftMenu-btn .Navibar:after {position:absolute; content:''; display:block; width:100%; height:2px; background-color:#000; top:-8px; transition:all 0.3s ease;}
.leftMenu-btnWrap .leftMenu-btn .Navibar:before {position:absolute; content:''; display:block; width:100%; height:2px; background-color:#000; top:8px; transition:all 0.3s ease;}
.leftMenuWrap {position:absolute; top:0; left:-100%; z-index:99; width:100%; background-color:#fff;}
.leftMenuWrap .leftMenuInner {width:100%;}
.leftMenuWrap .leftMenuInner .left-tit {padding:10px; border-bottom:1px solid #ccc; position:relative; background-color:#f1f1f1;}
.leftMenuWrap .leftMenuInner .left-tit .left-close {position:absolute; top:7px; right:10px; cursor:pointer; font-size:1.4rem;}
.leftMenuWrap .leftMenuInner > ul {}
.leftMenuWrap .leftMenuInner > ul > li { padding:0 0 10px 0; }
.leftMenuWrap .leftMenuInner > ul > li:last-child {border:none;}
.leftMenuWrap .leftMenuInner > ul > li > p{padding:10px;}
.leftMenuWrap .leftMenuInner > ul > li > p.p01 {background-color:#6c3a86;}
.leftMenuWrap .leftMenuInner > ul > li > p.p02 {background-color:#328c59;}
.leftMenuWrap .leftMenuInner > ul > li > p.p03 {background-color:#362f87;}
.leftMenuWrap .leftMenuInner > ul > li > p.p04 {background-color:#ff7b3b;}
.leftMenuWrap .leftMenuInner > ul > li > p.p05 {background-color:#feba50;}
.leftMenuWrap .leftMenuInner > ul > li > p > a{display:block; color:#fff;}
.leftMenuWrap .leftMenuInner > ul > li > ul {padding:10px 0 0 0;}
.leftMenuWrap .leftMenuInner > ul > li > ul > li{padding:5px 30px;}
.leftMenuWrap .leftMenuInner > ul > li > ul > li > a{display:block;}

.mainNavi {width:100%;}
.mainNavi:after {content:''; display:block; clear:both;}
.mainNavi > li {float:left; width:31.333%; margin:1%; border-radius:15%;}
.mainNavi > li > a {display:block; padding:15% 0; text-align:center; color:#fff; font-size:1.3rem;}
.mainNavi > li.navi01 {background-color:#6c3a86;}
.mainNavi > li.navi02 {background-color:#328c59;}
.mainNavi > li.navi03 {background-color:#362f87;}
.mainNavi > li.navi04 {background-color:#ff7b3b;}
.mainNavi > li.navi05 {background-color:#feba50;}
.mainNavi > li.navi06 {background-color:#6c3a86;}
.mainNavi > li.navi07 {background-color:#328c59;}
.mainNavi > li.navi08 {background-color:#362f87;}
.mainNavi > li.navi09 {background-color:#ff7b3b;}

.footer {padding:5% 1%; background-color:#46b97e;}
.footer > p {margin:2% 0; color:#fff;}
.footer > p > a {color:#fff;}

/* 로그인 CSS */
.loginBox {width:100%; padding:5% 0;}
.loginBox > h2 {text-align:center; font-size:1.3em; padding:5% 0;}
.loginBox .loginInputArea {margin:0 auto;}
.loginBox .loginInputArea input {padding:4px;}
.loginBox .loginBtnArea {margin:3% auto;}
.loginBox .loginBtnArea tr td{vertical-align:middle;}
.loginBox .loginBtnArea tr td > a {color:#333;}