@charset "utf-8";
/* CSS Document */


/*마이페이지 메인*/

.mypagebox{margin-top: -41px;}
.mypagebox .memberInfo{
    position: relative;
    margin: 35px 4vw;
    padding-left: 30vw;
    letter-spacing: -.75px;
}
.mypagebox .memberInfo .m_name{
    display: block;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.75px;
}
.mypagebox .memberInfo .m_img{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-color: #f7f7f7;
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: auto 45px;
    width: 28vw;
    height: 28vw;
    max-width: 100px;
    max-height: 100px;
    border-radius: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-image:url(/mobile/images/mypage/mypage_lv_guest.png);
}
.mypagebox .memberInfo .m_img.guest{
    background-image:url(/mobile/images/mypage/mypage_lv_guest.png);    
}
.mypagebox .memberInfo .m_img.family{
    background-image:url(/mobile/images/mypage/mypage_lv_family.png);
}    
.mypagebox .memberInfo .m_img p{
    margin-bottom: 20px;
    font-size: 14px;
    color: #ea627c;
    font-weight: 700;
}
.mypagebox .memberInfo .m_grade{
    margin-bottom: 5px;
    display: inline-block;
    font-size: 15px;
    letter-spacing: -1.5px;
}
.mypagebox .memberInfo .credit_name{
    display: inline-block;
    padding: 3px 6px;
    color: #fff;
    font-weight: 500;
    background: #f3429a;
    font-size: 11px;
    border-radius: 5px;
    margin-left: 8px;
}
.mypagebox .memberInfo .m_benefit{font-size: 13px;}
.mypagebox .memberInfo .m_benefit span{font-weight: 500; color: #ea627c;}
.mypagebox .memberInfo .m_btns{margin-top:15px;}
.mypagebox .memberInfo .m_btns a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    border:1px solid #d3d3d3;
    background:#f9f9f9;
    color: #0b0b0b;
    line-height: 32px;
}
.mypagebox .memberInfo .m_btns .btn_levelinfo{background:#444; color: #fff; width: 125px;}
.mypagebox .memberInfo .m_btns .btn_memberedit{}

.mypageMenu{}
.mypageMenu .menutop{border-top:10px solid #e6e6e6; border-bottom:10px solid #e6e6e6; display: flex;}
.mypageMenu .menutop li{flex: 1 1 33.333%; border-left: 1px solid #e6e6e6;}
.mypageMenu .menutop li:first-child{border-left:0;}
.mypageMenu .menutop li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 95px;
    justify-content: center;
}
.mypageMenu .menutop li a span{font-size: 16px;}
.mypageMenu .menutop li a span:before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 5px;
    margin-bottom: -5px;
}
.mypageMenu .menutop li a b{
    font-size: 18px;
    margin-top: 5px;
    letter-spacing: -.75px;
}

.mypageMenu .menutop li.point a span:before{
    background-image:url(/mobile/images/mypage/ico_mypage01.png);}
.mypageMenu .menutop li.coupon a span:before{
    background-image:url(/mobile/images/mypage/ico_mypage02.png);}
.mypageMenu .menutop li.pielscore a span:before{
    background-image:url(/mobile/images/mypage/ico_mypage03.png);}




.mypageMenu .menubtm{}
.mypageMenu .menubtm li{border-bottom:1px solid #e6e6e6;}
.mypageMenu .menubtm li a{
    display: flex;
    margin: 0 15px;
    padding: 12px 0;
    align-items: center;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.mypageMenu .menubtm li a:before{
    content:'';
    display: block;
    width:30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
    margin-right: 10px;
}
.mypageMenu .menubtm li a:after{
    content:'';
    display: block;
    width:7px;
    height:7px;
    border-top:1px solid #727272;
    border-right:1px solid #727272;
    transform:rotate(45deg);
    position: absolute;
    right: 0;
}
.mypageMenu .menubtm li.wishlist a:before{
    background-image:url(/mobile/images/mypage/ico_mypage04.png);
}
.mypageMenu .menubtm li.point a:before{
    background-image:url(/mobile/images/mypage/ico_mypage05.png);
}
.mypageMenu .menubtm li.coupon a:before{
    background-image:url(/mobile/images/mypage/ico_mypage06.png);
}
.mypageMenu .menubtm li.order a:before{
    background-image:url(/mobile/images/mypage/ico_mypage07.png);
}
.mypageMenu .menubtm li.modify a:before{
    background-image:url(/mobile/images/mypage/ico_mypage08.png);
}
.mypageMenu .menubtm li.board a:before{
    background-image:url(/mobile/images/mypage/ico_mypage09.png);
}
.mypageMenu .menubtm li.message a:before{
    background-image:url(/mobile/images/mypage/ico_mypage09.png);
}
.mypageMenu .menubtm li.setting a:before{
    background-image:url(/mobile/images/mypage/ico_mypage09.png);
}

.popupbox{
    position: fixed;
    left: 0px;
    top: 0;
    right: 0px;
    bottom: 0px;
    z-index: 99;
    background: rgba(0,0,0,0.6);
    display: none;
}
.popupbox.on{display: block;}
.popupbox .wrap{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
}
.popupbox .wrap .body{}
.popupbox .wrap .body img{}
.popupbox .wrap .btn_close{
    position: absolute;
    bottom: -50px;
    left: 50%;
    margin-left: -25px;
    display: block;
    width: 50px;
    height: 50px;
}
.popupbox .wrap .btn_close:before, .popupbox .wrap .btn_close:after{
    content: '';
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
    position: absolute;
    left: 7px;
    top: 50%;
}
.popupbox .wrap .btn_close:after {
    transform: rotate(-45deg);
}




/*마이페이지 메인 끝*/

/*회원정보 수정 페이지*/

.btnArea.type2 {
    padding: 0 3px;
}

.btnArea {
    overflow: hidden;
    position: relative;
    margin: 14px auto 0px;
    text-align: center;
}

.btnArea.type2 > a:nth-child(1), .btnArea.type2 > button:nth-child(1) {
    left: -3px;
}

.btnArea.type2 > a, .btnArea.type2 > button {
    width: 50%;
    height: 39px;
    line-height: 39px;
    margin: 0 auto;
    font-size: 16px;
}

.btnArea .btnSubmit {
    color: #fff;
    background: #f15e7b;
}

.btnArea .btnEm {
    color: #000;
    background: #dcdcdc;
}

.btnArea > a, .btnArea > span, .btnArea > button {
    position: relative;
    display: inline-block;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
    font-family: Verdana,"맑은 고딕",Malgun Gothic,"돋움",Dotum;
    border-radius: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btnArea {
    min-width: 100%;
    margin: 20px auto;
    text-align: center;
    font-size: 0;
    line-height: 0;
    letter-spacing: -4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
}

.btn {

      border: 1px #f05d7b solid;
    background: #ffffff;
    color: #f05d7b;
    font-weight: bold;
    padding: 15px 5px;
    width:170px;
font-size: 15px;
height: 30px;
    line-height: 30px;
    margin: 30px;
    text-align: center;
    position: relative;
    left:100%;


}
.btn a {color: #f15e7b;}
/*
.btn:active {

   position: relative;
    top: 3px;
    left: 3px;
	 background: #f05d7b;
    color: #fff;
    box-shadow: 0px 0px 0px 0px #a0a0a0;

}
.btn:active a {color: #fff;} */

.offbtn {

  border: 1px #969696 solid;
    background: #c1c1c1;
    color: #a2a2a2;
    font-weight: bold;
    padding: 15px 5px;
	    height: 30px;
		    font-size: 15px;
    line-height: 30px;
    margin: 9px 0px 0 20px;
    box-shadow: 3px 3px 0px 0px #a0a0a0;

}
.offbtn:active {
    position: relative;
    top: 3px;
    left: 3px;
    box-shadow: 0px 0px 0px 0px #a0a0a0;
}

.recom_btn {

  border: 1px #6baae1 solid;
     background: #ffffff;
    color: #0971ce;
    font-weight: bold;
    padding: 15px 5px;
	    height: 30px;
		    font-size: 15px;
    line-height: 30px;
    margin: 9px 0px 0 20px;
    box-shadow: 3px 3px 0px 0px #a0a0a0;

}
.recom_btn a{color: #0971ce;}
.recom_btn:active {
    position: relative;
    top: 3px;
    left: 3px;
	 background: #0971ce;
    color: #fff;
    box-shadow: 0px 0px 0px 0px #a0a0a0;
}

.recom_btn:active a{
  color: #fff;
}

.recom_del_btn {

  border: 1px #f05d7b solid;
     background: #f05d7b;
    color: #fff;
    font-weight: bold;
    padding: 15px 5px;
	    height: 30px;
		    font-size: 15px;
    line-height: 30px;
    margin: 9px 0px 0 20px;
    box-shadow: 3px 3px 0px 0px #a0a0a0;

}
.recom_del_btn a{color: #fff;}
.recom_del_btn:active {
    position: relative;
    top: 3px;
    left: 3px;
    box-shadow: 0px 0px 0px 0px #a0a0a0;
}


.point_change_on{
padding: 4px 10px;
border-radius: 10px;
background: #ffa409;
color: #fff;
font-size: 18px;
font-weight: bold;
margin-left: 35px;
}
.point_change_off{
padding: 4px 10px;
border-radius: 10px;
background: #7b7c7c;
color: #999999;
font-size: 18px;
font-weight: bold;
margin-left: 35px;
}

.like_prod_btn{
border-radius: 10px; background: #0971ce;width: 170px;height:45px; line-height:45px;margin: 40px 0 0 10px;text-align: center;float: left;margin-left: 35px;
}
.logout_btn{
    text-align: center;
    margin: 20px 0;
}.logout_btn a.logout{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    border: 1px solid #d3d3d3;
    background: #f9f9f9;
    color: #0b0b0b;
    line-height: 32px;
}