@charset "UTF-8";
/*-------------------------------------------------------------------
	파일정의 : style
	작성날짜 : 2020-03-30 장병주
	참고사항 : 이 파일은 개별 페이지에 대한 스타일을 정의합니다.
	분류순서 : 기본정책 > 유틸리티 > 사용자정의(컬러, 폰트, 보더, 간격 등)
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## main
-------------------------------------------------------------------*/
.main_sec {height: 100% ;padding: 20px 0; box-sizing: border-box}
.main_ttl {margin-bottom: 40px;}
.main_ttl h2{font-size: 3.4rem; line-height: 1.3;}
.main_ttl h3{font-size: 2.3rem; line-height: 1.5;}
.main_cnt {position: relative;}
.main_cnt_box {position: absolute; right: 0; top: 0; left: 14%; text-align: left;}
.main_cnt_box>.inner{ position: relative; background: #fff; z-index: 2;}
.main_cnt_box:before, .main_cnt_box:after {position: relative; display: block; height: 10px; width: 100%; background-size: cover !important; content: ''; z-index: 1;}
.main_cnt_box:before {background: url(../img/bill_frame_top.png) 0 bottom no-repeat;}
.main_cnt_box:after {background: url(../img/bill_frame_bottom.png) right top no-repeat;}

.main_cnt_box .shadow {position: absolute; left: -30px; right: -28px; top: -28px; bottom: -30px; background: url(../img/bill_shadow.png) center no-repeat; background-size: 100% 100%!important; z-index: 0;}
.main_cnt .announcement {text-align: left;}
.main_cnt .announcement a {position: relative; display: block; padding-right: 10px;}
.main_cnt .announcement a:before {position: absolute; right: 2px; top: 7px; width: 5px; height: 5px; border-right: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; transform: rotate(-45deg); content: '';}
.main_cnt .announcement span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem; color: #1f1f1f; line-height: 1; letter-spacing: -.03em}
.main_cnt_wrap+.announcement {margin-top: 45px;}
.main_item {background: #fafafa;}

/* 청구 납입 */
.claim .main_cnt_box>.inner{padding-top: 5px;}
.claim .detail_area {position: relative;}
.claim .detail_area .ttl {font-size: 1rem; color: #2f2f2f; font-weight: 700;}
.claim .detail_area .bank,
.claim .detail_area .bank a {font-size: .9rem; color: #1f1f1f; margin-top: 2px;}
.claim .detail_area .due_date {position: absolute; right: 0; top: 0; display: inline-block; font-size: .8rem; color: #000; padding: 0 8px; line-height: 16px; border-radius: 8px; background: #f1f1f1;}
.claim .price_area {margin: calc(8px + 5.5vw) 0 calc(11px + 7vw)}
.claim .price_area p {font-size: 2.7rem;; color: #000; font-weight: 700; line-height: 1;}
.claim .btn_area .btn {height: auto; border-bottom: none; line-height: 1; padding: 15px 0; margin-bottom: -10px ;}
.claim .btn_area .col:nth-child(even) .btn {border-left: 1px solid #ededed; }


/* 생활서비스 */
.main_item.service .main_ttl {position: relative;}
.my_service_area {display: none; position: fixed; right: 6.5%; top: calc(48px + 20.5vw); z-index: 10;}
.my_service,
.my_service strong,
.my_service span {display: block; line-height: 1.2; font-weight: 700;}
.my_service {width: calc(10px + 11vw); height: calc(10px + 11vw); padding: calc(2px + 3vw) 0; background: #336755; border-radius: 50%; color: #fff; text-align: center; box-shadow: 2px 2px 4px rgba(0,0,0,.15); box-sizing: border-box}
.my_service strong {font-size: 1rem;}
.my_service span {font-size: .7rem;}
.service_list {padding: 0 7px;}
.service_list .service_item {display: block; padding: 12px 0; text-align: center;}
.service_list .service_item .ic,
.service_list .service_item span {display: block;}
.service_list .service_item .ic {margin: auto;}
.service_list .service_item span {margin-top: 7px; font-size: 1rem;}

.service_list .floor_info_btn {position: absolute; top: 240px; right: 30px; font-weight: 400;}

.floor_info_group  {padding: 10px 0; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8;}
.floor_info_group .label_cnt {padding: 10px 0;}
.floor_info_group .label_cnt .label_area,
.floor_info_group .label_cnt .cnt_area span {font-size: 1.2rem; color: #1f1f1f;}
.floor_info_group .label_cnt .label_area {width: 20%;}
.floor_info_group .label_cnt .cnt_area {margin-left: -20%; padding-left: 20%; text-align: left;}
.floor_info_group .label_cnt .cnt_area span {display: inline-block;  vertical-align: top;}
.floor_info_group .label_cnt .cnt_area span + span:before {display: inline-block; content: '∙'; margin: 0 4px 0 2px; transform: translateY(-1px)}
.floor_info_group .label_cnt .cnt_area small {display: inline-block; color: #acacac; font-size: 1rem; margin-left: 10px; vertical-align: middle;}

.contract_btns .btn,
.reservation_btns .btn,
.community_btns .btn,
.customer_btns .btn {border: 0 none; font-weight: 400;}

.reservation_btns,
.community_btns {padding: calc(13.5vw + 6px) 0px}

.bld_select_wrap  {margin-top: -20px;}
.bld_select_wrap .input_area.select {display: inline-block; padding-bottom: 10px;} 
.bld_select_wrap .input_area.select .input_box {padding: 2px 0; border-color: #1f1f1f}
.bld_select_wrap .input_area.select .input_box:before,
.bld_select_wrap .input_area.select .input_box:after {border: 0 none;}
.bld_select_wrap .input_area.select .input_box:before {right: 0; width: 13px; height: 13px; margin-top: -7px; background: url(../img/ic_bld_arw.png) center no-repeat; background-size: 13px 13px}
.bld_select_wrap .input_area.select .input_box:after {display: none;}
.bld_select_wrap .input_area.select .input_box select {padding-right: 25px; font-size: 1rem; font-weight: 700;}

/* 부동산 계약 */
.contract .main_ttl .ic {vertical-align: -3px;}
.contract .main_cnt_box>.inner {}
.contract_btns {}
.contract_btns .col + .col {border-top: 1px solid #ededed;}
.contract_btns .col:first-child {margin-top: -10px;}
.contract_btns .col:nth-child(even) {border-right: 1px solid #ededed;}
.contract_btns .col:nth-child(n+4) {margin-bottom: -10px;}
.contract_btns .btn {line-height: calc(20px + 11vw); height: calc(22px + 11vw);}


.reservation_btns .col+ .col,
.community_btns .col+ .col {border-left: 1px solid #ededed;}

.reservation_btns .btn .ic,
.reservation_btns .btn span,
.community_btns .btn .ic,
.community_btns .btn span {display: block; margin: auto; text-align: center;}

.reservation_btns .btn span,
.community_btns .btn span {line-height: 1.3; margin-top: 2px;}

.customer_btns .col + .col + .col {border-top: 1px solid #ededed;}
.customer_btns .col:nth-child(even) {border-left: 1px solid #ededed;}
.customer_btns .col:nth-child(n-2){margin-top: -10px;}
.customer_btns .col:nth-child(n+3){margin-bottom: -10px;}
.customer_btns .btn {line-height: calc(33px + 17.6vw); height: calc(35px + 17.6vw)}


.sign_in_by i{margin-right: 6px;}

.agree_area {border-top: 1px solid #000;}
.agree_area.list .input_area.check .input_box {border-bottom: 1px solid #d8d8d8;}
.agree_area.list .input_area.check .input_box.no_txt_label label {position: absolute; left: 0; top: 0; bottom: 0; width: 20px; padding: 0;}
.agree_area.list .input_area.check .input_box.no_txt_label label:before {display: none;}
.agree_area.list .input_area.check .input_box.no_txt_label input {top: calc(1rem + 2vw);}
.agree_area.list .input_area.check .input_box.no_txt_label a {display: block; padding: 10px 0 10px 20px; font-size: 1.3rem;}
.agree_area.list .input_area.check .input_box.no_txt_label a .arw {position: absolute; top: 50%; right: 2px; margin-top: -3px;}

.contents.join.certify .cnt_area.mobile {padding-bottom: 25px;}
.contents.join.certify .cnt_area.ipin {padding-top: 25px; border-top: 1px solid #d8d8d8;}
.contents.join.form {padding-bottom: 35px;}
.contents.join.form .select.branch .col.col_12 {margin: 5px 0;}
.contents.join.form .select.branch .col.col_8 .input_box {padding-left: 50px;}

.find_add .input_area {padding-bottom: 15px;}

.ex_area  {}
.ex_area .ex_list {position: relative; padding-left: 30px; font-size: 1rem;}
.ex_area .ex_list:before {display: block; content: 'ex.'; position: absolute; left: 0; top: 0; color: #1f1f1f; line-height: 1.7;}
.ex_area .ex_list li {font-weight: 300; line-height: 1.7;}
.ex_area .ex_list li span,
.ex_area .ex_list li small {float: left; width: 50%; box-sizing: border-box}
.ex_area .ex_list li small {font-size: 1rem; color: #aeaeae;}
.find_add>.btn_area {padding: 20px 0;}

.find_add_list .address_item {display: block;}
.find_add_list .address_item:before {display: block; content: ''; position: absolute; right: 1px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-top: 1px solid #1f1f1f; border-right: 1px solid #1f1f1f; transform: rotate(45deg)}
.find_add_list .address_item:before {display: block; content: ''; position: absolute; right: 0; top: 50%; margin-top: -2px; width: 6px; height: 6px; border-top: 1px solid #1f1f1f; border-right: 1px solid #1f1f1f; transform: rotate(45deg)}
.find_add_list .address_item:first-child {border-color: #d8d8d8;}
.find_add_list .address_item:last-child {border-bottom: 1px solid #d8d8d8;}
.address_item  .addr_txt {display: block; line-height: 1.8; font-size: 1rem;}
.address_item .zip_txt {background: url(../img/ic_building.png)left center no-repeat; background-size: 12px 12px; padding-left: 20px; }
.address_item  .addr_txt2 {color: #aeaeae;}

.complete_wrap  {padding: 50px 0;}
.complete_wrap .logo_area {padding: 0 0 20px;}
.complete_wrap .logo_area span {display: block; width: 75px; height: 55px; background: url(../img/logo_vertical.png) 0 0 no-repeat; background-size: 75px 55px;}
.complete_wrap .txt_area p{font-size: 1.5rem; color: #e9d9d1;}
.complete_wrap .btn_area {position: fixed; left: 11%; right: 11%; bottom: 75px; }


/* 로그인 */
.login .input_area.padding0{padding-bottom:0px;}
.login .sub_tit {margin-bottom:25px;}
.login .sub_tit h3{font-size: 1.3rem; font-weight:normal}
.login input::placeholder{ color:#d8d8d8;}
/*.login .input_area{ padding-bottom:25px;}*/

/*-------------------------------------------------------------------
    ## 청구/납부
-------------------------------------------------------------------*/
.bill_ttl {position: relative; padding-right: 80px;}
.bill_ttl .set_inner {position: static;}
.bill_ttl .select {position: absolute; right: 20px; top: calc(12vw + 3px); padding-right: 15px; padding-bottom: 0;}
.bill_ttl .input_area.select .input_box:before {position: absolute; right: -12px; top: 50%; width: 5px; height: 5px;  margin-top: -3px; border: none; border-right: 1px solid #336755; border-bottom: 1px solid #336755; transform: rotate(45deg) translateY(-50%);}
.bill_ttl .select.green .input_box:after {display: none;}
.bill_ttl .input_area.select .input_box select {padding: 0;}
.bill_ttl p {margin-top: 13px; font-size: 1.1rem;}

.bill_tabs {position: relative;}
.auto_pay_area {position: fixed; right: 5.5%; top: calc(58px + 25vw); z-index: 10;}
.auto_pay,
.auto_pay span {display: block; line-height: 1.2; font-weight: 700;}
.auto_pay  {width: calc(10px + 11vw); height: calc(10px + 11vw); padding: calc(3px + 3vw) 0; background: #336755; border-radius: 50%; color: #fff; text-align: center; box-shadow: 2px 2px 4px rgba(0,0,0,.15); box-sizing: border-box}
.auto_pay span {font-size: .85rem;}

.bill_history .tab_cnts {padding: 10px 0;}

.bill_cart_list {padding: 0 0 10px; margin-top: 20px; border-top: 1px solid #1f1f1f;}
.bill_cart_list .bill_cart_item {float: left;}
.bill_cart_list .bill_cart_item {width: 25%; text-align: center;}
.bill_pay {margin-bottom: 10px; font-weight: 500; color: #1f1f1f; font-size: 1rem;}

.bill_cart_list .graph {border: 0 none !important;}
.bill_cart_list .apexcharts-xaxis line {display: none;}

.detail_bell_area {padding-top: 20px;}
.detail_bell_area .detail_bell_info {padding: 15px 0; border-top: 1px solid #000; border-bottom: 1px solid #d8d8d8;}
.detail_bell_area .ttl_area {margin-bottom: 0;}
.detail_bell_info .ttl_area {margin-bottom: 10px;}
.detail_bell_area .detail_bell_cnt {padding: 15px 0 5px; border-bottom: 1px solid #d8d8d8;  margin-bottom: 25px;}
.detail_bell_area .part {position: relative; padding: 15px 0;}
.detail_bell_area .part + .part:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 1px; background: #1f1f1f;}
.period p + p span {position: relative; padding-left: 10px;}
.period p + p span:before {display: block; content: '~'; position: absolute; left: 0; top: 0;}
.detail_bell_area .total_cnt strong {position: relative; padding-right: 3px; font-size: 1.5rem; white-space: nowrap}
.detail_bell_area .total_cnt strong:before {display: block; content: ''; position: absolute; left: -3px; right: 0; bottom: -3px; z-index: -1; top: 10px; background: #5affc6; opacity: .5;} 
.detail_bell_area .btn_area {padding: 25px 0; margin-top: -25px;}

.payment_method .ttl_area{padding-bottom: 15px; border-bottom: 1px solid #1f1f1f; margin-bottom: 0;}
.payment_method .ttl_area p{font-size: 1.3rem; line-height: 1;}
.payment_method_list .howtopay{margin-right: 12px;}
/*
.payment_method_list li{border-bottom: 1px solid #ebebeb;}
.payment_method_list li a{display: block; position: relative; font-size: 1.3rem; padding: 15px 0;}
.payment_method_list li a strong {display: inline-block; position: absolute; right: 20px; top: 13px;}
.payment_method_list .howtopay{margin-right: 12px;}
.payment_method_list .arw{float: right; margin-top: 7px; margin-right: 3px;}
*/
.payment_method_list li{border-bottom: 1px solid #ebebeb; position: relative; font-size: 1.3rem;}
.payment_method_list .input_box {border-bottom: 0 none;}
.payment_method_list .input_area.radio .input_box label {padding-left: 25px;}
.payment_method_list .input_area.radio input:before {width: 12px; height: 12px; border: 1px solid #d8d8d8; border-radius: 50%; background: none;}
.payment_method_list .input_area.radio input:after {display: block; content: ''; position: absolute; left: 3px; top: calc(.5em + 7px + 1.5vw); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #336755; transform: scale(0)}
.payment_method_list .input_area.radio input:checked:before {border-color: #336755;}
.payment_method_list .input_area.radio input:checked:after {transform: scale(0)}

.save_p_method .input_box {border-bottom: none!important;}

.payment .method_box {margin-left: -4%; margin-right: -4%;}


.payment_history .all_chk {padding-bottom: 0;}
.payment_history .all_chk label {padding: 10px 30px 10px 0; text-align: right;}
.payment_history .all_chk input {left: auto; right: 7px; top: 50%; transform: translateY(-40%)}
.history_list .btn_area {border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;} 
.history_item {padding: 8px 0; border-top: 1px solid #d8d8d8;}
.history_item.no_data {margin-top: 15px; border-bottom: 1px solid #d8d8d8;}
.history_item.no_data p {padding: 30px 0;}

.history_item .input_area {padding-bottom: 0;}
.history_item .input_area.check label {padding: 0 30px 0 0;}
.history_item .input_area.check input {top: 50%; right: 7px; left: auto; transform: translateY(-40%)}
.history_item .label_cnt {display: table; width: 100%; padding-bottom: 5px;}
.history_item .label_cnt:last-child {padding-bottom: 0;}
.history_item .label_cnt>div {display: table-cell; width: auto; float: none; padding: 0; margin: 0; vertical-align: top;}
.history_item .label_cnt .label_area {}

.payment_history .user_mail {padding: 15px 0;}
.payment_history .user_mail strong {display: inline-block; position: relative; font-size: 1.5rem; color: #1f1f1f;}
.payment_history .user_mail strong:before {display: block; content: ''; position: absolute; left: -3px; right: -3px; bottom: 3px; top: 6px; z-index: -1; background: #5affc6; opacity: .5;}
.payment_history>.btn_area {padding: 10px 0 25px;}

.payment_type_area.input_area.radio .radio_group label {width: 49%; box-sizing: border-box; margin-left: 0;}
.form_area.debit .agree_area {border-top: 0 none;}
.form_area.debit .agree {margin-top: -20px; padding-bottom: 0; margin-bottom: 10px;}
.form_area.debit .agree .open_agree {position: absolute; width: 30px; height: 30px; right: 3px; top: 8px; text-align: right;}
.form_area.debit .agree .open_agree span {position: absolute; width: 0; height: 0; visibility: hidden}
.form_area.debit .agree .open_agree .arw {margin-top: 11px;}
.form_area.debit .tab_cnt > .btn_area {padding: 25px 0 30px;}

.my_peyment_info {padding: 10px 0 15px; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8;}
.my_peyment_info .ttl_area {margin-bottom: 10px;}
.cancel .input_area.select.end {padding-top: 20px; padding-bottom: 10px;}

.payment .apexcharts-grid,
.payment .apexcharts-toolbar,
.payment .apexcharts-legend{display: none;}
.bill_history .tab_cnt .detail_bell_area,
.bill_history .tab_cnt .detail_bell_area .detail_bell_cnt{padding-top: 0;}
.bill_history > .btn_area {padding-bottom: 40px;}

/*-------------------------------------------------------------------
    ## 부동산계약
-------------------------------------------------------------------*/
.contract .detail_contract_info .ttl_area,
.contract .detail_contract_cnt .ttl_area{padding-top: 0; margin-bottom: 10px;}
.contract .detail_contract_info {padding: 10px 0; border-top: 1px solid #1f1f1f;}

.detail_contract_cnt {padding-bottom: 20px;}
.contract .detail_contract_cnt .part {padding: 10px 0 0; border-top: 1px solid #d8d8d8;}
.contract .detail_contract_cnt .part .drop_cnt {padding: 0 0 10px;}
.contract .detail_contract_cnt .label_cnt>.label_area {white-space: nowrap}
.contract .detail_contract_cnt .btn_area {padding: 20px 0;}

.input_area.radio.time_select .radio_group {margin-top: 10px; padding-bottom: 0; border-top: 1px solid #000; border-bottom: 1px solid #d8d8d8;}
.input_area.radio.time_select .radio_group .btn_radio {float: left; width: 25%;}

.ttl_area.has_guide_btn {position: relative; padding-right: 100px}
.ttl_area.has_guide_btn .guide_btn {position: absolute; right: 0; top: calc(2px + .6em)}

.contract .move_in {padding-top: 0;}
.contract .move_in .input_box.txt {padding: 8px 0; border-bottom: 1px solid #000;}
.contract .form_area .btn_area {padding: 15px 0 30px;}


.reservation_history {padding-bottom: 30px;}
.reservation_history .ttl_area {margin-bottom: 10px;}
.reservation_history .history_list {border-top: 1px solid #000;}
.reservation_history .history_list .item {padding: 6px 0; border-bottom: 1px solid #d8d8d8;}
.reservation_history .history_list .item_head {position: relative;}
.reservation_history .history_list .item_head p,
.reservation_history .history_list .item_head .btn_area a {font-size: 1rem;}
.reservation_history .history_list .item_head .btn_area a + a {margin-left: 10px;}
.reservation_history .history_list .item_head .btn_area {position: absolute; right: 0; top: 0;border: 0 none; white-space: nowrap}
.reservation_history .history_list .item_body {display: table; width: 100%;}
.reservation_history .history_list .item_body p {display: table-cell; vertical-align: top;}
.reservation_history .history_list .item_body .date {color: #bdbdbd;}
.reservation_history .history_list .item_body .state {text-align: right; font-weight: 700; color: #1f1f1f;}
.reservation_history .history_list .item_body .state.return {color: #ff7d7d;}

.reservation_history .no_data {padding: 10px 0; text-align: left; border-bottom: 1px solid #d8d8d8;}
/*-------------------------------------------------------------------
    ## 방문예약
-------------------------------------------------------------------*/

.reservation .tab_cnts {padding: 25px 0;}
.reservation .input_area.select {margin-bottom: 30px; padding-bottom: 0;}
.reservation .input_area.select:before {position: absolute; top: 50%; left: 3px; width: 30px; height: 30px; margin-top: -15px; background-position: -60px 0;}
.reservation .input_area.select .input_box.spot_sel_box {border: 1px solid #000;}
/*
.reservation .input_area.select .input_box.spot_sel_box select {position: relative; height: 36px; padding: 0 20px 0 30px;}
.reservation .input_area.select .input_box.spot_sel_box:before,
.reservation .input_area.select .input_box.spot_sel_box:after{right: 10px;}
*/
.reservation .input_area.select .input_box.spot_sel_box .sel_btn {position: relative; padding: 0 20px 0 30px;}
.reservation .input_area.select .input_box.spot_sel_box:before,
.reservation .input_area.select .input_box.spot_sel_box:after{right: 10px;}
.reservation .input_area.select .input_box .sel_btn + .sel_list .sel_val {padding-left: 30px;}

.spot_list {padding-top: 15px; border-top: 1px solid #000;}
.spot_list .item {display: block; border-bottom: 1px solid #d8d8d8;}
.spot_list .item + .item {padding-top: 25px;}
.spot_list .item .txt_area {padding: 15px 0 25px;}
.spot_list .item .txt_area h3 {font-size: 1.3rem; font-weight: 400;}
.spot_list .item .txt_area p {font-size: 1rem; font-weight: 300;}

.reservation .form_area {padding-top: 0;}
.reservation .form_area .select .label_box {padding-bottom: 10px;}
.reservation .form_area .btn_area {padding: 15px 0 30px;}

.spot_info_wrap .ttl_area p {padding-top: 5px; font-size: 1.1rem; font-weight: 300;}
.info_group {padding: 20px 0 25px; border-bottom: 1px solid #d8d8d8;}

.spot_img_slide {margin-left: -9.5%; margin-right: -9.5%;}
.spot_img_slide .item .img {display: block; height: 0; padding-bottom: 61.61%; background-size: cover; background-position: center;}
.spot_img_slide .slick-dots {position: absolute; bottom: 0; left: 7.5%; z-index: 10;}
.spot_img_slide .slick-dots li {float: left; padding: 0 3px;}
.spot_img_slide .slick-dots button {width: 5px; height: 5px; border-radius: 3px; background: #fff; text-indent: -9999px; opacity: .6;}
.spot_img_slide .slick-dots .slick-active button {width: 12px; opacity: 1;}


.spot_overview {padding: 20px 0 15px; border-bottom: 1px solid #d8d8d8;}
.spot_overview p {margin-bottom: 10px; font-size: 1rem; font-weight: 300; word-break: keep-all}

.spot_type_slide {margin-right: -35px;}
.spot_type_slide .item {display: block; margin-right: 10px;}
.spot_type_slide .item .img {display: block; height: 0; padding-bottom: 52%; background-size: cover}
.spot_type_slide .item .txt {padding: 10px 0;}
.spot_type_slide .item .txt span {display: block; position: relative; float: left; font-size: 1rem; font-weight: 700;}
.spot_type_slide .item .txt span + span {padding-left: 10px;}
.spot_type_slide .item .txt span + span:before {display: block; content: ''; position: absolute; left: 4px; top: 50%; margin-top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #000;}

.service_group {padding-bottom: 15px;}
.service_group .ttl_area {margin-bottom: 10px;}
.service_group .part {margin: 5px 0;}
.service_group .part h5 {font-size: 1rem; font-weight: 300;}
.service_group .part .grid {margin-left: -10px; margin-right: -10px;}
.service_group .item {display: block; padding: 10px 0; text-align: center;}
.service_group .item .ic {display: block; margin: auto;}

.type_wrap {margin-bottom: 30px;}
.type_wrap .ttl_area p {margin-top: 10px; font-size: 1.1rem;}
.type_wrap .ttl_area p strong,
.type_wrap .ttl_area p span {display: block; position: relative; float: left; font-weight: 400;}
.type_wrap .ttl_area p strong:before {display: block; content: ''; position: absolute; left: 0; right: 0; top: 7px; bottom: 3px; z-index: -1; background: #5affc6; opacity: .5;}
.type_wrap .ttl_area p span {padding-left: 10px;}
.type_wrap .ttl_area p span:before {display: block; content: ''; position: absolute; left: 4px; top: 50%; margin-top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #000;}

.type_wrap .spot_type_slide_modal {margin-left: -25px; margin-right: -25px; margin-bottom: 20px;}
.type_wrap .spot_type_slide_modal .item .img {height: 0; padding-bottom: 60%; background-size: cover}
.type_wrap .spot_type_slide_modal .slick-dots {position: absolute; bottom: 10px; left: 25px; z-index: 10; padding: 0 5px; border-radius: 8px ; background: rgba(255,255,255,.5);}
.type_wrap .spot_type_slide_modal .slick-dots li {display: none; font-size: .9rem; line-height: 15px;}
.type_wrap .spot_type_slide_modal .slick-dots li.slick-active {display: block;}
.type_wrap .room_item_list {padding: 15px 0;border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8;}
.type_wrap .room_item_list h3 {margin-bottom: 10px; font-size: 1.3rem;}
.type_wrap .room_item_list li {margin-bottom: 8px; font-size: 1.3rem;} 
.type_wrap .room_item_list li:before {top: calc(-.2em + 4vw);}
.type_wrap .room_item_list li:last-child {margin-bottom: 0;}
.type_wrap .room_item_list ul + .counsel_info.warn_txt {margin-top: 20px;}
.type_wrap .room_item_list ul + h3 {margin-top: 20px;}

.notice_info .room_item_list {margin-bottom: 30px;}

/*-------------------------------------------------------------------
    ## 고객센터
-------------------------------------------------------------------*/
.customer .tab_cnt {padding: 25px 0;}

.contact_list {border-top: 1px solid #000;}
.contact_list .contact_item {display: block; padding: 15px 0; border-bottom: 1px solid #d8d8d8;}
.contact_list .contact_item a.drop_btn {display: block !important;}
.contact_list .contact_item a.drop_btn:before {right: 6px; top: calc(8vw - 1.5em);}
.contact_list .contact_item a.drop_btn.is_active:before {top: 9px;}
.contact_list .no_data {padding: 15px 0;font-size: 1.3rem; text-align: left; color: #1f1f1f; border-bottom: 1px solid #d8d8d8;}
.contact_state {display: inline-block; position: relative; padding: 0 18px 0 7px; border: 1px solid #1f1f1f; border-radius: 10px; font-size: .8rem; line-height: 18px; text-align: center;}
.contact_state:before {display: block; content: ''; position: absolute; right: 3px; top: 4px; width: 15px; height: 15px; background-position: -120px 0;}
.contact_state.complete:before {background-position: -120px -15px;}
.contact_item {position: relative;}
.contact_item .contact_cnt {position: relative;}
.contact_item .ttl {font-size: 1.3rem; padding: 8px 0 2px;}
.contact_item .date {font-size: 1rem; color: #bdbdbd;}
.contact_item .cancel {position: absolute; right: 0; bottom: -2px; font-size: 1rem;}
.contact_item .cancel:before {top: 2px;}
.contact_item .drop_cnt {width: auto; padding: 15px 0 20px; margin-bottom: 15px; font-size: 1.3rem;}
.contact_item .answer_cant {margin: 0 -9% -16px; padding: 15px 25px; background: #ededed;}


.tel_info  {padding: 0 10px 25px;}
.tel_info .call_office {display: block; padding: 12px 0; border: 1px solid #000; border-radius: 23px; font-size: 1.3rem;}
.tel_info .call_office strong {display: inline-block; position: relative; padding: 0 17px 0 30px; line-height: 20px;}
.tel_info .call_office strong:before {display: block; content: ''; position: absolute; left: 0px; top: -2px; width: 30px; height: 30px; background-position: -30px 0;}
.tel_info .call_office strong:after {display: block; content: ''; position: absolute; right: 3px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg)}
.office_list .ttl_area {padding-bottom: 15px; margin-bottom: 0; border-bottom: 1px solid #000;}
.office_list .office_item {display: table; position: relative; width: 100%; border-bottom: 1px solid #ededed;}
.office_list .office_item>div {display: table-cell; vertical-align: middle; padding: 15px 0; font-size: 1.3rem;}
.office_list .office_item>div.name {width: 130px; white-space: nowrap}
.office_list .office_item>div.tel {font-size: 1rem; color: #bdbdbd;}
.office_list .office_item .call_office {display: block; position: absolute; right: 0; top: 50%; padding: 0 18px 0 25px; margin-top: -11px; font-size: .9rem; line-height: 23px; border: 1px solid #000; border-radius: 12px; box-sizing: border-box}
.office_list .office_item .call_office:before {display: block; content: ''; position: absolute; left: 6px; top: 7px; width: 15px; height: 15px; background-position: -135px 0;}
.office_list .office_item .call_office:after {display: block; content: ''; position: absolute; right: 9px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg)}
.tel_cnt .disc_list {padding-top: 15px;}


.faq_cnt_wrap .contact_item .ttl {font-size: 1.3rem; padding: 0;}
.faq_cnt_wrap .contact_list .contact_item a.drop_btn:before {top: calc(1vw + .8em); margin-top: 0;}
.faq_cnt_wrap .contact_list .contact_item a.drop_btn.is_active:before {margin-top: -1px;}
.faq_cnt_wrap .contact_item .answer_cant {margin-top: 15px;}


.notice_cnt_wrap .contact_item .ttl {font-size: 1.3rem; padding: 0;}
.notice_cnt_wrap .contact_item.new .ttl:after {display: inline-block; content: ''; width: 4px; height: 4px; background: #ff7d7d; border-radius: 50%; margin-left: 5px; vertical-align: 6px;}
.notice_cnt_wrap .contact_item .ttl .category {display: inline-block; padding: 0 8px; margin-right: 10px; border: 1px solid #000; border-radius: 10px; line-height: 16px; font-size: .9rem; text-align: center; vertical-align: 1px; box-sizing: border-box;}
.notice_cnt_wrap .contact_item .answer_cant {margin-top: 15px;}
.write_form .textarea {padding-bottom: 0; }
.write_form .textarea .input_box {border-top: 1px solid #d8d8d8;}
.write_form .textarea .input_box textarea {height: 21vh; text-align: left;}
.write_form .btn_area {padding: 25px 0;}

/*-------------------------------------------------------------------
    ## 쿠폰
-------------------------------------------------------------------*/
.contents.coupon .coupon_input_area {padding: 25px 0 10px;}
.contents.coupon .coupon_input_area .input_wrap {margin-left: 0; padding-right: 80px; padding-left: 0;}
.contents.coupon .coupon_input_area .btn_area {width: 80px; vertical-align: middle;}
.contents.coupon .coupon_input_area .btn_area .delete {margin-right: -5px; margin-top: -1px;}
.coupon_list {padding: 15px 0; border-top: 1px solid #000; border-bottom: 1px solid #ededed;}
.coupon_list .conpon_item {display: table; width: 100%;}
.coupon_list .conpon_item + .conpon_item {margin-top: 10px;}
.coupon_list .conpon_item .label_area,
.coupon_list .conpon_item .cnt_area {display: table-cell; position: relative; vertical-align: middle; height: 80px; box-sizing: border-box}

.coupon_list .conpon_item .label_area {width: 30%; padding: 0 15px; background: #b8d0dc; text-align: center; font-size: 1.5rem; color: #fff; font-weight: 700; line-height: 1.3;}
.coupon_list .conpon_item .label_area:before {display: block; content: ''; position: absolute; left: 0px; top: 0px; z-index: 1; width: 0; height: 0; border-right: 14px solid transparent;  border-top: 14px solid #fff;}
.coupon_list .conpon_item .cnt_area {padding: 14px 20px;font-size: 1.1rem; border: 1px solid #eaeaea; border-left: 0 none;}
.coupon_list .conpon_item .cnt_area:before,
.coupon_list .conpon_item .cnt_area:after {display: block; content: ''; position: absolute; right: -1px; bottom: -1px;  z-index: 1; width: 0; height: 0; border-left: 14px solid transparent; z}
.coupon_list .conpon_item .cnt_area:before {border-bottom: 14px solid #eaeaea; transform: translate(-.7px, -.7px)}
.coupon_list .conpon_item .cnt_area:after {border-bottom: 14px solid #fff;}
.coupon_list .conpon_item .cnt_area .date {display: inline-block; color: #bdbdbd; margin-top: 3px;}
.coupon_list .no_data {padding: 15px 0; font-size: 1.3rem;}

.used .coupon_list .conpon_item .label_area {background: #dbdbdb;}
.used .coupon_list .conpon_item .cnt_area p, 
.used .coupon_list .conpon_item .cnt_area span {color: #dbdbdb;}

.conpon_info_list {border-top: 1px solid #000;}
.conpon_info_list li {padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #eaeaea;}
.conpon_info_list li:before {top: 17px;}


.coupon_list .conpon_item.is_select .label_area {background: #9cb1bb; color: #d9d9d9;}
.coupon_list .conpon_item.is_select .cnt_area {background: #d9d9d9;}
.coupon_list .conpon_item.is_select .cnt_area .date {color: #a0a0a0;}

/*-------------------------------------------------------------------
    ## 설정
-------------------------------------------------------------------*/
.form_area.confirm_mem,
.form_area.edit_mem {padding-top: 0;}
.form_area.confirm_mem > .btn_area {padding: 10px 0;}

.my_info_wrap .fix_info_group {padding: 10px 0; margin-bottom: 15px; border-top: 1px solid #000; border-bottom: 1px solid #eaeaea;}
.my_info_wrap .open_withdrawl {margin-bottom: 20px; font-weight: 400; text-decoration: underline}
.my_info_wrap > .btn_area {padding-bottom: 20px;}

.contents.setting .select.branch .col.col_8 .input_box {padding-left: 50px;}
.contents.withdrawl .withdrawl_info {border-top: 1px solid #000;}
.contents.withdrawl .withdrawl_info ul {min-height: 150px; padding: 10px 0; border-bottom: 1px solid #eaeaea;}
.contents.withdrawl .withdrawl_info li {font-size: 1.3rem;}
.contents.withdrawl .withdrawl_info li:before {top: 9px;}
.contents.withdrawl .withdrawl_info li + li {margin-top: 5px;} 
.contents.withdrawl .btn_area {padding: 10px 0 20px;}

.card_list {margin-bottom: 15px; border-top: 1px solid #000;}
.card_list .card_item {display: table; position: relative; width: 100%;padding: 15px 0; border-bottom: 1px solid #eaeaea;}
.card_list .card_item span {display: table-cell; vertical-align: middle;}
.card_list .card_item .card_img {position: relative; width: 60px; height: 36px;  border: 1px solid #f3f3f3; border-radius: 4px; background: #f3f3f3;}
.card_list .card_item .card_img:before,
.card_list .card_item .card_img:after {display: block; content: ''; position: absolute; left: 50%; top: 50%; background: #c1c1c1;}
.card_list .card_item .card_img:before {width: 16px; height: 2px; margin-top: -1px; margin-left: -8px;}
.card_list .card_item .card_img:after {width: 2px; height: 16px; margin-top: -8px; margin-left: -1px;}
.card_list .card_item .card_name {padding-left: 15px; font-size: 1.3rem;}
.card_list .card_item:before {display: block; content: ''; position: absolute; top: 50%; right: 2px; width: 6px; height: 6px; border-top: 1px solid #1f1f1f; border-right: 1px solid #1f1f1f; transform: translateY(-50%) rotate(45deg)}

.card_list.registered {margin-bottom: 50px;}
.card_list.registered .card_item:before {display: none;}
.card_list.registered .card_item .card_img {background: #fff; border: 1px solid #dbdbdb;}
.card_list.registered .card_item .card_img:before,
.card_list.registered .card_item .card_img:after {display: none;}
.card_list .card_item .card_img .ic {position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px;}
.card_list.registered .card_item .delete {position: absolute; right: -9px; top: 50%; transform: translateY(-50%)}

.card_register_info li {margin-bottom: 5px;}
@media screen and (max-width : 320px) {
    .sign_in_by.btn_area .no_grid {margin-left: -18px; margin-right: -18px;}
}

/*
2020-05-11 백규진
12_10
*/ 
/*에로우 설정*/


.setting_list {margin-bottom: 50px; border-top: 1px solid #000;}
.setting_list .setting_item {display: block; position: relative; padding: 15px 0; border-bottom: 1px solid #eaeaea;}
/*.setting_list .setting_item:befere {display: none;}*/
.setting_list .setting_item.link:before {display: block; content: ''; position: absolute; top: 50%; right: 2px; width: 6px; height: 6px; border-top: 1px solid #1f1f1f; border-right: 1px solid #1f1f1f; transform: translateY(-50%) rotate(45deg)}

.setting_list .setting_item a.on{ border:1px solid #1f1f1f; border-radius:20px; text-align:left; padding:4px 10px; padding-right:20px; float:right; position:relative; }
.setting_list .setting_item a.on:before {display: block; content: ''; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; border-top: 1px solid #1f1f1f; border-right: 1px solid #1f1f1f; transform: translateY(-50%) rotate(45deg)}

.setting_list .setting_item ul.disc_list{ margin-top:10px;}
.setting_list .setting_item h3{ font-size:1.4rem; font-weight:normal; font-weight:500;}
.setting_list .setting_item h3 span{ display:inline-block;  position:relative; margin-left:10px; font-weight: 300;}
.setting_list .setting_item h3.push{ display:inline-block;}
.contents .switch {position:absolute; top: 0; right:0; z-index: 10; height: 100%;}

.contents .switch label {display: block; width: 40px; height: 100%; cursor: pointer;}
.contents .switch input[type=checkbox] { height: 0; width: 0; visibility: hidden;}
.contents .switch span {position: absolute; top: 50%; right: 0; width: 33px; height: 13px; margin-top: -7px; background: #f4f4f4;  display: block;  border-radius: 7px;  color:#fff;  text-align: center; }
.contents .switch span:after {display: block; content: 'OFF'; position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background: #dbdbdb; border-radius: 11px; font-size:0.7rem;  transition: ease-out .25s; line-height: 20px;}
.contents .switch input:checked + span {background: #bbb;}
.contents .switch input:checked + span:after {left: calc(100% - 22px); background: #1f1f1f;  content: 'ON';}


/*-------------------------------------------------------------------
    ## 생활서비스
-------------------------------------------------------------------*/

.lifeservice .reserve_list{ margin-top:25px; border-top:1px solid #a1a1a1; }
.lifeservice .reserve_list ul li{ padding-top:10px; border-bottom:1px solid #e3e3e3;}
.lifeservice .reserve_list ul li:last-of-type{ border-bottom:0px solid #e3e3e3;}
.lifeservice .reserve_list ul li dl{ width:100%; height:auto;}

.lifeservice .reserve_list ul li dl dt{ float:left; width:20%; }
.lifeservice .reserve_list ul li dl dd{ float:left; width:80%;}
.lifeservice .reserve_list ul li dl dd .btn_area{ float:right; display:inline-block;}
.lifeservice .reserve_list ul li dl dd b{ float:right; display:inline-block;}

.lifeservice .reserve_list ul li dl dt:last-of-type{ font-weight:bold;}
.lifeservice .reserve_list ul li dl dd:last-of-type{ font-weight:bold;}

.lifeservice .reserve_list ul li dl dt, .lifeservice .reserve_list ul li dl dd{ margin-bottom:10px;}

.lifeservice .reserve_list ul li dl dd b.ing, .lifeservice .reserve_list ul li dl dd b.book{ color:#1f1f1f;}
.lifeservice .reserve_list ul li dl dd b.nobook{ color:#ff7d7d;}
.lifeservice .reserve_list ul li dl dd b.done, .lifeservice .reserve_list ul li dl dd b.return{ color:#bdbdbd;}

.lifeservice .ic.ic_s_delete{position: relative; width: 12px; height: 12px;}
.lifeservice .ic.ic_s_delete:before, .ic.ic_s_delete:after{position: absolute; left: 5px; top: 0px; width: 1px; height: 12px; content: ''; background: #1f1f1f;}
.lifeservice .ic.ic_s_delete:before{transform: rotate(45deg);}
.lifeservice .ic.ic_s_delete:after{transform: rotate(-45deg);}

.lifeservice .snb {margin-top: -5px; padding-bottom: 15px;}

.life_detail_wrap {padding: 20px 0 10px; margin: 25px 0 35px; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8;}
.life_detail_wrap .info_group .ttl_area {margin-bottom: 10px;}
.life_detail_wrap .info_group .ttl_area h4 {font-size: 1.3rem;}
.life_detail_wrap .info_group li {font-size: 1.3rem; margin-bottom: 5px; padding-left: 18px;}
.life_detail_wrap .info_group .disc_list li:before {top: .8rem;} 
.life_detail_wrap .info_group .info_img {padding: 0 20px 20px;}
.life_detail_wrap .info_group li.label_list {display: table; width: 100%;}
.life_detail_wrap .info_group li.label_list span {display: table-cell;}
.life_detail_wrap .info_group li.label_list .label {white-space: nowrap}
.life_detail_wrap .info_group li.label_list .label_list_cnt {width: 85%; padding-left: 5px;}

.life_detail_wrap .total_cnt .big {font-size: 1.5rem; color: #1f1f1f; font-weight: 700;}
.life_detail_wrap .total_cnt strong,
.life_detail_wrap .total_price strong {position: relative; padding-right: 3px;  white-space: nowrap}
.life_detail_wrap .total_cnt strong:before {display: block; content: ''; position: absolute; left: -3px; right: 0; bottom: 1px; z-index: -1; top: 8px; font-size: 1.5rem; background: #5affc6; opacity: .5;}
.life_detail_wrap .total_price {text-align: right;}
.life_detail_wrap .total_price strong {font-size: 2rem; line-height: 1;}
.life_detail_wrap .total_price strong:before {display: block; content: ''; position: absolute; left: -3px; right: 0; bottom: 3px; z-index: -1; top: 14px; background: #5affc6; opacity: .5;}

.select_cnt_box .label_cnt.total_cnt.is_info .label {margin-top: calc(1.5vw + 7px);}
.select_cnt_box .label_cnt.total_cnt .label {position: relative; font-weight: 400; font-size: 1.5rem; white-space: nowrap; vertical-align: bottom;}
.select_cnt_box .label_cnt.total_cnt .label:before {display: block; content: ''; position: absolute; left: -3px; right: 0; bottom: 1px; z-index: -1; top: 11px; font-size: 1.5rem; background: #5affc6; opacity: .5;}
.select_cnt_box .total_price strong {position: relative; font-size: 2.1rem; z-index: 1; line-height: 1;}
.select_cnt_box .total_price strong:before {display: block; content: ''; position: absolute; left: -3px; right: 0; top: 8px; bottom: 0; z-index: -1; background: #5affc6; opacity: .5; }
.select_cnt_box .total_price .price_info {display: block; margin-bottom: 3px; font-size: 1.3rem;} 
.select_cnt_box .total_price .price_info:before {display: none;}
/* margin-top: 25px; border-top: 1px solid #1f1f1f; */
.life_detail_wrap .detail_desc {padding: 20px 0 0;  font-size: 1.3rem; color: #1f1f1f;}
.life_detail_wrap .basic_info {padding-bottom: 5px;}
.life_detail_wrap .basic_info .disc_list {margin-bottom: 18px;}
.life_detail_wrap .select_info {padding: 10px 0 20px;}
.life_detail_wrap > .btn_area {padding: 20px 0;}

.ttl_area .drop_btn {padding-right: 20px;}
.ttl_area .drop_btn:before {width: 8px; height: 8px; border-width: 2px}

.lifeservice .tabs.has_btn {position: relative; margin-bottom: 15px; margin-top: 10px;}
.lifeservice .tabs.has_btn .my_service_area {right: 0;}
.lifeservice .tabs.has_btn .my_service_area .my_service {width: calc(5px + 11vw); height: calc(5px + 11vw); padding: calc(2px + 2vw) 0;}

.current_time {position: relative; padding-right: 60px; margin-bottom: 10px; font-size: 1.3rem;}
.current_time .btn {position: absolute; right: 0; top: 50%; z-index: 1; padding: 2px 5px; font-size: 1rem; font-weight: 400; transform: translateY(-50%)}
.lifeservice .select_group {margin-bottom: 15px;}
.lifeservice .life_detail_wrap .noti_cnt li {padding-left: 10px;}
.use_cnt .info_group {padding-bottom: 0; border-bottom: 0 none;}

.apply_stady .input_area.check,
.payment_popup .input_area.check {position: relative; padding-bottom: 0;}
.apply_stady .fold_wrap {margin-top: 20px; border-top: 1px solid #1f1f1f;}
.payment_popup .fold_wrap {border-top: 1px solid #1f1f1f;}
.apply_stady .fold_wrap .input_area.check .input_box,
.payment_popup .fold_wrap .input_area.check .input_box {border-bottom: 1px solid #d8d8d8;}
.apply_stady .fold_wrap .fold_btn,
.payment_popup .fold_wrap .fold_btn {position: absolute; right: 0; top: 5px; width: 40px; height: 40px; text-align: right;}
.apply_stady .fold_wrap .fold_btn .arw.bottom,
.payment_popup .fold_wrap .fold_btn .arw.bottom {margin-top: 13px; margin-right: 2px;}
.apply_stady .fold_wrap.is_active .fold_btn .arw.bottom,
.payment_popup .fold_wrap.is_active .fold_btn .arw.bottom{margin-top: 17px; transform: rotate(225deg)}
.apply_stady .fold_wrap .fold_cnt,
.payment_popup .fold_wrap .fold_cnt {display: none; padding: 15px 20px; background: #fafafa; border-bottom: 1px solid #d8d8d8;}
.apply_stady .fold_wrap .fold_cnt h5,
.payment_popup .fold_wrap .fold_cnt h5 {margin-top: 20px; font-weight: 700; font-size: 1rem;}
.apply_stady .fold_wrap .fold_cnt h5:first-child,
.payment_popup .fold_wrap .fold_cnt h5:first-child {margin-top: 0;}
.apply_stady .contents .btn_area,
.apply_stady_complete .contents .btn_area {padding: 20px 0 35px;}


.payment_popup .contents {padding-bottom: 65px;}
.select_cnt_box + .select_cnt_box {margin-top: 15px;}

.discount_cnt_wrap .cnt_area span {color: #aeaeae;}
.discount_cnt_wrap.is_select .cnt_area span {color: #1f1f1f;}
.discount_cnt_wrap .open_coupon {font-size: 1rem; padding: 2px 4px; margin-left: 10px; vertical-align: 1px;}
.payment_popup .payment_type_wrap {padding-left: 0; padding-right: 0; padding-bottom: 0;}
.payment_popup .payment_type_wrap .input_area {padding: 0 15px; border-top: 1px solid #aeaeae;}
.payment_popup .payment_type_wrap .ttl_area {padding: 0 15px;}
.payment_popup .payment_type_wrap .radio .input_box {border-bottom: 0 none; }
.payment_popup .input_area.radio input:before {background: transparent; border: 1px solid #aeaeae; border-radius: 50%;}
.payment_popup .input_area.radio input:after {position: absolute; content: ''; left: 1px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #336755; transform: scale(0)}
.payment_popup .input_area.radio input:checked:before {border-color: #336755; transition: .2s}
.payment_popup .input_area.radio input:checked:after {transform: scale(.7); transition: .2s}
.payment_popup .payment_type_wrap .input_area.select {display: none; padding: 10px 15px 15px;}

.popup.coupon_select .contents.coupon .coupon_input_area {padding-top: 0;}


.coupon_dc::before {display: inline-block; content: ''; width: 5px; height: 1px; margin-right: 3px; background: #1f1f1f; vertical-align: 4px}

.lifeservice.complete .btn_area {padding: 20px 0 30px;}

.lifeservice .sel_date_area {padding: 10px 0 20px;}

.apply_meeting .input_area.agree {margin-top: 15px; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; padding-bottom: 0;}
.apply_meeting .agree_btn {display: block; position: relative; padding: 14px 0 14px 20px; font-size: 1.3rem; border-bottom: 1px solid #d8d8d8;}
.apply_meeting .agree_btn .arw.bottom {position: absolute; right: 0; top: 50%; margin-top: -6px; margin-right: 3px;}
.apply_meeting .fold_wrap.is_active .fold_btn .arw.bottom{margin-top: -3px; transform: rotate(225deg)}
.apply_meeting .fold_cnt {display: none; padding: 15px 20px; background: #fafafa; border-bottom: 1px solid #d8d8d8;}
.apply_meeting .contents .btn_area {padding: 20px 0 25px;}
.select_cnt_box li {font-size: 1.2rem; margin-bottom: 5px; padding-left: 10px; font-weight: 300; line-height: 1.9;}
.select_cnt_box li b,
.select_cnt_box li p {font-weight: 400;}
.select_cnt_box li p {line-height: 1.5; margin-top: 5px; margin-bottom: 10px;}
.select_cnt_box .disc_list li:before {top: calc(-.25em + 4vw)} 

.apply_cancel .contents .ttl_area + .btn_area {padding-top: 0 !important;}

.refund_cnt .refund_price {min-width: calc(12vw + 30px); padding-left: 5px;}

.lifeservice .use_state {position: relative; padding-bottom: 60px;}
.lifeservice .use_state:before {display: block; content: ''; position: absolute; left: 0; right: 0; bottom: 35px; border-bottom: 1px solid #d8d8d8;}
.use_state_wrap {margin-left: -7px; margin-right: -7px;}
.use_state_wrap:after {display: block; content: ''; clear: both;}
.use_state_wrap .state_part {position: relative; float: left; padding: 0 7px; box-sizing: border-box}
.use_state_wrap .state_part.area1 {width: calc(66.66%);}
.use_state_wrap .state_part.area1:before {display: block; content: ''; position: absolute; top: 0; right: -1px; bottom: 7px; width: 1px; background: #d8d8d8;}
.use_state_wrap .state_part.area2 {width: calc(33.33%); padding-top: 41px;}
.use_state_wrap .state_part .grid {margin-left: -3px; margin-right: -3px;}
.state_part .state_group.grid .col {padding: 0 3px;}
.use_state_wrap .state_part.area1 .col {width: 25%}
.use_state_wrap .state_part.area2 .col {width: 50%}
.state_part .state_group .state_item {margin-bottom: 7px; border: 1px solid #336755; border-radius: 3px; text-align: center;}
.state_part .state_group .state_item .state_item_head {background: #336755; color: #fff; line-height: 1;}
.state_part .state_group .state_item .state_item_head span {display: inline-block; padding: 5px; font-size: .9rem; line-height: 1; vertical-align: top;}
.state_part .state_group .state_item .state_item_body {padding: 5px 0; font-size: .9rem;}
.state_part .state_group .state_item .state_item_body .ic {display: block; margin: 0 auto 2px;}
.state_part.area2 .state_group .state_item .state_item_body {padding: 14px 0;}
.state_part.area2 .state_group .state_item .state_item_body .ic {margin-bottom: 12px;}
.state_part .state_group .state_item.disable {border-color: #e3e3e3;}
.state_part .state_group .state_item.disable .state_item_head {background: #e3e3e3;}
.state_part .state_group .state_item.disable .state_item_body {color: #e3e3e3;}
.state_foot {margin-top: 8px; padding: 0 7px;}
.state_foot .legend_group {float: left; line-height: 6vw;}
.state_foot .legend_group .legend_item {display: inline-block; position: relative;}
.state_foot .legend_group .legend_item .ic {margin-right: 3px;}
.state_foot .legend_group .legend_item + .legend_item {margin-left: 18px;}
.state_foot .refresh_btn {float: right; font-weight: 400;}

.service_detail_list {padding-bottom: 25px;}
.service_detail_list .item {display: block; position: relative; margin-bottom: 15px;}
.service_detail_list .item:before {display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border: 1px solid #e0e0e0; opacity: .3;}
.service_detail_list .item .txt_area {position: absolute; left: 0; right: 0; bottom: 0; padding: .7em 15px 1.2em; background: rgba(255,255, 255,.7); font-size: 1.3rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.service_detail_list .item .txt_area h3 {margin-bottom: 2px;}

.service_detail_list.no_data {border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8; padding: 15px 0;}
.service_detail_list.no_data p{font-size: 1.2rem; text-align: left;}

.lifeservice .tabs.has_btn .my_service_area.detail {display: block; right: 7.5%; top: calc(67px + 8.5vw)}
.open_snb .lifeservice .tabs.has_btn .my_service_area.detail {top: calc(115px + 8.5vw)}

.full_img_cnt {margin-left: -9.5%; margin-right: -9.5%;}
.full_img_cnt .img {padding-bottom: 60%; background-size: cover; background-position: center;}


.teacher_cnt {margin-bottom: 15px;}

.time_select.start_time {margin: 5px 0 30px;}
.lifeservice .sel_date_area.small {padding: 20px 0 25px;}
.lifeservice .sel_date_area.small .start_time {margin-left: 5px;}
.lifeservice .sel_date_area.small .start_time + .end_time {display: inline-block; position: relative;}
.lifeservice .sel_date_area.small .start_time + .end_time:before {display: inline-block; content: '~'; margin: 0 3px;}
.lifeservice .sel_date_area.small .interval {margin-left: 5px;}

.lifeservice .noti_cnt {padding: 20px 0 15px;}
.lifeservice .time_select .info_txt,
.lifeservice .time_select .noti_cnt {padding-top: 10px;}

.lifeservice .agree_area.list {margin: 20px 0 25px;}
.lifeservice .agree_area.list .agree_item {border-bottom: 1px solid #d8d8d8;}
.lifeservice .agree_area.list .input_area.check .input_box {border-color: #1f1f1f;}
.lifeservice .agree_area.list .agree_item .agree_cnt {padding: 15px 0 15px 20px; font-size: 1.3rem;}
.lifeservice .agree_area.list .agree_item .agree_cnt .drop_btn {display: block !important;}
.lifeservice .agree_area.list .agree_item .agree_cnt .drop_btn:before {right: 3px;}
.lifeservice .agree_area.list .answer_cant {border-top: 1px solid #d8d8d8; padding: 15px 20px; background: #fafafa; font-size: 1rem;}
.lifeservice .agree_area.list .answer_cant .ttl {margin-bottom: 3px;}
.lifeservice .agree_area.list .answer_cant p + .ttl {margin-top: 15px;}

.has_fix_btn .footer {padding-bottom: calc(46px + 6vw);}

.lifeservice .agree_area.list .input_box label:before {display: none;}

.class_payment .agree_area.list{margin-top: 0; border-top: 0 none;}

.lifeservice .agree_area.list .input_area.check.drop_wrap .input_box {border-bottom-color: #d8d8d8;}
.lifeservice .agree_area.list .input_area.check.drop_wrap .answer_cant {border-top: 0 none; border-bottom: 1px solid #d8d8d8;}

.class_payment .label_cnt>.label_area {width: 25%;}
.class_payment .label_cnt>.cnt_area {padding-left: calc(25% + 5px); margin-left: -25%;}

.select_cnt_box.coupon .label_cnt {padding-top: 2px; margin-top: -2px;}
.select_cnt_box.coupon .cnt_area.has_btn .btn {margin-top: -4px; margin-left: 10px;}

.payment_sel_group {margin: 0 -15px -10px;}
.payment_sel_item {padding-left: 15px; border-top: 1px solid #d8d8d8;}
.payment_sel_item .input_box {border-bottom: 0 none;}
.payment_sel_item .input_area.radio .input_box label {padding-left: 25px;}
.payment_sel_item .input_area.radio input:before {width: 12px; height: 12px; border: 1px solid #d8d8d8; border-radius: 50%; background: none;}
.payment_sel_item .input_area.radio input:after {display: block; content: ''; position: absolute; left: 3px; top: calc(.5em + 7px + 2vw); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #336755; transform: scale(0)}
.payment_sel_item .input_area.radio input:checked:before {border-color: #336755;}
.payment_sel_item .input_area.radio input:checked:after {transform: scale(1)}
.pay_cnt {display: none; margin-left: -15px; padding: 0 15px 15px;}
.pay_cnt.input_area.select .input_box {border-bottom: 1px solid #d8d8d8;}
.pay_cnt.input_area.select .input_box:before {display: none;}
.pay_cnt.input_area.select .input_box:after {margin-bottom: -5px; border-width: 4px; border-bottom-width: 0;}

.add_option_area {padding: 20px 0 0;}
.add_option_area .input_area,
.add_option_area .input_area .input_box {padding: 0;}
.add_option_area .input_area + .input_area {margin-top: -5px;}
.add_option_area .input_area.check label {padding: 5px 0 5px 20px;}
.add_option_area .input_area.check input {top: calc(.3rem + 2vw);}
.add_option_area .input_area.check span,
.add_option_area .input_area.check strong {display: inline-block; vertical-align: top;}
.add_option_area .input_area.check span {min-width: 7em}
 
.lifeservice.complete .return_info {padding-top: 5px;  border-top: 1px solid #000;}
.lifeservice.complete .return_info .ttl_area {margin-bottom: 10px;}
.lifeservice.complete .return_info .btn_area {padding: 0;}

/*-------------------------------------------------------------------
    ## 커뮤니티
-------------------------------------------------------------------*/
.community{}

.community *{box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

.community .selected {text-align:right;}
.community .interest_btn {position: relative; padding-right: 25px;}
.community .interest_btn:before {display: block; content: ''; position: absolute; top: 0; right: 0; width:16px; height:17px;  background-image: url(../img/ic_unselected.png); background-size: 16px 16px;}
.community .interest_btn.is_active:before  {background-image: url(../img/ic_selected.png);}

.community .market_list_wrap,
.community .meet_list_wrap,
.community .survey_list_wrap {border-top:1px solid #272727; position:relative; width:100%; height:auto;}

.community .market_list_wrap ul.market_list{}

.community .market_list_wrap ul.market_list > li,
.community .meet_list_wrap ul.meet_list > li,
.community .survey_list_wrap ul.survey_list > li { border-bottom:1px solid #dddddd;}

.community .market_list_wrap ul.market_list li ol{ }

.community .market_list_wrap ul.market_list li ol li{}

.community .market_list_wrap ul.market_list li ol li.img {width:54px; height:54px; margin:10px 15px 10px 0px; background:#000; background-size:cover; background-position:center; float:left;}
.community .market_list_wrap ul.market_list li ol li.list_tit{font-size:1.2rem; padding-top:8px; height:50px; overflow:hidden;}
.community .market_list_wrap ul.market_list li ol li.list_tit .post_state_txt {margin-right: 5px; transform: translateY(-1px)}


.community li.writer_date span.name{ margin-right:11px;}
.community li.writer_date span.date{ color:#c0c0c0;}
.community li.writer_date span.comments{ float:right; color:#c0c0c0;}
.community li.commments{ position:relative;}

.community .meet_list_wrap ul.meet_list li ol li.img{ width:37px; height:37px; margin:10px 15px 10px 0px; background:#000; background-size:cover; background-position:center; float:left;}
.community .meet_list_wrap ul.meet_list li ol li.list_tit{font-size:1.2rem; padding-top:8px; margin-bottom: 4px; overflow:hidden;}
.community .meet_list_wrap ul.meet_list li ol li.list_tit .post_state_txt {margin-right: 5px; transform: translateY(-1px)}

.post_state_txt {display: inline-block; min-width: 30px; text-align: center; font-size: .8rem; padding: 1px 3px; border: 1px solid #000; border-radius: 10px; box-sizing: border-box;}
.post_state_txt.disable {opacity: .2;}
.com_detail_wrap {border-top: 1px solid #000;}
.com_detail_wrap .com_detail_head {padding: 15px 0; border-bottom: 1px solid #d8d8d8;}
.com_detail_wrap .com_detail_head .post_state_area {position: relative;}
.com_detail_wrap .com_detail_head .post_state_area .interest_btn {position: absolute; right: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px;}
.com_detail_wrap .com_detail_head .ttl_area {margin-bottom: 0;}
.com_detail_wrap .com_detail_head .ttl_area h3 {font-size: 1.3rem;}
.com_detail_wrap .com_detail_head .post_info_area {padding: 10px 0 0;}

.post_info_area {position: relative;}
.post_info_area .date_group {position: absolute; right: 0; top: 10px; line-height: 21px;}

.com_detail_body {padding: 11px 0; border-bottom: 1px solid #d8d8d8; line-height: 1.5; font-size: 1.3rem; color: #1f1f1f;}

.community .write_btn_wrap{ position:fixed; bottom: 26px; right: 4.5%; width: calc(5px + 11vw); height:auto; }
.community .write_btn_wrap a {display:block; width: calc(5px + 11vw); height: calc(5px + 11vw); border-radius:50%; }
.community .write_btn_wrap a .ic {width: 114%; height: 114%; margin: -7%; background-size: cover}
.community .write_btn_wrap .top_btn{}
.community .write_btn_wrap .write_btn {margin-bottom: 8px;}

.community .survey_list_wrap {margin-top: 10px; padding-bottom: 20px;}
.community .survey_list_wrap ul.survey_list li ol li.list_tit{font-size:1.2rem; padding-top:8px; margin-bottom: 4px; overflow:hidden;}
.community .survey_list_wrap ul.survey_list li ol li.list_tit .post_state_txt {margin-right: 5px; transform: translateY(-1px)}
.community .survey_list_wrap ul.survey_list li ol li.writer_date {margin-bottom: 7px;}
.community .survey_list_wrap ul.survey_list li ol li .survey_info {float: right;}
.community .survey_list_wrap ul.survey_list li ol li .survey_info span {display: inline-block; vertical-align: middle;}
.community .survey_list_wrap ul.survey_list li ol li .survey_info span + span:before {display: inline-block; content: '·'; margin-right: 1px;}

.community{}

.wri_menu-button{width: 30px; height:26px; border-radius: 5px; position: relative; cursor: pointer; transition: all linear .01s; padding-top:10px; margin-right: -5px; z-index: 1; float:right;}
.cir-1, .cir-2, .cir-3{ width: 3px; background: #fff; border:1px solid #1f1f1f; height: 3px; margin: 4px auto; border-radius: 50%; transition: all linear .01s; float:left; margin:1.5px;}

.wri_menu{background: #fff; width: 100px; color: #fff; font-family: arial; font-size: 1.3rem; display: none; position: absolute; top: 40px; right:24px; box-shadow: -5px 5px 10px 2.5px rgba(0, 0, 0, .19); }
.wri_menu ul{list-style: none;}
.wri_menu ul li{margin: 20px 0;}

.survey_detail_wrap,
.survey_detail_wrap .com_detail_body {border-top: 0 none;}
.survey_detail_wrap .com_detail_head {padding-top: 0; border-bottom: 0 none;}
.survey_detail_wrap .post_state_area .date {color: #bdbdbd; font-size: 1rem; margin-left: 5px;}
.survey_detail_wrap .com_detail_body {padding-top: 0; border-bottom: 1px solid #d8d8d8;}

.survey_select_wrap {padding-bottom: 20px;}
.survey_select_wrap .ttl_area {margin-bottom: 0; padding: 10px 0;}
.survey_select_wrap .ttl_area:after {display: block; content: ''; clear: both;}
.survey_select_wrap .ttl_area h5, 
.survey_select_wrap .ttl_area span {font-size: 1rem; font-weight: 400;}
.survey_select_wrap .ttl_area h5 {float: left;}
.survey_select_wrap .ttl_area span {float: right;}

.survey_select_wrap.end_survey .input_area.check input {opacity: 0;}

/*-------------------------------------------------------------------
    ## 에러
-------------------------------------------------------------------*/
.error_wrap  {padding: 50px 0;}
.error_wrap .logo_area {padding: 0 0 20px;}
.error_wrap .logo_area span {display: block; width: 72px; height: 51px; background: url(../img/error.png) 0 0 no-repeat; background-size: 72px auto;}
.error_wrap .txt_area p{font-size: 1.5rem; color: #1f1f1f;}
.error_wrap .btn_area {position: fixed; left: 35px; right: 35px; bottom: 75px; }


/*-------------------------------------------------------------------
    ## 이용내역
-------------------------------------------------------------------*/
.use_history .tabs {display: flex; justify-content: space-between; margin-right: -7.5%;}
.use_history .tabs .tab  {float: none; margin-right: 0;}
.use_list_wrap {padding: 20px 0 35px;}
.use_list_wrap .use_list {padding-bottom: 10px;}
.use_list .use_item {display: block; position: relative; padding-top: 7px; margin-bottom: 17px;}
.use_list .use_item:before,
.use_list .use_item:after {display: block; content: ''; width: 100%; height: 15px; background-size: auto 15px; background-repeat: no-repeat;}
.use_list .use_item:before {background-image: url(../img/bg_use_history_top.png); background-position: 0 0;}
.use_list .use_item:after {background-image: url(../img/bg_use_history_bottom.png); background-position: 100% 0;}

.use_list .use_item .label_cnt>.label_area {width: 27%;}
.use_list .use_item .label_cnt>.cnt_area {padding-left: calc(27% + 5px); margin-left: -27%;}
.use_list .use_item .item_head {background: #336755; text-align: right; color: #fff; padding: 0 15px 5px; font-size: 1rem;}
.use_list .use_item .item_head .state {display: inline-block; font-weight: 700; transform: translateY(calc(-40% + .1em))}
.use_list .use_item .item_body {padding: 15px 15px 10px; background: #fff;}
.use_list .use_item .item_body .ttl_area {position: relative; margin-bottom: 10px;}
.use_list .use_item .item_body .ttl_area:before {display: block; content: ''; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -4px; border-top: 2px solid #1f1f1f; border-right: 2px solid #1f1f1f; transform: rotate(45deg)}
.use_list .use_item .item_body .ttl_area .no {display: block; margin-bottom: 5px; color: #1f1f1f; font-weight: 700; opacity: .4;}
.use_list .use_item .item_body .info_group {padding: 0; border-bottom: 0 none; font-size: 1.2rem;}
.use_list .use_item .item_body .label_cnt {padding-bottom: 5px;}


.use_list .use_item .item_foot {padding: 12px 15px 5px; background: #fff; border-top: 1px solid #d4d4d4;}
.use_list .use_item .item_foot .label_area span,
.use_list .use_item .item_foot .cnt_area strong {display: inline-block; position: relative; z-index: 1; line-height: 1;}
.use_list .use_item .item_foot .label_area span:before,
.use_list .use_item .item_foot .cnt_area strong:before {display: block; content: ''; position: absolute; left: -3px; right: -3px; top: .4em; bottom: -2px; z-index: -1; background: #5affc6; opacity: .5;}
.use_list .use_item .item_foot .label_area span {font-size: 1.5rem; vertical-align: -8px;}
.use_list .use_item .item_foot .cnt_area strong {font-size: 2.1rem;}
.use_list .use_item .shadow {position: absolute; left: 10px; top: 20px; right: 10px; bottom: 10px; z-index: -1; background: #000; box-shadow: 0 3px 23px rgba(0,0,0, 1); opacity: .4;}

.use_list_wrap .btn_area {padding: 10px 0;}
.use_list_wrap .more_item {border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;}

.use_list .use_item.cancel:before {background-image: url(../img/bg_use_history_top_disable.png);}
.use_list .use_item.cancel .item_head {background: #d8d8d8;}
.use_list .use_item.cancel .item_foot .label_area span:before,
.use_list .use_item.cancel .item_foot .cnt_area strong:before {background: #ff8787;}

.use_list .no_data {padding: 15px 0; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8; text-align: left; font-size: 1.2rem; color: #1f1f1f;}

@media screen and (min-width: 360px) {
    .reservation_history .history_list .item_head .cancel.ic_contract_before::before {top: 1px;}
}

@media screen and (min-width: 420px) {
    .claim .price_area {margin: 30px 0 50px}
    .contract_btns .btn {
        line-height: 67px;
        height: 69px;
    }
    .reservation_btns,
    .community_btns {padding: 62px 0px}
    .customer_btns .btn {height: 109px; line-height: 107px;}
    
    .my_service,
    .auto_pay,
    .lifeservice .tabs.has_btn .my_service_area .my_service {width: 56px; height: 56px; padding: 18px 0; }
    .lifeservice .tabs.has_btn .my_service_area .my_service {padding: 15px 0;}
    
    .lifeservice .tabs.has_btn .my_service_area.detail {top: 90px;}
    
    .type_wrap .room_item_list li:before {top: 12px;}
    .add_option_area .input_area.check input {top: 10px;}
}

@media screen and (min-width: 767px) {
    .service_detail_list {
        margin-left: -10px;
        margin-right:-10px;
    }
    .service_detail_list .item {
        float: left;
        width: 50%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .service_detail_list .item:before,
    .service_detail_list .item .txt_area {left: 10px; right: 10px;}
    

}
@media screen and (min-width: 1024px) {
    .service_detail_list .item {
        width: 33.33%;
    }
}


@media screen and (max-width: 360px){
    .auto_pay_area {top: calc(68px + 24vw);}
    .main_cnt_wrap+.announcement {margin-top: 35px;}
}
@media screen and (max-width: 320px){
    .main_cnt_wrap+.announcement {margin-top: 25px;}
}


@media screen and (max-width: 320px){
    .main_cnt_wrap+.announcement {margin-top: 25px;}
    .use_state_wrap .state_part.area2 {padding-top: calc(6vw + 24px);}
}
@media screen and (max-width: 280px){
    .use_state_wrap .state_part.area2 {padding-top: calc(6vw + 27px);}
}