@charset "utf-8";



/*
  ##Device = Low Resolution Tablets, Mobiles
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {

}



/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {}



/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}



/*
  ##Device = Laptops, Desktops common
  ##Screen = B/w 1024px to
*/
@media (min-width: 1024px)  {

/* =======================================================
	마이페이지 메인
========================================================*/
.fm--mypage {background-color: #fff; }


.mypage-header {border: 1px solid #ccc;  }
.mypage-header .mypage-user {padding: 20px 20px; }


.mypage-util {display: table; table-layout: fixed; border-top: 1px solid #ddd; }
.mypage-util ul {display: table-row; }
.mypage-util li {padding: 20px 10px; box-sizing: border-box; }

.mypage-util li a {display: block; width: 100%; box-sizing: border-box; }
.mypage-util li p {font-size: 12px; color: #666; text-align: center; }

.mypage-group {border-bottom: 0; }
.mypage-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.mypage-group.pc {display: none; }

.mypage-item {border: 1px solid #ccc; margin-top: 30px; }
.mypage-item.col-02 {float: left; width: calc(50% - 10px); }
.mypage-item:first-child {margin-left: 0; border-top-width: 1px; }

.mypage-item.col-02 + .mypage-item.col-02 {margin-left: 20px; }

.mypage-item.pc {display: none; }


.mypage-menu {border-bottom: 1px solid #ccc; }

.mypage-contents {display: block; padding: 15px 15px; box-sizing: border-box; }


/* 주문내역 */
.myorder-list {}
.myorder-list li {border-top: 1px solid #e3e3e3; padding: 10px 10px; box-sizing: border-box; }
.myorder-list li:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.myorder-list li:first-child {border-top: 0; }

.myorder-list li .date {float: left; font-size: 16px; color: #36458d; font-weight: 700; margin-right: 10px; text-align: left; line-height: 28px;  }
.myorder-list li .title {float: left; font-size: 16px; color: #444; text-align: left; line-height: 28px; }
.myorder-list li .btn {float: right; }


/* 최근본 상품 */
.myrecently-list {min-height: 180px; box-sizing: border-box; }
.myrecently-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.myrecently-list li {float: left; width: 123px; margin-left: 7px; }
.myrecently-list .nodata {float: none; display: block; width: 100%;  text-align: center; padding-top: 80px; color: #666; font-size: 14px; }
.myrecently-list li:first-child {margin-left: 0; }
.myrecently-list .myrecently-thumb {border: 1px solid #e0e0e0; box-sizing: border-box; overflow: hidden; }
.myrecently-list .myrecently-thumb img {width: 100%; height: 100%; display: block; }
.myrecently-list .myrecently-info {padding: 7px 5px; width: 100%; box-sizing: border-box; }
.myrecently-list .myrecently-info p {font-size: 12px; color: #444; text-align: left; }



/* 관심상품 */
.myzzim-list {min-height: 180px; box-sizing: border-box; }
.myzzim-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.myzzim-list li {float: left; width: 123px; margin-left: 7px; }
.myzzim-list .nodata {float: none; display: block; width: 100%; text-align: center; padding-top: 80px; color: #666; font-size: 14px; }
.myzzim-list li:first-child {margin-left: 0; }

.myzzim-list .myzzim-thumb {border: 1px solid #e0e0e0; box-sizing: border-box; overflow: hidden;  width: 123px; height: 123px; }
.myzzim-list .myzzim-thumb img {width: 100%; height: 100%; display: block; }
.myzzim-list .myzzim-info {padding: 7px 5px; width: 100%; box-sizing: border-box; }
.myzzim-list .myzzim-info p {font-size: 12px; color: #444; text-align: left; }





/* =======================================================
	회원정보 수정 진입
========================================================*/
.fm--myinfo {background-color: #fff; }
.fm--myinfo .login-container {width: 500px; margin: 0 auto; padding: 40px 0 40px; }
.fm--myinfo .login-container .page-bottom {padding: 20px 0; }



/* =======================================================
	회원정보 수정
========================================================*/
.fm--myinfo .section-myinfo {border-bottom-width: 0; padding-bottom: 0; }






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


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

.fm--myreview .tab-nav03 {margin-bottom: 30px; }


.myreview-list {}
.myreview-list li {padding: 20px 20px; }

.myreview-list .nodata {padding: 200px 0; }
.myreview-list .myreview-thumb {width: 120px; height: 120px;  }
.myreview-list .myreview-info {padding: 5px 0 0 20px; width: calc(100% - 220px); box-sizing: border-box; }
.myreview-list .myreview-btn {width: 80px; padding-left: 20px;}
.myreview-list .myreview-btn .btn {width: 80px; }

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

.myreview-write .myreview-thumb {width: 120px; height: 120px;}
.myreview-write .myreview-thumb img {display: block; width: 100%; height: 100%; }

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

.myreview-write .myreview-rating {margin: 30px 0 30px; padding: 40px 15px; border: 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: 18px; height: 18px; fill: #ccc; }
.rating-wrapper .star-on-png {fill: #36458d; }


.myreview-view .myreview-info {padding: 20px 0; }

.fm--myreview .page-bottom.pc {display: block; }
.fm--myreview .page-bottom.mobile {display: none; text-align: center; }




/* =======================================================
	마이 포인트
========================================================*/
.fm--mypoint .page-header .pc {display: none; }
.fm--mypoint .page-header .point {display: none; }

.fm--mypoint .mypoint-box {display: block; padding: 40px 40px; margin-bottom: 20px; }
.fm--mypoint .mypoint-box:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.fm--mypoint .mypoint-box .title {float: left; font-size: 16px; line-height: 1; line-height: 30px; }
.fm--mypoint .mypoint-box .point {float: right; font-size: 16px; color: #36458d; line-height: 1; }
.fm--mypoint .mypoint-box .point em {font-style: normal; font-size: 30px; font-weight: 700; }
.fm--mypoint .criteria-wrapper .range-tab {float: left; }
.fm--mypoint .criteria-wrapper .selectbox {width: 200px; float: left; margin-left: 20px; }
.fm--mypoint .criteria-wrapper .btn-search {width: 80px; float: left; margin-left: 10px; }


.mypoint-list li.nodata {padding: 200px 0; }
.mypoint-list .mypoint-state {width: 100px; padding: 20px 0 20px 20px; }
.mypoint-list .state {width: 80px; height: 80px; line-height: 78px; }

.mypoint-list .mypoint-info {width: calc(100% - 160); padding: 20px 20px; text-align: left; }
.mypoint-list .mypoint-info .date {font-size: 13px; }

.mypoint-list .mypoint-amount {width: 95px; padding: 20px 20px 20px 0; }


/* =======================================================
	마이 쿠폰
========================================================*/
.fm--mycoupon .coupon-register {}
.fm--mycoupon .coupon-register:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.fm--mycoupon .coupon-register .text-guide {float: left; line-height: 40px; }
.fm--mycoupon .coupon-register .input-btn-group {float: right; }
.fm--mycoupon .coupon-register .input-title {float: left; display: inline-block; line-height: 40px; font-weight: 700; margin-right: 10px; }
.fm--mycoupon .coupon-register .input-text {width: 180px; height: 40px; line-height: 40px;}
.fm--mycoupon .coupon-register .btn {height: 40px; line-height: 40px; }

.section-mycoupon {padding: 0 0; margin-top: 30px; }

.section-mycoupon .coupon-item .coupon-left {padding: 30px 30px; }
.section-mycoupon .coupon-item p {font-size: 14px;  }


.section-mycoupon.past .coupon-list .nodata {background-color: #fff; }


}


/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1024px to 1099px
*/

@media (min-width: 1024px) and (max-width: 1099px) and (hover:hover) {

/* =======================================================
	마이페이지 메인
========================================================*/
.mypage-item.col-full {float: none; width: 100%; }
.mypage-item.col-02 {float: left; width: calc(50% - 10px); }

/* 주문내역 */
.myorder-list li .title {width: 500px; }


/* 최근본 상품 */
.myrecently-list li {float: left; width: 32%; margin-left: 2%; }
.myrecently-list li:first-child {margin-left: 0; }
.myrecently-list .myrecently-thumb {width: 100%; height: auto; }

/* 관심상품 */
.myzzim-list li {float: left; width: 32%; margin-left: 2%; }
.myzzim-list li:first-child {margin-left: 0; }
.myzzim-list .myzzim-thumb {width: 100%; height: auto; }

}


/*
  ##Device = Desktops
  ##Screen = B/w 1200px to
*/
@media (min-width: 1200px) {

/* =======================================================
	마이페이지 메인
========================================================*/
.mypage-item.col-full {float: none; width: 100%; }
.mypage-item.col-02 {float: left; width: calc(50% - 10px); }

/* 주문내역 */
.myorder-list li .title {width: 580px; }


/* 최근본 상품 */
.myrecently-list li {float: left; width: 123px; margin-left: 7px; }
.myrecently-list li:first-child {margin-left: 0; }
.myrecently-list .myrecently-thumb {width: 123px; height: 123px;  }

/* 관심상품 */
.myzzim-list li {float: left; width: 123px; margin-left: 7px; }
.myzzim-list li:first-child {margin-left: 0; }
.myzzim-list .myzzim-thumb {width: 123px; height: 123px; }


}

@media (max-width:425px){
  
.fm--myinfo .fm--delivery .form-title-area .title { float: none; }
.fm--myinfo .fm--delivery .form-title-area .btn { float: left; margin-top: 5px; }
}