/* BASIC css start */
.mypage_main {padding:0 10px 80px;}
.app_download {line-height:56px; height:56px; background:#26231D; color:#fff; text-align:center; font-size:14px; display: block; margin-top: 30px;}
.side_info.offline h3 {font-size:14px; font-weight:500;}
.side_info.offline span {font-size:14px; font-weight:300; line-height:20px; margin-top:15px; display:block;  color:#8B8B8B;}
.side_info.offline a {font-size:14px; font-weight:500; line-height:20px; margin-top:15px; text-decoration: underline; display:block;}

.tit-page-2 .qrcode {position:absolute; top:0; right:0;}
.tit-page-2 .qrcode img {width:45px;}
.tit-page-2.line {padding-bottom:25px; border-bottom:1px solid #26231D;}

.new_member_benefit {margin-top:30px;}
.new_member_benefit ul {text-align:center; display:flex;}
.new_member_benefit ul:first-child {margin-bottom:30px;}
.new_member_benefit ul:nth-child(2) {margin-bottom: 30px;}
.new_member_benefit ul li {width:50%; position:relative;}
.new_member_benefit ul li:after {content:'กค'; line-height:16px; top:50%; margin-top:-8px; position:absolute; right:0;}
.new_member_benefit ul li:last-child:after {content:none;}
.new_member_benefit ul li span {display:block; color:#8B8B8B;}

.review_benefit {padding-top:30px; font-size:12px;}
.review_benefit dl {background:#F7F7F7; padding:20px 10px; margin-bottom:30px;}
.review_benefit dl:last-child {margin-bottom:0;}
.review_benefit dl dt {color:#000; position:relative;}

.review_benefit dl dd {color:#000; font-size:12px; margin-top:10px;}

.review_benefit dl dd ol {margin-top:10px; color:#8B8B8B; font-size:10px;}
.review_benefit dl dd ol li {padding-left:10px; line-height:18px; position:relative; color:#8B8B8B;}
.review_benefit dl dd ol li:after {content:'-'; position:absolute; top:0; left:0;}

#content.map {padding:0!important;}
#content.map #map {width:100%; height:100vh;}

.offline_event {background:#fff;}
.offline_event h2 {font-size:14px; font-weight:500; padding:100px 0; text-align:center;}
.offline_event ul {display:flex;}
.offline_event ul li {width:25%; margin-right:1px;}
.offline_event ul li:nth-child(4n) {margin-right:0;}
.offline_event ul li img {width:100%;}
.offline_event ul li .info {padding:10px 5px 0;}
.offline_event ul li h3 {font-size:12px; text-decoration:underline; font-weight:700;}
.offline_event ul li span {font-size:12px; font-weight:300; margin-top:8px; display:block;}

.map_overlay {display:none; position:absolute; bottom:44px; right:38px; background:#fff; width:310px; padding:50px 20px; box-sizing:border-box; border:1px solid #CDCDCD; z-index: 1000;}
.map_overlay .title {font-size:14px; line-height:19px;}
.map_overlay .info {margin-top:30px;}
.map_overlay .info dl dd {font-size:12px; line-height:20px; color:#8B8B8B;}
.map_overlay .info dl dd span {font-size:12px; line-height:20px; color:#8B8B8B;}
.map_overlay a {text-decoration:underline; font-size:12px; margin-top:30px; display:block;}
.map_overlay .map_overlay_close {position:absolute; top:17px; right:10px; margin-top:0;}

.map_overlay.open {display:block;}


.meber_grade_benefit {padding-top:30px;}
.meber_grade_benefit dl {overflow:hidden;}
.meber_grade_benefit dl dd {float:left; width:25%; height:50px; position:relative; color:#fff; text-align:center;}
.meber_grade_benefit dl dd.active .grade {height:50px; line-height:50px;}
.meber_grade_benefit dl dd .grade {position:absolute; left:0; width:100%; bottom:0; height:35px; line-height:35px; color:#fff; font-size:12px;}
.meber_grade_benefit dl dd .grade_01 {background:#303033;}
.meber_grade_benefit dl dd .grade_02 {background:#444446;}
.meber_grade_benefit dl dd .grade_03 {background:#58585B;}
.meber_grade_benefit dl dd .grade_04 {background:#949496;}


.meber_grade_benefit ul {}
.meber_grade_benefit ul li {width:100%; text-align:center; padding:25px 10px; display:none; background:#F7F7F7; box-sizing:border-box;}
.meber_grade_benefit ul li.active {display:flex; flex-wrap: wrap;}
.meber_grade_benefit ul li div {margin-bottom:30px; font-size:12px;}
.meber_grade_benefit ul li div:last-child {margin-bottom:0;}
.meber_grade_benefit ul li div span {font-size:12px; font-weight:300; display:block;}
.meber_grade_benefit ul li div.first {display:block; width:100%;}
.meber_grade_benefit ul li div {width:33.333333%; position:relative; box-sizing: border-box; padding: 0 10px;}
.meber_grade_benefit ul li div:after {content:'กค'; line-height:16px; top:50%; margin-top:-8px; position:absolute; right:0;}
.meber_grade_benefit ul li div:nth-child(3n+1):after {content:none;}
.meber_grade_benefit ul li div span {display:block; color:#8B8B8B;}


.meber_grade_benefit .information {font-size:10px; color:#8B8B8B; margin-top:25px;}
.meber_grade_benefit .information h3 {font-weight:500; font-size:10px; color:#8B8B8B;}
.meber_grade_benefit .information ol {margin-top:5px;}
.meber_grade_benefit .information ol li {padding-left:10px; line-height:18px; position:relative; color:#8B8B8B;}
.meber_grade_benefit .information ol li:after {content:'-'; position:absolute; top:0; left:0;}
/* BASIC css end */