@charset "UTF-8";

#header {width: 100%;height: auto;overflow: hidden;}
/*#nav*/
#nav{display:none;}
#nav {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(20, 20, 20, 0.98);width: 100%;height: 100vh;z-index: 2147483647;overflow-y: auto;}
#nav h1 {padding: 14px;}
#nav h1.logo {float: left;}
#nav h1.close {float: right; margin-top: 0px; color: #fff; font-size: 28px;}
#nav h1.close a{color:#fff;}
#nav .nav2 {text-align: left;width: 90%;margin: 0 auto;clear: both;padding-bottom: 80px;overflow:  visible;}
#nav .nav2 table.navMenu {width: 100%;}
#nav .nav2 .navMenu .tit {font-size: 45px;font-weight: 700;text-align: left;width: 290px;padding-right: 1%;}
#nav .nav2 .navMenu tr td.cont {float: left;text-align: left;width: 97%;}
#nav .nav2 ul.navSub li {display: inline-block;text-align: left;}
#nav .nav2 ul.navSub {height: auto;font-size: 16px;padding-top: 23px;text-align: right;width: auto;float: right;border-bottom: 1px solid rgba(255, 255, 255, 0.27);}
#nav .nav2 ul.navSub li a { padding: 1px 2px 3px 18px; color: #fff;}
#nav .nav2 table.navMenu a {color: #fff;text-align: right;display: inline-block;}
#nav .nav2 table.navMenu ul.navSub li:first-child a { padding-left: 0;}
#nav .nav2 ul.navSub li a:hover{color:#4f7bbb}
#nav .nav2 ul.gnbMenu > li {padding: 8px 0%;padding-bottom:  0px;width: 94%;border-bottom: 1px solid rgba(255, 255, 255, 0.4);zoom:1;margin:  0 auto;}
#nav .nav2 ul.gnbMenu > li > a {width: 50%;display:  inline-block;font-size: 19px;color: #fff;font-weight: 500;padding: 4% 0px;padding-bottom: 2%;cursor:pointer;-webkit-transform:scale(1); /*  크롬 */-moz-transform:scale(1); /* FireFox */-o-transform:scale(1); /* Opera */transform: scale(1);transition: transform .35s;-o-transition: transform .35s;-moz-transition: transform .35s;-webkit-transition: transform .35s;}
#nav .nav2 ul.gnbMenu > li > a:hover{cursor:pointer;            -webkit-transform:scale(1.1); /*  크롬 */            -moz-transform:scale(1.1); /* FireFox */            -o-transform:scale(1.1); /* Opera */            transform:scale(1.1);            transition: transform .35s;            -o-transition: transform .35s;            -moz-transition: transform .35s;            -webkit-transition: transform .35s;}
#nav .nav2 ul.gnbMenu > li > ul {float:  right;width:  70%;text-align:  right;}
#nav .nav2 ul.gnbMenu > li > ul > li {    display:  inline-block;}
#nav .nav2 ul.gnbMenu > li > ul > li > a {  font-size: 15px;  color:  #fff;  padding: 11px 9px 0px 11px;  display:  inline-block;}
#nav .nav2 ul.gnbMenu > li > ul > li > a:hover {    font-weight: 700;}
#nav .nav1 {background:  #424343;height: auto;overflow:  hidden;padding: 20px 20px;}

/*#gnbWrap*/
#gnbWrap ul.gnbMenu {display: inline-block;vertical-align: middle;text-align: right;}
#gnbWrap h1 {height: auto;overflow: hidden;display: inline-block;width: auto;float:  left;}
#gnbWrap {padding: 25px 40px 13px;vertical-align: middle;z-index: 9999999;width: 97.5%;height: 46px;}
#gnbWrap ul.gnbMenu li{ display: inline;  text-align: right;}
#gnbWrap ul.gnbMenu a {text-align: right;display: inline-block;padding: 3px;font-size: 15.3px;font-weight: 600;font-family: 'Spoqa Han',Helvetica,Arial,Verdana,Geneva,sans-serif;}
#gnbWrap .gnbMenu ul.SubMenu {display:  none;}
#gnbWrap .gnb a.nav {/* float:  right; */font-size: 23px;color:  #fff;display:  none;padding-top: 10px;}
#gnbWrap ul.gnbMenu li { padding-right: 35px;}
#gnbWrap h1.logo {float: left; display: inline-block;}
#gnbWrap ul.gnbMenu {float: right;height: auto;overflow: hidden;}
#gnbWrap ul.gnbMenu > li {display: inline-block;color: #fff;font-size: 15px;font-weight: 500;cursor: pointer;}
#gnbWrap ul.gnbMenu > li>a{padding: 12px 15px 4px;color: #fff;}
#gnbWrap ul.gnbMenu > li>a:hover, #gnbWrap .gnb a.nav:hover{color:#fff;}
#gnbWrap .gnb {float: right;}
#gnbWrap ul.gnbMenu li i.fa.fa-bars {display: inline-block; font-size: 18px;}

#gnbWrap ul.gnbMenu > li>a {-webkit-transition:4s;transition: 4s;}
#gnbWrap ul.gnbMenu > li>a:hover {-webkit-transition: 0.3s;transition: 0.3s;border-bottom:2px solid rgba(255, 255, 255, 0.64);}
a#goTop{width: 48px;height: 40px;text-align:  center;background: none;margin-right:  10px;border-radius: 44px;vertical-align:  middle;padding-top: 8px;/* animation-name: mymove; *//* animation-duration: 0.7s; *//* animation-timing-function: ease-out; *//* animation-iteration-count: infinite; */opacity: 0.5;}
	
/*#footer */
#footer h1 {float: left;tex;text-align: right;width: 36%;margin-right: 30px;height: 20px;}
#footer span {color: #fff;width: 100%;display: inline-block;position:  absolute;bottom: 20px;text-align: center;}
#footer {/* height: 45px; *//* clear: both; *//* width: 100%; */}
#footer img { width: 100px;}
@-webkit-keyframes ani {　0% {background:black;}　100% {background:white}}

@media (max-width: 1000px){
	#gnbWrap ul.gnbMenu{display:none;}
	#gnbWrap .gnb a.nav {display:  block;position:  absolute;right: 20px;}
	#gnbWrap{text-align:center;background: rgba(0, 0, 0, 0.3411764705882353);margin:  0 auto;/* width: 93%; */padding: 3% 2%;height: 40px;}
	#nav h1.logo{text-align: left;padding-left: 0px;background: #424343;padding: 0px;}
	#nav h1.close{position:absolute;right:0;padding-right: 25px;margin-top: 0px;padding: 0px 4%;}
	#nav .nav2 ul.gnbMenu > li > ul{display:none}
	#gnbWrap h1{    position:  relative;    left: 0px;}
	
}

@media (max-width: 800px){
	#nav .nav2 ul.gnbMenu{margin-top:30px;}
	#nav .nav2 ul.gnbMenu > li > ul{height:  auto;overflow:  hidden;width:  100%;border-bottom: 1px solid rgba(255, 255, 255, 0.37);text-align:  left;padding-bottom: 8px;display: none;}
	#nav .nav2 ul.gnbMenu > li{}
	#nav .nav2 ul.gnbMenu > li > ul > li > a{padding-left:0px;font-size: 17px;}
	#nav .nav2{/* padding-left:0px; *//* margin-left: 0px; */}
}

@media (max-width: 765px){
	#footer h1{display:none;}
	#footer span{width:100%}
	a#goTop{width: 48px;height: 40px;text-align:  center;background: none;margin-right:  10px;border-radius: 44px;vertical-align:  middle;padding-top: 8px;/* animation-name: mymove; *//* animation-duration: 0.7s; *//* animation-timing-function: ease-out; *//* animation-iteration-count: infinite; */opacity: 0.8;}
	
}

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove{
     0%   {bottom:0px;}
    50%  {bottom:5px;opacity:0.8;}
     100% {bottom:0px;opacity:0.9;}
}

@-webkit-keyframes mymove /* Safari and Chrome */{
     0%   {bottom:0px;}
    50%  {bottom:5px;opacity:0.8;}
    100% {bottom:0px;opacity:0.9;}
}