@import url('sub.css'); 




/********** ## 장바구니 **********/
.order_table {width:100%; border-collapse:separate; border-spacing:0; border-top:2px solid var(--black); text-align:center;}
.order_table th {font-weight: 500; letter-spacing: -0.045rem; color:var(--black); padding:14px 0 17px; border-bottom:1px solid #bbb; box-sizing:border-box;}
.order_table td {padding:15px 20px; box-sizing:border-box; border-bottom:1px solid var(--border);}
.order_table td:first-of-type {padding-left:0; padding-right:0;}
.order_table td.left {padding-left:10px;}
.order_table td .prd_img {display:block;width: 5vw;overflow: hidden;/* aspect-ratio: 3 / 2.0954; */margin-right:15px;}
.order_table td .prd_img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.order_table td .pc_line {display:flex; flex-wrap:wrap; align-items:center;}
.order_table td.book_tit {padding-top:23px; padding-bottom:23px;}
.order_table td.book_tit .pc_line {justify-content:center;}
.order_table td .b_smbtn {margin-left:6px; display:block; width: 50px; height: 30px; background:var(--black); color:var(--white); border:1px solid var(--black); box-sizing:border-box; text-align:center;  font-size: 14px; font-weight: 600; letter-spacing: -0.56px; line-height:28px; transition:all 0.3s ease;}
.order_table td .b_smbtn:hover {background:var(--white); color:var(--black); transition:all 0.3s ease;}
.order_table td .tit {display:flex; flex-wrap:wrap; align-items:center; letter-spacing: -0.045rem; color: var(--black);}

.order_table td .funBtn {display:flex; flex-wrap:nowrap; }
.order_table td .funBtn a {width:calc((100% - 2px) / 2); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height: 38px; margin-right:2px; border-radius: 5px; border:1px solid rgba(119,119,119,0.5); background:var(--white);  letter-spacing: -0.64px; box-sizing:border-box; color:rgba(34,34,34,0.5); font-weight: 500; font-size:var(--fs16); transition:all 0.4s ease;  min-width:75px;}
.order_table td .funBtn a:last-of-type {margin-right:0;}
.order_table td .funBtn a:hover {border:1px solid var(--black); color:var(--black); transition:all 0.4s ease;}

.order_table td.book_tit {color: var(--black); letter-spacing: -0.045rem;}
.order_table td .prompt_ic {display:inline-block; margin-right:6px;}
.order_table td .prompt_ic::before {content:'\f4f6'; font-family:var(--icon); padding:2px 3px; box-sizing:border-box; background:rgba(119,119,119,0.5); border-radius: 5px; font-style:normal; color:var(--white); font-size:15px;}
.order_table td .wdate_input {position:relative; }
.order_table td .wdate_input::before {content:'\ebcc'; font-size:20px; color:rgba(28,27,31,0.5);  font-family:var(--icon); position:absolute; right:15px; top:50%; transform:translateY(-50%);}


.order_table td .mo_line {display:none !important;}

.order_total_price {border: 3px solid var(--black); display:flex; flex-wrap:wrap; padding:12px 0; box-sizing:border-box; margin:30px 0 0;}
.order_total_price dl {width:33.33%; border-right: 1px solid rgba(221, 221, 221, 0.87); padding:18px 60px; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between;}
.order_total_price dl:last-of-type {border-right:0;}
.order_total_price dl dt {letter-spacing: -0.045rem; color:rgba(34,34,34,0.7);}
.order_total_price dl dd {font-weight: 500;}
.order_total_price dl dd.black {color:var(--black);}
.order_total_price dl dd.red {color:#BF2626;}
.order_total_price dl dd.total {color:var(--main); font-size:1.222rem; font-weight:700;}
.order_total_price dl.last dt {font-weight: 500; font-size:var(--fs20);}


.order_btn {position:relative; display:flex; justify-content:center; flex-wrap:Wrap; justify-content:space-between; width:100%; margin:45px 0 0;}
.order_btn li {display:flex; flex-wrap:Wrap;   justify-content:center; }
.order_btn li.left {position:absolute; top:0; left:0;}
.order_btn li.center {width:100%;}
.order_btn li.right {position:absolute; top:0; right:0;}

.order_btn .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:178px; height:60px; font-weight: 500; letter-spacing: -0.045rem; border-radius: 5px; margin-right:4px; transition:all 0.4s ease;}
.order_btn .btn:last-of-type {margin:0;}

.order_btn .btn.ver_w {border: 1px solid var(--border); background:var(--white); color:rgba(34,34,34,0.5);}
.order_btn .btn.ver_w:hover {border:1px solid var(--black); color:var(--black); transition:all 0.4s ease;}
.order_btn .btn.ver_li {border: 1px solid var(--main); background:var(--white); color:var(--main);}
.order_btn .btn.ver_li:hover {border:1px solid var(--sub); background:var(--sub); color:var(--white); transition:all 0.4s ease;}
.order_btn .btn.ver_b {border: 1px solid var(--main); background: var(--main); color:var(--white);}
.order_btn .btn.ver_b:hover {background: var(--white); color:var(--main); transition:all 0.4s ease;}
/********** ## 장바구니 **********/



/********** ## 주문확인 및 결제 **********/
.pay_table {display:flex; flex-wrap:wrap; justify-content:space-between;}
.pay_table .fs20 {color:var(--black); margin:40px 0 13px;}
.pay_table .fs20.space {display:flex; flex-wrap:wrap; justify-content:space-between;}
.pay_table .fs20.mart0 {margin-top:0;}
.pay_table .fs20 a {font-size: var(--fs16); font-weight: 500; line-height:175%; letter-spacing: -0.64px; padding:8px 13px; border-radius: 5px; border: 1px solid var(--main); box-sizing:Border-box; color:var(--main);}

.pay_left {padding:37px 35px; box-sizing:Border-box; border:1px solid var(--border); width:calc(100% - 460px);}
.pay_left .btn {width:95px; height:45px; font-weight: 500; letter-spacing: -0.045rem; font-size:var(--fs16); border:1px solid var(--main); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; box-sizing:border-box;}
.pay_left .btn.ver_w {background:var(--white); color:var(--main); border-radius:5px 0 0 5px;}
.pay_left .btn.ver_b {background:var(--main); color:var(--white); border-radius:0 5px 5px 0;}

.pay_table .order_table td.left {padding-left:0;}
.pay_table .order_table td.last {padding-right:0;}



.coupon_point_list {display:flex; flex-wrap:wrap; justify-content:space-between; /* margin:40px 0 0; */}
.coupon_point_list .no_txt {font-size:var(--fs16); font-weight: 400; line-height:175%; letter-spacing: -0.04rem; color:var(--main); margin:13px 0 0;}
.coupon_point_list > div {width:calc((100% - 40px) / 2);}
.coupon_point_list .fs20 {display:flex; flex-wrap:wrap; }
.coupon_point_list .fs20 p {margin-left:10px; font-size:1rem; color:var(--basic); letter-spacing: -0.045rem;}
.coupon_point_list .fs20 p span {color:var(--main); letter-spacing:inherit;}
.coupon_point_list .input_cont {width:100%; display:flex; flex-wrap:Wrap;}
.coupon_point_list .input {border-radius:5px 0 0 5px;}
.coupon_point_list .coupon .input {width:calc(100% - 185px);}
.coupon_point_list .coupon .btn.ver_w {margin-left:-5px;}
.coupon_point_list .point .input {width:calc(100% - 95px);}

.delivery_info {border-top:2px solid var(--black); display:flex; flex-wrap:wrap;}
.delivery_info dl {width:100%; display:flex; flex-wrap:wrap; border-bottom:1px solid var(--border); box-sizing:border-box;}
.delivery_info dl.w50 {width:50%;}
.delivery_info dl dt {width:130px; background: var(--gray_opa7); padding:12px 20px; box-sizing:border-box; font-weight: 500;  letter-spacing: -0.045rem; color:var(--black);}
.delivery_info dl dd {width:calc(100% - 130px); padding:12px 20px; box-sizing:border-box; letter-spacing: -0.045rem; color:rgba(34,34,34,0.7);}

.pay_way_list {
	display:flex; flex-wrap:wrap; 
/*	justify-content:space-between;*/
/* 수정_240812 */
	justify-content: flex-start;
	gap: 5px;
}
.pay_way_list li {position:relative; width:calc((100% - 20px) / 5);}
.pay_way_list li:last-of-type {margin-right:0;}
.pay_way_list input[type="radio"] {display:block; width:100%; height:100%; position:absolute; top:0; left:0; margin:0; cursor:pointer; line-height:45px;  border:0; background:transparent; margin:0 !important;}
.pay_way_list label {display:block; width:100%; height:100%; line-height:45px; color:rgba(34,34,34,0.7); border:1px solid var(--border); box-sizing:border-box;  text-align:center; margin-left:0; border-radius:5px; font-size: var(--fs16); font-weight: 500; letter-spacing: -0.64px; color:rgba(34,34,34,0.6); cursor:pointer;}
.pay_way_list input[type="radio"]:checked {}
.pay_way_list input[type="radio"]:checked + label {position:relative; background:var(--main); color:var(--white); border:1px solid var(--main); z-index:10;}


.pay_table .pay_right {width:430px;}
.pay_table .pay_right .fs20 {margin-top:0;}
.pay_table .pay_right .right_fixed {position:sticky; top:20px; border:1px solid var(--border); padding:35px; box-sizing:border-box; transition:all 1s ease;}
.pay_table .pay_right .right_fixed.scrolling_up {top:166px; transition:all 1s ease;}
.pay_table .pay_right .right_fixed .total_price {margin:10px 0 0; background: var(--gray_bg); padding:25px 30px;}
.pay_table .pay_right .right_fixed .total_price dl {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 5px;}
.pay_table .pay_right .right_fixed .total_price dl dt {letter-spacing: -0.045rem; color:rgba(34,34,34,0.7);}
.pay_table .pay_right .right_fixed .total_price dl dd {font-weight: 500; letter-spacing: -0.045rem;}
.pay_table .pay_right .right_fixed .total_price dl dd.red {color:#BF2626;}
.pay_table .pay_right .right_fixed .total_price dl.last_total {padding-top:16px; margin-top:17px; border-top:1px solid var(--border); margin-bottom:0;}
.pay_table .pay_right .right_fixed .total_price dl.last_total dt {color: var(--black);}
.pay_table .pay_right .right_fixed .total_price dl.last_total dd {font-weight: 700; color: var(--main); font-size:1.222rem;}
.pay_table .pay_right .right_fixed .btnList {display:flex; flex-wrap:wrap; justify-content:space-between; margin:20px 0 0;}
.pay_table .pay_right .right_fixed .btnList a {width:calc(50% - 2px); height:60px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; box-sizing:border-box; border-radius: 5px; font-weight: 500; letter-spacing: -0.045rem; transition:all 0.4s ease;}
.pay_table .pay_right .right_fixed .btnList a::before {font-size:22px; display:block; font-weight:400; font-family:var(--icon); margin-right:15px; transition:all 0.4s ease;}

.pay_table .pay_right .right_fixed .btnList a.btn_cancle {border:1px solid var(--main); background:var(--white); color:var(--main); transition:all 0.4s ease;}
.pay_table .pay_right .right_fixed .btnList a.btn_cancle::before {display:none;}

.pay_table .pay_right .right_fixed .btnList a.btn_pay {border:1px solid var(--main); background:var(--main); color:var(--white); transition:all 0.4s ease;}
.pay_table .pay_right .right_fixed .btnList a.btn_pay::before {content:'\e323'; color:var(--white);}
.pay_table .pay_right .right_fixed .btnList a.btn_pay.pay_ok::before {display:none;}


.pay_ok_cont {padding:35px; box-sizing:border-box; display:flex; flex-wrap:Wrap;  background: var(--gray_opa7);}
.pay_ok_cont .check {width:80px; height:80px; background: var(--main); border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.pay_ok_cont .check::before {content:'\e5ca'; font-size:60px; color:var(--white); font-family:var(--icon);}
.pay_ok_cont .check_list {padding-left:30px; box-sizing:border-box; width:calc(100% - 80px);}
.pay_ok_cont .check_list h4 {font-size: var(--fs20); font-weight: 500; line-height:160%; letter-spacing: -0.05rem; color:var(--black); margin:0 0 3px;}
.pay_ok_cont .check_list .dots {letter-spacing: -0.045rem; padding-left:10px; box-sizing:border-box; position:relative;  margin:0 0 3px;}
.pay_ok_cont .check_list .dots:last-of-type {margin:0;}
.pay_ok_cont .check_list .dots::before {content:''; width: 4px; height: 4px; background:var(--black); opacity:0.3; position:absolute; top:13px; left:0;}
/********** ## 주문확인 및 결제 **********/





/* 임시 수정_240822 */
.coupon_point_list.type2 {
	display:flex; 
	flex-wrap:wrap; justify-content:left; 
	flex-wrap: wrap;
	gap: 8px;
} 
.coupon_point_list.type2 .no_txt { flex-basis: 100%;  text-align: left; }
.coupon_point_list.type2 > div {  width:auto;   }
.coupon_point_list.type2 .fs20 {display:inline-flex; flex-wrap:wrap; margin: 0;align-items: center;flex: 1 1 10%;}
.coupon_point_list.type2 .fs20 p { white-space: nowrap }
.coupon_point_list.type2 .input_cont {  width:auto; display:flex; flex-wrap:Wrap;   }
.coupon_point_list.type2 .coupon{width:auto;flex: 3 1;}
.coupon_point_list.type2 .coupon .input_cont{ min-width: 21em;}
.coupon_point_list.type2 .coupon .input { display: inline-flex; /*! width:auto; */flex: 1;}
.coupon_point_list.type2 .coupon .input  input{ flex:1 }
.coupon_point_list.type2 .point{ flex:2 1;display: inline-flex;gap: 8px;}
.coupon_point_list.type2 .point .input_cont *:not(input):not(a) {   
	min-width: 7em; 
	display: inline-flex;
	align-items: center;
	justify-content: right;
	min-height: calc(1.75em * 1.5);
	/* background-color: var(--gray_bg); */
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 2px 8px;
	color: #BF2626;
	font-weight: 600;
}
/* 임시 추가_240822 */
.order_table tr:has( + tr > td[colspan="4"]) td{ border-bottom: 0; }





/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


/********** ## 장바구니 **********/
.order_total_price dl {padding:15px 30px;}
.order_total_price dl dd {width:100%;}
/********** ## 장바구니 **********/


.delivery_info dl.w50 {width:100%;}
.coupon_point_list > div {width:100%;}

.pay_way_list {justify-content:flex-start;}
.pay_way_list li {width:calc((100% - 10px) / 3); /* margin-right:5px; margin-bottom:5px; */ } /* 수정_240812 */
.pay_way_list li:nth-of-type(3n) {margin-right:0;}


.pay_ok_cont .check {width:60px; height:60px;}
.pay_ok_cont .check::before {font-size:40px;}
.pay_ok_cont .check_list {width:calc(100% - 60px);}




}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 



/********** ## 장바구니 **********/
.order_table colgroup {display:none !important;}
.order_table th {display:none !important;}
.order_table .pc_line {display:none !important;}
.order_table td {padding:0 !important; width:100%;}
.order_table td .mo_line {position:relative; display:flex !important; flex-wrap:wrap; align-items:flex-start;  width:100%; padding:15px 0;}
/* .order_table td .mo_line .prd_img {width:100%; padding:15px; box-sizing:border-box; border-bottom:1px solid var(--border); margin-right:0;}
.order_table td .mo_line h4 {padding:13px 15px; background:var(--gray_bg); position:relative;  padding-right:75px;}
.order_table td .b_smbtn {position:absolute; right:15px; top:50%; transform:translateY(-50%); margin-left:0; font-size:12px; height:26px; line-height:24px; width:45px;}
.order_table td .mo_line dl {border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap;}
.order_table td .mo_line dl:last-of-type {border-bottom:0;}
.order_table td .mo_line dl dt {border-right:1px solid var(--border); width:90px; box-sizing:Border-box; padding:10px;}
.order_table td .mo_line dl dd {width:calc(100% - 90px); box-sizing:Border-box; padding:10px;}
.order_table td .mo_line dl.last dd {width:100%;} */

.order_table td .prd_img {position:relative; margin-right:0;}
.order_table td .prd_img input {position:absolute; top:4px; left:4px;}
.order_table td .prd_info {position:relative; width:calc(100% - 90px); box-sizing:border-box; padding-left:20px; padding-right:100px;}
.order_table td .prd_info dl.last  {display:block; width:90px; position:absolute; right:0; top:50%; transform:translateY(-50%); }
.order_table td .prd_info h4 {display:flex; flex-wrap:wrap;}
.order_table td .b_smbtn {width:42px; height:26px; line-height:25px; font-size:12px;}
.order_table td .prd_info h4 a.tit {font-size:1rem; color:var(--black); font-weight: 500; letter-spacing: -0.045rem;}
.order_table td .prd_info dl {display:flex; flex-wrap:wrap; align-items:center; }
.order_table td .prd_info dl dt {margin-right:10px; color: var(--black); letter-spacing: -0.045rem;}
.order_table td .prd_info dl dd {letter-spacing: -0.045rem;}
.order_table td .funBtn {display:block;}
.order_table td .funBtn a {width:100%; margin:0 0 2px; height:32px;}
.order_table td .funBtn a:last-of-type {margin:0;}

.order_table td .wdate_input {margin:5px 0 0;}
.pay_table .order_table td .prd_info {padding-right:0;}
.order_table td.book_tit .prd_info {width:100%;}

.order_total_price dl {padding:10px 15px;}
.order_total_price dl dd {width:100%;}
.order_btn .btn {width:140px; height:54px;}
/********** ## 장바구니 **********/



.pay_left {width:100%; margin:0 0 40px; padding:30px;}
.pay_left .btn {height:40px;}
.pay_table .pay_right {width:100%;}
.pay_table .pay_right .right_fixed {padding:30px;}
.order_table td.book_tit .mo_line {text-align:left;}
.order_table td.book_tit .mo_line h4 {padding-right:15px; text-align:left;}
.order_table td .prompt_ic::before {font-size:11px; padding:1px 2px;}

.pay_table .pay_right .right_fixed .btnList a {height:50px;}

.pay_ok_cont {}
.pay_ok_cont .check {width:50px; height:50px;}
.pay_ok_cont .check::before {font-size:30px;}
.pay_ok_cont .check_list {width:calc(100% - 50px); }



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 



/********** ## 장바구니 **********/
.order_table td .mo_line {padding:10px 0;}
.order_table td .prd_img {width:70px;}
.order_table td .prd_info {position:relative; width:calc(100% - 70px); box-sizing:border-box; padding-left:15px; padding-right:85px;}
.order_table td .prd_info dl.last  {display:block; width:75px; position:absolute; right:0; top:50%; transform:translateY(-50%); }
.order_table td .prd_info h4 {display:flex; flex-wrap:wrap;}
.order_table td .b_smbtn {width:42px; height:26px; line-height:25px; font-size:12px; margin-left:0; }
.order_table td .prd_info h4 a.tit {width:100%; font-size:1rem; color:var(--black); font-weight: 500; letter-spacing: -0.045rem;}
.order_table td .prd_info dl {display:flex; flex-wrap:wrap; align-items:center; }
.order_table td .prd_info dl dt {margin-right:10px; color: var(--black); letter-spacing: -0.045rem;}
.order_table td .prd_info dl dd {letter-spacing: -0.045rem;}
.order_table td .funBtn {display:block;}
.order_table td .funBtn a {width:100%; margin:0 0 2px; height:28px; font-size:12px; line-height:1;}
.order_table td .funBtn a:last-of-type {margin:0;}

.order_table td .wdate_input::before {font-size:17px; right:12px;}

/* 추가_240812 */
.order_table td .prd_img { display: none }
.order_table td .prd_info { width:calc(100% - 0px); padding-left:0px; }

.order_total_price {padding:15px 0; margin:20px 0 0;}
.order_total_price dl {width:100%; padding:0 22px; border-right:0; margin:0 0 1px; box-sizing:border-box;}
.order_total_price dl dd {width:auto; font-size:1.142rem;}
.order_total_price dl.last {padding-top:10px; margin-top:12px; border-top:1px solid var(--border);}
.order_total_price dl.last dt { font-size:1.142rem; color:var(--black);}
.order_total_price dl.last dd {font-weight: 700; font-size:1.285rem;}

.order_btn {margin:25px 0 0;}
.order_btn .btn {width:100px; height:42px;}
.order_btn li.left {position:relative !important; order:2; display:none;}
.order_btn li.center {order:1; margin:0 0 10px;}
.order_btn li.right {position:relative !important; order:3;}
/********** ## 장바구니 **********/

.pay_table .fs20 {margin:20px 0 7px;}
.pay_table .fs20 a {padding:4px 8px;}
.pay_left {width:100%; margin:0 0 40px; padding:10px 15px;}
.pay_left .btn {height:36px; width:75px;}
.pay_table .pay_right {width:100%;}
.pay_table .pay_right .right_fixed {padding:10px 15px;}
.coupon_point_list .coupon .input {width:calc(100% - 145px);}
.coupon_point_list .point .input {width:calc(100% - 75px);}
.coupon_point_list .no_txt {margin:7px 0 0;}
.pay_way_list input[type="radio"] {line-height:34px;}
.pay_way_list label {line-height:34px; font-size:12px;}

.delivery_info dl dt {width:100%; padding:7px 9px; font-size:13px;}
.delivery_info dl dd {width:100%; padding:7px 9px; font-size:13px;}


.pay_table .pay_right .right_fixed .btnList a {height:44px;}
.pay_table .pay_right .right_fixed .total_price {padding:15px 0;}
.pay_table .pay_right .right_fixed .total_price dl {padding:0 22px; box-sizing:border-box; margin:0 0 1px;}
.pay_table .pay_right .right_fixed .total_price dl.last_total {padding-top:10px; margin-top:12px;}
.pay_table .pay_right .right_fixed .total_price dl dd {width:auto; font-size:1.142rem;}
.pay_table .pay_right .right_fixed .total_price dl.last {padding-top:10px; margin-top:12px; border-top:1px solid var(--border);}
.pay_table .pay_right .right_fixed .total_price dl.last dt { font-size:1.142rem; color:var(--black);}
.pay_table .pay_right .right_fixed .total_price dl.last dd {font-weight: 700; font-size:1.285rem;}
.pay_table .pay_right .right_fixed .btnList {margin:15px 0 0;}

.pay_table .pay_right .right_fixed .btnList a::before {font-size:18px; margin-right:5px;}


.pay_ok_cont {position:relative; padding:15px 20px;}
.pay_ok_cont .check {width:20px; height:20px; position:absolute; top:16px; left:20px; }
.pay_ok_cont .check::before {font-size:15px; width:20px; height:20px; text-align:center; line-height:20px;}
.pay_ok_cont .check_list {width:100%; padding-left:0;}
.pay_ok_cont .check_list h4 {padding-left:25px; box-sizing:border-box; font-size:1.142rem;}
.pay_ok_cont .check_list .dots::before {width:2px; height:2px; top:10px;}



}