@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%;  max-width: 500px; position: relative; margin: auto;background: ;}
.nav { position: fixed; width: 100%; overflow: hidden; font-family: 'Noto Sans KR', sans-serif; top: 0; left: 0; right: 0; margin: auto; height: 80px; z-index: 99999; max-width: 500px; background: ;
box-sizing: border-box; padding: 0;  transition:.5s; overflow: hidden; opacity: 0;}
.nav.active { height: 80px; background: #fff;; box-sizing: border-box;}
.nav.active .logo{ transition:.5s;}
.logo { width: 146px; margin-left: 20px;  margin-top: 30px; }
.logo img { width: 100%; }
.nav_right { position: absolute; right: 9.5px; top: 0;height: 100%; }
.nav_right ul { overflow: hidden;height: 100%; box-sizing: border-box;}
.nav_right ul li { float: left; position: relative; box-sizing: border-box; height: 100%; width: 45px; height: 100%; margin-top: 0px; }
.nav_right ul li a { width: 100%; height: 100%; display: block; box-sizing: border-box;}
.nav_right ul li 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: 0px; width:100%; height: 100%; z-index: 999999; display: none;opacity: 0; overflow:scroll;	}
.gnb_wrap .gnb_top { position: relative; height: 80px; background:#e1e3e6; }
.gnb_wrap .gnb_top h1 { position: absolute; width: 146px; left: 0;margin: auto; top: 0; bottom: 0; }
.gnb_wrap .gnb_top h1 img { width: 100%; position: absolute; left: 20px; top: 0; bottom: 0; margin: auto; }
.gnb_wrap .gnb_list { position: relative; width: 100%; height: 100%; background-color: #e1e3e6; overflow: scroll; padding-top: 20px; overflow:scroll;		 }
.gnb_wrap .gnb_list .gnb_dep1 { padding: 18px 0px; margin:0px; display: block; font-size: 20px; font-weight: 400; }
.gnb_wrap .gnb_list .gnb_dep1 span { display: block; color: #555; background-size: 24px 12px; font-weight: 500; text-align: center;}
.gnb_wrap .gnb_list li.on {}
.gnb_wrap .gnb_list li.on .gnb_dep1 span {  display: block; color: #555; background-size: 24px 12px; }
.gnb_wrap .gnb_list .gnb_dep2 { display: none; }
.gnb_wrap .gnb_list .gnb_dep2 li { color: #555; font-weight: 400; text-align: center; }
.gnb_wrap .gnb_list .gnb_dep2 li a {  padding: 10px 0px 10px 0px; display: block; font-size: 14px; font-weight: 500; color: #555;}
.gnb_wrap .gnb_list .gnb_dep2 li.on { background-color: ; color: #555 !important; }
.gnb_wrap .gnb_list .gnb_dep2 li.on a { color: #fff !important; padding: 20px 0px 20px 0px; 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: 99999999; position: fixed; left: -30px; bottom: 80px; width: 80px; height: 80px; border-radius: 0; cursor: pointer; opacity: 0;transition:.5s; background: #a79482; border-radius:50px; }
.ham.scroll{height: 80px;;}
.ham.scroll span{background: #101f3a;}
.ham.scroll .bar1{margin-top: 32px;}
.ham span { display: block; background: #000; margin: auto; width: 20px; height: 1px; border-radius: 0px; transition: 0.25s; }
.ham .bar1 { margin-top: 32px; margin-bottom: 6px; }
.ham .bar2 {width: 14px; transform: translateX(-3px); }
.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; left: calc(100% - 70px) !important; top: 0; background: none; transition:0s; }
.ham.active span { background-color: #000; }

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

.ham.active.scroll{ border-right: none; left: calc(100% - 70px); top: 0; background: none; transition:0s }
.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; }

/* .ham.footer_scroll{transition:.5s; bottom: 80vw;}
.ham.active.footer_scroll .bar1 { transform: rotate(45deg); margin-top: 40px; }
.ham.active.footer_scroll .bar2 { opacity: 0; }
.ham.active.footer_scroll .bar3 { transform: rotate(-45deg); margin-top: -8px; } */

.q_btn2{background: #081023;z-index: 99999; position: fixed; left: 90px; bottom: 80px; width: 80px; height: 80px; cursor: pointer; opacity: 0;border-radius:50px; transition:.5s;}	
.q_btn2 a{text-align: center; display: block;width: 100%; height: 100%;line-height: 20px;padding-top: 20px; color: #fff;}

.q_right_bt{position: fixed; right: 0;bottom: 3vw;z-index: 9999; transform: translateY(0); transition: 1.2s; opacity: 0;}
.q_right_bt.active{transform: translateY(-100vw); }
.q_right_bt ul{height: auto; background-color:#101f3a ; border: 1px solid #fff; border-radius: 50px;}
.q_right_bt ul li{padding: 3vw 4vw;}

.q_right_bt ul li:nth-child(1){padding-top: 7vw;}
.q_right_bt ul li:nth-child(3){padding-bottom: 6vw;}

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

	}


@media all and (min-width:500px) { 		
	.ham { left: 0; right: 0; margin: auto; bottom: 30px;	transform: translateX(-30vw) }
	.ham.active { border-right: none; ; bottom: calc(100% - 80px) !important; background: none; transition:0s;transform: translateX(-00vw) }
}