/* BASIC css start */
body, h2 {font-family: 'Pretendard'!important;}

.pt130 {padding-top:130px;}
.pt170 {padding-top:170px;}
.pb20 {padding-bottom: 20px;}

.top-area-wrapper.svelte-181zunu {margin: 0!important;}
.FeaturedCampaignPlayer.svelte-1q97j0l.svelte-1q97j0l {margin-bottom: 0!important;}
.section2 {padding: 40px 0 0px 0;}
.mt10 {margin-top:10px;}

.section1 {position: relative;}
.main_title {position: absolute;bottom:0;left: 50%;transform: translate(-50%,-50%);text-align: center;color: #fff;width: 100%;}
.main_title1 {background: #fff;color: #000;border-radius: 15px;width: 160px;line-height: 1.7;margin: 0 auto;}
.main_title2 {margin: 20px 0;font-size: 33px;font-family: Brewery Com;font-weight: 700;color: #fff;line-height: 1.5;}
.main_title2 font {font-size: 12px;color: #fff;font-weight: 400;}
.main_title3 {line-height: 1.5;font-weight: 300;color: #fff;}


.side_title {line-height: 1.3;position: absolute;font-size: 12px;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;}
.side_title .st1{font-size: 25px;font-weight: 600;margin-bottom: 10px;}
.side_title .st2 {font-size: 20px;line-height: 1.5;}
.side_title .st3 {margin-bottom: 30px;}
.side_title .st4 {background: #26231D;color:#fff;border-radius: 5px;padding: 12px 0;}
.side_title a .st4 {font-size: 14px;font-family: Brewery Com;margin: 30px auto 15px;    width: 70%;}
.side_title .st5 {color:#8b8b8b;font-size: 12px;}
.section1title h2 {font-size: 16px;font-family: 'Pretendard'!important;line-height: 1;}
.right-group img:last-child {border-radius: 0 0 5px 5px;}

.side_container .side_wrapper .side_body {padding: 0!important;background: url(//sappun.img13.kr/site/event/20240313/MO_05.jpg);}
.new_member_benefit a {background: #000;color: #fff;padding: 20px 0;width: 100%;text-align: center;margin: 25px 0 0;} 
#contentWrapper.side {background: #fff!important;max-width: 1920px;margin: 0 auto;}
#contentWrapper.side #contentWrap {min-width: 1400px!important;}
.e_title {text-align: center;padding: 70px;font-family: Brewery Com;font-size: 15px;}
.e_title .e_maintitle {font-size: 30px;font-weight: 600;margin-top: 10px;}
#contentWrapper.side .side_container ~ #content {}
.F7F7F7 {background: #F7F7F7;}
.section1title {border-radius: 5px;font-family: 'Pretendard'!important;} 
.left-group {position: absolute;left: 30px;top: 30px;}
.right-group {display: flex;}
.section1title .left-group div:nth-child(1) {}
.section1title .left-group div:nth-child(2) {position: absolute;}
.con_cplist {display: flex;justify-content: space-between;padding-top:40px;}
.con_cp {padding: 30px;margin-right: 5px;width: 100%;}
.con_cp:last-child {margin-right: 0px;}
.con_cp .cp1 {font-family: Brewery Com;font-weight: 700;margin-bottom: 40px;}
.con_cp .cp2 {text-align: right;font-size: 25px;font-family: Brewery Com;font-weight: 700;line-height: 52px;}
.con_cp .cp3 {text-align: right;color: #A0A0A0;font-weight: 300;}
#content .tit-page-3 a {line-height: 16px;text-decoration: underline;margin-top: 10px;}
#content .tit-page-3 .desc {margin-top: 10px;}
#content .tit-page-3 .desc li {color: #8B8B8B;line-height: 16px;}
#content .tit-page-3 {position: relative;padding: 10px}
#content .tit-page-3:nth-child(1) {margin-top: 50px;}

/*---------*/


.mypage_main {padding:0px 10px 50px;background: #eae7e1;}
.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;}
 
 
.meber_grade_benefit { margin-top:30px;}
.meber_grade_benefit dl {overflow:hidden;}
.meber_grade_benefit dl dd {float:left; width:25%; height:80px; position:relative;}
.meber_grade_benefit dl dd:after {content:''; background: #CBBCB0 url(//sappun.img13.kr/snap/image/common/icon_arrow_white.svg) 50% 50% no-repeat; background-size: 5px; width:18px; height:18px; position:absolute; border-radius:9px; display:block; z-index:1; right:-9px; color:#fff;}
.meber_grade_benefit dl dd:nth-child(1):after {bottom:25px;}
.meber_grade_benefit dl dd:nth-child(2):after {bottom:20px;}
.meber_grade_benefit dl dd:nth-child(3):after {bottom:15px;}
.meber_grade_benefit dl dd:last-child:after {content:none;}
.meber_grade_benefit dl dd .benefit_header {padding:16px 0 19px; color:#fff; text-align:center; position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between;}
.meber_grade_benefit dl dd .benefit_header h2 {color:#fff;}
.meber_grade_benefit dl dd .benefit_header.grade_01 {height:80px; background:#51423C;}
.meber_grade_benefit dl dd .benefit_header.grade_02 {height:70px; background:#7B6C63;}
.meber_grade_benefit dl dd .benefit_header.grade_03 {height:60px; background:#A18F81;}
.meber_grade_benefit dl dd .benefit_header.grade_04 {height:50px; background:#CBBCB0;}


.meber_grade_benefit ul {display:flex; background:#F7F7F7;}
.meber_grade_benefit ul li {width:25%; text-align:center; padding:30px 0;background: #f8f6f3;}
.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;}

.information {font-size:12px; color:#8B8B8B; margin: 30px 10px 50px;}
.information h3 {font-weight:500; font-size:12px; color:#8B8B8B;}
.information ol {margin-top:5px;}
.information ol li {padding-left:10px; line-height:18px; position:relative;color:#8B8B8B;}
.information ol li:after {content:'-'; position:absolute; top:0; left:0;}

/* BASIC css end */