@charset "utf-8";

/* mobile화면 서식 */
@media screen and (max-width:767px) {

  /* 헤더 서식 */
  .h_wrap{
    height: 70px !important;
    overflow: visible;
    position: fixed;
    background: rgba(255,255,255,.8);
    }
  header h1{
    width: auto !important; height: 50%;
    padding-top: 20px !important;
    padding-left: 20px !important;
  }
  header h1 img{width: auto; height: 100%;}
  .h_gnb{
    position: absolute; 
    left: 50%; transform: translateX(-50%); 
    top: 100px;
    width: 94%; 
    display:none;
    background-color: rgba(3,3,3,.8);
    z-index: 9000;
    border-radius: 15px; overflow: hidden;
  }
  .h_gnb > ul{display: block;}
  .h_gnb > ul > li > a{background-color: rgba(3,3,3,.9);}
  .h_gnb > ul > li > a > span{
    /* display: block; */
    position: absolute; 
    font-size: 0.75rem;
    display: inline-block;
    right: 26%;
  }
   .gnb_act{
    transform: rotate(180deg) translateY(-2px);
    padding-right: 25px;
   }
  .h_gnb > ul > li > a{
    font-size: 1rem;
    line-height: 400%;
  }
  .h_gnb .h_sub{display: none;}
  .h_gnb .h_sub > li > a{font-size: 0.9rem; line-height: 350%;}
  .h_gnb .h_sub > li:last-child{padding-bottom: 20px;}

  /* .h_gnb .h_sub{display: none;} */

  /* 검색, 메뉴 버튼 서식 */
  .menu_btn, #search_btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
  }

  #search_btn{
    right: 60px;
    margin: 0px;
    width: auto; height: 40%;
  }
  #search_btn > img{width: auto; height: 100%;}
  .menu_btn{
    display: block; right: 10px; height: 35%;}
  .menu_btn img{height: 100%;}

  /* 메인 서식 */
  /*모달창 서식*/
  .banner{
    width: 310px; height: 350px;
    background: #efefef;
    border-radius: 10px;
    overflow: hidden;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);}

  /* 공통서식 */
  .title > h2{font-size: 1.6rem;}
  .title > p{font-size: 0.9rem; width: 90%;}
  .plus_btn{
    font-size: 0.85rem;
    padding: 10px 22px;
  }
  .btn01{
    color: #fff; border: 1px solid #fff;
    bottom: 60px; left: 50%; transform: translateX(-50%);
  }

  /* 1. 메인 슬라이드 */
  .main_slide > div > .slide_txt{width: 80%;}
  .main_slide > div .s_txt01{
    font-size: 2.5rem;
    padding-bottom: 25px;
  }
  .main_slide > div .s_txt02{
    font-size: 1.1rem;
    padding-bottom: 20px;
    line-height: 130%;
  }
  .main_slide > div .s_txt03{font-size: 0.9rem; line-height: 140%;}
  .main_slide > div > img{width: auto; transform: translateX(-40%);}
  .main_slide > .s_btn{width: 80%; top: 70%;}
  .main_slide > .s_btn > li:first-child{left: auto;}
  .main_slide > .s_btn > li:last-child{left: 70px;}

  /* 2. 대표브랜드 */
  section.brand_wrap{height: 90vh !important;}
  .brand{
    position: absolute;
    width: 94%; margin: 0 auto;
  }
  .brand_slide_wrap{
    overflow: hidden;
    height: 170px; 
    padding: 90px 0px 0px 0px;}

  .brand_slide{
    width: 1980px; height: auto;
    gap: 20px; 
    padding-left: 6px;
    padding-bottom: 6px;
  }
  .brand_slide > li{
    width: 160px; height: 160px;
    border-radius: 6px;
  }


/* 좌/우 방향버튼 */
.b_btn{
  top: 60px;
  bottom: auto; 
  width: 50px; height: 50px;
  padding: 0px;
  background: none;
}
.b_lbtn{left: 0px;}
.b_rbtn{right: auto; left: 70px;}
.slide_bar{display: none;}

/* 브랜드 스토리 */
.brand_story{width: 70% !important; height: 50vh;}
.brand_story > .s_lbtn, .brand_story > .s_rbtn{width: 45px;}
.brand_story > .s_lbtn{left: -60px;}
.brand_story > .s_rbtn{right: -60px;}
.brand_story > a{
  font-size: 0.8rem;
  padding: 6px 18px;
  bottom: 50px; left: 50%;
  transform: translateX(-50%);
  transition: 0.4s;
}

/* 3. 50주년 기념관, 5. ESG */
.history_wrap, .esg_wrap{
  width: auto!important; 
  background-size: cover;
  background-position: -100px;
}
.history, .esg{width: 94%; padding-top: 60px;}
/* 3. history */
.history .bder{
  top: 35%; left: 50px;
  width: 2px; height: 300px;
}
.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: 0.95rem;}
.history > ul > li > span:last-child{font-size: 0.9rem;}

/* 4. 뉴스&공지 */
.news_wrap{height: 100vh;}
.news{
  width: 94%; height: fit-content;
  position: absolute;
  top: 45%;
  text-align: center;
}
.n_nav > ul{padding: 20px 0px 35px 0px; justify-content: space-around;}
.n_nav > ul > li{margin-right: 0px;}
.n_nav > ul > li > a{font-size: 0.85rem; padding: 10px 24px;}
.n_list{
  width: 100%;
  gap: 10px;
  padding: 0px;
  flex-wrap: wrap;
}
.n_list > li{
  width: 48%; height: 200px;
  padding-bottom: 50%;
  margin: 0 auto;
  padding: 0px;
  text-align: center; border-radius: 10px;
  box-shadow: 0 0 6px 0px rgba(3,3,3,.20);
}
.n_list > li  div{padding: 15px;}
.n_list > li  div .n_txt01{
  font-size: 0.85rem;
  line-height: 200%;
  padding: 1.6px 6px;
}
.n_list > li h3{
  font-size: 0.95rem;
  line-height: 150%;
  padding-top: 15px;
}
.n_list > li .n_txt02, .n_list > li .n_txt03{
  font-size: 0.85rem;
}
.n_list > li .n_txt02{padding:10px 0px;}
.n_list > li .n_txt03{
  padding-top: 12px;
  border-top: 1px solid #ccc;
  position: absolute; 
  display: block; width: 100%;
  bottom: 12px; left: 50%; transform: translateX(-50%);
}

/* 6. 고객센터 */
.tab_con_wrap{height: 70vh;}
.tab_con{
  width: 94%;
  height: 300px;
  position: relative;
  top: 50%; transform: translateY(-50%);
}
.tab_con > h2{display: none;}  
.tab{height: fit-content; top: 0%;}
.tab > li:first-child{margin-right:140px;}
.tab > li:nth-child(2){margin-right:150px;}
.tab > li > a{
  font-size: 0.85rem;
  padding: 10px 20px;
  z-index: 90;
}
.tab > li > div{
  position: absolute;
  display: none;
  left: 0px;
  width: 100%;
}
.tab > li:nth-child(2){display: none;}
.tab > li > div h3, .tab > li > div p{z-index: 10; position: relative;}
.tab > li > div h3{font-size: 1.6rem;line-height: 130%; padding: 70px 0px 20px 0px;}
.tab > li > div p{font-size: 0.9rem;line-height: 150%;}
.tab > li img{
  filter:opacity(0.7) blur(1.5px);
  height: 90%;
  top: 10vh;
  right: 0%; transform: translateX(10%);
  z-index: 0;
}
.f_inner{width: 94%; margin: 70px auto;}
.f_inner > p{line-height: 130%;}
}