@charset "utf-8";

@media screen and (min-width:768px) and (max-width:1024px) {
.h_wrap{height: 70px;}
.height1{height: 400px;}
header h1{width: auto !important;height: 45px;padding-top: 15px !important;padding-left: 15px;}
header h1 img{width: auto; height: 100%;}
.h_gnb{width: 60%;margin: 0px;position: absolute;left: 53%; transform: translateX(-50%);}
.h_gnb > ul > li > a{font-size: 1rem;line-height: 70px;}
.h_gnb .h_sub > li > a{font-size: 0.85rem;}
.menu_btn, #search_btn{position: absolute;top: 15px;width: 25px!important;}
#search_btn{right: 70px; padding: 8px; margin: 0px;}
.menu_btn{display: block; right: 20px; }
.menu_btn img{width: 100%;}


/* 메인 서식 */
/* 공통서식 */
.title > h2{
  font-size: 2.2rem!important;}
.title > p{font-size: 0.95rem; padding-top: 20px; line-height: 25px;}
.plus_btn{font-size: 0.85rem !important;padding: 10px 24px;}
.btn01{
  color: #fff; border: 1px solid #fff;
  bottom: 70px; left: 50%; transform: translateX(-50%);
}
.btn02{color: #333; border: 1px solid #333;}

/*1. 메인 슬라이드 */
.main_slide > div > .slide_txt{width: 65%;text-align: center;}
.main_slide > div .s_txt01{font-size: 3rem;
padding-bottom: 35px;}
.main_slide > div .s_txt02{font-size: 1.25rem; line-height: 145%;}
.main_slide > div .s_txt03{font-size: 0.95rem;line-height: 150%;}
.main_slide > div > img{width: auto;}
.main_slide > .s_btn{width: 90%;}
.main_slide > .s_btn > li{width: 50px;}
.main_slide > .s_btn > li:first-child{left: 0px;}
.main_slide > .s_btn > li:last-child{right: 0px;}

/* 2. 대표브랜드 */
.brand_wrap{height: 70vh;}
.brand{width: 94%;}
.brand_slide_wrap{
  height: 200px; 
  padding: 110px 0px 10px 0px;  
}
.brand_slide{
  width: 2580px; height: 200px;
  gap: 20px;
}
.brand_slide > li{
  width: 200px; height: 200px;
}
.b_btn{
  top: 75px;
  bottom: auto; 
  width: 50px; height: 50px;
  background: none;
}
.b_lbtn{left: 0px;}
.b_rbtn{right: auto; left: 70px;}
.slide_bar{display: none;}

/* 3. 50주년 기념관, 5. ESG */
.esg_wrap{height: 70vh;}
.history, .esg{width: 94%; padding-top: 70px;}

/* 3. history */
.history .bder{
  top: 35%; left: 50px;
  width: 2px; height: 310px;
}
.history > ul{
  top: 40%; left: 47.5px;
  width: 100%; 
  display: block;
}

.history > ul > li{display: flex;}
.history > ul > li > span{
  text-align: left; display: flex; 
  line-height: 140%;
  margin-right: 20px;
  margin-bottom: 40px;
}
.history > ul > li > span:first-child{
  width: 8px; height: 8px;
  display: flex;
  margin: 10px 0px;
  margin-right: 20px;
}
.history > ul > li > span:nth-child(2){font-size: 1.125rem; }
.history > ul > li > span:last-child{font-size: 0.95rem;}

.history > ul > li:nth-child(3) > span:nth-child(2),.history > ul > li:last-child > span:nth-child(2){line-height: 200%;} 

/* 4. 뉴스&공지 */
.news_wrap{height: 70vh;}
.news{width: 94%; height: 40vh; top: 50%;}
.n_nav > ul{padding: 25px 0px 45px 0px;}
.n_nav > ul > li{margin-right: 20px;}

.n_nav > ul > li > a{
  font-size: 0.95rem;
  padding: 9px 24px;
}
.n_list{
  display: flex;
  width: 100%;
  gap: 2%;
}
.n_list > li{
  width: 25%!important; height: 200px;
  padding-bottom: 0%;
  box-shadow: 0 0 6px 0px rgba(3,3,3,.20);
}
.n_list > li  div{padding: 10px;}
.n_list > li  div .n_txt01{
  font-size: 0.85rem;
  line-height: 300%;
}
.n_list > li h3{
  font-size: 1rem;
  line-height: 135%;
  padding-top: 10px;
}
.n_list > li .n_txt02, .n_list > li .n_txt03{
  font-size: 0.9rem;
}
.n_list > li .n_txt02{padding:10px 0px;}
.n_list > li .n_txt03{
  padding-top: 10px;
  border-top: 1px solid #ccc;
  position: absolute; 
  display: block; width: 100%;
  bottom: 10px; left: 50%; transform: translateX(-50%);
}

/* 6. 고객센터 */
.tab_con_wrap{background: #F8F8F8; height: 70vh;}
.tab_con{
  width: 94%;
  height: 100vh;
  margin: 0px auto;
}
.tab{
  height: 50vh;
  position: absolute;
  top: 40%;  transform: translateY(-50%);
}
.tab > li:first-child{margin-right:150px;}
.tab > li:nth-child(2){margin-right:160px;}
.tab > li > a{
  font-size: 0.85rem;
  padding: 10px 24px;
}
.tab > li > div{
  position: absolute;
  display: none;
  width: 100%;
}
.tab > li > div h3{
  font-size: 2.2rem; padding: 70px 0px 25px 0px;
  line-height: 160%;
}
.tab > li > div p{font-size: 1rem; line-height: 130%}
.tab > li img{
  height: 300px;
  position: absolute; 
  right: 0px !important; top: 40%;
}

.f_inner{width: 94%; margin: 70px auto;}

}