@charset "utf-8";


/* =================================
*   마이페이지
*   2021-01-15 작성
================================== */


/* =======================================================
	마이페이지 메인
========================================================*/
.fm--mypage {background-color: #f5f5f5; }
.fm--mypage .page-header {display: none; }

.mypage-header {border: 1px solid #ccc; border-width: 0 0 1px 0; background-color: #fff; }

.mypage-header .mypage-user {padding: 20px 15px; box-sizing: border-box; }
.mypage-header .mypage-user:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.mypage-header .mypage-user .user {float: left; font-size: 22px; font-weight: 400; color: #222; }
.mypage-header .mypage-user .user strong {font-weight: 700; }
.mypage-header .mypage-user .btn-goto {float: right; margin-top: 12px; }

.mypage-util {display: table; table-layout: fixed; border-top: 1px solid #ddd; padding: 20px 0; }
.mypage-util ul {display: table-row; }
.mypage-util li {display: table-cell; width: 1%;text-align: center; vertical-align: middle; }
.mypage-util li + li {border-left: 1px solid #ddd; }
.mypage-util li p {font-size: 12px; color: #666; text-align: center; }
.mypage-util li p span {color: red; }
.mypage-util .icon {display: block; margin: 0 auto 10px; width: 30px; height: 20px; }
.mypage-util .icon-order {
	background-image: url(/AppData/images/mediacommerce/white/layout/category_order.svg);
    background-size: 30px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.mypage-util .icon-point {
    background-image: url(/AppData/images/mediacommerce/white/layout/category_point.svg);
    background-size: 24px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.mypage-util .icon-coupon {
    background-image: url(/AppData/images/mediacommerce/white/layout/category_coupon.svg);
    background-size: 26px 20px;
    background-repeat: no-repeat;
    background-position: center;
}



.mypage-group {margin-top: 10px; background-color: #fff; border-bottom: 1px solid #ccc; }

.mypage-item {width: 100%; box-sizing: border-box; border-top: 1px solid #e3e3e3; }
.mypage-item:first-child {border-top-width: 0; }

.mypage-menu {display: block; width: 100%; padding: 15px 35px 15px 15px; box-sizing: border-box; background-image: url(/AppData/images/mediacommerce/white/layout/gnb_go.png); background-repeat: no-repeat; background-position: right 15px center; background-size: 6px 10px; font-size: 15px; color: #222; text-align: left; outline: none; }

.mypage-contents {display: none; }

.mypage-etc {padding: 20px 15px 20px; box-sizing: border-box; }
.mypage-etc ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.mypage-etc li {position: relative; float: left; margin-left: 20px; padding-left: 21px; }
.mypage-etc li:first-child {margin-left: 0; padding-left: 0; }
.mypage-etc li + li:before {content: ""; position: absolute; top: 3px; left: 0; display: block; width: 1px; height: 12px; background-color: #ccc; }




/* =======================================================
	회원정보 수정 진입
========================================================*/
.fm--myinfo {background-color: #f5f5f5; }

.fm--myinfo .gate-text {padding: 40px 15px 0px; box-sizing: border-box; text-align: center; background-color: #fff; }
.fm--myinfo .login-container {width: 100%; }
.fm--myinfo .login-container .page-bottom {padding: 20px 0; }

.fm--myinfo .section-myinfo {background-color: #fff; border-bottom: 1px solid #ccc; margin-top: 40px; }
.fm--myinfo .section-myinfo:first-of-type {margin-top: 0; }




/* =======================================================
	마이 포인트
========================================================*/
.fm--mypoint {}
.fm--mypoint:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.fm--mypoint .page-header .point {display: block; margin: 10px auto 0; font-size: 20px; }

.fm--mypoint .mypoint-box {display: none; }


.section-mypoint .mypoint-group {text-align: center; }

.section-mypoint .mypoint-month {display: inline-block; min-width: 74px; padding: 10px 20px; margin: 20px auto 20px; background-color: #fff; border: 1px solid #aaa; border-radius: 999px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #888; line-height: 1; text-align: center; }


.mypoint-list {display: table; width: 100%; table-layout: fixed; border-top: 1px solid #e3e3e3; }
.mypoint-list li {display: table-row; }
.mypoint-list li > div {display: table-cell; box-sizing: border-box; vertical-align: middle; border-bottom: 1px solid #e3e3e3; }

.mypoint-list .mypoint-state {width: 65px; padding: 20px 0 20px 15px; }
.mypoint-list .state {width: 50px; height: 50px; display: block; margin: 0 auto; border: 1px solid #888; border-radius: 999px; box-sizing: border-box; line-height: 48px; text-align: center; color: #666;}

.mypoint-list .mypoint-info {width: calc(100% - 160); padding: 20px 15px; text-align: left; }
.mypoint-list .mypoint-info .date {font-size: 11px; color: #666; margin-bottom: 4px;}
.mypoint-list .mypoint-info .text {font-size: 15px; }

.mypoint-list .mypoint-amount {width: 95px; padding: 20px 15px 20px 0; text-align: right; }

.mypoint-list .point-item.add .state {border-color: #36458d; color: #36458d; }
.mypoint-list .point-item.add .mypoint-amount {color: #36458d; }

.mypoint-list .point-item.use .state {border-color: #dc2626; color: #dc2626; }
.mypoint-list .point-item.use .mypoint-amount {color: #dc2626; }


.fm--mypoint .pagination-wrapper {margin-top: 20px; }


/* =======================================================
	마이 쿠폰
========================================================*/
.fm--mycoupon .coupon-register {margin-top: 20px; }
.fm--mycoupon .coupon-register .input-title {display: none; }
.fm--mycoupon .coupon-register .text-guide {margin-top: 10px; }
.section-mycoupon {padding: 0 15px; margin-bottom: 20px; box-sizing: border-box; }

.section-mycoupon .coupon-list li {width: 100%; border: 1px solid #e3e3e3; box-sizing: border-box; border-radius: 2px;  }
.section-mycoupon .coupon-list li:first-child {border-top: 1px solid #e3e3e3; }
.section-mycoupon .coupon-list li + li {margin-top: 10px; }

.section-mycoupon .coupon-list li.nodata {width: 100%; padding: 100px 0; border: 0; }
.section-mycoupon .coupon-list .nodata p {text-align: center; color: #666; font-size: 14px; }

.section-mycoupon .coupon-list .coupon-item {display: table; width: 100%; table-layout: fixed; }

.section-mycoupon .coupon-item .coupon-left {display: table-cell; width: 68%; vertical-align: top; padding: 20px 15px; }
.section-mycoupon .coupon-item .sale {font-size: 25px; font-weight: 800; color: #36458d; margin-bottom: 10px; }
.section-mycoupon .coupon-item .title {display: block; font-size: 16px; color: #222; font-weight: 800; margin-bottom: 10px; }
.section-mycoupon .coupon-item p {font-size: 12px; color: #999; font-weight: 400; line-height: 1.6; }
.section-mycoupon .coupon-item .btn-text {margin-top: 10px; }

.section-mycoupon .coupon-item .coupon-right {display: table-cell; width: 32%; padding: 20px 15px; text-align: center;  vertical-align: middle; border-left: 1px dashed #e3e3e3; }
.section-mycoupon .coupon-item .deadline em {font-style: normal; display: block; font-size: 16px; font-weight: 800; }


.section-mycoupon.past .coupon-list li {background-color: #f5f5f5; }

.section-mycoupon.past .coupon-item .sale {color: 
	#bbb; }
.section-mycoupon.past .coupon-item .title {color: #999; }
.section-mycoupon.past .coupon-item p {color: #999; }

.section-mycoupon.past .coupon-item .deadline em {color: #999; }




/* =======================================================
	마이 리뷰
========================================================*/
.fm--myreview {background-color: #f5f5f5; }

/* review-list */
.section-myreview {}

.myreview-list {border-bottom: 1px solid #bbb; }
.myreview-list li {padding: 15px 15px; background-color: #fff; box-sizing: border-box; }
.myreview-list li + li {border-top: 1px solid #ccc; }
.myreview-list li:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.myreview-list .myreview-thumb {float: left; width: 60px; height: 60px; border: 1px solid #e0e0e0; box-sizing: border-box; overflow: hidden; }
.myreview-list .myreview-thumb img {display: block; width: 100%; height: 100%; }

.myreview-list .myreview-info {float: left; padding: 0 15px 0 10px; width: calc(100% - 116px); box-sizing: border-box; }
.myreview-list .myreview-info .date {font-size: 12px; color: #36458d; margin-bottom: 4px; }
.myreview-list .myreview-info .title {height: 36px; font-size: 13px; line-height: 18px; color: #000; }
.myreview-list .myreview-info .option {font-size: 11px; color: #999; }
.myreview-list .myreview-btn {float: left; width: 56px; margin-top: 15px; }

.myreview-list .nodata {width: 100%; padding: 100px 0; border: 0; }
.myreview-list .nodata p {text-align: center; color: #666; font-size: 14px; }


/* review-write */
.fm--myreview.fm--board-write {background: #fff; }

.myreview-write {background-color: #fff; }

.myreview-write .myreview-item {padding: 20px 15px; box-sizing: border-box; border-bottom: 1px solid #ddd; }
.myreview-write .myreview-item:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.myreview-write .myreview-thumb {float: left; width: 60px; height: 60px; border: 1px solid #e0e0e0; box-sizing: border-box; overflow: hidden; }
.myreview-write .myreview-thumb img {display: block; width: 100%; height: 100%; }

.myreview-write .myreview-info {float: left; width: calc(100% - 70px); margin-left:	10px; box-sizing: border-box; }
.myreview-write .myreview-info .title {font-size: 13px; line-height: 18px; color: #000; text-align: left; }
.myreview-write .myreview-info .option {font-size: 11px; color: #999; margin-top: 4px; }

.myreview-write .myreview-rating {padding: 40px 15px; border-bottom: 1px solid #ddd; box-sizing: border-box; text-align: center; }
.myreview-write .myreview-rating p {margin-bottom: 10px; }

.rating-wrapper {margin-left: 4px; }
.rating-wrapper span {display: inline-block; width: 16px; height: 16px; fill: #ccc; }
.rating-wrapper .star-on-png {fill: #ff7e1f; }


/* review-view */
.myreview-info {}


.fm--myreview.fm--board-view {background: #fff; }

.bx-wrapper {margin-bottom: 0 !important; background: none; border: 0; box-shadow: none; } 
.bx-wrapper .bx-loading {background: none; } 
.bx-wrapper img {width: 100%; }
.bx-controls {width: 100%; display: block; }
.bx-controls .bx-pager {left: 50%; bottom: 10px; display: block; width: auto; min-width: 50px; padding-top: 0; transform: translateX(-50%); border-radius: 999px; background: rgba(34, 34, 34, .6); text-align: center; font-size: 12px; color: #fff; line-height: 24px; font-weight: 400; }

.review-slide-container {position: relative; width: 100%; padding: 0 0; margin: 0; display: block; box-sizing: border-box; line-height: 0; }
.review-slide-container .review-slide {position: relative; display: block; }
.review-slide-container .slide-img {position: relative; width: 100%; }
.review-slide-container .slide-img img {max-width: 100%; }
.review-slide-container .slide-paging {position: absolute; bottom: 10px; right: 20px; }
.review-slide-container .slide-paging li {display: none; min-width: 50px; border-radius: 999px; background: rgba(34, 34, 34, .6); text-align: center; font-size: 12px; color: #fff; line-height: 24px; font-weight: 400; }
.review-slide-container .slide-paging li span {font-weight: 700; }
.review-slide-container .slide-paging li.slick-active {display: inline-block; }

.myreview-view .myreview-info {padding: 20px 15px; box-sizing: border-box; }
.myreview-view .myreview-info:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.myreview-view .myreview-info .rating-wrapper {float: left; margin-left: 0; }
.myreview-view .myreview-info .date {position:relative; float: left; margin-top: 0; margin-left: 15px; padding-left: 15px; vertical-align: middle; line-height: 16px; }
.myreview-view .myreview-info .date:before {content: ""; position: absolute; left: 0; top: 2px; display: inline-block; width: 1px; height: 14px; background-color: #bbb; line-height: 14px; }
.myreview-view .myreview-info .title {margin-top: 10px; font-size: 14px; }
.myreview-view .myreview-info .option {float: none; clear: both; margin-top: 5px; display: block; font-size: 12px; color: #999; }
.myreview-view .board-contents {color: #444; }

.fm--myreview .page-bottom.pc {display: none; }
.fm--myreview .page-bottom.mobile {display: inline; text-align: center; }
.fm--myreview .page-bottom.mobile .btn-group {text-align: center; }
.fm--myreview .page-bottom.mobile .btn-text + .btn-text {margin-left: 30px; }