@charset "utf-8";



@font-face {
  font-family: 'NotoSansCJKkr-Light';
  font-style: normal;
  font-weight: normal;
  src: url(../font/NotoSansCJKkr-Light.eot);
  src: url(../font/NotoSansCJKkr-Light.eot?#iefix) format('embedded-opentype'),
	   url(../font/NotoSansCJKkr-Light.woff) format('woff'),
	   url(../font/NotoSansCJKkr-Light.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansCJKkr-Medium';
  font-style: normal;
  font-weight: bold;
  src: url(../font/NotoSansCJKkr-Medium.eot);
  src: url(../font/NotoSansCJKkr-Medium.eot?#iefix) format('embedded-opentype'),
	   url(../font/NotoSansCJKkr-Medium.woff) format('woff'),
	   url(../font/NotoSansCJKkr-Medium.otf) format('opentype');
}

/* 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:100%;}
body {font-size: 18px; font-family: NotoSansCJKkr-Light, dotum, sans-serif;  color:#373635; 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: #373635; text-decoration: none; }
a:visited { color: #373635; text-decoration: none; }
a:hover { color: #373635; text-decoration: none; }
a:active { color: #373635; text-decoration: none; }
a:focus { color: #373635; 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:100%; min-height:100%; -ms-overflow-style: none;}

::-webkit-scrollbar {

display:none;

}

/* layout*/
header {position: fixed; width:1920px; top:0px; height: 103px; left: 50%; margin-left: -960px; min-width:1100px;  z-index:1001; }

.navi {position: fixed;  width:1920px; height:103px; top: 0px; left: 50%; margin-left: -960px;  z-index: 9;}
#navi-bg { position: fixed; width: 1920px; height: 103px; top: 0; left: 50%; margin-left: -960px; background-color: #3a3a3d; display: none; }

h1 { width:426px; height:103px; position: fixed; top:0px; left: 0px; z-index: 20; }
h1 a {display:inline-block; width:426px; height:103px;  left:0; background:url(../img/logo.png) no-repeat; text-indent:-9999px; #c6c6c6; }


.gnb {  width: 1300px;  position:absolute;  left:50%; margin-left:-510px;z-index:2;overflow:hidden;height:103px;letter-spacing:0; font-family: 'Noto Sans KR', sans-serif;}
.gnb>ul>li {position:relative;float:left;width:146px; text-align:center;}
.gnb>ul>li:nth-child(2) { margin-left: 19px; }
.gnb>ul>li:nth-child(3) { margin-left: 34px;width: 180px; }
.gnb>ul>li:nth-child(4) { margin-left: 34px; }
.gnb>ul>li:nth-child(5) { margin-left: 15px; }
.gnb>ul>li:nth-child(6) { width: 100px; margin-left: 40px; }
.gnb>ul>li:nth-child(7) { margin-left: 30px; }
.gnb .depth1 {position:relative; display:block;  font-size:17px; font-weight:600; letter-spacing:-1px; line-height:103px; color: #fff;}
.gnb>ul>li>a:hover { color:#9c760f !important; }
.gnb>ul>li>ul {display:block; background:url(../../common/gnb_bg.png) no-repeat right 0px; min-height:140px; margin-top:16px; opacity:0;transform:translateY(20px)}
.gnb>ul>li>ul>li {float:none; height:29px; width:auto; text-align:left;}
.gnb>ul>li>ul>li>a {font-size:15px; color:#373635; font-weight:600; letter-spacing:-0.7px; text-align:left; position: relative; margin-left: 11px; }
.gnb>ul>li>ul>li>a>div {position: absolute; top: 8px; left: -11px; width: 4px; height: 4px; background-color: #373635; border-radius:2px;  }
.gnb>ul>li>ul>li>a:hover {color:#9c760f;}
.gnb>ul>li>ul>li>a:hover .depth1 { color: #9c760f; }
.gnb .line {position:absolute; display:block; bottom:0px; height:3px; width:0%; background:#9c760f; left:65px; z-index: -1;}
.navi-bg {position:absolute; display:block;width:1920px; height:0px; left: 50%; margin-left: -960px; top: 103px; z-index:1; overflow: hidden; }
.navi-bg .white-bg {width:1920px;height:320px; background:#fff; opacity: 0.65;border-bottom:1px solid #c6c6c6;}

.menu-icon {display:none;}

.language {position: fixed; top: 0px; right: 0;  letter-spacing:0; width:75px; z-index:90; }
.language .sel-tit {display:block; color:#fff; font-size:12px; background:url(../img/sitemap-bt.png) no-repeat; height:103px;  cursor:pointer; }

/*#popup_bt { position: fixed; top: 0; right:0; cursor: pointer; z-index: 99;}*/

#language2 { position: fixed; top: 0px; right: 68px; z-index: 89; }


.lanaguage a { display: block; height: 30px; overflow: hidden; margin-right:-6px;}
#header.change-color > .outter .lanaguage a img { margin-top: -65px; }


#sitemap_wrap { width:100%; height:100%; background-color:rgba(0,0,0,0.7); position:fixed; top:-5000px; left:0; right:0; margin:auto;  z-index:999999999999999;}
#sitemap { width:1200px; position:absolute; top:-500px; left:50%; margin-left:-600px;  }
#sitemap_close { position:absolute; top:200px; left:50%; margin-left:642px; cursor:pointer; display:none;}



#q-menu { width: 91px; height: 100%; position: fixed; top: 0; left: 0; background-color: #f8f8f8; z-index:999999999; border-right: 1px solid #e0dcde;  box-sizing: border-box; }

#q-logo { position: absolute; top: 0; left: 0; }
#q-bt01 { position: absolute; top: 93px; left: 0; }
#q-bt02 { position: absolute; top: 183px; left: 0; }
#q-bt03 { position: absolute; top: 273px; left: 0; }
#q-bt04 { position: absolute; top: 453px; left: 0; cursor: pointer;}
#q-bt04>img { position: absolute; top: 0; left: 0; }
#q-bt04>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt04>img:nth-child(2):hover { opacity: 1;  }

#q-bt09 { position: absolute;  top: 363px; left: 0; cursor: pointer;}
#q-bt09>a>img { position: absolute; top: 0; left: 0; }
#q-bt09>a>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt09>a>img:nth-child(2):hover { opacity: 1;  }

#q-bt07 { position: absolute;  top: 543px; left: 0; cursor: pointer;}
#q-bt07>a>img { position: absolute; top: 0; left: 0; }
#q-bt07>a>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt07>a>img:nth-child(2):hover { opacity: 1;  }


#q-bt08 { position: absolute;  top: 632px; left: 0; cursor: pointer;}
#q-bt08>a>img { position: absolute; top: 0; left: 0; }
#q-bt08>a>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt08>a>img:nth-child(2):hover { opacity: 1;  }

#q-bt05 { position: absolute; top: 722px; left: 0; cursor: pointer;}
#q-bt05>a>img { position: absolute; top: 0; left: 0; }
#q-bt05>a>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt05>a>img:nth-child(2):hover { opacity: 1;  }


#q-bt06 { position: absolute; top: 363px; left: 0; cursor: pointer; display: none;}
#q-bt06>img { position: absolute; top: 0; left: 0; }
#q-bt06>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt06>img:nth-child(2):hover { opacity: 1;  }

#q-bt10 { position: absolute; top: 453px;  left: 0; cursor: pointer;}
#q-bt10>a>img { position: absolute; top: 0; left: 0; }
#q-bt10>a>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt10>a>img:nth-child(2):hover { opacity: 1;  }

#q-bt11 { position: absolute; top: 812px; left: 0; cursor: pointer;}
#q-bt11>a>img { position: absolute; top: 0; left: 0; }
#q-bt11>a>img:nth-child(2) { opacity: 0; transition:0.5s; }
#q-bt11>a>img:nth-child(2):hover { opacity: 1;  }


#q-ov { width: 199px; height: 100%; background-color: #242a46; position: fixed; top: 0; left: -391px; opacity: 0; z-index: 99999999; }
#q-ov-top { width: 199px; height: 50%; background-color: #242a46; position: absolute; top: 0; left: 0; }
#q-ov-bottom { width: 199px; height: 50%; background-color: #976f5d; position: absolute; top: 50%; left: 0; }

#q-go01 { width: 199px; height: 331px; position: absolute; bottom: 0; left: 0; }
#q-go02 { width: 199px; height: 331px; position: absolute; top: 0; left: 0; }



#q-menu-bt { width: 91px; height: 73px; position: absolute; top: 611px; bottom: 0; left: 0; margin: auto; cursor: pointer;}
#q-top { position: absolute; bottom: 0; left: 0; cursor: pointer; }
#q-menu02 { width: 165px; height: 457px; position: fixed; top: 333px; left: 50%; margin-left: -845px; z-index: 99;}
#q-menuline { width: 1px; height: 0px; position: absolute; top: 0; left: 23px; background-color: #787878;} 
#q01 { position: absolute; top: 0px; left: 0; cursor: pointer; opacity: 0; }
#q02 { position: absolute; top: 0px; left: 0; cursor: pointer; opacity: 0;}

#win{position: fixed; width:100%; height: 1000px;top: -1000px;left: 0;right: 0;margin: auto; z-index: 999999999; background: rgba(0, 0, 0, 0.6); opacity: 0;}	
.win-wrap{width: 1100px; height: 600px; position: absolute; top: 0;left: 0;right: 0;bottom: 0;margin: auto; ;;	}
#win-close{ position: absolute; top: 0;right: 0; cursor: pointer;}
	.win-wrap-menu { width: 600px; height: 55px; position: absolute; top: 0px; left: 50%; margin-left: -550px; z-index: 99; }
	.win-wrap-menu>li { width: 49.9%; height: 55px; line-height: 55px; float: left; text-align: center; font-family: 'Noto Sans KR', sans-serif; font-size:18px; font-weight: 600; background-color: #f1f1f1; border-left: 1px solid #fff; transition:0.5s;}
	.win-wrap-menu>li:nth-child(1) { border-left: none; }
	.win-wrap-menu>li>a { color: #373635; }
	.win-wrap-menu>li>a>div { width: 100%; height: 100%; }


	.win-wrap-menu .active { background-color: #8b6c56;color: #fff; }
	.win-wrap-menu .active>a { color: #fff; }


@media all and (max-width:1380px) { 
		h1 { position: absolute; left: 50%; margin-left: -650px;}
		.language { position: absolute; right: 50%; margin-right: -550px;}
		#language2 { position: absolute; right: 50%; margin-right: -570px;}
	}

@media all and (min-width:1930px) { 
		h1 { position: absolute; left: 50%; margin-left: -960px;}
		.language { position: absolute;  right: 50%; margin-right: -960px; }
		#language2 { position: absolute; right: 50%; margin-right: -880px;}
	}