@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: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:hover { color: inherit; text-decoration: none; }
a:active { color: inherit; text-decoration: none; }
a:focus { color: inherit; 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: 100%; width:100%; height: 80px; 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:80px; z-index: 9; max-width: 100%; transition: .3s; }

.nav_left { float: left; }
.nav_left ul { overflow: hidden; }
.nav_left ul li .logo { width:150px; height: 32px; margin-top: 25px; margin-left: 24px; }
.nav_left ul li .logo a { width: 100%; height: 100%; background: url(../../img/common/logo.png)center no-repeat; background-size:100%; display: block;}
/* .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 { margin-right: calc(5% + 12px); margin-top: 29px;}
.nav_right ul { display: flex; justify-content: flex-end; align-items: center; overflow: hidden; gap: 0 20px; }
.nav_right ul li { position: relative; display: flex; justify-content: center; align-items: center; }
.nav_right ul li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.nav_right ul li:nth-child(1) { width: 19px; height: 19px; }
.nav_right ul li:nth-child(1) a { background: url(../img/common/tel.png) center no-repeat; background-size: cover; transition: 0.3s; }
.nav_right ul li:nth-child(2) { width: 22px; height: 17px; }
.nav_right ul li:nth-child(2) a { background: url(../img/common/guest.png) center no-repeat; background-size: cover; transition: 0.3s; }

.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; }*/

.nav.active .nav_right ul li:nth-child(1) a { background: url(../img/common/tel.png) center no-repeat; background-size: cover; }
.nav.active .nav_right ul li:nth-child(2) a { background: url(../img/common/guest.png) center no-repeat; background-size: cover; }
.nav.active .nav_left ul li .logo a { color: #000;}

body.main_wrap .nav_right ul li:nth-child(1) a { background: url(../img/common/tel.png) center no-repeat; background-size: cover; transition: 0.3s; }
body.main_wrap .nav_right ul li:nth-child(2) a { background: url(../img/common/guest.png) center no-repeat; background-size: cover; transition: 0.3s; }
body.main_wrap .nav_left ul li .logo a { color: #000;}

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

body.main_wrap .ham span { background-color: #353535; }

/* .ham.active { } */
.ham.active span { transition: 0.5s 0.4s; background: #353535; }
.ham.active2 span { background: #353535; }

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


 #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: 140px; left: 24px; top: 0; bottom: 0; line-height: 120px; font-family: 'Pretendard'; font-weight: 700;}
.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% - 230px );

}

	}
*/



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

	.nav_left ul li .logo { width: 350px; margin-top: 25px; }
	.nav_left ul li .logo a { font-size: 2.5vw; }
	}


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

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


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