/* BASIC css start */
#mypage .info {justify-content: space-between;}
#mypage .info:after {content:none;}

#mypage .info .memGrade {width:530px;}
#mypage .info .memGrade .gradeWrap {display:flex; line-height:22px; justify-content: space-between; font-size:13px; margin-top:7px;}
#mypage .info .memGrade .gradeWrap .nowGroup {color:#5E5E5E; font-weight:500;}
#mypage .info .memGrade .gradeWrap .nowGroup b {font-weight:600;}
#mypage .info .memGrade .gradeWrap .nextGroup {color:#ccc; font-weight:600;}

#mypage .info .memGrade .graph {position:relative; width:100%; height:10px; border-radius:5px; background:#f0f0f0; font-size:12px; font-weight:400; margin-top:50px;}
#mypage .info .memGrade .graph .left {position:absolute; right:0; background:#000; padding:0 15px; line-height:30px; color:#fff; border-radius:5px; top:-50px;}
#mypage .info .memGrade .graph .left:after {
    content:'';
    position: absolute;
    right: 10px;
    bottom:-5px;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 5px solid #000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

#mypage .info .memGrade .graph .gage {display:inline-block; position:absolute; top:0; left:0; width:0%; background:#75A7D8; height:100%; border-radius:6px;}
#mypage .info .memGrade .graph .gage .point {width:6px; height:6px; border:3px solid #75A7D8; position:absolute; right:-6px; top:-4px; border-radius:50%; background:#fff; box-sizing:content-box;}


#mypage { position: relative; margin: 0 auto; margin-bottom: 100px; }
/* ȸ¿ø Á¤º¸ */
#mypage .info {background:#F7F7F8; display:flex; padding:40px;}
#mypage .info:after { display:block; clear:both; content:'' }


#mypage .info .user {position:relative; height:85px; width:375px; white-space: nowrap;}

#mypage .info .user {display:flex;}
#mypage .info .user .user-img {width:85px; height:85px; text-align:center; line-height:85px; flex-shrink: 0;}
#mypage .info .user .user-info {display: flex; align-content: center; flex-wrap: wrap; margin-left:20px; font-weight:300;}
#mypage .info .user .user-info > div { font-size:14px; color:#000 }
#mypage .info .user .user-info > div span.big {display:block; font-size:18px; margin-bottom:8px}
#mypage .info .user .user-info > div span.grade {color:#75A7D8; font-weight:600;}
#mypage .info .user .user-info > div a {display:block; margin-top:8px; font-size:13px; color:#000;}

#mypage .info .user .user-info .box { padding-top:10px }
#mypage .info .user .user-info .box dl { padding-top:10px; *zoom:1 }
#mypage .info .user .user-info .box dl:after { display:block; clear:both; content:'' }
#mypage .info .user .user-info .box dl dt { float:left; width:90px; font-size:14px }
#mypage .info .user .user-info .box dl dd { float:left; font-size:14px; color:#8d8d8d }


#mypage .info .order {margin-left:50px; width:100%; font-size:0;}
#mypage .info .order a {float:left; width:25%; text-align:center; border-right:1px solid #ddd; box-sizing:border-box;}
#mypage .info .order a:last-child {border-right:0;}
#mypage .info .order a span, #mypage .info .order a b {display:block;}
#mypage .info .order a span {font-size:14px; color:#000;}
#mypage .info .order a b {font-size:22px; font-weight:600; color:#000; margin-top:30px;}
#mypage .info .order a b em {font-size:14px;}

/* BASIC css end */