/*
.thin {font-weight: 100; }
.light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.bold {font-weight: 700;}
.bolder {font-weight: 900;}

.t-align-left {text-align: left !important;}
.t-align-right {text-align: right !important;}
.t-align-center {text-align: center !important;}
body.popup-active {overflow:hidden;}
*/

body {/*overflow:inherit;*/}



#wrap { width: 100%;}
#wrap header { 
	width: 100%;
  height: 90px;
  background:#fff;
  border-bottom:1px solid #ddd;
  /*
  position: relative;
  background: transparent;
  */
  
  position:fixed;
  top:0;
  left:0;
    
  z-index: 9999;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wrap header .header-wrap {  /*width: 1200px;*/ width:100%; max-width:1200px; margin: 0 auto; position: relative;}
/*
#wrap header .header-wrap .toggle-gnb {position: absolute; top: 34px; left: 0;}
#wrap header .header-wrap .toggle-gnb a {display: inline-block;  width: 33px;  height: 23px;  background: url("/totalmenu/toggle_icon01.png") no-repeat;}
#wrap header .header-wrap .toggle-gnb.on a {background: url("/totalmenu/toggle_icon02.png") no-repeat;}
*/
#wrap header .header-wrap h1 {margin-top: 15px; float: left;}
#wrap header .header-wrap h1 a img {display: block;}
#wrap header .header-wrap .gnb {float: left; height: 90px; margin-left: 65px; }
#wrap header .header-wrap .gnb ul li {float: left; /*width:130px;*/ width:180px; position: relative;}

#wrap header .header-wrap .gnb ul li.bdline {border-left:1px solid #ddd; margin:36px 0px 0 0; height:16px; width:auto; 
	-webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;}
/*#wrap header .header-wrap .gnb ul li.tmenu:nth-child(n+1) {vertical-align:middle; border-left:1px solid #ddd; margin:0; padding:0px; height:20px;}*/

#wrap header .header-wrap .gnb ul li a { font-family:NotoSanskr, nsr, ³ª´®°íµñ, 'Nanum Gothic', ³ª´®¹Ù¸¥°íµñ, µ¸¿ò; display: block; box-sizing: border-box; text-align: center; color: #333; font-size: 19px; line-height: 90px; font-weight: 400;}
#wrap header .header-wrap .gnb ul li a:hover {color:#4f9734;}
#wrap header .header-wrap .gnb ul li:hover .depth2 {border-top: 4px solid #4f9734; margin-top:-2px;
	-webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  }
#wrap header .header-wrap .gnb ul li .depth2 {    
  display: none;
  position: absolute;
  z-index: 999;
  padding: 20px 0;
  height: 302px !important;
  box-sizing: border-box;
  border-collapse:collapse;
  width: 100%;    
}


/*
#wrap header.on .header-wrap .gnb ul li .depth2 {border-left:1px dashed #ddd;}
#wrap header.on .header-wrap .gnb ul li .depth2:nth-last-child(1) {border-right:1px dashed #ddd;}
*/

#wrap header .header-wrap .gnb ul li .depth2 ul li {float: none;}
#wrap header .header-wrap .gnb ul li .depth2 ul li a {
  font-size: 16px;
  line-height: normal;  
  color: #666;
  font-weight: 400;
  padding: 8px 0;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wrap header .header-wrap .gnb ul li .depth2 ul li a:hover {
  color: #4f9734;
  font-weight: 400;
}
#wrap header .header-wrap .gnb ul li.active .depth2 {
  background: #f8f8f8;
}

#wrap header .header-wrap .gnb ul li.active .depth2 ul li a {
  border-bottom: none;
}

#wrap header .cover {display:none; position:fixed;  top:90px; left:0;  border-top:none; 
	background-color:rgba(255,255,255,0.9);
	/*background:#fff;*/
	 width:100%; height:301px; border-bottom:1px solid #ddd;}

#wrap header .cover .brandtitle_wrap {max-width:1200px; margin:0 auto; text-align:left; display:block; position:relative;}
#wrap header .cover .brandtitle_wrap .brandtbox {width:345px; height:300px; padding:40px 25px 0; display:inline-block; background-color:rgba(255,255,255,0.6); }
#wrap header .cover .brandtitle_wrap .brandtbox p {font-size:21px; color:#000; font-weight:400; line-height:1.5; }
  
#wrap header.on {background: #fff;}
#wrap header.on .header-wrap .toggle-gnb a { background: url("/images/common/toggle_icon02.png") no-repeat;}
#wrap header.on .header-wrap .gnb ul li a { color: #000;}

#wrap header.on .cover {
  border-top: 1px solid #ebebeb;
  /*background: #fff;*/
  background-color:rgba(255,255,255,0.9);
}
#wrap header.fix {
  position: fixed;
  top: 0;
  left: 0;
}
#wrap.page header {
  border-bottom: 1px solid #92979e;
}

.scroll-top {
  transition: transform .35s;
  -o-transition: transform .35s;
  -moz-transition: transform .35s;
  -webkit-transition: transform .35s;
  position: fixed;
  right: 40px;
  bottom: 193px;
  background: rgba(163, 41, 88, 0.7);
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  z-index: 9999;
  display: none;
}







/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  
  //CSS
  
}




/* 
  ##Device = Laptops, Desktops
  ##Screen = 1025px ¿¡¼­ 1280px »çÀÌ
*/
@media (min-width: 1025px) and (max-width: 1280px) {

#wrap header .header-wrap h1 {margin-top: 25px; padding-left:30px; float: left;}
#wrap header .header-wrap h1 a img {display: block; height:40px;}

#wrap header .header-wrap .gnb {float: left; height: 90px; margin-left: 25px; }
#wrap header .header-wrap .gnb ul li {float: left; /*width:130px;*/ width:180px; position: relative;}
  
}




/* 
  ##Device = Tablets, Ipads ¼¼·Î(portrait)
  ##Screen = 768px ¿¡¼­ 1024px »çÀÌ
*/
@media (min-width: 768px) and (max-width: 1024px) {
	
#wrap header { height: 50px; background:#fff; border-bottom:1px solid #ddd; position:fixed; top:0; left:0; z-index: 9999; 
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wrap header .header-wrap {  width:100%; max-width:1200px; margin: 0 auto; position: relative;}
#wrap header .header-wrap h1 {margin-top: 15px; padding-left:20px; float: left;}
#wrap header .header-wrap h1 a img {display: block; height:30px;}
#wrap header .header-wrap .gnb {float:left; height: 50px; margin-left: 25px; }

}



/* 
  ##Device = Tablets, Ipads °¡·Î(landscape)
  ##Screen = 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
#wrap header { height: 50px; background:#fff; border-bottom:1px solid #ddd; position:fixed; top:0; left:0; z-index: 9999; 
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wrap header .header-wrap {  width:100%; max-width:1200px; margin: 0 auto; position: relative;}
#wrap header .header-wrap h1 {margin-top: 15px; padding-left:20px; float: left;}
#wrap header .header-wrap h1 a img {display: block; height:30px;}
#wrap header .header-wrap .gnb {float:left; height: 50px; margin-left: 25px; }
  
}







/* 
  ##Device = Low Resolution Tablets, Mobiles  ³·Àº ÇØ»óµµ, ¸ð¹ÙÀÏ °¡·Î(Landscape)
  ##Screen = 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  
#wrap header { height: 50px; background:#fff; border-bottom:1px solid #ddd; position:fixed; top:0; left:0; z-index: 9999; 
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wrap header .header-wrap {  width:100%; max-width:1200px; margin: 0 auto; position: relative;}
#wrap header .header-wrap h1 {margin-top: 15px;  padding-left:20px; float: left;}
#wrap header .header-wrap h1 a img {display: block; height:30px;}
#wrap header .header-wrap .gnb {float:left; height: 50px; margin-left: 65px; }
  
}








/* 
  ##Device = Most of the Smartphones Mobiles ¸ð¹ÙÀÏ ¼¼·Î(Portrait)
  ##Screen = B/w 320px to 479px
	@media (min-width: 320px) and (max-width: 480px) {
*/
@media (min-width: 220px) and (max-width: 480px) {
#wrap header { height: 50px; background:#fff; border-bottom:1px solid #ddd; position:fixed; top:0; left:0; z-index: 9999; 
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wrap header .header-wrap {  width:100%; max-width:1200px; margin: 0 auto; position: relative;}
#wrap header .header-wrap h1 {margin-top: 10px;  padding-left:10px;  float: left;}
#wrap header .header-wrap h1 a img {display: block; height:30px;}
#wrap header .header-wrap .gnb {float:left; height: 50px; margin-left: 65px; }
}