body{position:relative;}

.mobileCard{display:none; background:#0074e5; color:#fff;}

.mcardBody{position:relative; background:#f1f1f1; border-radius: 10px;} 
.mCardBox{box-sizing:border-box; padding: 80px 0;} 
.mCardBox h2{text-align:center; font-size:22px; margin-bottom:32px; font-weight:bold;}
.mCardBox > div{max-width:360px; margin:0 auto;}
.mCardImg{ box-shadow:1px 1px 5px #00407f; border-radius:10px; box-sizing:border-box; padding:16px; background:#0074e5; width:240px; margin:0 auto 48px auto;} 
.mCardImg h3{ color:#fff; font-size:18px; font-weight:bold; margin-bottom:10px; text-align:right;} 
.logoBg{padding-top:40px;}

.mCardImg ul li{ color:#fff; font-size:15px; margin-top:10px; padding-left:65px; position:relative;} 
.mCardImg ul li span{ position:absolute; left:0;} 
.mCardBarcode{ box-sizing:border-box; margin-bottom:32px; text-align:center;}
.mCardBarcode p{margin-bottom:10px; color:#0074e5;}
.mCardInfo ul:after{content: ''; display: block; clear: both; visibility: hidden;}
.mCardInfo ul li{float:left; width:33.3%; box-sizing:border-box; margin-bottom:10px; color:#f1112c; text-align:center; }
.mCardInfo ul li span{display:block; color:#000; margin-bottom: 8px;}
.mCardInfo ul li:last-of-type{width:100%; padding:15px; margin-bottom:20px; color:#0074e5;} 
.mCardBox > ul{width:60%; border:1px dashed #bbb; padding :8px 12px; border-radius:12px; margin: 0 auto;}
.mCardBox > ul li{padding-left:12px; line-height:20px; margin-top:6px; position:relative; font-size:14px;} 
.mCardBox > ul li:after{position:absolute; content:''; top:7px; left:3px;  width: 4px;  height: 4px; display:block; background:#0074e5; border-radius:20px;}
/*모바일회원증*/
/*ALL Using CSS*/
@media screen and (max-width:767px) {
    .mCardBox > ul{width:90%; box-sizing: border-box;}
    .mobileCard{display:block; position:fixed; bottom:0; width:100%; left:0; right:0; z-index: 100;}
    .mobileCard a{display:block; height:50px; text-align:center; line-height:50px;}
}
/*mobile*/