/*
메인 페이자 및 서브페이지 레이아웃 스타일 파일
*/
.common_wrap {position:relative; max-width:1156px; margin:0 auto;}
.common_full_wrap{position:relative; width:100%;}

.flex_box {display:flex; display:flex; flex-wrap:wrap;}

.pc_view {display:block;} /*  */
.tablet_view {display:none;} /* 태블릿일 경우 해당 width 값으로 제어 => @media all and (max-width:1024px) { } 의 각 사이즈에 따라 추가! */
.moble_view {display:none;} /* 모바일일 경우 해당 width 값으로 제어 */

.pc_br {display:block}
.t900_br{display:none}
.mobile_br{display:none}

@media all and (max-width:899px){
    .pc_br{display:none !important}
    .t900_br {display:block !important}
}
@media screen and (max-width: 480px) {
    .pc_br{display:block !important}
    .t900_br {display:none !important}
    .mobile_br{display:block !important}
}

/*
가나다라마바사 아자차카타파하<br class="mobile_br">가나다라 마바사 아자차카 타파하<br>
가나다라 마바사 아자차카 타파하 <br class="mobile_br">가나다라마바사 아자차카타파하<br><br>
* 가로 사이즈에 따라 적당히 클래스 추가
* t900 은 tablet 가로 크기에 따라 네이밍~ t768 등등  
*/

.bg_color01{background-color:#f6a17f}
.color01{color:#ed2d2c}
.color_white{color:#fff}

#tnb_wrap_bg{width:100%; padding:10px 0; background:#f5a07f;}
#tnb_wrap {display:flex; justify-content:space-between;}
.tnb_ul{display:flex;}

#header_wrap {z-index:100000;}

.global_nav {
  position: relative;
  z-index:100000;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu li {
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

.menu > li > a:hover {
  background: #fff;
}

/* 하위 메뉴 */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #555;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 150px;
}

.submenu li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

.submenu li a:hover {
  background: #666;
}

.submenu.show {
  display: block;
}

/* 메뉴 버튼 */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
}
.menu a.menu_1deps{color:#454545}
/* 반응형 */
@media (max-width: 1023px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    background: #333;
    position: absolute;
    right: 0;
    top: 100%;
    width: 200px;
  }
  .menu a.menu_1deps{color:#fff}
  
  .menu > li > a:hover {
	  background: #444;
	}
  .menu.active {
    display: flex;
  }

  .menu li {
    border-bottom: 1px solid #444;
  }

  .submenu {
    position: static;
    background: #444;
  }

  .submenu li a {
    padding-left: 30px;
  }
}


.search_input{width:200px; padding:5px; border:1px solid #f5a07f}


.main_banner_wrapper{text-align:center; margin:50px 0;}
.main_banner_wrapper img{margin-bottom:10px}
.main_banner_wrapper p{margin:0 0 10px 0 }
.main_banner_link_a{display:inline-block; padding:10px 50px; border:1px solid #ccc}

.bx-wrapper .main_view_detail_link{position:absolute; left:50%; bottom:120px; margin-left:-80px; display:inline-block; z-index:1000; background:#fff}

#sub_content_wrap{padding:30px; 20px}
#sub_content_wrap p{margin:10px 0 20px; font-size:1.2em; line-height:190%; font-family: serif;}
#sub_content_wrap h2{margin:5px 0 20px 0; text-align:center; font-size:2.3em; font-weight:500}

.sub_top_img_wrapper img{width:100%}

.sub_content_wrap01{display:flex; justify-content:center; align-items:center;}
.sub_content_txt01{width:40%; padding:30px;}
.sub_content_txt01 strong{font-size:3em; font-weight:700}
.sub_content_txt01 p{margin-top:30px; line-height:200%; font-size:1.3em; font-weight:500}

#footer_wrap {padding:50px 10px 50px 50px; background:#25282e}
.footer_info_wrapper{text-align:left; margin:50px 0; color:#fff}
.footer_info_wrapper img{margin-bottom:10px}
.footer_info_wrapper p{margin:0 0 10px 0 }

@media all and (max-width:1280px) {
  .common_wrap{width:100%;}
}

@media all and (max-width:1024px) {
  #header_wrap {height:120px}
  #logo_and_mainmenu #header_logo {bottom:20px}
  #mobile_btn_view_mainmenu {display:block;}
   
  #logo_and_mainmenu #mainmenu_ul {display:none; top:70px; left:0; right:0; z-index:1;}
  #logo_and_mainmenu #mainmenu_ul li {min-width:300px; margin:0; display:block; background:#fff}
    
  #logo_and_mainmenu #member_menu_ul{display:none}
    
  #main_new_product{width:100%;}
  #main_new_product a img{height:300px}
}

@media all and (max-width:830px) {
    .width_50 div {width:100%}
  #main_new_product a img{height:auto}
  #main_new_product{flex-wrap:wrap; justify-content:center}
  
  .sub_content_wrap01{flex-wrap:wrap}
  .sub_content_txt01{width:100%}
  .greeting_img01{width:100%}
  .greeting_img01 img{width:100%}
}

@media all and (max-width:768px) {
  
}
@media all and (max-width:578px) {
  #main_new_product{display:block}
  #main_new_product:after{display:block;visibility:hidden;clear:both;content:""}
  #main_new_product a:nth-child(1) img{width:100%}
  #main_new_product a:nth-child(2) img{float:left; width:50%}
  #main_new_product a:nth-child(3) img{float:left; width:50%}
  
  #main_lt_gallery_ul{flex-wrap:wrap; justify-content:space-around; gap:15px 0}
  #main_lt_gallery_ul li{width:45%;}
  
  #main_notice_qa{flex-wrap:wrap;}
  #main_notice_wrap{width:100%}
  #main_qa_wrap{width:100%; margin-top:50px;}
}