@charset "utf-8";

header.header {position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
header .header_pc {display: block;}
header .header_mob {display: none;}

header .header_pc .container_fix {display: flex; align-items: center; justify-content: space-between;}
header .header_pc .container_fix .logo_box {padding: 44px 0 9px;}

header .header_pc .container_fix .logo_box .logo_b {display: none;}

header .header_pc .menu_wrap {margin-right: 5px;}
header .header_pc .menu_ul {display: flex; gap: 0 65px; width: 475px;}
header .header_pc .menu_ul .menu-a  span {font-size: 17px; font-weight: 300; color: #fff;}

header.b_color{background:#fff;}

header.b_color .header_pc .menu_wrap {margin-right: 0px;}
header.b_color .header_pc .menu_ul .menu-a span {color: #222222;}
header.b_color  .header_pc .container_fix .logo_box .logo_b {display: block;}
header.b_color  .header_pc .container_fix .logo_box .logo_w {display: none;}
.all_menu {display: none;}

@media (max-width:991px) {
    header .header_pc {display: none;}
    header .header_mob {display: block; padding: 25px 0 12.5px; border-bottom: 1px solid rgba(229, 231, 235, 0.2); background: transparent; transition: all .3s ease-in-out;transition-delay: 0s; }
    header .header_mob .container_fix {display: flex;align-items: center; justify-content: space-between;}

    /* 로고 */

    header .header_mob .logo_box {width: 180px;}
    header .header_mob .logo_box a {display: block; width: 100%;}
    header .header_mob .logo_box img {aspect-ratio: auto 47 / 241;	 
    width: 100%; /* 혹은 원하는 width 값 */
	height: auto;
	object-fit:contain;
  }
    header .header_mob .logo_box img.logo_b {display: none;}
    
    /* 모바일 버튼 */
    header .header_mob .menu_wrap button { position: relative; width: 20px; height: 18px; border: none; background: transparent; }
    header .header_mob .menu_wrap button span {position: absolute; width: 100%; height: 2px; background: #fff; left: 0; transition: all .3s ease-in-out;}

    header .header_mob .menu_wrap button span:nth-child(1) {top: 0; transition: .3s;}
    header .header_mob .menu_wrap button span:nth-child(2) {top: calc(50% - 1px);}
    header .header_mob .menu_wrap button span:nth-child(3){bottom: 0; transition: .3s;}



    header.b_color .header_mob {background: #fff; border-bottom: none;}
    header.b_color .header_mob .menu_ul .menu-a span {color: #222222;}
    header.b_color .header_mob .menu_wrap button span {background: #222;}
    header.b_color  .header_mob .container_fix .logo_box .logo_b {display: block;}
    header.b_color  .header_mob .container_fix .logo_box .logo_w {display: none;}


    /* header_mob.on */
    header .header_mob.on {border-bottom: none;}
    


    /* 로고부분 */
    header .header_mob.on .logo_box img.logo_b {display: block;}
    header .header_mob.on .logo_box img.logo_w {display: none;}

    /* 버튼부분 */


 header .header_mob.on .menu_wrap button.on span {opacity: 0;	}

/*     header .header_mob.on .menu_wrap button.on span {background: #222;}
    header .header_mob.on .menu_wrap button.on span:nth-child(1) {top: 50%; transform:translateY(-50%) rotate(-45deg);}
    header .header_mob.on .menu_wrap button.on span:nth-child(2) {opacity: 0;}
    header .header_mob.on .menu_wrap button.on span:nth-child(3) {transform:translateY(-50%) rotate(45deg);top: 50%;} */

    /* 전체메뉴 */
/*     header .all_menu {position: fixed; top: 50px; left: 0; width: 100%; height:100%; background: #fff;}
    header .all_menu .all_ul {margin-top: 35px;}
    header .all_menu .all_ul .all_li {border-bottom: 1px solid #e1e1e1;}
    header .all_menu .all_ul .all_li  a {display: block; width: 100%; line-height: 45px; font-weight: 500; font-size: 17px; color: #222222;} */

	header .all_menu {display: block; position: fixed; top: 0px; left: -100%; width: 50vw; min-width:270px; height:100%; transition:all .4s cubic-bezier(.445,.050,.55,.95); background: #fff; z-index: 10;}
    header .all_menu .all_ul {padding-top: 50px;}
    header .all_menu .all_ul .all_li {border-bottom: 1px solid #e1e1e1;}
    header .all_menu .all_ul .all_li  a {display: block; width: 100%; line-height: 45px; font-weight: 500; font-size: 17px; color: #222222;}

	header .all_menu .close_btn {position: absolute	; top: 25px; right: 20px; width: 22px; height: 22px; border:none; background:transparent; }
	header .all_menu .close_btn span {position: absolute; width: 100%; height: 1px; background: #222; left: 0; transition: all .3s ease-in-out;}
	header .all_menu .close_btn span:nth-child(1) {top: 50%; transform:translateY(-50%) rotate(-45deg);}
	header .all_menu .close_btn span:nth-child(2) {opacity: 0;}
	header .all_menu .close_btn span:nth-child(3){transform:translateY(-50%) rotate(45deg);top: 50%;}

		header .all_menu.on {left: 0;}


		header .all_menu_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:#000; opacity: 0.7; z-index: 5;}
		header .all_menu_bg.on {display: block;}
}