@charset "utf-8";

/* 글로벌 스타일 */
.active_button{ user-select: none; }
.active_button:active{ opacity: 0.7; transition: .1s; }
/*.dn{display:none !important;}*/

/* 마이페이지 Frame */
.mypage_frame{ padding-top: 100px; background: #F4F4F4; font-size: 15px; }
.mypage_frame ul{ list-style: none ;}
.mypage_frame .inner{ padding: 0 5%; display: flex; flex-direction: column; align-items: center; }
.mypage_frame > h3{ width: 100%; padding: 100px 0; text-align: center; font-size: 30px; font-weight: 500; }
.mypage_frame .white_board{ background: white; padding-bottom: 300px; }
.mypage_frame .button_plain{ background: white; border: 1px solid #888888; color: #888888; font-size: 18px; }
.mypage_frame .button_black{ background: black; border: 1px solid black; color: white; font-size: 18px; }
.mypage_frame button{ cursor: pointer; }


/* 마이페이지 Order 테이블 */
.mypage_frame .order_table{ width: 100%; }
.mypage_frame .order_table .thead{ padding: 21px 0 20px; text-align: center; font-weight: 500; }
.mypage_frame .order_table .row{ display: flex; }
.mypage_frame .order_table .row > :nth-child(1){ width: 130px; }
.mypage_frame .order_table .row > :nth-child(2){ width: 300px; }
.mypage_frame .order_table .row > :nth-child(3){ flex: 1; }
.mypage_frame .order_table .head{ padding: 11px 10px; border-top: 1px solid #000000; display: flex; font-size: 14px; }
.mypage_frame .order_table .head span{ padding-left: 10px; }
.mypage_frame .order_table .head-no{ padding-left: 41px; }
.mypage_frame .order_table .detail{ min-height:150px/*120px*/; padding: 15px 0; border-top: 1px solid #C7C7C7; }
.mypage_frame .order_table .detail > *{ display: flex; align-items: center; }
.mypage_frame .order_table .detail .product_img{ align-items: flex-start; }
.mypage_frame .order_table .detail .product_img img{ width: 90px; height: 90px; margin-left: 10px; }
.mypage_frame .order_table .detail .info{ padding-left: 10px; flex-direction: column; justify-content: center; align-items: flex-start; }
.mypage_frame .order_table .detail .info > :first-child{ margin-bottom: 6px; font-weight: 500; }
.mypage_frame .order_table .detail .info .option{ padding-top: 6px; font-size: 13px; color: #888888; font-weight: 500; }
.mypage_frame .order_table .detail .status{ position: relative; flex-direction: column; justify-content: center; font-weight: 600; }
.mypage_frame .order_table .detail .status a{ margin-top: 6px; text-decoration: underline; font-weight: 400; color: #2D64AA; }
.mypage_frame .order_table .detail .status .status_link{ text-decoration: none; color: black; font-weight: bold; }
.mypage_frame .order_table .detail .status .status_link:hover{ text-decoration: underline; }
.mypage_frame .order_table .detail .buttons{ position: absolute; right: 10px; display: flex; flex-direction: column; align-items: center; }
.mypage_frame .order_table .detail .buttons a{ 
  width: 150px; height: 40px; display: flex; justify-content: center; align-items: center; 
  border: 1px solid #888888; background: white; 
  font-size: 14px; font-weight: 400; color: #888888; text-decoration: none; 
}
.mypage_frame .order_table .detail .buttons a:last-child{ margin-top: 6px; }
.mypage_frame  .checkbox{ position: relative; display: flex; justify-content: center; align-items: center; }
.mypage_frame  .checkbox input[type="checkbox"]{ display: none; }
.mypage_frame  .checkbox img{ position: absolute; left: 4px; top: 6.5px; cursor: pointer; }
.mypage_frame  .checkbox label{ width: 20px; height: 20px; display: block; border: 1.5px solid #888888; border-radius: 1px; cursor: pointer; }
.mypage_frame  .checkbox input:checked~label{ background: #000000; border-color: #000000; }
.mypage_frame .order_table .detail .count{ display: flex; justify-content: center; align-items: center; }
.mypage_frame .order_table .detail .count > div{ width: 30px; height: 30px; cursor: pointer; }
.mypage_frame .order_table .detail .count > div:active{ opacity: 0.7; transition: .1s linear; }
.mypage_frame .order_table .detail .count > span{ padding: 0 21px; font-weight: 400;}
.mypage_frame .order_table .no_data{ padding-top: 60px; text-align: center; }


/* 환불요청, 반품요청, 교환요청 테이블 */
.mypage_frame .regist_table .row > :nth-child(1){ width: 130px; }
.mypage_frame .regist_table .row > :nth-child(2){ width: initial; flex: 1; }
.mypage_frame .regist_table .row > :nth-child(3){ width: 120px; flex: initial; }
.mypage_frame .regist_table .row > :nth-child(4){ width: 120px; margin-left: 12px; flex: initial; }
.mypage_frame .regist_table .row > :nth-child(5){ width: 120px; margin-left: 12px; flex: initial; }
.mypage_frame .regist_table .count input{ display: none; }
.mypage_frame .regist_table .count,
.mypage_frame .regist_table .choice{ display: flex; justify-content: center; align-items: center; user-select: none; }

/* 환불, 반품, 교환 내역 리스트 */
.mypage_frame .cancel_table .row > :nth-child(1){ width: 130px; }
.mypage_frame .cancel_table .row > :nth-child(2){ width: initial; flex: 1; }
.mypage_frame .cancel_table .row > :nth-child(3){ width: 120px; flex: initial; }
.mypage_frame .cancel_table .row > :nth-child(4){ width: 264px; flex: initial; }
.mypage_frame .cancel_table .reason{ display: flex; justify-content: center; align-items: center; font-weight: 400; }


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


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


/* 결제정보 테이블 */
.mypage_frame .payment_table{ margin-top: 9px; width: 100%; border-top: 1px solid #000000; display: flex; flex-direction: column; }
.mypage_frame .payment_table li{ padding: 21px 0 20px; border-bottom: 1px solid #C7C7C7; display: flex; align-items: center; }
.mypage_frame .payment_table li > *{ flex: 1; display: flex; }
.mypage_frame .payment_table .total{ font-weight: 600; color: #2D64AA; }
.mypage_frame .payment_table .label{ width: 140px; padding-left: 10px; flex-shrink: 0; display: inline-block; color: #000000; font-weight: 500; }



/* New 프레임 */
.new_frame{ background: #f4f4f4; display: flex; flex-direction: column; font-size: 15px; }
.new_frame ul{ list-style: none; }
.new_frame h3{ font-size: 30px; font-weight: 500; }
.new_frame button{ border: none; cursor: pointer; }
.new_frame input{ border: none; outline: none; }
.new_frame .first{ margin-top: 100px; }
.new_frame .panel{ padding: 100px 0; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: 500; }
.new_frame .white_board{ background: white; }
.new_frame .inner{ width: 100%; padding: 0 5%; display: flex; flex-direction: column; }
.new_frame .hidden{ display: none; }



/* 이용약관, 개인정보처리방침 */
.new_frame.term .white_board{ padding-bottom: 180px; font-size: 15px; line-height: 27px; }
.new_frame.term .inner{ padding-top: 120px; }
.new_frame.term .inner > br{ display: none; }
.new_frame.term .inner p > br:first-child{ display: none; }
.new_frame.term .inner p > br:last-child{ display: none; }
.new_frame.term h2{ padding-bottom: 30px; font-size: 30px; font-weight: 500; }
.new_frame.term h2:not(:first-of-type){ padding-top: 90px; }
.new_frame.term h3{ padding-bottom: 60px; font-size: 30px; font-weight: 500; }
.new_frame.term h3:not(:first-of-type){ padding-top: 90px; }
.new_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; cursor: pointer; }
.layer_frame .close img{ width: 20px; height: 20px; object-fit: cover; }

/* 약관 레이어 */
.terms_layer .box{ width: 600px; height: 670px; padding: 40px 0; overflow: hidden; }
.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{ position: initial; }
.terms_layer h4{ font-size: 21px; font-weight: 500; }
.terms_layer .contents{ margin-top: 60px; 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: 13px; } 
.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: 15px; 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: 6px; 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: 60px; }
.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; }