@charset "utf-8";

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

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



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

.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: 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-coupon {
	background-image: url("/AppData/images/mediacommerce/white/layout/category_coupon.svg");
	background-size: 26px 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 span {
	display: inline-block;
	font-size: 12px;
	color: #666;
	text-align: center;
}
.mypage-util em {
	display: inline-block;
	font-size: 12px;
	font-style: normal;
}




/* mypage-gnb
-----------------------------------------------*/
.mypage-gnb {}

.mypage-gnb .gnb {
	margin-top: 10px;
}

.mypage-gnb .gnb > li > a,
.mypage-gnb .gnb > li > button {
	display: block;
	width: 100%;
	padding: 20px 40px 20px 20px;
	box-sizing: border-box;
	background-color: #fff;
	background-image: url("/AppData/images/mediacommerce/white/layout/gnb_go.png");
	background-repeat: no-repeat;
	background-position: right 20px top 25px;
	background-size: 6px 10px;
	font-size: 15px;
	color: #222;
	text-align: left;
	outline: none;
}



/* 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: 12px;
	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
========================================================*/
/* 리뷰 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 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 .coupon-list {
	width: 100%;
	padding: 0 20px;
	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;
	z-index: 1;
	width: 100%;
	border: 1px solid #e9eaee;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
}
.mc--mycoupon .coupon:before {
	content: "";
	position: absolute;
	left: -10px; top: 50%;
	z-index: 3;
	display: block;
	width: 20px; height: 20px;
	margin-top: -10px;
	border: 1px solid #e9eaee;
	box-sizing: border-box;
	border-radius: 999px;
	background-color: #efefef;
}
.mc--mycoupon .coupon:after {
	content: "";
	position: absolute;
	right: -10px; top: 50%;
	z-index: 3;
	display: block;
	width: 20px; height: 20px;
	margin-top: -10px;
	border: 1px solid #e9eaee;
	box-sizing: border-box;
	border-radius: 999px;
	background-color: #efefef;
}
.mc--mycoupon .left {
	position: absolute;
	left: 0; top: 0;
	float: none;
	width: 30%; height: 100%;
	padding: 20px 10px 20px 20px;
	border-right: 1px dashed #e9eaee;
	box-sizing: border-box;
}
.mc--mycoupon .left strong {
	position: absolute;
	top: 50%; left: 0;
	margin-top: -8px;
	display: block;
	width: 100%;
	font-size: 16px;
	line-height: 1;
	text-align: center;
}
.mc--mycoupon .right {
	width: 70%;
	margin-left: 30%;
	padding: 20px 20px 20px 10px;
	box-sizing: border-box;
}
.mc--mycoupon .coupon-title {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 500;
	color: #444;
}
.mc--mycoupon .coupon .btn {
	margin-bottom: 15px;
	background-color: transparent;
}
.mc--mycoupon .coupon .option {
	font-size: 12px;
	color: #999;
}
.mc--mycoupon .coupon .date {
	font-size: 12px;
	color: #999;
}


.mc--mycoupon .past .coupon {
	background-color: #e0e0e0;
	border-color: #ddd;
}
.mc--mycoupon .past .coupon:before {
	content: "";
	border-color: #ddd;
}
.mc--mycoupon .past .coupon:after {
	content: "";
	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;
}
.mypoint-condition {
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	color: #222;
	box-sizing: border-box;
}
.mypoint-condition span {
	display: inline-block;
	margin-top: 10px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}
.mypoint-condition strong {
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
}

.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;
}

.mypoint-range {
	padding: 20px 20px;
	box-sizing: border-box;
	background-color: #fff;
	border-bottom: 1px solid #dadbdf;
}

.mypoint-group {
	text-align: center;
}
.mypoint-group .mypoint-month {
	display: inline-block;
	min-width: 74px;
	padding: 0 15px;
	margin: 15px auto 10px;
	background-color: #b6b6b6;
	border-radius: 999px;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 400;
	color: #fff;
	line-height: 24px;
	text-align: center;
}
.mypoint-list ul {
	display: table;
	width: 100%;
	background-color: #fff;
	table-layout: fixed;
	text-align: left;
}
.mypoint-list li {
	display: table-row;
}
.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 {
	display: table-cell;
	width: 70%;
	padding: 20px 20px;
	border-bottom: 1px solid #ececec;
	vertical-align: top;
}
.mypoint-list .left p {
	font-size: 14px;
	color: #444;
}
.mypoint-list .left .date {
	margin-top: 5px;
	font-size: 12px;
	color: #888;
}

.mypoint-list .right {
	display: table-cell;
	width: 30%;
	padding: 20px 20px;
	border-bottom: 1px solid #ececec;
	vertical-align: middle;
	text-align: right;
}
.mypoint-list .right strong {
	font-size: 14px;
	font-weight: 500;
	color: #444;
}





/* =======================================================
	history
========================================================*/
.mc--classhistory .mc--section {border-bottom: 0; }

.classhistory-list {width: 100%; }
.classhistory-list li {box-sizing: border-box; border-bottom: 1px solid #ececec; }
.classhistory-list li:last-of-type {border-bottom: 1px solid #dadbdf; }
.classhistory-list li:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.classhistory-header {padding: 10px 20px; box-sizing: border-box; border-bottom: 1px solid #f2f2f2; }
.classhistory-header .marking {margin: 4px 0 0; background-color: #0173BC; color: #fff; border-color: #0173BC; }
.classhistory-header .marking.complete {background-color: #888; border-color: #888; color: #fff; }
.classhistory-header .btn-goto {float: right; }
.classhistory-header .btn-goto span {font-size: 12px; }
.classhistory-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.classhistory-group {padding: 10px 20px; box-sizing: border-box; }
.classhistory-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.classhistory-group .classhistory-info {/*float: left; width: 65%; padding-right: 15px;*/ box-sizing: border-box; }
.classhistory-group .classhistory-progress {/*float: left; width: 35%; */margin-top: 5px; box-sizing: border-box; }
.classhistory-group .mysurvey-box {margin-top: 10px; padding: 5px 10px; background-color: #f7f7f7; }
.classhistory-group .btn.positive {margin-top: 15px; }

.progress-rate-wrapper {display: flex; box-sizing: border-box; }
.progress-rate-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.progress-rate-box {position: relative; flex-grow: 1; height: 15px; margin: 3px 7px 0 0; box-sizing: border-box; border-radius: 999px; overflow: hidden; background-color: #bcbcbc; }
.progress-rate-bar {position: absolute; width: 0%; height: 100%; top: 0; left: 0; display: block; background: red; }
.progress-rate-percent {flex-grow: 0; text-align: right; }
.progress-rate-percent:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.progress-rate-percent .title {font-size: 11px; color: #888; line-height: 21px; }

.classhistory-list .nodata {padding: 100px 20px; box-sizing: border-box; background-color: #fff; font-size: 14px; color: #888; text-align: center; }

.black .classhistory-list .nodata {background-color: #020202; color: #888; }
.black .classhistory-list li {box-sizing: border-box; border-bottom: 1px solid #2b2c30; }
.black .classhistory-list li:last-of-type {border-bottom: 1px solid #36373b; }
.black .classhistory-header {border-bottom: 1px solid #222;








/* =======================================================
* Device = 태블릿, 아이패드(세로), PC
* Screen = 768 이상
* ========================================================*/
@media all and (min-width: 690px){
	.mc--leave .mc--contents {
		padding-bottom: 60px;
	}
}