/* BASIC css start */
#contentWrap { width:100%; background:#f6f8fc; padding: 80px 0 147px; }
#content { width:1240px; margin:0 auto; }
#content .page-body { display:flex; height:100%; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; border-radius:20px; background:#fff; }
#content .page-body > div { width:50%; }
#content .page-body .log-banner { border-radius:20px 0 0 20px; position:relative; overflow:hidden; }
#content .page-body .log-banner .swiper-num { width:48px; height:22px; color:#a6a6a6; left:auto; font-weight:500; line-height:22px; background:#fff; z-index:10; border-radius:100px; position:absolute; right:20px; bottom:20px; text-align:center; }
#content .page-body .log-banner .swiper-num .swiper-pagination-current { color:#222; }
#content .page-body .log-banner .swiper-slide img { border-radius:20px 0 0 20px; }


#loginWrap {  }
#loginWrap .mlog-sign { overflow:hidden; }
#loginWrap .mlog-sign h3 { padding-top:35px; font-size:18px; color:#363636; font-weight:bold; line-height:18px }
.log-small-banner { position:relative; margin-top:50px; }

/* member login */
#loginWrap .mlog-sign .mlog { position:relative; width:420px; margin:60px auto; }
#loginWrap .mlog-sign .mlog .logo { text-align:center; }
#loginWrap .mlog-sign .frm-list { padding-top:20px; position:relative;}
#loginWrap .mlog-sign .frm-list li { position:relative; width: 100%; margin-bottom:6px }
#loginWrap .mlog-sign .frm-list li label { padding-left:20px; position:absolute; top:0; left:0; width:100%; height:46px; color:#9a9a9a; line-height:46px; box-sizing:border-box; cursor:text; }
#loginWrap .mlog-sign .frm-list li input { padding-left:20px; width:100%; height:46px; line-height:46px; border:1px solid #dcdcdc; border-radius:4px; box-sizing:border-box; }
#loginWrap .mlog-sign .btn-mlog { padding-top:34px; position:relative; display:grid; }
#loginWrap .mlog-sign .btn-mlog a { text-align:center; width:100%; height:54px; font-size:15px; border:1px solid #642870; color:#642870; border-radius:4px;  font-weight:500; letter-spaing:.7px; line-height:54px; box-sizing:border-box; }
#loginWrap .mlog-sign .btn-mlog a.btn-login { margin-bottom:10px; background:#642870; color:#fff; }


#loginWrap .mlog-sign .se-log { position:relative; color:#606060; display:flex; align-items: center; margin-top:22px; }
#loginWrap .mlog-sign .se-log label { font-size:13px; font-weight:500; color:#606060; margin-right:20px; }
#loginWrap .mlog-sign .se-log a { margin-left: auto; color:#606060; font-weight:500; }
#loginWrap .mlog-sign .se-log label input[type=checkbox] { width:20px; height:20px; border-radius:4px; border:1px solid #bbb; vertical-align:middle;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-top:-2px;
    margin-right:5px;
}
#loginWrap .mlog-sign .se-log label input[type=checkbox]:checked { border-color:#1c1c1c; }
/* sign */
#loginWrap .mlog-sign .sign { margin-top:44px; padding-left:76px; width:386px }
#loginWrap .mlog-sign .sign dl { padding-top:22px }
#loginWrap .mlog-sign .sign dl dt { font-size:11px; color:#adadad }
#loginWrap .mlog-sign .sign dl dd { padding-top:15px }
#loginWrap .mlog-sign .sign dl dd a { width:384px; height:58px; font-size:15px; line-height:58px }
.log-small-banner .swiper-pagination-bullet-active { background:#222; }
/* simpleLogin */
#simpleLogin { text-align:center; margin-top:20px }
#simpleLogin .sns-login { font-size:0 }
#simpleLogin .sns-login a { display:inline-block; *display:inline; vertical-align:top; position:relative; margin:0 10px; }
#simpleLogin .sns-login a:first-child { }
#simpleLogin .sns-login a img { }
#simpleLogin .sns-login span { position:absolute; left:50%; top: -22px; margin-left: -40px; }
#simpleLogin .sns-login span img { width: 80px !important;}

.benefitWrap { width: 100%; margin:176px auto 147px; }
.benefitWrap h3 { font-size:36px; font-weight:bold; letter-spacing:-0.72px; margin-bottom:50px; text-align:center; }
.benefitWrap .benefitBox { margin-bottom:20px; gap:20px; }
.benefitWrap .benefitBox > div[class^="section"] { width:610px; height:250px; box-sizing:border-box; text-align:center;
    padding:95px 0 95px 282px; 
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:70px 25px;
    border-radius:10px;
}
.benefitWrap .benefitBox > div[class^="section"] .normal { font-size:21px; letter-spacing:-0.42px; }
.benefitWrap .benefitBox > div[class^="section"] .strong { font-size:29px; letter-spacing:-0.58px; font-weight:bold; color:#6e34a4; }

.benefitWrap .benefitBox .section01 { background-image:url('/design/mpmall2025/login/benefit01.png'); padding-right:150px !important; }
.benefitWrap .benefitBox .section02 { background-image:url('/design/mpmall2025/login/benefit02.png'); padding-right:155px !important; }
.benefitWrap .benefitBox .section03 { background-image:url('/design/mpmall2025/login/benefit03.png'); padding-right:121px !important; }
.benefitWrap .benefitBox .section04 { background-image:url('/design/mpmall2025/login/benefit04.png'); padding-right:120px !important; }

.mall_btn_join { width:100%; text-align:center; margin-top:70px;}
.mall_btn_join a { display:inline-block; width:312px; height:68px; background:#793baa; line-height:69px; font-size:24px; border-radius:100px; font-weight:bold; color:#fff; }

/* BASIC css end */