@charset "utf-8";

#wrap {
  overflow-x: hidden;
}
select{
  cursor: pointer;
}
.mb_only {
  display: none !important;
}

.scrolloff {
  overflow: hidden;
}

.popup {
  margin: 0 auto;
  position: fixed;
  bottom: 60px;
  z-index: 11;
  width: 100%;
  display: none;
}

.pop_inner {
  padding: 12px 0 14px 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  width: 340px;
  margin: 0 auto;
}

.popup p {
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
}

.wrap_inner {
  max-width: 1760px;
  margin: 0 auto;
}

.hide {
  display: none;
}

/* 헤더 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.header>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 80px;
}

.header h1 {
  width: 150px;
  background-color: transparent;
}

.header h1 a {
  width: 100%;
  display: block;
}

.header h1 a img {
  width: 100%;
}

.header .nav_list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header .nav_list li {
  display: flex;
  align-items: center;
}

.header .nav_list li form{
    border: none;
}
.header .nav_list li:not(:first-of-type) {
  margin-left: 80px;
}

.header .nav_list li a {
  position: relative;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
}

.header .nav_list.active .nav_option {
  display: none;
}

.header .nav_list .search_con {
  position: relative;
}

.header .nav_list .search_con input {
  width: 300px;
  padding: 5px 0;
  color: #fff;
  border: none;
  border-bottom: 2px solid #fff;
}

.header .nav_list .search_con input:focus {
  width: 700px;
  transition: width 0.5s;
}

.header .nav_list .search_con .search_btn {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 24px;
  height: 24px;
  background: url('../images/icon/search_w.svg') center center / 14px no-repeat;
}

.header .nav_list li input::placeholder {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
}

.header .nav_list li input::-ms-clear,
.header .nav_list li input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.header .nav_list li input::-webkit-search-decoration,
.header .nav_list li input::-webkit-search-cancel-button,
.header .nav_list li input::-webkit-search-results-button,
.header .nav_list li input::-webkit-search-results-decoration {
  display: none;
}

.header .basket {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  padding: 13px 0 5px 0;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  background: url('../images/icon/cart_w_t.svg') center center / contain no-repeat;
}

.header .basket .basket_num {
  position: absolute;
  top: -3px;
  right: -14px;
  width: 24px;
  height: 24px;
  padding-top: 2px;
  padding-left: 3px;
  color: #111;
  font-size: 12px;
  border-radius: 50%;
  background-color: #fff;
}

.header .search_del {
  display: none;
  width: 50px;
  height: 50px;
  background: url('../images/icon/search_del_w.svg') center center / 50px no-repeat;
}

.header .search_del.active {
  display: block;
}

/* 푸터 */
.pc_footer {
  border-top: 1px solid #111;
  transition: all 1s;
}

.pc_footer>div {
  max-width: 1280px;
  margin: 0 auto;
  padding: 35px 70px 35px;
}

.pc_footer .footer_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.pc_footer .footer_top h2 {
  width: 187px;
  height: 30px;
}

.pc_footer .footer_top ul {
  display: flex;
  justify-content: flex-end;
}

.pc_footer .footer_top ul li {
  margin-left: 20px;
}

.pc_footer .footer_top a {
  font-size: 14px;
  font-weight: 700;
}

.pc_footer .footer_bot {
  display: flex;
  justify-content: space-between;
}

.pc_footer .footer_bot address {
  line-height: 1.7;
}

.pc_footer .footer_bot ul {
  text-align: right;
}

.pc_footer .footer_bot ul li {
  margin-bottom: 4px;
}

#footer address,
.pc_footer ul li p {
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
}

/* 사이드 메뉴 */
.aside_menu {
  width: 320px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 50;
}

.aside_menu {
  -ms-overflow-style: none;
}

.aside_menu::-webkit-scrollbar {
  display: none;
}

.aside_top {
  position: relative;
  padding: 215px 18px 29px 77px;
  background-color: #111;
}

.aside_top .user {
  margin-bottom: 4px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

.aside_top .user span {
  font-weight: 400;
}

.aside_top .info {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  white-space: nowrap;
}

.aside_top .page {
  display: block;
  width: 210px;
  margin-top: 53px;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  border-bottom: 2px solid #fff;
}

.aside_top .loginout {
  width: 68px;
  height: 28px;
  margin-top: 21px;
  font-size: 12px;
  color: #fff;
  background-color: #373737;
}

.aside_bot {
  height: 450px;
  padding: 40px 0 40px 80px;
}

.aside_bot .menu {
  font-size: 15px;
  font-weight: 500;
}

.aside_bot .nav_tit {
  padding: 11px 0;
  font-weight: 500;
}

.aside_bot .nav_link {
  display: block;
  padding: 16px 0 16px 10px;
  font-weight: 400;
  background-color: #FBFBFB;
}

.aside_bot .customer_service {
  margin-top: 20px;
  font-weight: 500;
  text-decoration: underline;
}

.aside_bot .notice_link {
  display: block;
  padding-top: 20px;
  text-decoration: underline;
}

/* 사이드메뉴 컨텐츠 */
.aside_cont {
  margin: 175px 0;
  padding-left: 320px;
}

/* 페이징 번호 */
.orderbox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 70px;
}

.orderbox .num_list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.orderbox .num_list>li {
  margin: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.orderbox .num_list>li button {
  font-size: 12px;
  font-weight: 500;
  color: #999;
}

.orderbox .num_list>.active button {
  color: #111;
  border-bottom: 1px solid #111;
}

.orderbox .num_prev,
.orderbox .num_next {
  width: 24px;
  height: 24px;
  margin: 0 20px;
}

.orderbox .num_prev {
  background: url('../images/icon/arrow_num.svg') center center / 24px no-repeat;
}

.orderbox .num_next {
  background: url('../images/icon/arrow_num.svg') center center / 24px no-repeat;
  transform: rotate(180deg);
}

/* 버튼 */
.btn_small {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 74px;
  height: 28px;
  font-size: 12px;
  color: #fff;
  background-color: #111;
}

.btn {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  background: #111;
  color: #FFFFFF;
}

.btn.btn_light {
  background: #FBFBFB;
  color: #111;
}

.btn_modal .confirm.w {
  background-color: #fff;
  border: 1px solid #222;
  color: #222;
}

/* 페이지 타이틀 */
.page_title_area {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 2px solid #111;
}

.page_title {
  margin-left: 10px;
  padding-bottom: 15px;
  font-size: 30px;
  font-weight: 400;
}

/* 리스트 없을 시에 */
.list_none_area {
  margin-top: 110px;
  text-align: center;
}

.list_none_area p {
  font-size: 20px;
  color: #999;
}

/* 슬라이드 바 */
.moving_bar {
  position: -webkit-sticky;
  position: sticky;
  bottom: 30px;
  z-index: 1;
  left: 50%;
  width: 2px;
  height: 74px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .5);
  overflow: hidden;
}

.moving_bar::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 50%;
  background: #FFFFFF;
  transition: 0.3s;
}

@keyframes moving_bar {
  0% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}

/* 상품 수량 */
.quantity_item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.quantity_item:last-child {
  margin-bottom: 0;
}

.mypage_item.full .empty_box1 {
  width: 60px;
}

.mypage_item.full .empty_box2 {
  width: 38px;
}

.mypage_item.full .color_box {
  background-color: #111;
  color: #fff;
}

.quantity_item .color_box {
  width: 89px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E2BD96;
  font-size: 12px;
  font-weight: 500;
}

.quantity_item .color_box.light {
  color: #FFFFFF;
}

.quantity_item .color_box.navy {
  background: #272A71;
}

.quantity_item .price {
  width: 142px;
  font-weight: 500;
  text-align: center;
}

.quantity_item .count_wrap {
  display: flex;
  align-items: center;
  width: 60px;
}

.quantity_item .count_wrap button {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.quantity_item .count_wrap .minus {
  background: url(../images/icon/count-minus.svg) no-repeat center / 100%;
}

.quantity_item .count_wrap .plus {
  background: url(../images/icon/count_plus.svg) no-repeat center / 100%;
}

.quantity_item .count_wrap .count_num {
  width: 30px;
  margin: 0 9px;
  padding: 1px 3px;
  font-weight: 400;
  background: #111;
  color: #FFFFFF;
  text-align: center;
}

.quantity_item .delete_btn {
  width: 38px;
  height: 38px;
  background: #F8F8F8 url(../images/icon/close_b.svg) no-repeat center / 10px;
}

/* 마이페이지 */
.mypage_depth {
  margin-left: 70px;
}

.mypage_info legend {
  width: 100%;
  display: block;
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 18px 10px;
  border-bottom: 2px solid #111;
}

/* 모달 */
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(17, 17, 17, .4);
  z-index: 100;
  display: none;
}

.modal.on {
  display: block;
}

.modal_box {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 380px;
  padding: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
}

.modal .modal_txt {
  margin-bottom: 42px;
  font-size: 15px;
  font-weight: 500;
}

.modal .btn_modal {
  display: flex;
  align-items: center;
}

.modal button {
  width: 288px;
  height: 45px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #111;
}

.modal button:not(last-child) {
  margin-right: 10px;
}

.modal .cancel {
  border: 1px solid #111;
  background: transparent;
  color: #111;
}

.modal .btn_modal button {
  width: 139px;
}

/* 말풍선 */
.info_box {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 7px;
  background: url(../images/icon/question.svg) no-repeat center/contain;
}

.info_box button {
  width: 100%;
  height: 100%;
}

.info_box:hover .info_txt {
  display: block;
}

.info_txt {
  display: none;
  position: absolute;
  width: 185px;
  padding: 13px;
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.16);
  transition: all .3s;
  z-index: 1;
}

.info_txt::before {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 16px;
  height: 14px;
  margin-top: -2px;
  background: url(../images/icon/triangle.svg) no-repeat center/contain;
  filter: drop-shadow(0px -8px 8px rgba(0, 0, 0, 0.1));
  -webkit-filter: drop-shadow(0px -8px 8px rgba(0, 0, 0, 0.1));
}

.delivery_btn {
  padding: 7px 14px;
  margin-left: 10px;
  font-size: 11px;
  color: #fff;
  background-color: #222;
}

@media screen and (max-width:1800px) {
  .mb_only {
    display: none !important;
  }

  .popup {
    bottom: calc(100vw*(60/1800));
  }

  .pop_inner {
    padding: calc(100vw*(12/1800)) 0 calc(100vw*(14/1800)) 0;
    border-radius: calc(100vw*(6/1800));
    width: calc(100vw*(340/1800));
  }

  .popup p {
    font-size: calc(100vw*(15/1800));
  }

  .wrap_inner {
    max-width: calc(100vw*(1760/1800));
  }
}


@media screen and (max-width:1500px) {

  /* 사이드 메뉴 */
  .aside_menu {
    width: calc(100vw*(320/1500));
  }

  .aside_menu .aside_top {
    padding: calc(100vw*(215/1500)) calc(100vw*(18/1500)) calc(100vw*(29/1500)) calc(100vw*(77/1500));
  }

  .aside_menu .aside_top .user {
    margin-bottom: calc(100vw*(4/1500));
    font-size: calc(100vw*(36/1500));
  }

  .aside_menu .aside_top .info {
    font-size: calc(100vw*(15/1500));
    white-space: normal;
  }

  .aside_menu .aside_top .page {
    width: calc(100vw*(210/1500));
    margin-top: calc(100vw*(53/1500));
    padding-bottom: calc(100vw*(10/1500));
    font-size: calc(100vw*(17/1500));
  }

  .aside_menu .aside_top .loginout {
    width: calc(100vw*(68/1500));
    height: calc(100vw*(28/1500));
    margin-top: calc(100vw*(21/1500));
    font-size: calc(100vw*(12/1500));
  }

  .aside_bot {
    height: calc(100vw*(450/1500));
    padding: calc(100vw*(40/1500)) 0 calc(100vw*(40/1500)) calc(100vw*(80/1500));
  }

  .aside_bot .menu {
    font-size: calc(100vw*(15/1500));
  }

  .aside_bot .nav_tit {
    padding: calc(100vw*(11/1500)) 0;
  }

  .aside_bot .nav_link {
    padding: calc(100vw*(16/1500)) 0 calc(100vw*(16/1500)) calc(100vw*(10/1500));
  }

  .aside_bot .notice_link {
    padding-top: calc(100vw*(20/1500));
  }

  /* 사이드메뉴 컨텐츠 */
  .aside_cont {
    margin: calc(100vw*(175/1500)) 0 calc(100vw*(230/1500)) 0;
    padding-left: calc(100vw*(320/1500));
  }

  .popup {
    bottom: calc(100vw*(60/1500));
  }

  .pop_inner {
    padding: calc(100vw*(12/1500)) 0 calc(100vw*(14/1500)) 0;
    border-radius: calc(100vw*(6/1500));
    width: calc(100vw*(340/1500));
  }

  .popup p {
    font-size: calc(100vw*(15/1500));
  }

  /* 푸터 */
  .pc_footer>div {
    max-width: calc(100vw*(1280/1500));
    padding: calc(100vw*(35/1500)) calc(100vw*(70/1500)) calc(100vw*(35/1500));
  }

  .pc_footer .footer_top {
    margin-bottom: calc(100vw*(32/1500));
  }

  .pc_footer .footer_top h2 {
    width: calc(100vw*(187/1500));
    height: calc(100vw*(30/1500));
  }

  .pc_footer .footer_top ul li {
    margin-left: calc(100vw*(20/1500));
  }

  .pc_footer .footer_top a {
    font-size: calc(100vw*(14/1500));
  }

  .pc_footer .footer_bot ul li {
    margin-bottom: calc(100vw*(4/1500));
  }

  #footer address,
  .pc_footer ul li p {
    font-size: calc(100vw*(14/1500));
  }

  /* 페이징 번호 */
  .orderbox {
    padding-top: calc(100vw*(70/1500));
  }

  .orderbox .num_list>li{
    margin: 0 calc(100vw*(10/1500));
    font-size: calc(100vw*(12/1500));
  }
  .orderbox .num_list>li button {
    font-size: calc(100vw*(12/1500));
  }

  .orderbox .num_prev,
  .orderbox .num_next {
    width: calc(100vw*(24/1500));
    height: calc(100vw*(24/1500));
    margin: 0 calc(100vw*(20/1500));
  }

  .orderbox .num_prev {
    background: url('../images/icon/arrow_num.svg') center center / calc(100vw*(24/1500)) no-repeat;
  }

  .orderbox .num_next {
    background: url('../images/icon/arrow_num.svg') center center / calc(100vw*(24/1500)) no-repeat;
  }

  /* 버튼 */
  .btn_small {
    width: calc(100vw*(74/1500));
    height: calc(100vw*(28/1500));
    font-size: calc(100vw*(12/1500));
  }

  .btn {
    height: calc(100vw*(50/1500));
    font-size: calc(100vw*(15/1500));
  }

  /* 페이지 타이틀 */
  .page_title {
    margin-left: calc(100vw*(10/1500));
    padding-bottom: calc(100vw*(15/1500));
    font-size: calc(100vw*(30/1500));
  }

  /* 리스트 없을 시에 */
  .list_none_area {
    margin-top: calc(100vw*(110/1500));
  }

  .list_none_area p {
    font-size: calc(100vw*(20/1500));
  }

  /* 슬라이드 바 */
  .moving_bar {
    bottom: calc(100vw*(30/1500));
    width: calc(100vw*(2/1500));
    height: calc(100vw*(74/1500));
  }

  /* 상품 수량 */
  .quantity_item {
    margin-bottom: calc(100vw*(8/1500));
    font-size: calc(100vw*(12/1500));
  }

  .mypage_item.full .empty_box1 {
    width: calc(100vw*(80/1500));
    ;
  }

  .mypage_item.full .empty_box2 {
    width: calc(100vw*(38/1500));
    ;
  }

  .quantity_item .color_box {
    width: calc(100vw*(89/1500));
    height: calc(100vw*(38/1500));
    font-size: calc(100vw*(12/1500));
  }

  .quantity_item .price {
    width: calc(100vw*(175/1500));
  }

  .quantity_item .count_wrap {
    width: calc(100vw*(80/1500));
  }

  .quantity_item .count_wrap button {
    width: calc(100vw*(13/1500));
    height: calc(100vw*(13/1500));
  }

  .quantity_item .count_wrap .count_num {
    width: calc(100vw*(30/1500));
    margin: 0 calc(100vw*(9/1500));
    padding: calc(100vw*(1/1500)) calc(100vw*(3/1500));
  }

  .quantity_item .delete_btn {
    width: calc(100vw*(38/1500));
    height: calc(100vw*(38/1500));
    background: #F8F8F8 url(../images/icon/close_b.svg) no-repeat center / calc(100vw*(10/1500));
  }

  /* 마이페이지 */
  .mypage_depth {
    margin-left: calc(100vw*(70/1500));
  }

  .mypage_info fieldset {
    width: 100%;
  }

  .mypage_info legend {
    font-size: calc(100vw*(20/1500));
    padding: 0 0 calc(100vw*(18/1500)) calc(100vw*(10/1500));
  }

  /* 모달 */
  .modal_box {
    width: calc(100vw*(380/1500));
    padding: calc(100vw*(40/1500));
  }

  .modal .modal_txt {
    margin-bottom: calc(100vw*(42/1500));
    font-size: calc(100vw*(15/1500));
  }

  .modal .btn_modal button {
    width: calc(100vw*(139/1500));
    height: calc(100vw*(45/1500));
  }

  .btn_modal .confirm {
    margin-right: calc(100vw*(10/1500));
    width: calc(100vw*(288/1500));
    font-size: calc(100vw*(15/1500));
    border: calc(100vw*(1/1500)) solid #fff;
  }

  .modal button {
    width: calc(100vw*(288/1500));
    height: calc(100vw*(45/1500));
    font-size: calc(100vw*(15/1500));
  }

  /* 헤더 */
  .header {
    height: calc(100vw*(60/1500));
    -webkit-backdrop-filter: blur(calc(100vw*(20/1500)));
    backdrop-filter: blur(calc(100vw*(20/1500)));
  }

  .header h1 {
    width: calc(100vw*(150/1500));
  }

  .header>div {
    padding: 0 calc(100vw*(80/1500));
  }

  .header .nav_list li:not(:first-of-type) {
    margin-left: calc(100vw*(80/1500));
  }

  .header .nav_list li a {
    font-size: calc(100vw*(14/1500));
  }

  .header .nav_list li input {
    width: calc(100vw*(300/1500));
    padding: calc(100vw*(5/1500)) 0;
  }

  .header .nav_list .search_con input:focus {
    width: calc(100vw*(700/1500));
  }

  .header .nav_list li input::placeholder {
    font-size: calc(100vw*(15/1500));
  }

  .header .nav_list .search_con .search_btn {
    bottom: calc(100vw*(12/1500));
    width: calc(100vw*(24/1500));
    height: calc(100vw*(24/1500));
    background-size: calc(100vw*(16/1500));
  }

  .header .nav_list .search_con input {
    width: calc(100vw*(300/1500));
    padding: calc(100vw*(5/1500)) 0;
    font-size: calc(100vw*(15/1500));
  }

  .header .basket {
    width: calc(100vw*(30/1500));
    height: calc(100vw*(30/1500));
    padding: calc(100vw*(13/1500)) 0 calc(100vw*(5/1500)) 0;
    font-size: calc(100vw*(12/1500));
  }

  .header .basket .basket_num {
    top: calc(100vw*(-2/1500));
    right: calc(100vw*(-11/1500));
    width: calc(100vw*(24/1500));
    height: calc(100vw*(24/1500));
    padding-top: calc(100vw*(3/1500));
    padding-left: calc(100vw*(1/1500));
    font-size: calc(100vw*(12/1500));
  }

  .header .search_del {
    width: calc(100vw*(50/1500));
    height: calc(100vw*(50/1500));
  }

  /* 말풍선 */
  .info_box {
    width: calc(100vw*(20/1500));
    height: calc(100vw*(20/1500));
    margin-left: calc(100vw*(7/1500));
  }

  .info_txt {
    width: calc(100vw*(185/1500));
    padding: calc(100vw*(13/1500));
    font-size: calc(100vw*(14/1500));
    box-shadow: calc(100vw*(8/1500)) calc(100vw*(8/1500)) calc(100vw*(20/1500)) rgba(0, 0, 0, 0.16);
  }

  .info_txt::before {
    width: calc(100vw*(16/1500));
    height: calc(100vw*(14/1500));
    margin-top: calc(100vw*(-2/1500));
  }

  .delivery_btn {
    padding: calc(100vw*(7/1500)) calc(100vw*(14/1500));
    margin-left: calc(100vw*(10/1500));
    font-size: calc(100vw*(11/1500));
  }

}

/* 모바일 */
@media screen and (max-width:900px) {
  .pc_only {
    display: none;
  }

  .mb_only {
    display: block !important;
  }

  .popup {
    bottom: unset;
    top: calc(100vw*(10/428));
    z-index: 101;
  }

  .pop_inner {
    padding: calc(100vw*(12/428)) 0 calc(100vw*(14/428)) 0;
    border-radius: calc(100vw*(6/428));
    width: calc(100vw*(340/428));
  }

  .popup p {
    margin-bottom: 0;
    font-size: calc(100vw*(15/428));
  }

  /* 헤더 */
  .header {
    height: calc(100vw*(50/428));
    padding: 0 calc(100vw*(24/428));
    background-color: #fff;
  }

  .header h1 {
    width: calc(100vw*(120/428));
    filter: brightness(5%);
  }

  .header>div {
    padding: 0;
  }

  .header nav {
    height: calc(100vw*(546/428));
  }

  .header .nav_area {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow-y: scroll;
    transition: all .6s;
  }

  .header .nav_area.active {
    left: 0;
  }

  .header .nav_list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .header .nav_list li a {
    color: #111;
  }

  .header .menu_bar {
    width: calc(100vw*(24/428));
    height: calc(100vw*(24/428));
    filter: brightness(5%);
  }

  .search_del {
    display: none;
  }

  .header .nav_list li a {
    font-size: calc(100vw*(15/428));
    text-decoration: underline;
  }

  .header .nav_list li:nth-child(1) {
    display: none;
  }

  .header .nav_list li:nth-child(6) {
    position: absolute;
    top: calc(100vw*(300/428));
    right: calc(100vw*(24/428));
  }

  .header .nav_list li:nth-child(2) {
    margin-top: calc(100vw*(53/428));
  }

  .header .nav_list li:nth-child(n+2) {
    margin-left: calc(100vw*(24/428));
    margin-bottom: calc(100vw*(30/428));
  }

  .header .basket {
    width: calc(100vw*(30/428));
    height: calc(100vw*(30/428));
    padding: calc(100vw*(13/428)) 0 calc(100vw*(5/428)) 0;
    font-size: calc(100vw*(12/428));
  }

  .header .basket .basket_num {
    top: calc(100vw*(-2/428));
    right: calc(100vw*(-11/428));
    padding-top: calc(100vw*(3/428));
    width: calc(100vw*(24/428));
    height: calc(100vw*(24/428));
    font-size: calc(100vw*(12/428));
  }

  .btn_search {
    position: absolute;
    top: calc(100vw*(300/428));
    right: calc(100vw*(70/428));
    width: calc(100vw*(30/428));
    height: calc(100vw*(30/428));
    filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(53deg) brightness(97%) contrast(100%);
  }

  .btn_search_mb>img {
    width: 100%;
    height: 100%;
  }

  .header .aside_top {
    position: initial;
    height: calc(100vw*(380/428));
    padding: calc(100vw*(45/428)) 0 0 calc(100vw*(25/428));
  }

  .header .btn_close {

    position: absolute;
    top: calc(100vw*(20/428));
    right: calc(100vw*(24/428));
    width: calc(100vw*(16/428));
    height: calc(100vw*(16/428));
    line-height: 1;
  }

  .header .btn_close>img {
    width: 100%;
  }

  .header .page {
    position: absolute;
    top: calc(100vw*(300/428));
    width: calc(100vw*(380/428));
  }

  /* 사이드 메뉴 */
  .aside_menu {
    display: none;
  }

  .aside_cont {
    width: 100%;
    margin: calc(100vw*(80/428)) 0;
    padding-left: 0;
  }

  .aside_top .page {
    margin-top: 0;
    font-size: calc(100vw*(17/428));
  }

  .aside_top .user {
    margin-bottom: calc(100vw*(12/428));
    font-size: calc(100vw*(36/428));
  }

  .aside_top .loginout {
    width: calc(100vw*(68/428));
    height: calc(100vw*(28/428));
    margin-top: calc(100vw*(21/428));
    margin-right: calc(100vw*(10/428));
    font-size: calc(100vw*(12/428));
  }

  .aside_top .info {
    font-size: calc(100vw*(15/428));
  }

  /* 버튼 */
  .btn_small {
    width: calc(100vw*(74/428));
    height: calc(100vw*(28/428));
    font-size: calc(100vw*(12/428));
  }

  .btn {
    height: calc(100vw*(50/428));
    font-size: calc(100vw*(15/428));
  }

  .page_title {
    margin-left: calc(100vw*(10/428));
    padding-bottom: calc(100vw*(17/428));
    font-size: calc(100vw*(20/428));
  }

  .list_none_area p {
    font-size: calc(100vw*(20/428));
  }

  /* 슬라이드 바 */
  .moving_bar {
    bottom: calc(100vw*(30/428));
    width: calc(100vw*(2/428));
    height: calc(100vw*(73/428));
  }

  /* 페이징 번호 */
  .orderbox {
    padding-top: calc(100vw*(40/428));
  }

  .orderbox .num_list>li {
    height: auto;
  }

  .orderbox .num_list>li{
    margin: 0 calc(100vw*(7/428));
    font-size: calc(100vw*(12/428));
  }
  .orderbox .num_list>li button {
    font-size: calc(100vw*(12/428));
  }

  .orderbox .num_prev,
  .orderbox .num_next {
    width: calc(100vw*(24/428));
    height: calc(100vw*(24/428));
    margin: 0 calc(100vw*(20/428));
    background-size: calc(100vw*(24/428));
  }

  /* 푸터 */
  .pc_footer>div {
    max-width: 100%;
    padding: calc(100vw*(17/428)) calc(100vw*(24/428));
  }

  .pc_footer .footer_top {
    flex-direction: column;
    align-items: start;
    margin-bottom: calc(100vw*(20/428));
  }

  .pc_footer .footer_top ul li {
    margin-left: 0;
    margin-right: calc(100vw*(20/428));
  }

  .pc_footer .footer_top h2 {
    margin-bottom: calc(100vw*(20/428));
    width: calc(100vw*(104/428));
    height: calc(100vw*(16/428));
  }

  .pc_footer .footer_top a {
    font-size: calc(100vw*(14/428));
  }

  .pc_footer .footer_bot {
    flex-direction: column;
  }

  #footer address,
  .pc_footer ul li p {
    font-size: calc(100vw*(14/428));
    line-height: 1.8;
  }

  .pc_footer .footer_bot ul {
    text-align: left;
  }

  /* 상품 수량 */
  .quantity_item {
    margin-bottom: calc(100vw*(8/428));
    font-size: calc(100vw*(12/428));
  }

  .mypage_item.full .empty_box1 {
    width: calc(100vw*(60/428));
    ;
  }

  .mypage_item.full .empty_box2 {
    width: calc(100vw*(38/428));
    ;
  }

  .quantity_item .color_box {
    width: calc(100vw*(89/428));
    height: calc(100vw*(38/428));
    font-size: calc(100vw*(12/428));
  }

  .quantity_item .price {
    width: calc(100vw*(150/428));
  }

  .quantity_item .count_wrap {
    width: calc(100vw*(74/428));
  }

  .quantity_item .count_wrap {
    display: flex;
    align-items: center;
  }

  .quantity_item .count_wrap button {
    width: calc(100vw*(13/428));
    height: calc(100vw*(13/428));
  }

  .quantity_item .count_wrap .count_num {
    width: calc(100vw*(30/428));
    margin: 0 calc(100vw*(11/428));
    padding: calc(100vw*(1/428)) calc(100vw*(3/428));
  }

  .quantity_item .delete_btn {
    width: calc(100vw*(38/428));
    height: calc(100vw*(38/428));
    background: #F8F8F8 url(../images/icon/close_b.svg) no-repeat center / calc(100vw*(10/428));
  }

  /* 마이페이지 */
  .mypage_depth {
    width: 100%;
    margin: 0 auto;
  }

  .mypage_info {
    padding-top: calc(100vw*(140/428));
  }

  .mypage_info fieldset {
    width: 100%;
  }

  .mypage_info legend {
    font-size: calc(100vw * (20/428));
    padding: 0 0 calc(100vw * (18/428)) calc(100vw * (10/428));
  }

  /* 모달 */
  .modal_box {
    width: calc(100vw * (378/428));
    padding: calc(100vw * (40/428));
  }

  .modal .modal_txt {
    margin-bottom: calc(100vw * (42/428));
    font-size: calc(100vw * (15/428));
  }

  .modal button {
    width: calc(100vw * (288/428));
    height: calc(100vw * (45/428));
    font-size: calc(100vw * (15/428));
  }

  .modal button:not(last-child) {
    margin-right: calc(100vw * (10/428));
  }

  .modal .btn_modal button {
    width: calc(100vw * (139/428));
    height: calc(100vw * (45/428));
  }

  .btn_modal .confirm {
    font-size: calc(100vw * (15/428));
  }

  /* 말풍선 */
  .info_box {
    width: calc(100vw*(20/428));
    height: calc(100vw*(20/428));
    margin-left: calc(100vw*(7/428));
  }

  .info_txt {
    width: calc(100vw*(185/428));
    padding: calc(100vw*(13/428));
    font-size: calc(100vw*(14/428));
    box-shadow: calc(100vw*(8/428)) calc(100vw*(8/428)) calc(100vw*(20/428)) rgba(0, 0, 0, 0.16);
  }

  .info_txt::before {
    width: calc(100vw*(16/428));
    height: calc(100vw*(14/428));
    margin-top: calc(100vw*(-2/428));
  }

  .delivery_btn {
    padding: calc(100vw*(7/428)) calc(100vw*(14/428));
    margin-left: calc(100vw*(10/428));
    font-size: calc(100vw*(11/428));
  }

}