@charset "UTF-8";


/** preset : 텍스트 **/
.bold {
    font-weight: bold;
}
.underline {
    text-decoration: underline !important;
}
big { 
    font-size : var(--fontsize-title) 
}

/** preset : 즐겨찾기 버튼 **/
button.favorite { 
    position : absolute ; width : 18px ; height : 18px ; top : 21px ; right : 21px ; background : url('/images/btn-favorite.svg') center no-repeat ; display : inline-block ; z-index : 10 
}
button.favorite.on { 
    background-image : url('/images/btn-favorite.on.svg') 
}

/** preset : 닫기 버튼 **/
button.close { width : 12px ; height : 12px ; position : absolute ; top : 40px ; right : 83px ; background : url('/images/ico-close.svg') center no-repeat ; transition : ease-out .2s }
button.close:hover { transform : rotate(180deg) }

/** preset : 버튼 모양 **/
.buttons { display : block ; width : 100% }
.buttons button,.btn { display : block ; width : 100% ; height : 45px ; font-size : var(--fontsize) ; transition : ease-out .2s ; border : solid 1px var(--gray) ; text-align : center ; line-height : 43px ; position : relative ; background-color : var(--white); cursor : pointer; color:#000;}
.address.wrap-480 .btn.black {margin-top:40px;}
.buttons button.black,
.buttons button.on,
.btn.black,
.btn.on { background-color : var(--black) ; color : var(--white) }
.buttons button.blue,
.btn.blue { background-color : var(--blue) ; color : var(--white) ; border-color : var(--blue) }
.buttons button[disabled] {
  color: #909090;
  background-color: #FFFFFF;
  border: 1px solid #EAEAEA;
  pointer-events: none;
}
.buttons button ~ button,.buttons .btn ~ .btn { margin-top : 10px }
.buttons button.off,.buttons .btn.off { border-color : var(--border-color) }
.buttons button.off:hover,.buttons .btn.off:hover { border-color : var(--black) }

.buttons button > .text,.btn > .text,
.buttons button > .hover,.btn > .hover { position : absolute ; overflow : hidden ; top : 0 ; left : 0 ; width : 100% ; height : 100% }
.buttons button > .hover,.btn > .hover { width : 0 ; left : 50% ; background-color : var(--black) ; color : var(--white) ; transition : ease-out .2s }
.buttons button > .hover > .text,.btn > .hover > .text { width : 100% ; word-break: keep-all; }
.buttons button:hover > .hover,.btn:hover > .hover { width : 100% ; left : 0 }

.buttons.grid-2 { display : grid ; grid-gap : 10px ; grid-template-columns : 1fr 1fr }
.buttons.grid-2 button ~ button { margin-top : 0 }

.buttons.grid-3 { display : grid ; grid-gap : 10px ; grid-template-columns : 1fr 1fr 1fr }
.buttons.grid-3 button ~ button { margin-top : 0 }

.buttons.grid-4 { display : grid ; grid-gap : 10px ; grid-template-columns : 1fr 1fr 1fr 1fr }
.buttons.grid-4 button ~ button { margin-top : 0 }

.buttons button.gray,
.btn.gray { color : var(--gray) ; border-color : var(--border-gray-color) }

.buttons button.more { border-color : var(--border-gray-color) }
.buttons button.more:after { content : "" ; width : 9px ; height : 5px ; display : inline-block ; vertical-align : middle ; background : url('/images/ico-more.svg') center no-repeat ; transition : ease-out .2s }
.buttons button.more.fold:after { transform : rotate(180deg) }

.buttons button.small,.btn.small { width : auto ; padding : 0 8px ; height : 26px ; line-height : 24px ; display : inline-block }

/** preset : 체크박스, 라디오 버튼 **/
label { position : relative }
label,label * { cursor : pointer }
label input { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; opacity : 0 }
label input + i { border : solid 1px var(--black) ; width : 10px ; height : 12px ; vertical-align : middle ; margin-right : 5px ; display : inline-block }
label input:checked + i { background-color : var(--black) }

/** preset : 날짜 검색 **/
.date-search { background-color : var(--content-bg) ; width : 100% ; padding : 8px 10px ; position : relative ; margin-bottom : 20px }
.date-search,
.date-search button { font-size : var(--fontsize-sub) }
.date-search ul { display : inline-grid ; grid-template-columns : repeat(4,65px) ; background-color : var(--white) }
.date-search ul > li { position : relative ; height : 45px ; border : solid 1px var(--border-gray-color) ; text-align : center ; margin-left : -1px }
.date-search ul > li button { width : 100% ; height : 45px }
.date-search ul > li:hover { border-color : var(--gray) }
.date-search ul > li:hover:after { content : "" ; width : 1px ; height : 100% ; top : 0 ; right : -1px ; z-index : 2 ; background-color : var(--gray) ; display : inline-block ; position : absolute }
.date-search .inp { text-align : center ; display : grid ; grid-template-columns : 150px 10px 150px ; position : absolute ; top : 8px ; right : 120px ; line-height : 43px }
.date-search .inp > .item { background-color : var(--white) ; border : solid 1px var(--border-gray-color) ; position : relative }
.date-search .inp > .item input { opacity : 0 ; position : absolute ; z-index : 2 ; top : 0 ; left : 0 ; cursor : pointer ; width : 100% ; height : 43px }
.date-search .inp > .item .select { width : 100% ; height : 100% }
.date-search .inp > .item .select:before { content : "" ; display : inline-block ; margin-right : 10px ; width : 13px ; height : 13px ; background : url('/images/ico-calendar.svg') center no-repeat ; vertical-align : middle }
.date-search .inp > .item .calendar { display : none ; width : 310px ; border-right : solid 1px var(--gray) ; border-left : solid 1px var(--gray) ; border-bottom : solid 1px var(--gray) ; background-color : var(--white) ; position : absolute ; z-index : 2 ; top : 43px ; left : -1px ; padding : 20px 10px }
.date-search .inp > .item .calendar:before { content : "" ; width : 160px ; height : 1px ; background-color : var(--gray) ; display : inline-block ; position : absolute ; right : 0 ; top : 0 }
.date-search .inp > .item .calendar table { width : 100% }
.date-search .inp > .item .calendar table thead th { line-height : 16px ; position : relative ; font-weight : var(--fontweight-m) }
.date-search .inp > .item .calendar table thead th button { display : inline-block ; width : 16px ; height : 16px ; background-repeat : no-repeat ; background-position : center ; cursor : pointer ; position : absolute ; top : 0 }
.date-search .inp > .item .calendar table thead th button.prev { left : calc( 50% - 58px ) ; background-image : url('/images/ico-angle-prev.svg') }
.date-search .inp > .item .calendar table thead th button.next { right : calc( 50% - 58px ) ; background-image : url('/images/ico-angle-next.svg') }
.date-search .inp > .item .calendar table tbody { line-height : 32px }
.date-search .inp > .item .calendar table tbody > tr > td { width : calc( 100% / 7 ) ; cursor : pointer }
.date-search .inp > .item:last-child .calendar { left : initial ; right : -1px }
.date-search .inp > .item:last-child .calendar:before { right : initial ; left : 0 }
.date-search .inp > .item.on { border-color : var(--gray) }
.date-search .inp > .item.on .calendar { display : block }
.date-search button[type='submit'].btn { position : absolute ; right : 10px ; top : 8px ; width : 100px ; height : 45px ; background-color : var(--white) ; border : solid 1px var(--gray) }

.date-search .inp > .item-date { background-color : var(--white) ; border : solid 1px var(--border-gray-color) ; position : relative }
.date-search .inp > .item-date input { cursor: pointer; height: 43px; font-size: 12px;  }
.date-search .inp > .item-date input::-webkit-datetime-edit-text {
  -webkit-appearance: none;
  display: none;
}
.date-search .inp > .item-date input::-webkit-datetime-edit-month-field{
  -webkit-appearance: none;
  display: none;
}
.date-search .inp > .item-date input::-webkit-datetime-edit-day-field {
  -webkit-appearance: none;
  display: none;
}
.date-search .inp > .item-date input::-webkit-datetime-edit-year-field {
  -webkit-appearance: none;
  display: none;
}
.date-search .inp > .item-date input::before {
  color: #444444;
  content: attr(placeholder);
  position:absolute;
}
@media only screen and (max-width: 1024px) {
  .date-search .inp > .item-date input::before {
    display: none;
  }
}

/** preset : 페이지 하단 상품 슬라이드 **/
.swiper-row { padding-top : 96px ; height : 756px ; position : relative ; overflow : hidden ; background-color : var(--white) ; border-bottom : none !important }
.swiper-row > h2 { position : absolute ; top : 60px ; left : 40px ; font-size : var(--fontsize) ; font-weight : var(--fontweight) }
.swiper-row .swiper-container { width : calc( 100% + 1px ) ; overflow : hidden ; margin-left : -1px }
.swiper-slide.goods-list { width : 432px ; height : 660px ; padding-top : 540px ; border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) ; border-right : solid 1px var(--border-gray-color) ; }
.swiper-slide.goods-list > a.image { display : block ; width : 100% ; height: 540px ; position : absolute ; top : 0 ; left : 0 ; background-size : cover ; background-position : center ; border-bottom : solid 1px var(--border-gray-color) }
.swiper-slide.goods-list .info { padding : 12px 9px }
.swiper-slide.goods-list ul.size { display : table; }
.swiper-slide.goods-list ul.size > li { display : table-cell; padding-right: 12px; line-height: 11px; }
.swiper-row .swiper-container > .swiper-wrapper > .swiper-slide.goods-list:first-child { border-left : solid 1px var(--border-gray-color) }

/** preset : tab **/
.tab > .tab-container { text-align : center }
.tab > .tab-container > ul { display : grid ; grid-template-columns: repeat(auto-fill, minmax(50%, auto)) ; width : 100% ; border-bottom : solid 1px var(--border-color) }
.tab > .tab-container > ul > li { cursor : pointer ; opacity : .5 ; padding : 20px 0 15px 0 ; position : relative }
.tab > .tab-container > ul > li.on { opacity : 1 }
.tab > .tab-container > ul > li.on:before { content : "" ; width : 100% ; height : 3px ; background-color : var(--black) ; position : absolute ; display : inline-block ; left : 0 ; bottom : -2px }
.tab > section:not(.on) { display : none }

body > section.modal .tab > .tab-container > ul > li { padding : 13px 0 }

/** preset : form **/
.form-inline { width : 100% ; position : relative ; padding-top : 26px }
.form-inline ~ .form-inline:not(.no-margin) { margin-top : 20px }
.grid > .form-inline,
.grid > .form-inline ~ .form-inline { margin-top : 0 }
.form-inline .control-label { position : absolute ; display : inline-block ; font-size : var(--fontsize-sub) ; top : 0 ; left : 0 ; transition : ease-out .2s ; z-index : -1 }
.modal .form-inline .control-label { z-index : 1 }
.form-inline input:not([type='checkbox']):not([type='radio']),
.form-inline select,
.form-inline textarea,
.form-inline .val,
.form-inline .textarea { width : 100% ; height : 35px ; font-size : var(--fontsize-sub) ; padding : 0 20px ; border : solid 1px var(--gray) ; background : none }
.form-inline .textarea { height : auto ; min-height : 250px ; padding : 15px 20px }
.form-inline .inp-row { width : 100% ; position : relative }
.form-inline .inp-row ~ .inp-row { margin-top : 10px }
.form-inline .inp-row.has-btn { display : grid ; grid-gap : 10px ; grid-template-columns : 1fr minmax(110px, 50%) }
.form-inline .inp-row.has-btn button { height : 40px ; background-color :var(--black) ; color : var(--white) }

.form-inline .textarea ~ .placeholder { position : absolute ; top : 41px ; left : 20px ; opacity : .5 }
.form-inline .textarea:focus ~ .placeholder, 
.form-inline .textarea.has-value ~ .placeholder { display : none }
.form-inline select { background : url('/images/ico-select-arrow.svg') calc( 100% - 10px ) center no-repeat } 

.form-inline .foreign {display:flex;gap:10px;margin-top:15px;}
.form-inline .foreign .country {width:50%!important;}
.form-inline .foreign .province {width:50%!important;}

.form-inline .val { border : none ; padding : 0 }

.form-inline ul.checkbox { display : grid ; grid-template-columns: repeat(auto-fill, 44px) ; margin-top : 1px }
.form-inline ul.checkbox > li { position : relative ; height : 44px }
.form-inline ul.checkbox > li label { position : absolute ; top : -1px ; left : 0 ; width : 45px ; height : 45px ; text-align : center ; line-height : 43px }
.form-inline ul.checkbox > li label,
.form-inline ul.checkbox > li label * { cursor : pointer }
.form-inline ul.checkbox > li label span,
.form-inline ul.checkbox > li label input { position : absolute ; top : 0 ; left : 0 ; width :100% ; height : 100% }
.form-inline ul.checkbox > li label input { opacity : 0 }
.form-inline ul.checkbox > li label input + span { border : solid 1px var(--border-gray-color) }
.form-inline ul.checkbox > li label input:checked + span { border-color : var(--gray) ; z-index : 2 }

.form-inline.no-label { padding-top : 0 }
.form-inline.no-label .control-label { display : none }
.form-inline.no-label .textarea ~ .placeholder { top : 15px }

.form-inline.height45 input:not([type='checkbox']):not([type='radio']),
.form-inline.height45 select,
.form-inline.height45 textarea,
.form-inline.height45 .textarea { height : 45px }


.form-inline.inline-label .control-label { top : 28px ; color : var(--control-label-color) ; opacity : .5 ; line-height : 16px }
.form-inline.inline-label .val,
.form-inline.inline-label input:not([type='checkbox']):not([type='radio']),
.form-inline.inline-label select { border-top : none ; border-left : none ; border-right : none ; border-color : var(--quick-border) ; padding : 0 }
.form-inline.inline-label .val ~ .control-label,
.form-inline.inline-label select.has-value ~ .control-label,
.form-inline.inline-label input:not([type='checkbox']):not([type='radio']).has-value ~ .control-label,
.form-inline.inline-label input:not([type='checkbox']):not([type='radio']):focus ~ .control-label,
.form-inline.inline-label input:not([type='checkbox']):not([type='radio']):not(:placeholder-shown) ~ .control-label { top : 13px ; font-size : var(--fontsize-s) }
.form-inline.inline-label .textarea { margin-top : -26px }
.form-inline.inline-label .textarea ~ .control-label { top : 21px ; left : 21px }
.form-inline.inline-label .textarea:focus ~ .control-label,
.form-inline.inline-label .textarea.has-value ~ .control-label { display : none }
.form-inline.inline-label .val { border-bottom : none ; line-height : 35px }

.form-inline:not(.inline-label) .control-label.inline { opacity : .5 ; left : 10px ; top : 40px }
.form-inline:not(.inline-label) input:focus ~ .control-label.inline,
.form-inline:not(.inline-label) input:not(:placeholder-shown) ~ .control-label.inline { top : 5px ; left : 0 }

.form-inline.inline-label .vaild { display : none ; color : var(--red) ; position : absolute ; top : 10px ; left : 0 ; font-size : 10px }
.form-inline.inline-label .vaild.on { display : block }
.form-inline.inline-label .vaild.on ~ .control-label { display : none }

.form-inline button { width : 100px ; height : 45px ; border : solid 1px var(--gray) ; position : absolute ; right : 0 ; bottom : 0 ; font-size : 11px }
.form-inline.inline-label button { height : 37px ; border-color : var(--black) }
.form-inline button.width150 { width : 150px }
.form-inline button.black { border-color : var(--black) ; background-color : var(--black) ; color : var(--white) }
.form-inline button:not(.pw-view-toggle) + input { width : calc( 100% - 110px ) !important }
.form-inline button.width150:not(.pw-view-toggle) + input { width : calc( 100% - 160px ) !important }
.form-inline button.pw-view-toggle { background : url('/images/ico-pw-view-off.svg') center no-repeat ; height : 28px ; width : 38px ; bottom : initial ; top : 24px ; border : none }
.form-inline button.pw-view-toggle.view-alphanet { background-image : url('/images/ico-pw-view.svg') }

#frm-modal-delivery .search_button {width:80px!important;}
#frm-modal-delivery .keyword::-webkit-input-placeholder{color: #abb4bd;}

.form-inline.file { display : flex }
.form-inline.file .cont { display : inline-block ; width : 45px ; height : 45px ; position : relative ; background : url('/images/ico-increase.svg') center no-repeat ; border : solid 1px var(--gray) }
.form-inline.file .cont * { cursor : pointer }
.form-inline.file .cont label { position : absolute ; width : 100% ; height : 100% }
.form-inline.file .cont label input { position : absolute; width : 100% ; height : 100% ; opacity : 0 }
.form-inline.file .cont ~ .cont { margin-left : 10px }

.form-inline.image { height : 86px; display : flex; }
.form-inline .image { display : inline-block ; border : solid 1px var(--gray) ; width : 60px ; height : 60px ; background : url('/images/ico-plus.svg') center no-repeat }
@media only screen and (max-width: 1024px) {
  .form-inline .image { display : inline-block ; border : solid 1px var(--gray) ; width : 46px ; height : 46px ; background : url('/images/ico-plus.svg') center no-repeat }
}
.form-inline .image,
.form-inline .image * { cursor : pointer }
.form-inline .image ~ .image { margin-left : 10px }
.form-inline .image input { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; opacity : 0 }

.form-inline .remark { border : solid 1px var(--gray) ; width : 100% ; padding : 20px ; margin-top : 20px ; display : none }
.form-inline .remark ul.dot { margin : 0 }
/*.form-inline input:focus ~ .remark { display : block }*/

.form-inline .unit { position : absolute ; right : 10px ; bottom : 10px }
.form-inline .unit ~ input { padding-right : 30px !important ; text-align : right }
.form-inline.inline-label .unit ~ .control-label { top : 32px }

html[lang='ko'] .form-inline #to_zipcode {
  width: calc(100% - 120px);
}
.form-inline #to_zipcode::placeholder {
  color: var(--control-label-color);
  opacity: .5;
  font-weight: 400;
}
body.modal-open {
  overflow: hidden;
}
.add-delivery-section {
  position: relative;
}
section .addr-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
}
section .addr-modal-article {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
section .addr-modal {
  width: 480px;
  height: 570px;
  display: grid;
  grid-template-rows: 45px auto 45px;
  margin: auto;
  background-color: #fff;
}
section .addr-modal-article .addr-modal {
  height: 525px;
  grid-template-rows: auto;
}
section .addr-modal .modal-header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #808080;
  padding: 15px 40px;
}
section .addr-modal .modal-header .title {
  font-weight: 400;
  font-size: 11px;
  line-height: 100%;
}
section .addr-modal .modal-header .close {
  position: relative;
  top: unset;
  right: unset;
}
section .addr-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: inherit;
  padding: 40px 17px 0 40px;
}
section .addr-modal .modal-body #postcodify {
  padding-right: 23px;
}
section .addr-modal .modal-footer {
  width: 100%;
  height: 100%;
}
section .addr-modal .modal-footer > button {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  background-color: #000;
  font-weight: 400;
  font-size: 11px;
  line-height: 100%;
  cursor: pointer;
}
@media only screen and (max-width: 1024px) {
  section .addr-modal-article {
    width: 100%;
  }
  section .addr-modal-article .addr-modal {
    width: 100%;
    height: 500px;
  }
  section .addr-modal .modal-body {
    padding: 40px 0 0 0;
  }
  section .addr-modal-article .addr-modal .modal-body #postcodify {
    padding-right: 0;
  }
  section .addr-modal-article div.postcodify_search_result {
    width: 100%;
  }
}

/** preset : search form **/
form.search { position : relative }
form.search input[name='keyword'] { width : 100% ; padding-left : 24px ; background : url('/images/ico-search.svg') left center no-repeat }
form.search input[name='keyword'] + button { position : absolute ; right : 0 ; bottom : 0 ; height : 24px ; padding-left : 19px ; background : url('/images/ico-reset.svg') left 7px no-repeat ; display : none }
form.search input[name='keyword']:not(:placeholder-shown) + button { display : block }



/** preset : modal **/
.modal { position : fixed ; display : none ; top : 0 ; left : 0 ; width : 100% ; height : 100% ;  z-index : 1001 ; background : rgba(0,0,0,.15) ; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.modal.on { display : grid ; place-items : center }
.modal > section { position : relative ; background-color : var(--white) }
.modal > section > *, 
.modal > section > form > * { width : 100% ; background-color : var(--white) }
.modal > section > header,
.modal > section > form > header { height : 45px ; border-bottom : solid 1px var(--gray) ; padding : 0 40px ; line-height : 44px ; position : absolute ; left : 0 ; bottom : 100% }
.modal > section > header > button.close,
.modal > section > form > header > button.close { top : 17px ; right : 40px }
.modal > section > section,
.modal > section > form > section { padding : 100px 40px }
.modal > section > footer,
.modal > section > form > footer { height : 45px ; position : absolute ; left : 0 ; top : 100% }
.modal ul.dot { font-size : var(--fontsize-s)}

.modal.alert > section > section { min-width : 360px ; min-height : 260px ; display : grid ; place-items : center }
.modal.alert > section > section > button.close { top : 20px ; right : 20px }

/** preset : grid **/
.grid { display : grid !important }
.grid.col-2 { grid-template-columns : repeat(2, 1fr) }
.grid.col-3 { grid-template-columns : repeat(3, 1fr) }
.grid.gap-10 { gap : 10px }
.grid.gap-15 { gap : 15px }
.grid.gap-20 { gap : 20px }

/** preset : 컨텐츠 가운데 정렬 **/
.item-center { padding : 0 !important ; height: calc( 100vh - 100px ); display: grid; place-items: center; }


/** preset : dot list **/
ul.dot { margin : 20px 0 }
ul.dot > li { line-height : 15px ; font-size : 11px ; padding-left : 7px ; position : relative }
ul.dot > li ~ li { margin-top : 11px }
ul.dot > li > ul > li:before { content : "- " }
ul.dot.margin20 > li ~ li { margin-top : 20px }
ul.dot > li:before { content : "" ; display : inline-block ; width : 2px ; height : 2px ; background-color : var(--black) ; position : absolute ; top : 7px ; left : 0 ; border-radius : 50% }
ul.dot > li a { border-bottom : solid 1px var(--black) }

/** preset : table **/
table.simple { border-top : solid 1px var(--border-color) ; border-right : solid 1px var(--border-color) }
table.simple th,
table.simple td { font-size : 10px ; font-weight : 400 ; text-align : center ; padding : 10px 0 ; line-height : 13px ; border-bottom : solid 1px var(--border-color) ; border-left : solid 1px var(--border-color) }

ul.table-info { display : grid ; width : 100% ; grid-auto-flow: column dense; height : 90px ; border : solid 1px var(--border-color) }
ul.table-info > li { border-left : solid 1px var(--border-color) ; text-align : center ; position : relative ; padding-top : 20px }
ul.table-info > li:first-child { border-left : none }
ul.table-info > li .number { position : absolute ; left : 0 ; bottom : 19px ; width : 100% }

/** preset : animation **/

/** preset : 뒤로가기 **/
#btn-mobile-history-back { display : none ; border-bottom : solid 1px var(--border-color) ; width : 100% ; height : 45px ; text-align : left ; padding-left : 37px ; background : url('/images/ico-back.svg') 20px center no-repeat }
#btn-mobile-history-back:before { content : "뒤로가기" ; font-size : 10px }
#btn-mobile-history-back.EN:before { content : "Back" ; font-size : 10px }
#btn-mobile-history-back[data-back_en]:before {
  content: "back";
}

.btn-mobile-history-back { display : none ; border-bottom : solid 1px var(--border-color) ; width : 100% ; height : 45px ; text-align : left ; padding-left : 37px ; padding-bottom : 4px ; background : url('/images/ico-back.svg') 20px center no-repeat }
.btn-mobile-history-back.KR:before { content : "뒤로가기" ; font-size : 10px }
.btn-mobile-history-back.EN:before { content : "뒤로가기" ; font-size : 10px }


/** preset : 하단 상품 스와이프 **/
.bottom-goods-slide h2 { width : 100% ; font-size : 11px ; line-height : 15px ; padding : 50px 40px 20px 40px }
.bottom-goods-slide .swiper-container { border-top : solid 1px var(--border-color) ; border-bottom : solid 1px var(--border-color) }
.bottom-goods-slide .swiper-slide { max-width : 432px ; height : 660px ; border-right : solid 1px var(--border-color) }
.bottom-goods-slide .swiper-slide .image { width : 100% ; height : 540px ; display : block ; background-size: cover ; background-position : center }
.bottom-goods-slide .swiper-slide .info { height : 120px }

/** preset : 그리드 갤러리 **/
.gallery-grid { display : grid ; grid-template-columns : repeat(3, 1fr) }
.gallery-grid.col-2 { grid-template-columns : repeat(2, 1fr) }
.gallery-grid.col-3 { grid-template-columns : repeat(3, 1fr) }
.gallery-grid.col-4 { grid-template-columns : repeat(4, 1fr) }
.gallery-grid img { display : block ; width : 100% }
.gallery-grid ~ p,
.gallery-grid ~ .buttons:not(.more) { padding-top : 60px }
.gallery-grid.hide-after-8 > li:nth-child(8) ~ li { display : none }
.gallery-grid > li { position : relative }
.gallery-grid > li > p { position : absolute ; top : 17px ; left : 22px }

/** preset : 스크롤바 숨기기 **/
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }


/** preset : contents list **/
dl.contents-list { width : 100% }
dl.contents-list ~ dl.contents-list { margin-top : 40px }
dl.contents-list > dt { border-bottom : solid 1px var(--footer-border) ; font-size : 13px ; line-height : 17px ; padding : 11px 0 }
dl.contents-list > dd { font-size : 12px ; line-height : 16px ; padding : 10px 0 }
dl.contents-list > dd a { display : block ; width : 100% ; background : url('/images/ico-angle-right.svg') calc( 100% - 10px ) center no-repeat }
dl.contents-list > dt + dd { padding-top : 20px }

ul.contents-list > li.empty { border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) ; padding : 100px 0 ; text-align : center }

/** preset : 설명박스 **/
.--describe { background-color : var(--content-bg) ; line-height : 16px ; font-size : 12px ; padding : 20px ; width : 100% ; text-align : left }

/** preset : to top **/
.div_top { display:grid !important; justify-content:center; padding-top: 60px; }
@media only screen and (max-width: 1024px) {
  .div_top { padding-top: 30px; }
}
button.to-top { width : 41px ; height : 46px ; cursor : pointer ; background : url('/images/to-top.svg') center no-repeat ; }

/** preset : wrap **/
.wrap-480 { max-width : 480px ; width : 100% ; margin : auto }
.wrap-720 { max-width : 720px ; width : 100% ; margin : auto }

/** preset : width **/
.width-480 { width : 480px }

/** preset : info box **/
.infobox { background-color : var(--content-bg) ; padding : 20px ; font-size : var(--fontsize-sub) }
.infobox small.info-text { display : block ; margin-top : 20px ; font-size : var(--fontsize) }
.as.status .infobox .info-text { margin-top:0px; }

.pay.ok .infobox { 
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color : #FFF;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
}
.pay.ok .infobox > div { 
  display: flex;
  gap: 10px;
}
.pay.ok .infobox .complete span {font-family: Futura LT Pro;font-weight: 400;font-size: 12px;line-height: 100%;letter-spacing: 0%;color:#808080;}
.pay.ok .infobox * { 
  font-weight: 400;
}

/** preset : 컬러칩 **/
.colorchip { display : inline-block ; width : 5px ; height : 5px ; border-radius : 50% ; margin-left : 4px }
.colorchip.multi { background : var(--goods-color-multi) }

/** preset : 제목 **/
h1.bottom-line,
h2.bottom-line,
h3.bottom-line { border-bottom : solid 1px var(--gray-color) ; padding-bottom : 10px ; margin-bottom : 20px }


/** preset : 가격 정보 **/
dl.price-info { display : grid ; grid-template-columns : 1fr 1fr ; border-bottom : solid 1px var(--border-gray-color) ; line-height : var(--lineheight-title); gap: 25px 0; }
dl.price-info:first-child { padding-bottom: 14px; }
dl.price-info.pay-method { border-bottom : none }
/* dl.price-info > * { min-height : 41px } */
dl.price-info > *:last-child { min-height : auto }
dl.price-info > dd { text-align : right }
dl.price-info > dd > small { display : block ; color : var(--gray) }
dl.price-info > dd.total { font-size : var(--fontsize-title) ; text-decoration : underline }
dl.price-info + dl.price-info { margin-top : 14px }
dl.price-info + dl.price-info > *.h27 { min-height : 27px }

/** 배송정보 **/
dl.delivery-info { display : grid ; grid-template-columns : 1fr 1fr ; border-bottom : solid 1px var(--border-gray-color) ; line-height : var(--lineheight-title) }
.fold-delivery dl.delivery-info { border-bottom: none;}
dl.delivery-info > * { min-height : 41px }
dl.delivery-info > *:last-child { min-height : auto }
dl.delivery-info > dd { text-align : right }
dl.delivery-info + dl.price-info { margin-top : 14px }
dl.delivery-info + dl.price-info > *.h27 { min-height : 27px }

.modal-pay-delivery article form { overflow-y:scroll; padding:25px; height:480px; }

/***********************************************************************************************************/




/** layout **/
body > main { padding-top : 45px ; padding-bottom : 200px ; position : relative  }


/** quick aside **/
body > aside { position : fixed ; right : 0 ; bottom : 0 ; z-index : 999 }
body > aside button.close { top : 25px ; right : 25px ; z-index : 2 }
body > aside > ul { position : absolute ; height : 110px ; bottom : 40px ; right : 40px }
body > aside > ul > li { position: absolute ; right : 0 ; transition : cubic-bezier(0, 0, 0, 1.1) .5s ; background-color : var(--white) ; border : solid 1px var(--quick-border) ; overflow : hidden ; width : 50px ; height : 50px ; border-radius : 50% }
body > aside > ul > li > button.quick { width : 100% ; height : 100% ; background-position : center ; background-repeat : no-repeat }
body > aside > ul > li > section { position : relative ; padding : 20px }
body > aside > ul > li > section header { position : relative ; line-height : 22px }
body > aside > ul > li > section footer { padding : 5px 15px }
body > aside > ul > li.recently-viewed { bottom : 60px }
body > aside > ul > li.recently-viewed > button.quick { background-image : url('/images/ico-quick-recently.svg') }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul { grid-template-columns : repeat(3, 1fr) }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li { background-position : center ; background-repeat : no-repeat }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li.recently { background-image : url('/images/ico-quick-recently.svg') }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li.popular { background-image : url('/images/ico-quick-top.svg') }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li.wishlist { background-image : url('/images/ico-quick-wishlist.svg') }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li.recently.on { background-image : url('/images/ico-quick-recently.on.svg') }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li.popular.on { background-image : url('/images/ico-quick-top.on.svg') }
body > aside > ul > li.recently-viewed .tab > .tab-container > ul > li.wishlist.on { background-image : url('/images/ico-quick-wishlist.on.svg') }

body > aside > ul > li.recently-viewed ul.list { display : grid ; grid-template-columns : repeat(3,1fr) ; gap : 10px ; margin : 20px 0 15px 0 ; overflow-y : auto ; max-height : calc( 100vh - 255px ) }
body > aside > ul > li.recently-viewed ul.list > li { text-align : center ; height : 226px ; position : relative }
body > aside > ul > li.recently-viewed ul.list > li.empty { padding : 100px 0 ; grid-column : 1 / 4 }
body > aside > ul > li.recently-viewed ul.list > li a { position : absolute ; left : 0 ; top : 0 ; width : 100% ; height : 100% ; padding-top : 175px ; font-size : var(--fontsize-s) }
body > aside > ul > li.recently-viewed ul.list > li a .image { position : absolute ; width : 100% ; height : 170px ; background-position : center ; background-size : cover ; top : 0 ; left : 0 }
body > aside > ul > li.recently-viewed ul.list > li button.favorite { top : 10px ; right : 10px }
body > aside > ul > li.recently-viewed section.popular ul.list > li:before { display : inline-block ; width : 20px ; height : 20px ; background-color : var(--black) ; color : var(--white) ; font-size : var(--fontsize-s) ; text-align : center ; line-height : 20px ; position : absolute ; top : 0 ; left : 0 ; z-index : 2 }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(1):before { content : "01" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(2):before { content : "02" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(3):before { content : "03" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(4):before { content : "04" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(5):before { content : "05" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(6):before { content : "06" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(7):before { content : "07" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(8):before { content : "08" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(9):before { content : "09" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(10):before { content : "10" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(11):before { content : "11" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(12):before { content : "12" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(13):before { content : "13" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(14):before { content : "14" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(15):before { content : "15" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(16):before { content : "16" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(17):before { content : "17" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(18):before { content : "18" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(19):before { content : "19" }
body > aside > ul > li.recently-viewed section.popular ul.list > li:nth-child(20):before { content : "20" }
body > aside > ul > li.qna { bottom : 0 }
body > aside > ul > li.qna > button.quick { background-image : url('/images/ico-quick-qna.svg') }
body > aside > ul > li.qna header { padding-bottom : 20px }
body > aside > ul > li.qna header i { width : 14px ; height : 14px ; display : inline-block ; vertical-align : sub ; background : url('/images/ico-qna.svg') center no-repeat ; margin-right : 6px }
body > aside > ul > li.qna article.category ul { display : grid ; grid-template-columns : repeat(4, 1fr) ; gap : 10px ; margin-top : 20px }
body > aside > ul > li.qna article.category ul > li { height : 40px ; border : solid 1px var(--border-gray-color) ; line-height : 38px ; text-align : center ; cursor : pointer }
body > aside > ul > li.qna article.category ul > li:hover { border-color : var(--black) }
body > aside > ul > li.qna article.chat { display : none ; max-height : 500px ; overflow-y : auto }
body > aside > ul > li.qna article.chat .buttons { margin-top : 20px }
body > aside > ul > li.qna article.chat > ul { width : 100% }
body > aside > ul > li.qna article.chat > ul > li ~ li { margin-top : 20px }
body > aside > ul > li.qna article.chat > ul > li.me { text-align : right }
body > aside > ul > li.qna article.chat > ul > li.me > .cont { display : inline-block ; border : solid 1px var(--gray) ; line-height : 38px ; padding : 0 30px ; margin-bottom : 10px ; position : relative }
body > aside > ul > li.qna article.chat > ul > li.me > .cont:before { content : "" ; width : 18px ; height : 12px ; background : url('/images/ico-chat-tail-me.svg') right bottom no-repeat ; display : inline-block ; position : absolute ; bottom : -10px ; right : 10px }
body > aside > ul > li.qna article.chat > ul > li.me > .cont:after { content : "" ; width : 18px ; height : 2px ; background : var(--white) ; display : inline-block ; position : absolute ; bottom : 0 ; right : 10px }
body > aside > ul > li.qna article.chat > ul > li.you { position : relative ; padding : 20px  ; margin-bottom : 30px ; background-color: var(--content-bg) }
body > aside > ul > li.qna article.chat > ul > li.you:before { content : "" ; width : 18px ; height : 12px ; background : url('/images/ico-chat-tail-you.svg') right bottom no-repeat ; display : inline-block ; position : absolute ; bottom : -10px ; left : 10px }
body > aside > ul > li.qna article.chat > ul > li.you > ul { margin-top : 20px }
body > aside > ul > li.qna article.chat > ul > li.you > ul > li { border : solid 1px var(--gray) ; background-color : var(--white) ; padding : 11px ; text-align : center ; cursor : pointer }
body > aside > ul > li.qna article.chat > ul > li.you > ul:not(.category) > li ~ li { margin-top : 10px }
body > aside > ul > li.qna article.chat > ul > li.you > ul.category { display : grid ; grid-template-columns : repeat(4, 1fr) ; gap : 10px }
body > aside > ul > li.qna article.category.hidden + article.chat { display : block }
body > aside > ul > li.qna footer { padding : 20px 20px 0 20px }

body > aside > ul > li.on { width : 480px ; height : auto ; border-radius : 0 ; z-index : 2 ; right : -40px ; bottom : -40px }
body > aside > ul > li.on > button.quick { display : none }

body > aside.bottom { position : absolute }
body > aside.bottom dl > dt { height : calc( 25% + 2px ) }

/** 메인랜딩, 콜라보 페이지,컬렉션 페이지, 에디토리얼 페이지, 
마이페이지 main 페이지, 결제 페이지, 카테고리(GNB), 로그인,
쇼핑백(메뉴),위시리스트(메뉴) 퀵뷰 노출 x **/
body > main.intro ~ aside:not(#usercentrics-cmp-ui),
body > main.collaboration ~ aside:not(#usercentrics-cmp-ui),
body > main.editorial ~ aside:not(#usercentrics-cmp-ui),
body[data-path="/my"] > aside:not(#usercentrics-cmp-ui),
body > main.pay ~ aside:not(#usercentrics-cmp-ui),
body > main.login ~ aside:not(#usercentrics-cmp-ui),
body > main.join ~ aside:not(#usercentrics-cmp-ui) { display : none }

/** footer **/
body > footer { padding : 40px ; font-size : 10px ; line-height : 2.1 ; border-top : solid 1px var(--footer-border) }
body > footer h1,body > footer h2 { font-size : 12px ; line-height : 17px ; padding-bottom : 30px }
body > footer address { font-style : normal }
body > footer > section { display : grid ; grid-template-columns: minmax(40%, auto) minmax(15%,308px) minmax(15%,308px) minmax(15%,308px) minmax(15%,308px) }
body > footer article.social ul { display : grid ; grid-template-columns: 20px 20px 20px 20px ; gap: clamp(10px, 2vw, 30px); }
body > footer article.social a { display : block ; width : 14px ; height : 20px ; line-height : 12px ; text-align : center ; transition : ease-out .2s ; opacity : .5 ; padding : 2px 0 6px 0 }
body > footer article.social a:hover { opacity : 1 }
body > footer article.social a > img { display : inline-block }
body > footer article.rules ul > li { line-height : 14px ; font-size : 10px }
body > footer article.rules ul > li ~ li { margin-top : 30px }
body > footer p.copyright { padding-top : 60px ; font-size : 13px }

body > main { min-height : 100vh /* min-height : calc( 100vh - 240px ) */ }
main.fix-header { padding-top : 45px }


/** account > login **/
main.login { padding-bottom : 0 }
main.login > section { display : flex ; min-height : 100vh ; padding : 100px 0 ; align-items : center }
main.login > section > article.account { width : 606px ; margin : auto ; text-align : center }
article.login button[type="submit"] { margin-top : 40px }
article.login form .result-msg { display : block ; text-align : left ; padding-top : 6px ; color : var(--red) ; width : 100% ; height : 40px }
article.login form .result-msg + button[type="submit"] { margin-top : 0 }
article.login .form-inline ~ .form-inline { margin-top : 20px }
article.login .btn { margin-top : 10px }
article.login form .rows { display : inline-block ; width : 100% ; margin-top : 10px }
article.login form .rows .left { float : left }
article.login form .rows .right { float : right }
article.login form .rows a { text-decoration : underline ; font-weight : var(--fontweight-m) }
article.login .sns-login,
section.account .sns-login { margin-top : 40px ; text-align : center }
article.login .sns-login p,
section.account .sns-login p { line-height : 16px ; font-size : 12px }
article.login .sns-login ul,
section.account .sns-login ul { display : inline-block ; margin-top : 10px }
article.login .sns-login ul > li,
section.account .sns-login ul > li { display : inline-block ; float : left ; width : 45px ; height : 45px }
article.login .sns-login ul > li ~ li,
section.account .sns-login ul > li ~ li { margin-left : 10px }
article.login .sns-login ul > li button,
section.account .sns-login ul > li button { width : 45px ; height : 45px ; /*border : solid 1px ; */ font-size : 0 }
article.login .sns-login ul > li button.login-kakao,
section.account .sns-login ul > li button.login-kakao { border-color : var(--kakao) ; }
article.login .sns-login ul > li button.login-naver,
section.account .sns-login ul > li button.login-naver { border-color : var(--naver) ; }
article.login .sns-login ul > li button.login-google,
section.account .sns-login ul > li button.login-google { border : 1px solid #000 ; background-position: center; background-size: 24px 24px; background-repeat: no-repeat;background-image : url('/images/ico-sns-google.svg') }
article.login section.customer { padding-top : 80px }

/** account **/
section.account > article { max-width : 480px ; margin : auto }
section.account > article .tab { margin-top : 60px }
section.account > article .--describe { margin-top : 30px }
section.account > article .form-inline { padding-top : 20px }
section.account > article .form-inline ~ .form-inline { margin-top : 0 }
section.account > article .form-inline.inline-label input:not([type='checkbox']):not([type='radio']).has-value ~ .control-label,
section.account > article .form-inline.inline-label input:not([type='checkbox']):not([type='radio']):focus ~ .control-label,
section.account > article .form-inline.inline-label input:not([type='checkbox']):not([type='radio']):not(:placeholder-shown) ~ .control-label { top : 10px }
section.account > article .form-inline input { font-size : 12px !important }
section.account > article .number-confirm { position : relative ; padding : 0 0 27px 0 ; height : 100px }
section.account > article .number-confirm .timeleft { text-align : center ; width : 50px ; line-height : 37px ; bottom : 0 ; right : 0 ; position : absolute }
section.account > article .number-confirm button.time-extend { font-size : 12px ; border-bottom : solid 1px var(--black) ; position : absolute ; bottom : 0 ; right : 0 }
section.account > article .number-confirm:not(.on) > * { display : none }
section.account > article .buttons { padding : 30px 0 0 0 }

/** account > 회원가입  **/
section.account > article.join > h1 { margin-bottom : 30px }
section.account > article.join #btn-personal-certify { margin-top : 30px }
section.account > article.join .agrees { margin : 40px 0 30px 0 ; line-height : 16px }
section.account > article.join .agrees ul > li { margin-top : 10px }
section.account > article.join .agrees a { border-bottom : solid 1px var(--black) }
section.account > article.join section.join-ok { display : none }
section.account > article.join.ok form { display : none }
section.account > article.join.ok section.join-ok { display : block ; padding-top : 10px }
section.account > article.join.ok section.join-ok p ~ p { margin-top : 10px }
section.account > article.join.ok section.join-ok .buttons { padding-top : 60px }

/** account > 아이디 / 비밀번호 찾기 **/
section.account > article.find .--describe + .form-inline { margin-top : 10px }

/** account > logout **/
section.account > article.logout { text-align : left }
section.account > article.logout h1 { margin-bottom : 40px }
section.account > article.logout p { line-height : var(--fontsize) }
section.account > article.logout .buttons { max-width : 400px ; margin : 30px auto 0 auto }
main.logout { 
  max-width: 1440px; 
  width: 100%;
  margin: auto;
  border-left: 1px solid #EAEAEA;
  border-right: 1px solid #EAEAEA;
}

section.account > article.logout {
  width: 480px;
}

section.account > article.logout p {
  margin-top: 10px;
}

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

  section.account > article.logout h1 {
    margin-bottom: 70px;
  }

  section.account > article.logout .buttons {
    max-width: none;
    margin-top: 40px;
  }
}

/** tnb > side **/
body > header > aside {
  position: absolute;
  right: 0;
}
body > header > aside:not(.on) input,
body > header > aside:not(.on) button,
body > header > aside:not(.on) a,
body > header > aside:not(.on) select,
body > header > aside:not(.on) textarea {
  display: none;
}
body > header > aside.shoppingbag {
  height: auto;
}
body > header > aside button.close { right : 40px }
body > header > aside > section {
  position : fixed;
  top : 45px ;
  right: 0;
  height : calc( 100vh - 45px );
  display: flex;
  overflow-x : hidden ;
  overflow-y : auto ;
  transform: translateX(100%);
  transition : transform ease-out .2s ;
  background-color : var(--white) ;
  z-index : 10;
  align-items : center;

  /* opacity: 1;
  visibility: visible; */
}
/* body > header > aside:not(.on) > section {
  opacity: 0;
  visibility: hidden;
} */
body > header > aside > section article {
  padding : 0 40px;
  width : 100%;
}
body > header > aside > section:not(.shoppingbag) article {
  min-height : 600px;
}

body > header > aside.bluemark > section,
body > header > aside.language > section,
body > header > aside.shoppingbag > section,
body > header > aside.my > section {
  width: 25vw;
}
@media (max-width: 1680px) and (min-width: 1024px) {
  body > header > aside.bluemark > section,
  body > header > aside.language > section,
  body > header > aside.shoppingbag > section,
  body > header > aside.my > section {
    width: 40vw;
  }
}
body > header > aside.bluemark > section.bluemark,
body > header > aside.language > section.language,
body > header > aside.search > section.search,
body > header > aside.shoppingbag > section.shoppingbag,
body > header > aside.my > section.my {
  transform: translateX(0);
}
body > header > aside h2 { font-size : var(--fontsize-sub) ; font-weight : var(--fontweight-m) ; text-align : left }
body > header > aside > section input:not([type="radio"]):not([type="checkbox"]) { width : 100% ; height : 25px ; font-size : 11px ; border-bottom : solid 1px var(--border-color) }

/** tnb > side > bluemark **/
body > header > aside > section.bluemark h2 { color : var(--bluemark) ; font-size : var(--fontsize-title) ; padding-left : 11px ; position : relative }
body > header > aside > section.bluemark h2:before { content : "" ; width : 6px ; height : 6px ; display : inline-block ; position : absolute ; top : calc( 50% - 3px ) ; left : 0 ; background-color : var(--bluemark) }
body > header > aside > section.bluemark p { margin: 40px 0 70px 0 }
body > header > aside > section.bluemark a.btn { color : var(--bluemark) ; border-color : var(--bluemark) }
body > header > aside > section.bluemark a.btn.certify { color : var(--white) ; background-color : var(--bluemark) }
body > header > aside > section.language p { margin: 60px 0 }
@media only screen and (max-width: 1024px) {
  body > header > aside.bluemark.on > section.bluemark .pc {
    display: none;
  }
}

/** tnb > side > search **/
body > header > aside.search > section.search { width : 50vw; display : block ; padding-top : 145px ; padding-bottom : 100px }
body > header > aside.search > section.search article { padding : 0 155px }
body > header > aside.search > section.search ul { display : inline-block ; width : 100% ; margin: 0 0 0 -5px }
body > header > aside.search > section.search ul > li { margin : 5px ; display : inline-block ; float : left }
body > header > aside.search > section.search ul.recommend { font-size : 11px }
body > header > aside.search > section.search ul.recommend > li { border : solid 1px #eaeaea ; line-height : 26px ; padding : 0 8px }
body > header > aside.search > section.search ul.hot { margin-top : 15px ; display : grid ; grid-template-columns : repeat(auto-fit, 100px) ; gap : 10px }
body > header > aside.search > section.search ul.hot > li a { display : block ; width : 100% ; height : 160px ; position : relative ; padding-top : 132px ; font-size : var(--fontsize-s) ; text-align : center }
body > header > aside.search > section.search ul.hot > li a .img { display : block ; width : 100% ; padding-top : 125% ; position : absolute ; top : 0 ; left : 0 ; background-size : cover ; background-position : center }
body > header > aside.search > section.search ul.hot.empty { display : block ; margin : 0 }
body > header > aside.search > section.search ul.hot.empty ~ .btn { display : none }
body > header > aside.search > section.search ul.hot > li.empty { margin: 0 ; width : 100% ; padding : 100px 0 ; text-align : center }
body > header > aside.search > section.search ul.hot ~ .btn { margin-top : 60px }
body > header > aside.search > section.search h2 { margin-top : 60px ; margin-bottom : 5px }
body > header > aside.search > section.search h2 ~ h2 { margin-top : 100px }

/** tnb > side > login **/
body > header > aside.my > section.my article.login { height : calc( 100vh - 205px ) ; text-align : center }
body > header > aside.my > section.my article.login + .loged { display : none }
body > header > aside.my > section.my article.login h2 { margin-bottom : 18px }

/** tnb > side > cart **/
body > header > aside > section.shoppingbag {
  height: auto;
}
body > header > aside > section.shoppingbag article { padding : 0 ; min-height : auto }
body > header > aside > section.shoppingbag article h2 { display : block ; height : 86px ; border-bottom : solid 1px var(--border-gray-color) ; line-height : 1 ; padding : 38px 0 0 55px ; background : url('/images/ico-shoppingbag.svg') 40px center no-repeat }

body > header > aside > section.shoppingbag article dl.cart > dt { height : 45px ; line-height : 45px ; padding : 0 40px }
body > header > aside > section.shoppingbag article dl.cart > dt .msg { float : left }
body > header > aside > section.shoppingbag article dl.cart > dt .right { float : right }
body > header > aside > section.shoppingbag article dl.cart > dt .right * { height : 12px ; font-size: var(--fontsize); line-height: 12px ; vertical-align : middle }
body > header > aside > section.shoppingbag article dl.cart > dt .right button.select-delete { text-decoration : underline }
body > header > aside > section.shoppingbag article dl.cart > dt label input + i { margin-right : 0 ; margin-left : 14px }
body > header > aside > section.shoppingbag article dl.cart > dd { overflow-y : auto ; max-height : calc( 100vh - 420px ) ; border-top : solid 1px var(--border-gray-color) }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li { border-bottom : solid 1px var(--border-gray-color) ; position : relative ; height : 150px ; padding : 20px 20px 20px 140px }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li.set-item {
  height: 70px;
  display: flex;
  padding: 0;
}
body > header > aside > section.shoppingbag article dl.cart > dd ul > li.set-item > .item-cnt,
body > header > aside > section.shoppingbag article dl.cart > dd ul > li.set-item > .item-image > a {
  width: 69px;
  height: 69px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
body > header > aside > section.shoppingbag article dl.cart > dd ul > li.set-item > .item-image > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body > header > aside > section.shoppingbag article dl.cart > dd ul > li.set-item > .item-data {
  flex: 1;
  padding: 10px;
}
body > header > aside > section.shoppingbag article dl.cart > dd ul > li:last-child { border-bottom : none }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .thumbnail { position : absolute ; top : 0 ; left : 0 ; width : 120px ; height : 100% ; background-size : cover ; background-position : center ; border-right : solid 1px var(--border-gray-color) }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li label.check { position : absolute ; top : 20px ; right : 40px }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li label.check i { margin-right : 0 }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .name { font-size : 12px }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .price { position: relative; }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .price.discount { position: relative; text-decoration: line-through; text-decoration-color: #343434; -webkit-text-decoration-color: #343434; top: 10px; color: #34343494; padding-left: 25px; }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .price.discount::before { display: block; text-decoration: none; content: attr(data-discount) "%"; position: absolute; left: -1px; color: #343434; }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .price.discount::after { display: block; text-decoration: none; content: attr(data-t_saleprice); position: absolute; top: -10px; color: #343434; }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .price.soldout { text-decoration: line-through; text-decoration-color: #343434; -webkit-text-decoration-color: #343434; color: #34343494; }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .price.soldout::before { display: block; position: absolute; left: 55px; text-decoration: none;content: "Sold out" !important; font-weight: normal; color: #343434;}

body > header > aside > section.shoppingbag article dl.cart > dd ul > li .color .colorchip { margin-left : 3px }
/* 제갈민혁 - cart 품절임박 추가 */
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .size .close_stock{ width: 3px; height: 3px; border-radius: 50%; background: #FF0000; margin-left: 1px; display: inline-block; vertical-align: top; float: unset;}
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .name ~ *:not(.qty-cont) { margin-top : 7px ; font-size : 10px }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont { position : absolute ; bottom : 20px ; left : 140px ; padding-left : 36px ; height : 15px ; width : 118px }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont .label { position : absolute ; left : 0 ; top : 0 }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont button { position : absolute ; top : 0 ; width : 15px ; height : 15px ; display : inline-block ; background-position : center ; background-repeat : no-repeat ; opacity : .3 }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont button.on { opacity : 1 }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont button.decrease { background-image : url('/images/ico-decrease.svg') ; left : 36px }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont button.increase { background-image : url('/images/ico-increase.svg') ; right : 0 }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .qty-cont input { width : 100% ; height : 15px ; border : none ; background : none ; text-align : center }
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .total-price { text-decoration : underline ; position : absolute ; right : 40px ; bottom : 20px }

body > header > aside > section.shoppingbag article footer { width : 100% }
body > header > aside > section.shoppingbag article footer dl > * { border-top : solid 1px var(--border-gray-color) ; width : 100% ; height : 46px; line-height : 45px ; padding : 0 40px }
body > header > aside > section.shoppingbag article footer dl > dd { text-align : right ; margin-top : -46px }
body > header > aside > section.shoppingbag article footer dl > dd:last-child { text-decoration : underline }
body > header > aside > section.shoppingbag article footer button[type="submit"] { height : 60px ; background-color : var(--footer-bg) ; color : var(--white) }

body > header > aside > section.shoppingbag article .info-box { text-align : center ; padding : 0 40px 70px 40px }
body > header > aside > section.shoppingbag article .no-login > .login p { padding : 100px 0 }
body > header > aside > section.shoppingbag article .no-login > .join p { padding : 100px 0 10px 0 }
body > header > aside > section.shoppingbag article .empty,
body > header > aside > section.shoppingbag article .empty.on ~ * { display : none }
body > header > aside > section.shoppingbag article .empty.on { display : block }
body > header > aside > section.shoppingbag article .empty p { padding : 100px 0 }
body:not(.loged) > header > aside > section.shoppingbag article .no-login ~ * { display : none }
body.loged > header > aside > section.shoppingbag article .no-login { display : none }

@media only screen and (max-width: 1024px) {
  body > header > aside > section.shoppingbag article dl.cart > dd {
    min-height: calc(100dvh - 288px);
  }

  body > header > aside > section.shoppingbag article dl.cart > dd ul > li:last-child {
    box-shadow: 0 1px 0 0 var(--border-gray-color);
    -webkit-box-shadow: 0 1px 0 0 var(--border-gray-color);
  }
}

/** tnb 로그인 **/
body.loged > header > aside.my > section.my article.login { display : none }
body.loged > header > aside.my > section.my article.login + .loged { display : block }
body.loged > header > nav dl.tnb > dt a[data-side='my'],
body > header > nav dl.tnb > dt a[href$='/my'] { display : none }
body.loged > header > nav dl.tnb > dt a[href$='/my'] { display : block }

/** main **/
.links a + a { margin-left : 60px }
.links a { position : relative ; padding-bottom : 3px ; font-size : 12px }
.links a:after { content : "" ; width : 10px ; height : 1px ; background : #000 ; display : inline-block ; position : absolute ; left : 0 ; bottom : 0 ; transition : ease-out .2s }
.links a:hover:after { width : 100% }

body.main > header { background : none ; }
body.main > header > nav { border-bottom-color : transparent }
body.main > header > nav > dl > dt { color : #fff }

main.intro { padding-top : 0 }
main.intro > section { text-align : center }
main.intro > section ul > li { position : relative ; }
main.intro > section ul#goods-list > li { margin-bottom: 20px; }
main.intro > section.campaign ul { display : grid ; grid-template-columns: 50% 50% ; }
main.intro > section.campaign ul > li:first-child { grid-column : 1 / 3 ; }
main.intro > section.campaign ul > li:not(:first-child) { height: calc(100vw * 0.46875); overflow: hidden;}
main.intro > section.campaign ul > li { background-position : center ; background-size : cover ; width : 100vw; height : 100vh; }
main.intro > section.campaign ul > li .image {width: 100%;height: 100%;object-fit: cover; object-position: top;}

main.intro > section.campaign ul > li .video { position : absolute ; top : 0 ; left : 0 ; width : 100vw ; height : 100vh ; display : flex ; align-items : center ;justify-content: center; overflow : hidden; }
main.intro > section.campaign ul > li .video video { min-width : 100% ; min-height : 100% ; position : absolute }
main.intro > section.campaign ul > li .title { display : block ; position : absolute ; overflow : hidden ; width : 100% ; left : 0 ; bottom : 120px ; z-index : 2 }
main.intro > section.campaign ul > li .title .box { display: inline-block ; background-color : var(--white) ; padding : 10px ; }
main.intro > section.campaign ul > li .title .box h2 { font-size : 13px ; font-weight : 400 ; margin-bottom : 5px }
main.intro > section.campaign ul > li .title .box a { border-bottom : solid 1px var(--black) ; padding-bottom : 2px }
main.intro > section.campaign ul > li .title .box a ~ a { margin-left : 20px }
main.intro > section.goods ul { display : grid ; grid-template-columns: repeat(4,25%) ; grid-auto-rows: calc( 25vw * ( 5 / 4 ) ) }
main.intro > section.goods a { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background-position : center ; background-size : cover ; display : flex ; place-items: end center; flex-direction: column;}
main.intro > section.goods a .name { display : block ; width : 100% ; font-size : 13px ; padding-bottom : 40px }

/*
main.intro { padding-bottom : 250px ; overflow : hidden }
main.intro > article { width : 100% ; position : relative }
main.intro > article h1 { font-size : 20px ; line-height : 1.5 }
main.intro > article h1 small { font-size : 13px ; display : block }
main.intro > article h1 + .links { margin-top : 22px }
main.intro > article .shortcut { padding : 15px 10px }
main.intro > article .shortcut a span { text-decoration : underline }
main.intro > article .shortcut a:after { content : ">" ; padding-left : 10px ; transition : ease-out .2s }
main.intro > article .shortcut a:hover:after { padding-left : 15px }
main.intro > article.campaign .cont { position : absolute ; bottom : 110px ; left : 130px }
main.intro > article.campaign .cont.wh,main.intro > article.campaign .cont.wh a { color : #fff }
main.intro > article.campaign .cont.wh .links a:after { background : #fff }
main.intro > article.campaign .media * { display : block ; width : 100% }
main.intro > article.promotion { display : grid ; grid-template-columns : 50% 50% }
main.intro > article.promotion > section.title .cont { position : absolute ; bottom : 100px ; left : 130px }
main.intro > article.promotion img { width : 100% }
main.intro > article.goods .swiper-slide { width : 480px ; height : 600px }
main.intro > article.goods .swiper-slide span { position : absolute ; bottom : 40px ; left : 0 ; width : 100% ; text-align : center }
main.intro > article.styling { margin-top : 150px }
main.intro > article.styling .swiper-slide { width : 600px ; height : 692px }
main.intro > article.styling .swiper-slide .image { width : 100% ; height : 600px ; background-size : cover ; background-position : center }
main.intro > article.styling .swiper-slide .title { padding : 25px 130px ; font-size : 16px ; line-height : 1.3 }
main.intro > article.styling .swiper-button-prev,main.intro > article.styling .swiper-button-next { top : inherit ; bottom : 20px ; margin-top: 0 }
main.intro > article.foryou { margin-top : 300px ; border-top : solid 1px var(--border-color) ; border-bottom : solid 1px var(--border-color) }
main.intro > article.foryou .shortcut { position : absolute ; z-index : 5 ; top : 0 ; left : 0 }
main.intro > article.foryou .swiper-slide { width : 360px ; height : 490px ; border-right : solid 1px var(--border-color) ; text-align : center  }
main.intro > article.foryou .swiper-slide .image { width : 100% ; height : 450px ; background-size : cover ; background-position : center ; background-color : #FBFBFB }
main.intro > article.foryou .swiper-slide a { display : block ; line-height : 40px }
*/

/** 쿠키 설정 **/
/* section.cookie-agree { display : none }
section.cookie-agree.on { display : block }
section.cookie-agree > .banner { width : 100% ; height : 96px ; background-color : var(--white) ; position : fixed ; bottom : 0 ; left : 0 ; z-index : 100 ; padding : 40px 60px ; transition : ease-out .2s }
section.cookie-agree > .banner button.close { top : 20px ; right : 20px }
section.cookie-agree > .banner .buttons { display : grid ; grid-template-columns : 100px 100px ; gap : 10px ; position : absolute ; width : 210px ; top : 30px ; right : 60px }
section.cookie-agree > .banner .buttons button { margin-top : 0 }
section.cookie-agree > .accept { display : none ; position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; backdrop-filter: blur(8px); }
section.cookie-agree > .accept > .cont { width : 480px ; margin : 66px 20px ; position : relative ; background-color : var(--white) }
section.cookie-agree > .accept > .cont > header { border-bottom : solid 1px var(--gray) ; line-height : 42px ; padding : 0 40px }
section.cookie-agree > .accept > .cont > header button.close { top : 15px ; right : 40px }
section.cookie-agree > .accept > .cont > article { padding : 40px }
section.cookie-agree > .accept > .cont > article ul > li { margin-top : 25px }
section.cookie-agree > .accept > .cont > article ul > li:first-child { margin-top : 0 }
section.cookie-agree > .accept > .cont > article p { margin-top : 10px }
section.cookie-agree > .accept > .cont > article .buttons { margin-top : 50px }
section.cookie-agree.config > .banner { display : none }
section.cookie-agree.config > .accept { display : grid ; place-items: center; } */

/** 장바구니 > 주문/결제 **/
main.my > section.pay:not(.ok) { padding : 45px 720px 0 100px }
main.my > section.pay h2.border { font-size : var(--fontsize-title) ; margin-bottom : 20px ; border-bottom-color : var(--black) }
main.my > section.pay.ok h2.border { border-bottom-color : var(--border-gray-color) }
main.my > section.pay article ~ article:not(.result) { margin-top : 40px }
main.my > section.pay article.payment-select .select-grid {
  display : grid ;
  grid-template-columns : repeat( 3 , minmax( 0 , 1fr ) );
  gap: 10px 0;
}
main.my > section.pay article.payment-select .select-grid label {
  width: fit-content;
}
/*
main.my > section.pay article.payment-select .select-grid label:not(:first-child) {
  opacity: 0.5;
  pointer-events: none;
}
*/
main.my > section.pay ul.list { border : none }
main.my > section.pay ul.list > li ~ li { margin-top : 40px }
/* main.my > section.pay ul.list > li { border : solid 1px var(--border-gray-color) ; height : 150px ; position : relative ; padding : 20px 20px 20px 145px } */
main.my > section.pay ul.list > li {
  border : solid 1px var(--border-gray-color);
}
main.my > section.pay ul.list > li .info {
  display: flex;
  height: 150px;
}
main.my > section.pay ul.list > li .info .info-image {
  height: 150px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-right: solid 1px var(--border-gray-color);
}
main.my > section.pay ul.list > li .info .info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main.my > section.pay ul.list > li .info-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
}
main.my > section.pay ul.list > li .info-content .content-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  font-size: 10px;
  line-height: 100%;
}
main.my > section.pay ul.list > li .info-content .content-left .name {
  font-size: 12px;
}
main.my > section.pay ul.list > li .info-content .price {
  display: flex;
  flex-wrap: wrap;
  line-height: 140%;
}
main.my > section.pay ul.list > li .info-content .price > .price {
  min-width: 48px;
}
main.my > section.pay ul.list > li .info-content .price > .price.discount > .price-text {
  color: #34343494;
  text-decoration: line-through;
  text-decoration-color: #343434;
  -webkit-text-decoration-color: #343434;
}
main.my > section.pay ul.list > li .info-content .price .qty {
  display: flex;
  gap: 11px;
}
main.my > section.pay ul.list > li .info-content .price .qty > p {
  margin: 0;
}
main.my > section.pay ul.list > li .info-content .price .qty > p:first-child {
  min-width: 20px;
}
main.my > section.pay ul.list > li .info-content .price > .qty::before {
  content: "|";
  margin: 0 10px;
}
main.my > section.pay ul.list > li .info-content .content-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 13px;
  font-size: 12px;
  line-height: 100%;
}
main.my > section.pay ul.list > li .info-content .content-right .status {
  color: #000;
  text-decoration: underline;
  text-decoration-style: solid;
}
main.my > section.pay ul.list > li .info-content .content-right .status[data-status="OCC"],
main.my > section.pay ul.list > li .info-content .content-right .status[data-status="OEX"],
main.my > section.pay ul.list > li .info-content .content-right .status[data-status="ORF"] {
  cursor: pointer;
}
main.my > section.pay ul.list > li .info-content .content-right .status-msg {
  color: #808080;
}
main.my > section.pay ul.list > li .voucher { text-align : right; position: relative; top: -18px; left: 0; text-align: right; }
main.my > section.pay ul.list > li .status { text-align : right; position: relative; left: 0; text-align: right; }

main.my > section.pay:not(.ok) article.result { border : solid 1px var(--black) ; width : 360px ; position : absolute ; top : 174px ; right : 180px ; padding : 20px }
main.my > section.pay:not(.ok) article.result h2 { padding-bottom : 15px ; margin-bottom : 10px }
main.my > section.pay:not(.ok) article.result h3 { padding-top : 40px ; font-size : var(--fontsize) }
main.my > section.pay:not(.ok) article.result h3 + ul.dot { margin-top : 10px }
main.my > section.pay:not(.ok) article.result dl:not(.fold) { display : grid ; grid-template-columns : 1fr 1fr ; color : var(--black) } 
main.my > section.pay:not(.ok) article.result dl:not(.fold) > * { padding : 8px 0 } 
main.my > section.pay:not(.ok) article.result dl:not(.fold) > dd { text-align : right }
main.my > section.pay:not(.ok) article.result dl.total { margin-top : 8px ; border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) } 
main.my > section.pay:not(.ok) article.result dl.total > * { padding : 13px 0 } 
main.my > section.pay:not(.ok) article.result dl.total > dd { font-size : var(--fontsize-title) ; text-decoration : underline }
main.my > section.pay:not(.ok) article.result .agree { padding : 20px 0 40px 0 }
main.my > section.pay:not(.ok) article.result .agree a { position : relative; text-decoration : underline; font-weight : var(--fontweight-m); z-index: 9;}

/* 주문 상세 */
/* main.my > section.pay.ok dl.fold { margin-top : 60px }
main.my > section.pay.ok .infobox + dl.fold { margin-top : 40px }
main.my > section.pay.ok dl.price-info.pay-method { margin-bottom : 20px }
main.my > section.pay.ok dl.price-info.pay-method .btn { margin-bottom : 20px }
main.my > section.pay.ok .buttons { margin-top : 60px } */
main.my > section.pay.ok dl.fold { margin-top : 60px }
main.my > section.pay.ok dl.fold * { font-weight: 400 !important; }
main.my > section.pay.ok .infobox + dl.fold { margin-top : 20px; }
main.my > section.pay.ok dl.fold[data-status="price"],
main.my > section.pay.ok dl.fold[data-status="delivery"],
main.my > section.pay.ok dl.fold[data-status="recent"],
main.my > section.pay.ok dl.fold[data-status="refund"],
main.my > section.pay.ok dl.fold[data-status="cancel"] {
  border: solid 1px var(--border-gray-color);
  padding: 20px;
}
/* main.my > section.pay.ok dl.price-info.pay-method { margin-bottom : 20px } */
/* main.my > section.pay.ok dl.price-info.pay-method .btn { margin-bottom : 20px } */
main.my > section.pay.ok .buttons { margin-top : 60px }

.modal-pay-delivery { width : 480px }
.modal > section.modal-pay-delivery {
  padding: 0;
}

main.my > section.pay.ok dl.fold[data-status="delivery"] .delivery-info {
  display: flex;
  flex-direction: column;
}
main.my > section.pay.ok dl.fold[data-status="delivery"] .delivery-info dd {
  text-align: left;
  min-height: unset;
  font-weight: 400 !important;
  font-size: 11px;
  line-height: 100%;
}
main.my > section.pay.ok dl.fold[data-status="delivery"] #default_addr {
  width: fit-content;
  padding: 3px 3px 5px 3px;
  background-color: #EAEAEA;
  color: #000;
}
main.my > section.pay.ok dl.fold[data-status="delivery"] #to_name {
  margin-top: 5px;
}
main.my > section.pay.ok dl.fold[data-status="delivery"] #to_mobile,
main.my > section.pay.ok dl.fold[data-status="delivery"] #to_addr {
  margin-top: 10px; 
}
main.my > section.pay.ok dl.fold[data-status="delivery"] #to_memo {
  margin-top: 20px; 
}
main.my > section.pay.ok .dot > li {
  font-weight: 400;
  font-size: 11px;
  line-height: 148%;
}
main.my > section.pay.ok .order-cancel-btn {
  max-width: 400px;
  border: 1px solid var(--gray);
  margin: 40px auto 0;
  padding: 15px 150px;
  text-align: center;
  font-size: 11px;
  line-height: 100%;
  cursor: pointer;
  color: #000000;
}

main.my > section.pay.ok dl.fold .order-cancel-btn {
  font-weight: 300 !important;
}

/* 제갈민혁 - pay.ok 수정 */
main.my > section.pay.ok .infobox .info-text{display: flex;flex-direction: column;gap: 5px; margin-top: 0px; margin-bottom: 20px;}
main.my > section.pay.ok .infobox .info-text .text-number,
main.my > section.pay.ok .infobox .info-text .text-date{
  display: flex;
  flex-direction: row;
  gap: 10px;
}
main.my > section.pay.ok ul.list > li{
  border : 1px solid var(--border-gray-color);
}
main.my > section.pay.ok ul.list > li > .info{
  display : flex;
  flex-direction : row;
}
main.my > section.pay.ok ul.list > li .info .info-image{
  height: 150px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-right: solid 1px var(--border-gray-color);
}
main.my > section.pay.ok ul.list > li .info .info-image .image{
  width: 100%;
  height : 100%;
  object-fit: cover;
}
main.my > section.pay.ok ul.list > li .info .info-content{
  height: 100%;
    display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 10px;
  line-height: 100%;
  padding : 20px;
  align-items: flex-start;
}
main.my > section.pay.ok ul.list > li .info .info-content .content-left{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  font-size: 10px;
  line-height: 100%;
}


main.my > section.pay.ok dl.fold[data-status="price-info"]{
  border : 1px solid var(--border-gray-color);
  padding : 20px;
}

@media only screen and (max-width :1024px){
  main.my > section.pay.ok dl.fold{
    border : none;
    padding : 0px;
    margin-top : 40px;
  }
  main.my > section.pay.ok dl.fold[data-status="price-info"]{
    border : none;
    padding : 0px;
    margin-top : 40px;
  }
  main.my > section.pay.ok dl.fold dt h2{
    padding-bottom: 10px;
        margin-bottom: 15px;
  }
  
}

/** 마이페이지 **/
main.my { max-width : 1440px ; width : 100% ; margin : auto }
main.my:before,
main.my:after { content : "" ; width : 1px ; height : 100% ; position : absolute ; background-color : var(--border-gray-color) ; display : inline-block ; top : 0 }
main.my:before { left : -1px }
main.my:after { right : -1px }

main.my .buttons { max-width : 400px ; margin : auto }
main.my section.address .list .buttons {
  max-width: unset;
  margin: unset;
}
main.my > section.wrap-720 { padding-top : 25px }
main.my h1 { margin-bottom : 20px ; font-size : var(--fontsize-title) }
main.my p + p { margin-top : 10px }
main.my ul.list { border-bottom : solid 1px var(--border-color) }
main.my ul.list.border-bottom-none { border-bottom : none }
main.my ul.list > li.empty { text-align : center ; padding : 150px 0 }

main.my > section.summary { height : 180px ; padding-top : 0 ; border-bottom : solid 1px var(--border-gray-color) ; display : grid ; grid-template-columns : 1fr 1fr }
main.my > section.summary > article.info { border-right : solid 1px var(--border-gray-color) ; position : relative }
main.my > section.summary > article.info dl { display : grid ; grid-template-columns : repeat(2,1fr) ; grid-template-rows : repeat(3,1fr) ; width : 100% ; height : 100% } 
main.my > section.summary > article.info dl > dt { padding : 20px 0 0 40px ; border-right : solid 1px var(--border-gray-color) ; grid-row : 1 / span 3 }
main.my > section.summary > article.info dl > dd { display : flex ; padding : 0 60px ; align-items : center ; border-top : solid 1px var(--border-gray-color) }
main.my > section.summary > article.info dl > dt + dd { border-top : none }
main.my > section.summary > article.info dl > dt * { line-height : 1 }
main.my > section.summary > article.info dl > dt .name big { font-size : 15px }
main.my > section.summary > article.info dl > dt .name small { font-size : 10px ; padding-left : 8px }
main.my > section.summary > article.info dl > dt .email { font-size : 13px ; padding : 11px 0 }
main.my > section.summary > article.info dl > dt a { background : url('/images/ico-angle-right.svg') right center no-repeat ; padding-right : 10px }
main.my > section.summary > article.info button.logout { position : absolute ; left : 40px ; bottom : 20px ; background : url('/images/ico-logout.svg') left center no-repeat ; padding-left : 20px ; color : var(--gray-color) ; font-size : var(--fontsize)}
/* 250429 - 제갈민혁 수정 */
main.my > section.summary > article.info dl > dd > div { width : 100% ; line-height : 20px; position: relative; }
main.my > section.summary > article.info dl > dd .t { font-size: 12px ; padding-left : 26px ; position : relative }
main.my > section.summary > article.info dl > dd .t:before { content : "" ; display : inline-block ; width : 16px ; height : 20px ; background-position : center ; background-repeat : no-repeat ; position : absolute ; top : -4px ; left : 0 }
main.my > section.summary > article.info dl > dd.mileage .t:before { background-image : url('/images/my/ico-mileage.svg') }
main.my > section.summary > article.info dl > dd.voucher .t:before { background-image : url('/images/my/ico-voucher.svg') }
main.my > section.summary > article.info dl > dd.membership .t:before { background-image : url('/images/my/ico-membership.svg') }
main.my > section.summary > article.info dl > dd.order .t:before { background-image : url('/images/my/ico-order.svg') }
main.my > section.summary > article.info dl > dd.wishlist .t:before { background-image : url('/images/ico-favorite.svg') }
/* 250429 - 제갈민혁 수정 */
main.my > section.summary > article.info dl > dd a { text-decoration : underline ; font-weight : var(--fontweight-m)  ; position: absolute; top: 0; right: 0; width: 100%; height: 100%; text-align: right;}
main.my > section.summary > article.info dl > dd.order span a { text-decoration: none; float: none; font-weight: 300; }
main.my > section.summary > article.links { background-color : var(--my-summary-bg) ; padding : 12px 40px ; height: calc( 100% - 1px ) }
main.my > section.summary > article.links ul { display : grid ; height : 100% ; grid-gap : 12px ; grid-template-columns : repeat(3,1fr) ; grid-template-rows : repeat(3,1fr) }
main.my > section.summary > article.links a { line-height : 44px ; height : 44px ; display : block ; padding-bottom : 0 ; padding-left : 59px }
main.my > section.summary > article.links a:before { content : "" ; display : inline-block ; position : absolute ; top : 0 ; left : 0 ; width : 42px ; height : 42px ; border : solid 1px var(--border-gray-color) ; background-color : var(--white) ; background-position : center ; background-repeat : no-repeat ; border-radius : 50% }
main.my > section.summary > article.links a:after { display : none }
main.my > section.summary > article.links a[href$='/my']:before { background-image : url('/images/my/ico-info.svg') }
main.my > section.summary > article.links a[href$='/my/voucher']:before { background-image : url('/images/my/ico-voucher.svg') }
main.my > section.summary > article.links a[href$='/my/bluemark']:before { background-image : url('/images/my/ico-bluemark.svg') }
main.my > section.summary > article.links a[href$='/my/order']:before { background-image : url('/images/my/ico-order.svg') }
main.my > section.summary > article.links a[href$='/my/standby']:before { background-image : url('/images/my/ico-standby.svg') }
main.my > section.summary > article.links a[href$='/my/customer']:before { background-image : url('/images/my/ico-customer.svg') }
main.my > section.summary > article.links a[href$='/my/mileage']:before { background-image : url('/images/my/ico-mileage.svg') }
main.my > section.summary > article.links a[href$='/my/reorder']:before { background-image : url('/images/my/ico-reorder.svg') }
main.my > section.summary > article.links a[href$='/my/as']:before { background-image : url('/images/my/ico-as.svg') }
main.my > section.summary > article.links a[href$='/my/coin']:before { background-image : url('/images/my/ico-coin.svg') }

main.my > nav { line-height : 15px ; padding : 20px 40px }
main.my > nav ul { display : table }
main.my > nav ul > li { display : table-cell }
main.my > nav ul > li:after { content : ">" ; margin : 0 5px }
main.my > nav ul > li:last-child:after { display : none }
main.my > nav a:after { display : none }

main.my > section { padding-top : 40px }
main.my > section > h1 { margin-bottom : 40px ; line-height : 1 ; font-size : 13px }
main.my > section h2 { width : 100% ; display : block ; line-height : 18px ; font-size : var(--fontsize-title) ; padding-bottom : 20px }
main.my > section h2 a { font-size : var(--fontsize) ; float : right ; background : url('/images/ico-angle-right.min.svg') right center no-repeat ; padding-right : 10px }
main.my > section h2 ~ h2 { margin-top : 60px }
main.my > section h2.border { border-bottom : solid 1px var(--border-color) ; padding-bottom : 10px }
main.my > section.pay.ok h2.border { padding-bottom : 20px }
main.my > section h2 + h3,
main.my > section h2:not(.border) + ul.dot,
main.my > section h2:not(.border) + .tab { border-top : solid 1px var(--border-color) }
main.my > section h3 { font-size : 12px ; padding-top : 20px }
main.my > section > header { padding : 0 40px 20px 40px }
.wishlist.list.my .list.my-main.summary-wishlist header {
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 0 0 40px;
  font-size: 11px;
  line-height: 100%;
}

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

  main.goods.list.recently section#goods-nav-top.nav {
    padding-left: 20px;
  }

  .wishlist.list.my .list.my-main.summary-wishlist header {
    padding: 0 0 0 20px;
  }
}
main.my > section > header h2 { border-bottom : none ; font-size : 11px }

body[data-path$="/my"] > main.my > section.summary > article.links a[href$='/my']:before,
body[data-path*="/my/voucher"] > main.my > section.summary > article.links a[href$='/my/voucher']:before,
body[data-path*="/my/bluemark"] > main.my > section.summary > article.links a[href$='/my/bluemark']:before,
body[data-path*="/my/order"] > main.my > section.summary > article.links a[href$='/my/order']:before,
body[data-path*="/my/standby"] > main.my > section.summary > article.links a[href$='/my/standby']:before,
body[data-path*="/my/customer"] > main.my > section.summary > article.links a[href$='/my/customer']:before,
body[data-path*="/my/mileage"] > main.my > section.summary > article.links a[href$='/my/mileage']:before,
body[data-path*="/my/reorder"] > main.my > section.summary > article.links a[href$='/my/reorder']:before,
body[data-path*="/my/as"] > main.my > section.summary > article.links a[href$='/my/as']:before { border-color : var(--black) }
body[data-path*="/my/coin"] > main.my > section.summary > article.links a[href$='/my/coin']:before { border-color : var(--black) }

main.my > section.my-main h2 { padding-left : 20px ; padding-bottom : 0 ; line-height : 14px ; position : relative }
main.my > section.my-main h2:before { content : "" ; background-position : center ; background-repeat : no-repeat ; display : inline-block ; position : absolute ; left : 0 ; width: 17px ; height : 14px ; top : calc( 50% - 7px ) }
main.my > section.my-main.summary-recently h2:before { background-image : url('/images/my/ico-recently.svg') }
main.my > section.my-main.summary-wishlist h2:before { background-image : url('/images/ico-favorite.svg') }

main.my > section.my-main .swiper-container { height: 525px ; margin-bottom : 60px ; position : relative ; overflow : hidden ; border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) }
main.my > section.my-main .swiper-container .swiper-slide { border-top : none }
main.my > section.my-main .swiper-container .swiper-wrapper > .swiper-slide:first-child:before { content : ""; display : inline-block ; width : 1px ; height : 100% ; position : absolute ; top : 0 ; left : -1px ; background-color : var(--border-gray-color) }
main.my > section.my-main .swiper-button-prev,
main.my > section.my-main .swiper-button-next { opacity : 0 }

/** 마이페이지 상품 목록 **/
.swiper-wrapper.goods > .swiper-slide { width : 324px ; height : 525px ; position : relative ; border-right : solid 1px var(--border-gray-color) ; border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) }
.swiper-wrapper.goods > .swiper-slide .image { width : 100% ; height : 405px ; position : absolute; background-position : center ; background-size: cover }
.swiper-wrapper.goods > .swiper-slide .info { width : calc( 100% - 80px ) ; height : calc( 100% - 445px ) ; position : absolute ; bottom : 20px ; left : 40px ; font-size : var(--fontsize-s) }
.swiper-wrapper.goods > .swiper-slide .info big { font-size : var(--fontsize) ; padding-bottom : 2px }
.swiper-wrapper.goods > .swiper-slide .info .price { position : absolute ; top : 0 ; right : 0 }
.swiper-wrapper.goods > .swiper-slide .info .price .soldout_price{ text-decoration: line-through; text-decoration-color: #343434; -webkit-text-decoration-color: #343434; color : #999999; }
.swiper-wrapper.goods > .swiper-slide .info .colorchip { margin-left : 9px }
.swiper-wrapper.goods > .swiper-slide .info ul.size { display : table }
.swiper-wrapper.goods > .swiper-slide .info ul.size > li { display : table-cell }
.swiper-wrapper.goods > .swiper-slide .info ul.size > li ~ li { padding-left : 11px }
.swiper-wrapper.goods > .swiper-slide .info ul.size > li.soldout {opacity: .5;}
.swiper-wrapper.goods > .swiper-slide .info .color,
.swiper-wrapper.goods > .swiper-slide .info .size { margin-top : 5px }

/* 마이페이지 - 상품목록 - 최근본제품 soldout 임박 */
.swiper-wrapper.goods > .swiper-slide .info ul.size > li .close_stock{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FF0000;
  float: right;
  margin-left: 1px;
}

/** 마이페이지 > 내 정보 관리 **/
main.my > section.info { width : 100% ; max-width : 480px ; margin : auto }
main.my > section.info dl.myinfo { margin-top : 20px ; grid-template-columns : 120px auto ; row-gap : 12px }
main.my > section.info > article.context h2 { border-bottom : solid 1px var(--border-color) ; padding-bottom : 10px }
main.my > section.info.modify article.input { border : solid 1px var(--border-color) ; padding : 40px ; margin-bottom : 60px }
main.my > section.info.modify article.input .form-inline { padding-top : 21px }
main.my > section.info.modify article.input .form-inline big { font-size : 15px }
main.my > section.info.modify article.input .form-inline .control-label { font-size : var(--fontsize-s) }
main.my > section.info.modify article.input .buttons { margin-top : 60px }

/** 마이페이지 > 내 정보 관리 > 회원탈퇴 **/
main.my > section.info.drop { width : 100% ; max-width : 720px ; margin : auto }
main.my > section.info.drop .reason { display : grid ; grid-template-columns : repeat(4,1fr) ; gap : 17px ; margin: 20px 0 }
main.my > section.info.drop ul.agree { margin : 40px 0 }
main.my > section.info.drop ul.agree > li ~ li { margin-top : 10px }
main.my > section.info.drop .buttons { margin-top : 60px }
main.my > section.info.drop > article.dropout-ok { padding-top : 40px ; display : none }
main.my > section.info.drop > article.dropout-ok a.btn { margin-top : 80px }
main.my > section.info.drop.ok { max-width : 400px }
main.my > section.info.drop.ok > article.dropout { display : none }
main.my > section.info.drop.ok > article.dropout-ok { display : block }

/** 마이페이지 > 내 정보 관리 > 배송지 **/
/*
main.my > section.address article.list { }
main.my > section.address article.add .buttons { margin-top : 60px ; max-width : 100% }
*/
main.my > section.address .tab { margin-top : 20px }
main.my > section.address .tab > section:nth-child(2) { padding-top : 30px }
main.my > section.address .tab > section:nth-child(2) .buttons { margin-top : 60px }
main.my > section.address ul.list { border-bottom : none ; margin-top : 20px }
main.my > section.address ul.list > li ~ li { margin-top : 40px }
main.my > section.address ul.list .info { border : solid 1px var(--border-gray-color) ; position : relative ; margin-bottom : 10px }
main.my > section.address ul.list .info > .image { width : 100px ; height : 124px ; top : 0 ; left : 0 ; background-position : center ; background-size : cover ; position : absolute }
main.my > section.address ul.list .info > .goods { width : 100% ; height : 125px ; border-bottom : solid 1px var(--border-gray-color) ; padding : 20px 0 20px 120px ; font-size : var(--fontsize-s) }
main.my > section.address ul.list .info > .goods big { font-size : var(--fontsize-sub) }
main.my > section.address ul.list .info > .goods big ~ * { margin-top : 6px }
main.my > section.address ul.list .info > .address { width : 100% ; padding : 10px }
main.my > section.address ul.list .info > .address dl { display : grid ; grid-gap : 7px ; grid-template-columns : 100px 1fr; word-break: break-all; }
main.my > section.address ul.list .info > .address .msg_default { margin-top:15px; }
main.my > section.address ul.list a { max-width : 100%; margin-top:25px; }
main.my > section.address article.add .addr-modal-container .addr-modal .modal-body {
  height: auto;
  overflow-y: auto;
}

/** 마이페이지 > 내 정보 관리 > 구매맞춤정보 **/
main.my > section.info.purchase > h1 { margin-bottom : 30px }
/* main.my > section.info.purchase > article ul.dot { margin-bottom : 40px } */
main.my > section.info.purchase > article .gender-field { margin-bottom : 30px }
main.my > section.info.purchase > article .shoesize-field { padding-top : 41px }
main.my > section.info.purchase > article .form-inline { font-size : var(--fontsize-sub) }
main.my > section.info.purchase > article .form-inline:not(.inline-label) { margin-top : 40px }
main.my > section.info.purchase > article .grid + .form-inline { margin-top : 20px }
main.my > section.info.purchase > article .form-inline.shoesize-field .grid { grid-template-columns : repeat(3, 1fr) }
main.my > section.info.purchase > article .buttons { max-width : 100% ; margin-top : 80px }
main.my > section.info.purchase.saved > h1 { margin-bottom : 70px }
main.my > section.info.purchase.saved .btn { margin-top : 80px }

/** 마이페이지 > 내 정보 관리 > 결제 수단 **/
main.my > section.paymethod .list + .buttons { margin-top : 100px }
main.my > section.paymethod .list > .empty { border-top : solid 1px var(--border-gray-color) }

/** 마이페이지 > 내 정보 관리 > 마케팅 정보 수신 및 활용 동의 **/
main.my > section.marketing h1 { margin-bottom : 70px }
main.my > section.marketing .select-target { width : 360px ; margin : 60px 0 80px 0 }

/** 마이페이지 > 주문내역 **/
main.my > section.order ul.list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-bottom : none;
  margin-top: 20px;
}
main.my > section.order ul.list .info {
  display: flex;
  flex-direction: column;
  border: solid 1px var(--border-gray-color);
}
main.my > section.order ul.list .info > .info-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: solid 1px var(--border-gray-color);
}
main.my > section.order ul.list .info .order-data > .row {
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
}
main.my > section.order ul.list .info > .info-top .order-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
main.my > section.order ul.list .info > .info-top .order-data > .row {
  display: flex;
  gap: 15px;
}
main.my > section.order ul.list .info > .info-top .button > button {
  display: flex;
  align-items: center;
  border: solid 1px #808080;
  padding: 15px 42px;
  font-weight: 400;
  font-size: 11px;
  line-height: 100%;
}
main.my > section.order ul.list .info > .info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px;
}
main.my > section.order ul.list .info > .info-bottom .order-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main.my > section.order ul.list .info > .info-bottom .order-data > .row {
  display: flex;
  gap: 60px;
}
main.my > section.order ul.list .info > .info-bottom .order-data > .row > span:first-child {
  min-width: 50px;
}
main.my > section.order ul.list .info > .info-bottom > .image {
  width: 16%;
  aspect-ratio: 0.8;
  overflow: hidden;
  position: relative;
}
main.my > section.order ul.list .info > .info-bottom > .image .cnt-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 13px;
  line-height: 100%;
  color: var(--white);
  background-color: #34343466;
}
main.my > section.order ul.list .info > .info-bottom > .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.my > section.order ul.list > li .button.mobile {
  display: none;
}

/* 제갈민혁 주문내역 - 날짜 선택 */
/* 달력 라벨 셀렉터 */
main.my section article .date-search form#frm-order-search .inp label[for="date_from"],
main.my section article .date-search form#frm-order-search .inp label[for="date_to"] {
  box-shadow:
      inset 0 1px 0 #EAEAEA,
      inset 1px 0 0 #EAEAEA,
      inset -1px 0 0 #EAEAEA,
      inset 0 -1px 0 #EAEAEA;
  background: #fff;
  z-index: 82;
  position: relative;
  transition: box-shadow 0.3s ease-in-out;
}
main.my section article .date-search form#frm-order-search .inp label[for="date_from"] .choice_date,
main.my section article .date-search form#frm-order-search .inp label[for="date_to"] .choice_date{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.9px;
}
main.my section article .date-search form#frm-order-search .inp label[for="date_from"].click,
main.my section article .date-search form#frm-order-search .inp label[for="date_to"].click {
  box-shadow:
    inset 0 1px 0 #808080,
    inset 1px 0 0 #808080,
    inset -1px 0 0 #808080,
    inset 0 -1px 0 #fff;
}

main.my section article .date-search form#frm-order-search .inp label[for="date_from"].non_click,
main.my section article .date-search form#frm-order-search .inp label[for="date_to"].non_click {
  box-shadow:
    inset 0 1px 0 #EAEAEA,
    inset 1px 0 0 #EAEAEA,
    inset -1px 0 0 #EAEAEA,
    inset 0 -1px 0 #808080;
  z-index: 81;
}

/* 달력 */
#custom-calendar {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #808080;
  z-index: 81;
  max-height: 0;
  overflow: hidden;
  transition:
      max-height 0.3s ease-in-out,
      padding 0.3s ease-in-out,
      opacity 0.3s ease-in-out;
  padding: 0 27px;
  opacity: 0;
  pointer-events: none;
}

#custom-calendar.open {
  max-height: 500px;
  padding: 25px 27px 30px;
  opacity: 1;
  pointer-events: auto;
}

/* 달력 헤더 */
#custom-calendar .calendar-header {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  gap: 22px;
  align-items: center;
}

#custom-calendar .calendar-header .prev-month,
#custom-calendar .calendar-header .next-month {
  width: 8px;
  height: 16px;
  background-image: url(/images/ico-angle-collabo-prev.svg);
  background-position: center;
  background-repeat: no-repeat;
}
#custom-calendar .calendar-header .next-month {
  rotate: 180deg;
}

/* 달력 날짜 */
#custom-calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  justify-items: center;
  align-items: center;
}

#custom-calendar .calendar-grid .day-name,
#custom-calendar .calendar-grid .date {
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #343434;
}

#custom-calendar .calendar-grid .date:hover {
  background: #191919;
  color: #fff;
  cursor: pointer;
}
#custom-calendar .calendar-grid .date.active {
  background: #191919;
  color: #fff;
  cursor: pointer;
}

@media only screen and (max-width: 1024px) {
  #custom-calendar {
      position: relative;
      top: -1px;
      right: 0;
      grid-column: 1 / 4;
  }
}
/* 
main.my > section.order ul.list > li { width : 100% ; height : 150px ; border : solid 1px var(--border-gray-color) ; position : relative } */
/*main.my > section.order ul.list > li ~ li { margin-top : 40px }*/
/*main.my > section.order ul.list > li > .info { position : absolute ; width : 100% ; height : 65px ; border-bottom : solid 1px var(--border-gray-color) ; top : 0 ; left : 0 ; padding : 14px 20px }*/
/*main.my > section.order ul.list > li > .info dl { display : grid ; grid-template-columns : 62px 1fr }*/
/*main.my > section.order ul.list > li > .info .btn { width : 135px ; position : absolute ; top : 10px ; right : 20px }*/
/*main.my > section.order ul.list > li > .goods { position : absolute ; top : 65px ; left : 0 ; width : 100% ; height : 190px }*/
/*main.my > section.order ul.list > li > .goods .image { width: 120px ; height : 150px ; background-position : center ; background-size: cover ; background-color : var(--border-gray-color) ; position : absolute ; top : 20px ; right : 20px ; line-height : 150px ; text-align : center ; color : var(--white) }*/
/*main.my > section.order ul.list > li > .goods dl { position : absolute ; gap : 10px ; left : 20px ; bottom : 20px ; display : grid ; grid-template-columns : 100px 1fr }*/

/* main.my > section.order ul.list > li { border : solid 1px var(--border-gray-color) ; height : 150px ; position : relative ; padding : 20px 0 20px 180px }
main.my > section.order ul.list > li ~ li { margin-top : 10px }
main.my > section.order ul.list > li .image { border-right : solid 1px var(--border-gray-color) ; position : absolute ; top : 0 ; left : 0 ; width : 150px ; height : 100% ; background-position : center ; background-size : contain; background-repeat: no-repeat; cursor:pointer; }
main.my > section.order ul.list > li div.info { display: flex; flex-wrap: wrap;gap: 10px;align-items: flex-start; justify-content: space-between; }
main.my > section.order ul.list > li div.info > div.left-info { width: 45%;} 
main.my > section.order ul.list > li div.info > div.right-info { width: 45%; justify-items: right; padding-right: 30px;}
main.my > section.order ul.list > li div.info > div.right-info .status { text-decoration: underline; font-size: 12px; }
main.my > section.order ul.list > li div.info > div.right-info .date { opacity: 0.5; }
main.my > section.order ul.list > li div.info > div.right-info div.button { display: flex; gap:8px; height: 40px }
main.my > section.order ul.list > li div.info > div.right-info div.button button { border: 1px solid black; width: 100px; }
@media (max-width: 1025px) {
  main.my > section.order ul.list > li div.info > div.right-info div.button { display: grid; row-gap:4px; height: 30px }
  main.my > section.order ul.list > li div.info > div.right-info div.button button { border: 1px solid black; width: 80px; font-size:var(--fontsize); }
}
main.my > section.order ul.list > li div.info > div > div { margin: 4px 0px; }
main.my > section.order ul.list > li div.title { font-size: 13px; text-overflow: ellipsis; overflow: hidden; width: 100%; white-space: nowrap; }
main.my > section.order ul.list > li div.code { font-size: 13px }
main.my > section.order ul.list > li div.info > div > .delivery { display:flex; gap:4px; }
@media (max-width: 1025px) {
  main.my > section.order ul.list > li div.info > div > .delivery { display:flex; row-gap:4px; }
  main.my > section.order ul.list > li div.info > div > .delivery .company { text-overflow:ellipsis; overflow: hidden; width: 50%; white-space: nowrap; }
  main.my > section.order ul.list > li div.info > div > .delivery .delivery_num { text-overflow:ellipsis; overflow: hidden; width: 50%; white-space: nowrap; }
} */

main.my > section.order article.detail dl.detail-info { margin-bottom : 60px }
main.my > section.order article.detail dl.detail-info > dt { position : relative ; padding-bottom : 20px }
main.my > section.order article.detail dl.detail-info > dt label { position : absolute ; right : 20px ; bottom : 20px ; text-decoration: underline }
main.my > section.order article.detail dl.detail-info > dt label i { margin-right : 0 ; margin-left : 5px }
main.my > section.order article.detail dl.detail-info > dd { position : relative ; padding : 20px ; border : solid 1px var(--border-gray-color) }
main.my > section.order article.detail dl.detail-info > dd ~ dd { margin-top : 40px }
main.my > section.order article.detail dl.detail-info > dd h2 { font-size : var(--fontsize-title) ; border-bottom : solid 1px var(--border-gray-color) ; padding-bottom : 20px ; margin-bottom : 20px }
main.my > section.order article.detail dl.detail-info > dd.goods { height : 150px ; padding : 20px 20px 20px 140px }
main.my > section.order article.detail dl.detail-info > dd.goods .image { position : absolute ; width : 120px ; height : 150px ; background-position : center ;background-size : cover ;  top : 0 ; left : 0 ; border-right : solid 1px var(--border-gray-color) }
main.my > section.order article.detail dl.detail-info > dd.goods .price-qty { display : flex ; line-height : var(--fontsize) }
main.my > section.order article.detail dl.detail-info > dd.goods .price-qty .price { padding-right : 15px ; border-right : solid 1px var(--gray) }
main.my > section.order article.detail dl.detail-info > dd.goods .price-qty .qty:before { content : "Qty" ; padding : 0 10px }
main.my > section.order article.detail dl.detail-info > dd.goods .status { position : absolute ; font-size : var(--fontsize-title) ; bottom : 20px ; right : 20px ; text-align : right ; color : var(--gray) }
main.my > section.order article.detail dl.detail-info > dd.goods .status .now { text-decoration : underline ; margin-bottom : 10px ; color : var(--black) }
main.my > section.order article.detail dl.detail-info > dd.goods label { position : absolute ; height : 12px ; top : 20px ; right : 20px }
main.my > section.order article.detail dl.detail-info > dd.goods label i { margin-right : 0 ; display : block }
main.my > section.order article.detail dl.detail-info > dd.goods big ~ * { margin-top : 6px }
main.my > section.order article.detail dl.detail-info > dd.info { min-height : 150px }
main.my > section.order article.detail dl.detail-info > dd.info dl { display : grid ; grid-template-columns : 50% 50% }
main.my > section.order article.detail dl.detail-info > dd.info dl > * { height : 40px }
main.my > section.order article.detail dl.detail-info > dd.info dl > dd { text-align : right }
main.my > section.order article.detail dl.detail-info > dd.info dl > dt.total,
main.my > section.order article.detail dl.detail-info > dd.info dl > dt.total + dd { border-top : solid 1px var(--border-gray-color) ; border-bottom : solid 1px var(--border-gray-color) ; height : auto ; padding : 15px 0 ; margin-bottom : 20px }
main.my > section.order article.detail dl.detail-info > dd.info dl > dt.total + dd { text-decoration : underline ; font-size : var(--fontsize-title) }
main.my > section.order article.detail dl.detail-info > dd.info .receipt { text-align : right }
main.my > section.order article.detail dl.detail-info > dd.info .receipt button { border : solid 1px var(--gray) ; font-size: var(--fontsize) ; width : 74px ; height : 26px }
main.my > section.order article.detail dl.detail-info > dd.info .modify { position : absolute ; top : 80px ; right: 20px ; text-align : right }
main.my > section.order article.detail dl.detail-info > dd.info .modify button { width : 57px ; height : 26px ; border : solid 1px var(--border-gray-color) ; font-size : var(--fontsize) ; margin-bottom : 6px }

main.my > section.order article.detail .buttons { margin-top : 40px }
main.my > section.order article.cancel .buttons { margin-top : 60px }
main.my > section.order article.cancel ul.dot > li ~ li,
main.my > section.order article.cancel-submit ul.dot > li ~ li { margin-top : 20px }
main.my > section.order.cancel > h1 { margin-bottom : 20px }
main.my > section.order.cancel article.cancel-submit dl.detail-info { margin-bottom : 40px }
main.my > section.order.cancel article.cancel-submit ul.dot { margin : 60px 0 }
main.my > section.order.cancel article.cancel-submit .buttons { margin-top : 0 }
main.my > section.order.cancel article.cancel-submit-ok { padding-top : 100px }
main.my > section.order.cancel article.cancel-submit-ok .buttons { margin-top : 120px }

main.my > section.order.cancel article.cancel-submit,
main.my > section.order.cancel article.cancel-submit-ok { display : none }


/** 마이페이지 > A/S **/
main.my > section.as { width : 100% ; max-width : 960px ; margin : auto ; padding-top : 0 ; margin-top : 50px ; }
main.my > section.as table.price { width : 480px }
main.my > section.as table.price tr > * { width : calc( 100% / 4 ) }
main.my > section.as ul.list { border-bottom : none }
main.my > section.as > article.apply ul.list > li > .buy dl { display : grid ; grid-template-columns : 100px 1fr ; grid-gap : 10px }
main.my > section.as > article.apply ul.list > li > button { width : 135px ; position : absolute ; top : 20px ; right : 20px }
main.my > section.as > article.apply article.submit .form-inline.no-label { margin-top : 40px }
main.my > section.as > article.apply article.submit .buttons { padding-top : 40px }
main.my > section.as > article.submit,
main.my > section.as > article.submit-ok { display : none }

main.my > section.as > article.apply ul.list > li,
main.my > section.as.status > article.list ul.list > li,
main.my > section.as.status > article > .goods_info { width : 100% ; position : relative ; border : solid 1px var(--border-gray-color) }
main.my > section.as > article.apply ul.list > li dl,
main.my > section.as.status > article.list ul.list > li dl,
main.my > section.as.status > article > .goods_info dl { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
main.my > section.as.status > article > .goods_info dl dt,
main.my > section.as.status > article.list ul.list > li dl dt  { display: grid; }
main.my > section.as.status > article.list ul.list > li ~ li { margin-top : 40px }
main.my > section.as.status > article.list ul.list > li > header,
main.my > section.as.status > article > .goods_info > header { width : 100% ; height : 65px ; border-bottom : solid 1px var(--border-gray-color) ; position : relative; padding : 15px; }
main.my > section.as > article.apply ul.list > li > .section .btn.pc,
main.my > section.as.status > article.list ul.list > li > header .btn.pc { position : absolute ; width : 135px ; top : 10px ; right : 20px }
main.my > section.as > article.apply ul.list > .btn.mobile,
main.my > section.as.status > article.list ul.list > .btn.mobile { display:none;}
main.my > section.as > article.apply ul.list > li > .section,
main.my > section.as.status > article.list ul.list > li > .section,
main.my > section.as.status > article > .goods_info > .section {display: flex; flex-wrap: wrap;}
main.my > section.as > article.apply ul.list > li > .section .image,
main.my > section.as.status > article.list ul.list > li > .section div.image,
main.my > section.as.status > article > .goods_info > .section > .image { border-right : solid 1px var(--border-gray-color) ; width : 120px ; height : 148px ; background-size: cover; background-position: center; }
main.my > section.as > article.apply ul.list > li > .section .goods,
main.my > section.as.status > article.list ul.list > li > .section .goods,
main.my > section.as.status > article > .goods_info > .section > .goods{  margin-top:20px ; margin-left: 20px; width: 40%;display: flex; gap: 10px; flex-direction: column; font-size : var(--fontsize-s) ;  }
main.my > section.as > article.apply ul.list > li > .section .buy,
main.my > section.as.status > article.list ul.list > li > .section .buy,
main.my > section.as.status > article > .goods_info > .section > .buy { height: 72px;  padding-left: 10px; padding-top:20px ; display : grid ; grid-template-columns : 100px 1fr ;   column-gap: 22px;  row-gap: 10px;	 }
main.my > section.as.status > article.list ul.list > li > .section.noVari .goods,
main.my > section.as.status > article > .goods_info > .section.noVari .goods {  width: calc( 40% + 120px ); margin-bottom: 20px; }
main.my > section.as.status > article.list ul.list > li > .section.noVari .buy,
main.my > section.as.status > article > .goods_info > .section.noVari .buy { height: 20px;  padding-top: 45px; margin-bottom: 20px;}
main.my > section.as > article.apply ul.list > li > .section .goods .title ,
main.my > section.as.status > article.list ul.list > li > .section .goods .title,
main.my > section.as.status > article > .goods_info > .section > .goods .title { font-size : 12px; font-weight : 400; color : #000;}
main.my > section.as.status > article.list ul.list > li > .section .status,
main.my > section.as.status > article > .goods_info > .section .status { position: absolute; bottom: 15px; right: 15px; font-size : 12px; font-weight : 400; text-decoration : underline;}

/*
main.my > section.as.status > article > .contents { margin-top: 10px; }
main.my > section.as.status > article > .contents dl { display: grid; grid-template-columns: 200px 1fr; row-gap: 10px; }
*/
main.my > section.as.status > article > .contents dd#attach-file { display: flex; gap: 10px; }
main.my > section.as.status > article > .contents .image { border-right: solid 1px var(--border-gray-color); width: 100px; height: 100px; background-position: center; background-size: cover; }
main.my > section.as.status > article > .list { margin-top: 50px; }

main.my > section.as.status > article > .infobox {background-color:var(--white); color:var(--black); padding : 20px ; font-size : 10px; border: solid 1px var(--border-gray-color); }
main.my > section.as.status > article > .as-status-container {display: flex; align-items: center;  justify-content: space-between;  margin: 20px 0; font-size: 11px;}
  
main.my > section.as.status > article > .as-status-container .as-step {  flex: 1;  text-align: center;  padding: 10px 0;  border: 1px solid #EAEAEA;  background-color: #ffffff;  color: #999999;  font-size: 11px;  box-sizing: border-box;}
main.my > section.as.status > article > .as-status-container .as-step.active { border-color: #808080; color: #000000;}

main.my > section.as.status > article > .as-status-container .as-step .step-number {
  margin-right: 4px;
}

main.my > section.as.status > article > .as-status-container .as-arrow { color: #808080; padding: 0 14px;}

/* 마이페이지 > AS > 신청 */
main.my > section.as > article.apply .tab { overflow: hidden; }
main.my > section.as > article.apply .tab .tab-container > ul {position: relative;display: flex;border-bottom: 1px solid #EAEAEA;}
main.my > section.as > article.apply .tab .tab-container > ul > li {width: 50%;text-align: center;cursor: pointer;}
main.my > section.as > article.apply .tab .tab-container > ul > li.on:before {display : none;}
main.my > section.as > article.apply .tab .tab-container > ul::before {content: '';position: absolute;bottom: -2px;left: 0;width: 50%;height: 3px;background-color: #000;transition: transform 0.4s ease-in-out;}
main.my > section.as > article.apply .tab .tab-container > ul.indicator-pos-2::before {transform: translateX(100%);}
main.my > section.as > article.apply .tab .section-wrapper {display: flex;align-items: flex-start;transition: transform 0.4s ease-in-out, height 0.4s ease-in-out;}
main.my > section.as > article.apply .tab .section-wrapper > section {width: 100%;flex-shrink: 0;}

@media (max-width: 768px) {
  main.my > section.as.status > article > .as-status-container {
    flex-wrap: wrap;
  }
  main.my > section.as.status > article > .as-status-container .as-step .step-number {
    margin-right: 0;
  }
  main.my > section.as.status > article > .as-status-container .as-step .step-number,
  main.my > section.as.status > article > .as-status-container .as-step .step-label {
    display: block;
  }
  main.my > section.as.status > article > .as-status-container .as-arrow { color: #808080; padding: 0 4px;}
}

main.my > section.as.status > article > .contents { font-weight: 400; font-size: 11px; line-height: 17px; word-break: keep-all;}

main.my > section.as.status > article > .contents .text {  padding: 60px 0;}
main.my > section.as.status > article > .contents .box { padding: 20px;  border: 1px solid #EAEAEA;}
main.my > section.as.status > article > .contents .box.box-margin {  margin-top: 40px;}
main.my > section.as.status > article > .contents .box > .box-content:not(:first-child) {  margin-top: 20px;}
main.my > section.as.status > article > .contents .box .box-content .title {
  text-decoration: underline;
  margin-bottom: 5px;
}

main.my > section.as.status > article > .contents .box .box-content .img-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 5px;
}

main.my > section.as.status > article > .contents .box .box-content .img-list .img-item {
  width: 45px;
  height: 45px;
  aspect-ratio: 1 / 1;
  border: 1px solid #808080;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

main.my > section.as.status > article > .contents .box .box-content .img-list .img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.my > section.as.status > article > .contents .box .box-content .address p:not(:first-of-type),
main.my > section.as.status > article > .contents .box .box-content .payment p:not(:first-of-type) {
  margin-top: 5px;
}

main.my > section.as.status > article > .contents .box .box-content .payment .recipt {
  border: 1px solid #EAEAEA;
  width: fit-content;
  padding: 4px 10px;
  cursor: pointer;
}

main.my > section.as.status > article > .contents .buttons {
  margin-top: 40px;
}

main.my > section.as.status > article > .contents .buttons .btn {
  max-width: 400px;
  margin: 0 auto;
}

main.my > section.as.status > article > .contents .buttons .btn:not(:first-child) {
  margin-top: 10px;
}
main.my > section.as > article.apply ul.list > li > .section .btn.pc.disabled,
main.my > section.as > article.apply ul.list > .btn.mobile.disabled,
main.my > section.as.status > article > .contents .buttons .btn.disabled {
  color: #999999;
  border: 1px solid #999999;
  pointer-events: none;
}

.infobox #as_status {text-decoration:underline!important;}
main.my > section.as.status > article.list ul.list > li > .goods .status {text-decoration: underline; }
.as_message {margin-top:10px;width:50%!important;}

@media only screen and (max-width: 1024px) {
  /* 마이페이지 A/S 블루마크 인증증내역 
  main.my > section.as > article.apply ul.list > li { width : 100% ; height : 250px ; border : solid 1px var(--border-gray-color) ; position : relative ; margin-top : 40px }
  main.my > section.as > article.apply ul.list > li > .image { border : solid 1px var(--border-gray-color) ; width : 120px ; height : 148px ; top : 0 ; left : 0 ; position : absolute; background-repeat: no-repeat; background-size: cover; background-position: center;  }
  main.my > section.as > article.apply ul.list > li > button { width: 120px;height:35px; position : absolute;top: 10px;right: 15px; line-height: 2; }
  main.my > section.as > article.apply ul.list > li > .goods { width : 310px ; position : absolute ; font-size : var(--fontsize-s) ; top : 50px ; left : 140px }
  main.my > section.as > article.apply ul.list > li > .goods { width : 310px ; position : absolute ; font-size : var(--fontsize-s) ; top : 50px ; left : 140px }
  main.my > section.as > article.apply ul.list > li.goods div { text-overflow:ellipsis; overflow: hidden; width: 75%; white-space: nowrap; }
  main.my > section.as > article.apply ul.list > li > .buy {display: grid ; position : absolute;top: 160px;left: 20px;grid-template-columns: 120px 1fr;}
  main.my > section.as > article.apply ul.list > li > .buy {width : 310px;position : absolute;font-size : var(--fontsize-s);top: 160px;left: 20px;}
  main.my > section.as > article.apply ul.list > li > .buy dl {display : grid;grid-template-columns: 110px 1fr;width: 240px;grid-gap : 10px}
  */

  /* 마이페이지 A/S 내역 */
  main.my > section.as.status > as-contents {width: 100%;height: 150px;border: 1px solid #bfbfbf;padding: 20px;}
  main.my > section.as.status > article.list ul.list > li,
  main.my > section.as.status > article > .goods_info {width : 100%;position : relative;border : solid 1px var(--border-gray-color)}
  main.my > section.as.status > article.list ul.list > li > header,
  main.my > section.as.status > article > .goods_info > header {  padding: 10px; height: 54px;}
  main.my > section.as > article.apply ul.list > li > .section .btn.pc,
  main.my > section.as.status > article.list ul.list > li > header .btn.pc {display: none;}
  main.my > section.as > article.apply ul.list > .btn.mobile,
  main.my > section.as.status > article.list ul.list > .btn.mobile { width: 100%;height: 45px;line-height:45px;margin-top: 10px;}
  main.my > section.as.status > article.list ul.list > li > div.image {border: solid 1px var(--border-gray-color);width : 120px;height : 148px;top : 65px;left : 0;position : absolute;background-size: cover;}
  main.my > section.as > article.apply ul.list > li > .section .buy,
  main.my > section.as.status > article.list ul.list > li > .section .buy,
  main.my > section.as.status > article > .goods_info > .section .buy {width:100% ; border-top: solid 1px var(--border-gray-color); height: auto; row-gap: 5px; margin-bottom: 10px; padding-top: 10px;}
  main.my > section.as.status > article.list ul.list > li > .section .status,
  main.my > section.as.status > article > .goods_info > .section .status{bottom: 105px;}
  main.my > section.as.status > article.list ul.list > li > .section.noVari .buy,
  main.my > section.as.status > article > .goods_info > .section.noVari .buy {border-top: none;  padding-top: 10px; margin-bottom: 30px;}
  main.my > section.as.status > article.list ul.list > li > .section.noVari .goods,
  main.my > section.as.status > article > .goods_info > .section.noVari .goods {margin-left: 10px;  margin-bottom: 0;}
  main.my > section.as.status > article.list ul.list > li > .section.noVari .status,
  main.my > section.as.status > article > .goods_info > .section.noVari .status {bottom: 15px;}

  /* main.my > section.as.status > article.list ul.list > li ~ li{margin-top : 95px;} */

  main.my > section.as.status > article.list ul.list > li > .status{bottom: 100px; right: 0; width: calc(100% - 120px); padding: 0 10px 0 0; text-align: right;  border-bottom: solid 1px var(--border-gray-color);}
  main.my > section.as.status > article.list ul.list > li > header .btn dt{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  main.my > section.as.status > article.list ul.list > li > .buy{
    row-gap: 5px;
  }
  /* 마이페이지 A/S 현황 */
  main.my > section.as.status > article > .buy {display: grid;grid-template-columns: 1fr;background-color: #f8f8f8;justify-content: center;margin-top: 10px;padding: 10px;}
  main.my > section.as.status > article > .buy > dl {display: grid;gap: 10px;grid-template-columns: 120px 1fr;}
  .as_message {width:100%!important;}
  main.my > section.as.status > article > .contents dl {display: block;grid-template-columns: 200px 1fr;row-gap: 10px;}
  main.my > section.as.status > article > .contents .image { border: solid 1px var(--border-gray-color); width: 46px!important; height: 46px!important  ; background-position: center; background-size: cover; }
  
  #attach-file_P { margin-bottom:15px }
  #attach-file_R { margin-bottom:15px }

  .wrap__select div {width:100%!important;}
  .wrap__select select {width:100%!important;}
  .btn_address {width:100%!important;}

  main.my > section.as.status > article > .contents #delivery-info dl { display:grid!important; grid-template-columns: 90px 1fr; row-gap: 10px; }
  main.my > section.as.status > article > .contents #return-info dl { display:grid!important; grid-template-columns: 90px 1fr; row-gap: 10px; }
  main.my > section.as.status > article > .housing_F {margin-top:15px;}
  main.my > section.as.status > article > .housing_T dl {margin-top:15px;display: block;grid-template-columns: 90px 1fr;row-gap: 10px;}
  /* main.my > section.as.status > article > .repair_F dl { margin-top:15px; display:grid!important; grid-template-columns: 90px 1fr; row-gap: 10px; } */
  /* main.my > section.as.status > article > .repair_T dl { margin-top:15px; display:grid!important; grid-template-columns: 90px 1fr; row-gap: 10px; } */
  main.my > section.as.status > article > .contents #payment-info dl { margin-top:15px; display:grid!important; grid-template-columns: 90px 1fr; row-gap: 10px; }

  .m_bold {font-weight: 400;}
}

/* AS 메뉴 */
@media only screen and (max-width: 1024px) {

  main.my.as > section.summary > article.info,
  main.my.as-apply > section.summary > article.info,
  main.my.as-list > section.summary > article.info,
  main.my.as-detail > section.summary > article.info {
    display: none;
  }

  main.my.as > section.summary > article.links,
  main.my.as-apply > section.summary > article.links,
  main.my.as-list > section.summary > article.links,
  main.my.as-detail > section.summary > article.links {
    border-top: none;
  }
}

/* AS 신청 */
main.my section.as article.apply #frm-as-submit-nocerty .grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

main.my section.as article.apply .section-wrapper .paging,
main.my.as-list .paging {
  margin-top: 60px;
}

main.my section.as article.apply .section-wrapper > section:first-child ul.dot {
  margin-bottom: 60px;
}

main.my.as-apply .section-wrapper > section > ul.list > li:not(:first-child) {
  margin-top: 40px;
}

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

  main.my section.as article.apply #frm-as-submit-nocerty .grid {
    display: block !important;
  }

  main.my section.as article.apply .section-wrapper > section:first-child ul.dot {
    margin-bottom: 40px;
  }

  main.my.as-apply .section-wrapper > section > ul.list > li:not(:first-child) {
    margin-top: 60px;
  }
}

/* AS 목록 */
main.my.as-list > section.as,
main.my.as-list > section.as.status > article > .list,
main.my.as-detail > section.as {
  margin-top: 0;
}

@media only screen and (max-width: 1024px) { 
 
  main.my.as-list > section.as {
    margin-top: 40px;
  }

  main.my.as-list > section h2,
  main.my.as-detail > section h2 {
    padding-bottom: 20px;
  }
}

/* AS 상세 */
main.my > section.as.status > article > .as-status-container {
  margin: 45px 0 0 0;
}

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

  main.my > section.as.status > article > .as-status-container {
    margin: 40px 0 0 0;
  }

  main.my > section.as.status > article > .contents .text {
    padding: 40px 0;
  }
}

/* AS 02 회수 발송 모달 */
main.my.as-detail .order-description-direct section.direct-wrapper {
  padding: 0;
  width: 100%;
  height: 100%;
  min-width: 480px;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-header {
  border-bottom: solid 1px var(--gray);
  margin: 0;
  padding: 15px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-header button.close {
  position: relative;
  top: 0;
  right: 0;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-delivery {
  border: none;
  padding: 70px 40px;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-delivery .form-inline:first-child {
  padding-top: 0;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-delivery .form-inline:not(:first-child) {
  padding-top: 30px;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-delivery .delivery-company-title {
  top: 12px;
  opacity: 0;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-delivery .delivery-company-title.selected {
  top: -12px;
  font-size: 10px;
  opacity: 0.5;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box-input {
  border: none;
  border-bottom: solid 1px var(--gray);
  padding: 0;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box-placeholder {
  color: #343434;
  opacity: 0.5;
  font-size: 12px;
  line-height: 40px;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box-placeholder.selected {
  color: var(--black);
  opacity: 1;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box > ul {
  max-height: 180px;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box-dropdown li {
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box-dropdown li.tui-select-box-highlight,
main.my.as-detail .order-description-direct .order-delivery .tui-select-box-dropdown li.tui-select-box-selected {
  background: #FFFFFF;
}

main.my.as-detail .order-description-direct .order-delivery .tui-select-box-dropdown li:not(:last-child) {
  border-bottom: 1px solid #EAEAEA;
}

main.my.as-detail .order-description-direct .order-delivery .housing-num-title {
  z-index: 0;
}

main.my.as-detail .order-description-direct .order-delivery .i_housing_num {
  font-weight: 300;
}

main.my.as-detail .order-description-direct section.direct-wrapper .order-detail-btn {
  border: none;
  background-color: #343434;
  color: #FFFFFF;
}

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

  main.my.as-detail .order-description-direct.modal > section {
    padding: 0;
  }

  main.my.as-detail .order-description-direct section.direct-wrapper {
    min-width: auto;
  }

  main.my.as-detail .order-description-direct section.direct-wrapper .order-delivery {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* AS 04 결제 */
main.my.as-detail .btn_payment.disabled {
  pointer-events: none;
  color: #999999;
  border-color: #999999;
}

/* AS 영수증 */
main.my.as-detail .recipt {
  border: 1px solid #EAEAEA;
  width: fit-content;
  height: 25px;
  margin-top: 5px;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/** 마이페이지 > 주문내역 **/
main.my > section.order { width : 100% ; max-width : 720px ; margin : auto ; padding-top : 20px }

/** 마이페이지 > 스탠드바이 **/
main.my > section.standby > article.list .tab { margin-top : 40px;overflow: hidden; }
main.my > section.standby > article.list section.list > ul > li { margin-top : 60px ; text-align : center }
main.my > section.standby > article.list section.list > ul > li .image { display : block ; max-width : 420px; width:100%; height : 480px ; background-size : cover ; background-position : center ; margin : 0 auto 20px auto ; position : relative }
main.my > section.standby > article.list section.list > ul > li .image .label { position : absolute ; top : 0 ; left : 0 ; background-color : var(--black) ; color : var(--white) ; padding : 5px ; font-size : var(--fontsize-s) }
main.my > section.standby > article.list section.list > ul > li .date { display : block ; color : var(--gray) ; font-size : var(--fontsize-s) }
main.my > section.standby > article.list .tab .tab-container > ul {position: relative; display: flex; border-bottom: 1px solid #EAEAEA;}
main.my > section.standby > article.list .tab .tab-container > ul > li {width: 50%;text-align: center;cursor: pointer;}
main.my > section.standby > article.list .tab .tab-container > ul > li.on:before {display : none;}
main.my > section.standby > article.list .tab .tab-container > ul::before {content: '';position: absolute;bottom: -2px;left: 0;width: 50%;height: 3px;background-color: #000;transition: transform 0.4s ease-in-out;}
main.my > section.standby > article.list .tab .tab-container > ul.indicator-pos-2::before {transform: translateX(100%);}
main.my > section.standby > article.list .tab .section-wrapper {display: flex;align-items: flex-start;transition: transform 0.4s ease-in-out, height 0.4s ease-in-out;}
main.my > section.standby > article.list .tab .section-wrapper > section { width: 100%; flex-shrink: 0;}

/** 마이페이지 > 멤버십 **/
main.my > section.membership h1 { margin-bottom : 20px }
main.my > section.membership .--describe big { font-size : 13px }
main.my > section.membership .--describe small { font-size : 10px }
main.my > section.membership .--describe p { line-height : 1.6 }
main.my > section.membership .--describe p ~ p  { margin-top : 18px }
main.my > section.membership h2 { margin-top : 60px ; border-bottom-color : var(--black) }
main.my > section.membership ul.benefits { margin-bottom : 40px }
main.my > section.membership ul.benefits > li { height: 100px ; position : relative ; padding : 20px 0 20px 200px ; border-bottom : solid 1px var(--border-color) }
main.my > section.membership ul.benefits > li:last-child { border-bottom-color : var(--black) }
main.my > section.membership ul.benefits > li > .level { position : absolute ; top : 20px ; left : 0 ; font-size : 10px ; color : var(--gray) }
main.my > section.membership ul.benefits > li > .level big { display : block ; font-size : 12px ; margin-bottom : 6px ; color : var(--black) }
main.my > section.membership ul.benefits > li ul.dot { margin : 0 }
main.my > section.membership ul.benefits > li ul.dot > li ~ li { margin-top : 6px }

/** 마이페이지 > 블루마크 **/
main.my > section.bluemark h1 { color : var(--blue) }
main.my > section.bluemark .tab { margin-top : 20px }
main.my > section.bluemark .tab > section:nth-child(2) { padding-top : 30px }
main.my > section.bluemark .tab > section:nth-child(2) .buttons { margin-top : 60px }
main.my > section.bluemark ul.list { border-bottom : none ; margin-top : 20px }
main.my > section.bluemark ul.list > li ~ li { margin-top : 40px }
main.my > section.bluemark ul.list .info { border : solid 1px var(--border-gray-color) ; position : relative ; margin-bottom : 10px }
main.my > section.bluemark ul.list .info > .image { width : 100px ; height : 124px ; top : 0 ; left : 0 ; background-position : center ; background-size : cover ; position : absolute }
main.my > section.bluemark ul.list .info > .goods { width : 100% ; height : 125px ; border-bottom : solid 1px var(--border-gray-color) ; padding : 20px 0 20px 120px ; font-size : var(--fontsize-s) }
main.my > section.bluemark ul.list .info > .goods.no-image { 
  height: fit-content;
  padding: 10px;
}
main.my > section.bluemark ul.list .info > .goods big { font-size : var(--fontsize-sub) }
main.my > section.bluemark ul.list .info > .goods big ~ * { margin-top : 6px }
main.my > section.bluemark ul.list .info > .bluemark { width : 100% ; padding : 10px }
main.my > section.bluemark ul.list .info > .bluemark dl { display : grid ; grid-gap : 7px ; grid-template-columns : 100px 1fr }
main.my > section.bluemark ul.list .buttons { max-width : 100% }

/** 자주 묻는 질문 **/
main.my > section.faq { width : 100% ; max-width : 720px ; margin : 65px auto 0 auto ; }
main.my > section.faq .searchform { width : 100% ; margin : 30px 0 20px 0 ; height : 32px }
main.my > section.faq .searchform input { width: 100% ; height : 32px ; border-bottom : solid 1px var(--border-color) ; background : url('/images/ico-search.svg') left center no-repeat ; padding-left : 25px }
main.my > section.faq .category { width : 100% ; height : 60px ; border : solid 1px var(--border-color) ; padding : 12px 20px ; transition : ease-out .2s; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
main.my > section.faq .category ul { display : table }
main.my > section.faq .category ul > li { white-space: nowrap; display : table-cell ; padding : 0 17px ; line-height : 36px ; position : relative ; cursor : pointer; word-break: keep-all; width:100px!important; text-align:center!important; }
/* main.my > section.faq .category ul > li:before { content : "" ; background-color : var(--black) ; width : 0 ; height : 2px ; display : inline-block ; position : absolute ; left : 50% ; bottom : 0 ; transition : ease-out .2s } */
main.my > section.faq .category ul > li.on:before { width : 100% ; left : 0 }
main.my > section.faq .contents > h2 { font-size : var(--fontsize-s) ; line-height : 14px ; opacity : .5 ; padding : 5px 20px ; margin-top : 35px }
main.my > section.faq .contents > dl { border-top : solid 1px var(--border-color) ; border-bottom : solid 1px var(--border-color) }
main.my > section.faq .contents > dl > * { padding : 14px 20px ; line-height : 16px ; word-break: break-all; border-top : solid 1px var(--border-gray-color) }
main.my > section.faq .contents > dl > *:first-child { border-top : none }
main.my > section.faq .contents > dl > dt { cursor : pointer ; position : relative }
main.my > section.faq .contents > dl > dt:before { content : "" ; display : inline-block ; width : 10px ; height : 5px ; position : absolute ; background : url('/images/ico-angle-down.svg') center no-repeat ; transition : ease-out .2s ; right : 20px ; top : calc( 50% - 3px ) }
main.my > section.faq .contents > dl > dt.on:before { transform : rotate(180deg) }
main.my > section.faq .contents > dl > dd { 
  display: none;
  background-color: var(--content-bg);
  padding: 26px 20px 40px 20px;
  font-size: 11px; 
  line-height: 14px;
}
main.my > section.faq .contents > dl > dd > h3 { font-size : 12px ; line-height : 16px ; margin-bottom : 20px }
/* 제갈민혁 - 자주묻는 질문 mo 버튼 추가*/
main.my > .back_btn {display: none; width: 100vw; height: 45px; border-bottom: 1px solid #EAEAEA; background: url(/images/ico-back.svg) 20px center no-repeat; padding-left: 37px; text-align: left;}
main.my > .back_btn.KR::after{content: "뒤로가기"; font-size: 10px;}
main.my > .back_btn.EN::after{content: "Back"; font-size: 10px;}

main.my > section.faq .faq-contents-swiper{overflow: hidden;}
main.my > section.faq .faq_search_result{ margin : 0; padding : 0; color : #999999;}
main.my > section.faq .category ul#faq-category {position: relative;}
main.my > section.faq .category ul#faq-category::before { content: "";  display: block;  position: absolute;  bottom: 0;  height: 2px;   background-color: var(--black, #000000);  width: var(--underline-width, 0px);  left: var(--underline-left, 0px); transition: left 0.4s ease; z-index: 1;
}

@media only screen and (max-width : 1024px) {
  main.my > .back_btn { display: block; }
  main.my > section.faq .faq_search_result{ padding : 0 20px; }
}


/** 마이페이지 > 고객센터 **/
main.my > section.customer { width : 100% ; max-width : 720px ; margin : auto }

/** 마이페이지 > 문의하기 **/
main.my > section.qna > article .info { padding-top : 40px ; font-size : 11px }
main.my > section.qna > article .info big { font-size : 12px ; display : block; padding-bottom : 10px }
main.my > section.qna > article .info + ul.dot { color : var(--gray) ; margin-bottom : 25px }
main.my > section.qna > article h2 + ul.contents-list { margin-top : -10px }
main.my > section.qna > article ~ article { padding-top : 60px }
main.my > section.qna > article.write h2 { padding-bottom : 0 }
main.my > section.qna > article.write .buttons { padding-top : 40px }
/* 제갈민혁 문의 유형 드롭다운 */
main.my > section.qna > article .form-inline.inline-label select.category_idx{display: none !important;}
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper {position: relative; display: block; width: 100%; border-bottom: 1px solid #808080; background-color: transparent; cursor: pointer; box-sizing: border-box; font-size: inherit; height: 40px; line-height: 38px;}
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-select-trigger {position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; height: 35px; font-size: var(--fontsize-sub); }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-select-trigger span{white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-select-trigger .arrow { width: 10px; height: 10px; transition: transform 0.4s ease; margin-right: 9px; background: url('/images/ico-gallery-arrow-up.svg') center center no-repeat; background-size: contain; rotate: 180deg; }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper.open .custom-select-trigger .arrow { transform: rotate(180deg); }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options { position: absolute; top: calc(100% + 1px); left: 0; right: 0; background-color: #fff; border: 1px solid #808080; border-top: none; max-height: 180px; overflow-y: auto; z-index: 1000; list-style-type: none; padding: 0; margin: 0; }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options .custom-option { padding-left: 10px; font-size: inherit; color: #495057; cursor: pointer; transition: background-color 0.2s ease; box-shadow: 0 1px 0 0 #EAEAEA; border-right: 1px solid #808080; height: 45px !important; align-items: center; }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options .custom-option:hover { background-color: #f8f9fa; }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options .custom-option.selected {background-color: #e9ecef; font-weight: bold;}
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options .custom-option.placeholder:not(:hover) { color: #6c757d; background-color: transparent; font-weight: normal;}
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options::-webkit-scrollbar { width: 8px; }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options::-webkit-scrollbar-track { background: #FFF; border-radius: 0; }
main.my > section.qna > article .form-inline.inline-label .custom-select-wrapper .custom-options::-webkit-scrollbar-thumb {background: #CFCFCF; border-radius: 0; height: 107px; }

/** 마이페이지 > 공지사항 **/
main.my > section.notice dl.board-list { border-bottom : solid 1px var(--border-color) }
main.my > section.notice dl.board-list img { max-width : 100% }
main.my > section.notice dl.board-list > dt { padding : 14px 20px ; font-size : 12px ; line-height : 16px ; position : relative ; border-top : solid 1px var(--border-color) ; cursor : pointer }
main.my > section.notice dl.board-list > dt:after { content : "" ; display : inline-block ; position : absolute ; width : 10px ; height : 10px ; background : url('/images/ico-angle-down.svg') center no-repeat ; top : calc( 50% - 5px ) ; right : 20px ; transition : ease-out .2s }
main.my > section.notice dl.board-list > dd { 
  padding: 26px 20px 40px 20px;
  display: none;
}
main.my > section.notice dl.board-list > dt.on,
main.my > section.notice dl.board-list > dt.on + dd { background-color : var(--content-bg) }
main.my > section.notice dl.board-list > dt.on:after { transform : rotate(180deg) }

/** 마이페이지 > 재입고알림 **/
main.my > section.reorder ul.list { padding : 40px 0 20px 0 ; border-bottom : none }
main.my > section.reorder ul.list > li { height : 150px ; border : solid 1px var(--border-gray-color) ; position : relative ; padding : 20px 20px 20px 140px ; font-size: var(--fontsize-s) }
main.my > section.reorder ul.list > li ~ li { margin-top : 20px }
main.my > section.reorder ul.list > li .thumbnail { position : absolute ; top : 0 ; left : 0 ; width : 120px ; height : 100% ; background-position : center ; background-size : cover ; border-right : solid 1px var(--border-gray-color); cursor : pointer; }
main.my > section.reorder ul.list > li .name { font-size : var(--fontsize-sub) }
main.my > section.reorder ul.list > li .name ~ * { margin-top : 5px }
main.my > section.reorder ul.list > li .info { position: absolute ; right : 20px ; bottom : 20px ; text-align : right }
main.my > section.reorder ul.list > li .info > .status { font-size : 11px ; text-decoration : underline }
main.my > section.reorder ul.list > li .info > .date { font-size : var(--fontsize-s) ; color : var(--gray) }
main.my > section.reorder ul.list > li .info > .buttons { margin-top : 4px ; width : 135px }
main.my > section.reorder ul.list > li button.delete {
  top: 20px;
  right: 20px;
  transition: unset;
  margin-top: 0;
}

/** 마이페이지 > 마일리지 **/
main.my > section.mileage article.status ul.table-info + ul.dot { margin-top : 40px }
main.my section.mileage a[name="유의사항"], 
main.my section.mileage a[name="적립 가이드"] {
  scroll-margin-top: 45px;
}
main.my > section.mileage article.history {
  margin-top : 80px;
}
main.my > section.mileage article.history ul.list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}
main.my > section.mileage article.history ul.list > li:not(.empty) {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #eaeaea;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > .row-1 {
  font-size: 12px;
  text-decoration: underline;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > .row-2,
main.my > section.mileage article.history ul.list > li:not(.empty) > .row-3 {
  font-size: 11px;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > .row-2 {
  margin-top: 20px;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > .row-3 {
  margin-top: 10px;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > div > div {
  display: flex;
  gap: 10px;
}
main.my > section.mileage article.history ul.list > li:not(.empty) > div .col-2 .col-text {
  color: #808080;
}

/* 마이페이지 > 적립금 내역 */
main.my > section.mileage-log {padding : 25px; margin:auto;}
main.my > section.mileage-log article ul.list { list-style: none; padding: 0; margin: 0; margin-top: 12px; }
main.my > section.mileage-log article ul.list > li:not(.empty) { display: contents; }
/* main.my > section.mileage-log article ul.list > li:not(.empty) > div { width: 100%; text-align: center; border-bottom: 1px solid #efefef; align-items: center; justify-content: center; font-size: 10px;height:40px; padding:10px 0px 10px 0px;text-overflow:ellipsis; overflow: hidden; white-space: nowrap; } */
main.my > section.mileage-log article ul.list > li:not(.empty) > div.code {text-align: center;border-bottom: 1px solid #efefef;align-items: center;justify-content: center;font-size: 10px;height:40px;padding:10px 0px 10px 0px; width:100%;}
main.my > section.mileage-log article ul.list > li:not(.empty) > div.qty { text-align: center; }
/* main.my > section.mileage-log article ul.list > li:not(.empty):first-child > div { font-weight: bold; } */
/* main.my > section.mileage-log article ul.list > li:not(.empty):last-child > div { border-bottom: none; } */

main.my > section.mileage-log { width: 100%; max-width: 720px; margin: auto; padding-top: 20px; padding: 20px 0 0; }
main.my > section.mileage-log article .tab { overflow: hidden; }
main.my > section.mileage-log article .tab-container > ul { position: relative; }
main.my > section.mileage-log article .tab-container > ul::before {content: ''; position: absolute; bottom: -2px; left: 0; width: 50%; height: 3px; background-color: #000; transition: transform 0.4s ease-in-out;}
main.my > section.mileage-log article .tab-container > ul.indicator-pos-2::before {transform: translateX(100%);}
main.my > section.mileage-log article .section-wrapper {display: flex;transition: transform 0.4s ease-in-out;}
main.my > section.mileage-log article .section-wrapper > section {width: 100%;flex-shrink: 0;}
main.my > section.mileage-log article .tab-container > ul > li.on:before {display: none;}
main.my > section.mileage-log article ul.list li .wrapper {display: flex;margin-top: 20px;flex-direction: column;font-size: 11px;}
main.my > section.mileage-log article ul.list li .wrapper .wrapper_header {display: flex;border-bottom: 1px solid #EAEAEA;justify-content: space-between;width: 100%;padding: 22px 20px 20px 20px;}
main.my > section.mileage-log article ul.list li .wrapper .wrapper_header .header_type {text-decoration: underline;}
main.my > section.mileage-log article ul.list li .wrapper .wrapper_header .header_info {display: flex;gap: 20px;}
main.my > section.mileage-log article ul.list li .wrapper .wrapper_body {display: flex;flex-direction: column;width: 100%;align-items: flex-start;padding: 20px 0 22px 20px;gap: 5px;}
main.my > section.mileage-log article ul.list li .wrapper .wrapper_body .wrapper_body_option {display: flex;gap: 10px;}
main.my > section.mileage-log article ul.list li .wrapper .wrapper_body .wrapper_body_option .option_title {min-width: 43px;text-align: start;}
main.my > section.mileage-log article ul.list > li > div {font-weight: normal;}
main.my > section.mileage-log article ul.list > li {display: block;}
main.my > section.mileage-log article ul.list > li > div {height: 100%;border: 1px solid #EAEAEA;padding: 0;}
main.my > section.mileage-log article #list-log-paging-inc {margin-top: 40px;}
main.my > section.mileage-log article ul.list > li > div {border-bottom: 1px solid #EAEAEA;}

@media only screen and (max-width: 1024px) {
  .h_column {display:none;}
  /* main.my > section.mileage-log article ul.list { display: grid; grid-template-columns: repeat(13, 1fr); list-style: none; padding: 0; margin: 0; margin-top: 12px; overflow-x:scroll }
  main.my > section.mileage-log article ul.list > li:not(.empty) > div { text-align: center; border-bottom: 1px solid #efefef; align-items: center; justify-content: center; font-size: 10px;height:40px; padding:10px 0px 10px 0px; width: 100%; } */
}

/** 마이페이지 > 바우처 **/
main.my > section.voucher .submit { padding-top : 14px }
main.my > section.voucher .submit .form-inline:before { content : "" ; width : 18px ; height : 19px ; display : inline-block ; background : url('/images/ico-barcode.svg') no-repeat center ; position : absolute ; right : 120px ; top : 39px ; z-index : 2 }
main.my > section.voucher .submit .form-inline input { height : 45px }
main.my > section.voucher .submit ul.dot { margin-top : 40px }
main.my > section.voucher .submit-ok { max-width : 480px ; padding-top : 110px ; margin : auto ; display : none }
main.my > section.voucher .submit-ok ul.dot { margin : 40px 0 80px 0 }
main.my > section.voucher.submit .submit-ok { display : block }
main.my > section.voucher.submit .submit-ok ~ * { display : none }
main.my > section.voucher.submit > article > h2.border { border-bottom : none !important }
main.my > section.voucher > article > h2 ~ h2 { margin-top : 80px }
main.my > section.voucher ul.voucher-list > li { color: #000000; font-size : var(--fontsize-sub) ; padding : 20px ; border : solid 1px var(--border-color) ; margin-top : 20px ; position : relative }
main.my > section.voucher ul.voucher-list > li .sale { margin-top : 15px }
main.my > section.voucher ul.voucher-list > li .expire { position : absolute ; top : 20px ; right : 20px ; font-size : var(--fontsize) ; color: var(--gray) ; text-align : center }
main.my > section.voucher ul.voucher-list > li .expire .number { margin-top: 7px }
main.my > section.voucher ul.voucher-list > li dl { margin-top : 10px ; line-height : 1.2 ; display : grid ; grid-template-columns : 75px 1fr }
main.my > section.voucher ul.voucher-list > li .no-usable { opacity: 0.5 }
main.my section.voucher .list__none {
  height: auto;
  padding: 100px 0 20px 0;
  font-weight: 400;
  font-size: 12px;
}

main.my > section.voucher ul.voucher-list#list-2 .sale { margin-top : 40px }

/** 마이페이지 > 코인 **/
main.my > section.coin {
  /* color: #000000; */
  font-size: 11px;
}

/* main.my > section.coin * {
  font-weight: 400;
} */

main.my > section.coin.wrap-720 {
  padding-top: 70px;
}

main.my > section.coin .coin-top {
  text-align: left;
}

main.my > section.coin .coin-top .title {
  font-size: 13px;
  font-weight: 400;
}

main.my > section.coin .coin-top .text {
  margin-top: 40px;
  /* line-height: 100%; */
}

main.my > section.coin .coin-middle {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  margin-top: 46px;
  margin-bottom: 40px;
  text-align: center;
}

main.my > section.coin .coin-middle .no-coin {
  padding: 60px 10px;
}

main.my > section.coin .coin-middle .has-coin .title {
  padding: 15px 0;
  border-bottom: 1px solid #000000;
}

main.my > section.coin .coin-middle .has-coin .title .count {
  display: inline-block;
  margin-left: 20px;
}

/* content */
main.my > section.coin .coin-middle .has-coin .content {
  padding: 40px 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

main.my > section.coin .coin-middle .has-coin .content .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

main.my > section.coin .coin-middle .has-coin .content .subtitle > div:not(:first-child) {
  line-height: 100%;
  margin-top: 5px;
}

main.my > section.coin .coin-middle .has-coin .content .coin-btn,
main.my > section.coin .coin-middle .content-detail .coin-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

main.my > section.coin .coin-middle .has-coin .content .coin-btn img[data-type="plus"] {
  cursor: pointer;
}

main.my > section.coin .coin-middle .has-coin .content .coin-image {
  max-width: 220px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-top: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

main.my > section.coin .coin-middle .has-coin .content .item .coin-image {
  background-image: url('/images/coin.svg');
}

main.my > section.coin .coin-middle .has-coin .content .item.none .coin-image {
  background-image: url('/images/coin-blur.png');
}

/* content-detail */
main.my > section.coin .coin-middle .content-detail {
  padding: 40px 10px;
  display: none;
}

main.my > section.coin .coin-middle .content-detail > div {
  position: relative;
}

main.my > section.coin .coin-middle .content-detail .coin-btn {
  position: absolute;
  top: 0;
  right: 0;
}

main.my > section.coin .coin-middle .content-detail .coin-btn img[data-type="minus"] {
  cursor: pointer;
}

main.my > section.coin .coin-middle .content-detail .desc {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

main.my > section.coin .coin-middle .content-detail .desc .status {
  font-weight: 500;
}

main.my > section.coin .coin-middle .content-detail .desc > :nth-child(4n - 3),
main.my > section.coin .coin-middle .content-detail .desc > :nth-child(4n - 2) {
  text-align: left;
}

main.my > section.coin .coin-middle .content-detail .desc > :nth-child(4n - 1),
main.my > section.coin .coin-middle .content-detail .desc > :nth-child(4n) {
  text-align: right;
}

main.my > section.coin .coin-middle .content-detail .coin-image {
  max-width: 320px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 40px auto 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/images/coin.svg');
}

/* coin-bottom */
main.my > section.coin .coin-bottom {
  line-height: 15px;
}

main.my > section.coin .coin-bottom .title {
  margin-bottom: 20px;
}

main.my > section.coin .coin-bottom .text > div:not(:last-child) {
  margin-bottom: 10px;
}

@media only screen and (max-width: 1024px) { 
  
  main.my > section.coin.wrap-720 {
    padding-top: 40px;
  }

  main.my > section.coin .coin-middle {
    margin-top: 40px;
  }

  main.my > section.coin .coin-middle .has-coin .content {
    padding: 40px 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  main.my > section.coin .coin-middle .content-detail .desc {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }

  main.my > section.coin .coin-middle .content-detail .desc > :nth-child(4n - 1), 
  main.my > section.coin .coin-middle .content-detail .desc > :nth-child(4n) {
    text-align: left;
  }

  main.my > section.coin .coin-middle .content-detail .coin-image {
    max-width: 230px;
  }
}

/** 이용약관 **/
main.terms {line-height: 15px;}
main.terms > header { padding: 100px 0 40px 0; font-size: 13px;}
main.terms > nav > ul.terms-list {display: flex; justify-content: center; gap: 5px; font-size: 11px;}
main.terms > nav > ul.terms-list > li.on { opacity: 1; background: var(--black)}
main.terms > nav > ul.terms-list > li {padding: 1px; opacity: 0.5; background: var(--white); line-height: 21px}
main.terms > nav > ul.terms-list > li:hover {transition: ease-out .5s; opacity: 1; background: var(--black)}
main.terms > nav > ul.terms-list > li > a { display: inline-block; background: var(--white); padding: 4px 9px; line-height: 15px;}
main.terms > section.description {padding: 70px 25px 80px 25px; max-width: 710px; margin: auto;}
main.terms > section.description > h2 {font-size: 13PX; line-height: 15px; margin-bottom: 30px;}
main.terms > section.description > div {display: block; transition: ease-out .5s; font-size: 11px; line-height: 16px;}
main.terms > section.description > div .sub_title {font-size: 13px; line-height: 15px; margin-bottom: 10px;}
main.terms > section.description > div .content {margin-bottom: 30px;}
main.terms nav.pc {
  display: block;
}

main.terms nav.mo {
  display: none;
}

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

  main.terms nav.pc {
    display: none;
  }

  main.terms nav.mo {
    display: block;
  }
}

main.terms,
main.terms * {
  font-weight: 400;
}

main.terms {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0;
  line-height: 1.6;
}

main.terms .main-terms {
  border-left: 1px solid var(--border-gray-color);
  border-right: 1px solid var(--border-gray-color);
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 40px 200px 40px;
}

main.terms nav {
  text-align: left;
}

main.terms nav.pc {
  margin-bottom: 40px;
}

main.terms section.description {
  max-width: 960px;
  margin: 0 auto;
}

main.terms section.description h2 {
  font-size: 13px; 
  line-height: 15px; 
  margin-bottom: 40px;
}

main.terms section.description .policy-block:not(:last-child) {
  margin-bottom: 25px;
}

main.terms section.description .policy-line {
  font-size: 12px;
  text-decoration: underline;
  margin-bottom: 10px;
}

main.terms section.description .policy-noline {
  font-size: 12px;
  margin-bottom: 10px;
}

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

  main.terms {
    padding-left: 0;
    padding-right: 0;
  }

  main.terms .main-terms {
    border: none;
    padding: 0;
    padding-bottom: 130px;
  }

  main.terms nav.mo {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-gray-color);
    font-size: 10px;
  }

  main.terms nav.mo .terms-back {
    width: fit-content;
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    font-weight: 300;
  }

  main.terms nav.mo .terms-back img {
    margin-right: 5px;
  }

  main.terms section.description {
    padding: 20px;
  }
}

/** 매장찾기 **/
#map .gm-style-cc {display: none;}
main.stockist > section.search-tab { position: absolute ; width: calc( 50vw - 204px ) ; top : 145px ; left : 100px }
main.stockist > section.search-tab > img {width: 14px; height: 14px; position: absolute; top: 2px;}
main.stockist > section.search-tab form input { border-bottom: solid 1px var(--border-color) ; height : 30px }
main.stockist > section.search-tab form input::placeholder {opacity: 0.5;}
main.stockist > section.search-tab > form.search > button.location {height: 15px; margin-top: 20px;}
main.stockist > section.search-tab > form.search > button.location > img {display: inline-block; width: 15px; height: auto; vertical-align: middle;}
main.stockist > section.search-tab > form.search > button.location > label {font-size: 11px; margin-left: 2px; vertical-align: middle;}
main.stockist > section.tab { display : grid ; grid-template-columns : 1fr 1fr ; border-bottom : var(--border) }
main.stockist > section.tab > section { display : block !important }

main.stockist section.search { 
  padding: 200px 100px 100px 100px; 
  /* border-right: var(--border); */
  box-shadow: 1px 0 0 0 #eaeaea;
}
main.stockist section.search .google-map {width: 100% ; aspect-ratio: 76/63; position: relative;}
main.stockist section.search .google-map > #map { width: 100%; height: 100%; }
main.stockist section.search .google-map > .zoom-button {background-image: url("/images/ico-map-zoom-btn.svg"); width: 70px; height: 35px; position: absolute; right: 30px; top: 30px; display: flex; gap: 1px;}
main.stockist section.search .google-map > .zoom-button > div {width: 50%; height: auto; cursor: pointer; }

main.stockist h2.stockist-title {
  display: flex;
  justify-content: start;
  align-items: center;
}

main.stockist h2.stockist-title .stockist-btn {
  width: 10px;
  height: 10px;
  aspect-ratio: 1 / 1;
  margin-left: 10px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/images/ico-gallery-arrow-up.svg');
  cursor: pointer;
  transition: transform 0.3s ease;
}

main.stockist h2.stockist-title .stockist-btn.off {
  transform: rotate(180deg);
}

section.stockist.modal { display: none }
section.stockist.modal.on { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: block; }
/*section.stockist.modal > marker-card { width: 46.93%; padding: 40px; position: relative; display: none;}*/
section.stockist.modal > .marker-card { display: flex; flex-direction: column; width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%); z-index: 100; }
section.stockist.modal > .marker-card.no-store > .swiper-container { display: none; }
section.stockist.modal > .marker-card.no-store .title { margin-top: 40px; }
section.stockist.modal > .marker-card .image {width: 100%; height: 100%; padding: 40px }
section.stockist.modal > .marker-card .image > img,
section.stockist.modal > .marker-card .image > video {
  width: 100%; 
  height: 100%; 
}
section.stockist.modal > .marker-card > div.swiper-container {width: 100%; height: 400px; overflow: hidden;}

/* 매장찾기 모바일 모달 CSS */
@media only screen and (max-width: 1024px) {
  section.stockist.modal > .marker-card .image > img,
  section.stockist.modal > .marker-card .image > video {
    width: 100%; 
    height: 170px; 
  }
  section.stockist.modal > .marker-card > div.swiper-container {width: 100%;height: 250px;overflow: hidden;}
  section.stockist.modal > .marker-card {width: 400px; height: 430px;}
}

/* 매장찾기 상세 */
/* .store-body .swiper-slide { height:1080px!important}
@media only screen and (max-width: 1024px) {
  .store-body .swiper-wrapper { height:200px }
  .store-body .swiper-slide {padding-left:30px;}
  .store-body .swiper-slide img { display: block; object-fit: contain; width: 300px; height:170px; }
} */

section.stockist.modal > .marker-card > div.swiper-container .swiper-slide { opacity: 0; }
section.stockist.modal > .marker-card > div.swiper-container .swiper-slide-active { opacity: 1; }
section.stockist.modal > .marker-card > .title > span {font-size: 13px; line-height: 17px;}Í
section.stockist.modal > .marker-card > .title > .link {margin-left: 10px; width: auto; display: inline-block;}
section.stockist.modal > .marker-card > .title > .link > img {width: 12px; height: 12px;}
section.stockist.modal > .marker-card > div > span {font-size: 11px; margin-top: 8px; line-height: 15px;}
section.stockist.modal > .marker-card > div > a.location-link {margin-left: 1px; font-size: 11px; text-decoration: underline; color: var(--quick-border); }
section.stockist.modal > .marker-card > div > a.location-link > img {display: inline-block; width: 15px; height: auto; margin-right: 3px; vertical-align: sub;}
section.stockist.modal > .marker-card > div {margin-top: 8px; height: 15px; padding: 0 40px;}
section.stockist.modal > .marker-card > div.title { height: 17px; margin: 0;}
section.stockist.modal > .marker-card > div.date {margin-top: 6px;}
section.stockist.modal > .marker-card > a.detail { display: block; width: 230px; height: 40px; font-size: 11px; border: 1px solid var(--quick-border); text-align: center; padding: 12.5px 0; margin: 15px 40px 0; }
section.stockist.modal button.close {position: absolute; top: 20px; right: 20px;}

main.stockist section.store-card {display: block; padding : 123px 110px 110px 110px ;}
main.stockist section.store-card > h2 { font-size: var(--fontsize-title) ; padding-bottom : 15px }
main.stockist section.store-card > article { margin-bottom : 60px }
main.stockist section.store-card > div { padding-bottom: 40px;}
main.stockist section.store-card > div > h3 {font-size: 11px; font-weight: 300; padding-bottom: 10px;}
main.stockist section.store-card dl { display : grid ; grid-template-columns : 1fr 1fr ; gap : 20px ; margin-top : 15px }
main.stockist section.store-card dl > dt { grid-column : 1 / 3 ; grid-gap : 10px }
main.stockist section.store-card dl:not(.stockist) > dt { display : none }
main.stockist section.store-card dl > dd { border : solid 1px var(--border-gray-color) ; height : 320px ; padding : 10px ; cursor:pointer; }
main.stockist section.store-card dl > dd .image { display : block ; width : 100% ; height : 170px ; background-position : center ; background-size : cover }
main.stockist section.store-card dl > dd h4 { font-weight : var(--fontweight) ; line-height : 1 ; font-size : var(--fontsize-title) ; margin : 20px 0 5px 0 }
main.stockist section.store-card dl > dd h4 a { display : inline-block ; vertical-align : middle }
main.stockist section.store-card dl > dd a.location { color : var(--gray) ; position : relative ; padding-left : 18px ; background : url('/images/ico-location-o.svg') center left no-repeat }
main.stockist section.store-card dl > dd a.location span { border-bottom : solid 1px var(--gray) }
main.stockist section.store-card dl > dd .tel { display : block }
main.stockist section.store-card dl.stockist > dt + dd,
main.stockist section.store-card dl.stockist > dt + dd + dd { margin-top : -10px }
main.stockist section.store-card dl.stockist > dd { 
  padding: 20px;
  min-height: 113px;
  height: 100%;
}
main.stockist section.store-card dl.stockist > dd h4 { margin : 0 0 5px 0 }
/* main.stockist section.store-card dl.stockist > dd .tel { display : inline-block } */

/** 스토리(콜렉션, 에디토리얼) 공통 **/
main.story > section.list > button.to-top { margin : 80px auto 0 auto ; display : block }
main.story > section.detail > header { width : 100% ; position : fixed ; top : 0 ; left : 0 ; z-index : 2 }
main.story > section.detail > header h1 { z-index : 2 }
main.story > section.detail > header button.close { z-index : 2 ; top : 17px ; right : 40px }


/** 콜렉션 **/ 
main.collection > header { width : 100% ; overflow-x : auto ; border-bottom : solid 1px var(--border-color) ; padding : 26px 40px 26px 8px }
main.collection > header ul { display : table; margin-left: 32px;}
main.collection > header ul > li { display : table-cell ; height : 17px ; line-height : 17px ; font-size : 13px ; font-weight: var(--category-fontweight-m); position : relative ; padding : 0 16px 0 16px ; cursor : pointer }
main.collection > header ul > li.on:before { content : "" ; width : 16px ; height : 5px ; background-color : var(--blue2) ; display : inline-block ; bottom : -5px ; right : 0 ; position : absolute ; margin-right : 16px; }
main.collection > section.list ul { display : grid ; grid-template-columns : repeat(4, 1fr) }
main.collection > section.list img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
main.collection > section.list > .info { top : calc( ( 100dvh - 45px ) / 2 ) ; left : 40px ; position : fixed ; display : inline-block ; height : 70px }
main.collection > section.list > .info * { font-size : 12px ; line-height : 16px }
main.collection > section.list > .info h1 { margin-bottom : 22px }

main.collection > section.detail { width : 100% ; height : 100vh ; overflow-y : auto ; position : fixed ; top : 0 ; left : 0 ; z-index : 1000 ; background-color : var(--white) }
main.collection > section.detail > .gallery .swiper-container { overflow : hidden }
main.collection > section.detail > .gallery .swiper-slide { display : grid ; grid-template-columns : 30% 70% ; width : 100% ; position : relative ; background-position : center ; background-size : cover }
main.collection > section.detail > .gallery .swiper-slide .image img { width : 100% ; cursor : zoom-in }
main.collection > section.detail > .gallery .swiper-slide .zoom { width : 70% ; height : 100% ; top : 0 ; right : 0 ; position : absolute ; overflow : auto }
main.collection > section.detail > .gallery .swiper-slide .zoom img { width : 200% }
main.collection > section.detail > .recommend { padding-bottom : 50px }
main.collection > section.detail > .recommend .swiper-slide .info { padding : 20px 40px ; position : relative }
main.collection > section.detail > .recommend .swiper-slide .info * { font-size : 11px ; font-weight : 400 }
main.collection > section.detail > .recommend .swiper-slide .info > * > ul > li { display: table-cell;padding-right: 12px;}
main.collection > section.detail > .recommend .swiper-slide .info .cont { position: absolute; top: 18px; right: 40px; }

main.story.collection.detail ~ header nav {
  display: none;
}

/* 이미지 1개 */
main.collection > section.detail > .gallery .swiper-slide.one-image {
  grid-template-columns: 1fr;
  place-items: center;
}

@media only screen and (min-width: 1025px) {

  main.collection > section.detail > .gallery .swiper-slide.one-image {
    background-image: none !important;
  }
}

main.collection > section.detail > .gallery .swiper-slide.one-image img {
  width: 100%;
  height: 100vh;
  object-fit: contain;
}

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

  main.collection > section.detail > .gallery .swiper-slide { 
    background-size: contain;
    background-repeat: no-repeat;
  }

  main.collection > section.detail > .gallery .swiper-slide.one-image img {
    display: none;
  }
}

/* 확대 없는 이미지 2개 */
main.collection > section.detail > .gallery .swiper-slide .image.no-zoom {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

main.collection > section.detail > .gallery .swiper-slide .image.no-zoom.left {
}

main.collection > section.detail > .gallery .swiper-slide .image.no-zoom.right {
  position: absolute;
  width: 70%;
  top: 0;
  right: 0;
}

main.collection > section.detail > .gallery .swiper-slide .image.no-zoom img {
  cursor: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*main.collection.detail > section.list,*/
#collection-gallery {
  /* padding-top: 45px; */
}
main.collection.detail > section.detail > .recommend:not(.on),
main.collection:not(.detail) > section:not(.list) { display : none }
main.collection.detail > section.detail {overflow-x:hidden;}

/** 에디토리얼 **/
main.editorial > section { text-align: center; padding: 60px 0; }
main.editorial > section > ul > li { 
  width: 100%;
  height: 45px;
  /* line-height: 45px;  */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.editorial > section > ul > li a { font-size: 14px; font-weight: var(--category-fontweight-m); }
main.editorial > section > ul > li a span { font-weight: var(--category-fontweight-m); }

main.editorial nav.editorial-nav {
  margin: 0 240px 40px 240px;
}

main.editorial nav.editorial-nav ul {
  display: flex;
  justify-content: start;
  align-items: center;
  text-align: left;
}

main.editorial nav.editorial-nav ul li {
  width: 100px;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  cursor: pointer;
}

main.editorial nav.editorial-nav ul li.on {
  text-decoration: underline;
}

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

  main.editorial nav.editorial-nav {
    margin: 0;
    margin-bottom: 60px;
  }

  main.editorial nav.editorial-nav ul {
    margin: 0 auto;
    justify-content: center;
    text-align: center;
  }
}

main.editorial-detail > section.list { height: 80px; margin: 20px 152px; }
main.editorial-detail > section.list .swiper-container { height: 100%; }
main.editorial-detail > section.list .swiper-container > .swiper-wrapper .swiper-slide { height: 100%; width: 95px; }
main.editorial-detail > section.list .swiper-container > .swiper-wrapper .swiper-slide.on { transform: translateY(-10px); }
main.editorial-detail > section.list .swiper-container > .swiper-wrapper .item { height: 100%; width: 95px; padding: 15px 15px; cursor: pointer; }
main.editorial-detail > section.list .swiper-container > .swiper-wrapper .item > img { width: 100%; height: 100%; object-fit: cover; }
/* main.editorial-detail > section.detail { height: 100%; margin: 20px 152px; } */
main.editorial-detail > section.detail > .gallery { height: 100%; }
main.editorial-detail > section.detail .swiper-container > .swiper-wrapper { 
  width: 100%; 
  /* height: 760px;  */
}
main.editorial-detail > section.detail .swiper-container > .swiper-wrapper > .swiper-slide { padding: 0 100px; opacity: 0; }
main.editorial-detail > section.detail .swiper-container > .swiper-wrapper > .swiper-slide.swiper-slide-active { 
  padding: 0; 
  opacity: 1; 
}
main.editorial-detail > section.detail .swiper-container > .swiper-wrapper > .swiper-slide  *  { 
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  /* object-fit: contain; */
}

main.editorial-detail > section.detail .swiper-container > .swiper-wrapper > .swiper-slide img,
main.editorial-detail > section.detail .swiper-container > .swiper-wrapper > .swiper-slide video {
  object-fit: contain;
}

main.editorial-detail > div.mobile { display: none; }

/** 법적 공지사항  **/
main.my.online-store-guide, main.my.privacy-policy, main.my.terms-of-use  { padding: 200px 20px; }
main.my.online-store-guide article.detail,
main.my.privacy-policy article.detail,
main.my.terms-of-use article.detail{width:100% ; max-width:600px; margin:auto ;}

/** 페이징 **/
/* 250425 - 제갈민혁 수정 */
/* main .paging { margin-top: 10px; display: flex; justify-content: center }
main .paging > ul.--paging { display: flex; gap: 10px; }
main .paging > ul.--paging > li.prev { opacity: 1; font-size: 13px; }
main .paging > ul.--paging > li.next { opacity: 1; font-size: 13px; }
main .paging > ul.--paging > li.now { opacity: 1; }
main .paging > ul.--paging > li { opacity: 0.5; cursor: pointer } */
main .paging,
.modal-order-history .paging {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

main .paging > ul.--paging,
.modal-order-history .paging > ul.--paging {
  display: flex;
  gap: 20px;
  align-items: center;
}

main .paging > ul.--paging > li.prev,
.modal-order-history .paging > ul.--paging > li.prev {
  opacity: 1;
  font-size: 13px;
  background-image: url(/images/ico-arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  width: 7px;
  height: 12px;
}

main .paging > ul.--paging > li.next,
.modal-order-history .paging > ul.--paging > li.next {
  opacity: 1;
  font-size: 13px;
  background-image: url(/images/ico-arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 7px;
  height: 12px;
}

main .paging > ul.--paging > li.now,
.modal-order-history .paging > ul.--paging > li.now {
  opacity: 1;
}

main .paging > ul.--paging > li,
.modal-order-history .paging > ul.--paging > li {
  opacity: 0.5;
  cursor: pointer
}

main .paging > ul.--paging > li.first-page,
.modal-order-history .paging > ul.--paging > li.first-page {
  margin-left: 10px;
}

main .paging > ul.--paging > li.last-page,
.modal-order-history .paging > ul.--paging > li.last-page {
  margin-right: 10px;
}

/** 위시리스트 **/
/** 베스트 상품 > 목록 **/
main.wishlist.list section.best { position : relative ; margin-bottom : 120px }
main.wishlist.list section.best:after { content : "" ; display : inline-block ; width : 100% ; height : 1px ; position : absolute ; background-color : var(--border-color) ; left : 0 ; bottom : 0 }
main.wishlist.list section.best ul#list { width : 1280px ; margin : auto ; border-right : solid 1px var(--border-color) ; border-left : solid 1px var(--border-color) ; display : grid ; grid-template-columns : repeat(2,1fr) }
main.wishlist.list section.best ul#list > li { height : 300px ; padding-bottom : 0 ; border-bottom : solid 1px var(--border-color) ; border-right : solid 1px var(--border-color) ; padding-left : 240px }
main.wishlist.list section.best ul#list > li:nth-child(2n) { border-right : none }
main.wishlist.list section.best ul#list > li a { width : 240px ; height : 299px ; background-position : center ; background-repeat : no-repeat ; background-size : contain ; border-right : solid 1px var(--border-color) }

main.wishlist.list section.best ul#list > li:before { display : block ; width : 40px ; line-height : 24px ; background-color : var(--black) ; color: var(--white) ; text-align : center ; font-size : var(--fontsize-s) ; position : absolute ; top : 0 ; left : 0 ; z-index : 2  }
main.wishlist.list section.best ul#list > li:nth-child(1):before { content : "01" }
main.wishlist.list section.best ul#list > li:nth-child(2):before { content : "02" }
main.wishlist.list section.best ul#list > li:nth-child(3):before { content : "03" }
main.wishlist.list section.best ul#list > li:nth-child(4):before { content : "04" }
main.wishlist.list section.best ul#list > li:nth-child(5):before { content : "05" }
main.wishlist.list section.best ul#list > li:nth-child(6):before { content : "06" }
main.wishlist.list section.best ul#list > li:nth-child(7):before { content : "07" }
main.wishlist.list section.best ul#list > li:nth-child(8):before { content : "08" }
main.wishlist.list section.best ul#list > li:nth-child(9):before { content : "09" }
main.wishlist.list section.best ul#list > li:nth-child(10):before { content : "10" }
main.wishlist.list section.best ul#list > li:nth-child(11):before { content : "11" }
main.wishlist.list section.best ul#list > li:nth-child(12):before { content : "12" }
main.wishlist.list section.best ul#list > li:nth-child(13):before { content : "13" }
main.wishlist.list section.best ul#list > li:nth-child(14):before { content : "14" }
main.wishlist.list section.best ul#list > li:nth-child(15):before { content : "15" }
main.wishlist.list section.best ul#list > li:nth-child(16):before { content : "16" }
main.wishlist.list section.best ul#list > li:nth-child(17):before { content : "17" }
main.wishlist.list section.best ul#list > li:nth-child(18):before { content : "18" }
main.wishlist.list section.best ul#list > li:nth-child(19):before { content : "19" }
main.wishlist.list section.best ul#list > li:nth-child(20):before { content : "20" }
main.wishlist.list section.best ul#list > li .info { position : static ; width : 100% ; height : auto ; padding : 85px 0 0 20px }
main.wishlist.list section.best ul#list > li .info > * { display : block ; margin-bottom : 13px }
main.wishlist.list section.best ul#list > li .info > * > ul { display : table }
main.wishlist.list section.best ul#list > li .info > * > ul > li { display : table-cell }
main.wishlist.list section.best ul#list > li .info > strong { font-size : var(--fontsize-title) ; font-weight : 400 ; top : 15px ; left : 40px }
main.wishlist.list section.best ul#list > li .info > .price { position : static }
main.wishlist.list section.best ul#list > li .info button.favorite { position : static ; margin-bottom : 20px }
main.wishlist.list section.best button.to-top { position : absolute ; bottom : -106px ; left : calc( 50% - 20px ) }

main.wishlist.list section.summary-wishlist,
main.wishlist.list section.summary-wishlist > ul#list { padding-top:0!important;}

main.wishlist.list section.summary { display: none; }

main.my section.address .country-province { display: flex; gap: 12px; }

.price.discount {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
main.goods.detail > section.cont > section.information article.goods .price.discount {
  display: inline-block;
  text-decoration: line-through;
  text-decoration-color: #343434;
  -webkit-text-decoration-color: #343434;
  top: 10px;
  color: #34343494;
  padding-left: 25px;
}
.price.discount > span.cont {
  text-decoration: line-through;
  text-decoration-color: #343434;
  -webkit-text-decoration-color: #343434;
  color: #34343494;
}
.price.discount::before { 
  display: block; 
  text-decoration: none; 
  content: attr(data-saleprice);
  color: #343434; 
}
.price.discount::after { 
  display: block; 
  text-decoration: none; 
  content: attr(data-discount) "%";
  color: #343434; 
}

/* 제품 상세 가격 텍스트 */
#frm-goods .price.discount { 
  top: 0;
  padding-left: 0;
  display: inline-block;
}

#frm-goods .price.discount::before { 
  display: inline-block;
  text-decoration: none;
  content: attr(data-saleprice);
  position: relative;
  top: 0;
  margin-right: 10px;
}

#frm-goods .price.discount::after { 
  display: inline-block;
  text-decoration: none;
  content: attr(data-discount) "%";
  position: relative;
  top: 0;
  left: 0;
  margin-left: 10px;
}

.modal-pay-delivery ul.list { border-bottom : none ; margin-top : 20px }
.modal-pay-delivery ul.list > li ~ li { margin-top : 10px }
.modal-pay-delivery ul.list .info { border : solid 1px var(--border-gray-color) ; position : relative ; margin-bottom : 10px }
.modal-pay-delivery ul.list .info > .image { width : 100px ; height : 124px ; top : 0 ; left : 0 ; background-position : center ; background-size : cover ; position : absolute }
.modal-pay-delivery ul.list .info > .goods { width : 100% ; height : 125px ; border-bottom : solid 1px var(--border-gray-color) ; padding : 20px 0 20px 120px ; font-size : var(--fontsize-s) }
.modal-pay-delivery ul.list .info > .goods big { font-size : var(--fontsize-sub) }
.modal-pay-delivery ul.list .info > .goods big ~ * { margin-top : 6px }
.modal-pay-delivery ul.list .info > .address { width : 100% ; padding : 10px }
.modal-pay-delivery ul.list .info > .address dl { display : grid ; grid-gap : 7px ; grid-template-columns : 100px 1fr; word-break: break-all; }
.modal-pay-delivery ul.list .info > .address .msg_default { margin-top:15px; }
.modal-pay-delivery ul.list a { max-width : 100%; margin-top:25px; }

.modal-pay-delivery ul.list > .address-box {border:1px solid #EAEAEA; padding: 10px;  cursor: pointer;}
.modal-pay-delivery ul.list > .address-box p{ margin-bottom: 5px;}
.modal-pay-delivery ul.list > .address-box.selected {border:1px solid #000;}
.modal-pay-delivery ul.list > .address-box .default-badge {margin-bottom: 5px; background-color: #EAEAEA;    padding: 4px;  color: #000;  width: fit-content;}
.modal-pay-delivery .as_memo_input { border: none; border-bottom: 1px solid var(--gray);}

.modal-pay-delivery article.list { padding: 8px 16px; max-height: 500px; overflow-y: auto; }

main.my > section.pay #delivery-info { margin-top:25px }
main.my > section.pay .delivery_message { margin-top : 10px; }
main.my > section.pay #delivery-info .hidden { display:none; }
main.my > section.pay #delivery-info dl { display : grid ; grid-gap : 7px ; grid-template-columns : 100px 2fr; }

main {
  overflow-x: unset;
}
.hidden {
  display: none !important;
}
.order_status_btn_box_else_m {
  display: flex;
  align-items: center;
  line-height: 0.3;
  margin-bottom: 5px;
  justify-content: end;
}

.order_status_btn_box_dpr_m {
  display: flex;
  justify-content: end;
  align-items: center;
  line-height: 0.3;
}

.order_status_before_msg_m {
  font-size: 10px !important;
  width: 110px;
}

.order_status_td_m {
  padding-right: 0;
  padding-left: 10px;
}

.orderlist__tab__contents .contents__info .info {
  align-items: center;
}

.info__value {
  margin-right: 20px;
}

.contents__info .info__value.order__code {
  width: 65px;
  word-wrap: break-word;
}

.contents__info {
  align-items: center;
}

.title p {
  font-size: 11px;
}

.contents__info .info span {
  font-size: 11px;
}

.oderlist_info_table {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orderlist__wrap {
  margin: 40px 0 100px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  color: #343434;
}

.orderlist__tab__contents {
  margin: 0 auto;
  padding-bottom: 40px;
}

.mobile__view {
  margin-top: 40px;
}

.order_status_box {
  padding: 7px 8px;
}

.product_info_mob p {
  width: 80px;
}
.order_cancel_msg {
  width: 120px;
  float: right;
}

.reason_alert::placeholder {
  color: red !important;
}

.order-detail-section {
  width: 95%;
}
.order-main-title {
  width: 95%;
}

.order_exchange_option {
  display: flex;
  gap:10px;
}

.order_exchange_option img {
  margin-left: 10px;
  margin-right: 10px;
}

.div_confirm_price_product {
	font-size:10px!important;
}

#mypage_order_detail .order-detail-section {
  width: 100%;
}
#mypage_order_detail .order-main-title {
  margin: 0 auto 30px 0;
}
#mypage_order_detail main {
  padding-top: 0;
}
#mypage_order_detail .delivery-info,
#mypage_order_detail .payment-info {
  padding: 10px 0;
}
/* .order-header .order-exchange-btn,
.order-status-box .order-exchange-btn,
.order-header .order-return-btn,
.order-status-box .order-return-btn,
.order-header .order-cancel-btn,
.order-status-box .order-cancel-btn {
  width: auto !important;
} */

.order-detail-payment-info-wrap {
  display: flex;
  flex-direction: column;
}
.order-detail-payment-info {
  display: flex;
  gap: 30%;
}
.order-detail-payment,
.order-detail-payment-date {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-detail-payment-receipt {
  display: flex;
  justify-content: flex-end;
}
.order-detail-payment-receipt a {
  text-decoration: underline;
}

.order-popup-container-OEX .order-main-title-wrap,
.order-popup-container-ORF .order-main-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  /* margin: 0 auto; */
  margin: 0;
  max-width: 480px;
  /* width: 95%; */
  width: 100%;
}

.calendar-orderlist-end .calendar {
  right: -70px;
}

.orderlist__tab__wrap {
  display: initial;
  grid-column: 1/17;
  width: 100%;
  margin: 0 auto;
  font-size: 11px;
}

.oderlist-none-box {
  display: flex;
  justify-content: center;
  width: 480px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}

.info__title {
  margin-right: 10px;
}

.info__value {
  margin-right: 30px;
}

.orderlist__wrap table {
  width: 100%;
}

.contents__table {
  padding-top: 10px;
}

.orderlist__wrap table td {
  padding-top: 0 !important;
}

.order_status_box {
  border: 1px solid #343434;
  height: 23px;
  margin-left: 10px;
  padding: 5px 10px;
  float: right;
}

.title_orderlist_info {
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 10px;
  margin: 0;
}

.list_orderlist_info p {
  font-size: 11px;
  margin-top: 10px;
  white-space: nowrap;
}

.list_orderlist_info .underline {
  margin-left: 7px;
}

.orderlist__tab__contents .title {
  margin-bottom: 0;
}

.oderlist_info_table .contents__table td {
  padding: 0;
}

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

.oderlist_payment_info p {
  font-size: 11px;
  margin-bottom: 10px;
}

.oderlist_payment_info_border {
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  margin: 10px 0;
  padding-top: 10px;
}

.orderlist__tab__contents .no_orderlist_msg {
  height: 100px;
  text-align: center;
}

.orderlist__tab__contents .contents__info .info {
  display: flex;
}

.order_cancel_msg {
  font-size: 10px;
  width: 155px;
}
.order-company-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 10px;
  margin-top: 10px;
  text-decoration: underline;
  cursor: pointer;
}

.date-choice-btn.start.clicked::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 37px;
  left: 0;
  width: 118px;
  height: 3px;
  background-color: #fff;
}

.date-choice-btn.end.clicked::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 37px;
  left: 0;
  width: 118px;
  height: 3px;
  background-color: #fff;
}

.date-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  border: solid 1px #808080;
  cursor: pointer;
  gap: 10px;
  position: relative;
  overflow: visible;
  z-index: 2;
}
.date-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  border: solid 1px #808080;
  cursor: pointer;
}

.orderlist-calendar-wrap {
  margin: 40px auto;
  grid-column: 1 / 17;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orderlist-calendar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.orderlist-calendar-date-btn-wrap {
  display: flex;
  width: calc(100% - 71px);
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}
.orderlist-calendar-date-btn-wrap .calendar-date-btn {
  width: 100%;
  height: 100%;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid #dcdcdc;
  cursor: pointer;
}
.calendar-date-btn.selected {
  outline: 1px solid #808080;
}
.orderlist-calendar-wrap .calendar {
  width: 340px;
  top: unset;
  left: unset;
  position: absolute;
}
.calendar-orderlist-start.purchase-wrap.dropdown,
.calendar-orderlist-end.purchase-wrap.dropdown {
  margin-top: unset;
}
.orderlist-calendar-img {
  width: 13px;
  height: 13px;
}
.calendar-dropdown-warp {
  display: flex;
  gap: 5px;
  align-items: center;
}
.calendar-hyphen {
  width: 8px;
  height: 1px;
  margin: 0 6px;
  background-color: #808080;
}

.oderlist_info_table {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 600px 350px;
}

.orderlist__tab__contents {
  margin: 0 auto;
  grid-column: 1/17;
  margin-top: 53px;
}

.orderlist__paging {
  margin-top: 30px;
}

.orderlist__tab__contents .info__value {
  margin-right: 10px;
}
.order-list-box {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  /* width: 480px; */
  width: 100%;
}
.order-popup-container-OEX,
.order-popup-container-ORF {
  width: 30%;
  margin: 84px 0.5px 16px 0;
  padding: 10px 10px 7px 10px;
  border-radius: 1px;
  border: solid 1px #343434;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  background-color: #ffffff;
}

.order-popup-container-OEX .option-btn-wrap,
.order-popup-container-ORF .option-btn-wrap {
  width: 100%;
  margin-bottom: 30px;
}
.order-popup-container-ORF .option-btn-wrap {
  margin-top: 10px;
}

.orderlist__wrap .detail__btn {
  cursor: pointer;
}

.mypage--paging {
  gap: 10px;
}

.mypage--paging .page {
  font-size: 11px;
  cursor: pointer;
}

.product_name_mob {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product_info_mob {
  vertical-align: top;
}

.product_info_mob p {
  margin-bottom: 6px;
}

.orderlist__wrap .delivery_num {
  text-decoration: underline;
  font-size: 11px;
  width: 110px;
  cursor: pointer;
}

/* 주문 상품 */
.order__list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 60px;
}
.order-list-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.order-number {
  display: flex;
  gap: 10px;
}
.order-date {
  display: flex;
  gap: 10px;
}

.order-number .order-number-value,
.order-date .order-date-value {
  text-decoration: underline;
}
.order-cancel-back {
  display: none;
}
@media screen and (max-width: 1024px) {
  .order-cancel-back {
    position: relative;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 45px;
    padding-left: 37px;
    text-align: left;
    background: url(/images/ico-back.svg) 20px center no-repeat;
    border-bottom: solid 1px var(--border-color);
  }
  .order-cancel-back.KR::after {
    content: "뒤로가기";
    font-size: 10px;
  }
  .order-cancel-back.EN::after {
    content: "Back";
    font-size: 10px;
  }
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
  height: auto;
}
.order-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.order-info-btn {
  width: 115px;
  height: 40px;
  color: #ffffff;
  background-color: #191919;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1px;
  margin-left: auto;
  cursor: pointer;
}

.order-body {
  width: 100%;
  border-bottom: solid 1px #343434;
  border-top: solid 1px #dcdcdc;
}

.order-product-box {
  display: grid;
  grid-template-columns: auto 2fr 1fr;
  padding: 10px 0;
  border-bottom: 1px solid #dcdcdc;
}

.order-product-box:last-child {
  border-bottom: 0px;
}

.order-product-box ul {
  display: flex;
  font-size: 11px;
  flex-direction: column;
  justify-content: space-between;
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
  margin-left: 10px;
  gap: 5px;
}

.order-product-img {
  max-width: 80px;
}
.order-status-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-end;
  justify-content: space-between;
}

.order-status-box.cancel {
  margin-right: 0;
}

.order-status-box .order-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.order-status-box .order-status.delivery {
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
}

.order-status-box .order-status-msg {
  width: max-content;
  text-align: right;
  font-size: 10px;
  color: #808080;
}
.order-header .order-exchange-btn,
.order-status-box .order-exchange-btn,
.order-header .order-return-btn,
.order-status-box .order-return-btn,
.order-header .order-cancel-btn,
.order-status-box .order-cancel-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  height: 30px;
  border-radius: 1px;
  border: solid 1px #dcdcdc;
  white-space: nowrap;
  cursor: pointer;
}
.order-product-box .color-line {
  display: flex;
  align-items: center;
}
.order-product-box .color {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 2px;
}
.order-product-box .color.multi::after {
  background: var(--background);
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 50%;
  border: 0.5px solid #dcdcdc;
}
.order-product-box .color::after {
  background: var(--background);
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 50%;
  border: 0.5px solid #dcdcdc;
}

/* 페이지네이션 */
.custom-pagination {
  display: flex;
  gap: 15px;
  justify-content: center;
  transition-duration: 0.7s;
}
.custom-pagination .navigation.opacity {
  color: #dcdcdc;
  transition-duration: 0.7s;
}
.custom-pagination .page.number {
  color: #dcdcdc;
  transition-duration: 0.7s;
}
.custom-pagination .page.number.now {
  color: #343434;
  transition-duration: 0.7s;
}

/* 디테일 페이지 */
.order-main-title {
  font-size: 13px;
  line-height: 1.46;
  text-align: left;
  color: #343434;
  max-width: 480px;
  margin: 40px auto 30px auto;
}
@media screen and (max-width: 1024px) {
  .order-main-title {
    margin: 20px auto;
  }
}
.order-detail-section {
  max-width: 480px;
  margin: 0 auto 10px auto;
  font-size: 11px;
}

.order-detail-section.order {
  margin-bottom: 50px;
}
.order-detail-section.delivery {
  margin-bottom: 60px;
}
.order-detail-section.payment {
  margin-bottom: 20px;
}
.order-detail-section.order-cancel {
  margin-bottom: 60px;
}
.order-detail-section.order-cancel-end {
  margin-bottom: 60px;
}
.order-detail-section.order-return {
  margin-bottom: 60px;
}
.order-detail-section.order-exchange {
  margin-bottom: 60px;
}
.order-detail-section.to-list {
  margin-bottom: 60px;
}
.order__detail {
  grid-column: 1/17;
  width: auto;
  margin: 40px auto 0 auto;
}

.order-detail-section .order-detail-header {
  padding-bottom: 10px;
}
.order-detail-section .order-detail-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-detail-section .order-detail-box .order-detail-row {
  display: flex;
  justify-content: space-between;
}

.order-detail-section .order-detail-body {
  border-top: solid 1px #dcdcdc;
  padding: 10px 0;
}
.order-detail-section .order-detail-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-top: 10px;
}
.order-detail-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 10px;
  border-radius: 1px;
  border: solid 1px #dcdcdc;
  font-size: 11px;
  cursor: pointer;
}
.order-detail-btn.btn_tmp_order {
  pointer-events: none;
}
.order-detail-btn.active {
  background-color: #343434 !important;
  color: #ffffff !important;
  pointer-events: auto;
}
.order-detail-btn.to_order_list_btn {
  margin-top: 30px;
}
.order_refund_price_wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
}
.mileage_refund_price {
  outline: 1px solid #808080;
  text-align: right;
  padding-right: 10px;
}

.order-detail-btn.pickup.bk,
.order-detail-btn.direct.bk,
.same-size-btn.bk,
.order-exchange-btn.self.bk,
.order-return-btn.self.bk,
.order-return-btn.all.bk,
.order-cancel-btn.self.bk,
.order-cancel-btn.all.bk,
.order-exchange-btn.bk,
.order-detail-btn.bk {
  color: #ffffff;
  background-color: #191919;
}
.order-detail-btn.pickup.wh,
.order-detail-btn.direct.wh,
.same-size-btn.wh,
.order-exchange-btn.self.wh,
.order-return-btn.self.wh,
.order-return-btn.all.wh,
.order-cancel-btn.self.wh,
.order-cancel-btn.all.wh,
.order-detail-btn.wh {
  color: #191919;
  background-color: #ffffff;
}
.order-noti-wrap {
  margin-top: 10px;
  margin-bottom: 40px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-refund-payment-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #dcdcdc;
  padding-top: 10px;
}

.order-description-pickup ul li::before,
.order-description-direct ul li::before {
  content: unset !important;
}
.order-description-direct .order-header,
.order-description-pickup .order-header {
  margin-top: 40px;
}
.order-description-direct .delivery-info,
.order-description-pickup .delivery-info {
  padding: 10px 0;
}

.order-description-direct .tui-select-box-placeholder {
  line-height: 25px;
  font-size: 11px;
}
.tui-select-box-dropdown li {
  font-size: 11px;
}
.order-description-direct .info-wrap {
  display: flex;
  gap: 20px;
}
.order-description-direct .info-wrap .noti_red {
  color: #ff0000;
}
.order-description-direct .info-title {
  width: 40px;
  height: 20px;
  white-space: nowrap;
}
.order-description-direct .order-body {
  border-bottom: unset;
}
.exchange_reason .order-body {
  border-bottom: 0;
}
.order-body .refund_reason_area {
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #dcdcdc;
  padding: 10px;
  font-size: 11px;
  margin-bottom: 10px;
}
.order-body .refund_reason_title {
  text-decoration: underline;
}
.order-body .refund_notice {
  font-size: 11px;
}
.deli-info .order-header {
  border-bottom: solid 1px #dcdcdc;
}
.deli-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
}
.charge-description .order-body {
  border: unset;
}
.deli-number input {
  width: 100%;
  height: 40px;
  padding-left: 8px;
  border: solid 1px #dcdcdc;
}

.order-exchange-box {
  display: flex;
  gap: 10px;
}
.order-exchange-box .tracking-number {
  text-align: right;
}
.order-exchange-box .order-exchange-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  border-radius: 1px;
  border: solid 1px #dcdcdc;
  width: 100%;
}
.order-exchange-btn.disabled {
  pointer-events: none;
  color: #dcdcdc;
}

.order-select-box {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.order-select-box select {
  height: 40px;
  font-size: 11px;
  text-align: center;
  width: 50%;
  border: 1px solid #808080;
}
.order-select-box .tui-select-box-placeholder,
.order-select-box .tui-select-box-item {
  line-height: 25px;
  font-size: 11px;
  color: #343434;
}
.order-textarea-box textarea {
  resize: none;
  box-sizing: border-box;
  height: 250px;
  width: 100%;
  border: 1px solid #808080;
  padding: 20px;
  font-size: 11px;
}

.order-textarea-box textarea::placeholder {
  color: #999999;
  line-height: 1.45;
}

#order-cancel-reason.error::placeholder {
  color: red!important;
  line-height: 1.45;
}
.reason_memo.error::placeholder {
  color: red!important;
  line-height: 1.45;
}

.order-cancel-noti p {
  line-height: 19px;
  font-size: 10px;
}
.order-cancel-mileage {
  border: 1px solid #808080;
  outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.order-cancel-mileage-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-return-box {
  display: flex;
  gap: 10px;
  margin-bottom: 80px;
}
.order-exchange-box .order-detail-btn,
.order-return-box .order-detail-btn {
  width: 50%;
}
.exchange-size-option {
  cursor: pointer;
}

.option-size-box {
  display: flex;
  gap: 10px;
}
.option-btn-box {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.option-btn-box .order-detail-btn {
  width: 50%;
}
.order-description-direct,
.order-description-pickup {
  width: 100%;
}

/* 팝업 */

.order-popup-container-OEX .order-list-box,
.order-popup-container-ORF .order-list-box {
  width: 100%;
}

.order-popup-container-OEX .order-main-title-wrap,
.order-popup-container-ORF .order-main-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  max-width: 480px;
}
.order-popup-container-OEX .order-main-title-wrap .close,
.order-popup-container-ORF .order-main-title-wrap .close {
  background: url('/images/ico-close.svg') center no-repeat;
  width:12px;
  height:12px;
  cursor:pointer;
}
.order-popup-container-OEX .order-main-title,
.order-popup-container-ORF .order-main-title {
  margin: 0px;
}
.order-popup-container-OEX .option-btn-box .order-detail-btn,
.order-popup-container-ORF .option-btn-box .order-detail-btn {
  height: 30px;
}
.order-popup-container-OEX .option-btn-box .order-detail-btn,
.order-popup-container-ORF .option-btn-box .order-detail-btn {
  width: 100%;
}
.order-popup-container-OEX .order-detail-section.popup .order-product-box,
.order-popup-container-ORF .order-detail-section.popup .order-product-box {
  border-bottom: 0px;
}
.order-popup-container-OEX .order-detail-section.popup .order-list-box,
.order-popup-container-ORF .order-detail-section.popup .order-list-box {
  border-bottom: 0px;
}
.order-popup-container-OEX .option-size-wrap p,
.order-popup-container-ORF .option-size-wrap p {
  margin-bottom: 10px;
}

.order-popup-container-ORF .option-size-wrap .option-size-box {
  height: 15px;
  margin-bottom: 35px;
}

.order-popup-container-OEX .option-size-wrap p {
  white-space: nowrap;
}

.order-popup-container-OEX .option-size-wrap .option-size-box {
  height: 15px;
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.exchange-size-option.selected {
  border-bottom: solid 1px #000000;
}
.order-detail-section.order-popup .order-list-box {
  border-bottom: unset;
}

.tui_select {
  height: 40px;
  font-size: 11px;
  text-align: center;
  width: 50%;
}
.tui-select-box-input {
  height: 40px;
  border: 1px solid #808080;
}

.order-textarea-box textarea:focus,
.tui-select-box-input:focus {
  outline: none;
}

.tui-select-box-item {
  display: flex;
  align-items: center;
  height: 40px;
  border: none;
}

@media (max-width: 1025px) {
  .orderlist__wrap {
    margin-top: 20px;
  }
  .orderlist-calendar-wrap {
    margin: 20px auto;
  }

  .order-list-box {
    max-width: 480px;
    width: 100%;
  }

  .order-popup-container-OEX,
  .order-popup-container-ORF {
    width: 90%;
    transform: translate(-50%, -60%);
    margin: 84px 0.5px 16px 0;
    padding: 10px 10px 7px 10px;
    top: 50%;
  }

  .order-exchange-box {
    display: grid;
  }

  .order-exchange-box .order-exchange-btn {
    height: 30px;
  }

  .order-status-box > div > div:nth-child(1) {
    margin: 0;
  }
  .order-exchange-box .order-detail-btn,
  .order-return-box .order-detail-btn {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .order-product-box {
    grid-template-columns: 1fr 2fr 1.8fr;
  }

  .order-number .order-number-value {
    max-width: 120px;
  }

  .order-date .order-date-value,
  .order-product-box .product-name {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100px;
  }

  .oderlist-none-box {
    width: 100%;
  }
}

.standby-banner-wrap {
  width: 100%;
  height: 400px;
  position: relative;
}
.banner-countdown {
  position: absolute;
  width: 100%;
  background-color: #191919;
  height: 40px;
  bottom: 0;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.standby-banner-wrap .banner-img {
  width: 100%;
  height: 100%;
}
.standby-banner-wrap .banner-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.standby-list-wrap .standby_web_product_list {
  width: 50%;
  order: 1;
  display: flex;
  flex-wrap: wrap;
  height: calc(100% + 100px);
  padding-bottom: 100px;
}

.standby-list-wrap .standby_web_product_list .single-container { width: 100%; border: 1px solid #efefef; position: relative; }
.standby-list-wrap .standby_web_product_list .single-image { width: 100%; height: 800px; display: flex; align-items: center; justify-content: center;  }
.standby-list-wrap .standby_web_product_list .single-image .image { width: 100%; height: 100%; display : block ; background-size: contain ; background-position: center; background-repeat: no-repeat; }
.standby-list-wrap .standby_web_product_list .single-info { display: flex; width: 100%; padding: 12px }
.standby-list-wrap .standby_web_product_list .single-info > .left-info { width: 50%; }
.standby-list-wrap .standby_web_product_list .single-info > .left-info > .color > ul { display: flex; }
.standby-list-wrap .standby_web_product_list .single-info .right-info { width: 50%; justify-items: right }
.standby-list-wrap .standby_web_product_list .single-info .right-info > .size > ul { display: flex; gap: 8px; margin-top: 8px; }

.standby-list-wrap .standby_web_product_list .multi-container { width: 50%; border: 1px solid #efefef; position: relative; }
.standby-list-wrap .standby_web_product_list .multi-image { width: 100%; height: 710px; display: flex; align-items: center; justify-content: center;  }
.standby-list-wrap .standby_web_product_list .multi-image .image { width: 100%; height: 100%; display : block ; background-size: contain ; background-position: center; background-repeat: no-repeat; }
.standby-list-wrap .standby_web_product_list .multi-info { display: flex; width: 100%; padding: 12px }
.standby-list-wrap .standby_web_product_list .multi-info > .left-info { width: 50%; }
.standby-list-wrap .standby_web_product_list .multi-info > .left-info > .color > ul { display: flex; }
.standby-list-wrap .standby_web_product_list .multi-info .right-info { width: 50%; justify-items: right }
.standby-list-wrap .standby_web_product_list .multi-info .right-info > .size > ul { display: flex; gap: 8px; margin-top: 8px; }

.standby-list-wrap .info {
  display: flex;
  justify-content: center;
  /* background-color: red; */
}
.standby-list-wrap .info .info__box {
  width: 60%;
}
.standby-list-wrap .info .info__box.agree {
  margin-bottom: 50px;
}
.standby-list-wrap .info-product {
  margin-top: 120px;
  width: 100%;
  order: 2;
}
.standby_web_produc_list {
  display: flex;
  margin-bottom: 200px;
}
.standby_mobile_product_list {
  display: none;
}
.standby-list-wrap .info-agreement {
  width: 100%;
  order: 3;
}
.standby-list-wrap .product {
  background-color: #ffffff;
  width: 100%;
  height: fit-content;
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  box-sizing: border-box;
}
.standby-list-wrap .product.half {
  width: 50%;
}
.standby-list-wrap .product .prd-img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.standby-list-wrap .standby-notice {
  margin: 0;
  margin-bottom: 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #343434;
}

.standby-list-wrap {
  display:flex;
  width: 100vw;
  min-height: 200vh;
  position: relative;
}
.standby-list-wrap .info-wrap {position: relative ; top: auto ; bottom: auto; right : 0 ; width: 50%;  order: 2;height: 100dvh; overflow: scroll;}
.standby-list-wrap .info-wrap.bottom {position: absolute; top: auto; bottom: 0; }
.standby-list-wrap .info-wrap.floating {position: fixed;   top: 0; }
.standby-list-wrap #images-paging {
  position: sticky;
  top: 80px;
  left: 40px;
  height: fit-content;
  font-size: var(--fontsize-title);
  z-index: 2;
}
.standby-list-wrap .info-standby-title {
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #343434;
  margin-bottom: 10px;
}
.standby-list-wrap .wish_img {
  width: 14.4px;
  height: 12px;
}
.standby-list-wrap .info-product-name {
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.6px;
  text-align: left;
  color: #343434;
}
.standby-list-wrap .info-product-description {
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #343434;
  margin-bottom: 20px;
}
.standby-list-wrap .info-standby-date {
  list-style: none;
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #343434;
  margin-bottom: 40px;
}
.standby-list-wrap .agreement {
  margin-bottom: 30px;
}
.standby-list-wrap .agreement_box {
  padding: 10px;
  line-height: 2;
  width: 100%;
  height: 120px;
  padding: 1px 1px 1px 10px;
  object-fit: contain;
  border-radius: 1px;
  overflow-y: auto;
  border: solid 1px #808080;
}
.standby-list-wrap .agreement textarea {
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #343434;
  width: 100%;
  border: 1px solid #808080;
}
.standby-list-wrap .agreement textarea:focus {
  outline: none;
}
.standby-list-wrap .agreement체크박스 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.standby-list-wrap .standby-notice li {
  list-style: none;
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  text-indent: -7px;
  color: #343434;
}
/* .standby-list-wrap .standby-notice li::before {
    content: url("/images/svg/pd-dot.svg");
    margin-right: 5px;
    vertical-align: super;
  } */
.standby-list-wrap .standby-notice li img {
  margin-right: 5px;
  vertical-align: super;
}
.standby-list-wrap .standby-joinus-btn {
  cursor: pointer;
  width: 100%;
  height: 40px;
  object-fit: contain;
  border-radius: 1px;
  background-color: #191919;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.standby-list-wrap .product .product-info {
  max-height: 80px;
}

.standby-list-wrap .product .product-info .color-title {
  margin-bottom: 2px;
}

.standby-list-wrap
  .product
  .product-info
  .info-row
  .price[data-dis="true"]
  span {
  color: rgba(52, 52, 52, 0.5) !important;
}
.standby-list-wrap .size__box li[data-soldout="STSO"]::before {
  bottom: 4px;
}

@media (min-width: 1026px) and (max-width: 1440px) {
  .standby-list-wrap .info .info__box {
    width: 85%;
  }
}
@media (max-width: 1025px) {
  
  .standby-list-wrap{
    display: block;
  }
  .standby-list-wrap .standby_web_product_list {
    display: none !important;
  }
  .standby_mobile_product_list {
    display: flex;
    width: 100%;
    min-height: 0 !important;
    flex-wrap: wrap;
    border-top: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
  }

  .standby-list-wrap .standby_mobile_product_list .single-container { width: 100%; border: 1px solid #efefef; position: relative; }
  .standby-list-wrap .standby_mobile_product_list .single-image { width: 100%; height: 800px; display: flex; align-items: center; justify-content: center;  }
  .standby-list-wrap .standby_mobile_product_list .single-image .image { width: 100%; height: 100%; display : block ; background-size: contain ; background-position: center; background-repeat: no-repeat; }
  .standby-list-wrap .standby_mobile_product_list .single-info { display: flex; width: 100%; padding: 12px }
  .standby-list-wrap .standby_mobile_product_list .single-info > .left-info { width: 50%; }
  .standby-list-wrap .standby_mobile_product_list .single-info > .left-info > .color > ul { display: flex; }
  .standby-list-wrap .standby_mobile_product_list .single-info .right-info { width: 50%; justify-items: right }
  .standby-list-wrap .standby_mobile_product_list .single-info .right-info > .size > ul { display: flex; gap: 8px; margin-top: 8px; }
                
  .standby-list-wrap .standby_mobile_product_list .multi-container { width: 50%; border: 1px solid #efefef; position: relative; }
  .standby-list-wrap .standby_mobile_product_list .multi-image { width: 100%; height: 360px; display: flex; align-items: center; justify-content: center;  }
  .standby-list-wrap .standby_mobile_product_list .multi-image .image { width: 100%; height: 100%; display : block ; background-size: contain ; background-position: center; background-repeat: no-repeat; }
  .standby-list-wrap .standby_mobile_product_list .multi-info { display: flex; width: 100%; padding: 12px }
  .standby-list-wrap .standby_mobile_product_list .multi-info > .left-info { width: 50%; }
  .standby-list-wrap .standby_mobile_product_list .multi-info > .left-info > .color > ul { display: flex; }
  .standby-list-wrap .standby_mobile_product_list .multi-info .right-info { width: 50%; justify-items: right }
  .standby-list-wrap .standby_mobile_product_list .multi-info .right-info > .size > ul { display: flex; gap: 8px; margin-top: 8px; }

  .standby-list-wrap .product.half{
    border: none;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
  }
  .standby-list-wrap .info-wrap {
    width: 100%;
    height: fit-content;
    position : relative ;
  }
  .standby-list-wrap .info-wrap.bottom {position: relative;  }
  .standby-list-wrap .info-wrap.floating {position: relative; }
  .standby-list-wrap #images-paging { display:none;}
  .standby-list-wrap .standby-list-wrap {
    height: 100%;
  }

  .standby-list-wrap .product-wrap {
    width: 100%;
    order: 2;
  }
  .standby-list-wrap .info {
    width: 100%;
  }
  .standby-list-wrap .info-product {
    margin-top: 40px;
  }
  .standby-list-wrap .info-agreement {
    margin: 50px 0;
    order: 3;
  }
  .standby-list-wrap .info .info__box {
    width: 90%;
  }
  .standby-list-wrap .standby-joinus-btn {
    width: 100%;
  }
  /* 상품 정보 */
  /* .standby-list-wrap .product .product-info{
        height: 45px;
    }
    .standby-list-wrap .product .product-info .info-row .size__box{
        display: none;
    } */

  .standby-list-wrap
    .product
    .product-info
    .info-row
    .price[data-soldout="STSO"]::before {
    display: block;
    position: absolute;
    text-decoration: none;
    content: "Sold out" !important;
    font-size: 1rem;
    right: 0;
    font-weight: normal;
    color: #343434;
    left: auto;
    top: -12px;
  }

  .standby-list-wrap .product .product-info {
    padding: 5px 10px;
    height: 45px;
  }
  .standby-list-wrap .product .product-info .info-row .name {
    overflow: hidden;
  }
  .standby-list-wrap .product .product-info .info-row .color__box {
    flex-grow: 1;
    justify-content: flex-end;
    padding-bottom: 10px;
  }

  .standby-list-wrap .product .product-info .info-row .size__box {
    display: none;
  }

  .standby-list-wrap .product .product-info .color-title {
    position: absolute;
    bottom: 3px;
  }

  .standby-list-wrap .product .product-info .info-row .price {
    position: relative;
    top: -4px;
    line-height: 2.3;
  }

  .standby-list-wrap .product .product-info .info-row .price[data-dis="true"] {
    top: 8px;
    font-size: 10px;
  }

  .standby-list-wrap
    .product
    .product-info
    .info-row
    .price[data-dis="true"]::before {
    line-height: 2.3;
  }

  .standby-list-wrap
    .product
    .product-info
    .info-row
    .price[data-dis="true"]::after {
    top: -12px;
  }

  .standby-list-wrap .product .product-info > .info-row:nth-of-type(3) {
    height: 15px;
  }
  .standby-list-wrap
    .product
    .product-info
    .info-row
    .color__box[data-maxcount="over"]::after {
    font-size: 9px;
  }
}

.control-group {
  padding: 1em 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.control-group div {
  padding: 0.2em;
}
.control-group label {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 5px;
}
.standby-list-wrap .control-group label {
  gap: 0;
}

.cb-radio {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  border: 1px solid #000000;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  background-clip: content-box;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

.cb-radio:checked {
  background-color: #000000;
}

.cb-radio {
  border-radius: 0.2em;
}

@media (max-width: 400px) {
  .standby-list-wrap .product .product-info .info-row .color__box {
    gap: 5px;
  }
}

.page__none { text-align : center; height : 25%; margin : auto; }
.list__none { text-align : center; height : 250px; padding-top : 100px; }

#mask_loading { position:absolute; z-index:9999; background-color:#000000; display:none; left:0; top:0; }

.qna.wrap-720 li { display:flex; height:40px; }
.qna.wrap-720 li div { padding-top:10px; padding-bottom:10px; border-bottom:1px solid #bfbfbf; }
.qna.wrap-720 li .category { width:20%; text-align:center; }
.qna.wrap-720 li .title { width:52%; cursor:pointer; text-decoration:underline; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; }
.qna.wrap-720 li .answer { width:10%; text-align:center; }
.qna.wrap-720 li .date { width:18%; text-align:center; }

main.my > section.qna dl { display: grid; grid-template-columns: auto 2fr; column-gap: 10px; row-gap:10px; }
main.my > section.qna dl dt { display: grid; width:150px!important; }
main.my > section.qna dl .question_contents { min-height:150px; }
.div_question_img { display:flex; gap:10px; padding : 30px 0px 10px 0px; overflow-x:auto; }
.question_img { width:100px; height:100px; background-color:#ffffff; border:1px solid #bfbfbf; background-position:center; background-size:contain; background-repeat: no-repeat; cursor:pointer; }

.qna.wrap-720 .buttons { padding : 40px 0px 40px 0px; }
main.my > section.qna dl .answer_contents { min-height:150px; }

.modal.confirm.on section { width:450px; }
.modal.confirm.on section .close { right:40px!important; }
.modal.confirm.on .row_flex__body { display:grid; grid-template-columns : 1fr 1fr; padding:25px 0px 25px 0px; gap:10px; }
.modal.confirm.on .buttons button { width:95% }

@media only screen and (max-width: 1024px) {
  .qna.wrap-720 li .title { width:85%; cursor:pointer; text-decoration:underline; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; }
  .qna.wrap-720 li .answer { width:15%; text-align:center; }

  main.my > section.qna .contents_body {display:block!important}
  .modal.confirm.on section { width:100%; }
  .modal.confirm.on section section { padding:50px 40px }
  .modal.confirm.on section .close { right:40px!important; }
  .modal.confirm.on .row_flex__body { display:grid; grid-template-columns : 1fr; row-gap:10px }
  .modal.confirm.on .buttons button { width:100% }

  .question_img { width:46px; height:46px; background-color:#ffffff; border:1px solid #bfbfbf; background-position:center; background-size:contain; background-repeat: no-repeat; cursor:pointer; }
}

/* 블루마크 양도 모달 */
.section__transfer { padding:50px; }
.section__tab {padding:25px;}
.section__transfer .close { right:50px;top:50px; }
.row_flex__button { display:flex;justify-content:center; }
.input-email { margin-top:10px; }
.input-tel { margin-top:10px; }
.btn_transfer {width:235px;height:45px;border:1px solid #bfbfbf;}

/* 팝업 모달 */
#popup-container {
  visibility: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  position: fixed;
}
#popup-container.open {
  visibility: visible;
}
#popup-container.open .popup__background {
  display: flex;
  background:rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
  transition-duration: 1s;
  height: 100vh;
}
#popup-container.open .popup__background.left {
  justify-content: start;
}
#popup-container.open .popup__background.center {
  justify-content: center;
}
#popup-container.open .popup__background.right {
  justify-content: end;
}
#popup-container.open .popup__background.top {
  align-items: start;
}
#popup-container.open .popup__background.middle {
  align-items: center;
}
#popup-container.open .popup__background.bottom {
  align-items: end;
}

#popup-container .popup__box {
  position: relative;
  display: grid;
  place-items: center;
  color: #343434;
  padding: 110px 60px 30px;
  overflow : hidden;
}

#popup-container .popup_header{
  height: 40px;
}

#popup-container .popup__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.popup__box .title {
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  margin-bottom: 20px;
}

.popup__box .popup_body{
  max-height: 320px;
  overflow-y: auto;
}
#popup-container p,
#popup-container span{
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: center;
  overflow-y: auto;
  max-height: 420px;
}
#popup-container .popup__wrap{
  position:relative;
}
.popup_close {
	width: 12px;
    height: 12px;
    position: absolute;
    top: 30px;
    right: 30px;
    background: url(/images/ico-close.svg) center no-repeat;
    transition: ease-out .2s;
	z-index: 9;
	cursor:pointer;
}
#popup-container .close-btn svg:hover {
  transform: rotate(90deg);
  transition: transform 0.5s;
}

#popup-container .popup_logo {
  margin-top: 90px;
}

#popup-container .popup_logo img {
  pointer-events: none;
  height: 10px;
}

#popup-container .do_not_open {
  position: absolute;
  left: 0;
  bottom: -25px;
  display: flex;
  align-items: center;
  gap: 5px;
}

#popup-container .do_not_open [type="checkbox"] {
  width:10px;
  height:10px;
  border: 1px solid #fff;
}

#popup-container .do_not_open [type="checkbox"]:checked {
  border: 6px solid #000000;
}

#popup-container .do_not_open span {color: #fff;cursor:pointer;}

@media (min-width: 1025px) and (max-width: 1300px) {
  #popup-container .popup__box {
    padding: 60px 30px 30px;
    min-width:260px;
    min-height:260px;
	overflow : hidden;
  }

  #popup-container .popup_logo{
    margin-top : 50px;
  }
}

/* 마이페이지 A/S 관련 */
.deli-company-list .tui-select-box-input {height:40px;padding-top:5px}
.deli-company-list.as-status-deli > .tui-select-box > ul {
  max-height: 200px;
}
main.my > section.as.status > article > .contents dd#attach-file_P { display: flex; gap: 10px; }
main.my > section.as.status > article > .contents dd#attach-file_R { display: flex; gap: 10px; }
main.my > section.as.status > article > .contents .image { border: solid 1px var(--border-gray-color); width: 100px; height: 100px; background-position: center; background-size: cover; }
.wrap__btn {display:flex;gap:10px;}
.btn_address {width:50%;height:40px;text-align:center;cursor:pointer;padding:10px 0px 8px 0px;border:1px solid #bfbfbf;}
.wrap__select {margin-top:10px;margin-bottom:10px;}
#delivery-info {margin-top:10px;}
.as_memo {width:100%;}

/* 마이페이지 - 문의내역 리스트 */
main.my section.qna article ul.dot li {
  height: auto;
}

main.my section.qna article .paging li:not(.prev):not(.next) {
  height: auto;
}

main.my section.qna #list {
  color: #000000;
  border-top: 1px solid #EAEAEA;
  margin-bottom: 40px;
}

main.my section.qna #list li {
  height: auto;
  padding: 20px 0;
  display: grid;
  grid-template-columns: 3fr 2fr;
  border-bottom: 1px solid #EAEAEA;
}

main.my section.qna #list li[data-answer="0"] .left .answer {
  color: #999999;
}

main.my section.qna #list li[data-answer="1"] .right .edit {
  visibility: hidden;
}

main.my section.qna #list li div {
  border: none;
  padding: 0;
}

main.my section.qna #list li .left *,
main.my section.qna #list li .right * {
  width: 100%;
}

main.my section.qna #list li .left * {
  text-align: left;
}

main.my section.qna #list li .right * {
  text-align: right;
}

main.my section.qna #list li .left .date {
  color: #999999;
}

main.my section.qna #list li .left .category {
  margin-top: 10px;
}

main.my section.qna #list li .left .title {
  width: fit-content;
  margin-top: 5px;
  font-size: 12px;
  text-decoration: none;
}

main.my section.qna #list li .left .answer {
  margin-top: 15px;
}

main.my section.qna #list li .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
}

main.my section.qna #list li .right .edit {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
}

main.my section.qna #list li .right .edit .modify,
main.my section.qna #list li .right .edit .delete {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid #EAEAEA;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 100%;
  cursor: pointer;
}

main.my section.qna #list li .right .edit .modify img,
main.my section.qna #list li .right .edit .delete img {
  width: 13px;
  height: 13px;
}

main.my section.qna #list li .right .file {
  width: 14px;
  height: 14px;
  background-image: url('/images/ico-file.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

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

  main.my section.qna-list article .buttons {
    padding: 0;
  }

  main.my section.qna #list li {
    grid-template-columns: 1fr 1fr;
  }
}

/* 마이페이지 - 문의내역 상세 */
main.my section.qna-detail .div_question,
main.my section.qna-detail .div_answer {
  border: 1px solid #EAEAEA;
  padding: 0 20px 20px 20px;
}

main.my section.qna-detail .div_answer {
  margin-top: 20px;
}

main.my section.qna.qna-detail dl {
  display: block;
}

main.my section.qna.qna-detail dl dt {
  margin-top: 20px;
  margin-bottom: 10px;
  text-decoration: underline;
}

main.my section.qna.qna.qna-detail dl .question_title {
  margin-top: 30px;
  font-size: 12px;
}

main.my section.qna.qna.qna-detail dl .question_contents {
  min-height: unset;
  margin-top: 10px;
}

main.my section.qna.qna.qna-detail dl .div_question_img {
  padding: 0;
  flex-wrap: wrap;
}

main.my section.qna.qna.qna-detail dl .div_question_img .question_img {
  width: 45px;
  height: 45px;
  border: 1px solid #808080;
}

main.my section.qna.qna-detail .div_question .buttons {
  max-width: unset;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

main.my section.qna.qna-detail .div_question .buttons button {
  margin: 20px 0 0 0;
  border: 1px solid #EAEAEA;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

main.my section.qna.qna-detail .div_question .buttons button img {
  width: 13px;
  height: 13px;
}

main.my section.qna.qna-detail .answer_contents {
  margin-top: 20px;
  min-height: unset;
}

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

  main.my section.qna.qna-detail .div_question .buttons {
    gap: 10px;
  }

  main.my section.qna.qna-detail .div_question .buttons button {
    margin-top: 30px;
    gap: 10px;
  }
}

/* 본인인증 화면 CSS */
.btn.btn_auth {margin-top:15px;}

.pay.ok #delivery-num {text-decoration:underline;cursor:pointer;}

/* 결제하기 화면 바우처 선택 CSS */
.pay #voucher-select { width:100%!important }
.pay #voucher-select .tui-select-box-input { height:45px; text-align:left; padding-top:8px; }

/* 주문 결제 */
main.my > section.pay .opacity0 {
  opacity: 0;
}

section.pay article.delivery #btn-delivery-change {
  width: 57px;
  height: 23px;
  border: 1px solid #EAEAEA;
}

section.pay article.delivery .delivery-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section.pay article.delivery .delivery-top .default {
  height: 20px;
  padding: 0 3px;
  background-color: #EAEAEA;
  font-size: 10px;
  line-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

main.my > section.pay #delivery-info {
  margin-top: 5px;
}

main.my > section.pay #delivery-info dl {
  display: block;
  word-break: break-all;
}

main.my > section.pay #delivery-info dl dd:not(:first-child) {
  margin-top: 10px;
}

section.pay select.order_memo {
  color: #343434;
  border-color: #DCDCDC;
  padding: 0 8px;
}

main.my > section.pay ul.list > li ~ li {
  margin-top: 10px;
}

section.pay #voucher-select .tui-select-box-input {
  border: 1px solid #DCDCDC;
  position: relative;
}

section.pay #voucher-select .tui-select-box-icon {
  width: 10px;
  position: absolute;
  top: 0;
  right: 10px;
  background-image: url('/images/ico-select-arrow.svg');
  transition: transform 0.3s ease;
}

section.pay #voucher-select .tui-select-box-input.tui-select-box-open .tui-select-box-icon {
  transform: rotate(180deg);
}

section.pay #voucher-select .tui-select-box-placeholder {
  font-size: 12px;
}

section.pay input#mileage-point {
  border: 1px solid #DCDCDC;
  padding: 0 8px;
}

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

  main.my > section.pay:not(.ok) article.result {
    border: none;
    padding: 0;
  }

  main.my > section.pay:not(.ok) article.result .buttons.pay-submit {
    max-width: none;
  }
}

/* 주문 결제 - 모바일 접기 */
main.my > section.pay h2.border {
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main.my > section.pay dl.fold dt .fold-text {
  display: none;
  font-size: 10px;
  line-height: 100%;
  text-align: right;
}

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

  main.my > section.pay dl.fold > dt:after {
    top: 4px;
  }

  main.my > section.pay dl.fold dt.close .fold-text {
    display: block;
  }
}

/* 주문 결제 - 우측 */
main.my > section.pay:not(.ok) {
  padding: 45px 100px 0 100px;
}

main.my > section.pay:not(.ok) form#frm {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

main.my > section.pay:not(.ok) form#frm > div.left {
  min-width: 620px;
  max-width: 620px;
}

main.my > section.pay:not(.ok) article.result {
  background-color: #ffffff;
  position: sticky;
  top: 145px;
  right: 0;
  height: fit-content;
}

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

  main.my > section.pay:not(.ok) form#frm > div.left {
    min-width: 540px;
    max-width: 540px;
  }
}

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

  main.my > section.pay:not(.ok) {
    padding: 10px 20px;
  }

  main.my > section.pay:not(.ok) form#frm {
    display: block;
  }

  main.my > section.pay:not(.ok) form#frm > div.left {
    min-width: unset;
    max-width: unset;
  }

  main.my > section.pay:not(.ok) article.result {
    position: static;
  }
}

/* 주문 결제 배송지 모달 */
.modal-pay-delivery.pay-page #list .list__none {
  padding-left: 32px;
  padding-right: 32px;
  text-align: left;
}

.modal-pay-delivery.pay-page #list .list__none .top {
  font-size: 12px;
}

.modal-pay-delivery.pay-page #list .list__none .bottom {
  margin-top: 10px;
}

.modal-pay-delivery.pay-page ul.list .info > .address dl {
  display: block;
}

.modal-pay-delivery.pay-page ul.list .info > .address dl > dd {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.modal-pay-delivery.pay-page ul.list {
  margin: 40px 24px;
}

.modal-pay-delivery.pay-page ul.list li {
  cursor: pointer;
}

.modal-pay-delivery.pay-page ul.list > li ~ li {
  margin-top: 10px;
}

.modal-pay-delivery.pay-page ul.list li.on div.info {
  border-color: #000000;
}

.modal-pay-delivery.pay-page .default-flg {
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 3px;
  background-color: #EAEAEA;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  line-height: 100%;
}

.modal-pay-delivery.pay-page .add-delivery-section .warning,
.modal-pay-delivery.pay-page #frm-modal-delivery .warning {
  color: #FF7F7F;
  font-size: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

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

  .modal-pay-delivery.pay-page {
    padding: 0;
  }

  .modal-pay-delivery.pay-page article.list {
    padding: 20px;
  }

  .modal-pay-delivery.pay-page article.list #list {
    margin: 0;
  }

  .modal-pay-delivery.pay-page section .addr-modal .modal-body {
    padding: 40px 20px 0 20px;
  }
}

/* 주문 결제 완료 */
main.my.order-pay > section.pay.ok.wrap-720 {
  padding-top: 20px;
}

main.order-pay .pay.ok .infobox {
  background-color: #F8F8F8;
  padding: 20px;
}

main.order-pay > section.pay.ok .infobox .info-text {
  margin-bottom: 0;
}

main.order-pay .pay.ok .infobox p {
  font-weight: 500;
  margin-bottom: 20px;
}

main.my.order-pay section.pay.ok dl.fold {
  margin-top: 40px;
  margin-bottom: 60px;
}

main.my.order-pay section.pay.ok dl.fold[data-status="price-info"],
main.my.order-pay section.pay.ok dl.fold[data-status="order-cancel-info"] {
  margin-bottom: 40px;
}

main.my.order-pay > section.pay.ok h2.border {
  padding-bottom: 10px;
  border-bottom-color: #808080;
}

main.my.order-pay > section.pay.ok h2.no-border {
  padding-bottom: 0;
}

main.my.order-pay > section.pay.ok dl.fold[data-status="price-info"] {
  border: none;
  border-bottom: 1px solid var(--border-gray-color);
  padding: 0 0 20px 0;
}

main.my.order-pay #default-address {
  width: fit-content;
  height: 20px;
  margin-bottom: 5px;
  padding: 0 3px;
  background-color: #EAEAEA;
  font-size: 10px;
  line-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

main.my.order-pay #ok-delivery-info {
  line-height: normal;
}

main.my.order-pay #ok-delivery-info > div:not(:first-child) {
  margin-top: 10px;
}

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

  main.my.order-pay > section.pay.ok.wrap-720 {
    padding-top: 40px;
  }

  main.my.order-pay section.pay.ok dl.fold {
    margin-bottom: 40px;
  }

  main.my.order-pay section.pay.ok dl.price-info {
    gap: 15px 0;
  }

  main.my.order-pay section.pay.ok dl.price-info:first-child {
    padding-bottom: 15px;
  }

  main.my.order-pay section.pay.ok dl.price-info.pay-method {
    margin-top: 15px !important;
  }

  main.my.order-pay > section.pay.ok dl.fold[data-status="price-info"] {
    padding-bottom: 15px;
  }
}

main.order-pay section.pay.ok .price-info.pay-method {
  border-bottom: none;
}

main.my.order-pay > section.pay.ok dl.fold #btn-view-receipt {
  border: 1px solid #EAEAEA;
  margin-bottom: 0px;
}

main.my.order-pay section.pay.ok ul.dot {
  margin: 10px 0;
}

/* 마이페이지 - 주문내역 자세히보기 */
main.my section.pay.ok.order-detail dd.receipt {
  display: flex;
  justify-content: end;
  align-items: center;
}

main.my section.pay.ok.order-detail #btn-view-receipt {
  border: 1px solid #EAEAEA;
  padding: 4px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

main.my section.pay.ok.order-detail .fold-recent {
  margin-top: 40px;
}

/* 비밀번호 재확인 */
main.my section.info-verify {
  padding: 170px 20px 180px 20px;
}

main.my section.info-verify .info-verify-wrapper {
  max-width: 400px;
  margin: 0 auto;
}

main.my section.info-verify .info-verify-wrapper .info-input {
  margin: 120px 0;
}

main.my section.info-verify .info-verify-wrapper .info-input .warning {
  color: #FF7F7F;
  font-size: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

main.my section.info-verify .info-verify-wrapper .buttons .btn.confirm.disabled {
  background-color: #fff;
  color: #000;
  pointer-events: none;
}

main.my section.info-verify .info-verify-wrapper .buttons .btn.confirm {
  background-color: #191919;
  color: #fff;
}

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

  main.my section.info article.context {
    margin-top: 40px;
  }

  main.my section.info-verify {
    padding: 60px 20px 30px 20px;
  }
}

/* 교환환불 불가 - 장바구니 */
body > header > aside > section.shoppingbag article dl.cart > dd ul > li .total-price {
  text-align: right;
}

body > header > aside > section.shoppingbag article dl.cart > dd ul > li .total-price .not-possible {
  color: #808080;
  font-size: 10px;
  text-decoration: underline;
  text-decoration-color: #808080;
}

/* 교환환불 불가 - 모달 */
section.modal.refund-confirm section {
  padding: 0;
  position: relative;
}

section.modal.refund-confirm section.wrapper {
  width: 450px;
}

section.modal.refund-confirm section.wrapper button.close {
  top: 20px;
  right: 20px;
}

section.modal.refund-confirm section.wrapper .btn.confirm {
  border: none;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

section.modal.refund-confirm section.wrapper article {
  min-height: 215px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.modal.refund-confirm section.wrapper .btn.confirm .bag {
  display: inline-block;
  width: 10px;
  height: 14px;
  background-image: url('/images/ico-bag.w.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

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

  section.modal.refund-confirm section.wrapper {
    width: 100%;
  }
}

/* 모달 백그라운드 스크롤 막기 */
body:has(header.fadeout),
body:has(.stockist.modal.on),
body:has(.modal.alert.on),
body:has(.modal.on) {
  overflow: hidden;
}
body.scroll-prevent {
  overflow-y: hidden;
}

/* input 비밀번호 동그라미 수정 */
input[type="password"] {
  font: small-caption;
  font-family: 'Arial', 'Helvetica', 'sans-serif';
  letter-spacing: 8px;
}

/* 주소등록 모달 */
@media only screen and (max-width: 1024px) { 

  div.postcodify_search_status {
    width: auto !important;
  }
}

/* 모바일 말줄임표 처리 */
@media only screen and (max-width: 1024px) { 

  main.my section.my-main .swiper-wrapper.goods > .swiper-slide .info big.text-ellipsis,
  main.goods.detail section#view-relation .swiper-wrapper .info .title.text-ellipsis {
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
  }

  .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 마이페이지 이전 주문 내역 조회 */
main.my.order section.order h1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main.my.order section.order #btn-order-history {
  border: 1px solid #EAEAEA;
  padding: 5px 20px;
  font-size: 11px;
  cursor: pointer;
}

section.modal-order-history {
  width: 650px;
}

section.modal-order-history .order-history-article {
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
}

section.modal-order-history ul#order-history-list li {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
  align-items: center;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
}

section.modal-order-history ul#order-history-list li.no-list {
  grid-template-columns: 1fr;
  padding: 100px 0;
}

section.modal-order-history ul#order-history-list li > div {
  padding: 0 4px;
}

/* 마이페이지 회원 전환 모달 */
.modal .my-migration-desc {
  margin: 10px 0;
}

.modal dl.my-migration {
  border: solid 1px var(--border-gray-color);
  grid-template-columns: 120px auto;
  margin-top: 10px;
  padding: 10px 20px;
}

.modal dl.my-migration dt {
  font-size: 10px;
  padding-right: 4px;
}

.modal dl.my-migration.flex dt:not(:last-child) {
  margin-top: 10px;
}

.modal .my-migration-text {
  margin-top: 30px;
}

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

  .modal dl.my-migration {
    grid-template-columns: 80px auto;
  }
}

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

  .modal dl.my-migration {
    grid-template-columns: 1fr 3fr;
  }
}

/* 배송지 인풋 */
.form-inline.inline-label input[readonly]::placeholder {
  color: var(--control-label-color);
  opacity: .5;
  font-weight: 300 !important;
}

/* 네비게이터바 */
main.my.move-tab .tab,
.modal-pay-delivery.move-modal .tab {
  overflow: hidden;
}

main.my.move-tab .tab > .tab-container > ul,
.modal-pay-delivery.move-modal .tab > .tab-container > ul {
  position: relative;
}

main.my.move-tab .tab > .tab-container > ul::before,
.modal-pay-delivery.move-modal .tab > .tab-container > ul::before {
  content: "";
  width: 50%;
  height: 3px;
  background-color : var(--black);
  position: absolute;
  display: inline-block;
  left: 0;
  bottom: -2px;
  transition: left 0.4s ease;
}

main.my.move-tab .tab > .tab-container > ul.move-2::before,
.modal-pay-delivery.move-modal .tab > .tab-container > ul.move-2::before {
  left: 50%;
}

main.my.move-tab .tab > .tab-container > ul > li,
.modal-pay-delivery.move-modal .tab > .tab-container > ul > li {
  transition: opacity 0.4s ease;
}

main.my.move-tab .tab > .tab-container > ul > li.on:before,
.modal-pay-delivery.move-modal .tab > .tab-container > ul > li.on:before {
  display: none;
}

main.my.move-tab .tab > .section-wrapper,
.modal-pay-delivery.move-modal .tab > .section-wrapper {
  display: flex;
  transition: transform 0.4s ease, height 0.4s ease;
  width: 100%;
}

main.my.move-tab .tab > .section-wrapper > section,
.modal-pay-delivery.move-modal .tab > .section-wrapper > section {
  width: 100%;
  height: fit-content;
  flex-shrink: 0;
}

.modal-pay-delivery .wrap__select.memo {
  margin: 10px 24px 24px 24px;
}

.modal-pay-delivery .wrap__select.memo select.as_memo_input {
  padding: 0;
  color: var(--black);
}

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

  .modal-pay-delivery .wrap__select.memo {
    margin: 10px 0 24px 0;
  }
}

/* 마이페이지 주문내역 - 리스트 */
main.my.order .paging {
  margin-top: 60px;
}

/* 마이페이지 주문내역 - 주문취소 */
main.my.order-cancel-page .order-detail-section {
  width: 100%;
  max-width: 720px;
  padding-top: 30px;
}

main.my.order-cancel-page .order-cancel-page-title {
  width: 100%;
  font-size: 13px;
  margin-bottom: 20px;
}

main.my.order-cancel-page .order-info {
  gap: 5px;
  font-size: 12px;
}

main.my.order-cancel-page .order-info .order-number .order-number-value, 
main.my.order-cancel-page .order-info .order-date .order-date-value {
  text-decoration: none;
}

main.my.order-cancel-page .order-cancel-wrapper {
  margin-right: 20px;
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 10px;
}

main.my.order-cancel-page .order-cancel-btn.all {
  color: #000000;
  position: relative;
}

main.my.order-cancel-page .order-cancel-wrapper span {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  text-decoration: underline;
}

main.my.order-cancel-page .order-cancel-btn {
  width: 10px;
  height: 12px;
  padding: 0;
  border: 1px solid #343434;
}

main.my.order-cancel-page .order-header {
  margin-bottom: 20px;
}

main.my.order-cancel-page .order-body {
  border: none;
}

main.my.order-cancel-page .order-product-box {
  border-bottom: none;
  box-shadow: 0 0 0 1px var(--border-gray-color);
  /* min-height: 150px; */
  height: 150px;
  padding: 0;
}

main.my.order-cancel-page .order-product-box:not(:first-child) {
  margin-top: 40px;
}

main.my.order-cancel-page .order-product-box a {
  height: 150px;
  aspect-ratio: 4 / 5;
  box-shadow: 0 0 0 1px var(--border-gray-color);
}

main.my.order-cancel-page .order-product-box a .order-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

main.my.order-cancel-page .order-product-box ul {
  margin-left: 0;
  padding: 20px;
  gap: 10px;
  justify-content: start;
  font-size: 10px;
  line-height: 100%;
}

main.my.order-cancel-page .order-product-box ul .product-name {
  font-size: 12px;
  line-height: normal;
}

main.my.order-cancel-page .order-product-box ul .product-price-qty {
  display: flex;
  align-items: center;
}

main.my.order-cancel-page .order-product-box ul .product-price-qty span {
  margin: 0 10px;
}

main.my.order-cancel-page .order-status-box.cancel {
  padding: 20px 20px 20px 0;
}

main.my.order-cancel-page .order-input-box .reason-title {
  font-size: 10px;
  color: #999999;
}

main.my.order-cancel-page .order-input-box .order-select-box {
  display: block;
  margin-bottom: 30px;
}

main.my.order-cancel-page .order-input-box .order-select-box .tui_select {
  width: 100%;
}

main.my.order-cancel-page .order-input-box .order-select-box .tui-select-box-highlight,
main.my.order-cancel-page .order-input-box .order-select-box .tui-select-box-highlight,
main.my.order-cancel-page .order-input-box .order-select-box .tui-select-box-selected,
main.my.order-cancel-page .order-input-box .order-select-box .tui-select-box-selected {
  background: #ffffff;
}

main.my.order-cancel-page .order-input-box .order-select-box .tui_select .tui-select-box-input {
  padding: 0;
  text-align: left;
  border: none;
  border-bottom: 1px solid #808080;
}

main.my.order-cancel-page .order-input-box .order-select-box .tui_select .tui-select-box-item {
  padding: 15px 10px;
  height: fit-content;
}

main.my.order-cancel-page .order-input-box .order-select-box .tui_select .tui-select-box-item:not(:last-child) {
  border-bottom: 1px solid #EAEAEA;
}

main.my.order-cancel-page .order-cancel-noti ul.dot {
  margin: 0;
}

main.my.order-cancel-page .cancel-select-btn,
main.my.order-cancel-page .cancel-complete-btn {
  margin: 50px auto 0 auto;
  width: 400px;
  height: 45px;
}

main.my.order-cancel-page .cancel-select-btn.wh {
  cursor: default;
}

main.my.order-cancel-page .order-detail-section.order-input-box {
  margin: 0 auto;
}

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

  main.my.order-cancel-page > .summary {
    display: none;
  }

  main.my.order-cancel-page > section.wrap-720 {
    padding-top: 20px;
  }

  main.my.order-cancel-page .order-list-box {
    max-width: none;
  }

  main.my.order-cancel-page .order-product-box:not(:first-child) {
    margin-top: 10px;
  }

  main.my.order-cancel-page .order-product-box ul {
    padding: 20px 10px;
  }

  main.my.order-cancel-page .order-detail-section.order-cancel-bottom {
    padding-top: 10px;
  }

  main.my.order-cancel-page .cancel-select-btn,
  main.my.order-cancel-page .cancel-complete-btn {
    width: 100%;
    margin-top: 0;
  }

  main.my.order-cancel-page .order-input-box .order-select-box {
    margin-bottom: 10px;
  }
}

@media (max-width: 600px) {

  main.my.order-cancel-page .order-date .order-date-value, 
  main.my.order-cancel-page .order-product-box .product-name {
    max-width: 100%;
  }
  
  main.my.order-cancel-page .order-product-box {
    grid-template-columns: 1fr 2fr 0.5fr;
  }
}

/* 마이페이지 주문내역 - 주문취소 완료 */
main.my.order-cancel-ok .order-detail-section.noti {
  margin: 0 auto;
}

main.my.order-cancel-ok .order-cancel-ok-text {
  max-width: 480px;
  margin: 120px auto 0 auto;
}

main.my.order-cancel-ok .order-cancel-ok-text > p {
  font-size: 12px;
}

main.my.order-cancel-ok .order-cancel-ok-text ul.dot {
  margin: 40px 0 120px 0;
}

main.my.order-cancel-ok .order-cancel-end.payment {
  margin: 0 auto;
  padding: 0;
}

main.my.order-cancel-ok .go-cancel-list {
  width: 400px;
  height: 45px;
  margin: 0 auto;
}

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

  main.my.order-cancel-ok > .summary {
    display: block;
  }

  main.my.order-cancel-ok > .summary .info {
    display: none;
  }

  main.my.order-cancel-ok .order-cancel-ok-text {
    margin-top: 70px;
  }

  main.my.order-cancel-ok .order-cancel-ok-text ul.dot {
    margin: 20px 0 60px 0;
  }

  main.my.order-cancel-ok .order-cancel-end.payment {
    padding: 0 20px;
  }

  main.my.order-cancel-ok .go-cancel-list {
    width: 100%;
  }
}

/* 마이페이지 주문내역 - 교환/반품 */
main.my.order-update .order-detail-section-top {
  margin-bottom: 0;
}

main.my.order-update .order-header.order-top {
  flex-direction: column;
  gap: 6px;
}

main.my.order-update .order-header.order-top .order-top-desc {
  color: #808080;
  font-size: 12px;
}

main.my.order-update .order-product-box ul .tmp_idx {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

main.my.order-update .order-status-box .order-exchange-box {
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

main.my.order-update .order-status-box .order-exchange-box .order-exchange-btn {
  width: 135px;
  height: 45px;
}

main.my.order-update .order-detail-section-top .order-status-box .order-exchange-box .order-exchange-btn.bk {
  background-color: #ffffff;
  color: #343434;
  box-shadow: 0 0 0 1px #808080;
}

main.my.order-update .order-detail-section.noti {
  margin: 0 auto;
}

main.my.order-update .order-exchange-noti.order-noti-wrap,
main.my.order-update .order-exchange-noti ul.dot {
  margin: 0;
}

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

  main.my.order-update .order-detail-section-top .order-product-box,
  main.my.order-update #exchange-list-content .order-product-box,
  main.my.order-update #refund-list-content .order-product-box {
    min-height: 195px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "item1 item2"
      "item3 item3";
  }
  main.my.order-update .order-detail-section-top .order-product-box > a,
  main.my.order-update #exchange-list-content .order-product-box > a,
  main.my.order-update #refund-list-content .order-product-box > a { 
    grid-area: item1;
    height: 150px;
  }
  main.my.order-update .order-detail-section-top .order-product-box > ul,
  main.my.order-update #exchange-list-content .order-product-box > ul
  main.my.order-update #refund-list-content .order-product-box > ul { 
    grid-area: item2; 
  }
  main.my.order-update .order-detail-section-top .order-product-box > .order-status-box,
  main.my.order-update #exchange-list-content .order-product-box > .order-status-box,
  main.my.order-update #refund-list-content .order-product-box > .order-status-box { 
    grid-area: item3; 
  }

  main.my.order-update .order-detail-section-top .order-status-box.cancel,
  main.my.order-update #exchange-list-content .order-status-box.cancel,
  main.my.order-update #refund-list-content .order-status-box.cancel {
    padding: 0;
  }

  main.my.order-update .order-detail-section-top .order-status-box .order-exchange-box {
    display: flex;
    gap: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  main.my.order-update #exchange-list-content .order-status-box .order-exchange-box,
  main.my.order-update #refund-list-content .order-status-box .order-exchange-box {
    display: flex;
    gap: 0;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    width: 100%;
  }

  main.my.order-update .order-detail-section-top .order-status-box .order-exchange-box .order-exchange-btn,
  main.my.order-update #exchange-list-content .order-status-box .order-exchange-box .order-exchange-btn,
  main.my.order-update #refund-list-content .order-status-box .order-exchange-box .order-exchange-btn {
    flex: 1;
    border: none;
    box-shadow: 0 0 0 1px var(--border-gray-color);
  }

  main.my.order-update .order-detail-section-top .order-status-box .order-exchange-box .order-exchange-btn[data-order_status="OEX"],
  main.my.order-update #exchange-list-content .order-status-box .order-exchange-box .order-exchange-btn[data-order_status="OEX"],
  main.my.order-update #refund-list-content .order-status-box .order-exchange-box .order-exchange-btn[data-order_status="OEX"] {
    background-color: #ffffff;
  }
}

/* 마이페이지 주문내역 - 교환/반품 모달 */
.order-popup-overlay {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100dvh;
  background: rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1005;
}

.order-popup-container-OEX, 
.order-popup-container-ORF {
  border: none;
  width: 480px;
  margin: 0;
  padding: 0;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 1006;
}

.order-popup-container-OEX .order-main-title-wrap, 
.order-popup-container-ORF .order-main-title-wrap {
  padding: 15px 40px 10px 40px;
}

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

  .order-popup-container-OEX .order-main-title-wrap, 
  .order-popup-container-ORF .order-main-title-wrap {
    padding: 15px 20px 10px 20px;
  }
}

.order-popup-container-OEX .order-main-title, 
.order-popup-container-ORF .order-main-title {
  font-size: 11px;
}

main.my.order-update .order-popup-container-OEX .order-product-box,
main.my.order-update .order-popup-container-ORF .order-product-box {
  box-shadow: none;
  border-top: 1px solid var(--border-gray-color);
  border-bottom: 1px solid var(--border-gray-color);
}

main.my.order-update .order-popup-container-OEX .order-product-box a,
main.my.order-update .order-popup-container-ORF .order-product-box a {
  height: 148px;
  box-shadow: 1px 0 0 0 var(--border-gray-color);
}

main.my.order-update .order-popup-container-OEX .order-detail-section, 
main.my.order-update .order-popup-container-ORF .order-detail-section {
  padding-top: 0;
}

.order-popup-container-OEX .option-btn-wrap, 
.order-popup-container-ORF .option-btn-wrap {
  margin: 0;
  padding: 40px 40px 30px 40px;
}

main.my.order-update .order-popup-container-OEX .order-detail-section.order-popup .noti-title, 
main.my.order-update .order-popup-container-ORF .order-detail-section.order-popup .noti-title {
  color: #999999;
  font-size: 10px;
}

.order-popup-container-OEX .option-btn-wrap .order-select-box {
  margin-top: 4px;
  display: block;
}

.order-popup-container-ORF .option-btn-wrap .order-select-box {
  margin-top: 5px;
  display: block;
}

.order-popup-container-OEX .tui-select-box-highlight,
.order-popup-container-ORF .tui-select-box-highlight,
.order-popup-container-OEX .tui-select-box-selected,
.order-popup-container-ORF .tui-select-box-selected {
  background: #ffffff;
}

.order-popup-container-OEX .option-btn-wrap .order-select-box .tui_select, 
.order-popup-container-ORF .option-btn-wrap .order-select-box .tui_select {
  width: 100%;
}

.order-popup-container-OEX .tui-select-box-input, 
.order-popup-container-ORF .tui-select-box-input {
  padding: 0;
  border: none;
  border-bottom: 1px solid #808080;
  text-align: left;
}

.order-popup-container-OEX .tui-select-box-input.tui-select-box-open,
.order-popup-container-ORF .tui-select-box-input.tui-select-box-open {
  border: none;
  border-bottom: 1px solid #343434;
}

.order-popup-container-OEX .tui-select-box-dropdown .tui-select-box-item,
.order-popup-container-ORF .tui-select-box-dropdown .tui-select-box-item {
  padding: 15px 10px;
  height: fit-content;
}

.order-popup-container-OEX .tui-select-box-dropdown .tui-select-box-item:not(:last-child),
.order-popup-container-ORF .tui-select-box-dropdown .tui-select-box-item:not(:last-child) {
  border-bottom: 1px solid #EAEAEA;
}

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

  main.my.order-update .order-popup-container-OEX .order-detail-section.order-popup, 
  main.my.order-update .order-popup-container-ORF .order-detail-section.order-popup {
    margin-bottom: 0;
  }

  main.my.order-update .order-popup-container-OEX .order-detail-btn,
  main.my.order-update .order-popup-container-ORF .order-detail-btn {
    margin-top: 0;
  }

  .order-popup-container-OEX .tui-select-box-dropdown,
  .order-popup-container-ORF .tui-select-box-dropdown {
    max-height: 250px;
  }
}

/* 마이페이지 주문내역 - 교환/반품 모달 내 사이즈 */
.order-popup-container-OEX .option-size-wrap, 
.order-popup-container-ORF .option-size-wrap {
  position: relative;
  margin-bottom: 7px;
}

.order-popup-container-OEX .option-size-wrap p, 
.order-popup-container-ORF .option-size-wrap p {
  margin-bottom: 7px;
}

.order-popup-container-OEX .option-size-wrap .option-size-box {
  gap: 0;
  height: fit-content;
  flex-wrap: wrap;
}

.order-popup-container-OEX .exchange-size-option,
.order-popup-container-ORF .exchange-size-option {
  position: relative;
  border: 1px solid var(--border-gray-color);
  width: 45px;
  height: 45px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order-popup-container-OEX .exchange-size-option.soldout {
  color: #c2c2c2;
  pointer-events: none;
}

.order-popup-container-OEX .soldout::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 1px;
  background-color: #EAEAEA;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.order-popup-container-OEX .exchange-size-option.selected,
.order-popup-container-ORF .exchange-size-option.selected {
  border: 1px solid #343434;
}

.order-popup-container-OEX .order-input-box .order-detail-btn,
.order-popup-container-ORF .order-input-box .order-detail-btn {
  border-left: none;
  border-right: none;
}

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

  .order-popup-container-OEX,
  .order-popup-container-ORF {
    width: 320px;
  }

  .order-popup-container-OEX .order-popup,
  .order-popup-container-ORF .order-popup {
    max-height: 450px;
    overflow: scroll;
  }

  .order-popup-container-OEX .option-btn-wrap, 
  .order-popup-container-ORF .option-btn-wrap {
    padding: 20px 20px 10px 20px;
  }
}

/* 마이페이지 주문내역 - 교환/반품 모달 내 사이즈 드롭다운 */
.order-popup-container-OEX .option-size-wrap.dropdown {
  padding-bottom: 45px;
}

.order-popup-container-OEX .option-size-box.dropdown {
  background-color: #FFFFFF;
  width: 100%;
  display: block;
  text-align: left;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 1;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option {
  width: 100%;
  height: 45px;
  padding: 15px 10px;
  justify-content: start;
}

.order-popup-container-OEX .option-size-box.dropdown:not(.on) .exchange-size-option:not(.dropdown-text) {
  display: none;
}

.order-popup-container-OEX .option-size-box.dropdown.on .exchange-size-option:not(.dropdown-text) {
  display: flex;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option.dropdown-text {
  color: #999999;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option.selected:not(.dropdown-text) {
  border-color: #EAEAEA;
  border-left-color: #343434;
  border-right-color: #343434;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option:not(.dropdown-text) {
  border-top: none;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option:not(.dropdown-text) {
  border-left-color: #343434;
  border-right-color: #343434;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option:not(.dropdown-text):last-of-type {
  border-bottom-color: #343434;
}

.order-popup-container-OEX .option-size-box.dropdown .exchange-size-option:not(.dropdown-text):nth-of-type(2) {
  border-top: 1px solid #343434;
}

.order-popup-container-OEX .option-size-box.dropdown .soldout {
  text-decoration: line-through;
}

.order-popup-container-OEX .option-size-box.dropdown .soldout::before {
  display: none;
}

/* 마이페이지 주문내역 - 교환/반품 신청 내역 */
main.my.order-update .order-detail-section.exchange-list,
main.my.order-update .order-detail-section.refund-list {
  margin-bottom: 0;
  padding-top: 60px;
}

main.my.order-update .order-detail-section.exchange-list .title,
main.my.order-update .order-detail-section.refund-list .title {
  margin-bottom: 20px;
  font-size: 13px;
}

main.my.order-update .order-detail-section.exchange-list .order-exchange-btn.bk,
main.my.order-update .order-detail-section.refund-list .order-exchange-btn.bk {
  background-color: #ffffff;
  color: #343434;
}

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

  main.my.order-update .order-detail-section.exchange-list,
  main.my.order-update .order-detail-section.refund-list {
    padding-top: 40px;
  }

  main.my.order-update .order-detail-section.exchange-list .order-exchange-btn.bk,
  main.my.order-update .order-detail-section.refund-list .order-exchange-btn.bk {
    /* height: 46px; */
  }
}

/* 마이페이지 주문내역 - 교환/반품 하단 배송 관련 */
main.my.order-update .order-noti-wrap {
  gap: 0;
}

main.my.order-update .exchange-delivery {
  margin-bottom: 0;
  padding-top: 60px;
}

main.my.order-update .product-return-title {
  font-size: 13px;
  margin-bottom: 20px;
}

main.my.order-update .exchange-delivery .order-detail-body {
  border-top: none;
  padding: 0;
}

main.my.order-update .tab > .tab-container {
  margin-bottom: 20px;
  font-size: 12px;
}

main.my.order-update .order-description-pickup ul.dot > li::before, 
main.my.order-update .order-description-direct ul.dot > li::before {
  content: "" !important;
}

main.my.order-update .deli-section,
main.my.order-update .order-description-direct .delivery-info {
  border: 1px solid #EAEAEA;
  margin-top: 40px;
  padding: 20px;
}

main.my.order-update .deli-section .title,
main.my.order-update .order-description-direct .delivery-info .header-title {
  font-size: 13px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EAEAEA;
}

main.my.order-update .deli-section .desc {
  margin: 20px 0;
}

main.my.order-update .deli-section .desc .tel,
main.my.order-update .deli-section .desc .address {
  margin-top: 10px;
}

main.my.order-update .deli-section .desc .message {
  margin-top: 20px;
}

main.my.order-update .order-description-direct .delivery-info .header-title {
  margin-bottom: 10px;
}

main.my.order-update .order-description-direct .delivery-info .desc {
  margin-top: 20px;
  color: #808080;
}

main.my.order-update .order-description-direct .deli-info {
  gap: 0px;
}

main.my.order-update .order-description-direct .deli-info .order-header {
  margin-top: 60px;
  padding-bottom: 20px;
  border-bottom: solid 1px #EAEAEA;
}

main.my.order-update .order-description-direct .deli-info .order-header .header-title {
  font-size: 13px;
}

main.my.order-update .order-description-direct .deli-info .noti-title {
  color: #999999;
  font-size: 10px;
}

main.my.order-update .order-description-direct .tui-select-box-input {
  border: none;
  border-bottom: 1px solid #808080;
  height: 35px;
  padding: 0;
  text-align: left;
  font-size: 12px;
}

main.my.order-update .order-description-direct .tui-select-box-placeholder {
  line-height: 35px;
}

main.my.order-update .order-description-direct .deli-company-list {
  margin-bottom: 10px;
}

main.my.order-update .order-description-direct .tui-select-box-item {
  height: fit-content;
  padding: 15px 10px;
  line-height: normal;
}

main.my.order-update .tracking_number .control-label {
  color: #999999;
  opacity: 1;
}

main.my.order-update .charge-description {
  margin-top: 60px;
}

main.my.order-update .charge-description .order-header {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #EAEAEA;
  font-size: 13px;
}

main.my.order-update .charge-description .order-body ul.dot {
  margin-bottom: 0;
}

main.my.order-update .charge-description .order-body .charge_description_APL,
main.my.order-update .charge-description .order-body .charge_description_DRC {
  padding: 20px 0;
  border-bottom: 1px solid #EAEAEA;
}

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

  main.my.order-update .exchange-delivery {
    padding-top: 40px;
  }

  main.my.order-update .product-return-title {
    margin-bottom: 0;
  }

  main.my.order-update .tab > .tab-container {
    margin-bottom: 0;
  }

  main.my.order-update .deli-section .title, 
  main.my.order-update .order-description-direct .delivery-info .header-title {
    padding-bottom: 10px;
  }

  main.my.order-update .deli-section,
  main.my.order-update .order-description-direct .delivery-info {
    border: none;
    margin-top: 40px;
    padding: 0;
  }

  main.my.order-update .deli-section .desc {
    margin: 15px 0;
  }

  main.my.order-update .deli-section .desc .message {
    margin-top: 10px;
  }

  main.my.order-update .charge-description .order-header {
    padding-bottom: 10px;
  }

  main.my.order-update .charge-description .order-body .charge_description_APL, 
  main.my.order-update .charge-description .order-body .charge_description_DRC {
    padding: 15px 0;
  }

  main.my.order-update .order-description-direct .deli-info .order-header {
    padding-bottom: 10px;
  }

  main.my.order-update .order-description-direct .delivery-info .desc {
    margin-top: 0;
  }
}

/* 마이페이지 주문내역 - 하단 버튼 */
main.my.order-update .order-update-bottom {
  margin-top: 60px;
}

main.my.order-update .order-update-bottom .btn_put_order_product {
  width: 400px;
  height: 45px;
  margin: 0 auto;
}

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

  main.my.order-update .order-update-bottom {
    margin-top: 10px;
  }

  main.my.order-update .order-update-bottom .btn_put_order_product {
    width: 100%;
  }
}

/* 마이페이지 주문내역 - 반품/교환 완료 페이지 */
main.my .update-ok .go-cancel-list a {
  width: 100%;
  text-align: center;
}

/* 마이페이지 주문내역 - 상세 */
main.my > section.order-detail dl.fold[data-status="recent"], 
main.my > section.order-detail dl.fold[data-status="refund"], 
main.my > section.order-detail dl.fold[data-status="cancel"],
main.my > section.order-detail dl.fold[data-status="delivery"] {
  margin-top: 40px;
}

main.my > section.order-detail .payment-grid dl.fold[data-status="recent"], 
main.my > section.order-detail .payment-grid dl.fold[data-status="refund"], 
main.my > section.order-detail .payment-grid dl.fold[data-status="cancel"],
main.my > section.order-detail .payment-grid dl.fold[data-status="delivery"] {
  margin-top: 60px;
}

main.my section.order-detail .payment-wrapper.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

main.my section.order-detail .payment-wrapper.payment-grid .fold {
  height: fit-content;
}

main.my section.order-detail .info-box .cancel-item:not(:first-child) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EAEAEA;
}

main.my section.order-detail .info-box .cancel-item .receipt-link {
  border: 1px solid #EAEAEA;
  display: inline-block;
  height: 26px;
  padding: 4px 10px;
  text-align: center;
  color: #000000;
  cursor: pointer;
}

main.my section.order-detail .info-box .cancel-item dl.price-info:last-child {
  border-bottom: none;
}

main.my section.order-detail .info-box .cancel-item dl.price-info.receipt {
  margin-top: 20px;
}

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

  main.my section.order-detail .payment-wrapper.payment-grid {
    display: block;
  }

  main.my > section.order-detail .payment-grid dl.fold[data-status="recent"], 
  main.my > section.order-detail .payment-grid dl.fold[data-status="refund"], 
  main.my > section.order-detail .payment-grid dl.fold[data-status="cancel"],
  main.my > section.order-detail .payment-grid dl.fold[data-status="delivery"] {
    margin-top: 40px;
  }

  main.my section.order-detail .info-box .cancel-item dl.price-info.receipt {
    margin-top: 10px;
  }
}

/* 마이페이지 주문내역 - 상세 모달 */
.order-detail-modal .wrapper {
  width: 360px;
}

.order-detail-modal.modal > section > section {
  padding: 40px;
}

.order-detail-modal .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.order-detail-modal .title .close {
  position: relative;
  top: 0;
  right: 0;
}

.order-detail-modal .content {
  margin-top: 18px;
}

.order-detail-modal .content .item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8px;
}

.order-detail-modal .content .item:not(:first-child) {
  margin-top: 10px;
}

.order-detail-modal .content .item:last-child {
  margin-top: 20px;
}

.order-detail-modal .content .item div:first-child {
  text-align: left;
}

.order-detail-modal .content .item div:last-child {
  text-align: right;
}

.order-detail-modal .content .item .cancel-price {
  font-size: 13px;
  text-decoration: underline;
}

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

  .order-detail-modal .wrapper {
    width: fit-content;
    padding: 0;
  }
}

/* 마이페이지 바우처 */
main.my section.voucher .paging {
  margin-top: 40px;
}

main.my section.voucher ul.voucher-list > li .text dl dt,
main.my section.voucher ul.voucher-list > li .text dl dd {
  font-size: 11px;
}

main.my section.voucher ul.voucher-list > li .text dl dt:not(.date),
main.my section.voucher ul.voucher-list > li .text dl dd:not(.date) {
  margin-top: 5px;
}

main.my section.voucher ul.voucher-list > li .min-price {
  margin-top: 5px;
  font-size: 11px;
}

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

  main.my.voucher-detail > .summary {
    display: none;
  }

  main.my.voucher-detail section.voucher {
    padding-top: 0;
  }
}

/* 제갈민혁 - 취소,교환,환불 모달 */
.order-detail-cancel-modal .wrapper section .title,
.order-detail-exchange-modal .wrapper section .title,
.order-detail-refund-modal .wrapper section .title{ margin-bottom : 18px;}

.order-detail-cancel-modal .content .item div,
.order-detail-exchange-modal .content .item div,
.order-detail-refund-modal .content .item div {text-align: right;}

.order-detail-cancel-modal .wrapper article .content .item.reason {
  margin-top:40px;display: flex; flex-direction: column; align-items: flex-start; gap:0;
}
.order-detail-cancel-modal .wrapper article .content .item.reason .reason_desc{margin:20px 0 10px;}

.order-detail-exchange-modal .wrapper section .exchange_product {
  display: flex; flex-direction: row; align-items: center; border-top: 1px solid #EAEAEA;border-bottom: 1px solid #EAEAEA; position: relative; margin: 0 -40px;
} 
.order-detail-exchange-modal .wrapper section .exchange_product .exchange_product_img {
  border-right : 1px solid #EAEAEA;
}
.order-detail-exchange-modal .wrapper section .exchange_product .exchange_product_info {
  padding-left: 20px;
  display: flex; flex-direction: column;
  gap : 10px;
}
.order-detail-exchange-modal .wrapper section .exchange_product .exchange_product_info .price{
  display :flex;
  gap : 11px;
}
.order-detail-exchange-modal .wrapper section .exchange_product .exchange_product_info .qty{
  display: flex;
  gap: 11px;
}
.order-detail-exchange-modal .wrapper section .exchange_product .exchange_product_info .qty::before {
  content: "|";
  margin: 0 10px;
}
.order-detail-exchange-modal .wrapper article .content .item .modal_receipt,
.order-detail-refund-modal .wrapper article .content .item .modal_receipt { margin-top : 20px;}

.order-detail-exchange-modal .wrapper article .content .item .modal_receipt span,
.order-detail-refund-modal .wrapper article .content .item .modal_receipt span{
  color: #000;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  width: fit-content;
  padding: 3px 10px;
  cursor: pointer;
}
.order-detail-exchange-modal .wrapper article .content .item.reason,
.order-detail-refund-modal .wrapper article .content .item.reason {
  margin-top:40px;display: flex; flex-direction: column; align-items: flex-start; gap:0;
}
.order-detail-exchange-modal .wrapper article .content .item.reason .reason_desc,
.order-detail-refund-modal .wrapper article .content .item.reason .reason_desc{margin:20px 0 10px;}