#site3.pc .container{margin-top:0px !important;}
#site3.pc .subPage .container{margin-top:113px !important;}

/*****************************/
#site3 .topbarbg{height:113px;padding-top:18px;border-bottom:1px solid rgba(255,255,255,0.1);}
#site3 .topbarbg{transition: background 0.3s ease-out; background-color:rgba(0,0,0,0.2);color:white;}
#site3 .topbarbg.on{background-color:#262222;}
#site3 .topbarbg.scrolled{background-color:rgba(0,0,0,0.9);transition: background 0.5s ease-out;}

#site3 .subPage .topbarbg.on{background-color:white;color:#283453;}
#site3 .subPage .topbarbg{transition: background 0.3s ease-out;background-color:white;color:#283453;}
#site3 .subPage .topbarbg.scrolled{background-color:white;transition: background 0.5s ease-out;}

/*1080 >= */
@media (min-width: 1080px){
	/*****************************/
	.wsmenu {width:100%;max-width:none;}
	#site3 .wsmenu {width: 100%;max-width: none;}
	#site3  .wsmenu>.wsmenu-list .wsmenuCon > .menu{margin-top:0px;}

	.wsmenu>.wsmenu-list{margin:0px auto;background-color:transparent;box-shadow: 0px 2px 5px rgba(0,0,0,0.1);}

	/*
	.subPage .wsmenu>.wsmenu-list{background-color:white;}
	*/
	.wsmenu>.wsmenu-list>li{ position:relative;vertical-align:middle;}
	.wsmenu>.wsmenu-list>li>a{padding:0px;}

	.wsmenu>.wsmenu-list .wsmenuCon{width:1200px;min-width:1200px;height:95px;display:flex;align-items:center;margin:0px auto;}
	.wsmenu>.wsmenu-list .wsmenuCon > .logo{width:310px;margin-top:-10px;text-align:left;}/*175*/

	.wsmenu>.wsmenu-list .wsmenuCon > .menu{width:calc(100% - 310px);margin-bottom:-8px; display:flex;align-items:center;justify-content:space-between;}
	.wsmenu>.wsmenu-list .wsmenuCon > .menu li{width:14.28%;text-align:center;color: white;color: #fff;font-family:'Noto Sans KR';font-size:17px;font-weight:400;letter-spacing:0em;}
	/*
	.wsmenu>.wsmenu-list .wsmenuCon > .menu li{width:16.66%;}
	*/
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon{height:auto;align-items:flex-start;padding-bottom:30px;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li .texter(1){padding-top:10px;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon .logo{text-align:center;line-height:100px;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li{font-size:16px;width:14.28%;padding-top: 2px;}
	/*
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li{width:16.66%;}
	*/
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li a{font-size:16px !important;letter-spacing:-0.05em;}

	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li{padding-top: 2px;}


	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu{align-items:flex-start;color:white;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li .header{text-align:center;font-size:18px;line-height:100px;margin-bottom:0px;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li a{color:#171717;}

	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li .texter{text-align:center;}

	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li{position:relative;}

	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li .texter a{display:inline-block;padding:10px 0px;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li:after{display:block;content:"";position:absolute;top:0px;left:50%;width:0%;height:3px;margin:0px;background-color:#283453;transition: all 0.5s;}
	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon > .menu li:hover:after{width:70%;left:15%;}

	.wsmenu>.wsmenu-list .wsmegamenu .wsmenuCon .hline{display:block;position:absolute;top:95px;left:0px;width:100%;height:1px;background-color:#ccc;}


	/*
	.subPage .wsmenu>.wsmenu-list .wsmenuCon > .menu li{color:black}
	*/

	.wsmenu>.wsmenu-list wsmegamenu.wsmenuCon > .menu li .texter{color:black;}

	.wsmenu .wsmegamenu{width:100%;}
	.wsmenu>.wsmenu-list>li>.wsmegamenu{top:95px;padding:0px;}

	.wsmenu>.wsmenu-list>li>a.active i {
	  color: #111;
	}

	.wsmenu>.wsmenu-list>li>a:hover i {
	  color: #111;
	}

	.wsmenu>.wsmenu-list>li>a.active {
	  color: #111;
	}

	.wsmenu>.wsmenu-list>li:hover>a {
	  background-color: transparent;
	  color: rgba(255,255,255,0.9);
	}


	/* ================== Desktop Drop Down Menu CSS ================== */
	.wsmenu>.wsmenu-list>li>ul.sub-menu { top: 50px; }
	.wsmenu>.wsmenu-list>li>ul.sub-menu.sub-menu-stop{min-width:260px;margin-left:-130px;}

	.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu>li>a>i {
	  margin-left: 12px;
	}
	.wsmenu>.wsmenu-list>li>a{border-right:none;}
}
/*1080 >= */

/*heder top */
.subBg{width:100%;height:175px;display:flex;align-items:center;justify-content:center;background:url('/img/pages/intro_bg.jpg') no-repeat center center;background-size:cover;}
.subBg .subTitle > div{text-align:center;color:white;}	
.subBg div.stitle{font-size:28px;font-weight:400;}
.subBg div.btitle{font-size:40px;line-height:56px;font-weight:400;}

#subNavCon{width:100%;border-bottom:1px solid #ccc;}



/*menu bar*/
/* 
green: #3FAF82

*/

.mb_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95px;
  height: 95px;
}

.mb_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  cursor: pointer;
}

.mb_btn span {
  display: block;
  width: 100%;
  border-radius: 0px;
  height: 5px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.mb_btn span + span {
  margin-top: 14px;
}
.mb_btn.active span + span {
  margin-top: 17px;
}

.mb_btn.active span:nth-child(1) {
  animation: ease .7s mb_top forwards;
}

.mb_btn.not-active span:nth-child(1) {
  animation: ease .7s mb_top-2 forwards;
}

.mb_btn.active span:nth-child(2) {
  animation: ease .7s mb_scaled forwards;
}

.mb_btn.not-active span:nth-child(2) {
  animation: ease .7s mb_scaled-2 forwards;
}

.mb_btn.active span:nth-child(3) {
  animation: ease .7s mb_bottom forwards;
}

.mb_btn.not-active span:nth-child(3) {
  animation: ease .7s mb_bottom-2 forwards;
}

@keyframes mb_top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 22px;
    transform: rotate(45deg);
  }
}

@keyframes mb_top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes mb_bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}

@keyframes mb_bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes mb_scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes mb_scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}