body {
   background-color: #fff;
}

header {
   position: relative;
   display: flex;
   align-items: center;
   height: 75px;
   padding: 0 20px;
   background: #fff;
   border-bottom: 1px solid #d9d9d9;
}
.header_inner {
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   gap: 10px;
}
header h1 a {
   display: flex;
   align-items: center;
}
header h1 img {
   display: inline-block;
   width: 125px;
}

.gnb {
   flex: 1;
   height: 100%;
   max-width: 650px;
}
.gnb .gnb_menu {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
   gap: 20px;
   white-space: nowrap;
}
.gnb .gnb_menu li {
   position: relative;
   width: auto;
   height: 100%;
}
.gnb .gnb_menu li a {
   position: relative;
   color: #222;
   font-size: 17px;
   font-weight: 700;
   display: flex;
   align-items: center;
   height: 100%;
}
.gnb .gnb_menu li a.menu_title::after {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 0;
   height: 3px;
   background-color: #17393c;
   transform: translateX(-50%);
   transition: width 0.35s ease;
}
.gnb .gnb_menu li:hover a.menu_title::after {
   width: 100%;
}
.gnb .gnb_menu li a:hover {
   color: #17393c;
}
.gnb .depth2 {
   position: absolute;
   top: 100px;
   left: 0;
   width: max-content;
   width: -webkit-max-content;
   opacity: 0;
   transform: translateY(-20px);
   transition: opacity 0.2s ease, transform 0.2s ease;
   pointer-events: none;
   z-index: 20;
}
header.open .depth2 {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.2s;
   pointer-events: auto;
}

.gnb .depth2 ul li {
   width: 100%;
   margin-bottom: 15px;
}
.gnb .depth2 ul li:last-child {
   margin-bottom: 0;
}
.gnb .depth2 ul li a {
   position: relative;
   font-weight: 500;
   font-size: 15px;
   width: max-content;
}
.gnb .depth2 ul li a::after {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 100%;
   height: 1px;
   background-color: #000;
   transform: translateX(-50%) scaleY(0.5) scaleX(0);
   transform-origin: center;
   transition: transform 0.25s ease;
}
.depth2 ul li a:hover::after {
  transform: translateX(-50%) scaleY(0.5) scaleX(1);
}
.gnb_bg {
   position: absolute;
   top: 75px;
   left: 50%;
   transform: translateX(-50%);
   width: 100vw;
   height: 0;
   background: #fff;
   transition: height 0.35s ease;
   z-index: 10;
}
header.open .gnb_bg {
   height: 370px;
   transition-delay: 0s;
}

header:not(.open) .gnb_bg {
   transition-delay: 0.1s;
}
.gnb_util {
   display: flex;
   align-items: center;
   gap: 50px;
}

.h_info {
   margin-left: auto;
   display: flex;
   gap: 15px;
}

.h_info img {
   width: 25px;
}
.h_info .bookmark img {
   width: 25px;
}

.mypage_wrap {
   position: relative;
}
.mypage_wrap .mypage {
   display: none;
   position: absolute;
   width: 180px;
   border: 1px solid #E8E8E8;
   border-radius: 10px;
   background-color: #fff;
   padding: 7px;
   z-index: 50;
   top: 33px;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
}
.mypage_wrap .mypage_menu.active {
   display: block;
}
.mypage_wrap .mypage_menu ul {
   display: flex;
   flex-direction: column;
}
.mypage_wrap .mypage_menu ul li {
   position: relative;
   display: block;
   font-size: 12px;
   margin-bottom: 3px;
   color: #333;
   line-height: 16px;
   border-radius: 8px;
}
.mypage_wrap .mypage_menu ul li:last-child {
   margin-bottom: 0;
}
.mypage_wrap .mypage_menu ul li:hover {
   background-color: #F3F5F9;
}
.mypage_wrap .mypage_menu ul li .individual_menu {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   gap: 5px;
   padding: 5px 10px;
}
.mypage_wrap .mypage_menu ul li .individual_menu svg {
   color: #777777;
   width: 16px;
}
.mypage_wrap .mypage_menu ul li.myinfo_wrap .individual_menu svg:last-child {
   width: 14px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 0;
}
.mypage_wrap .mypage_menu .myinfo_submenu {
   display: none;
   position: absolute;
   left: 100%;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
   top: 0;
   width: 88px;
}
.mypage_wrap .mypage_menu .myinfo_submenu li {
   border-radius: 6px;
}
.mypage_wrap .mypage_menu .myinfo_submenu li a {
   width: 100%;
   display: inline-block;
   padding: 2px 5px;
}

.mypage_wrap .mypage_menu .myinfo_submenu.active {
   display: block;
}

/* 검색 */
.search_wrap {
   position: relative;
   width: 100%;
   margin: 60px auto 30px;
   max-width: 830px;
}

.search_input {
   width: 100%;
   height: 48px;
   padding: 0 55px 0 32px;
   border: 1px solid #969696;
   border-radius: 24px;
   font-size: 17px;
   font-weight: 500;
   outline: none;
   background-color: #fff;
}

.search_input::placeholder {
   color: #b7b7b7;
}

.search_btn {
   position: absolute;
   top: 50%;
   right: 32px;
   transform: translateY(-50%);
}

.search_btn img {
   display: block;
}
@media (max-width: 1280px) {
   header h1 img {
      width: 105px;
   }
   .gnb {
      max-width: 550px;
   }
   .gnb .gnb_menu li a {
      font-size: 16px;
   }
   .gnb_util {
      gap: 20px;
   }
   .info {
      gap: 10px;
   }
   .info img {
      width: 24px;
   }
   .info .bookmark img {
      width: 22px;
   }
}
@media (max-width: 1080px) {
   header {
      height: 60px;
   }
   .header_inner {
      justify-content: start;
   }
   header h1 img {
      width: 93px;
   }
   .gnb .gnb_menu li a {
      font-size: 16px;
   }
   .gnb_util {
      gap: 20px;
   }
   .info {
      gap: 12px;
   }
   .info img {
      width: 23px;
   }

   /* 모바일 header, menu */
   .mo.search_wrap {
      position: absolute;
      top: 9px;
      right: 0px;
      max-width: initial;
      margin: 0;
      width: calc(100% - 150px);
      max-width: 270px;
   }
   .mo.search_wrap .search_input {
      width:100%;
	  height: 37px;
      font-size: 14px;
      padding: 0 30px 0 10px;
	  box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
   }
   .mo.search_wrap .search_input::placeholder {
     width:100%;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 폰트 크기: 뷰포트에 따라 유동적으로 변함 */
    font-size: clamp(12px, 3.5vw, 15px); /* 모바일에서는 3.5vw 정도가 적당할 수 있습니다 */
    letter-spacing: -0.5px;
    
    /* 브라우저별 호환성을 위한 추가 (선택사항) */
    line-height: normal;
   }
   .mo.search_wrap .search_btn {
      right: 10px;
   }
   .mo.search_wrap .search_btn img {
      width: 18px;
   }

   .side_menu {
      position: fixed;
      inset: 0;
      z-index: 1000;
      pointer-events: none;
   }
   .side_menu.open {
      left: 0;
   }
   .side_dim {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.8);
      opacity: 0;
      transition: opacity 0.3s ease;
   }
   .menu_layer {
      position: absolute;
      padding: 17px 30px 17px 20px;
      top: 0;
      left: 0;
      width: 90%;
      height: 100dvh;
      background: #fff;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 2;
      pointer-events: auto;
   }
   .side_menu.open .side_dim {
      opacity: 1;
   }

   .side_menu.open .menu_layer {
      transform: translateX(0);
   }
   .side_menu .close_btn_wrap {
      position: absolute;
      top: 10px;
      right: 13px;
   }
   .side_menu .close_btn_wrap img {
      width: 16px;
   }
   .side_menu .profile_wrap {
      position: relative;
      margin-top: 35px;
      padding-bottom: 20px;
      border-bottom: 1px solid #d9d9d9;
   }
   .profile_wrap .profile_info h2 {
      font-size: 21px;
   }
   .profile_wrap .profile_info.before h2 {
      font-size: 15px;
   }
   .profile_wrap .profile_img {
      position: absolute;
      top: 0;
      right: 0;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
   }
   .profile_wrap .profile_img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   .profile_wrap .profile_info span {
      font-size: 15px;
      font-weight: 500;
      color: #969696;
   }
   .profile_wrap .profile_info.before span {
      font-size: 12px;
   }
   .profile_wrap .profile_btns {
      display: flex;
      gap: 9px;
      margin-top: 16px;
   }
   .profile_wrap .profile_btns button {
      width: 50%;
   }
    .profile_wrap .bg_green_btn a {
      width: 50%;
   }
   .menu_list {
      margin: 17px 0;
      height: calc(100dvh - 255px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      scrollbar-width: none; 
   }
   
   .menu_list::-webkit-scrollbar {
      display: none;
   }
   .menu_list li {
      margin-bottom: 13px;
   }
   .menu_list li:last-child {
      margin-bottom: 0;
   }
   .menu_list li .depth_open {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .menu_list li .depth_open span {
      font-size: 18px;
      font-weight: 500;
   }
   .menu_list li.open .depth_open span {
      color: #17393c;
      font-weight: 600;
   }
   .menu_list .depth_open img {
      transition: transform 0.3s ease;
   }
   .menu_list li.open .depth_open img {
      transform: rotate(180deg);
   }
   .menu_list .depth_list {
      display: none;
      flex-direction: column;
      padding-left: 14px;
      box-sizing: border-box;
      margin: 10px 0 35px;
      font-size: 15px;
      font-weight: 500;
      gap: 13px;
   }
   .menu_list li.open .depth_list {
      display: flex;
   }

   .lang_select {
      position: relative;
      width: fit-content;
   }

   .lang_btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 10px;
      height: 30px;
      line-height: 28px;
      border: 1px solid #17393c;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
   }

   .lang_btn .arrow {
      margin-left: auto;
      transition: transform 0.3s ease;
   }

   .select_items {
      display: block;
      position: absolute;
      top: -114px;
      left: 0;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 6px 0;
      z-index: 10;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px);
      transition: all 0.25s ease;
   }

   .lang_select.active .select_items {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   .select_items a {
      display: block;
      padding: 8px 12px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #17393c;
   }

   .select_items a:hover {
      background: #f5f5f5;
   }

   .lang_select.active img.open_btn {
      transform: rotate(180deg);
   }
}