/* BASIC css start */
/* BASIC css start */
#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }

/* header */
#header { position:relative; width:100%; background:#fff;  }

#header .headerGnb { min-width: 1100px; margin-left: 160px; /* height: 160px; */ border-bottom: 1px solid #f0f0f0;  padding: 40px 160px 40px 120px;margin-bottom: 30px;}
#header .headerGnb:after { content:""; clear:both; display:block; } 
#header .headerGnb .tnbLeft { float:left }
#header .headerGnb .tnbRight { float:right }
#header .headerGnb .tnbRight li { padding-left:10px; float:left }
#header .headerGnb .tnbRight li a { display:block; height:45px; color:#979797; line-height:45px;  font-size: 18px;  }
#header .headerTop { margin: 0 auto;  position: fixed;  width: 160px;  border-right: 1px solid #f0f0f0;  height: 100%; overflow: hidden; *zoom:1 }
#header .headerTop:after { display:block; clear:both; content:'' }
#header .headerTop .tlogo {  position: relative;  padding-top: 0px;  z-index: 11;  -webkit-transition: opacity .3s ease;  transition: opacity .3s ease;}
#header .headerTop .tlogo a{position: absolute;  left: 50px;  fill: #020203;  -webkit-transform-origin: right top;  transform-origin: right top;  -webkit-transform: translateX(-100%) rotate(-90deg); transform: translateX(-100%) rotate(-90deg);    -webkit-transition: fill .4s ease-in-out,margin .4s cubic-bezier(.49,.12,0,1.02);    transition: fill .4s ease-in-out,margin .4s cubic-bezier(.49,.12,0,1.02); font-size: 23px;   top:0px }

/* 상단 메뉴 */
.navbar { overflow: hidden;}
.navbar a { float: left; font-size: 18px; text-align: center; padding: 14px 0px; text-decoration: none; color:#9e9e9e; margin:0 16px}
.navbar a:hover, .dropMenu:hover .dropbtn {}
.navbar a { display:block;  color:#202020; white-space:nowrap; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent }
.navbar a:before {content:""; position:absolute; left:50%; right:50%; top:0; height:2px; z-index:-1; background:#231f20; -webkit-transition-property:left, right; transition-property:left, right; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.navbar a:active:before,
.navbar a:focus:before,
.navbar a:hover:before { left:0; right:0 }
.navbar a:hover { *height:39px; *border-top:2px solid #000; }

.dropMenu {  float: left; overflow: hidden;}
.dropMenu .dropbtn {font-size: 18px; border: none; outline: none; background-color: #fff;   margin: 0;}
.dropMenu .dropbtn i{vertical-align: middle;}
.dropMenu:hover .sub2Dept { display: block;}
.dropMenu .sub2Dept {display: none; position: absolute; background-color: #fff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropMenu .sub2Dept a { float: none; padding: 12px 0px; text-decoration: none; display: block; text-align: left;font-size: 14px;}
.dropMenu .sub2Dept a:hover { background-color: #f9f9f9; }
.dropMenu .sub2Dept a:before {content:""; position:absolute; left:50%; right:50%; top:0; height:0px; z-index:-1; background:none; -webkit-transition-property:left, right; transition-property:left, right; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.dropMenu .sub2Dept a:active:before,
.dropMenu .sub2Dept a:focus:before,
.dropMenu .sub2Dept a:hover:before { left:0; right:0 }
.dropMenu .sub2Dept a:hover { *height:39px; *border-top:0;    margin: 0;  padding: 12px 16px; }

/*전체메뉴*/
#allMenu { position: fixed; top: -200px; width: 160px; transition: top 0.3s; z-index:1}
#allMenu a {float: left;display: block; color: #000; background: #f0f0f0; border-radius: 100%; text-align: center; padding: 15px; text-decoration: none; margin-top: 50px; margin-left: 47px;}
#allMenu a:hover {background-color: #ddd; color: black;}
#allMenu a i{font-size:32px}
.overlay { height: 100%; width: 0; position: fixed; z-index: 3; top: 0; left: 0; background-color: rgba(0,0,0, 0.9); background-color: rgb(0,0,0,0.9); overflow-x: hidden; transition: 0.5s;    overflow-y: scroll;}
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus { color: #f1f1f1;}
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}

.overlay .leftMainMenu {color: #818181;cursor: pointer; padding: 18px; width: 100%; border: none; outline: none; font-size: 36px; transition: 0.4s;background: none;}
.active, .leftMainMenu:hover {color:#fff}
.overlay .leftSubList {padding: 0 18px; display: none;  overflow: hidden;}
.overlay .leftSubList a{font-size: 18px;}


@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


/*search*/
.searchOpenBtn {background: none; border: none; padding: 10px 15px; font-size: 20px; cursor: pointer; color:#979797}
.searchOpenBtn:hover {color:#000}
.searchArea {height: 100%;width: 100%;display: none;position: fixed;z-index: 15;top: 0;left: 0;background-color: rgb(0,0,0);background-color: rgba(255, 255, 255, 0.9);}
.searchArea .hdTit {font-size: 48px; margin-top: 20px;  margin-left: 45px; font-weight: 300; letter-spacing: -2px;}
.searchArea .findTit{ text-align: center;    position: relative;  top: 30%;  width: 40%;  text-align: center;  margin-top: 30px;  margin: auto;  font-size: 42px;  font-weight: 300; letter-spacing: -2px;}
.searchArea .overlay-content {position: relative;top: 36%;width: 40%;text-align: center;margin-top: 30px;margin: auto;border-bottom: 2px solid #000;height: 50px;}
.searchArea .SearchClosebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;cursor: pointer;color: #252525;}
.searchArea .SearchClosebtn:hover { color: #ccc;}
.searchArea .overlay-content input {height: 44px;line-height: 44px;font-size: 24px;width: 90%;float: left;border: 0;font-weight: 300;background: none;}
.searchArea .overlay-content i{float: right;font-size: 32px;margin-top: 5px;}
.searchArea button:hover { background: #bbb;}


/* BASIC css end */