body, html {width: 100%; height:100%; background-color: #F3F7FF} 
main {max-width: 500px; margin: 0 auto; background-color: #F3F7FF; height:100%;}
header {position: sticky; top:0px; width: 500px; z-index: 99;}

* {box-sizing: border-box;}

/* 로그인 */
.cs_login {background-image: url(../image/cass_bg.png); background-size: cover; background-position: center center; height:100%; position: relative;}
.cs_login_inner {position: absolute; top:50%; transform: translateY(-50%); width: 100%; text-align: center;}
.cs_login_inner span {color:#fff; font-size: 40px; display: block; text-align: center; transform: skewX(-12deg); transform-origin: left bottom; padding-right: 100px;}
.cs_login_inner span:last-child {font-size: 30px; padding-left:50px; padding-right: 0px;}
.cs_login_form {margin-top: 40px;}
.cs_login_form input {background-color: rgba(255,255,255,0.2); height:60px; border:0px; border-radius: 60px; color:#fff; font-size: 20px; padding: 0px 40px; width: 70%; margin-bottom: 10px;}
.cs_login_form input::placeholder {color:rgba(255,255,255,0.6);}
.cs_login_form button {background-color: #14A7E0; color:#fff; height:60px; border-radius: 60px; border:0px; font-size: 20px; text-align: center; width: 70%;}
.cs_login_form div {text-align: center}
.cs_login_form div a {font-size: 24px; display: block; margin-top: 40px; color:#fff;}
.cass_main_t {margin-top: 70px;}
.cass_main_t img {width: 240px;}

/* 헤더 */
.cs_hd {background-color: #14A7E0; padding: 25px 25px 60px 25px; display: flex; align-items: center;gap:15px}
.cs_hd_prof_img {}
.cs_hd_prof_img img {width:66px; height:66px; object-fit: cover; border-radius: 100%;}
.cs_hd_prof_info {font-size: 16px; color:#fff;}
.cs_hd_prof_btn {margin-left: auto;}
.cs_hd_prof_btn button {background-color: transparent; color:#fff; width:40px; height:40px; border:0px;}
.cs_info_name {font-size: 20px;}
.cs_info_sub {opacity: 0.6; margin-top: 5px;}
.cs_point {padding: 0px 25px; margin-top: -38px;}
.cs_point_inner {background-color: #fff; padding: 25px 40px; border-radius: 100px; display: flex; align-items: center; font-size: 20px; box-shadow: 0px 0px 30px rgba(0,0,0,0.05);}
.cs_point_inner_t {}
.cs_point_inner_p {margin-left: auto; color:#14a7e0;}

/* 컨텐츠 */
.content {padding: 25px;}
.content_title {font-size: 14px; text-align: center; margin-bottom: 20px;}
.content_title span {display: block; text-align: center; font-size: 40px; color:#14a7e0;}
.content_box {background-color: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,0.05); padding: 25px 0px; border-radius: 25px;}
.content_title2 {margin-bottom: 20px;}
.content_title2 ul {display: flex; align-items: center;}
.content_title2 ul li {font-size: 20px;}
.content_title2 ul li:last-child {margin-left: auto; font-size: 16px;}

.content_my{display:flex;justify-content:center;align-items:stretch;text-align:center;}
.content_my > ul{flex:0 0 33.3333%;max-width:33.3333%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; border-right: 1px solid #eee;}
.content_my > ul:last-child {border-right: 0px;}
.content_my > ul > li{display:flex;align-items:center;justify-content:center;}
.content_my > ul > li svg{display:block;}
.content_my > ul > li.font-B {color:#14a7e0; font-size: 16px;}
.content_my > ul > li span {font-size: 13px; color:#999; padding-left: 5px;}
.content_my > ul > li img {width: 70px; padding-top: 4px; padding-bottom: 4px;}
.point_ch {margin-top: 30px; padding: 0px 20px;}
.point_ch button {background-color: #f0f5f9; border-radius: 10px; height:60px; text-align: center; color:#14a7e0; font-size: 18px; width: 100%; border:0px;}

.content_c {padding: 0px 25px;}
.content_c_list {display: flex; align-items: center; gap:20px; padding-bottom: 25px; border-bottom: 1px dashed #ddd; padding-top: 25px; cursor: pointer;}
.content_c_list:hover button {opacity: 1;}
.content_c_list:last-child {border-bottom: 0px; padding-bottom: 0px;}
.content_c_img {}
.content_c_img img {width: 80px; height:80px; object-fit: cover; border-radius: 15px; border:1px solid rgba(0,0,0,0.1);}
.content_c_data {}
.content_c_data_1 {font-size: 16px; color:#999; margin-bottom: 7px;}
.content_c_data_2 {font-size: 18px; color:#000; margin-bottom: 3px;}
.content_c_data_3 {color:#14a7e0; font-size: 16px;}
.content_c_btn {margin-left: auto;}
.content_c_btn button {background-color: transparent; opacity: 0.3; border:0px; width: 40px; height:40px; color:#000;}
.content_c_btn2 {margin-left: auto;}
.content_c_btn2 button {background-color: transparent; opacity: 0.3; border:0px; width: 40px; height:40px; color:#000;}

.pt-0 {padding-top: 0px;}
.pb-0 {padding-bottom: 0px;}

footer {position: sticky; bottom:0px; padding: 25px; z-index: 99}
.cs_ft {background-color: #fff; border-radius: 20px; box-shadow: 0px 0px 30px rgba(0,0,0,0.05); padding: 15px 20px; padding-bottom: 25px;}
.cs_ft {}

.nav_btns{display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;list-style:none; margin-top: 10px;}
.nav_btns > button{flex:1 1 0;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent; opacity: .6}
.nav_btns > button:nth-child(3){flex:0 0 auto;transform:scale(1.25); background-color: #14a7e0; width:70px; height:70px; border-radius: 100%; text-align: center; margin-left: 20px; margin-right: 20px; opacity: 1; margin-top: -30px; box-shadow: 0px 0px 20px rgba(0,80,193,0.4);}
.nav_btns > button img {width: 90%;}

/* 모달 */
.rb-modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;}
.rb-modal.is-open{display:block;}
.rb-modal-bg{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0.7);}
.rb-modal-box{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:min(450px, calc(100% - 50px));background:#fff;border-radius:20px;box-shadow:0 0px 30px rgba(0,0,0,0.05);padding:40px 25px;}
.rb-modal-close{position:absolute;right:15px;top:20px;border:0;background:transparent;font-size:14px;cursor:pointer;}
.rb-modal-body{padding-top:0px;text-align:center;}
.rb-modal-footer{display:flex;gap:5px;justify-content:center;;margin-top:25px;}
.rb-modal-footer button{border:0;background:#14a7e0;padding:15px 30px;border-radius:10px;cursor:pointer; font-size: 18px; color:#fff;}
#commonModalTitle {font-size: 24px; text-align: center;}
.st_image {background-color: #f0f5f9; border-radius: 10px; margin-top: 20px; margin-bottom: 20px;}
.st_image img {height:60px;}
.st_cont {font-size: 16px; text-align: center; padding: 0px 50px; word-break: keep-all; color:#888; line-height: 140%;}

.st_cp {margin-top: 20px; margin-bottom: 20px;}
.st_mb {margin-top: 10px; margin-bottom: 10px;}
.cp_inp {background-color: #f0f5f9; padding: 0px 15px; border-radius: 10px; width: 100%; height:50px; text-align: center; color:#000; border:0px; font-size: 16px;}
.mb_inp {background-color: #f0f5f9; padding: 0px 15px; border-radius: 10px; width: 100%; height:50px; text-align: center; color:#000; border:0px; font-size: 16px;}

.content_c_point .content_c_img img {width: 60px; height:60px;}
.content_c_point .content_c_btn {display: none;}
.content_c_point .content_c_data_1 {font-size: 12px;}
.content_c_point .content_c_data_2 {font-size: 16px;}
.content_c_point .content_c_data_3 {font-size: 14px;}

.bill_c {padding: 0px;}
#bill_img_bg {object-fit: cover; width:100%; height:300px; border-radius: 20px;}
.bill_btm_tit {font-size: 20px; text-align: center;}
.bill_btm_sub {font-size: 16px; line-height: 140%; word-break: keep-all; margin-top: 3px; text-align: center; color:#888;}

.b_btm_btn_wrap {display: flex;gap: 10px; margin-top: 15px;}
.b_btm_btn_wrap button {flex: 1; background-color: #14a7e0; color:#fff; height:60px; border-radius: 20px; border:0px; text-align: center; font-size: 18px;}
.b_btm_btn_wrap .file_input_label {flex: 1; background-color: #14a7e0; color:#fff; height:60px; border-radius: 20px; border:0px; text-align: center; font-size: 18px; line-height: 60px;}

#bill_ok_img {text-align: center; padding-bottom: 10px;}
#bill_ok_img img {width: 50%;}

.content_c_list2 .content_c_img img {width:60px; height:60px;}
.content_c_list2 .content_c_btn {color:#14a7e0; font-size: 16px;}
.content_c_btn2 {color:#14a7e0; font-size: 16px;}
.st_point {background-color: #f0f5f9; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; color:#14a7e0; font-size: 22px; padding: 20px 0px}

.p_btns {background-color: transparent; border:0px; width: 100%; padding: 0px; text-align: left;}
.p_btns .content_c_list:last-child {padding-bottom: 25px;border-bottom: 1px dashed #ddd;}
.st_point_c {background-color: #f0f5f9; border-radius: 20px; margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; gap:20px; padding: 20px; text-align: left;}
.st_point_c img {height:60px; width: 60px; border:0px;}
.st_point_c .content_c_btn2 {background-color: #C2CDDD; color:#fff; padding: 7px 15px; border-radius: 30px; font-size: 12px;}
.st_point_c .content_c_data_1 {margin-bottom: 0px; font-size: 14px;}
.st_point_c .content_c_data_2 {font-size: 16px;}
.st_point_c .st_cont li {font-size: 14px; color:#888;}
.st_point_c .st_cont li.st_cont_tit {font-size: 16px;}
.p_btns:last-child .content_c_list {border-bottom: 0px; padding-bottom: 0px;}
.pt-20 {padding-top: 20px !important;}

@media all and (max-width:512px) {
    
    header {width: 100%;}

}