@charset "utf-8";
/* CSS reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:top }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
body {line-height:1; width:100%;}
ol, ul {list-style:none}
blockquote, q {quotes:'none'}
blockquote:before, blockquote:after, q:before, q:after { content:'none' }
table { margin:0; padding:0; border-collapse:collapse; border-spacing:0; outline:0 }
label, button {cursor:pointer}
button {margin:0; padding:0}
body {font-family:Arial; font-size:14px; }
caption {visibility:hidden}

img { border: 0; -ms-interpolation-mode: bicubic;}
svg:not(:root) { overflow: hidden; }
a {color:#707070; text-decoration:none}
a:hover {color:#d29a43}
a:visited {color:#707070; text-decoration:none}
a {outline:none; select-dummy: expression(this.hideFocus=true);}


/* =============================================================================
   layout
   ========================================================================== */
/*공통*/
#wrap {width:100%; font-family:Arial; background-color:#fff; min-width:320px}

/*mobile아이폰320*/
@media all and  (min-width:1px) and (max-width: 320px) {
header h1 {display:block;  width:55px; height:60px;  padding-top:10px; float:left; padding-left:10px; display:block}
header ul  {display:block;  width:77%; float:right; padding-top:20px; max-width:320px}
header li {padding-bottom:12px}
header li.navi_1 img{width:153px; height:19px;}
header li.navi_2 img{width:241px; height:19px;}
header li.navi_3 img{width:113px; height:19px;}
header li.navi_4 img{width:195px; height:19px;}
header li.navi_5 img{width:229px; height:19px;}
footer {padding:0 2% 0 2%; height:4.188em; overflow:hidden; margin-top:20px;clear:both; }
footer p {color:#b5b5b5; font-family:Arial;font-size:1em; text-align:center;padding-top:1.875em;padding-bottom:1.875em ;background-color:#eeeeee;}
footer img{width:90%}
}

/*mobile*/
@media all and (min-width:321px) and (max-width: 480px) {
header { height:auto; min-width:321px}
header h1 {display:block;  width:75px; height:81px;  padding-top:10px; float:left; padding-left:8px; padding-right:7px}
header ul  {display:block;  width:70%; float:left; padding-top:20px; }
header li {padding-bottom:12px}
header li.navi_1 img{width:198px; height:25px;}
header li.navi_2 img{width:296px; height:25px;}
header li.navi_3 img{width:148px; height:25px;}
header li.navi_4 img{width:240px; height:25px;}
header li.navi_5 img{width:284px; height:25px;}

footer {padding:0 2% 0 2%; height:4.188em; overflow:hidden; margin-top:2.5em;clear:both;}
footer p {color:#b5b5b5; font-family:Arial;font-size:1em; text-align:center;padding-top:1.875em;padding-bottom:1.875em ; background-color:#eeeeee;}
footer img{width:80%}
}

/*mobile(360)*/
@media all and (min-width:360px) and (max-width: 360px) {
header {min-width:360px}
header h1 {display:block;  width:65px; height:71px;  padding-top:10px; float:left; padding-left:10px}
header ul  {display:block;  width:77%; float:right; padding-top:20px}
header li {padding-bottom:12px}
header li.navi_1 img{width:175px; height:22px;}
header li.navi_2 img{width:263px; height:22px;}
header li.navi_3 img{width:125px; height:22px;}
header li.navi_4 img{width:217px; height:22px;}
header li.navi_5 img{width:251px; height:22px;}

}

/*Tablet*/
@media all and  (min-width: 481px) and (max-width: 768px) {
header {background-color:#ffffff; overflow:hidden; padding:0 2% 0 2%; margin:auto; height:125px ;}
header h1 {display:block;  width:54px; height:58px;  padding-top:15px; margin:auto; margin-bottom:20px;}
header ul  {display:block; margin:auto;   width:608px; float:none}
header li { float:left; padding:0 7px 0 7px}
header li.navi_1 img{width:90px; height:auto; }
header li.navi_2 img{width:136px; height:auto;}
header li.navi_3 img{width:67px; height:auto; }
header li.navi_4 img{width:111px; height:auto;}
header li.navi_5 img{width:131px; height:auto; }

footer {padding:0 2% 0 2% ;height:4.188em; overflow:hidden; margin-top:2.5em;clear:both;background-color:#eeeeee;}
footer p {color:#b5b5b5; font-family:Arial;font-size:1em; padding-left:1.563em; padding-top:1.875em;padding-bottom:1.875em;}

}
/*Tablet(아이폰5)568*/
@media all and (min-width: 568px) and (max-width: 568px) {
header {background-color:#ffffff; overflow:hidden; padding:0; margin:auto; height:100px }
header h1 {display:block;  width:54px; height:58px;  padding-top:10px; margin-left:9px; margin:auto; }
header ul  {display:block; margin:auto; width:568px;margin-top:10px; }
header li { float:left; padding:0 3px 0 3px}
header li.navi_1 img{width:90px; height:auto; }
header li.navi_2 img{width:136px; height:auto;}
header li.navi_3 img{width:67px; height:auto; }
header li.navi_4 img{width:111px; height:auto;}
header li.navi_5 img{width:131px; height:auto; }
footer {width:545px;height:50px; overflow:hidden; margin-top:2.5em;clear:both; background-color:#eeeeee;}
footer p {color:#b5b5b5; font-family:Arial;font-size:1em; padding-left:5px; padding-top:20px;padding-bottom:5px; }

}

/*Tablet(600)*/
@media all and  (min-width: 600px) and (max-width: 600px) {
header {background-color:#ffffff; overflow:hidden; padding:0 2% 0 2%; margin:auto; height:110px }
header h1 {display:block;  width:54px; height:58px;  padding-top:10px; margin-left:9px; margin:auto; }
header ul  {display:block; margin:auto; width:575px;}
header li { margin-top:15px; float:left; padding:0 4px 0 4px; }

header li.navi_1 img{width:90px; height:auto; }
header li.navi_2 img{width:136px; height:auto;}
header li.navi_3 img{width:67px; height:auto; }
header li.navi_4 img{width:111px; height:auto;}
header li.navi_5 img{width:131px; height:auto; }

}



/*web*/
@media all and (min-width:769px) {
header {background-color:#ffffff; overflow:hidden; width:980px; margin:auto; height:78px}
header h1 {display:block; float:left; width:54px; height:58px;  margin-top:17px; margin-left:9px}
header ul  {display:block; float:right; width:813px;}
header li {float:left; margin-top:50px;}
header li.navi_1 img{width:111px; height:14px; margin-right:40px}
header li.navi_2 img{width:165px; height:14px;  margin-right:40px}
header li.navi_3 img{width:83px; height:14px; margin-right:40px}
header li.navi_4 img{width:135px; height:14px;   margin-right:40px}
header li.navi_5 img{width:159px; height:14px; }
footer {clear:both; width:980px;/*width:980px*/ margin:auto; background-color:#eeeeee; height:4.188em; overflow:hidden; margin-top:2.5em;}
footer p {color:#b5b5b5; font-family:Arial;font-size:1em; padding-left:1.563em; padding-top:1.875em}
body {overflow-y:scroll; *overflow-y:;}
}


/*Tablet(갤럭시노트) 800대응*/
@media all and (min-width: 769px) and (max-width: 800px) {
header {background-color:#ffffff; overflow:hidden; width:800px; margin:auto; height:78px}
header h1 {display:block; float:left; width:54px; height:58px;  margin-top:17px; margin-left:9px}
header ul  {display:block; float:right; width:713px;}
header li {float:left; margin-top:50px; }

header li.navi_1 img{width:111px; height:14px;  margin-right:15px}
header li.navi_2 img{width:165px; height:14px; margin-right:15px}
header li.navi_3 img{width:83px; height:14px; margin-right:15px}
header li.navi_4 img{width:135px; height:14px; margin-right:15px}
header li.navi_5 img{width:159px; height:14px; }

footer {width:100%; margin:auto; background-color:#eeeeee; height:4.188em; overflow:hidden; margin-top:2.5em;clear:both}
footer p {color:#b5b5b5; font-family:Arial;font-size:1em; padding-left:1.563em; padding-top:1.875em}
}