@charset "utf-8";

/* basic css */
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, font, 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, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {margin: 0; padding: 0; border: 0;}
article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {display: block;}
html, body { height:auto;}
body {font-size: 18px; font-family: NotoSansCJKkr-Light, dotum, sans-serif;    line-height:1.6; letter-spacing:-1px; -webkit-text-size-adjust:none; }
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
a:link {   text-decoration: none; }
a:visited {   text-decoration: none; }
a:hover {   text-decoration: none; }
a:active {   text-decoration: none; }
a:focus {   text-decoration: none; }
select, input, textarea {font-size: 100%;vertical-align: middle ; font-family: NotoSansCJKkr-Light, dotum, sans-serif;}
input {margin: 0;padding: 0;}
ol, ul {list-style: none;}
label {cursor: pointer;}
legend, caption {width: 0;height: 0; visibility: hidden; font-size: 0;line-height: 0;}
button {cursor: pointer;}
button:focus {outline: 1px dotted;}
img {vertical-align: top;}
table {}

.hidden {position: absolute;width: 0;height: 0;visibility: hidden;font-size: 0;line-height: 0; top:-9999px}



input[type="text"] {box-sizing:border-box; -webkit-appearance:none;}
input:-ms-input-placeholder {color:#808080}
input::-webkit-input-placeholder {color:#808080}
input::-moz-placeholder {color:#808080}
input::-moz-placeholder {color:#808080}
textarea {}

/* layout*/

header { width: 100%; height: 100px; max-width: 500px; position: relative; margin: auto; }
.nav { position: fixed; width: 100%; overflow: hidden; font-family: 'Noto Sans KR', sans-serif; top: 0; left: 0; right: 0; margin: auto; height: 100px; z-index: 99999; max-width: 500px; background: #fff;
box-sizing: border-box; padding: 0; border-bottom: 1px solid #c7c7c7; transition:.5s;}
.nav.active { height: 80px; }
.nav.active .logo{margin-top: 10px; transition:.5s;}
.logo { width: 60px; margin: auto; margin-top: 20px; }
.logo img { width: 100%; }
.nav_right { position: absolute; right: 0; top: 0;height: 100%; }
.nav_right ul { overflow: hidden;height: 100%; }
.nav_right ul li { float: left; position: relative; box-sizing: border-box; }
.nav_right ul li:nth-child(1) { width: 100px; height: 100%; margin-top: 0px; border-left: 1px solid #c7c7c7; }
.nav_right ul li:nth-child(1) a { width: 100%; height: 100%; display: block; }
.nav_right ul li:nth-child(1) img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }


.gnb_wrap { font-family: 'Noto Sans KR', sans-serif; position: fixed; top: 0; right: -250px; width:100%; max-width: 250px; height: 100%; z-index: 999999; }
.gnb_wrap .gnb_top { position: relative; height: 100px; background:#fff; background-color: white; }
.gnb_wrap .gnb_top h1 { position: absolute; width: 60px; left: 0; right: 0; margin: auto; top: 0; bottom: 0; }
.gnb_wrap .gnb_top h1 img { width: 100%; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; }
.gnb_wrap .gnb_list { position: relative; width: 100%; height: 100%; background-color: #fff; overflow: scroll; }
.gnb_wrap .gnb_list .gnb_dep1 { padding: 20px 25px; margin:0px; display: block; font-size: 16px; font-weight: 400; border-bottom: solid 1px #c7c7c7; }
.gnb_wrap .gnb_list .gnb_dep1 span { display: block; color: #555; background-size: 24px 12px; font-weight: 500; }
.gnb_wrap .gnb_list li.on .gnb_dep1 span { background:url("image/on.png") center right no-repeat;  display: block; color: #1e2e53; background-size: 24px 12px; }
.gnb_wrap .gnb_list .gnb_dep2 { display: none; }
.gnb_wrap .gnb_list .gnb_dep2 li { background-color: #f1f1f1; border-bottom: solid 1px #cacaca; color: #6c6c6c; font-weight: 400; }
.gnb_wrap .gnb_list .gnb_dep2 li a { color: #6c6c6c !important; padding: 13px 13px 13px 23px; display: block; font-size: 14px; font-weight: 500; }
.gnb_wrap .gnb_list .gnb_dep2 li.on { background-color: #1aa36e; border-bottom: solid 1px #cacaca; color: #fff !important; }
.gnb_wrap .gnb_list .gnb_dep2 li.on a { color: #fff !important; padding: 20px 20px 20px 30px; display: block; }
.gnb_overlay { z-index: 999991; width: 100%; height: 100%; background: #000; opacity: 0.8; position: fixed; left: -100%; top: 0; }


.ham { z-index: 9999999; position: fixed; left: 0; top: 0; width: 100px; height: 100px; border-radius: 0; cursor: pointer; opacity: 1; border-right: 1px solid #c7c7c7;transition:.5s; }
.ham.scroll{height: 80px; }
.ham.scroll .bar1{margin-top: 32px;}
.ham span { display: block; background: #383838; margin: auto; width: 20px; height: 1px; border-radius: 0px; transition: 0.25s; }
.ham .bar1 { margin-top: 42px; margin-bottom: 6px; }
.ham .bar2 { }
.ham .bar3 { margin-top: 6px; }
.ham h6 { width: 100%; font-size: 12px; font-weight: 400; text-align: center; line-height: 100%; margin-top: 14px; transform: translateX(1px); }

.ham.active { border-right: none; }
.ham.active span { background-color: #fff; }

.ham.active .bar1 { transform: rotate(45deg); margin-top: 50px; }
.ham.active .bar2 { opacity: 0; }
.ham.active .bar3 { transform: rotate(-45deg); margin-top: -8px; }


.ham.active.scroll .bar1 { transform: rotate(45deg); margin-top: 40px; }
.ham.active.scroll .bar2 { opacity: 0; }
.ham.active.scroll .bar3 { transform: rotate(-45deg); margin-top: -8px; }




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

	}


@media all and (min-width:500px) { 		
	.ham { left: 0; right: 0; margin: auto; transform: translateX(-200px) }
}