@charset "utf-8";

/* *************************************************************************************
*
* 로그인
* 
* **************************************************************************************/
.login_title {padding: 5rem 0 3rem; text-align: center;}
.login_title strong {display: block; margin-bottom: 1rem; font-size: 3rem; font-weight: 800;}
.login_title p {font-size: 2.4rem; color: #444;}
.page_login .flow_text > p {bottom: -10rem; z-index: -1;}
.page_login {position: relative; padding: 0 20px;}
.page_login .logo {display: inline-block; margin-bottom: 3rem; padding-right: 3rem;}
.page_login .logo > img {width: 23rem;}
.page_login .login_box {max-width: 60rem; margin: 0 auto 10rem; padding: 3rem 2rem; background-color: #fff; border-radius: var(--border-radius-base); box-shadow: 15px 15px 30px rgba(0,0,0,0.15);}
.page_login .login_form {max-width: 34rem; margin: 0 auto;}
.page_login .form_input {margin-bottom: 1rem;}
.page_login .login_input {width: 100%; height: 4.5rem; padding-left: 4rem; background-color: #f2f5fa; border: 0; border-radius: var(--border-radius-base); box-sizing: border-box; background-image: url("../images/common/login_id.png"); background-position: left 2rem center; background-repeat: no-repeat;}
.page_login .login_input.pw {background-image: url("../images/common/login_pw.png");}
.page_login .login_input::placeholder {color: #555;}
.page_login .login_input:-webkit-autofill {background-color: #f2f5fa; transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: 0 0 0px 1000px #f2f5fa inset !important; box-shadow: 0 0 0px 1000px #f2f5fa inset !important; -webkit-text-fill-color: #000 !important; transition: background-color 5000s ease-in-out 0s; }
.page_login .login_checkbox {display: flex; margin-top: 1.5rem; padding: 0 1rem; gap: 1rem 2rem; flex-wrap: wrap;}
.page_login .login_checkbox label {color: #777;}
.page_login .login_find {margin-top: 2rem; padding: 0 1rem; display: flex; justify-content: center; flex-wrap: wrap;}
.page_login .login_find > li {position: relative; color: #777;}
.page_login .login_find > li + li {padding-left: 3rem;}
.page_login .login_find > li::before {position: absolute; right: -1.5rem; top: 0.3rem; display: block; width: 1px; height: 1.4rem; background-color: #777; content: '';}
.page_login .login_find > li:last-child::before {content: none;}
.page_login .login_sns {max-width: 34rem; margin: 0 auto; margin-top: 2.5rem; text-align: center;}
.page_login .login_sns .title {margin-bottom: 3rem;}
.page_login .login_sns .title strong {display: block; margin-bottom: 1rem; font-size: 2.2rem;}
.page_login .login_sns .title p {font-size: 1.8rem; color: #555; font-weight: 500;}
.page_login .page_link {margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: 1.5rem; color: #555; flex-wrap: wrap;}
.page_login .page_link > p {letter-spacing: -0.8px;}

/*로그인 - 아이디찾기*/
.page_login .sub_title {margin-bottom: 1.5rem; font-size: 2.2rem; color: #444; font-weight: 700;}
.page_login .input_col {margin-bottom: 1.5rem;}
.page_login .find_group {max-width: 120rem; min-height: 70rem; margin: 0 auto; padding: 5rem 0; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;}
.page_login .find_group .login_title {text-align: left;}
.page_login .find_id {width: 100%; max-width: 50rem;}
.page_login .find_id .drop_box {margin-bottom: 2rem; padding: 3rem 3rem 0; background-color: #fff; border-radius: 1.5rem; box-shadow: 15px 15px 30px rgba(0,0,0,0.2);}
.page_login .find_id .drop_btn {position: relative; display: block; width: 100%; padding-bottom: 3rem; font-size: 2.2rem; font-weight: 600; text-align: left;}
.page_login .find_id .drop_btn::after {position: absolute; right: 0; top: 0; content: ''; width: 10px; height: 10px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(135deg);}
.page_login .find_id .drop_btn.open::after {transform: rotate(315deg); top: 1rem; transition: .3s;}
.page_login .find_id .drop_cnt {display: none; padding-bottom: 4rem;}
.page_login .find_id .drop_cnt.open {display: block;}
.page_login .find_id label {display: block; margin-bottom: 0.8rem; font-size: 1.8rem; font-weight: 500;}
.page_login .find_id .basic_input {width: 100%;}
.page_login .find_id .input_group label {margin-bottom: 0;}
.page_login .find_id .form_phone {display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;}
.page_login .find_id .form_phone input {width: calc(100% / 3 - 1.2rem);}
.page_login .desc {margin-top: 1rem; color: #555; font-size: 1.5rem; letter-spacing: -0.5px;}
.page_login .desc + .desc {margin-top: 0.5rem;}
.page_login .id_certifi {display: flex; gap: 2rem; flex-wrap: wrap;}
.page_login .id_certifi > li {width: calc(50% - 1rem); background-color: #f4f5f9; border-radius: 2rem;}
.page_login .id_certifi .certifi_btn {display: block; width: 100%; padding-top: 9rem; padding-bottom: 2rem; font-size: 1.8rem; font-weight: 500; background-position: top center; background-size: 8rem; background-repeat: no-repeat;}
.page_login .id_certifi .certifi_btn.phone {background-image: url("../images/icon/find_phone.png");}
.page_login .id_certifi .certifi_btn.pin {background-image: url("../images/icon/find_pin.png");}
.page_login .find_btn {width: 100%; height: 5rem; line-height: 5rem; padding: 0; color: #fff; background-color: #000942; border-radius: 0.5rem; font-size: 1.8rem; font-weight: 700;}
.page_login .find_result {max-width: 65rem; width: 100%;}
.page_login .find_box {display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 25rem; padding: 3rem; background-color: #fff; border-radius: 2rem; box-shadow: 15px 15px 30px rgba(0,0,0,0.2);}
.page_login .find_box .check_id {font-size: 3rem; text-align: center;}

/*SNS 로그인 버튼 공통*/
.login_btn {margin-top: 2rem;}
.login_btn .btn {width: 100%; height: 4.5rem; line-height: 4.5rem; padding: 0; background-color: #333; color: #fff; font-weight: 500; text-align: center; border-radius: var(--border-radius-base); background-position: left 2rem center; background-size: 2.5rem; background-repeat: no-repeat;}
.login_btn .btn + .btn {margin-top: 1rem;}
.login_btn .primary {background-color: var(--primary-color);}
.login_btn .kakao {background-image: url("../images/common/kakao_icon.png"); background-color: #fae301; color: #3C1D1D; font-weight: 600;}
.login_btn .naver {background-image: url("../images/common/naver_icon.png"); background-color: #10AB55;}


/* *************************************************************************************
*
* 회원가입
* 
* **************************************************************************************/
.join_step_ul {max-width: 37.5rem; margin-left: auto; margin-bottom: 3rem; display: flex; flex-wrap: wrap;}
.join_step_ul > li {position: relative; width: calc(100% / 4); text-align: center;}
.join_step_ul > li + li::before {position: absolute; left: -2rem; top: 2rem; display: block; width: 4rem; height: 0.1rem; background: url("../images/content/join_step_bg.png") left center no-repeat; content: '';}
.join_step_ul > li > span {display: block; font-weight: 500;}
.join_step_ul .num {width: 4rem; height: 4rem; line-height: 4rem; margin: 0 auto 1rem; font-size: 2.4rem; font-weight: 600; background-color: #959595; color: #fff; border-radius: 50%; text-align: center;}
.join_step_ul .on .num {background-color: var(--primary-color);}

.member_join .title {margin-bottom: 6rem; font-size: 2.6rem; word-break: keep-all;}
.member_join .title strong {display: block; margin-top: 1rem;}
.member_join .title .primary_color {margin-top: 3rem; font-size: 3.6rem; font-weight: 700;}
.member_join .title .primary_color > span {position: relative; z-index: 1;}
.member_join .title .primary_color > span::before {position: absolute; left: 0; bottom: 0.3rem; width: 100%; height: 1.5rem; background-color: #d0dff7; border-radius: 3rem; content: ''; z-index: -1;}
.member_join .member_benefit {margin-bottom: 7rem; display: flex; gap: 2rem 4rem; flex-wrap: wrap;}
.member_join .member_benefit > li {flex: 1; display: flex; align-items: center; width: calc(50% - 2rem); padding: 5rem 3rem; flex-wrap: wrap; font-size: 1.8rem; border-radius: 2rem; box-shadow: 15px 15px 30px rgba(0,0,0,0.15);}
.member_join .member_benefit .img {display: block; width: 11.5rem; height: 11.5rem; margin-right: 3rem; border-radius: 50%; background-color: var(--primary-color); text-align: center;}
.member_join .member_benefit .txt {width: calc(100% - 14.5rem);}
.member_join .member_benefit .txt strong {display: block; margin-bottom: 2rem; font-size: 2.4rem;}
.member_join .member_type {display: flex; gap: 1.5rem; flex-wrap: wrap;}
.member_join .member_type > li {display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: 3rem 2rem; border: 2px solid var(--border-gray-color); border-radius: 1rem; text-align: center;}
.member_join .member_type strong {display: block; margin-bottom: 2rem; font-size: 2.6rem; font-weight: 600;}
.member_join .member_type .join_btn {width: 17rem; height: 5rem; line-height: 5rem; margin: 3rem auto 0; padding: 0; background-color: var(--primary-color); color: #fff; font-size: 1.8rem; font-weight: 500; text-align: center; border-radius: 1rem;}
.member_join .member_type.sns {margin: 5rem 0;}
.member_join .member_type.sns > li {width: 100%; flex: none; margin: 0 auto; border: 0; border-radius: 0;}
.member_join .member_type.sns .btn {width: 34rem; border: 1px solid var(--border-gray-color); border-radius: 0;}
.member_join .member_type.sns .login_btn {display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap;}
.member_join .certifi_select_box {margin-top: 8rem;}
.member_join .certifi_select_box .join_btn {width: 26rem;}
.member_join .certifi_select_box .member_type {max-width: 110rem; margin: 0 auto;}
.member_join .basic_btn {margin-top: 10rem;}

/*특별회원 - 유형선택*/
.member_join .special_list {margin-top: 3.5rem; margin-bottom: 8rem; display: flex; gap: 4rem; flex-wrap: wrap;}
.member_join .special_list > li {position: relative; display: flex; flex-direction: column; justify-content: space-between; width: calc(50% - 2rem); padding: 2.5rem 3rem; border: 2px solid #234262; border-radius: var(--border-radius-base); flex-wrap: wrap; overflow: hidden;}
.member_join .special_list > li.end {background-color: #234262; color: #fff;}
.member_join .special_list > li.end .common_more_btn[disabled] {background-color: #fff; color: #234262; font-weight: 600;}
.member_join .special_list > li.end .dot_ul > li::before {background-color: #fff;}
.member_join .special_list .special_check {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: none; z-index: 1;}
.member_join .special_list .special_check:checked + .info {color: #fff;}
.member_join .special_list .special_check:checked + .info::before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #234262; content: ''; z-index: -1;}
.member_join .special_list .special_check:checked + .info .dot_ul > li::before {background-color: #fff;}
.member_join .special_list .info {display: flex; align-items: baseline; flex-wrap: wrap; z-index: 0;}
.member_join .special_list .img {width: 10rem; margin-right: 2rem; text-align: center;}
.member_join .special_list .txt {width: calc(100% - 12rem);}
.member_join .special_list .txt > strong {display: block; margin-bottom: 2rem; font-size: 2.4rem;}
.member_join .special_list .btn {display: flex; margin-left: auto; margin-top: 2rem;}
.member_join .special_list .common_more_btn {width: 18rem;}
.member_join .special_list .common_more_btn.primary::before {background-color: #234262;}
.member_join .special_list .common_more_btn[disabled] {background-color: #234262;}
.member_join .special_list .common_more_btn[disabled] > span {padding-right: 0;}
.member_join .special_list .common_more_btn[disabled] .arr {display: none;}

/*약관동의*/
.site_service .agree_box {padding: 3rem; border: 2px solid var(--border-gray-color); background-color: #fff; border-radius: 2rem;}
.site_service .agree_box .scroll {max-height: 20rem; overflow-y: scroll;}
.site_service .agree_box strong {display: block; margin-bottom: 1rem; font-size: 1.9rem;}
.site_service {margin: 5rem 0 3rem;}
.site_service strong {display: block; margin-bottom: 1.8rem; font-size: 3rem;}
.site_service .agree_list > li {margin-bottom: 3.5rem; line-height: 1.5; font-size: 1.8rem;}
.site_service .dot_ul > li + li {margin-top: 0;}
.site_service .content_table {margin-top: 0.8rem;}
.site_service .content_table th {padding: 1.2rem;}
.site_service .content_table td {padding: 1.2rem;}
.site_service .number_ul {margin-top: 1rem; counter-reset: item;}
.site_service .number_ul > li {padding-left: 3rem;}
.site_service .number_ul > li + li {margin-top: 0.5rem;}
.site_service .number_ul > li::before {content: counter(item, decimal-leading-zero) "."; counter-increment: item; top: 0; width: auto; height: auto; line-height: inherit; color: var(--primary-color); background-color: transparent; font-weight: 600;}
.site_service .drop_btn {position: relative; width: 100%; margin-top: 1.5rem; padding: 2rem 7.5rem 2rem 2rem; border-top: 1px solid #000; border-bottom: 1px solid var(--border-gray-color); text-align: left;} 
.site_service .drop_btn::after {content: ''; position: absolute; right: 2.2rem; top: 2rem; display: block; width: 12px; height: 12px; border-top: 2px solid #888; border-right: 2px solid #888; transform: rotate(135deg);}
.site_service .drop_cnt {display: none;}

/* *************************************************************************************
*
* 마이페이지 - 회원
* 
* **************************************************************************************/
/*회원탈퇴버튼 축소*/
.my_page > .inner .basic_btn .common_more_btn, .mypage_shop > .inner .basic_btn .common_more_btn {padding: 0 2.5rem; font-size: 1.6rem;}
.my_page > .inner .basic_btn .common_more_btn > span, .mypage_shop > .inner .basic_btn .common_more_btn > span {padding-right: 3rem;}

/*대시보드*/
.sc_dashboard .btn_item {width: 100%; height: 5rem; line-height: 4.8rem; background: linear-gradient(to bottom, #5587fc 20%, #4274e6); border-radius: 1rem; color: #fff; font-size: 2.2rem; font-weight: 600; text-align: center;}
.sc_dashboard .btn_item + .btn_item {margin-top: 1rem;}
.sc_dashboard .btn_item.style_line {outline: 2px solid var(--primary-color); color: var(--primary-color); background: #fff;}
.dashboard_list {margin-top: 2rem; padding: 3rem 2rem; display: flex; gap: 0 3rem; flex-wrap: wrap; background: #E2EFFA; border-radius: var(--border-radius-base);}
.dashboard_list > li {display: flex; flex-direction: column; justify-content: space-between; width: calc(100% / 3 - 2rem); padding: 2rem 1.5rem; background-color: #fff; border-radius: 2.5rem; box-shadow: 15px 15px 30px rgba(0,0,0,0.15);}
.dashboard_list .dl_list dl {margin-bottom: 0.5rem;}
.dashboard_list .dl_list dt {min-width: 14rem; margin-right: 1rem; font-weight: 600;}
.dashboard_list .dl_list dd {font-weight: 500;}
.dashboard_list .tit_item {margin-bottom: 1.2rem; font-size: 2.2rem; font-weight: 600; text-align: center; word-break: keep-all;}
.dashboard_list .cnt_item {margin-bottom: 1rem;}
.dashboard_list .city_tit {font-weight: 800;}
.dashboard_list .city_tit .point {color: #003876; letter-spacing: -1px;}
.dashboard_list .city_member {display: flex; align-items: center; flex-wrap: wrap;}
.dashboard_list .city_member .img {width: 11rem; text-align: center;}
.dashboard_list .city_member .img > img {width: 6rem;}
.dashboard_list .city_member .dl_list {width: calc(100% - 11rem);}
.dashboard_list .city_member .dl_list dt {min-width: 9rem; height: 2.8rem; line-height: 2.8rem;}
.dashboard_list .city_member .dl_list dd {font-weight: 700;}
.dashboard_list .my_reward_list {height: 100%; display: flex; flex-wrap: wrap;}
.dashboard_list .my_reward_list > li {width: calc(100% / 2); display: flex; flex-direction: column; justify-content: space-between; text-align: center;}
.dashboard_list .my_reward_list > li:nth-child(odd) {padding-right: 2rem; border-right: 1px solid var(--border-gray-color);}
.dashboard_list .my_reward_list > li:nth-child(even) {padding-left: 2rem;}
.dashboard_list .my_reward_list .tit_item {margin-top: 1.2rem;}
.dashboard_list .my_reward_list .primary_color {font-size: 3rem; font-weight: 800;}


/*출석체크*/
.month_stemp_modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 2rem; background-color: rgba(0, 0, 0, 0.12); z-index: 21;}
.month_stemp_modal .stemp_cnt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 4rem); max-width: 52rem; max-height: calc(100% - 4rem); margin: 0 auto; border-radius: var(--border-radius-base); overflow-y: auto;}
.month_stemp_modal .stemp_title {padding: 2rem 2rem 6.5rem; background-color: #3d7af6; background-image: url("../images/content/stemp_bg.png"); background-position: left 3rem top -1rem; background-repeat: no-repeat; text-align: center;}
.month_stemp_modal .stemp_title .title {margin-bottom: 2rem; font-size: 3.2rem; font-weight: 500; color: #fff; text-align: center; line-height: 1.2; letter-spacing: -1px;}
.month_stemp_modal .stemp_title .title strong {font-size: 4.2rem; font-weight: 800; color: #14ffe6;}
.month_stemp_modal .add_point {display: inline-block;}
.month_stemp_modal .add_point > li {position: relative; padding-left: 1rem; color: #fff; text-align: left;}
.month_stemp_modal .add_point > li::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; content: '';}
.month_stemp_modal .add_point > li + li {margin-top: 0.4rem;}
.month_stemp_modal .add_point .add {font-size: 1.6rem; color: #14ffe6;}
.month_stemp_modal .stemp_history {padding: 3rem; background-color: #e6f3fe;}
.month_stemp_modal .calendar_control {margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; font-size: 1.8rem; font-weight: 600;}
.month_stemp_modal .calendar_control button {width: 0; height: 0;}
.month_stemp_modal .calendar_control .prev {border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 14px solid var(--primary-color);}
.month_stemp_modal .calendar_control .next {border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 14px solid var(--primary-color); border-right: 10px solid transparent;}
.month_stemp_modal .calendar_box {margin-top: -8rem; padding: 2rem 1.5rem; background-color: #fff; border-radius: 2rem;}
.month_stemp_modal .calendar_ul {display: flex; gap: 1rem; flex-wrap: wrap;}
.month_stemp_modal .calendar_ul > li {position: relative; width: calc(100% / 7 - 0.9rem); display: inline-flex; justify-content: center; align-items: center; border: 2px solid var(--primary-color); color: var(--primary-color); border-radius: 50%; text-align: center; aspect-ratio: 1; }
.month_stemp_modal .calendar_ul .save_point {font-size: 1.8rem; font-weight: 500;}
.month_stemp_modal .calendar_ul .check_day img {position: absolute; left: -0.8rem; top: -1rem; width: 135%; height: 135%; max-width: none;}
.month_stemp_modal .close_btn {position: absolute; right: 1rem; top: 2rem;}
.month_stemp_modal .close_btn > img {width: 2rem;}

/*플러스샵 목록*/
.sc_plus_shop {margin-top: 8rem;}
.sc_plus_shop .checkPoint_tit {margin: 0;}
.plus_shop_title {margin-bottom: 5rem;}
.plus_shop_title p.primary_color {margin-bottom: 1rem; font-size: 3rem; font-weight: bold;}
.plus_shop_title p {font-size: 2.2rem;}
.plus_shop {position: relative; display: flex; flex-wrap: wrap;}
.plus_shop .item {display: block; width: 100%; height: 100%; border-radius: var(--border-radius-base); overflow: hidden; box-shadow: 0 19px 20px 0px rgba(0, 0, 0, 0.12);}
.plus_shop .img {display: block; position: relative; width: 100%; height: 0; padding-top: 60%; overflow: hidden;}
.plus_shop .img > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.plus_shop .txt {display: block; padding: 1.5rem 1.5rem 2.5rem; background-color: #fff;}
.plus_shop .label_group {display: block;}
.plus_shop_list {width: 100%; padding: 2rem 2rem 5rem;}
.plus_shop .slide_controls .slide_btn {position: absolute; top: calc(50% - 2rem); transform: translateY(-50%); z-index: 1;}
.plus_shop .slide_controls .slide_btn[disabled] {display: none;}
.plus_shop .slide_controls .prev {left: -1.5rem;}
.plus_shop .slide_controls .next {right: -1.5rem;}

/*마일리지 적립내역*/
.mypoint_history {margin-top: 5rem; margin-bottom: 6rem; display: flex; flex-wrap: wrap; gap: 0 5rem;}
.mypoint_history > li {flex: 1; padding: 5rem 1rem; border: 2px solid var(--primary-color); text-align: center; border-radius: 1rem; box-shadow: 15px 15px 30px rgba(0,0,0,0.15);}
.mypoint_history .txt {margin-top: 1.5rem; font-size: 3.5rem;}
.mypoint_history .txt > p > strong {font-weight: 500;}

/*나의 안성ON시민 활동*/
.sc_citizen {margin-top: 6rem;}
.my_citizen {display: flex; flex-wrap: wrap; border-radius: var(--border-radius-base); overflow: hidden; box-shadow: 15px 15px 30px rgba(0,0,0,0.15);}
.my_citizen .citizen_title {padding: 3rem 5rem; background-color: #dae5f9; background-image: url("../images/content/citizen_bg.png"); background-position: left bottom; background-repeat: no-repeat;}
.my_citizen .citizen_title strong {font-size: 3rem;}
.my_citizen .citizen_list {display: flex; flex-grow: 1; padding: 5rem; justify-content: center; flex-wrap: wrap; gap: 3rem; background-color: #fff;}
.my_citizen .citizen_list > li {display: flex; flex-direction: column; justify-content: space-between; width: calc(100% / 3 - 2rem); padding: 3.5rem 1rem; border: 3px solid var(--primary-color); border-radius: 50%; text-align: center; aspect-ratio: 1;}
.my_citizen .citizen_list .icon {display: block;}
.my_citizen .citizen_list > li > p {font-size: 2.6rem; font-weight: 600;}
.my_citizen .citizen_list > li > strong {display: block; margin-top: 1.5rem; color: var(--primary-color); font-weight: 800; font-size: 4rem;}

/*마이페이지 - 게시판*/
.sc_mypage_board {position: relative; margin-top: 8rem;}
.sc_mypage_board > .inner {position: relative;}
.sc_mypage_board .common_more_btn {position: absolute; right: 0; top: -0.5rem;}
.sc_mypage_board .checkPoint_tit.flex_row p {font-size: 1.8rem;}
.sc_mypage_board .coupon_view {padding: 4rem; border: 1px solid var(--border-gray-color); border-radius: 2rem; line-height: 1.5;}

/*쿠폰함*/
.Coupon_list {display: flex; gap: 6rem 4rem; flex-wrap: wrap;}
.Coupon_list > li {display: flex; width: calc(50% - 2rem);}
.Coupon_list .coupon_cnt {width: calc(100% - 19rem); padding: 5rem; border: 2px solid #3f4e63; border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);}
.Coupon_list .coupon_more {position: relative; width: 19rem; background-color: #3f4e63; border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;}
.Coupon_list .coupon_more .btn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 11rem; height: 11rem; line-height: 11rem; background-color: #546174; color: #fff; font-weight: 500; border-radius: 50%; text-align: center;}
.Coupon_list .coupon_more .btn > span {display: inline-block; padding-right: 2rem; background: url("../images/icon/more_arr_icon.png") right center no-repeat; }
.Coupon_list .end {opacity: 0.5;}

/*260312 사용 가능한 쿠폰이 없는 케이스 추가*/
.Coupon_none {width:100%!important; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align: center}
.Coupon_none_img {max-width: 100%;height:auto}
.Coupon_none_title {font-size: 3.6rem; font-weight: 600; color: #222; padding-top: 20px}
.Coupon_none_desc {color: #58616d}
/*260312*/

.my_Coupon .coupon_name {margin-bottom: 2rem;}
.my_Coupon .coupon_name strong {display: block; margin-bottom: 1rem; color: #021e42; font-size: 2.8rem; font-weight: bold;}
.my_Coupon .coupon_name p {font-size: 2.3rem; font-weight: 500;}
.my_Coupon .coupon_info {display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;}
.my_Coupon .coupon_info + .coupon_info {margin-top: 2rem;}
.my_Coupon .coupon_info .label {display: inline-block; padding: 0 1.5rem; height: 3rem; line-height: 3rem; margin-right: 1rem; color: #756253; background-color: #f1e7df; border-radius: 3rem; font-weight: 500;}
.my_Coupon .coupon_info .date {font-size: 1.8rem; font-weight: 500; color: #333;}
.my_Coupon .coupon_info.code .label {background-color: #d4d7e9; color: #424559;}

.Coupon_modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.12); z-index: 21;}
.Coupon_modal .view {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 4rem); max-width: 72rem; padding: 2.5rem; background-color: #fff; border: 2px solid #3f4e63; border-radius: var(--border-radius-base);}
.Coupon_modal .tit {padding-bottom: 1.2rem; border-bottom: 1px solid #3f4e63; font-size: 2.6rem; font-weight: 600;}
.Coupon_modal .cnt {padding: 3.5rem 3rem 2rem;}
.Coupon_modal .close_btn {position: absolute; right: 2rem; top: 1.6rem; width: 4rem; height: 4rem; background-color:#3f4e63; border-radius: 50%;}
.Coupon_modal .close_btn > img {width: 2rem;}

/* *************************************************************************************
*
* 마이페이지 - 플러스샵
* 
* **************************************************************************************/
.sc_dashboard .shop_info {display: flex; align-items: center; flex-wrap: wrap;}
.sc_dashboard .shop_info .img {position: relative; width: 30rem; height: 0; padding-top: 18.708%; margin-right: 5rem; border-radius: 2rem; overflow: hidden;}
.sc_dashboard .shop_info .img > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sc_dashboard .shop_table {width: calc(100% - 72rem); margin-right: 6rem;}
.sc_dashboard .shop_table .title {margin-bottom: 3rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem;}
.sc_dashboard .shop_table .title .tit {font-size: 2rem; font-weight: bold;}
.sc_dashboard .shop_table .btn_group {display: flex; flex-direction: column; gap: 1rem;}
.sc_dashboard .shop_table .btn {min-width: 18.5rem; text-align: center;}
.sc_dashboard .shop_table .btn[disabled] {background-color: #f1f1f1; color: #555;}
.sc_dashboard .shop_table .respon_table {margin-bottom: 0;}
.sc_dashboard .shop_code {display: flex; flex-direction: column; justify-content: space-between; width: 31rem; height: 28rem; padding: 1.5rem; border: 2px solid var(--primary-color); border-radius: 2rem;}
.sc_dashboard .code_item {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100% - 7rem); font-size: 2.6rem; font-weight: bold;}
.sc_dashboard .code_item img {width: 12rem; height: 12rem;}
.sc_dashboard .shop_code .btn_item {margin-top: initial;}

.sc_visit {display: flex; align-items: center; justify-content: space-between; margin-top: 6rem; padding: 3rem; background-color: #f9fafd; border-radius: var(--border-radius-base);}
.sc_visit .inner {display: flex; align-items: center; justify-content: space-between;}
.sc_visit .title {width: 20rem; margin-right: 2rem;}
.sc_visit .title strong {display: block; margin-bottom: 1rem; font-size: 2.4rem;}
.sc_visit .count_list {max-width: 112rem; width: calc(100% - 22rem); display: flex; justify-content: right; flex-wrap: wrap; gap: 2rem 4rem;}
.sc_visit .count_list > li {width: calc(100% / 4 - 3rem); padding: 6rem 1.2rem; background-color: #fff; border-radius: 2rem; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); text-align: center;}
.sc_visit .count_list .txt {display: block; margin-bottom: 2rem; font-size: 2.2rem; font-weight: 600;}
.sc_visit .count_list .num {display: block; color: var(--primary-color); font-size: 3.4rem; font-weight: 800;}

/* *************************************************************************************
*
* 회원탈퇴
* 
* **************************************************************************************/
.delete_account {max-width: 100rem; margin: 0 auto;}
.delete_account .img > img {width: 15rem;}
.delete_account .member_info {margin: 3rem 0; font-size: 2.8rem; font-weight: 700;}
.delete_account .warning_ul {margin-bottom: 5rem; padding: 3rem; border: 2px dashed var(--border-gray-color); border-radius: 3rem;}
.delete_account .warning_ul > li {font-size: 2rem;}
.delete_account .warning_ul > li:last-child {margin-bottom: 0;}
.delete_account .warning_ul .point {color: #EC5D36;}
.delete_account .form_title {margin-bottom: 1.5rem; font-size: 2.4rem; font-weight: 600;}
.delete_account .form_table th {background-color: #f7f7f7;}
.member_agree {margin-top: 1rem; display: flex; align-items: center; gap: 1rem;}

/*Only PC*/
@media all and (min-width:1024px){
    .login_btn .btn:hover, .login_btn .btn:focus-visible {background-color: #000; transition: .3s;}
    .login_btn .primary:hover, .login_btn .primary:focus-visible {background-color: #3870e1;}
    .login_btn .kakao:hover, .login_btn .kakao:focus-visible {background-color: #ebd500;}
    .login_btn .naver:hover, .login_btn .naver:focus-visible {background-color: #009643;}
    .sc_dashboard .btn_item:not([disabled]):hover, .sc_dashboard .btn_item:not([disabled]):focus-visible {background: linear-gradient(to bottom, #204fbe 20%, #4274e6); transition: .3s;}
    .sc_dashboard .btn_item.style_line:not([disabled]):hover, .sc_dashboard .btn_item.style_line:not([disabled]):focus-visible {color: #fff;}
    .Coupon_list .coupon_more .btn > span {transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center center;}
    .Coupon_list .coupon_more .btn:hover > span {transform: rotate(360deg);}
    .plus_shop .item:hover {transform: translateY(-10px); box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1); transition: .5s;}
    .member_join .special_list .common_more_btn.primary:not([disabled]):hover {color: #234262;}
    .member_join .special_list > li.end .common_more_btn.primary:not([disabled]):hover {color: #fff;}
}

/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/

@media all and (max-width:1024px) {
    /*회원가입*/
    .member_join .title {font-size: 1.8rem;}
    .member_join .title .primary_color {margin-top: 2rem; font-size: 2.4rem;}
    .member_join .member_benefit > li {width: 100%; padding: 3rem;}
    .member_join .member_benefit .img {width: 8rem; height: 8rem; margin-right: 2rem;}
    .member_join .member_benefit .txt {width: calc(100% - 10rem);}
    .member_join .member_benefit .txt strong {margin-bottom: 1rem; font-size: 2rem;}
    .member_join .member_type strong {font-size: 2.2rem;}
    .member_join .special_list {gap: 2rem;}
    .member_join .special_list > li {width: calc(50% - 1rem); padding: 2rem;}

    /*로그인 - 아이디찾기*/
    .page_login .logo {display: none;}
    .page_login .login_title {padding: 3rem 0;}
    .page_login .find_group {min-height: auto; padding: 0 0 5rem;}
    .page_login .find_group .login_title {width: 100%; text-align: center;}
    .page_login .sub_title {font-size: 1.9rem;}
    .page_login .find_id .sub_title {margin-top: 2rem; text-align: center;}
    .page_login .find_id {margin: 0 auto;}
    .page_login .find_id .drop_box {padding: 3rem 2rem 0;}
    .page_login .find_box {min-height: 18rem; padding: 3rem 2rem; font-size: 2.4rem;}

    /*대시보드*/
    .dashboard_list {padding: 2rem; gap: 1.2rem;}   
    .dashboard_list > li {width: calc(100% / 2 - 0.6rem); padding: 1.5rem; border-radius: 1.5rem;}
    .dashboard_list .dl_list dt {min-width: 12rem; margin-right: 0.5rem; padding: 0 1rem; font-size: 1.4rem;}
    .dashboard_list .dl_list dd {font-size: 1.4rem;}
    .dashboard_list .city_member .img {display: none;}
    .dashboard_list .city_member .dl_list {width: 100%;}
    .dashboard_list .tit_item {font-size: 1.8rem;}
    .dashboard_list .btn_item {font-size: 2rem;}
    .dashboard_list .my_reward {width: 100%;}
    .dashboard_list .my_reward .tit_item {margin-bottom: 0;}
    .dashboard_list .my_reward_list .point {font-size: 2.6rem;}
    .dashboard_list .my_reward_list > li:nth-child(odd) {padding-right: 1.5rem;}
    .dashboard_list .my_reward_list > li:nth-child(even) {padding-left: 1.5rem;}

    /*출석체크*/
    .month_stemp_modal .stemp_cnt {top: 42%; max-height: calc(100% - 20rem);}

    /*나의 안성ON시민 활동*/
    .my_citizen .citizen_title {width: 100%; padding: 3rem ; background-position: right bottom;}
    .my_citizen .citizen_list {width: 100%; padding: 3rem; gap: 1.5rem;}
    .my_citizen .citizen_list > li {width: calc(100% / 3 - 1rem);}
    .my_citizen .citizen_list .icon > img {width: 6rem;}
    .my_citizen .citizen_list > li > p {font-size: 2rem;}
    .my_citizen .citizen_list > li > strong {font-size: 2.8rem;}

    /*플러스샵 목록*/
    .sc_plus_shop {margin-top: 5rem;}
    .plus_shop_title {margin-bottom: 2rem;}

    /*마일리지 적립내역*/
    .mypoint_history {gap: 1rem;}
    .mypoint_history > li {padding: 3rem 1rem;}
    .mypoint_history .icon img {width: 4rem;}
    .mypoint_history .txt {font-size: 2rem;}

    /*쿠폰함*/ 
    .my_Coupon .coupon_name strong {font-size: 2.4rem;}
    .my_Coupon .coupon_name p {font-size: 1.8rem;}
    .my_Coupon .coupon_date .date {font-size: 1.6rem;}
    .my_Coupon .coupon_info {align-items: baseline; flex-direction: column;}
    .Coupon_list {gap: 4rem 2rem;}
    .Coupon_list > li {width: calc(50% - 1rem);}
    .Coupon_list .coupon_cnt {width: calc(100% - 14rem); padding: 2rem;}
    .Coupon_list .coupon_more {width: 14rem;}
    .Coupon_list .coupon_more .btn {width: 10rem; height: 10rem; line-height: 10rem;}
    .Coupon_modal .cnt {padding: 3rem 0;}

    /*마이페이지(플러스샵) - 대시보드*/
    .sc_dashboard .shop_info .img {display: none;}
    .sc_dashboard .shop_table {width: calc(100% - 29rem); margin-right: 4rem;}
    .sc_dashboard .shop_table .title .tit {font-size: 1.8rem;}
    .sc_dashboard .shop_code {width: 25rem; height: 24rem;}

    /*방문인증 현황*/
    .sc_visit {padding: 2rem; flex-wrap: wrap;}
    .sc_visit .count_list {gap: 2rem;}
    .sc_visit .count_list > li {width: calc(100% / 4 - 1.5rem); padding: 4rem 1rem;}
    .sc_visit .count_list .txt {font-size: 1.7rem;}
    .sc_visit .count_list .num {font-size: 2rem;}
}

@media all and (max-width:780px) {
    /*회원가입*/
    .join_step_ul {margin: 0 auto 5rem;}
    .member_join .member_type > li {width: 100%; flex: none; padding: 3rem 1.5rem;}
    .member_join .member_type.sns .login_btn {gap: 1.5rem;}
    .member_join .certifi_select_box {margin-top: 5rem;}
    .member_join .special_list .state_label {height: 4rem; line-height: 4rem; padding: 0 1.5rem; font-size: 1.6rem;}
    .member_join .special_list .img {width: 100%; margin-right: 0;}
    .member_join .special_list .txt {width: 100%; margin-top: 3rem;}
    .member_join .special_list .txt > strong {font-size: 2.2rem; text-align: center;}
    .member_join .special_list .common_more_btn {text-align: center;}

    /*나의 안성ON시민 활동*/
    .sc_citizen {margin: 5rem 0 8rem;}
    .my_citizen .citizen_title {padding: 2rem; background-size: 10rem;}
    .my_citizen .citizen_title strong {font-size: 2.4rem;}
    .my_citizen .citizen_list {padding: 2rem;}
    .my_citizen .citizen_list > li {width: 100%; padding: 1.5rem; flex-direction: row; align-items: center; border-radius: 1.5rem; border-width: 2px; text-align: left; aspect-ratio: auto;}
    .my_citizen .citizen_list .icon {margin-right: 1.2rem;}
    .my_citizen .citizen_list .icon > img {width: 3.5rem;}
    .my_citizen .citizen_list > li > p {font-size: 1.6rem;}
    .my_citizen .citizen_list > li > strong {font-size: 2rem; margin-top: 0; margin-left: auto;}
    
    /*마이페이지 - 게시판*/
    .sc_mypage_board {position: relative; margin-top: 5rem; padding-bottom: 6rem;}
    .sc_mypage_board > .inner {position: initial;}
    .sc_mypage_board .checkPoint_tit {margin-bottom: 1rem;}
    .sc_mypage_board .respon_table {margin-bottom: 0;}
    .sc_mypage_board .common_more_btn {bottom: 0; right: 0; top: auto;}
    .sc_mypage_board .coupon_view {padding: 3rem;}

    /*마일리지 적립내역*/
    .mypoint_history > li {flex: auto; width: calc(50% - 0.5rem); padding: 2rem 1rem;}
    .mypoint_history .txt > p {font-size: 1.6rem;}

    /*쿠폰함*/
    .Coupon_list > li {flex-direction: column;}
    .Coupon_list .coupon_cnt {width: 100%; border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0;}
    .Coupon_list .coupon_more {width: 100%; border-radius: 0 0 1.5rem 1.5rem;}
    .Coupon_list .coupon_more .btn {position: inherit; width: 100%; height: 5rem; line-height: 5rem; border-radius: 0; background-color: transparent;}
    
    /*마이페이지(플러스샵) - 대시보드*/
    .sc_dashboard .shop_table .title {margin-bottom: 2rem;}
    .sc_dashboard .shop_table {order: 2; width: 100%; margin-right: 0; margin-bottom: 5rem;}
    .sc_dashboard .shop_code {order: 1; margin: 0 auto 3rem;}

    /*방문인증 현황*/
    .sc_visit {margin-top: 0;}
    .sc_visit .title {width: 100%; margin-right: 0;}
    .sc_visit .title br {display: none;}
    .sc_visit .count_list {width: 100%; margin-top: 3rem;}
    .sc_visit .count_list > li {width: calc(50% - 1rem); padding: 3rem 1rem;}

    /*회원이용약관*/
    .site_service strong {font-size: 2.2rem;}

    /*회원탈퇴*/
    .delete_account .img > img {width: 10rem;}
    .delete_account .warning_ul {padding: 2rem;}
}

@media all and (max-width:480px) {
    /*회원가입*/
    .member_join .member_benefit > li {flex-direction: column;}
    .member_join .member_benefit .txt {width: 100%; margin-top: 2rem;}
    .member_join .special_list > li {width: 100%;}

    /*대시보드*/
    .dashboard_list > li {width: 100%;}

    /*플러스샵 목록*/
    .sc_plus_shop {margin-top: 8rem;}
    .plus_shop_title .primary_color {font-size: 2.6rem;}
    .plus_shop_title p {font-size: 1.8rem;}
    .plus_shop_list {padding: 1rem 0 5rem;}
    .plus_shop .slide_controls {display: none;}

    /*출석체크*/
    .month_stemp_modal .stemp_history {padding: 1.5rem;}
    .month_stemp_modal .stemp_title {background-size: 40rem; background-position: left -2rem top;}
    .month_stemp_modal .stemp_title .title {font-size: 2.4rem;}
    .month_stemp_modal .stemp_title .title strong {font-size: 3.6rem;}
    .month_stemp_modal .stemp_cnt {max-width: 40rem; min-width: 36rem;}
    .month_stemp_modal .calendar_box {margin-top: -6rem;}
    .month_stemp_modal .calendar_ul .save_point {font-size: 1.2rem;}
    .month_stemp_modal .calendar_ul .check_day img {left: -0.6rem; top: -0.6rem;}

    /*쿠폰함*/ 
    .Coupon_list > li {width: 100%;}
}