@charset "UTF-8";
/* 기본 라디오 */
.do_style_rdo {
  display: inline-flex;
}
.do_style_rdo input[type=radio] {
  display: none;
}
.do_style_rdo input[type=radio] + label {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 22px;
  height: auto;
  gap: 8px;
  cursor: pointer;
}
.do_style_rdo input[type=radio] + label::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: #fff;
  flex: 0 0 24px;
  margin-top: 2px;
  border: 1px solid #ccc;
  border-radius: 12px;
}
.do_style_rdo input[type=radio]:checked + label::before {
  background: #222;
  border-color: #222;
}
.do_style_rdo input[type=radio]:checked + label::after {
  position: absolute;
  content: "";
  display: block;
  top: 9px;
  left: 6px;
  transform: translate(0, 0) rotate(-45deg);
  width: 12px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 1px;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #fff;
}
.do_style_rdo label.label {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.do_style_rdo label.label span.desc {
  font-weight: 400;
}

.do_style_radio_group {
  display: flex;
}
.do_style_radio_group.row {
  flex-direction: row;
}
.do_style_radio_group.row.sm {
  gap: 32px;
}
.area_calculator .cont_wrap .cont {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
}
.area_calculator .payment_options {
  padding: 36px 0;
}
.area_calculator .user_counter_wrapper {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  background-color:#fff;
  width: 100%;
  height: 168px;
  padding: 32px 40px;
  margin-bottom: 68px;
}
.area_calculator .user_counter_wrapper .counter_txt {
  margin-bottom: 34px;
}
.area_calculator .user_counter_wrapper .counter_txt_number {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #09c9e7;
}
.area_calculator .user_counter_wrapper .counter_txt_unit {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #333;
}
.area_calculator .user_counter_wrapper .counter_txt.normal {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #333;
}
.area_calculator .user_counter_wrapper .counter_txt_desc {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #9b9b9b;
}

input[type=range].do_style_range {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(to right, #00e7ff 0%, #007bff 0%, #DCDEE3 0%, #DCDEE3 100%);
  outline: none;
  transition: background 450ms ease-in;
  padding: 0 0 0 16px;
  /* Thumb (webkit 기반 브라우저용) */
  /* Track (for Firefox) */
  /* Thumb (for Firefox) */
}
input[type=range].do_style_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  position: relative;
  z-index: 2;
}
input[type=range].do_style_range::-moz-range-track {
  height: 10px;
  border-radius: 10px;
  background: transparent;
  padding: 0 0 0 16px;
}
input[type=range].do_style_range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.count_labels {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 16px;
  width: calc(100% - 32px);
  margin: 13px 16px 0;
}
.count_labels span {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #888;
  display: inline-block;
  text-align: center;
  width: 26px;
}
.count_labels .label_numbers {
  position: absolute;
}
.count_labels .label_numbers[data-index="0"] {
  left: 0%;
}
.count_labels .label_numbers[data-index="1"] {
  left: 14%;
}
.count_labels .label_numbers[data-index="2"] {
  left: 28.2%;
}
.count_labels .label_numbers[data-index="3"] {
  left: 42.2%;
}
.count_labels .label_numbers[data-index="4"] {
  left: 56.5%;
}
.count_labels .label_numbers[data-index="5"] {
  left: 70.7%;
}
.count_labels .label_numbers[data-index="6"] {
  left: 85%;
}
.count_labels .label_numbers[data-index="7"] {
  left: 99%;
}
.count_labels.evenly {
  margin: 13px 0 0;
  padding: 0;
  width: calc(100% - 16px);
  padding-left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.count_labels.evenly .label_num {
  text-align: left;
  width: 26px;
  box-sizing: border-box;
}
.count_labels.evenly .label_num:first-child {
  padding-left: 24px;
}

.price table.tb_price.tb_compare thead th.m1.disabled {
  background: #CED6DB;
}
.price table.tb_price.tb_compare tbody .label.package.disabled .titlebox .tit.mint,
.price table.tb_price.tb_compare tbody .label.package.disabled .titlebox .desc {
  color: #CED6DB !important;
}
.price table.tb_price.tb_compare tbody .label.package.disabled .pricebox,
.price table.tb_price.tb_compare tbody .label.package.disabled .infobox.basic,
.price table.tb_price.tb_compare tbody .label.package.disabled .detailbox .title,
.price table.tb_price.tb_compare tbody .label.package.disabled .info {
  color: #CED6DB !important;
}
.price table.tb_price.tb_compare tbody .label.package.disabled a:hover {
  cursor: default !important;
}
.price table.tb_price.tb_compare tbody .label.package.disabled a.btn_ghost {
  border: 1px solid #CED6DB;
  color: #CED6DB;
}
.price table.tb_price.tb_compare tbody .label.package.disabled a.btn_general {
  background: #CED6DB;
  color: #FFFFFF;
}

/*# sourceMappingURL=price_calculator.css.map */


.price .area_calculator {padding-top:0}
.price .wrap_calculator {margin-top: 32px; padding: 50px 0; border: 1px solid #d9d9d9;border-radius: 20px}
.price .wrap_calculator  > div {flex:1;}
.price .wrap_calculator .col1 {padding:0 50px 0 80px; border-right: 1px solid #e9e9e9;}
.price .wrap_calculator .col2 {padding:0 80px 0 50px} 
.price .wrap_calculator .col1 .row {margin-top: 12px}
.price .wrap_calculator .col1 .com_number {position: relative; display: inline-block; width: 112px;  height: 32px;  border: 1px solid #999;  border-radius: 24px; background-color: #fff; text-align: center;}
.price .wrap_calculator .wrap_item {margin-top: 40px}
.price .wrap_calculator .wrap_item:first-child {margin-top: 0}
.price .wrap_calculator .wrap_item .cont {margin-top: 12px}
.price .wrap_calculator .tit_txt {padding-top:10px; font-size: 18px; font-weight: bold;  }
.price .wrap_calculator .com_number:focus-visible {outline: 1px solid #000;}
.price .wrap_calculator .radio_group {flex-wrap: wrap}
.price .wrap_calculator .radio_group span {padding: 0;}
.price .area_calculator .wrap_calculator .com_ck {margin-right: 30px;}
.price .wrap_noti .list_noti {margin-top:30px;}
.price .com_ck.bk {height: auto; min-height: 30px;}
.price .com_ck.bk .checkmark {box-sizing: border-box; background: transparent;}
.price .com_ck.bk:hover .checkmark { background: transparent;}
.price .com_ck.bk label input:checked ~ .checkmark {background: #000}
.price .com_ck.bk:hover input:disabled + .checkmark {background: transparent;} 
.price .wrap_calculator .disabled label:hover {cursor: not-allowed}
.price .wrap_calculator .disabled,
.price .wrap_calculator .disabled .fs_point {color: #aaa}
.price .wrap_calculator .price_box { padding: 24px 30px 20px; background:#f5f7f9; border-radius:16px }
.price .wrap_calculator .price_box .row {display: flex;}
.price .wrap_calculator .price_box .row1 {padding-bottom: 20px}
.price .wrap_calculator .price_box .row2 {padding-top: 20px; border-top: 1px solid #E3E4E5;}
.price .wrap_calculator .price_box .row2 .tit_txt {font-size: 16px}
.price .wrap_calculator .price_box .row2 .txt_desc {font-size: 14px; color: #888; text-align: right}
.price .wrap_calculator .price_box .row .cont {flex: auto; text-align: right}
.price .wrap_calculator .month .txt_num {font-size: 28px; font-weight: bold; color:#00b3ce; }
.price .wrap_calculator .month .txt_grade {font-size: 18px; color:#00b3ce; }
.price .wrap_calculator .wrap_price .desc_info {margin-top: 8px; padding-right: 30px; font-size: 14px; color: #888; text-align: right}
.price .wrap_calculator .wrap_detail {margin-top: 10px; padding: 0 30px}
.price .wrap_calculator .item {display: flex;}
.price .wrap_calculator .item .tb_price_de th {text-align: left}
.price .wrap_calculator .item .tb_price_de td {text-align: right}
.price .wrap_calculator .item .txt_num {font-weight: 500}
.price .wrap_calculator .item.base .txt_num {font-weight: normal;}
.price .wrap_calculator .wrap_detail .item + .item {border-top: 1px dashed #d1d1d1}
.price .area_calculator .wrap_lead2 {margin-top: 48px;}
.price .area_calculator .wrap_lead2 .tit {font-size: 16px; color: #888}
.price .area_calculator .wrap_lead2 .wrap_btn {margin-top: 12px}


.price .tag_recommend {display: inline-block; height:20px; font-weight: 700; font-size: 12px;color: #EE817D; background: #FEEDEB; border-radius: 12px;}
.price .tag_event {display: inline-block; height:20px; font-weight: 700; font-size: 12px;color: #00c5fc; background: #86e9ff; border-radius: 12px;}

.price .area_calculator .user .txt {font-size: 20px}
.price .area_calculator .info_txt {margin-left:6px; font-size:14px; color: #999;}
.price .area_calculator .com_ck {gap:4px; align-items: center}
.price .area_calculator .info_txt .bold {color: #333;}
.price .area_calculator .tit {margin-top:6px;}
.price .area_calculator .tit .info_txt {margin-left:0px;}
.price .wrap_calculator .wrap_option .item {display:flex;}
.price .wrap_calculator .wrap_option .item + .item {margin-top:12px}
.price .wrap_calculator .wrap_option .subtit {width:15%; min-width: 80px; color:#888}
.price .wrap_calculator .wrap_option .radio_group {width:85%}
.price .wrap_calculator .wrap_option .row {display: flex; margin-top: 0}
.price .wrap_calculator .wrap_option .row + .row {margin-top:8px}
.price .wrap_calculator .wrap_option .row .com_ck {margin-right:0; flex-basis:40%; gap: 4px; align-items: center;}
.price .wrap_calculator .wrap_option .recommend:after {content:'추천'; position:absolute; display: inline-block; height:24px; padding:3px 8px 0; font-weight: 700; font-size: 12px; line-height:1.4; color: #EE817D; background: #FEEDEB; border-radius: 12px; box-sizing: border-box;}
.price .wrap_calculator .wrap_option .tag_recommend {padding: 2px 8px;}
.price .wrap_calculator .radio_group span.tag_event {padding: 2px 8px;}
.price .wrap_calculator .col1 .meta {margin-top:20px; border: 1px solid #E6E6E6; border-radius: 12px; padding:20px; box-sizing:border-box}
.price .wrap_calculator .col1 .meta .box {display:flex; align-items: center; justify-content: space-around;}
.price .wrap_calculator .col1 .meta span {line-height: 32px; vertical-align: middle}
.price .wrap_calculator .col1 .meta .tit {font-size:14px; color:#555;}
.price .wrap_calculator .col1 .meta .txt_num {margin-left:8px; font-size:22px;  color:#555}
.price .wrap_calculator .box_noti,
.price .wrap_calculator .col1 .meta .box {padding: 16px 20px; background: #FFFDF0; border-radius: 10px; }
.price .wrap_calculator .col1 .meta .bold {color: #333; font-weight:500}
.price .wrap_calculator .box_noti {letter-spacing: -1.5px}
.price .wrap_calculator .wrap_detail > .item {padding: 30px 0 20px; }
.price .wrap_calculator .tb_price_de th,
.price .wrap_calculator .tb_price_de td {padding:6px 0; font-size:14px; color:#888}
.price .wrap_calculator .tb_price_de tfoot th,
.price .wrap_calculator .tb_price_de tfoot td {font-weight:bold; color:#555}
.price .wrap_calculator .item.base tfoot .txt_num {/*text-decoration:line-through;*/ font-weight: 500}
.price .fs_point {color: #00b3ce}
.price .wrap_calculator .list_bullet {margin-top: 12px;}
.price .wrap_calculator .list_bullet li {font-size:14px; color: #888; line-height: 1.6}
.price .wrap_calculator .list_bullet li:before {content: '※'}
.price .wrap_calculator .price_box .year {margin-top:4px}
.price .wrap_calculator .price_box th {text-align: left}
.price .wrap_calculator .price_box td {text-align: right}
.price .wrap_calculator .price_box thead th,
.price .wrap_calculator .price_box thead td {padding-bottom:8px; font-weight:500}
.price .wrap_calculator .price_box thead td {font-size:18px;}
.price .wrap_calculator .price_box tbody th,
.price .wrap_calculator .price_box tbody td {color: #888; font-size: 15px; line-height: 160%}
.price .area_calculator .btn_wrap {display: flex; justify-content: center; align-items: center; gap: 20px;}
.price .area_calculator .btn_wrap a {display: flex; justify-content: center; align-items: center; padding: 22px 36px; border-radius: 45px; font-size: 20px; line-height: 140%; letter-spacing: -1.5px}
.price .area_calculator .btn_wrap .btn_general {padding:22px 44px; background:#00b3ce; border: 1px solid #00b3ce}
.price .area_calculator .btn_ghost {border-color:#00b3ce; color:#00b3ce}
.price .area_calculator .fw_l {font-weight:normal}


/*** Responsive layout ***/
@media all and (max-width:959px){	

  .price .wrap_calculator {padding:36px 0 0}
  .price .wrap_calculator.inner_flex {flex-direction: column;}
  .price .wrap_calculator .col1 {margin-right: 0; padding: 0 20px 40px; border-right: 0; border-bottom: 1px dashed #e9e9e9;}
  .price .wrap_calculator .col2 {padding:40px 20px}
  .price .wrap_calculator .wrap_detail .item {display: block; padding: 12px 0}
  .price .wrap_calculator .wrap_detail .tooltip {display: none}
  .price .wrap_calculator .wrap_price .tit_txt {padding-top: 12px}
  .price .com_ck {display: block}
  .price .wrap_calculator .wrap_option .row {flex-direction: column;}
  .price .wrap_calculator .wrap_option .row + .row {margin:0}
  .price .wrap_calculator .wrap_option .row .com_ck {display:inline-flex}
  .price .wrap_calculator .col1 .meta .txt_num {margin:0; font-size:18px}
  .price .wrap_calculator .col1 .meta span {text-align:center; line-height: 1.4}
  .price .wrap_calculator .wrap_detail {padding: 0 20px;}
  .price .area_calculator .info_txt {display:block; margin: 8px 0 0}
  .price .area_calculator .btn_wrap {gap: 8px}
  .price .area_calculator .btn_wrap a {font-size: 18px; padding:20px}
  .price .area_calculator .btn_wrap .btn_general {padding:20px}
  .price .tooltip {display:none;}
  .price .card {padding: 40px 40px;}

}