/*
.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;*/}

.fixbackgroundcolor {background:#fff;}

#wrap { width: 100%;  background:url("/images/nav/nav_top_bg.jpg") no-repeat center top;}
#wrap header { 
  width: 100%;
  height: 114px;
  /*background:none;*/
  border-bottom:0px solid #000;
  background-color:#fff;
  background:url("/images/nav/nav_top_bg.jpg") no-repeat center top;
  /*
  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:1400px; margin: 0 auto; position: relative; background:#fff;}
/*
#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: 18px; float: left;}
#wrap header .header-wrap h1 a img {display: block; width:100%; max-width:135px;}
#wrap header .header-wrap .gnb {float: left; height: 60px; margin-top:30px; margin-left:50px;}
#wrap header .header-wrap .gnb ul li {float: left; width:220px; position: relative;}

#wrap header .header-wrap .gnb ul li.bdline {display:none;
	border-left:1px solid #ddd; margin:40px 10px 0 0; height:13px; 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:nth-child(3) {width:200px;}*/

#wrap header .header-wrap .gnb ul li a {color: #fff; font-size: 19px; line-height: 82px; font-weight: 400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; display: block; box-sizing: border-box; text-align: center;}
#wrap header .header-wrap .gnb ul li a:hover {color:#0276b8;}
#wrap header .header-wrap .gnb ul li:hover .depth2 {border-top: 4px solid #0276b8; margin-top:-1px;
  /*
  -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 25px 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: #e8e8e8;*/
  color: #333;
  font-weight: 400;
  padding: 6px 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: #000;
  font-weight: 400;
}
#wrap header .header-wrap .gnb ul li.active .depth2 {
	/*background: #575e66;*/
	background: #fff;
}

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

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

#wrap header .cover .brandtitle_wrap {max-width:1400px; margin:0 auto; text-align:left; display:block; position:relative; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;}
#wrap header .cover .brandtitle_wrap .brandtbox {width:345px; height:299px; padding:25px 25px 0; display:inline-block; 
			/*background-color:rgba(54,58,62,0.6);*/ 
			background-color:rgba(255,255,255,1); 			
			word-break:keep-all; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;}
#wrap header .cover .brandtitle_wrap .brandtbox h1 {text-align:center; padding:0 0 15px 0; margin:0; width:100%;}
#wrap header .cover .brandtitle_wrap .brandtbox h1 img {width:100%; max-width:230px;}
#wrap header .cover .brandtitle_wrap .brandtbox p {width:100%; text-align:center; font-size:18px; color:#333; font-weight:400; line-height:1.5; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;}
#wrap header .cover .brandtitle_wrap .brandtbox p.t1 {font-size:20px; font-weight:bold; color:#38479c;}
#wrap header .cover .brandtitle_wrap .brandtbox p.t2 {font-size:18px; font-weight:400;}
  
#wrap header.on {/*background: #363a3e;*/ 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: #f5f5f5;*/color:#000;}

#wrap header.on .cover {
  border-top: 1px solid #000;
  /*background: #fff;*/
  /*
  background-color:rgba(54,58,62,0.9);
  */
  background-color:rgba(255,255,255,1);
}
#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;
}




.header-headmenu {display:none;                width:1300px; margin: 0 auto; position: relative; text-align:right;}
.header-headmenu ul.myinfomation {margin:4px 95px 0 0; display:block; position:relative;list-style:none;}
.header-headmenu ul.myinfomation li {color:#fff;padding:6px 5px 0 3px; display:inline-block; position:relative; list-style:none;}
.header-headmenu ul.myinfomation li::after {font-size:8px; color:#ddd; padding-left:10px; content:"|"}
.header-headmenu ul.myinfomation li:last-child::after {content:""}
.header-headmenu ul.myinfomation li a:link,
.header-headmenu ul.myinfomation li a:visited,
.header-headmenu ul.myinfomation li a:active {color:#efefef;}
.header-headmenu ul.myinfomation li a:hover {color:#fff;}




/* ======================================================= */
/* ======================================================= */
/* language select : S                                     */
/* ======================================================= */
.utill_menu {float:left; display:inline-block; padding:10px 0; margin-top:47px;}
.utill_menu .inner_area {padding:7px 15px; background:#fff; border:1px solid #d9d9d9; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; overflow:hidden; display:block; position:relative;}
.utill_menu .inner_area a {color:#999; padding:2px 6px; font-size:13px; font-weight:normal; font-family:Poppins,NotosansKr,nsr;}
.utill_menu .inner_area a:hover {color:#3777d7 !important;}
@media (min-width: 1025px) and (max-width: 1280px) { }
@media (min-width: 768px) and (max-width: 1024px) {
	.utill_menu {float:right; margin-top:6px; margin-right:60px;}
	.utill_menu .inner_area {padding:3px 12px 4px 12px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;}
	.utill_menu .inner_area a {padding:0px 5px; font-size:12px;}
}
@media (min-width: 481px) and (max-width: 767px) {
	.utill_menu {float:right; margin-top:6px; margin-right:60px;}
	.utill_menu .inner_area {padding:3px 12px 4px 12px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;}
	.utill_menu .inner_area a {padding:0px 5px; font-size:12px;}
}
@media (min-width: 200px) and (max-width: 766px) {
	.utill_menu {float:right; margin-top:5px; margin-right:60px;}
	.utill_menu .inner_area {padding:3px 12px 4px 12px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;}
	.utill_menu .inner_area a {padding:0px 5px; font-size:12px;}
}
/* ======================================================= */
/* language select : E                                     */
/* ======================================================= */
/* ======================================================= */





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




/* 
  ##Device = Laptops, Desktops
  ##Screen = 1025px 에서 1280px 사이
*/
@media (min-width: 1025px) and (max-width: 1280px) {

#wrap header .header-wrap h1 { padding-left:30px;}
#wrap header .header-wrap h1 a img {width:auto; height:75px;}

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

#wrap .header-headmenu {width:100%;}
.header-headmenu ul.myinfomation {margin:4px 2% 0 0; display:block; position:relative; list-style:none;}

}




/* 
  ##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: 10px; padding-left:20px; float: left;}
#wrap header .header-wrap h1 a img {display: block;  width:auto; height:30px;}
#wrap header .header-wrap .gnb {float:left; height: 50px; margin-left: 25px; }

#wrap .header-headmenu {display:none;}
}



/* 
  ##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: 10px; padding-left:20px; float: left;}
#wrap header .header-wrap h1 a img {display: block; height:30px;}
#wrap header .header-wrap .gnb {float:left;  width:auto; height: 50px; margin-left: 25px; }

#wrap .header-headmenu {display:none;}
}







/* 
  ##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: 10px;  padding-left:20px; float: left;}
#wrap header .header-wrap h1 a img {display: block; width:auto; height:30px;}
#wrap header .header-wrap .gnb {float:left;   height: 50px; margin-left: 65px; }
#wrap .header-headmenu {display:none;}
}








/* 
  ##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 {background-position:center -6px;}
#wrap header { height: 50px; 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: 7px;  padding-left:10px;  float: left;}
#wrap header .header-wrap h1 a img {display: block; width:auto; height:38px;}
#wrap header .header-wrap .gnb {float:left; height: 50px; margin-left: 65px; }

#wrap .header-headmenu {display:none;}
}







.menukkk .btnarea {display:block; position:relative; width:100%; margin:0; padding:0; border-bottom:1px solid #ddd;}
.menukkk .btnarea  div {display:inline-block; width:22%; margin:0 auto 0 -1px; padding:10px 0; text-align:center; border:0 0 0 0; border-right:0px solid #ddd;  border-bottom:0px solid #ddd; border-collapse:collapse;}
.menukkk .btnarea  div a { color:#333; 
	font-size:12px; font-weight:400; padding:3px 6px; vertical-align:middle; text-align:center; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:1px solid #ddd;
	}