/* -------------------Default CSS--------------------- */


@font-face {

  font-family: "Gmarket Sans";

  font-style: normal;

  font-weight: 700;

  src: local("Gmarket Sans Bold"), local("GmarketSans-Bold"),

    url("../fonts/GmarketSansBold.woff") format("woff2"),

    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url("../fonts/GmarketSansBold.woff") format("woff");

  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}


@font-face {

  font-family: "Gmarket Sans";

  font-style: normal;

  font-weight: 500;

  src: local("Gmarket Sans Medium"), local("GmarketSans-Medium"),

    url("../fonts/GmarketSansMedium.woff") format("woff2"),

    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url("../fonts/GmarketSansMedium.woff") format("woff");

  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}


@font-face {

  font-family: "Gmarket Sans";

  font-style: normal;

  font-weight: 300;

  src: local("Gmarket Sans Light"), local("GmarketSans-Light"),

    url("../fonts/GmarketSansLight.woff") format("woff2"),

    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url("../fonts/GmarketSansLight.woff") format("woff");

  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}


@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");

/* 팝오버 */

.popover {

  position: absolute;

  top: 60px;

  z-index: 999;

  display: flex;

  flex-direction: column;

  max-width: 600px;

  word-wrap: break-word;

  border: 1px solid #c9c9c9;

  border-radius: 4px;

  /* overflow: hidden; */

}

.popover-arrow {

  position: absolute;

  left: 50%;

  transform: translate(-50%, 0px);

  top: calc(-8px - 1px);

  display: block;

  width: 16px;

  height: 8px;

}

.popover-arrow:before {

  position: absolute;

  display: block;

  content: "";

  border-color: transparent;

  border-style: solid;

  top: 0;

  border-width: 0 8px 8px 8px;

  border-bottom-color: #c9c9c9;

  box-sizing: border-box;

}

.popover-arrow:after {

  position: absolute;

  display: block;

  content: "";

  border-color: transparent;

  border-style: solid;

  top: 1px;

  border-width: 0 0.5rem 0.5rem 0.5rem;

  border-bottom-color: #f0f0f0;

  box-sizing: border-box;

}

.popover-header {

  padding: 8px 14px;

  margin-bottom: 0;

  font-size: 16px;

  background-color: #f0f0f0;

  border-bottom: 1px solid #c9c9c9;

  color: rgb(169, 0, 101);

  font-weight: 600;

  border-top-left-radius: 4px;

  border-top-right-radius: 4px;

}

.popover-body {

  padding: 14px;

  color: #333;

  background-color: white;

  font-size: 12px;

  border-bottom-left-radius: 4px;

  border-bottom-right-radius: 4px;

}

.popover-body > h4 {

  font-size: 14px;

  font-weight: 600;

  padding-bottom: 5px;

}

/* show hide */

.hide {

  display: none !important;

  visibility: hidden;

  opacity: 0;

  transition: all 0.2s ease;

}

.show {

  display: block !important;

  visibility: visible;

  opacity: 1;

  transition: all 0.2s ease;

}

/* 툴팁 */

.tooltip {

  position: absolute;

  display: none;

  background-color: #000;

  border-radius: 4px;

  color: white;

  z-index: 999;

  top: -45px;

  left: -7px;

  padding: 6px 12px;

  width: auto;

  min-width: max-content;

}

.tooltip-arrow {

  position: absolute;

  left: 50%;

  transform: translate(-50%, 0px);

  bottom: calc(-8px - 1px);

  display: block;

  width: 16px;

  height: 8px;

}

.tooltip-arrow:after {

  content: "";

  position: absolute;

  display: block;

  border-color: transparent;

  border-style: solid;

  bottom: 1px;

  border-width: 0.5rem 0.5rem 0 0.5rem;

  border-top-color: #000000;

  box-sizing: border-box;

}

/* 툴팁 아래 화살표 수정 코드 추가 240725 */

.tooltip-arrow-bottom:after {

  content: "";

  position: absolute;

  display: block;

  border-color: transparent;

  border-style: solid;

  border-width: 0.5rem 0.5rem 0 0.5rem;

  border-top-color: #000000;

  box-sizing: border-box;

  left: 50%;

  transform: translate(-50%, 0px);

  width: 16px;

  height: 8px;

  bottom: calc(-8px);

}

/* 버튼 */

/* button */

.button_group {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 10px;

  gap: 10px;

}

.button_group .btn {

  cursor: pointer;

  border: 1px solid;

  border-radius: 3px;

  font-weight: 700;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.2s;

}

.button_group .btn:disabled {

  pointer-events: none;

  opacity: 0.4;

}

/* 버튼 컬러 */

.button_group .btn_primary {

  background-color: #dd0092;

  border-color: #dd0092;

  color: white;

}

.button_group .btn_primary:hover,

.button_group .btn_primary:focus,

.button_group .btn_primary:active {

  background-color: #b30077;

  color: white;

}

.button_group .btn_secondary {

  background-color: #793bab;

  border-color: #793bab;

  color: white;

}

.button_group .btn_secondary:hover,

.button_group .btn_secondary:focus,

.button_group .btn_secondary:active {

  background-color: #552180;

  color: white;

}

.button_group .btn_dark {

  background-color: #333;

  border-color: #333;

  color: white;

}

.button_group .btn_dark:hover,

.button_group .btn_dark:focus,

.button_group .btn_dark:active {

  background-color: #000;

  color: white;

}

.button_group .btn_gray {

  background-color: #666;

  color: white;

}

.button_group .btn_gray:hover,

.button_group .btn_gray:focus,

.button_group .btn_gray:active {

  background-color: #333 !important;

  color: white;

}

/* 버튼 컬러 투명 */

.btn_transp {

  background-color: transparent;

}

/* 아웃라인 버튼 */

.button_group .btn_outline {

  border: 1px solid ccc;

  background-color: white;

}

.button_group .btn_outline:hover,

.button_group .btn_outline:focus,

.button_group .btn_outline:active {

  color: white !important;

  /* border-color: #fff; */

  border: 1px solid;

  border-color: inherit;

  border-radius: 4px;

}

.button_group .btn_primary.btn_outline {

  color: #dd0092;

  border-color: #dd0092;

}

.button_group .btn_secondary.btn_outline {

  color: #793bab;

  border-color: #793bab;

}

.button_group .btn_dark.btn_outline {

  color: #333;

  border-color: #333;

}

.button_group .btn_gray.btn_outline {

  color: #333;

  border-color: #999;

}

/* 버튼사이즈 */

.button_group .btn_lg {

  font-size: 1.1rem;

  font-weight: 500;

  height: 3rem;

}

.button_group .btn_md {

  font-size: 1rem;

  width: 7rem;

  height: 2.5rem;

}

.button_group .btn_sm {

  font-size: 0.9rem;

  padding: 8px 12px;

  line-height: 100%;

}

/* 버튼 화살표 */

.btn_arow {

  position: relative;

  padding-right: 0.6rem;

}

.btn_arow:after {

  content: "";

  display: inline-block;

  width: 0.5rem;

  height: 0.5rem;

  border: 2px solid #666;

  border-top: none;

  border-left: none;

  transform: rotate(-45deg) translateY(-50%);

  margin-left: 0.4rem;

  position: absolute;

  top: 50%;

  right: 0.5rem;

}

.btn_primary.btn_arow:after {

  border-color: #dd0092;

}


/* 버튼띄우기 */

.posi_rel {

  position: relative;

}

.posi_ab_right {

  position: absolute;

  top: 0;

  right: 0;

  background: transparent;

  border: none;

}

/* 테두리없는 전체보기 버튼 */

.txt_btn_all {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #666;

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: -1;

  padding: 5px;

  border: none;

  background-color: transparent;

}

.txt_btn_all span {

  vertical-align: middle;

}

.txt_btn_all .material-icons {

  font-size: 1rem;

  vertical-align: middle;

}

/* 커서 포인트 */

.cursor_p {

  cursor: pointer;

}

/* 자리 */

.w100 {

  width: 100%;

}

.w80 {

  width: 80%;

}

.w40 {

  width: 40%;

}

/* 마진 */

/* margin */

.mg_1 {

  margin: 1px !important;

}

.mg_2 {

  margin: 2px !important;

}

.mg_3 {

  margin: 3px !important;

}

.mg_5 {

  margin: 5px !important;

}

.mg_7 {

  margin: 7px !important;

}

.mg_10 {

  margin: 10px !important;

}

.mg_15 {

  margin: 15px !important;

}

.mg_20 {

  margin: 20px !important;

}

.mg_30 {

  margin: 30px !important;

}

.mt_1 {

  margin-top: 1px !important;

}

.mt_2 {

  margin-top: 2px !important;

}

.mt_3 {

  margin-top: 3px !important;

}

.mt_5 {

  margin-top: 5px !important;

}

.mt_7 {

  margin-top: 7px !important;

}

.mt_10 {

  margin-top: 10px !important;

}

.mt_15 {

  margin-top: 15px !important;

}

.mt_20 {

  margin-top: 20px !important;

}

.mt_30 {

  margin-top: 30px !important;

}

.mt_40 {

  margin-top: 40px !important;

}

.mt_50 {

  margin-top: 50px !important;

}

.mb_1 {

  margin-bottom: 1px !important;

}

.mb_2 {

  margin-bottom: 2px !important;

}

.mb_3 {

  margin-bottom: 3px !important;

}

.mb_5 {

  margin-bottom: 5px !important;

}

.mb_7 {

  margin-bottom: 7px !important;

}

.mb_10 {

  margin-bottom: 10px !important;

}

.mb_15 {

  margin-bottom: 15px !important;

}

.mb_30 {

  margin-bottom: 30px !important;

}

.mb_20 {

  margin-bottom: 20px !important;

}

.ml_1 {

  margin-left: 1px !important;

}

.ml_2 {

  margin-left: 2px !important;

}

.ml_3 {

  margin-left: 3px !important;

}

.ml_5 {

  margin-left: 5px !important;

}

.ml_7 {

  margin-left: 7px !important;

}

.ml_10 {

  margin-left: 10px !important;

}

.ml_15 {

  margin-left: 15px !important;

}

.ml_20 {

  margin-left: 20px !important;

}

.ml_30 {

  margin-left: 30px !important;

}

.mr_1 {

  margin-right: 1px !important;

}

.mr_2 {

  margin-right: 2px !important;

}

.mr_3 {

  margin-right: 3px !important;

}

.mr_5 {

  margin-right: 5px !important;

}

.mr_7 {

  margin-right: 7px !important;

}

.mr_10 {

  margin-right: 10px !important;

}

.mr_15 {

  margin-right: 15px !important;

}

.mr_20 {

  margin-right: 20px !important;

}

.mr_30 {

  margin-right: 30px !important;

}

/* padding */

.pd_0 {

  padding: 0 !important;

}

.pd_1 {

  padding: 1px !important;

}

.pd_2 {

  padding: 2px !important;

}

.pd_3 {

  padding: 3px !important;

}

.pd_5 {

  padding: 5px !important;

}

.pd_7 {

  padding: 7px !important;

}

.pd_10 {

  padding: 10px !important;

}

.pd_15 {

  padding: 15px !important;

}

.pd_20 {

  padding: 20px !important;

}

.pt_0 {

  padding-top: 0 !important;

}

.pt_1 {

  padding-top: 1px !important;

}

.pt_2 {

  padding-top: 2px !important;

}

.pt_3 {

  padding-top: 3px !important;

}

.pt_5 {

  padding-top: 5px !important;

}

.pt_7 {

  padding-top: 7px !important;

}

.pt_10 {

  padding-top: 10px !important;

}

.pt_15 {

  padding-top: 15px !important;

}

.pt_20 {

  padding-top: 20px !important;

}

.pt_30 {

  padding-top: 30px !important;

}

.pb_0 {

  padding-bottom: 0 !important;

}

.pb_1 {

  padding-bottom: 1px !important;

}

.pb_2 {

  padding-bottom: 2px !important;

}

.pb_3 {

  padding-bottom: 3px !important;

}

.pb_5 {

  padding-bottom: 5px !important;

}

.pb_7 {

  padding-bottom: 7px !important;

}

.pb_10 {

  padding-bottom: 10px !important;

}

.pb_15 {

  padding-bottom: 15px !important;

}

.pb_30 {

  padding-bottom: 30px !important;

}

.pb_20 {

  padding-bottom: 20px !important;

}

.pl_0 {

  padding-left: 0 !important;

}

.pl_1 {

  padding-left: 1px !important;

}

.pl_2 {

  padding-left: 2px !important;

}

.pl_3 {

  padding-left: 3px !important;

}

.pl_5 {

  padding-left: 5px !important;

}

.pl_7 {

  padding-left: 7px !important;

}

.pl_10 {

  padding-left: 10px !important;

}

.pl_15 {

  padding-left: 15px !important;

}

.pl_20 {

  padding-left: 20px !important;

}

.pl_30 {

  padding-left: 30px !important;

}

.pr_0 {

  padding-right: 0 !important;

}

.pr_1 {

  padding-right: 1px !important;

}

.pr_2 {

  padding-right: 2px !important;

}

.pr_3 {

  padding-right: 3px !important;

}

.pr_5 {

  padding-right: 5px !important;

}

.pr_7 {

  padding-right: 7px !important;

}

.pr_10 {

  padding-right: 10px !important;

}

.pr_15 {

  padding-right: 15px !important;

}

.pr_20 {

  padding-right: 20px !important;

}

.pr_30 {

  padding-right: 30px !important;

}

/* 정렬 */

.flx_row {

  display: flex;

  flex-direction: row;

}

.flx_col {

  display: flex;

  flex-direction: column;

}

.just_center {

  justify-content: center;

}

.just_start {

  justify-content: flex-start !important;

}

.just_end {

  justify-content: flex-end !important;

}

.align_center {

  align-items: center;

}

.flx1 {

  flex: 1;

}

.w100 {

  width: 100%;

}

.gapline_row {

  width: 100%;

  height: 1px;

  border-bottom: 1px solid #eee;

}

.gp_10 {

  gap: 10px;

}

/* 디스플레이 */

.hide {

  display: none !important;

}

.d-blok {

  display: block !important;

}

.d-flex {

  display: flex !important;

}

/* -------------------Default CSS--------------------- */

/* -------------------Default CSS--------------------- */

/* 분야별 코너 상담사 분류 필터링 23-11-09 */

[type="radio"].cs_btn_radio {

  vertical-align: middle;

  appearance: none;

  width: auto;

  padding: 0;

  border: 0;

}

[type="radio"].cs_btn_radio + label {

  font-size: 16px;

  font-weight: 500;

  color: #666;

  display: flex;

  flex-flow: row nowrap;

  justify-content: center;

  align-items: center;

  padding: 8px 14px 10px 36px;

  border-radius: 999px;

  border: 1px solid #ccc;

  line-height: 1;

  position: relative;

  margin-right: 10px;

}

[type="radio"].cs_btn_radio + label:before {

  content: "";

  width: 22px;

  height: 22px;

  border-radius: 999px;

  background-color: #eee;

  position: absolute;

  /* z-index: 99; */

  left: 8px;

  top: 6px;

}

[type="radio"].cs_btn_radio + label::after {

  content: "";

  width: 7px;

  height: 7px;

  border: 3px solid #fff;

  border-left: none;

  border-top: none;

  position: absolute;

  left: 14px;

  top: 10px;

  transform: rotate(45deg);

}

[type="radio"]:checked.cs_btn_radio + label:before {

  background-color: #e52baa;

}

[type="radio"]:checked.cs_btn_radio + label,

[type="radio"]:focus.cs_btn_radio + label,

[type="radio"]:hover.cs_btn_radio + label,

[type="radio"]:active.cs_btn_radio + label {

  color: #e52baa;

  border-color: #e52baa;

}

/* 구매하기 기부 + 선물 */

#giftcard_share .contents_box {

  display: flex;

  gap: 15px;

  justify-content: center;

}

.contents_wrap .giftcard_box.bg_pink {

  background: url("../images/giftcard_donation.png") 0 0 no-repeat;

  background-size: 100%;

}

.contents_wrap .giftcard_box.bg_sky {

  background: url("../images/giftcard_gift.png") 0 0 no-repeat;

  background-size: 100%;

}

.contents_wrap .giftcard_box {

  width: 100%;

  /* padding-top: 52%; */

  max-width: 380px;

  height: 196px;

  min-height: 130px;

  position: relative;

  cursor: pointer;

}

.contents_wrap .giftcard_box h3 {

  position: absolute;

  top: 40px;

  left: 40px;

  font-size: 1.8rem;

  font-weight: 600;

  letter-spacing: -1.2;

  color: #000;

  text-wrap: nowrap;

}

.contents_wrap .giftcard_box .text_img_wrap {

  position: absolute;

  top: 90px;

  left: 40px;

  width: 80%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 4%;

}

.contents_wrap .giftcard_box .text_img_wrap p {

  width: 70%;

  text-align: left;

  line-height: 22px;

  font-size: 0.9rem;

  text-wrap: nowrap;

}

.contents_wrap .giftcard_box .text_img_wrap span {

  color: #ff0066;

}

.contents_wrap .giftcard_box .text_img_wrap .img_wrap {

  width: 25%;

}

.contents_wrap .giftcard_box .text_img_wrap img {

  width: 100%;

}

#buying dl {

  width: 100%;

  background: #f6f6f6;

  padding: 15px 20px;

  border-radius: 3px;

  line-height: 1.2rem;

  word-break: keep-all;

}

#buying dt {

  color: #b92d62;

  font-size: 1rem;

  margin-bottom: 10px;

}

dd {

  font-size: 0.9rem;

  color: #666;

}

/* 상담권 */

#GiftTab .tab {

  display: flex;

  justify-content: space-between;

  width: 100%;

  white-space: nowrap;

  border-bottom: 1px solid #ddd;

}

#GiftTab .tab li {

  width: 48%;

}

#GiftTab .tab li a {

  display: block;

  font-size: 1.1rem;

  height: 50px;

  line-height: 35px;

  text-align: center;

  color: #777;

}

#GiftTab .tab li.active a {

  color: #b92d62;

  border-bottom: 2px solid #b92d62;

  font-weight: 600;

}

#giftcard_share > h2 {

  text-align: center;

  font-size: 1.5rem;

  font-weight: 500;

  letter-spacing: -1.2;

  color: #000;

  margin-top: 50px;

  margin-bottom: 30px;

}

.empty_box {

  text-align: center;

  display: flex;

  flex-flow: column;

  align-items: center;

  gap: 6px;

}

.empty_box .empty_icon {

  font-size: 158px;

  margin-bottom: 10px;

  color: #999;

  border: 8px solid #999;

  border-radius: 50%;

  width: 200px;

  height: 200px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.empty_box h2 {

  color: #666;

  font-weight: 500;

  font-size: 27px;

}

/* 구매내역 */

.buying_list table {

  border-top: 1px solid #3f4148;

  border-bottom: 1px solid #d9d9da;

  width: 100%;

}

.buying_list table thead tr th {

  border-bottom: 1px solid #ebecec;

  background-color: #f9f9f9;

  color: #666;

  font-size: 14px;

  font-weight: 400;

  text-align: center;

}

.buying_list table tbody tr td {

  border-top: 1px solid #ebecec;

  color: #333;

  font-size: 14px;

  font-weight: 400;

  text-align: center;

}

.buying_list table th,

.buying_list table td {

  padding: 15px 0;

}

.buying_list table td span {

  color: #ff0066;

}

.buying_list table td.use {

  color: #ff0066;

}

.buying_list table td.sub_coin {

  color: #04aa04;

}

.buying_list table td.mileages {

  color: #0080e9;

}

/* #GiftTab .btn_primary {

  background-color: #dd0092;

  color: white;

}

#GiftTab .btn_secondary {

  background-color: #793bab;

  color: white;

} */

.card_empty_box {

  display: flex;

  flex-flow: column;

  width: fit-content;

  margin-top: 50px;

  margin-bottom: 50px;

  gap: 30px;

}

/* 분야별 코너 상담사 분류 필터링 23-11-09 */

[type="radio"].cs_btn_radio {

  vertical-align: middle;

  appearance: none;

}

[type="radio"].cs_btn_radio + label {

  font-size: 16px;

  font-weight: 500;

  color: #666;

  display: flex;

  flex-flow: row nowrap;

  justify-content: center;

  align-items: center;

  padding: 8px 14px 10px 36px;

  border-radius: 999px;

  border: 1px solid #ccc;

  line-height: 1;

  position: relative;

  margin-right: 10px;

}

[type="radio"].cs_btn_radio + label:before {

  content: "";

  width: 22px;

  height: 22px;

  border-radius: 999px;

  background-color: #eee;

  position: absolute;

  /* z-index: 99; */

  left: 8px;

  top: 6px;

}

[type="radio"].cs_btn_radio + label::after {

  content: "";

  width: 7px;

  height: 7px;

  border: 3px solid #fff;

  border-left: none;

  border-top: none;

  position: absolute;

  left: 14px;

  top: 10px;

  transform: rotate(45deg);

}

[type="radio"]:checked.cs_btn_radio + label:before {

  background-color: #e52baa;

}

[type="radio"]:checked.cs_btn_radio + label,

[type="radio"]:focus.cs_btn_radio + label,

[type="radio"]:hover.cs_btn_radio + label,

[type="radio"]:active.cs_btn_radio + label {

  color: #e52baa;

  border-color: #e52baa;

}

/* 선물 포인트 */

#giftpoint_share .contents_box {

  display: flex;

  justify-content: center;

}

#giftpoint_share > h2 {

  text-align: center;

  font-size: 1.5rem;

  font-weight: 500;

  letter-spacing: -1.2px;

  color: #000;

  margin-top: 50px;

  margin-bottom: 30px;

}

#giftpoint_share > h2 strong {

  font-family: "NanumSquare";

  font-size: 2rem;

  font-weight: 800;

  color: #cc0066;

}

#giftpoint_share dl li {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 30px;

  background-color: #f5f5f5;

  margin-bottom: 6px;

  border-radius: 3px;

}

#giftpoint_share dl li .gpoint {

  font-family: "NanumSquare";

  font-size: 1.2rem;

  font-weight: 800;

  letter-spacing: -1;

}

#giftpoint_share dl li .gdate {

  font-family: "NanumSquare";

  font-size: 1rem;

  font-weight: 800;

  color: #666;

}

.sort_point {

  display: flex;

  justify-content: right;

  gap: 10px;

  padding: 20px 5px 15px;

}

.sort_point a {

  font-size: 1rem;

  color: #666;

}

.sort_point a.on {

  font-weight: bold;

  color: #333;

}

.sort_point #sort-asc::before {

  content: "ㅣ";

  display: inline-block;

  font-size: 0.9rem;

  color: #ccc;

  padding-right: 10px;

}

/* 선물나눔 페이지 */

#sulmom-how-to .how-to-list .imp {

  color: #007de4;

}

#sulmom-how-to .how-to-list .qr-code-box {

  display: flex;

  flex-flow: column;

  width: 120px;

  gap: 10px;

}

img.qr-code {

  width: inherit;

  padding: 4px !important;

  border: 2px solid #ccc;

  border-radius: 4px;

}

#sulmom-how-to .how-to-list .qr-code-box small {

  color: #e4004c;

  font-size: 14px;

  font-weight: 500;

}

h4.manners {

  font-size: 1.2rem;

  text-align: center;

  padding: 30px 0 10px;

}

/* 선물상담하는 요일 표기 240221 */

.counsel_week {

  display: flex;

  flex-flow: row wrap;

  gap: 2px;

  align-items: flex-end;

  margin-top: 10px;

}

.counsel_week button {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  border: none;

  border-radius: 50%;

  width: 20px;

  height: 20px;

  font-size: 14px;

  color: #fff;

  background-color: #4fa493 !important;

}

.counsel_week button:hover,

.counsel_week button:active,

.counsel_week button:focus {

  border: none;

  background-color: #006124 !important;

}

/* 소셜 로그인 */

/* social login */

.login_or {

  position: relative;

  border-top: 1px solid #ccc;

}

.login_or span {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: -13px;

  font-size: 18px;

  line-height: 21px;

  padding: 0 10px;

  background-color: #fff;

}

.social_login ul {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin: 40px 0;

}

/* mypage 소셜계정 연동 */

.modifyinfo_wrap .modi_box ul.social_join {

  width: 52.5%;

  display: flex;

  flex-direction: column;

  margin-bottom: 50px;

  font-size: 16px;

}

.modifyinfo_wrap .modi_box ul.social_join li {

  display: flex;

  justify-content: space-between;

  margin-bottom: 10px;

}

/* display 속성 */

.d-none {

  display: none !important;

}


.d-inline {

  display: inline-block !important;

}


.d-block {

  display: block !important;

}


.d-flex {

  display: flex !important;

}


.d-inline-flex {

  display: inline-flex !important;

}


.d-table {

  display: table !important;

}


.d-table-row {

  display: table-row !important;

}


.d-table-cell {

  display: table-cell !important;

}


/* 멘토 검색 인풋텍스트 드롭다운 240703 */

.mentor_search .input_row {

  position: relative;

}


.mentor_search .input_row::before {

  content: "search";

  font-family: "Material Icons";

  font-size: 1.8rem !important;

  color: #6495ed;

  position: absolute;

  right: 8px;

  top: 50%;

  transform: translateY(-50%);

}


.mentor_search .input_row .btn_close_res {

  display: none;

  color: #808080;

  position: absolute;

  right: 0px;

  top: 50%;

  transform: translateY(-50%);

  background-color: rgb(000, 000, 000, 0);

  border: none;

  width: 40px;

  height: 40px;

  padding: 0px;

}


.mentor_search .input_row.result:before {

  content: "";

}


.mentor_search .input_row.result .btn_close_res {

  display: block;

}


input {

  width: 100%;

  padding: 10px 10px 9px;

  border: 1px solid #d6d6d6;

  border-radius: 3px;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

}


input[type="text"],

input[type="password"],

input[type="number"],

input[type="tel"],

input[type="email"],

input[type="date"] {

  background-color: #f9f9f9;

  outline-color: #ccccff;

  color: #666;

  font-size: 14px;

  line-height: 140%;

  letter-spacing: -1px;

  text-align: left;

}


.mentor_search .input_search {

  min-width: 220px;

  background-color: revert;

}


/* 멘토검색 결과 창 드롭다운 240703 */

.search_wrap {

  background-color: #fff;

}


.mentor_search {

  position: relative;

}


.mentor_search .result_wrap {

  border-radius: 4px;

  border: 1px solid #ccc;

  background: #fff;

  display: flex;

  padding: 15px 13px;

  flex-direction: column;

  align-items: flex-start;

  gap: 15px;

  align-self: stretch;

  position: absolute;

  z-index: 999;

  min-width: 220px;

  width: 100%;

}


.mentor_search .result_row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

}


.mentor_search .result_row:hover,

.mentor_search .result_row:active,

.mentor_search .result_row:focus {

  background-color: #f7feff;

}


.nametag_wrap {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  gap: 6px;

  line-height: 100%;

}


.nametag_wrap .bedge {

  font-size: 14px;

  padding: 4px 8px;

  background: #cc0066;

  color: #fff;

  border-radius: 999px;

  text-align: center;

}


.nametag_wrap .number {

  font-size: 16px;

  font-weight: 500;

  color: #cc0066;

  font-family: Gmarket Sans, "Gmarket Sans", sans-serif;

}


.nametag_wrap .name {

  font-size: 16px;

  font-weight: 500;

  color: #000;

}


.mentor_search .result_row .state {

  font-size: 0.9rem;

  font-weight: 500;

  width: 3.2rem;

}


/* 왼쪽 오른쪽 정렬 */

.left_right_wrap {

  display: flex;

  justify-content: space-between;

  align-items: center;

}


.left_wrap {

  display: flex;

  justify-content: left;

  align-items: center;

  gap: 10px;

}


.right_wrap {

  display: flex;

  justify-content: right;

  align-items: center;

}


/* 드롭다운메뉴 */

.dropbtn {

  border: none;

  cursor: pointer;

  padding: 3px;

  margin-left: 5px;

  border-radius: 5px;

}


.dropdown {

  position: relative;

  display: inline-block;

}


.dropdown-content {

  display: none;

  position: absolute;

  right: 0;

  background-color: #fff;

  min-width: 130px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);

  z-index: 1;

  border-radius: 10px;

  border: 1px solid #ddd;

  overflow: hidden;

}


.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  border-bottom: 1px dotted #ccc;

}


.dropdown-content a:last-child {

  border-bottom: none;

}


.dropdown-content a:hover {

  background-color: #f1f1f1;

}


.dropdown:hover .dropdown-content {

  display: block;

}


.dropdown:hover .dropbtn {

  color: #666;

  background-color: #f9f9f9;

}


/* 해시태그 */

.hashtag-wrap {

  display: flex;

  gap: 8px;

}


.hashtag-wrap .hashtag {

  font-size: 15px;

  color: #9966cc;

}


/* 으뜸 */

.icon_best {

  display: flex;

  justify-content: center;

  align-items: center;

  max-width: 48px;

  text-wrap: nowrap;

  padding: 0 8px 0 5px;

  font-size: 11px;

  color: #fff;

  background-color: #ff8400;

  height: 20px;

  border-radius: 20px;

}


.icon_best .material-symbols-rounded {

  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;

  font-size: 14px;

}


/* 상담사 사진 원형 */

.mentor_photo_circle {

  width: 42px;

  height: 42px;

  overflow: hidden;

  background: rgb(238, 238, 238);

  border-radius: 50%;

  position: relative;

}


.mentor_photo_circle>img {

  height: 130%;

  width: auto;

  max-width: initial;

  position: absolute;

  top: 0px;

  left: 50%;

  transform: translateX(-50%);

}


/* 라운드박스 */

/* rbox */

.rbox {

  background-color: #f5f5f5;

  padding: 10px;

  border-radius: 3px;

  font-size: 0.9rem;

  letter-spacing: -0.1;

  line-height: 1.2;

  text-align: center;

}


.rbox_line {

  border: 1px solid #ccc;

  background-color: #fff;

  color: #666;

  padding: 15px;

  border-radius: 3px;

  font-size: 0.875rem;

  letter-spacing: -0.1;

  line-height: 1.4;

}


/* 빈박스 세트 */

.empty_box {

  background-color: #f5f5f5;

  padding: 30px;

  border-radius: 5px;

  font-size: 1rem;

  letter-spacing: -0.1;

  line-height: 1.4;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  color: #999;

}


.empty_box .M_icon {

  font-size: 50px;

  color: #ccc;

}


.short_help_box {

  width: 100%;

  /* font-size: 0.875rem; */

  font-weight: 500;

  display: flex;

  flex-direction: column;

  text-align: center;

  background-color: #f0f0f0;

  justify-content: center;

  align-items: center;

  color: #333;

  padding: 20px;

}


.short_help_box.before {

  background-color: transparent;

  flex-flow: row nowrap;

  padding-bottom: 0px;

  align-items: flex-end;

}


.short_help_box.before>img {

  width: 80px;

}


/* 반응형 여백 박스 */

.blank_box {

  padding: 4% 4.17%;

  color: #333;

}


/* bg */

.bg_g {

  background-color: #f5f5f5;

  color: #111;

}


.bg_v {

  background-color: #9999cc;

  color: #fff;

}


/* 구분선 */

.gapline_row {

  width: 100%;

  height: 1px;

  border-bottom: 1px solid #eee;

}


.gapline_col {

  height: 100%;

  width: 1px;

  border-right: 1px solid #eee;

}


.solid_t {

  border-top: 1px solid #ddd;

}


.solid_b {

  border-bottom: 1px solid #ddd;

}


/* 구분선-도트라인 */

.line_dot {

  padding: 20px 0px;

  border-top: 1px dashed #ddd !important;

}


/* 페이지네이션 수정 240725 */

div.pagebar2 {

  /* display: inline-block;

  text-align: center; */

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 10px 0;

  width: 100%;

  zoom: 1;

}


div.pagebar2 p {

  padding: 0px;

  display: inline-block;

  width: 40px;

  height: 40px;

  line-height: 36px;

  margin: 0 3px;

  text-align: center;

  font-size: 16px;

  border-radius: 50%;

  background: #fff;

  border: 1px solid #ddd;

  border-radius: 50%;

  box-sizing: border-box;

}


div.pagebar2 .nextpre>span {

  position: relative;

  top: 9px;

  color: #cccccc;

  font-size: 20px;

}


div.pagebar2 .nextpre>span.icon_prev {

  left: 0px;

}


div.pagebar2 .nextpre>span.icon_next {

  right: -2px;

}


div.pagebar2 p.on {

  color: #fff;

  background: #e44682;

  border-color: #e44682;

}


div.pagebar2 a {

  display: inline-block;

  width: 40px;

  height: 40px;

  line-height: 39px;

  margin: 0 3px;

  text-align: center;

  font-size: 14px;

  border-radius: 50%;

  background: #fff;

  border: 1px solid #ddd;

  border-radius: 50%;

  box-sizing: border-box;

}


div.pagebar2 a:hover {

  background: #fffed2;

}


/* 폼 */

/* 텍스트에이리어 */

textarea {

  width: 100%;

  height: 200px;

  margin: 0;

  padding: 5px;

  border: 1px solid #d6d6d6;

  border-radius: 3px;

  background-color: #f9f9f9;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

  color: #666;

  font-size: 14px;

  line-height: 140%;

  outline-color: #ccccff;

}

/* 타이틀 */

.title_together {

  display: flex;

  align-items: baseline;

  gap: 10px;

  letter-spacing: -.4;

  padding-bottom: 20px;

}


.title_together h3 {

  font-size: 24px;

  font-weight: 500;

  color: #4b1538;

}


.title_together p {

  color: #666;

}


/* 가로 사이즈 */

.w100 {

  width: 100%;

}


.w90 {

  width: 90%;

}


.w80 {

  width: 80%;

}


.w70 {

  width: 70%;

}


.w60 {

  width: 60% !important;

}


.w55 {

  width: 55% !important;

}


.w50 {

  width: 50% !important;

}


.w40 {

  width: 40%;

}


.w30 {

  width: 30%;

}


.w20 {

  width: 20%;

}


.w10 {

  width: 10%;

}


.w5 {

  width: 5%;

}


.w3 {

  width: 3%;

}


.w2 {

  width: 2%;

}


.w1 {

  width: 1%;

}


.w_auto {

  width: auto;

}


/* 세로 사이즈 */

.h_auto {

  height: auto;

}


.h100 {

  height: 100vh;

}


/* 모달 */

.modal {

  display: none;

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 1400;

  overflow-y: auto;

  background-color: rgba(0, 0, 0, 0.5);

  overflow: hidden;

}


.modal.show {

  display: block;

}


.modal .modal-header {

  background-color: #b92d62;

  color: white;

  text-align: center;

  border-radius: 0px;

  font-size: 1.2rem;

  padding: 20px;

  font-weight: 400;

  position: relative;

}


.modal-header .title {

  font-size: 1.2rem;

  font-weight: 400;

}


.modal-header .btn-close {

  position: absolute;

  top: 50%;

  transform: translate(0, -50%);

  right: 10px;

  font-size: 2rem;

  font-weight: 200;

  cursor: pointer;

  color: #fff;

  opacity: 0.5;

}


.modal .modal-container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 520px;

  height: fit-content;

  /* max-height: 85vh; */

  border-radius: 4px;

  overflow: hidden;

}


.modal .modal-content {

  background-color: white;

  color: #333;

  max-height: 90vh;

  padding: 20px 30px;

  line-height: 1.4;

  /* background-color: #006124; */

}


.modal .modal-scroll {

  height: 80vh;

  overflow-y: scroll;

  overflow-x: hidden;

}


.modal .modal-content .img-wrap {

  text-align: center;

}


.modal .modal-content .img-wrap span {

  font-size: 2.4rem;

  padding: 15px;

  border-radius: 50%;

  border: 4px solid #ddd;

  margin-bottom: 20px;

}


.modal .modal-content h4 {

  font-size: 1.1rem;

  word-break: keep-all;

}


.modal .modal-content p {

  font-size: 0.9rem;

  word-break: keep-all;

}


.modal .modal-content .center-text {

  font-size: 1rem;

  text-align: center;

  word-break: keep-all;

}


.modal .modal-content .text-comment {

  color: #b92d62;

  font-size: 0.9rem;

}


.modal .modal-btn-box {

  background-color: #f5f5f5;

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

  padding: 15px;

  border-top: 1px solid #ddd;

  gap: 10px;

}


/* 백색 모달 240711 */

.modal_container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -55%);

  width: 600px;

  height: fit-content;

  max-width: 600px;

  max-height: calc(-30px + 100vh);

  border-radius: 4px;

  overflow: hidden;

  background-color: #fff;

  border: 1px solid #ccc;

  border-radius: 4px;

}


.modal_contents {

  padding: 30px 20px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  gap: 30px;

}


.modal_contents h2 {

  color: #c71585;

  font-size: 1rem;

  font-weight: 500;

  line-height: normal;

  letter-spacing: -0.8px;

}


.contents_wrap {

  font-size: 0.88rem;

  color: #000;

  line-height: normal;

}


.contents_wrap ol li {

  text-indent: -14px;

  padding-left: 20px;

}


.contents_wrap h4 {

  font-size: 1rem;

  font-weight: 500;

  line-height: normal;

}


.modal_footer {

  border-top: 1px solid #ccc;

}


.modal_footer .btn {

  border: none;

  width: 100%;

  padding: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #c71585;

  font-weight: 500;

  font-size: 1rem;

}


/* 아이콘 */

.texticon {

  display: inline-block;

  padding: 0px 6px;

  margin-right: 2px;

  border-radius: 3px;

  color: #fff;

  font-size: 13px !important;

  line-height: 20px;

}


.ti_green {

  background-color: #04aa04;

}


.charge_sub {

  font-size: 13px !important;

  letter-spacing: -0.2;

  font-family: Gmarket Sans, "Gmarket Sans", sans-serif;

  color: #04aa04;

  padding: 3px 4px 0 2px;

}


.charge_sub.sale {

  font-size: 12px !important;

  color: #999;

  text-decoration: line-through;

  padding: 1px 0px 0px;

}