@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;  color:#4c4c4c; 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 { color: #4c4c4c; text-decoration: none; }
a:visited { color: #4c4c4c; text-decoration: none; }
a:hover { color: #4c4c4c; text-decoration: none; }
a:active { color: #4c4c4c; text-decoration: none; }
a:focus { color: #4c4c4c; 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 {}

.point {color:#916b4a}
html, body {height:auto; -ms-overflow-style: none;}

::-webkit-scrollbar {

display:none;

}


/* layout*/
header { position: fixed; max-width: 600px; width:100%; height: 90px; margin: auto;; z-index:  99999990; top: 0; overflow: hidden; 
  box-sizing: border-box; }
.nav_top{width: 102%;height: 30px; position: fixed;overflow: hidden; left: 50%; transform: translateX(-50%);z-index: 10; background: url(../img/manu-pt.jpg) center no-repeat; background-size: cover; transition: .3s;}
.nav_top a{width: 100%; height: 100%; display: block;}  
.nav_top img{float: right; transform: translateX(50px);}

.nav { width: 102%;position: fixed; top: 0px; overflow: hidden; font-family: 'Noto Sans KR', sans-serif; left: 50%; transform: translateX(-50%);height: 90px; z-index: 9;
max-width: 500px; transition: .3s; /*border-bottom: 1px solid rgba(225,225,225,0.2); background-color: #fff;*/}
.nav_left { float: left; }
.nav_left ul { overflow: hidden; }
.nav_left ul li .logo { width:170px; ; margin-top: 33px; margin-left: 30px; }
.nav_left ul li .logo img { width: 100%; }
.nav_left ul li { float: left; font-weight: 700; font-size: 20px; color: #1b1b1b; position: relative; }
.nav_left ul li:nth-child(2) { margin-top: 30px; margin-left: 33px; padding-left: 27px; }
.nav_left ul li:nth-child(2):after { content:''; position: absolute; width: 1px; height: 22px; background-color: #b1b1b1; left: 0; top: 5px; margin: auto; }
.nav_right { float: right;margin-right: 20px;}
.nav_right ul { overflow: hidden; }
.nav_right ul li { float: left; position: relative; }
.nav_right ul li:nth-child(1) { width: 19px; margin-top: 35px !important; margin-right: 20px;  }
.nav_right ul li:nth-child(2) { width: 22px; margin-top: 35px; margin-right: 52px; }

.nav_right ul li:nth-child(1) img { width: 100%; }
.nav_right ul li:nth-child(2) img { width: 100%; }
/*.nav_right ul li:nth-child(1):after { content:''; position: absolute; width: 1px; height: 22px; background-color: #b1b1b1; right: 0; top: 2px; margin: auto; }*/
/*.ham { height: 23px; cursor: pointer; display: flex; flex-direction: column-reverse; justify-content: space-between; margin-top: 43.5px; }
.ham>span { width: 35px; height: 2px; background-color: #111; }*/




.ham { z-index:99999999999999; position: fixed; top: 36px; right: 25px; width: 21px; height: 17px; cursor:pointer; transition: .3s; }
.ham span { display: block; background: #222; width: 21px; height: 2px; border-radius: 3px; transition: margin 0.25s 0.25s, transform 0.25s; }
.ham .bar1 { margin-bottom: 5px;  }
.ham .bar2 { }
.ham .bar3 {margin-top: 5px; }

.ham.active{ transition: 0.5s 0.5s; right: 5%;}
.ham.active span { transition: 0.5s 0.4s; background: #353535;}

.ham.active .bar1 { margin-top: 8px; margin-bottom: -2px; transform: rotate(45deg); background: #222;}
.ham.active .bar2 { transition: transform 0.5s 0.4s, opacity 0.2s 0.2s; transform: rotate(45deg); opacity: 0;background: #222; }
.ham.active .bar3 { width: 21px; margin-top: -2px; transform: rotate(135deg);background: #222; }

 #menu_close { top: 21px; z-index: 2;
            width: 30px;
            height: 30px;
            display: block;
			position: absolute;
			right: 17px;
        }


.gnb_wrap { font-family: 'Noto Sans KR', sans-serif; position: fixed; top: 0; right: -300px; width:100%; max-width: 300px; height: 100%; z-index: 99999999; overflow:scroll; }
.gnb_wrap .gnb_top { position: relative; height: 120px; background:#fff; background-color: white; }
.gnb_wrap .gnb_top h1 { position: absolute; width:170px; left: 30px; 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;box-sizing:border-box;  }
.gnb_wrap .gnb_list .gnb_dep1 { padding: 20px 25px; margin:0px; display: block; font-size: 18px; font-weight: 400;  border-bottom: solid 1px #e6e6e6;}
.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: #442530; 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: 15px; 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: 99999990; width: 100%; height: 100%; background: #000; opacity: 0.8; position: fixed; left: -100%; top: 0; }

        
.menu_wrap { width: 100%; max-width: 720px; height: 100%; position: fixed; z-index:99999999989; left: 0; right: 0; margin: auto; top: 0px; z-index: 99999999; display: none; overflow: hidden; }
.menu { width: 100%; height: 100vh; position: absolute; right: -100%; top: 0; background-color: #fff; z-index: 1; }
.menu>ul { width: 90%; position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); }
.menu>ul>li{ text-align: center !important;line-height: 120%;margin-top: 14px;}
.menu>ul>li>a { font-family: 'noto-sans'; color: #000 !important; font-size: 26px; line-height: 160%;  font-weight: 400; letter-spacing: 2px; cursor: pointer; text-align: center !important; }

.depth1{}
.depth2{display: none;}
.depth2>li>a { font-family: 'noto-sans'; color: #000 !important; font-size: 22px; line-height: 130%;  font-weight: 400; letter-spacing: 1px; cursor: pointer; text-align: center !important; }

.q_btn{position: fixed;bottom: 0; left: 0;right: 0;margin: auto; z-index: 9999; }
.q_btn a,img{ display: inline;}

@media all and (min-width:600px){

	.ham{ right: calc(50% - 220px );}
	



	}


@media all and (min-width:1930px) { 
		
	}

  @keyframes menu_open {
    0%{opacity: 0;}
    100%{}
}


@keyframes nav_open {
  0%{opacity: 0; background: #fff;}
  100%{}
}