._con { padding-top: 0; display: flex; flex-direction: column; }
.membershipInfor { border-bottom: 1.5px solid #000;; padding: 20px 0; }
.membershipInfor ul { background-color: #000; display: flex; color: #fff; padding: 30px 0; }
.membershipInfor ul li { text-align: center; border-right: 1px solid #393939; width: 220px; padding: 0 30px; display: flex; height: 80px; flex-wrap: wrap; align-items: center; }
.membershipInfor ul li > div { width: 100%; }
.membershipInfor ul li > .tit { font-size: 20px; font-weight: 500; line-height: 20px; }
.membershipInfor ul li > .txt { font-size: 23px; font-weight: 600; color: var(--colmainY); }
.membershipInfor ul li.lavel .txt { color: var(--colmainB); }
.membershipInfor ul li.upgrade { border-right: 0; width:540px; }
.membershipInfor ul li.upgrade .upgradeTxt { text-align: left; }
.membershipInfor ul li.upgrade .upgradeDay { text-align: right; }
.membershipInfor ul li.upgrade .txt { color:var(--txt_03); font-size: 14px; }
.membershipInfor ul li.upgrade .tit { font-size: 16px; }
.membershipInfor ul li.upgrade div div:first-child { margin-bottom: 8px; }
.membershipLevel { padding: 70px 0; }
.membershipLevel > .tit { font-size:31px; font-weight: 600; text-align: center; margin-bottom: 70px; }
.membershipLevel .lavelWrap { position: relative; width:calc(100% - 200px); margin: 0 auto;; }
.membershipLevel .lavelWrap .bar { height: 10px; width: 100%; background-color: var(--bg_02); border-radius: 10px;; position: absolute; top: 45px; }
.membershipLevel .lavelWrap .bar div { border-radius:10px;; height: 10px; position: absolute; left: 0; top: 0; background-color: var(--colmainY); }
.membershipLevel .lavelWrap ul { display: flex; z-index: 1; justify-content: space-between; position: relative; width: 100%; flex-wrap: wrap; }
.membershipLevel .lavelWrap ul li { position: relative; }
.membershipLevel .lavelWrap ul li:first-child .tit span:after { display: none; }
.membershipLevel .lavelWrap ul li:first-child .tit { padding: 0; }
.membershipLevel .lavelWrap ul li .tit { display: flex; flex-wrap: wrap; padding-top: 16px; align-items: center; background-color: var(--bg_02); width: 100px; height: 100px; border-radius: 100px; border:9px solid var(--bg_01); text-align: center; margin: 0 auto;; }
.membershipLevel .lavelWrap ul li.on .tit { background-color: var(--colmainB); color: #fff; border-color: var(--colmainB); }
.membershipLevel .lavelWrap ul li .tit span { position: relative; font-size: 20px; font-weight: 800; display: block; width: 100%; }
.membershipLevel .lavelWrap ul li .tit span:after { content: "BANOLIM"; display: block; position: absolute; top:-16px; font-weight: 500; font-size: 14px; width: 100%; text-align: center; color: #797979; }
.membershipLevel .lavelWrap ul li .txt { line-height: 16px; margin-top: 14px; text-align: center; width:150%; position: absolute; left: 50%; transform: translateX(-50%); }
.membershipLevel .lavelWrap ul li .txt span { font-size: 14px; font-weight: 600; }
.membershipLevel .lavelWrap ul li .tit span { font-size: 16px; }
.benefits { display: inline-flex; flex-wrap: wrap; flex-direction: column; justify-content: center; margin: 0 auto;; }
.benefitsTit { width: 100%; text-align: center; margin-top: 50px; }
.benefitsTit span { font-size:31px; padding: 0 5px; font-weight: 600; background-image: linear-gradient(to bottom, #fff 50%, var(--colmainY) 50%) }
.benefits ul { margin-top: 60px; display: inline-flex; flex-direction: column; }
.benefits ul li { display: flex; flex-wrap: wrap; margin-bottom: 70px; }
.benefits ul li .titWrap { width: 200px; }
.benefits ul li .titWrap .tit { position: relative; font-size: 24px; font-weight: 800; line-height: 26px; }
.benefits ul li:first-child .titWrap .tit:after { display: none; }
.benefits ul li .titWrap .tit:after { content: "BANOLIM"; display: block; position: absolute; top: -24px; color: #797979; font-weight: 400; font-size: 14px; }
.benefits ul li .titWrap .tit div { color: #797979; }
.benefits ul li .titWrap .txt { color: var(--txt_02); font-weight: 600; line-height: 16px; margin-top: 10px; }
.benefits ul li .benefitsLsit div { position: relative; font-size: 16px; font-weight: 600; margin-bottom: 10px; padding-left: 16px; }
.benefits ul li .benefitsLsit div::after { display: block; content: ""; width: 5px; height: 5px; border-radius: 5px; background-color: #000; position: absolute; left: 0; top: 6px; }
.benefits ul li .benefitsLsit div span { color:#ff0000; }
.notice .tit { font-weight: 600; margin-bottom: 17px; font-size: 16px; }
.notice ._dotList span { padding-left: 16px; font-size: 14px; line-height: 26px; color: var(--txt_02); }
.notice ._dotList span:after { background-color: var(--txt_02); width: 3px; height: 3px; }
@media screen and (max-width: 720px){
 ._con { padding-top: var(--100); }
.membershipInfor { border-bottom: 0; padding: 0; }
.membershipInfor ul { position: relative; display: block; padding:var(--64) var(--50) var(--60); }
.membershipInfor ul li { text-align: left; border-right:0; width: initial; padding: 0; display: block; height: initial; }
.membershipInfor ul:after { content: ""; display: block; clear: both; }
.membershipInfor ul li > div { width: initial; }
.membershipInfor ul li > .tit { font-size: var(--28); line-height:var(--28); color: var(--txt_03); font-weight: 400; margin-bottom: var(--10); }
.membershipInfor ul li > .txt { font-size: var(--40); color: #fff; }
.membershipInfor ul li.lavel { position: absolute; left: var(--36); top: var(--64); }
.membershipInfor ul li.count { text-align: right; margin-bottom: var(--50); }
.membershipInfor ul li.price { text-align: right; padding-bottom: var(--50); border-bottom: 1px solid #393939; margin-bottom: var(--50); }
.membershipInfor ul li.upgrade { width:100%; }
.membershipInfor ul li.upgrade .txt { font-size: var(--24); line-height: var(--24); }
.membershipInfor ul li.upgrade .tit { font-size:var(--30) }
.membershipInfor ul li.upgrade div.upgradeTxt { margin-bottom: var(--50); }
.membershipInfor ul li.upgrade div div:first-child { margin-bottom: var(--14); }
.membershipLevel { padding: var(--100) 0; padding-bottom: var(--70); }
.membershipLevel .lavelWrap { width: 100%; }
.membershipLevel .lavelWrap ul li .txt { display: none; }
.membershipLevel .lavelWrap ul li .tit { width: var(--140); height: var(--140); background-color: transparent; border: 0; }
.membershipLevel .lavelWrap ul li.on .tit { color: var(--colmainB); background-color: transparent; border: 0; }
.membershipLevel .lavelWrap ul li .tit span { transform: translateY(var(--30)); font-size: var(--26); }
.membershipLevel .lavelWrap .bar { width: calc(100% - var(--140)); left: 50%; transform: translateX(-50%); top:var(--22); height: var(--10); }
.membershipLevel .lavelWrap .bar div { height: var(--10); }
.membershipLevel .lavelWrap ul li .tit span:after { font-size: var(--22); top: -4vw; font-weight: 400; }
.membershipLevel > .tit { font-size: var(--44); margin-bottom: var(--64); font-weight: 600; }
.membershipLevel .lavelWrap ul { padding:0 var(--20); }
.membershipLevel .lavelWrap ul li .tit:after { content: ""; display: block; width: var(--48); height: var(--48); border-radius: var(--140); box-sizing: border-box; background-color:var(--bg_02); border:var(--10) solid var(--bg_01); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.membershipLevel .lavelWrap ul li.on .tit:after { background-color: var(--colmainB); border:0; }
.benefits { display: block; padding: 0 var(--36); margin-top: var(--100); }
.benefits > .tit { width: 100%; text-align: center; margin-top: 0; }
.benefits > .tit span { font-size:var(--44); }
.benefits ul { margin-top: var(--40); }
.benefits ul li { display: block; margin-bottom: 0; border-bottom: 1px solid var(--line_02); padding: var(--50) 0; padding-top: var(--72); }
.benefits ul li:last-child { border-bottom: 0; }
.benefits ul li .titWrap { width: 100%; margin-bottom: var(--26); }
.benefits ul li .titWrap .tit { font-size: var(--32); font-weight: 700; line-height: var(--32); }
.benefits ul li .titWrap .tit:after { top:-5vw; font-size:var(--22); }
.benefits ul li .titWrap .txt { font-size: var(--24); line-height: var(--32); margin-top:var(--12); }
.benefits ul li .benefitsLsit div { font-size: var(--26); line-height: var(--38); margin-bottom: var(--14); padding-left: var(--20); }
.benefits ul li .benefitsLsit div:last-child { margin-bottom: 0; }
.benefits ul li .benefitsLsit div::after { width: var(--5); height: var(--5); border-radius: var(--5); top: var(--12); }
.benefits ul li .benefitsLsit div span { color:#ff0000; font-size: var(--26); }
.notice { padding:var(--60) 0; margin-top: var(--50);}
.notice .tit { font-size: var(--28); font-weight: 700; margin-bottom: var(--20); }
.notice ._dotList span { padding-left: var(--16); font-size: var(--24); line-height: var(--36); margin-bottom: var(--12); }
.notice ._dotList span:after { width: var(--5); height:var(--5); transform: translate(0,0); top: var(--16); }
footer { padding-bottom: var(--120); }
}