@charset "utf-8";

/*.dn{display:none !important;}*/

/* 아이폰 스타일 제거 */
.m_frame input, .m_frame textarea{ appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; }

/* 모바일 Frame */
.m_frame{ background: #f4f4f4; display: flex; flex-direction: column; font-size: 15px; }
.m_frame ul{ list-style: none; }
.m_frame h3{ font-size: 21px; font-weight: 500; }
.m_frame button{ border: none; cursor: pointer; }
.m_frame input{ border: none; outline: none; }
.m_frame .first{ margin-top: 60px; }
.m_frame .panel{ position: relative; padding: 60px 20px; display: flex; justify-content: center; align-items: center; }
.m_frame .panel .btn_back{ position: absolute; left: 24px; width: 26px; height: 26px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.m_frame .white_board{ background: white; }
.m_frame .inner{ width: 100%; padding: 0 20px; display: flex; flex-direction: column; }
.m_frame .extend{ padding: 0 4px; }
.m_frame .active_button:active{ opacity: 0.7; transition: .1s; }
.m_frame .back_btn{ display: flex; }
.m_frame .back_btn a{ padding: 5px 10px; display: flex; align-items: center; font-size: 18px; font-weight: 500; }
.m_frame .back_btn img{ margin-right: 15px; width: 6px; height: 12px; object-fit: cover; }
.m_frame .hidden{ display: none; }

/* 주문 목록 */
.m_frame .order_table { display: flex; flex-direction: column; }
.m_frame .order_table > li{ border-top: 1px solid black; border-bottom: 1px solid #D6D6D6; }
.m_frame .order_table .order_info{ padding-top: 11px; padding-bottom: 11px; display: flex; justify-content: space-between; font-size: 14px; }
.m_frame .order_table .order_info .head-date > :first-child{ padding-right: 10px; }
.m_frame .order_table .order_info .head-no > :first-child{ padding-right: 10px; }
.m_frame .order_table .product_list li{ position: relative; width: 100%; padding-top: 26px; padding-bottom: 30px; display: flex; flex-direction: column; line-height: 19px; }
.m_frame .order_table .product_list li > *{ display: flex; justify-content: space-between; }
.m_frame .order_table .product_list li{ border-top: 1px solid #D6D6D6; }
.m_frame .order_table .product_list li .product{ display: flex; overflow: hidden; }
.m_frame .order_table .product_list .top .status{ position: relative; margin-left: 20px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; }
.m_frame .order_table .product_list .top .status a:not(.status_link){ margin-top: 6px; text-decoration: underline; font-weight: 400; color: #2D64AA; }
.m_frame .order_table .product_list .top .status .status_link{ padding: 10px; transform: translateX(10px) translateY(-10px); text-decoration: none; color: black; font-weight: bold; }
.m_frame .order_table .product_list .top .status .status_link:hover{ text-decoration: underline; }
.m_frame .order_table .product_list .reason{ padding-top: 20px; border-top: 1px solid #D6D6D6; display: flex; justify-content: center; font-size: 14px; }
.m_frame .order_table .product_list .photo img{ width: 76px; height: 76px; }
.m_frame .order_table .product_info{ padding-left: 16px; overflow: hidden; text-overflow: ellipsis; }
.m_frame .order_table .product_info > :not(:first-child){ margin-top: 6px; }
.m_frame .order_table .product_info .option{ line-height: 15px; font-size: 13px; color: #888888; font-weight: 500; }
.m_frame .order_table .product_info a{ overflow: hidden; font-weight: 500; }
.m_frame .order_table .product_info span{ white-space: nowrap; }
.m_frame .order_table .product_list .bottom{ margin-top: 23px; padding-left: 92px; align-items: center; }
.m_frame .order_table .count{ display: flex; align-items: center; user-select: none; }
.m_frame .order_table .count > div{ width: 30px; height: 30px; padding: 3px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.m_frame .order_table .count > div:active{ opacity: 0.7; transition: .1s linear; }
.m_frame .order_table .count > span{ padding: 0 21px; font-weight: 400;}
.m_frame .order_table .count input{ display: none;}
.m_frame .order_table .buttons{ display: flex; gap: 16px; }
.m_frame .order_table .buttons > *{ margin-top: 20px; height: 40px; flex: 1; border: 1px solid #888888; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #888888; cursor: pointer; }
.m_frame .order_table .buttons > :last-child{ border-color: black; background: black; color: white; }
.m_frame .order_table .checkbox{ display: flex; justify-content: center; align-items: center; user-select: none; }
.m_frame .order_table .checkbox input[type="checkbox"]{ display: none; }
.m_frame .order_table .checkbox label{ width: 20px; height: 20px; display: block; border: 1.5px solid #888888; border-radius: 1px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.m_frame .order_table .checkbox input:checked~label{ background: #000000; border-color: #000000; }
.m_frame .order_table .no_data{ padding-top: 30px; text-align: center; }

/* 정보 테이블 */
.m_frame .info_table{ border-top: 1px solid black; }
.m_frame .info_table li{ padding-top: 21px; padding-bottom: 20px; border-bottom: 1px solid #D6D6D6; display: flex; gap: 51px; line-height: 19px; }
.m_frame .label{ width: 92px; flex-shrink: 0; font-weight: 500; }

/* 페이지네이션 */
.m_frame .page_controller{ padding-top: 60px; display: flex; justify-content: center; align-items: center; }
.m_frame .page_controller > a{ padding: 10px; }
.m_frame .page_controller > a.disabled{ opacity: 0.4; cursor: default; }
.m_frame .page_controller .pagination{ padding: 0 20px 3px; }
.m_frame .page_controller .pagination ul{ display: flex; font-size: 18px; font-weight: 500; color: #BBBBBB; }
.m_frame .page_controller .pagination ul > li:not(:first-child){ margin-left: 10px; }
.m_frame .page_controller .pagination ul > li > *{ padding: 10px; }
.m_frame .page_controller .pagination .on{ color: #000000; }

/* 환불, 반품, 교환 사유 선택창 */
.m_frame .select_box{ 
  position: relative; width: 100%; height: 60px; 
  display: flex; align-items: center; padding-left: 20px; border: 1px solid #000000; 
  cursor: pointer; user-select: none; font-size: 15px; color: #888888;
}
.m_frame .select_box ul{ 
  position: absolute; top: 59px; left: -1px; width: calc(100% + 2px); background: white;
  display: none; font-size: 14px; color: #000000; border: 1px solid #000000; border-top: none;
}
.m_frame .select_box li{ height: 50px; padding: 0 19px; display: flex; align-items: center; }
.m_frame .select_box li:hover{ background: #F4F4F4; }
.m_frame .select_box img{ position: absolute; top: 27px; right: 27px; }
.m_frame .select_box.active ul{ height: 250px; display: block; z-index: 2; overflow-y: scroll; }
.m_frame .select_box.active img{ transform: rotate(180deg); }

/* 이용약관, 개인정보처리방침 */
.m_frame.term .white_board{ padding-top: 60px; padding-bottom: 180px; font-size: 15px; line-height: 27px; }
.m_frame.term .inner > br{ display: none; }
.m_frame.term .inner p > br:first-child{ display: none; }
.m_frame.term .inner p > br:last-child{ display: none; }
.m_frame.term h2{ width: 100%; padding-bottom: 30px; text-align: center; font-size: 21px; font-weight: 500; }
.m_frame.term h2:not(:first-of-type){ padding-top: 90px; }
.m_frame.term h3{ width: 100%; padding-bottom: 60px; text-align: center; font-size: 21px; font-weight: 500; }
.m_frame.term h3:not(:first-of-type){ padding-top: 90px; }
.m_frame.term b{ padding-top: 30px; padding-bottom: 15px; line-height: 19px; }

/* 체크박스 */
input[type="checkbox"]~.check_label{ user-select: none; cursor: pointer; display: flex; align-items: center; }
input[type="checkbox"]~.check_label .checkbox{ width: 20px; height: 20px; border: 1.5px solid #888888; border-radius: 0.5px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
input[type="checkbox"]~.check_label .checkbox img{ display: none; object-fit: cover; }
input[type="checkbox"]:checked~.check_label .checkbox{ background: black; border-color: black; }
input[type="checkbox"]:checked~.check_label .checkbox img{ display: block; }

/* 레이어 프레임 */
.layer_frame{ position: fixed!important; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 10; display: flex; justify-content: center; align-items: center; }
.layer_frame .box { position: relative; padding: 40px; border: 1px solid #DDDDDD; background: white; box-shadow: rgba(0, 0, 0, 0.16) 0px 20px 20px; display: flex; flex-direction: column; }
.layer_frame ul{ list-style: none; }
.layer_frame h3{ font-size: 21px; font-weight: 500; }
.layer_frame button{ border: none; cursor: pointer; }
.layer_frame input{ border: none; outline: none; }
.layer_frame .close{ position: absolute; top: 30px; right: 30px; padding: 10px; display: flex; cursor: pointer; }
.layer_frame .close img{ width: 20px; height: 20px; object-fit: cover; }

/* 약관 레이어 */
.terms_layer .box{ width: calc(100% - 42px); height: 500px; padding: 40px 0; }
.terms_layer .inner_box{ padding: 0 40px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: scroll; }
.terms_layer .head{ display: flex; justify-content: space-between; align-items: center; }
.terms_layer .close{ padding: 5px; position: initial; }
.terms_layer h4{ font-size: 21px; font-weight: 500; }
.terms_layer .contents{ margin-top: 50px; display: flex; flex-direction: column; }
.terms_layer .contents .title{ font-size: 14px; font-weight: 600; }
.terms_layer .contents .title:not(:first-child){ margin-top: 30px; }
.terms_layer .contents p{ margin-top: 10px; line-height: 24px; white-space: pre-line; font-size: 14px; }


/* 결제 진행중 팝업 */
.pg_layer{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 1000; font-style: normal; font-size: 15px; }
.pg_layer .layer_wrap_cont{ position: relative; background: white; border: 1px solid #DDDDDD; padding: 20px; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; align-items: center; }
.pg_layer h4{ font-size: 18px; font-weight: 500; }
.pg_layer .ly_cont{ width: 100%; display: flex; flex-direction: column; }
.pg_layer .ly_cont .escrow_cont{ margin-top: 15px; text-align: center; }
.pg_layer .ly_cont .escrow_cont p{ line-height: 21px; font-size: 14px; } 
.pg_layer .ly_cont .escrow_cont .btn_center_box{ margin-top: 20px; }
.pg_layer .ly_cont .escrow_cont .btn_center_box button{ padding: 10px 20px; border: none; background: black; font-size: 18px; color: white; cursor: pointer; }
.pg_layer .ly_cont .escrow_cont .btn_center_box button:active{ opacity: 0.8; }
.pg_layer .ly_cont .escrow_cont .btn_center_box em{ font-style: normal; }
.pg_layer .ly_cont .btn_pg_box{ width: 100%; margin-top: 10px; display: flex; justify-content: center; }
.pg_layer .ly_cont .btn_pg_box .btn_pg_cancel{ padding: 7px 14px; }
.pg_layer .ly_cont .btn_pg_box .btn_pg_cancel em{ font-style: normal; color: #888888; }
.pg_layer .ly_cont .btn_pg_box .btn_pg_cartmove{ display: none; }
.pg_layer .ly_close{ position: absolute; top: 14px; right: 10px; padding: 6px; }

/* 팝업창 */
.sita_popup .view{ position: relative; width: 100%; line-height: 24px; font-size: 14px; font-weight: 300; color: black; }
.sita_popup .view img{ width: 100%; object-fit: cover; }
.sita_popup .view p{ padding-left: 40px; padding-right: 40px; }
.sita_popup .view p:first-child{ padding-top: 40px; }
.sita_popup .view p:last-child{ padding-bottom: 40px; }
.sita_popup .check{ position: relative; padding: 15px; display: flex; align-items: center; background: white; font-size: 12px; color: #888888;  }
.sita_popup .check input[type="checkbox"]~.check_label .checkbox{ margin-right: 9px; width: 16px; height: 16px; }
.sita_popup .check input[type="checkbox"]{ display: none; }
.sita_popup .check .close{ position: absolute; right: 10px; padding: 5px; border: none; background: none; cursor: pointer; }
.sita_popup .check .close img{ width: 16px; height: 16px; }