@charset "utf-8";
/* *******************************************************
 * filename : order.css
 * description : 장바구니, 주문리스트, 주문폼작성 등 주문에 관련된  CSS
 * date : 2017-05-29
******************************************************** */

/* ******************  SHOP 공통 ********************** */
@media all and (max-width:800px){
	/* 공통 :: 상단 진행과정 바 */
	.process-bar-con > ol > li{padding:0 25px 0 32px; background-position:0 40%}
	.process-bar-con > ol > li .process-icon{float:none; display:inline-block; width:40px; height:40px; line-height:40px;}
	.process-bar-con > ol > li .process-icon i{font-size:18px; line-height:40px; }
	.process-bar-con > ol > li dl{float:none; width:auto; padding-left:0px; padding-top:15px;}
	.process-bar-con > ol > li dl dt{display:none;}
	.process-bar-con > ol > li dl dd{display:block; font-size:13px; }
	/* 공통 :: 타이틀 */
	.order-prd-con-tit{font-size:16px; line-height:24px; margin-bottom:20px; padding-bottom:10px; } 
	/* 공통 :: 수량 제이쿼리 ui */
	.spinner-box .ui-widget.ui-widget-content{height:32px !important;}
	.spinner-box .ui-spinner-input{height:28px; margin:0 29px}
	.spinner-box .ui-spinner a.ui-spinner-button{width:30px; height:30px;}
	/* 공통 :: 버튼 */
	.order-btn-controls button, .order-btn-controls a{width:45%; height:40px; font-size:14px;}
	.order-btn-controls a{line-height:40px;}
	/* 리스트 없을때 */
	.no-order-list{font-size:13px; padding:50px 0;}
}

/* *********************************************************  
### 상품페이지
********************************************************** */
/* ******************   게시판 :: 상품 리뷰(상품뷰페이지)  ********************** */
@media all and ( max-width:800px ){
	.prd-review-list-box .review-row-con .prd-review-subject-con{display:block; width:auto; margin-bottom:10px;}
	.prd-review-list-box .review-row-con .prd-review-writer-info,
	.prd-review-list-box .review-row-con .prd-review-day-info{display:inline-block; width:auto; font-size:12px; color:#aaa;}
	.prd-review-list-box .review-row-con .prd-review-day-info{position:relative; margin-left:15px; }
	.prd-review-list-box .review-row-con .prd-review-day-info:before{position:absolute; top:50%; left:-8px; width:1px; height:10px; margin-top:-5px; background-color:#ddd; content:"";}
}
/* ******************   게시판 :: 상품 문의폼(상품뷰페이지)  ********************** */
@media all and ( max-width:800px ){
	/* 상품문의 답변 리스트 */
	.prd-qna-list-thead{display:none;}
	.prd-qna-list-box .inquiry-row-con{padding:15px 0;}
	.prd-qna-list-question-con li{display:inline-block; text-align:left; width:auto; padding:0; font-size:12px;}
	.prd-qna-list-question-con .number{display:none;}
	.prd-qna-list-question-con .reply-state,
	.prd-qna-list-question-con .question-tit{width:auto; display:block;}
	.prd-qna-list-question-con .question-tit{padding:10px 0; text-indent:0; font-size:14px;}
	.prd-qna-list-question-con .question-date{position:relative; margin-left:15px; }
	.prd-qna-list-question-con .question-date:before{position:absolute; top:50%; left:-8px; width:1px; height:10px; margin-top:-5px; background-color:#ddd; content:"";}
	.prd-qna-list-question-con .question-writer,
	.prd-qna-list-question-con .question-date{color:#aaa;}
	/* 상품 문의 :: 답변내용 */
	.prd-qna-list-answer-con{padding:0; border-top:1px dotted #ccc; margin-top:15px; font-size:13px;}
	.prd-qna-list-answer-con .question-icon, .prd-qna-list-answer-con .answer-icon{float:none;}
	.prd-qna-list-answer-con .qna-list-txt{float:none; width:auto;}
	.qna-question-controls button,.qna-question-controls a{font-size:12px;}
	.prd-answer-lock-con .bbs-password-input-con{padding:25px 0;}
	.prd-answer-lock-con .password-input-tit{margin:0 0 15px 0}
}
/* ******************   게시판 :: 상품 문의, 리뷰 글쓰기(상품뷰페이지)  ********************** */
@media all and ( max-width:800px ){
	.prd-detail-write-wrapper{padding:60px 15px 20px 15px;}
}


/* *********************************************************  
### 마이페이지
********************************************************** */

/* ******************  제품 기본 리스트 ********************** */
@media all and (max-width:800px){
	/* --------   제품 :: 리스트 -------- */
	.shop-prd-item{padding:15px 0 15px 45px;}
	.shop-prd-item .shop-check-box{width:45px;}
	.shop-prd-item .shop-prd-item-info-box{padding-left:10px; width:calc(100% - 130px); }
	.shop-prd-item .shop-prd-item-subject{margin-right:50px}
	.shop-prd-item .shop-prd-item-controls,
	.shop-prd-item .shop-prd-item-right-controls{margin:0 -3px;}
	.shop-prd-item .shop-prd-item-controls .shop-prd-btn{height:30px; min-width:58px; margin:3px !important; position:relative; top:-1px;}
	.shop-prd-item .shop-prd-item-controls a.shop-prd-btn{height:28px; line-height:28px; }
	.shop-prd-item .shop-prd-item-right-controls{float:left;}
	.shop-prd-item .shop-prd-item-right-controls .shop-prd-order-btn{width:90px; font-size:13.5px;}
	.shop-prd-item .shop-prd-delete-btn{top:15px;}
	.no-checkbox-item-list .shop-prd-item .shop-prd-item-subject{margin-right:20px; margin-bottom:10px;}
	.no-checkbox-item-list .shop-prd-item .shop-prd-item-price{position:static; width:auto; margin-top:0;}
}
@media all and (max-width:480px){
	/* --------   제품 :: 리스트 -------- */
	.shop-prd-item .shop-prd-item-thumb{width:60px}
	.shop-prd-item .shop-prd-item-thumb a{padding:0;}
	.shop-prd-item .shop-prd-item-thumb a img{max-width:100%;}
	.shop-prd-item .shop-prd-item-info-box{width:calc(100% - 75px); }
	.shop-prd-item .shop-prd-item-name{font-size:15px; margin-bottom:10px;}
	.shop-prd-item .shop-prd-item-left-controls{float:none;}
	.shop-prd-item .shop-prd-item-right-controls{float:none; margin-top:5px;}
	.no-checkbox-item-list .shop-prd-item .shop-prd-item-price{font-size:16px;}
	/* 리스트 없을때 */
	.no-order-list{font-size:14px;}
	.no-order-list i{font-size:30px; padding-bottom:20px;}
}
@media all and (max-width:359px){
	/* --------   제품 :: 리스트 -------- */
	.shop-prd-item .shop-prd-item-thumb{width:40px}
	.shop-prd-item .shop-prd-item-info-box{width:calc(100% - 55px); }
}

/* ******************  장바구니 ********************** */
@media all and (max-width:800px){
	/* 장바구니 리스트 하단 총금액*/
	.order-prd-detail-price,
	.order-prd-total-price{display:block; width:auto; border-right:0;}
	.order-prd-detail-price{padding-bottom:5px;}
	.order-prd-detail-price dl dd{padding-right:0;}
	.order-prd-total-price{padding-top:10px; border-top:1px solid #ddd;}
	.order-prd-total-price dl{padding-left:0; text-align:right; }
	.order-prd-total-price dl dt,
	.order-prd-total-price dl dd{display:inline-block; float:none;}
	.order-prd-total-price dl dt{margin-right:15px;}
}
@media all and (max-width:480px){
	/* 장바구니 리스트 하단 총금액*/
	.order-prd-total-price-con{padding:15px;}
	.order-prd-detail-price dl{font-size:13px;}
}


/* ******************  적립금 ********************** */
@media all and (max-width:800px){
	.my-point-state-con{border:0; padding:0;}
	.my-point-state{display:block; width:auto; padding:0; border:1px solid #ddd; padding:20px; background-color:#f3f3f3;}
	.point-caution-txt{width:auto; padding:0; margin-top:20px;}
	.point-list-tbl tr{display:block; position:relative; border-bottom:1px solid #ddd; padding:15px 120px 15px 0;}
	.point-list-tbl th{display:none;}
	.point-list-tbl td{display:block; border-bottom:0; text-align:left; padding:0; padding-top:10px; font-size:12px; color:#aaa;}
	.point-list-tbl td:first-child{padding-top:0;}
	.point-list-tbl td.point-txt{font-size:17px; letter-spacing:-0.5px; color:#222;}
	.point-list-tbl td.point-price{position:absolute; width:110px; top:50%; right:0px; text-align:right; font-size:15px; margin-top:-8px; padding-top:0; }
}

/* ******************  쿠폰 (들어갈때만 사용) ********************** */
@media all and (max-width:800px) {
	/* 쿠폰 리스트 */
	.coupon-list-tbl{border-top:1px solid #333;}
	.coupon-list-tbl colgroup,
	.coupon-list-tbl thead{display:none;}
	.coupon-list-tbl tr{position:relative; border-bottom:1px solid #ddd; display:block; padding:15px 15px 15px 120px;}
	.coupon-list-tbl td{padding:0; display:block; border-bottom:0; width:100%; text-align:left;}
	.coupon-list-tbl .coupon-img-con{position:absolute; top:50%; left:0px; display:block; margin-top:-25px}
	.coupon-list-tbl .table-blind-txt{display:inline-block;}
	.coupon-list-tbl .coupon-use-time{display:none;}
	.coupon-down-btn{width:100px; height:30px; line-height:30px; font-size:12px; text-align:center; border-width:2px; margin-top:10px;}
}
@media all and (max-width:480px) {
	/* 쿠폰 탭 */
	.coupon-tab-list > ul > li{display:block; float:left; width:50%;}
	.coupon-tab-list > ul > li a{font-size:13px;}
	/* 쿠폰 리스트 */
	.coupon-list-tbl tr{padding-left:85px}
	.coupon-list-tbl td{font-size:13px;}
	.coupon-list-tbl td .coupon-img-box{width:70px; height:36px; background-size:70px auto}
	.coupon-list-tbl td .coupon-img-box .percent-num{width:25px; font-size:18px; top:6px; left:3px;}
	.coupon-list-tbl td .coupon-info-box dt{font-size:16px;}
	/* 쿠폰 등록 */
	#couponRegisterContent .coupon-register-txt{font-size:15px;}
	#couponRegisterContent .coupon-register-input-box input{height:30px}
}


/* *********************************************************  
### 주문 관련
********************************************************** */
/* ******************  주문폼작성 ********************** */
@media all and (max-width:800px){
	/* 주문서 작성 */
	.order-form-tbl th,.order-form-tbl td{display:block; padding:0;}
	.order-form-tbl th{width:auto; text-indent:0; margin-bottom:10px}
	/* 결제수단 :: 결제방법선택 */
	.order-payment-select-con, .order-payment-final-price-con{float:none; width:auto; margin-right:0;}
	.order-payment-select-con .order-payment-list{margin-bottom:15px;}
	.order-payment-content{min-height:auto;}
	.payment1-con{padding:30px 15px; font-size:13px;}
	/* 결제수단 :: 최종금액 */
	.order-payment-final-price-con{margin-top:15px;}
}
@media all and (max-width:480px){
	/* 비회원 주문동의 */
	.nonmember-agree-con  h4{font-size:16px; line-height:24px; padding:10px 0}
	.nonmember-agree-con  h4 br{display:block;}
	/* 주문서 작성 :: 결제정보 */
	.order-form-tbl .point-use-form{position:relative;}
	.order-form-tbl .point-use-form .input-basic{width:40% !important;}
	.order-form-tbl .my-point-check{position:absolute; top:0px; right:0px;;display:block; max-width:80px; margin-top:10px;}
	.order-form-tbl .order-total-point{line-height:40px; display:inline-block;}
	/* 결제수단 :: 결제방법선택 */
	.order-payment-select-con .order-payment-list li label{padding:0 7px;}
	.order-payment-select-con .order-payment-list li label strong{font-size:13px;}
	.order-payment-select-con .order-payment-list li label i{font-size:18px; left:5px; margin-top:-9px;}
	.order-payment-final-price-con .order-payment-final-detail-price{padding:20px 15px;}
	.order-payment-final-price-con dl{font-size:13px; }
	.order-payment-final-price-con .total-price{font-size:15px;}
	.to-order-agree-txt{font-size:14px;}
	.to-order-controls .to-order-btn{font-size:17px;}
}

/* ******************  주문 내역보기 ********************** */
@media all and (max-width:480px){
	.order-list-term-search {width:auto; float:none;}
	.order-list-term-search select{max-width:none;}
}

/* ******************  주문완료 페이지 ********************** */
@media all and (max-width:800px){
	#orderComplete{border:0; padding-top:0}
	.order-finish-txt{font-size:20px; padding-bottom:20px}
	.order-finish-txt span{font-size:13px;}
	.order-finish-txt span br{display:block;}
	.order-num-box dt,.order-num-box dd{display:block; font-size:15px;}
	.order-num-box dt{margin-right:0; margin-bottom:10px;}
}

/* *********************************************************  
### 마이페이지 인덱스
********************************************************** */
@media all and (max-width:800px){
	/* 마이페이지 상단 :: 문구 */
	#mypageTopCon{padding:15px 0;}
	#mypageTopCon p{font-size:14px; line-height:1.5}
	#mypageTopCon p br{display:block;}
	/* 마이페이지 상단 :: 주문처리 현황 */
	#mypageOrderState{padding:25px 0 20px;}
	#mypageOrderState .my-order-state-list li dl{padding-top:30px;}
	#mypageOrderState .my-order-state-list li dl:before{height:20px; margin-top:-20px;}
	#mypageOrderState .my-order-state-list li dl dt{font-size:13px;}
	#mypageOrderState .my-order-state-list li dl dd{font-size:22px; }

	/* 마이페이지 상단 :: 타이틀 */
	.shop-mypage-tit{font-size:18px;}
}
@media all and (max-width:480px){
	/* 마이페이지 상단 :: 주문처리 현황 */
	#mypageOrderState .my-order-state-list{margin:0 -15px;}
	#mypageOrderState .my-order-state-list li dl dt{font-size:12px;}
}