@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Poppins:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Dongle&family=Single+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500&family=Work+Sans:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

@font-face {
    font-family: 'Arita-Dotum-SemiBold';
    src: url('/lib/fonts/AritaDotumSemiBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arita-dotum-Medium';
    src: url('/lib/fonts/AritaDotumMedium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SF_IceLemon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_IceLemon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SF_IceMango';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_IceMango.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OTWelcomeBA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/OTWelcomeBA.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24Ssurround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Medium';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ONE-Mobile-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ONE-Mobile-POP';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




body {
  font-family: var(--font_family);
  letter-spacing: -0.04em;
  background: var(--body_bg);
  color: var(--color_text);
}

main {
  position: relative;
  width: 100%;
  min-height: 55rem;
  /* padding-top: 4rem; */
  z-index: 1;
}

footer {
  width: 100%;
  min-height: 30rem;
  margin-top: 10rem;
  padding: 0 2rem;
  background: #f9f9f9
}

footer > article {
  max-width: var(--max_width);
  width: 100%;
  margin: 0 auto;
}


img {
  image-rendering: -moz-auto;
	image-rendering: -o-auto;
	image-rendering: auto;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}

h1, h2, h3 {
  font-family: 'Outfit', 'Arita-dotum-SemiBold', sans-serif;
}

em {
  font-style: normal;
}

.content_container {
  position: relative;
  max-width: var(--max_width);
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.content_container_full {
  padding: 0 2rem;
}

.content_container_full__inline {
  max-width: var(--max_width);
  margin: 0 auto;
  /* padding: 2rem 0; */
}


.box_wrapper {
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 20px rgb(227 230 236 / 60%);
  border-radius: 1.6rem;
  background: #fff;
}

.flickity-enabled:focus {
  outline: none;
}




input,
textarea {
  outline: none;
  font-size: 1.5rem;
  font-family: 'Outfit', 'Arita-Dotum-SemiBold', sans-serif;
}

input[type=tel] {
  font-family: var(--font_tel);
  font-size: 1.5rem !important;
}






/* DEBUG: 제목 영역 */

.tab__title__wrap {
  position: relative;
  padding-bottom: 2rem;
  /* align-items: flex-start; */
}

.tab__title__wrap > svg {
  padding: .4rem;
  width: 4rem;
  height: 4rem;
  stroke: var(--color_title);
  background: #f9f9f9;
  border-radius: 1.6rem;
}

.tab__title__wrap > img {
  height: 5rem;
}


.tab__title__inline > h3 {
  font-size: 1.6rem;
}


.tab__title__wrap img {
  max-height: 6rem;
}






/* DEBUG: 팝업 */

.popup {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 3rem;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: .4s .3s;
  z-index: 99;
}

.popup.active {
  opacity: 1;
  pointer-events: auto;
  transition: .4s;
}

.popup__inline {
  position: relative;
  min-width: 35rem;
  max-height: 62rem;
  transform-origin: center center;
  transform: scale(.7);
  padding: 3rem;
  background: #fff;
  border-radius: 2.4rem;
  opacity: 0;
  transition: .3s, .3s;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

.popup.active .popup__inline {
  transform: scale(1);
  opacity: 1;
  transition: .3s;
}




/* DEBUG: 본인인증 팝업 */

.first__name {
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #f9f9f9;
  z-index: 1;
  overflow: hidden;
}

.js_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 1rem;
  border-radius: 50%;
  background: #f9f9f9;
  cursor: pointer;
  transition: .4s;
}

.js_close:hover {
  transform-origin: center;
  transform: rotate(90deg);
}

.first__name::before {
  content: '';
  position: absolute;
  left: -50%;
  transform: rotate(95deg);
  width: 10rem;
  height: 5rem;
  background: linear-gradient(45deg, transparent, transparent, rgba(255, 255, 255, 0.3), transparent, transparent);
  z-index: -1;
}

.first__name > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  line-height: 0;
  color: #fff;
}

.certi__items {
  margin-top: 2rem;
  align-items: flex-start;
  flex-direction: column;
}

.certi__btn {
  justify-content: center;
  height: 5rem;
  width: 100%;
  background: var(--color_pmy);
  color: #fff;
  border-radius: 1rem;
}

.js_err {
  color: #ff6681
}





/* DEBUG: 정보입력 input type */

.input__wrap {
  position: relative;
  width: 100%;
}

.input__wrap > input {
  width: 100%;
  height: 5.5rem;
  padding: 2.5rem 1.5rem .7rem;
  border: 1px solid #efefef;
  border-radius: .5rem;
  font-size: 1.5rem;
  background: #f9f9f9;
  transition: .3s;
}


.input__wrap > input::placeholder {
  font-size: 1.2rem;
  color: #999;
  opacity: 0;
}

.input__wrap > input:focus::placeholder {
  opacity: 1;
}

.input__wrap > input:focus {
  box-shadow: 0 0 10px rgb(227 230 236 / 80%);
  border-color: #222;
}

.input__wrap > input:focus,
.input__wrap > input:valid {
  background: #fff;
}

.input__wrap > span {
  font-size: 1.2rem;
  color: var(--color_desc);
  font-family: var(--font_family_bold);
}


.input__wrap > input:focus + span,
.input__wrap > input:valid + span {
  top: 1.3rem;
  transform: translateY(0);
  font-size: 1.2rem;
  color: var(--color_pmy);
  font-family: var(--font_family_bold);
}

.input__wrap > span {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  pointer-events: none;
  transition: .3s;
}












/* DEBUG: 체크 스위치 */

.switch__button {
  position: relative;
  display: inline-block;
  width: 3.2rem; height: 2rem;
}

.switch__button input {
  opacity: 0;
  width: 0;
  height: 0;
}
.onoff__switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius:20px;
  background-color: #efefef;
  box-shadow: inset 1px 5px 1px rgb(228 228 228 / 60%);
  -webkit-transition: .4s;
  transition: .4s;
}
.onoff__switch:before {
  position: absolute;
  content: "";
  height: 1.6rem;
  width: 1.6rem;
  left: .2rem;
  bottom: .2rem;
  background-color: #fff;
  -webkit-transition: .5s;
  transition: .4s;
  border-radius:20px;
}
.switch__button input:checked + .onoff__switch {
  background-color: var(--color_pmy);
  box-shadow: inset 1px 5px 1px var(--color_pmy)
}
.switch__button input:checked + .onoff__switch:before {
  transform: translateX(1.2rem);
}




/* DEBUG: 체크박스 */

.cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  line-height: 0
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
  transition: .2s;
}
.cbx span:first-child {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #e4e4e4;
  transition: all 0.2s ease;
  background: #f9f9f9
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color_pmy);
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.cbx span:last-child {
  padding-left: .2rem;
  color: var(--color-desc);
  font-size: 1.2rem;
}
.cbx:hover span:last-child {
  color: var(--color_pmy)
}

.cbx:hover span:first-child {
  border-color: var(--color_pmy);
}

.inp-cbx:checked + .cbx span:first-child {
  background: var(--color_pmy);
  border-color: var(--color_pmy);
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}





@media all and (max-width: 1140px) {
  .content_container {
    max-width: 100%;
    padding: 0 2rem;
  }
}



@media all and (max-width: 768px) {
  .popup {
    padding: 8rem 0 0;
    align-items: flex-end;
  }

  .popup__inline {
    top: 100%;
    transform: scale(1);
    min-width: auto;
    width: 100%;
    padding: 1.5rem;
    border-radius: 2.6rem 2.6rem 0 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    opacity: 1;
  }

  .popup.active .popup__inline {
    top: 0;
  }
}


@media all and (max-width: 480px) {
  /* main, footer {
    padding: 0 1.5rem;
  } */

  .content_container,
  .content_container_full {
    padding: 0 1.5rem;
  }

}