@charset "utf-8";

/* =======================================================
	mc--mypage
========================================================*/
.mc--mypage {}
.mc--mypage #contents {padding-bottom: 50px; }


/* mypage-header
-----------------------------------------------*/
.mypage-header {padding: 20px 0; box-sizing: border-box; background-color: #fff; } 
.mypage-header p {font-size: 22px; font-weight: 400; color: #222; } 
.mypage-header strong {font-weight: 700; }

.user-nm-area{line-height:40px;}
.recommend-num{line-height:40px; color: #666;}
.recommend-num .count{ color: #6ab5d5; font-weight: 600;}


.copy-btn-area{float:left; margin-left:20px;}

.copy-btn-area button{width:100px; height:40px; line-height:38px; font-size:15px; color:#fff; background-color:#6ab5d5; border:1px solid #6ab5d5;}
.copy-btn-area button.copy-qr-my{margin-left:10px; color:#6ab5d5; background-color:#fff;}


/* my-share-area
-----------------------------------------------*/
.my-share-area{background-color: #6ab5d5;  border-radius: 10px; padding: 30px; margin-left: 40px; width: 410px; box-sizing: border-box;}
.my-share-area .txt{font-size: 20px; color: #fff; font-weight: 500; }
.my-share-area .code-box{ margin-top: 20px; background-color: #fff; border-radius: 10px; padding: 20px; font-weight: 600; text-align: center;}
.my-share-area .code-box .my-url{border: 1px solid #6ab5d5; padding: 10px; box-sizing: border-box; color: #6ab5d5;}
.my-share-area .code-box .img-qr{box-sizing: border-box; margin: 20px auto; width: 150px; max-width: 80%;}
.my-share-area .code-box .img-qr img{width: 100%;}
.my-share-area .code-box .img-qr canvas{width: 100%;}
.my-share-area .code-box .btn-area button{min-width: 105px; background-color: #222; padding: 10px 12px 10px 35px; font-size: 14px; color: #fff; background-repeat: no-repeat; background-position: left 5px center; background-size: 28px; margin: 4px 2px;}
.my-share-area .code-box .btn-area .copy-url{ background-color: #e9eaee; color: #666; font-weight: 500; background-image: url("/AppData/images/mediacommerce/sns/copy.png");}
.my-share-area .code-box .btn-area .copy-qr{background-image: url("/AppData/images/mediacommerce/white/icon/icon_download_white.svg"); background-size: 14px; background-position: left 12px center;}
.my-share-area .code-box .btn-area .copy-kakao{background-color: #fbe300; color: #3b1e1e; font-weight: 500; background-image: url("/AppData/images/mediacommerce/sns/kakao.png");}

/* mypage-util
-----------------------------------------------*/
.mypage-util {width: 100%; box-sizing: border-box; border: 1px solid #dadbdf; background-color: #fff; margin-bottom: 20px;}

.mypage-util ul {display: table; margin: 0 auto; }
.mypage-util ul li {display: table-cell; width: 1%; padding: 20px 0; text-align: center; vertical-align: middle; } .mypage-util ul li + li .mypage-util-menu {border-left: 1px solid #dadbdf; }
.mypage-util-menu {display: block; margin: 0 auto; text-align: center; outline: none; }
/* mypage-util icon */
.mypage-util .icon {
	display: block;
	margin: 0 auto;
	margin-bottom: 10px;
	width: 60px; height: 60px;
	background-size: 100%;
	background-repeat: no-repeat;
 	background-position: center;
}

.mypage-util .icon-order {
	background-image: url("/AppData/images/mediacommerce/icon/category_order.png");
	background-size: 90%;
}
.mypage-util .icon-coupon {
	background-image: url("/AppData/images/mediacommerce/icon/category_coupon.png");
}
.mypage-util .icon-point {
	background-image: url("/AppData/images/mediacommerce/icon/category_point.png");
}
.mypage-util .icon-cart {
	background-image: url("/AppData/images/mediacommerce/icon/category_cart.png");
	background-size: 90%;
}

.mypage-util span {
	display: inline-block;
	font-size: 14px;
	color: #666;
	text-align: center;
	white-space: normal;
}
.mypage-util em {
	display: inline-block;
	font-style: normal;
	font-size: 16px;
	font-weight: 500;
}




/* mypage-gnb
-----------------------------------------------*/
.mypage-gnb-wrap{width: calc(100% - 450px);}
.mypage-gnb{border-top: 1px solid #dadbdf;}
.mypage-gnb .gnb li{border-bottom: 1px solid #dadbdf;}
.mypage-gnb .gnb > li > a,
.mypage-gnb .gnb > li > button {
	background-image: url("/AppData/images/mediacommerce/white/button/gnb_go.png");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 6px 10px;
	font-size: 16px;
}



/* mc--mypage-etc
-----------------------------------------------*/
.mypage-etc {
	padding: 10px 20px 20px;
}
.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: 20px;
}

.mypage-etc li:before {
	content: "";
	position: absolute;
	top: 6px; left: 0;
	display: block;
	width: 1px; height: 12px;
	background-color: #999;
}
.mypage-etc li:first-child {
	margin-left: 0;
	padding-left: 0;
}
.mypage-etc li:first-child:before {
	content: "";
	display: none;
}

.mypage-etc li > a,
.mypage-etc li > button {
	font-size: 13px;
	color: #999;
	text-align: left;
	outline: none;
}
.mypage-etc li:first-child > a,
.mypage-etc li:first-child > button {
	margin-left: 0;
	padding-left: 0;
	border-left: none;
}




/* =======================================================
	mc-myreview
========================================================*/
/* 리뷰 탭 */
.mc--myreview .tab-nav { margin: 0 auto 30px; width: 600px; max-width: 100%;}
.mc--myreview .tab-nav .tab-menu { border-bottom: 1px solid #dadbdf; } 
.mc--myreview .tab-nav .tab-menu.current { border-bottom: 3px solid #6ab5d5 ; }

/* 리뷰 dash */
.mc--myreview .list-dash {
	padding: 20px 20px;
	box-sizing: border-box;
}
.mc--myreview .list-dash li {
	font-size: 12px;
	color: #888;
}
.mc--myreview .list-dash li strong {
	font-weight: 500;
}

/* 리뷰 리스트 */
.mc--myreview .date em {margin-right: 5px; }
.mc--myreview .inventory-list{border-top: 1px solid #dadbdf;}
.mc--myreview .inventory-list li {
	padding: 0;
	border-bottom: 1px solid #dadbdf;
}
.mc--myreview .inventory-list li.nodata {
	padding: 100px 20px;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 14px;
	color: #888;
	text-align: center;
}
.mc--myreview .inventory-list li + li {
	margin-top: 10px;
}
.mc--myreview .date {
	line-height: 30px;
}
.mc--myreview .inventory-group {
	padding: 20px 20px;
}





/* =======================================================
	mc--mycoupon
========================================================*/
.mc--mycoupon {}

.mc--mycoupon .tab-nav { margin: 0 auto 30px; width: 600px; max-width: 100%;}
.mc--mycoupon .tab-nav .tab-menu { border-bottom: 1px solid #dadbdf; } 
.mc--mycoupon .tab-nav .tab-menu.current { border-bottom: 3px solid #6ab5d5 ; }


.mc--mycoupon .coupon-list {
	width: 100%;
	box-sizing: border-box;
}
.mc--mycoupon .coupon-list li {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.mc--mycoupon .coupon-list li + li {
	margin-top: 10px;
}
.mc--mycoupon .nodata {
	padding: 100px 0;
	box-sizing: border-box;
	font-size: 14px;
	color: #888;
	text-align: center;
}

.mc--mycoupon .coupon {
	position: relative;
	display: flex;
	z-index: 1;
	width: 100%;
	border: 1px solid #e9eaee;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
	align-items: center
}

.mc--mycoupon .coupon .coupon-left {  width: 70%; padding: 20px; border-right: 1px dashed #e3e3e3; }
.mc--mycoupon .coupon .coupon-right{  width: 30%; padding: 20px;  text-align: center; }

.mc--mycoupon .coupon .coupon-discount { font-size: 20px; color: #2a6496;  }
.mc--mycoupon .coupon .coupon-state { font-size: 16px; }
.mc--mycoupon .coupon-title {
	display: block;
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: 500;
	color: #444;
}
.mc--mycoupon .coupon .btn {
	margin-top: 15px;
	border: none;
	padding: 0;
	background-color: transparent;
}
.mc--mycoupon .coupon .option {
	font-size: 14px;
	color: #999;
}
.mc--mycoupon .coupon .date {
	font-size: 14px;
	color: #999;
}


.mc--mycoupon .past .coupon {
	background-color: #f5f5f5;
	border-color: #ddd;
}


.mc--mycoupon .past .left strong {
	margin-top: -15px;
	color: #777;
}
.mc--mycoupon .past .left strong span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #777;
	font-weight: 400;
}
.mc--mycoupon .past .coupon-title {
	color: #777;
}
.mc--mycoupon .past .coupon .deadline {
	color: #999;
}




/* =======================================================
	mc--mypoint
========================================================*/
.mc--mypoint .mc--section {
	padding: 20px 20px;
	border-bottom-color: #ececec;
}

.point-top-area span {
	display: inline-block;
	margin-top: 10px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.point-top-area strong {
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
}

.mypoint-condition {
	/* float:left; */
	display:flex;
	justify-content:center;
	/* width:46%; */
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	color: #222;
	box-sizing: border-box;
}
/* 적립 예정 포인트 사용X */
/* 
.mypoint-earn{
	float:right;
	display:flex;
	justify-content:flex-start;
	width:46%;
	margin-left:8%;
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	color: #222;
	box-sizing: border-box;
} */

.mypoint-earn .earn-num{color:#888;}

.point-box{text-align:center;}


/*.mypoint-terms {
	box-sizing: border-box;
}
.mypoint-terms ul {
	padding-top: 20px;
	border-top: 1px solid #e9eaee;
}
.mypoint-terms li {
	margin-bottom: 5px;
	font-size: 12px;
	color: #888;
	text-align: left;
}*/

.section-mypoint::after{content: ''; display: block; clear: both;}
.mypoint-range {
	box-sizing: border-box;
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	padding: 20px;
}
.mypoint-range::after{content: ''; display: block; clear: both;}
.mypoint-range .select-period{display: flex; align-items: center; float: left;}
.mypoint-range .select-period button{border: 1px solid #bbb; padding: 0 15px; line-height: 38px; box-sizing: border-box; margin-right: 5px; background-color: #fff; color: #666;}
.mypoint-range .select-period button.direct-input{margin-right: 0;}
.mypoint-range .select-period button.current{background-color: #222; border: 1px solid #222; color: #fff;}
.period-tit{display: inline-block; margin-right: 20px; min-width: 60px;}
.mypoint-range .select-period .datepicker{float: left; display: none; margin-left: 5px;}
.mypoint-range .select-period .datepicker input{height: 40px; border: 1px solid #bbb; padding: 0 10px; background-color: #fff; max-width: 160px; cursor: pointer;}
.mypoint-range .btn-sch{min-width: 80px; padding: 0 10px; line-height: 38px; float: right; height: 40px; background-color: #6ab5d5; border: 1px solid #6ab5d5; color: #fff;}

.section-mypoint .select-group{
	float: right;
	margin: 20px 0;
	width: 200px;
}
.section-mypoint .select-group .select{float: none; width: 100%;}


/* 조회기간 datepicker */
.datepicker input{background: url(../../images/layout/icon_date.png) no-repeat center right 10px; background-size: 18px;}
.datepicker img{display: none;}
.ui-datepicker .ui-datepicker-title select + select{margin-left: 5px;}

.mypoint-group {
	clear: both;
	text-align: center;
	border: 1px solid #ddd;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 50px;
}
.mypoint-group .mypoint-month {
	display: inline-block;
	min-width: 74px;
	padding: 0 15px;
	margin: 0 auto 15px;
	background-color: #6ab5d5;
	border-radius: 999px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	line-height: 30px;
	text-align: center;
}
.mypoint-list ul {
	display: table;
	width: 100%;
	background-color: #fff;
	table-layout: fixed;
	text-align: left;
}
.mypoint-list li {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ececec;
}
/*.mypoint-list li:first-child{border-top: 1px solid #ececec;}*/
.mypoint-list li:last-child{border:none;}
.mypoint-list li::after{content: ''; display: block; clear: both;}
.mypoint-list li.nodata {
	display: block;
	padding: 100px 0;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 14px;
	color: #888;
	text-align: center;
}
.mypoint-list .left {
	width: 65%;
	padding: 20px;
	box-sizing: border-box;
	vertical-align: top;
}
.mypoint-list .left p {
	color: #444;
}
.mypoint-list .left .pt-name {
	font-weight: 500;
	word-break:keep-all;
}
.mypoint-list .left .date {
	margin-top: 5px;
	font-size: 13px;
	color: #999;
}

.mypoint-list .right {
	width: 35%;
	padding: 20px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: right;
}
.mypoint-list .right strong {
	font-weight: 500;
}

.mypoint-list .right .gray-color{
	margin-top: 5px;
	font-size: 12px;
	color: #999;
}

/* 포인트 안내 */
.notice-text{background-color: #f5f5f5; padding: 20px; box-sizing: border-box; margin-bottom: 30px;}
.notice-text strong{font-size: 18px; display: block;}
.notice-text strong + ul{margin-top: 6px;}

@media (max-width:960px){
	.mypoint-range .select-period{display: block; width: 100%; float: none; clear: both;}
	.period-tit{display: block; margin-right: 0; width: 100%; margin-bottom: 10px;}
	.mypoint-range .select-period button{line-height: 34px; padding: 0 10px; font-size: 14px;}
	.mypoint-range .select-period .datepicker{float: none; clear: both; margin-top: 10px; width: 100%; margin-left: 0;}
	.mypoint-range .select-period .datepicker input{width: calc(50% - 9px); max-width: 100%; height: 36px; font-size: 14px;}
	.mypoint-range .btn-sch{line-height: 34px; height: 36px; font-size: 14px; float: none; clear: both; width: 100%; margin-top: 10px;}
}


/* =======================================================
* Device = 태블릿, 아이패드(세로), PC
* Screen = 768 이상
* ========================================================*/
@media (max-width:768px){
	.mypoint-range .select-group .select{float:left; width:calc(50% - 5px);}
	
	.mypage-util span,
	.mypage-util em{font-size: 13px;}
	.mypage-util .icon{width: 40px; height: 40px;}
	
	.mypage-gnb-wrap{float: none !important; clear: both; width: 100%;}
	.my-share-area{float: none !important; clear: both; width: 100%; margin-left: 0; margin-top: 20px; padding: 20px;}
	.my-share-area .txt{font-size: 16px;}
	.my-share-area .code-box .my-url{font-size: 12px;}
	.my-share-area .code-box .btn-area button{min-width: auto;}
	.my-share-area .code-box .img-qr{max-width: 160px;}

	/* 쿠폰 */
	.mc--mycoupon .coupon-title{font-size: 16px;}
	.mc--mycoupon .coupon .option,
	.mc--mycoupon .coupon .date{font-size: 12px;}


}


@media all and (min-width: 690px){
	.mc--leave .mc--contents {
		padding-bottom: 60px;
	}
}

@media (max-width:500px){
	/* .mypoint-condition{display:block; width:50%;} */
	.mypoint-earn{display:block; width:50%; margin-left:0;}
	.point-top-area strong{font-size:18px;}
	.copy-btn-area{float: right; margin-left: 10px;}
	.copy-btn-area button{font-size: 13px; width: 85px; height: 35px; line-height: 33px;}
	.copy-btn-area button.copy-qr-my{margin-left: 5px;}

	.my-share-area .code-box .img-qr{max-width: 80%; width: 120px;}
	.my-share-area .code-box .btn-area button{width: 100%; display: block; margin: 10px 0; padding: 14px 0;}

	.mypoint-group{margin-bottom: 30px;}
	.mypoint-range{padding: 15px 10px;}
	.mypoint-range .select-period button{font-size: 12px; margin: 4px 2px;}
	.section-mypoint .select-group{width: 100%; float: none; clear: both;}
	
	.mypoint-list .left,
	.mypoint-list .right{padding: 15px 0;}

	/* 포인트 안내 */
	.notice-text{margin-bottom: 20px;}
	.notice-text strong{font-size: 16px;}


}