@charset "utf-8";
/* CSS Document */
header, a, #allmenu, .sns_box, .tel_box, #logo, .r_go, .top_smenu{transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}

/* 본문 상단공간 */

#headercss.large .top_sp{ height: 120px; float: left; width: 100%}
#headercss.small .top_sp{ height: 80px; float: left; width: 100%}

/*---전체 공백설정----*/
/**** pc ****/
@media only all and (min-width:1801px) {
#head_home {width:100% ; display:flex; z-index:9999;  padding: 0vw 10vw; box-sizing: border-box}
#head_home_m { display:none}
#head_home .inner {  display: table;}
#head_home .inner .toplogo{ float:left;  display: table-cell;
 vertical-align: middle;text-align: center; }
	
}
/**** pc ****/
@media all and (max-width:1800px) and (min-width:1367px) {
#head_home {width:100% ; display:flex; z-index:9999;  padding: 0vw 5vw; box-sizing: border-box}
#head_home_m { display:none}
#head_home .inner {  display: table;}
#head_home .inner .toplogo{ float:left;  display: table-cell;
 vertical-align: middle;text-align: center; }
	
}
/**** 테블릿 ****/
@media all and (max-width:1366px) and (min-width:1081px) {
#head_home {width:100% ; float:left; z-index:99999999999999;  padding: 0vw 2vw; }
#head_home_m { display:none}
#head_home .inner .toplogo{ float:left}
}
/**** 테블릿 ****/
@media all and (max-width:1080px) and (min-width:769px) {
#head_home {display:none}
#head_home {width:100% ; float:left; background:#231e20; height:43px;   position:fixed ; z-index:9999}
#head_home .inner{width:100% ;  margin:0px auto; position:relative;left:0px; position:relative}

#head_home_m {width:100% ; float:left; background:#231e20;  position:fixed ; z-index:99999!important ; display: block; top: 0px; left: 0px}
	
#head_home_m .m_head{width:100% ; float:left;background:#231e20;  height:55px; position:relative; text-align:center; box-sizing:border-box; padding:10px 0px}
#head_home_m .m_head .toplogo{width:100% ; float:left;  text-align:center; }
#head_home_m .m_head .toplogo a{ height:28px; margin-top:20px}
#head_home_m .m_head .toplogo img{ height: 34px}
#head_home_m .m_head .icon1{ position:absolute; top:15px; left:10px;}
#head_home_m .m_head .icon1 img{ width:35px; color:#fff}
#head_home_m .m_head .icon1 i{color:#fff}	
#head_home_m .m_head .icon2{ position:absolute; top:10px; left:40px;}
#head_home_m .m_head .icon2 img{ width:30px}
#head_home_m .m_head .icon3{ position:absolute; top:10px; right:40px;}
#head_home_m .m_head .icon3 img{ width:30px}
#head_home_m .m_head .icon4{ position:absolute; top:10px; right:7px; z-index:9999999999999999999999999999999999; color:#fff}
#head_home_m .m_head .icon4 i{ color:#fff}
#head_home_m .m_head .icon4 img{ width:30px;}
#head_home_m .m_head .icon_left{ position:absolute; top:10px; left:5px;}
#head_home_m .m_head .icon_left img{ width:28px}
	
	
}
/**** 모바일 ****/
@media only all and (max-width:1081px) {
#head_home {display:none}
#head_home {width:100% ; float:left; background:#231e20; height:43px;   position:fixed ; z-index:9999}
#head_home .inner{width:100% ;  margin:0px auto; position:relative;left:0px; position:relative}

#head_home_m {width:100% ; float:left; background:#231e20;  position:fixed ; z-index:99999!important ; display: block; top: 0px; left: 0px}
	
#head_home_m .m_head{width:100% ; float:left;background:#231e20;  height:55px; position:relative; text-align:center; box-sizing:border-box; padding:10px 0px}
#head_home_m .m_head .toplogo{width:100% ; float:left;  text-align:center; }
#head_home_m .m_head .toplogo a{ height:28px; margin-top:20px; width:132px }
#head_home_m .m_head .toplogo img{ height: 34px}
#head_home_m .m_head .icon1{ position:absolute; top:15px; left:10px;}
#head_home_m .m_head .icon1 img{ width:35px; color:#fff}
#head_home_m .m_head .icon1 i{color:#fff}	
#head_home_m .m_head .icon2{ position:absolute; top:10px; left:40px;}
#head_home_m .m_head .icon2 img{ width:30px}
#head_home_m .m_head .icon3{ position:absolute; top:10px; right:40px;}
#head_home_m .m_head .icon3 img{ width:30px}
#head_home_m .m_head .icon4{ position:absolute; top:10px; right:7px; z-index:9999999999999999999999999999999999; color:#fff}
#head_home_m .m_head .icon4 i{ color:#fff}
#head_home_m .m_head .icon4 img{ width:30px;}
#head_home_m .m_head .icon_left{ position:absolute; top:10px; left:5px;}
#head_home_m .m_head .icon_left img{ width:28px}
	

}

/* PC */


/**** pc ****/
@media only all and (min-width:1081px) {
#headercss {	position: fixed;	left:0;	top:0;	right:0;	height:65px;	background-color:#231e20;	z-index:9999; }
#headercss.large {	position: fixed;	left:0;	top:0;	right:0;	height:65px;	background-color:#231e20;}
#headercss.small {	position: fixed;	left:0;	top:0;	right:0;	height:65px;	background-color:#231e20;}	


		
}

/**** 테블릿 ****/
@media all and (max-width:1080px) and (min-width:769px) {
#headercss {	position: fixed;	left:0;	top:0;	right:0;	height:55px;	background-color:#231e20;	z-index:9999; }
#headercss.large {	position: fixed;	left:0;	top:0;	right:0;	height:55px;	background-color:#231e20;}
#headercss.small {	position: fixed;	left:0;	top:0;	right:0;	height:55px;	background-color:#231e20;}	

}
/**** 모바일 ****/
@media only all and (max-width:768px) {
#headercss { width: 100%; float: left	}	
}



/**** pc ****/
@media only all and (min-width:1301px) {
#allmenu {	position:absolute;	top:0px;	left:50%; margin-left: -250px; z-index:999999999999999999999999999999999999; }
#headercss.large #allmenu {	position:absolute;	top:0px;	left:50%;  margin-left: -250px; z-index:999999999999999999999999999999999999; }
#headercss.small #allmenu {	position:absolute;	top:-15px;	left:50%;  margin-left: -250px; z-index:999999999999999999999999999999999999; }
	
.r_go {position:absolute; top:40px; right:2vw;  z-index:99999999999999999999999999999999;  }	
.r_go img{ float: left; margin-left: 20px }	
.r_go .golome{float: right; ;  margin-top:10px; margin-left: 20px }
.r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px}
		
#headercss.large .r_go {position:absolute; top:40px; right:2vw;  z-index:99999999999999999999999999999999;  }
#headercss.large .r_go img{ float: left; margin-left: 20px ; margin-left: 20px}
#headercss.large .r_go .golome{float: right;  margin-top: 10px }
#headercss.large .r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px; margin-top: 20px}
	
#headercss.small .r_go {position:absolute; top:20px; right:2vw;   z-index:9999; }
#headercss.small .r_go img{ float: left; margin-left: 20px }
#headercss.small .r_go .golome{float: right;  margin-top: 10px; margin-left: 20px  }
#headercss.small .r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px}
	
}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:769px) {
#allmenu {	position:absolute;	top:0px;	left:25%;  z-index:999999999999999999999999999999999999; }
#headercss.large #allmenu {	position:absolute;	top:0px;	left:25%; z-index:999999999999999999999999999999999999; }
#headercss.small #allmenu {	position:absolute;	top:0px;	left:25%; z-index:999999999999999999999999999999999999; }
	
.r_go {position:absolute; top:40px; right:2vw;  z-index:99999999999999999999999999999999;  }	
.r_go img{ float: left; }	
	
#headercss.large .r_go {position:absolute; top:40px; right:2vw;  z-index:99999999999999999999999999999999;  }
#headercss.large .r_go img{ float: left;  }
#headercss.large .r_go .golome{float: right;  margin-top: 10px }
#headercss.large .r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px; margin-top: 20px}
		
	
#headercss.small .r_go {position:absolute; top:20px; right:2vw;   z-index:9999; }
#headercss.small .r_go img{ float: left;  }
#headercss.small .r_go .golome{float: right;  margin-top: 10px; margin-left: 20px  }
#headercss.small .r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px}
	
}
/**** 모바일 ****/
@media only all and (max-width:768px) {
#allmenu {	position:absolute;	top:0px;	left:250px; z-index:999999999999999999999999999999999999; }
#headercss.large #allmenu {	position:absolute;	top:0px;	left:250px; z-index:999999999999999999999999999999999999; }
#headercss.small #allmenu {	position:absolute;	top:-25px;	left:250px; z-index:999999999999999999999999999999999999; }
	
#headercss.large .r_go {position:absolute; top:10px; right:2vw;  z-index:9999;  }
#headercss.large .r_go img{ float: left; margin-left: 20px }
#headercss.large .r_go .golome{float: right;  margin-top: 10px }
#headercss.large .r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px; margin-top: 20px}	
	
#headercss.small .r_go {position:absolute; top:10px; right:2vw;   z-index:9999; }
#headercss.small .r_go img{ float: left; margin-left: 20px }
#headercss.small .r_go .golome{float: right;  margin-top: 10px; margin-left: 20px  }
#headercss.small .r_go .golome a{ padding: 5px 10px; background-color: #b18e6b; color: #fff; font-size: 14px; border-radius: 30px}
	
	
}





/* PC 오른쪽 글로벌 메뉴  */
.gb_box {	position:absolute;	top:0px;	right:50px; z-index:999999999999999999; height:80px; box-sizing:border-box; width:370px}
.gb_box .lang_go{ width:190px;  float: left; line-height:70px; box-sizing:border-box;  }
.gb_box .contact{ width:90px;  float: left; line-height: 70px; border-left: 1px solid #ccc; text-align: center; box-sizing: border-box}
.gb_box .contact i{ color: #666; font-size: 30px; line-height: 70px; box-sizing:border-box;  }
.gb_box .allmenu{ width:90px;  float: left; line-height: 70px; border-left: 1px solid #ccc; border-right: 1px solid #ccc ; text-align: center; box-sizing: border-box}
.gb_box .allmenu i{ color: #666; font-size: 30px; line-height: 70px ; box-sizing:border-box; }


/**** pc ****/

/**** pc ****/
@media only all and (min-width:1301px) {
		
.sns_box{ position: absolute; right:182px; top: 40px}
.sns_box ul li{ float: left; margin-right: 10px}	
.tel_box{ position: absolute; right:0px; top: 40px}
	
#headercss.large .sns_box{ position: absolute; right:182px; top: 40px}
#headercss.large .sns_box ul li{ float: left; margin-right: 10px}	
#headercss.large .tel_box{ position: absolute; right:0px; top: 40px}
	
#headercss.small .sns_box{ position: absolute; right:182px; top: 20px}
#headercss.small .sns_box ul li{ float: left; margin-right: 10px}	
#headercss.small .tel_box{ position: absolute; right:0px; top: 20px}
}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:769px) {
		
.sns_box{ position: absolute; right:10px; top: 25px}
.sns_box ul li{ float: left; margin-right: 10px}	
.sns_box img{ width: 35px !important}	
.tel_box{ position: absolute; right:10px; top: 60px}
.tel_box img{  width: 140px}	
	
#headercss.large .sns_box{ position: absolute; right:10px; top: 20px}
#headercss.large .sns_box ul li{ float: left; margin-right: 10px}	
#headercss.large .sns_box img{ width: 35px !important}	
	
#headercss.large .tel_box{ position: absolute; right:10px;  top: 60px}
	
#headercss.small .sns_box{ position: absolute; right:10px; top: 10px}
#headercss.small .sns_box ul li{ float: left; margin-right: 10px}	
#headercss.small .sns_box img{ width: 35px !important}	
	
#headercss.small .tel_box{ position: absolute; right:10px;  top: 40px}
}



/**** 모바일 ****/
@media only all and (max-width:768px) {
.sns_box{  display: none}
.sns_box ul li{ float: left; margin-right: 10px}	
.tel_box{  display: none}
}





.menu {
  position: relative;
  height: 80px;
  width: auto; 
}
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
.menu > ul {
  position: relative;
  display: block;
  width: 100%;
  z-index: 500; margin-top: -20px; display:flex; flex-wrap: wrap; 
}
.menu:after, .menu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.menu.align-right > ul > li {
  float: left; 
}
.menu.align-center ul {
  text-align: center;
}
.menu.align-center ul ul {
  text-align: left;
}
.menu > ul > li {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0; 
}
.menu > ul > #menu-button {
  display: none;
}
.menu ul li a {
  display: block;
  text-decoration: none; padding: 50px 15px; background-color: rgba(255, 255, 255, 0);
}

.menu > ul > li > a {
	font-size: 16px ; line-height:20px;  font-weight: 400; ;font-family:'Noto Sans Korean', 'Noto Sans KR'; color: #333 !important; float: left ; display: block;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;  line-height: 50px
}
.menu > ul > li.sub > a {
  padding-right: 0px;
}
.menu > ul > li:hover > a {
 color:#ee9b3a !important;
}
.menu > ul > li > a.on {
 color: #ee9b3a!important;
}
.menu li.sub::after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.menu > ul > li.sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #7a8189;
}
.menu > ul > li:hover::after {
  border-top-color: #ffffff; 
}
.menu ul ul {
  position: absolute;
  left: -9999px;
  top: 105px !important;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}

.menu ul ul ul {
  top: 37px;
  padding-left: 5px; 
}
.menu ul ul li {
  position: relative; width: 100px!important; padding-left:10px 
}
.menu > ul > li:hover > ul {
  left: auto;
  top: 40px;
  opacity: 1;  
}
.menu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
  opacity: 1; 
}
.menu ul ul li:hover > ul {
  left:0px;
  top: 0;
  opacity: 1;
}
.menu.align-right ul ul li:hover > ul {
  left: auto;
  right: 60px;
  top: 0;
  opacity: 1;
  padding-right: 5px;
}
.menu ul ul li a {
 width: 160px!important; 
  padding: 15px 10px;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
.menu.align-right ul ul li a {
  text-align: right;
}
.menu ul ul li:hover > a {
  background: #ee9b3a;
  color: #FFF !important;
}
.menu ul ul li:last-child > a, .menu ul ul li.last > a {
  border-bottom: 0;
}
.menu > ul > li > ul::after {
  content: '';
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #333;
  position: absolute;
  top: -12px;
  left: 50px;
}
.menu.align-right > ul > li > ul::after {
  left: auto;
  right: 30px;
}
.menu ul ul li.sub::after {
  border: 4px solid transparent;
  border-left-color: #333333;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
.menu.align-right ul ul li.sub::after {
  border-left-color: transparent;
  border-right-color: #333333;
  right: auto;
  left: 10px;
}
.menu ul ul li.sub:hover::after {
  border-left-color: #ffffff;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.menu.align-right ul ul li.sub:hover::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
  left: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


.quick_mymenu .headtop{ width: 100%; height: 60px; float: left; background-color: #000; color: #fff; box-sizing: border-box; text-align: center; line-height: 60px; }

.quick_mymenu .headtop i{color: #fff; position: absolute; top: 15px; right: 10px; width: 30px; font-size:25px}

.quick_mymenu .headtop2{ width: 100%; height: 60px; float: left; background-color: #000; color: #fff; box-sizing: border-box; padding-left: 20px;  line-height: 60px}
.quick_mymenu .headtop2 i{color: #fff; position: absolute; top: 15px; right: 10px; width: 30px; font-size:25px}

.quick_sns{float: left; width: 80%; padding: 20px 20px;}
.quick_sns img{ float: left !important; margin-right: 5px }

.quick_search{ position: relative;padding: 10px; box-sizing: border-box}
.quick_search input{float: left; width: 100%; border-radius: 0px; background-color: #333; border: none; height: 35px; line-height: 35px; padding: 0px 40px 0px 10px; box-sizing: border-box; color: #fff; position: relative; margin-bottom: 10px}
.quick_search i{color: #fff; font-size: 26px; position: absolute; right: 16px; top: 65px; z-index: 1; width: 25px; height: 25px; z-index: 9}




.quick_rightmenu{float: left; width: 100%; background-color: #fff }
.quick_rightmenu ul {float: left; width: 100%; }

.quick_rightmenu ul li{float: left; width: 100%; padding: 15px 10px 15px 50px; box-sizing: border-box; color: #333; position: relative; border-bottom: 1px solid #ccc}
.quick_rightmenu ul li i{ position: absolute; left: 15px; top: 15px; font-size: 20px}

.quick_rightmenu2{float: left; width: 100%; background-color: #fff }
.quick_rightmenu2 ul {float: left; width: 100%; }

.quick_rightmenu2 ul li{float: left; width: 100%; padding: 15px 10px 15px 15px; box-sizing: border-box; color: #333; position: relative; border-bottom: 1px solid #ccc}
.quick_rightmenu2 ul li img{ margin-right: 10px}
.quick_rightmenu2 ul li i{ position: absolute; left: 15px; top: 15px; font-size: 20px}