@charset "utf-8";

/* layout */
.inner {width:100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto; }
.m-inner {	width:1600px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }

#wrap { font-size: 1.6rem; overflow: hidden; }

/* 타블렛 가로 */
@media all and (max-width:1599px) {
	.m-inner {	width:96%;}
}
@media all and (max-width:1499px) {
	.s-inner {	width:96%;}
}

@media all and (max-width:1280px) {

}

@media all and (max-width:976px) {
  html { font-size: 60% !important; }
}

@media all and (max-width:767px) {
  html { font-size: 0.55rem !important; }
}

@media all and (max-width:480px) {
  html { font-size: 2.2vw !important; }

 .m-inner {	width:90%;}
 .s-inner {	width:90%;}
}






/*Header*/
#header { position:fixed; width:100%; box-sizing:border-box; z-index:300; margin: 0 auto; background:#FFF;}

#header .hd_bx { line-height:110px;  }
#header .hd_mbx { display: none; width:70px; height:70px; }
#header .inner { display: flex; align-items: center; justify-content: space-between}


#header #logo {  font-size: 0;  }
#header #logo a { display: block;  }
#header #logo img { display: inline-block; vertical-align:middle;}


#gnb_pc {  }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li:nth-child(2) > ul > li.submenu5 {display:none} /* 제품소개 - 제품소개 */
#gnb_pc > ul > li > div > a { display:block; font-size:2.0rem; position:relative; width: auto; padding: 0 43px; cursor: pointer; font-weight: 600; color:#512d1e;  }
#gnb_pc > ul > li > ul { display: none; width:180px; background:rgba(236,165,29, 1); position: absolute; top: 110px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a { display:block; width:100%; color:#fff; padding:1em 0.7em; line-height: 1.4em;  border-bottom:1px solid rgba(255,255,255,0.2); box-sizing: border-box; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li > ul > li > a:hover { background: #512d1e; }




#gnb_mo { display:none;  position:fixed; top:0; right:0; width:100%; height:100%; overflow:hidden; background:rgba(42,25,19, 0.95); z-index: 9998;  }
#gnb_mo > ul { width:90%; max-width:1280px;  margin:0 auto; margin-top:24%; text-align:center; display:flex;  justify-content:space-evenly; flex-wrap:wrap; align-items: start; }
#gnb_mo > ul > li {margin-bottom:30px}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.7rem; box-sizing:border-box; padding:0 1.5em; margin-bottom:20px; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div > a { color:#fff;  font-size:3.0rem; font-weight:500; font-family: 'ONE-Mobile-Title'; font-weight:normal}
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1em; color:#FFF; padding:15px 0; font-weight: 500;font-size:1.8rem; box-sizing:border-box; }
#gnb_mo > ul > li > ul > li > a:hover {color:#f5b335}
#gnb_mo > ul > li > div.active:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}



.menuToggle { width:85px; height:85px; cursor:pointer; position:relative; z-index:9999 }
.menuToggle span { display:block; width:30px; height:2px; background:#512d1e; position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s}
.menuToggle span.t { margin-top: -11px; }
.menuToggle span.m { margin-top:-1px; width: 20px; }
.menuToggle span.b { margin-top: 9px; }



#header.mo_on .menuToggle span {background:#FFF;}
#header.mo_on .menuToggle span.t { transform:rotate(45deg); margin-top: 0;  }
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b { transform:rotate(-45deg); margin-top: 0; }



.r_menu{display: flex; align-items: center;gap: 10px;}
.mo_lang{display: none;}
.lang{font-family: 'montserrat', sans-serif; font-weight: 600; font-size: 14px; color: #512d1e; position: relative; font-weight: bold;}
.lang .tit{cursor: pointer;}
.lang .tit::after{content: ''; width: 12px; height: 6px; background: url(/eng/images/common/lang_arrow.png) no-repeat center center / cover; display: inline-block; margin-left: 16px;}
.lang .list{text-align: center; display: none; position: absolute; background-color: #512d1e; width: 85px; left: 50%; transform: translateX(-50%); top: 75px; border-radius: 5px; overflow: hidden;}
.lang .list li{line-height: 25px;}
.lang .list li a{display: block; padding: 10px 0; color: #fff; width: 100%; height: 100%; font-weight: bold;}
.lang .list li a:hover{background-color: #6e4634; border-radius: 5px; overflow: hidden;}

@media all and (max-width:1599px){
    #header #logo {margin-left:20px}
}
@media all and (max-width:1400px){
    #gnb_pc > ul > li > div > a {padding: 0 25px; font-size: 1.8rem;}
    #header #logo img { height:25px; }
}
@media all and (max-width:1280px){
    #gnb_pc > ul > li > div > a { padding: 0 20px; font-size: 1.6rem;}
    
	#gnb_mo > ul {margin-top:100px}
	#gnb_mo > ul > li > div {margin-bottom:10px}
	#gnb_mo > ul > li > ul > li > a {padding:10px 0; }
    
}
@media all and (max-width:1080px){
    #header #logo {margin: 0 auto; }
    #header .hd_bx { line-height:85px; }  
    .r_menu .lang{display: none;}
    .mo_lang{display: block;position: absolute; left: 30px;}
	#gnb_pc { display: none; }
	.menuToggle {position:absolute; right:0; top:0}
    .lang{font-size: 13px;}
    .lang .list{left: 40%; width: 70px; top: 60px;}
    .lang .list li{line-height: 20px;}
    .lang .tit::after{content: ''; width: 8px; height: 4px; margin-left: 10px; top: 50%; transform: translateY(-50%);}
}
@media all and (max-width:1024px){
    #header .hd_mbx { display: block; }
}
@media all and (max-width:978px){
    #gnb_mo { display:none; position:fixed; top:0; right:0; max-width:500px; padding: 85px 0; overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left; }
    #gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:50px; width:100%; margin-top:0; 
    text-align:left; display:block}
    #gnb_mo > ul > li  { margin-bottom:0 }
    #gnb_mo > ul > li > div { margin-bottom:0;   border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; position:relative; cursor: pointer; }
    #gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
    #gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5.5px); top:50%; margin-top:-6px; transition:all 0.5s;}
    #gnb_mo > ul > li > div > a { font-size:2.2rem;  font-family: 'Pretendard'}
    #gnb_mo > ul > li > ul { display:none; }
    #gnb_mo > ul > li > ul > li > a { color:#4b4b4b;padding:0 1.5em; border-bottom:1px solid #e1e1e1; background:#fff; line-height:3em;}
}
@media all and (max-width:480px){
    #header { height: 60px; }
    #header .hd_bx { line-height:60px; }
    #header .hd_mbx {  width:60px; height:60px; }
    .menuToggle { width:60px; height:60px; }
    #header #logo img { height:20px; }
    
    .mo_lang{left: 20px;}
    #gnb_mo { padding: 60px 0; }
    .lang{font-size: 12px;}
    .lang .list{ top: 45px;}
    .lang .list li{line-height: 16px;}
    
}



#quick {position:fixed; right:0; bottom:10%; text-align:center; z-index:9999;
background:#c9161e; border-top-left-radius:10px; border-bottom-left-radius:10px;}
#quick ul { padding:20px 15px;}
#quick ul li img { width:96%; width:50px; padding-bottom:8px }
#quick ul li.line {margin:10px 0; width:100%; height:3px; background:url('/images/common/quick-dot.png') repeat-X; }
#quick a p  { color:#FFF; font-weight:400; font-size:15px;}
#quick a .num{font-size: 12px; color:#fff; font-weight: 700; margin-top: 2px;}
#quick a .mail{font-size: 9px; color:#fff;}


#quick-mo {display:none; position:fixed; right:10px; bottom:10px;text-align:center; z-index:9999}
#quick-mo a  {display:block; margin:5px 0; border-radius:100px;  width:70px; padding:1.2em 0; color:#FFF; font-size:1.4rem}
#quick-mo a.tel  { background:#c9161e; }
#quick-mo a.cs  { background:#222; }

@media all and (max-width:978px){
    #quick {display:none;}
  #quick-mo {display:block;}
}
@media all and (max-width:768px){
  #quick-mo a  { padding:1.3em 0}
}
@media all and (max-width:480px){
  #quick-mo a  { width:60px;}
}




#footer { position: relative; width: 100%; padding: 3% 0;  background:#38312e; text-align:center }
#footer .s-inner { }
#footer .s-inner h1 { margin-bottom: 30px; }
#footer .f-info p { display: inline-block; color:#625956; font-size: 1.6rem; line-height: 1.8em; padding:0 10px  }
#footer .f-info p.copy { font-size: 1.4rem; font-family: 'Jost'; opacity:.5; color:#625956 }


@media all and (max-width:1080px){
  #footer { padding: 4% 0 9%; }
}

@media all and (max-width:767px){
  #footer { padding: 5% 0 13%; }
  #footer .s-inner h1 img { height:25px; }
  #footer .f-info p br { display: none; }
}
@media all and (max-width:380px){
    #footer { padding-bottom: 18%;}
  #footer .f-info p { font-size: 1.4rem; }
}


.ft-sns{display: flex; justify-content: center; gap: 30px; margin-bottom: 10px;}
.ft-sns li{display: flex; align-items: center;}
.ft-sns li a{display: flex; align-items: center; gap: 5px;}
.ft-sns li a p{color: #7e7572; font-weight: 500;}
@media all and (max-width:680px){
    .ft-sns{flex-wrap: wrap; gap: 5px 20px;}
}
@media all and (max-width:380px){
    .ft-sns{gap: 15px;}
    .ft-sns li a img{width: 18px;}
}

#quick-btm{display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999;}
#quick-btm ul{display: flex;}
#quick-btm ul li{width: 50%; line-height: 50px; text-align: center; background:#c9161e; border-radius: 8px 8px 0 0; border-right:1px solid #770b10}
#quick-btm ul li:last-child{background:#f5b335; border-right:0;}
#quick-btm ul li span{color:#fff; vertical-align: middle; font-weight: 500; font-size: 1.8rem;}
#quick-btm ul li .material-symbols-outlined{font-size: 28px;}
@media all and (max-width:976px){
    #quick-btm{display: block;}
}
@media all and (max-width:380px){
    #quick-btm ul li{line-height: 40px;}
    #quick-btm ul li .material-symbols-outlined{font-size: 24px;}
}