.mypage-title{height: 100%; display: flex; align-items: center; justify-content: center; position: relative;}
.read-subscription-service{position: absolute; right: 10px; bottom: 10px; color: blue; font-size: 12px;}
#mypage-swiper-wrap{overflow: hidden; max-width: 820px; width: 100%; margin: 0 auto; margin-bottom: 20px; position: relative;}
#mypage-swiper-wrap .swiper{overflow: inherit; position: initial;}

#mypage-swiper-wrap .swiper-button-prev:after,
#mypage-swiper-wrap .swiper-button-next:after{font-size: 24px; color: #fff;}
.mypage-section{display: flex;}
.mypage-section > div{width: 48%; margin: 1%; border: 1px solid #ccc; background-color: #fff;}
.mypage-section > div{padding: 20px;}
.mypage-section p.title{font-weight: 700; color: #333; font-size: 16px;}
.update-date-box{display: flex; margin-bottom: 30px; align-items: center; justify-content: space-between;}
.update-date-box > span{display: flex; align-items: center; font-size: 12px;}
.update-date-box > span >  button{border: none; background: transparent;}
.update-date-box > span >  button > img{display: block; width: 100%; max-width: 19px; margin-left: 7px;}
.mypage-section .info_cont{padding: 0 30px;}
.mypage-section .info_cont > ul > li{ margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 15px;}
.mypage-section .info_cont > ul > li > span{font-size: 15px;}
.mypage-section .info_cont > ul > li > strong{color: blue;}
.mypage-section > .imp-banner{padding: 0;}
.imp-banner > ul{display: flex; flex-wrap: wrap; }
.imp-banner > ul > li{width: 48%; display: flex; height: 146px; align-items: center; margin: 1%; border: 1px solid #ccc;}
.imp-banner > ul > li > a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center;}
#cs_right .new-main-notice{width: 100%; margin: 0;}
#cs_right .new-main-notice ul li{display: flex; align-items: center;}
#cs_right .new-main-notice ul li p.list,
#cs_right .new-main-notice ul li p.list a{float: none; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sns-list{display: flex; flex-wrap: wrap;}
.sns-list > li{width: 50%;}
.top10-mypage-modal{display: none;}
.chat-section > div{width: 100%;}
.chat-section div.update-date-box{display: flex; align-items: center; justify-content: flex-start;}
.chat-section div.update-date-box > span{color: #aaa; margin-left: 10px;}
.chart-btn-box > ul{display: flex; justify-content: center; margin-bottom: 20px;}
.btn-range {border: 1px solid #ccc; width: 60px; height: 35px; background-color: #fff; font-size: 14px; color: #333; font-weight: 700;cursor: pointer;}
.btn-range.selected {background-color: #ccc;}
.tb_04 tbody td{border-right: none;}
.be-login-title{font-size: 17px; font-weight: 700;}
#be-tblBody > tr > td > div a:hover,
.be-chart a:hover,
.be-login-title > a:hover{text-decoration: underline;}
.be-chart{text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 35px;}
.rating-info{display: flex; align-items: center; border: 1px solid #dbdbdb; border-radius: 10px; padding: 3px 10px 3px 15px; color: #333; background-color: #fff;  }
.rating-info > img{display: block; width: 100%; max-width: 17px; margin-left: 7px;}
.rating-info img {transition: transform 0.3s ease;}
.rating-info img.rotate {transform: rotate(180deg);}
.rating-infoBox{ padding: 50px 15px 50px 15px; background-color: #fff; display: none; justify-content: center;}
.rating-left > div:first-of-type{margin-top: 34px; border: 1px solid #dbdbdb; border-radius: 20px; padding: 15px;}
.rating-left > div:first-of-type > strong{text-align: center; display: block; font-size: 15px; color: #333; margin-bottom: 20px;}
.rating-left > div:first-of-type > div:first-of-type{text-align: center; margin-bottom: 10px;}
.rating-left > div:first-of-type > div:last-of-type{font-size: 14px; background-color: #eee; padding: 20px;  margin: 0 auto 20px; border-radius: 16px; text-align: center;}
.rating-left > div:first-of-type > p{font-size: 12px; display: block;}
.rating-infoBox > div{width: 50%;}
.rating-infoBox > div:last-of-type{margin-left: 30px;}
.rating-left > div:last-of-type{background-color: #eee; margin-top: 20px; padding: 20px; box-sizing: border-box; border-radius: 17px; position: relative;}
.rating-left > div:last-of-type > div{display: flex;}
.rating-left > div:last-of-type > div > p{width: 150px; text-align: center; font-size: 14px; color: #333;}
.rating-left > div:last-of-type > div button{margin-left: 10px; border: none; background: transparent;}
.rating-left > div:last-of-type > div button img{display: block; width: 100%; max-width: 19px;}
.rating-left > div:last-of-type > div > div{display: flex; align-items: center;}
/* .rating-left > div:last-of-type > div:first-of-type{margin-bottom: 10px;} */
.rating-left > div:last-of-type > div button.benefit-amount{ font-weight: 700;  border-bottom: 1px solid blue; color: blue; background: transparent;}
.rating-right h2{ font-size: 18px; color: #333; margin-bottom: 15px;}
.rating-right table{table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 1px; background-color: #ccc;}
.rating-right table thead tr th{background-color: #eee; height: 40px;}
.rating-right table tbody tr td{background-color: #fff; text-align: center;}
.rating-right table tbody tr td:first-of-type{background-color: #eee;}
.info-txt{position: relative; }
.info-txt > div{display: none; position: absolute; white-space: nowrap; text-align: left; border: 1px solid #dbdbdb; background-color: #fff; padding: 10px; font-size: 12px;}
.info-txt:hover > div{display: block;}

.rating-left > div:last-of-type > div.discountPop{display: none; width: 486px; background-color: #fff; position: absolute; border: 1px solid #dbdbdb; padding: 20px; top: -76px; left: 172px;}
.rating-left > div:last-of-type > div.discountPop.active {display: block;}
.discountPop > span{display: block;}
.discountPop > span:first-of-type{float: right; cursor: pointer; font-size: 20px;}
.discountPop > span:last-of-type{font-size: 15px; margin-bottom: 5px; padding-top: 20px;}
.rating-left > div:last-of-type > div.discountPop > p:first-of-type{font-size: 15px;  width: 100%; text-align: left; }
.rating-left > div:last-of-type > div.discountPop > p:first-of-type > strong{color: blue; width: 100%; text-align: left;}
.discount-list{ margin-top: 10px; background-color: #eee; padding: 5px 20px; border: 1px solid #dbdbdb;}
.discount-list > li{font-size: 15px; display: flex; justify-content: space-between; align-items: center;}
.rating-left > div:last-of-type > div.discountPop > p:last-of-type{width: 100%; font-size: 13px; color: #666; text-align: left; margin-top: 10px;}
.discount-list > li:not(:last-of-type){margin-bottom: 5px;}