/* BASIC css start */
.user_rank_banner{background:url("/design/charmzone/renew_22/img/mo/member_img_01.png") center no-repeat;background-size: 85%; height:204px;background-color:#f3f3f3;text-align:center;display:grid;align-content:center;grid-gap: 15px;}
.user_rank_banner .bannerText{font-size:38px;line-height:40px;font-weight:900; color:#092e49;}
.user_rank_banner .bannerText span{ display:block;color:#81a3bf; }
.user_rank_banner .bannerSubText{font-size:13px;}

.user_rank_page{position:relative;}
.user_rank_page .tabType.fixedScroll{left:12px;width:calc(100% - 24px);}
.user_rank_page .tabType.fixedScroll ul{background:#f3f3f3;border-radius:4px;}
.user_rank_page .rankArea{text-align:center;}
.user_rank_page .rankArea .rankBox{padding-top:60px;}
.user_rank_page .rankArea .rankBox:after{content:'';display:block;clear:both;}
.user_rank_page .rankArea .ttl{font-size:21px;line-height:1;font-weight:600;}
.user_rank_page .rankArea .cmt{font-size:14px;font-weight:600;line-height:23px;margin-top:10px;}
.user_rank_page .rankArea .box{padding:36px 30px 32px;}
.user_rank_page .rankArea .rank01{border:3px solid #ff65af;text-align:left;border-radius:5px;}
.user_rank_page .rankArea .rank01 .ttl{color:#ff65af;}
.user_rank_page .rankArea .rank02{border:3px solid #9b9b9b;text-align:left;border-radius:5px;margin-top:15px;}
.user_rank_page .rankArea .rank02 .ttl{color:#9b9b9b;}
.user_rank_page .rankArea .rank03{border:3px solid #d3a777;text-align:left;border-radius:5px;margin-top:15px;}
.user_rank_page .rankArea .rank03 .ttl{color:#d3a777;}
.user_rank_Page .rankArea .joinUsBtn { display: block; width: 168px; margin:30px auto 0; line-height: 48px; font-size: 16px; font-weight: 500; color: #fff; background: #092e49; border-radius: 40px;}

.user_rank_Page{position:relative;}
.user_rank_Page .tabArea{height:50px;overflow:hidden;position:relative; margin: 0px;}
.user_rank_Page .tabArea ul{position:absolute;width:100%;max-width:600px;overflow:hidden;border-top:1px solid #f3f3f3;border-left:1px solid #f3f3f3;margin:0 -1px;}
.user_rank_Page .tabArea ul.fixed{position:fixed;top:51px;z-index:9;}
.user_rank_Page .tabArea li{background-color:#f3f3f3;border-right:1px solid #f8f8f8;border-bottom:1px solid #f8f8f8;float:left;box-sizing:border-box;width:25%;}
.user_rank_Page .tabArea li a{font-size:12px;color:#222;display:block;padding:15px 0;text-align:center;line-height: 18px;padding:15px 0;}
.user_rank_Page .tabArea li.current a{color:#fff;background:#222;}
.user_rank_Page .rankArea{position:relative;text-align:center;padding:40px 0;}
.user_rank_Page .rankArea .center{position:absolute;width:190px;top:50%;right:0;
-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);}
.user_rank_Page .rankArea .center .couponName{font-size:13px; color:#fff;}
.user_rank_Page .rankArea .center .couponBenefit{font-size:30px; color:#fff; font-weight:bold; line-height:40px;}
.user_rank_Page .rankArea .center .couponBenefit span{font-size:36px;}

.user_rank_Page .rankArea .benefit{display:block; margin:0 auto; width:55px;line-height:22px; font-weight:bold; text-align:center; border-radius:15px;font-size:12px;color:#222;border:1px solid #222;background-color:#fff;}
.user_rank_Page .rankArea .join{padding:0px 40px;}
.user_rank_Page .rankArea .areaTitle{font-size:22px;line-height:1.2;font-weight:600;padding:10px 0;}
.user_rank_Page .rankArea .areaSubTitle{font-size:14px; margin-bottom:35px; color:#777;}
.user_rank_Page .rankArea .p15_0{padding:15px 0;}
.user_rank_Page .rankArea .couponL{position:relative;width:228px;height:140px;margin:0 auto 24px;background:url(/design/charmzone/renew_22/img/mo/member_img_02.png) no-repeat left center / 250px auto;}
.user_rank_Page .rankArea .couponM{position:relative;width:100px;height:65px;margin-left:10px;background:url(/design/charmzone/renew_22/img/mo/member_img_07.png) no-repeat left center / 100px auto;}
.user_rank_Page .rankArea .couponS{position:relative;width:70px;height:42px;background:url(/design/charmzone/renew_22/img/mo/member_img_07.png) no-repeat left center / 70px auto;}
.user_rank_Page .rankArea .couponS .center{width:100%;}
.user_rank_Page .rankArea .couponS p{font-weight:600;}
.user_rank_Page #area02{background-color:#f6f6f6;}
.user_rank_Page #area02 .couponArea{margin:20px 30px 0px;}
.user_rank_Page #area02 .couponArea>li{display:flex;background-color:#fff;padding:20px 0;margin:10px 0;border:solid 1px #222;justify-content:space-evenly;align-items:center;}
.user_rank_Page #area02 .couponArea .iconArea{width:15%;max-width:80px;}
.user_rank_Page #area02 .couponArea .iconArea img{width:36px;}
.user_rank_Page #area02 .couponArea .txtArea{width:55%;text-align:left;}
.user_rank_Page #area02 .couponArea .txtArea p{font-size:14px; font-weight:bold; margin-bottom:5px;}
.user_rank_Page #area02 .couponArea .circleNum{display:inline-block;width:15px;height:15px;border:1px solid #81a3bf;border-radius:50%;background-color:#81a3bf;color:#fff;text-align:center;line-height:15px;font-weight:400;font-size:10px;margin-right:3px;vertical-align:middle;}
.user_rank_Page #area02 .couponArea .dotUl li{position:relative;padding-left:6px;font-size:13px;text-align:left;line-height:18px; color:#666;}
.user_rank_Page #area02 .couponArea .dotUl li:before{content:'';position:absolute;left:0;top:6px;width:2px;height:2px;background:#222;}
.user_rank_Page #area03{background-color:#ececec; padding-bottom:80px;}
.user_rank_Page #area03 .rankBox{padding:0 24px;}
.user_rank_Page #area03 .rankBox > li{margin-bottom:24px;}
.user_rank_Page #area03 .rankBox .ttlArea{position:relative;padding:25px 15px;color:#fff;}
.user_rank_Page #area03 .rankBox .ttlArea .ttl{font-size:21px;line-height:1;font-weight:600;color:#fff;}
.user_rank_Page #area03 .rankBox .ttlArea .cmt{font-size:14px;font-weight:400;line-height:23px;margin-top:10px;}
.user_rank_Page #area03 .rankBox .ttlArea .arrow{position:absolute;display:inline-block;width:25px;height:20px;top:50%;right:15px;transition:all 0.5s;background:url(/design/charmzone/renew_22/img/mo/member_img_06.png?202209200503) no-repeat left center / 25px auto;
-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.user_rank_Page #area03 .rankBox .ttlArea .arrow.open{-webkit-transform:translateY(-50%) rotate(180deg);-ms-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg); transition:all 0.5s;}
.user_rank_Page #area03 .rankBox ul{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;padding:0;max-height:0;opacity:0;overflow-y:hidden;transition:all 0.5s;background-color:#fff;}
.user_rank_Page #area03 .rankBox ul li{}
.user_rank_Page #area03 .rankBox ul.open{padding:20px 15px;max-height:192px;opacity:1;transition:all 0.5s;overflow:hidden;}
.user_rank_Page #area03 .rankBox ul.open li{margin-bottom:10px;}
.user_rank_Page #area03 .rankBox ul li p{font-size:14px;text-align:center;line-height:18px;padding:5px 0px; color:#555;}
.user_rank_Page #area03 .rankBox ul li p span{font-size:13px;}
.user_rank_Page #area03 .rankBox ul li p img{height:20px;}
.user_rank_Page #area03 .rankBox ul li > p{font-size:12px; line-height:15px;}
.user_rank_Page #area03 .rankBox .rank01{text-align:left;background-color:#7d848a;}
.user_rank_Page #area03 .rankBox .rank02{text-align:left;background-color:#4db9c6;}
.user_rank_Page #area03 .rankBox .rank03{text-align:left;background-color:#ffb12e;}
.user_rank_Page #area03 .rankBox .rank04{text-align:left;background-color:#765ab1;}
.user_rank_Page #area03 .rankBox .rank05{text-align:left;background-color:#000000;}
.user_rank_Page #area03 .rankBox ul li p.rank_01{color:#7d848a}
.user_rank_Page #area03 .rankBox ul li p.rank_02{color:#4db9c6}
.user_rank_Page #area03 .rankBox ul li p.rank_03{color:#ffb12e}
.user_rank_Page #area03 .rankBox ul li p.rank_04{color:#765ab1}
.user_rank_Page #area03 .rankBox ul li p.rank_05{color:#000000}
.user_rank_Page #area03 .rankInfoWrap{ padding:0 24px; margin:30px 0 0;}
.user_rank_Page #area03 .rankInfoWrap ul li{ position:relative; padding-left:8px; text-align:left;font-size:12px; color:#999; line-height:20px;}
.user_rank_Page #area03 .rankInfoWrap ul li:before{ content: '-'; position: absolute;top:0; left:0; width:8px; text-align:center; line-height:20px;}
.user_rank_Page #area03 .rankInfoWrap .joinUsBtn{ display: block; width: 168px; margin:35px auto 0; line-height: 48px; font-size: 16px; font-weight: 500; color: #fff; background: #092e49; border-radius: 40px;}

#wrap .footerNotice .notice{
    margin-top:0;
}



/* BASIC css end */