@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('//fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700;800&display=swap');

body { font-family: 'Nanum Gothic', sans-serif; }

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, strong, sub, sup, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, embed, input, select, textarea, button {margin:0;padding:0;}
body {font-size:12px;line-height:1.428;font-family:'SUIT', 'Nanum Gothic',"Noto Sans KR", sans-serif;color:#333;}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-weight:normal;}
input, button, textarea {font-size:1em;font-family:'SUIT', 'Nanum Gothic',"Noto Sans KR", sans-serif;}
select {font-size:1em;}
code, pre {font-size:1em;font-family:'SUIT', 'Nanum Gothic',"Noto Sans KR", sans-serif;}
address, em, cite {font-style:normal;}
img {border:0 none;}
hr {display:none;}
table {border-collapse:separate;border-spacing:0;}
caption {width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
th, td {vertical-align:top;text-align:left;font-weight:normal;}
li {list-style-type:none;}
form {margin:0;padding:0;}
fieldset {border:0 none;}
legend, .hidden {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
label, button {cursor:pointer;}
button {overflow:visible;border:none;background:none;background:transparent;font-family:inherit;white-space:nowrap;vertical-align:top;text-decoration:none;}
button::-moz-focus-inner {border:0;padding:0;}
a:link,a:visited{text-decoration:none;*cursor:pointer;}
img{vertical-align:top;}

@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	src: url('font/SUIT-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	src: url('font/SUIT-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 600;
	src: url('font/SUIT-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 700;
	src: url('font/SUIT-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 800;
	src: url('font/SUIT-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 900;
	src: url('font/SUIT-Heavy.woff2') format('woff2');
}

*{color: #3d3d3d}

html, body {min-height: 100%; height: 100%; background: #000}

#container {min-height: 100%; height: 100%; }
section {width: 540px; min-height: 960px; height: 100%; margin: 0 auto; position: relative;}
h1 {position: absolute; left: 50%; top: 15px; transform: translateX(-50%); margin-left: 210px;}
h1>img {width: 89px;}

.result-img {height: 425px;}

#main {background: #000 ;}
/* #main {background: #000 url(../images/main.jpg) no-repeat center top; background-size: auto 100%;} */
copyright {position: fixed; display: flex; width: 540px; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; padding: 15px 15px 55px; background: #000; z-index: 2; box-sizing: border-box;}

#info {text-align: center; background: #3c2b18; display: flex; justify-content: center; align-items: center;}
  #info p>img {width: 354px;}
  #info .swiper1 {padding: 60px 0 116px; box-sizing: content-box;}
  #info .swiper-wrapper {height: 700px; margin-top: 0; text-align: center}
  #info .swiper-container-horizontal>.swiper-pagination-bullets, #info .swiper-pagination-custom, #info .swiper-pagination-fraction {bottom: 140px;}
  #info .swiper-pagination-bullet {width: 15px; height: 15px; border-radius: 8px;}
  #info .swiper-pagination-bullet-active {width: 45px; background: #0c1014;}
  #info .swiper-slide {position: relative;}
  #info .swiper-slide .scroll {position: absolute; left: 70px; top: 120px; height: 520px; overflow-y: scroll; padding-right: 10px; overflow-x: hidden;}
	#info .txt_slide {display: block; position: absolute; right: 60px; bottom: 134px; height: 23px; width: 97px; background: url(../images/info_slide_txt.png) no-repeat 0 0; z-index: 15;}

  /* 기본: 스크롤바 숨김 처리 */
  .scroll::-webkit-scrollbar {
    width: 6px;
  }

  /* 트랙 숨김 */
  .scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  /* 스크롤 thumb에 투명도 적용 */
  .scroll::-webkit-scrollbar-thumb {
    background-color: rgba(60, 43, 26, 0.2);  /* 처음엔 투명 */
    border-radius: 20px;
    transition: background-color 0.3s ease;
  }

  /* 마우스 오버 시 thumb 투명도 변경 */
  .scroll:hover::-webkit-scrollbar-thumb {
    background-color: rgba(60, 43, 26, 0.7);  /* 진한 갈색 등장 */
  }

#guide {}
  .guide_1 {background: url(../images/guide_1.jpg) no-repeat center top; background-size: cover;}
  .guide_2 {background: url(../images/guide_2.jpg) no-repeat center top; background-size: cover;}
  .guide_3 {background: url(../images/guide_3.jpg) no-repeat center top; background-size: cover;}
  .guide_area {position: absolute; left: 17px; bottom: 27px; width: 506px; }
  .guide_area>p {display: flex; justify-content: space-between; align-items: center;}
  .guide_area>div {position: relative; margin-top: 13px; padding: 25px 30px;  background: #fff1e4; border: 3px solid #ffffff; border-radius: 34px; font-size: 25px; font-weight: bold; text-align: center; color: #dbbea9;}
  .guide_area>div span {color: #dbbea9;}
  .guide_area>div span.on {color: #34251c;}
  .guide_area>div>a {position: absolute; right: 20px; bottom: 20px; display: none}

#step_wrapper {height: 100%; background: #2f2219;}
  #step_wrapper>p {display: flex; padding: 10px 0 0;}
  #step_wrapper>div.step1,
  #step_wrapper>div.step2 {height: calc(100% - 70px); text-align: center; background: #f2ddcd;}
  #step_wrapper>div.step1>img,
  #step_wrapper>div.step2>img {margin: 40px 0 20px;}
  #step_wrapper>div.step1>img.txt,
  #step_wrapper>div.step2>img.txt {position: absolute; margin: 0 auto; bottom: 75px; left: 50%; transform: translateX(-50%); text-align: center;}

  #step_wrapper>div.step1>img.txt {bottom: 93px; height: 13px;}
  #step_wrapper>div.step1>div {position: relative; width: 455px; margin: 0 auto; padding-top: 0; height: calc(100% - 345px); border-radius: 13px; background: #fbfaf8; box-shadow: 0 0 40px #d9b89f; overflow: hidden;}

  #step_wrapper>div.step1>div>ul {display: flex; height: calc(100% - 110px); justify-content: space-around; flex-direction: column; background: #fff}
  #step_wrapper>div.step1>div>ul>li {position: relative; height: 20%; display: flex; justify-content: center; flex-direction: column; border-bottom: 2px solid #fcf6f1;}
  #step_wrapper>div.step1>div>ul>li:last-child {border-bottom: 0}
  #step_wrapper>div.step1>div>ul>li.on {background: #faf3ec}
  #step_wrapper>div.step1>div>ul>li img {height: 30px;}
  #step_wrapper>div.step1>div>ul>li span {position: absolute; display: block; right: 48px; top: 38%; width: 34px; height: 30px; background: url(../images/btn_play.png) no-repeat left top; background-size: contain; z-index: 1; cursor: pointer}
  #step_wrapper>div.step1>div>ul>li span.on {background: url(../images/btn_stop.png) no-repeat left top; background-size: contain;}
  #step_wrapper>div.step1>div>ul>li a {position: relative; display: flex; height: 100%; justify-content: center; align-items: center; z-index: 1}

  #step_wrapper>div.step2>div.control,
  #step_wrapper>div.step2>div.input_area {position: relative; width: 455px; margin: 0 auto; padding-top: 0; height: calc(100% - 435px); border-radius: 13px; background: #fbfaf8; box-shadow: 0 0 40px #d9b89f; overflow: hidden;}
  #step_wrapper>div.step2>div.control {margin: 0 auto 20px; height: 80px; background: #34261c url(../images/playbox.png) no-repeat center 15px;}
  #step_wrapper>div.step2>div.control a {position: absolute; display: block; top: 15px; width: 41px; height: 50px;}
  #step_wrapper>div.step2>div.control a.play {right: 32px; background: url(../images/btn_control_play.png) no-repeat left top;}
  #step_wrapper>div.step2>div.control a.pause {right: 32px; background: url(../images/btn_control_pause.png) no-repeat left top;}

  #step_wrapper>div.step2>div.input_area {display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-bottom: 120px; background: #fff}

  #step_wrapper>div.step2>div>dl {display: flex; padding: 5px 30px; font-size: 18px; text-align: left;}
  #step_wrapper>div.step2>div>dl:first-child {padding-top: 15px;}
  #step_wrapper>div.step2>div>dl>dt {float: left; width: 25%; padding: 5px 10px; color: #a69080;}
  #step_wrapper>div.step2>div>dl:first-child>dt {color: #5e3f29;}
  #step_wrapper>div.step2>div>dl>dd {float: right; width: 75%; display: flex; flex-flow: wrap; gap: 10px;}
  #step_wrapper>div.step2>div>dl>dd>a {padding: 5px 10px; color: #34261c; border-radius: 5px; background: #efefef;}
  #step_wrapper>div.step2>div>dl:first-child>dd>a {color: #fff; background: #a69080;}

  #step_wrapper>div.step2>div>ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 30px;}
  #step_wrapper>div.step2>div>ul>li {position: relative; display: flex; margin: 5px 0 2px; width: 421px; height: 45px;}
  #step_wrapper>div.step2>div>ul>li>input {display: none; position: relative; z-index: 1; width: 421px; height: 45px; border-width: 0 0 2px; font-size: 21px; color:#34261c; text-align: left; font-weight: bold; border-bottom: 0 solid #a69080; background: transparent; text-indent: 0.8em; letter-spacing: 1.77em; outline: none}

  #step_wrapper>div.step2>div>textarea {position: absolute; left: 50px; top: 50%; margin-top: -156px; z-index: 1; width: 421px; height: 225px; border-width: 0 0 2px; font-size: 21px; color: #34261c; text-align: left; font-weight: bold; border-bottom: 0 solid #a69080; background: transparent; text-indent: 0.8em; letter-spacing: 1.83em; outline: none; text-indent: 0; line-height: 245%;}

  #step_wrapper>div.step2>div>ul>li>span {position: absolute; display: flex; height: 45px; gap: 12px; left: 5px;}
  #step_wrapper>div.step2>div>ul>li>span em {width: 45px; height: 45px; border-bottom: 2px solid #a69080;}

  #step_wrapper>div.step2>div>ul>li>input.input1 {text-indent: 0.6em; letter-spacing: 0;}
  #step_wrapper>div.step2>div>ul>li>input.input1 + span {left: 0;}
  #step_wrapper>div.step2>div>ul>li>input.input2 {width: 109px;}
  #step_wrapper>div.step2>div>ul>li>input.input3 {width: 160px;}
  #step_wrapper>div.step2>div>ul>li>input.input4 {width: 226px;}
  #step_wrapper>div.step2>div>ul>li>input.input5 {width: 275px;}

  #step_wrapper>div.step2>div>img.txt {width: 90%; margin: 30px 4.5% 0;}

  #step_wrapper>div.step2 .loading_wrap {display: none;}
  #step_wrapper>div.step2::after {display: none;}

  #step_wrapper>div.step2.loading::after {content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #46331e url(../images/loading.png) no-repeat center 45%; background-size: 100% auto; z-index: 1}

  #step_wrapper>div.step2.loading>div.loading_wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      font-family: sans-serif;
      position: absolute;
      z-index: 10;
      top: 50%;
      margin-top: -100px;
      left: 10%;
  }

  #step_wrapper>div.step2.loading>div.loading_wrap.right {
    left: auto;
    right: 10%;
  }

  .equalizer {
      display: flex;
      /* 핵심 변경: 막대들이 중앙에 정렬되도록 */
      align-items: center;
      height: 68px;
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
  }

  .left .bar {
      width: 13px;
      background: linear-gradient(to top, #fff, #8d7963);
      height: 100%;
      animation: equalize 1s ease-in-out infinite alternate;
      border-radius: 18px;
  }

  .right .bar {
      width: 13px;
      background: linear-gradient(to top, #fff, #8d7963);
      height: 100%;
      animation: equalize1 1s ease-in-out infinite alternate;
      border-radius: 18px;
  }

  @keyframes equalize {
      0%, 100% {
          height: 10%;
          opacity: 0.7;
      }
      50% {
          height: 100%;
          opacity: 1;
      }
  }

  @keyframes equalize1 {
      0%, 100% {
        height: 100%;
        opacity: 1;
      }
      50% {
        height: 10%;
        opacity: 0.7;
      }
  }

  /* 각 막대에 다른 애니메이션 지연 시간 적용 */
  .bar:nth-child(1) { animation-delay: 0s; }
  .bar:nth-child(2) { animation-delay: 0.1s; }
  .bar:nth-child(3) { animation-delay: 0.2s; }
  .bar:nth-child(4) { animation-delay: 0.3s; }

  #step_wrapper p.box_btnarea {position: absolute; width: 100%; bottom: 0; left: 0; padding: 12px; display: flex; justify-content: space-between; box-sizing: border-box; background: #fff; box-sizing: border-box; border-radius: 0 0 13px 13px;}
  #step_wrapper h1 {top: auto; bottom: 30px; margin-left: 0;}

#finish {height: 100%; background: #43301c; text-align: center;}
  #finish>img {margin: 35px 0 30px;}
  #finish>img.txt {margin: 30px 0 0;}
  #finish>div {position: relative; display: flex; width: 450px; margin: 0 auto; height: calc(100% - 270px); justify-content: space-around; flex-direction: column; border-radius: 13px; background: #fff; box-shadow: 8px 8px 3px #766859; overflow: hidden;}

  #finish>div>div {display: flex; flex-direction: column; padding-top: 43px; height: calc(100% - 120px); align-items: center; box-sizing: border-box; justify-content: center;}
  #finish h1 {top: auto; top: 50%; margin-top: -328px; margin-left: 0;}
  #finish input {position: absolute; top: 50%; translate: -50%;  left: 50%; margin-top: 130px; text-align: center; font-size: 17px; background: transparent; border: 0; color: #fff; font-weight: bold; z-index: 1; outline: none;  border: none;}
  #finish input.title {margin-top: 90px;       translate: -50%;  left: 50%; font-weight: bold; font-size: 21px; z-index: 1;}
  #finish input::placeholder {color: #fff;}
  #finish>div>div>p {position: relative; width: 400px; margin: 27px auto; border-radius: 5px; height: 4px; background: #a69080;}
  #finish>div>div>p i {position: relative; display: block; width: 30%; height: 4px; background: #43301c;}
  #finish>div>div>p k {position: absolute; right: -8px; top: -6px; width: 16px; height: 16px; background: #43301c; border-radius: 100%; cursor: pointer;}
  #finish>div>div>p em {position: absolute; top: 15px; right: 0; font-size: 18px;}
  #finish>div>div>p em.on {left: 0; right: auto;}
  #finish .btn-toggle-play img {height: 39px;}

#CM_list {height: 100%; background: #43301c; text-align: center; padding-top: 80px; box-sizing: border-box;}
  #CM_list>div {position: relative; display: flex; width: 450px; margin: 0 auto 0; height: calc(100% - 80px); justify-content: space-around; flex-direction: column; border-radius: 13px; background: #fff; box-shadow: 8px 8px 3px #766859; overflow: hidden;}
  #CM_list p.box_btnarea {position: absolute; width: 100%; bottom: 0; left: 0; padding: 12px; display: flex; justify-content: space-between; box-sizing: border-box; background: #fff; box-sizing: border-box; border-radius: 0 0 13px 13px; gap: 5px;}
  #CM_list p.list_tit {position: absolute; top: 0; left: 0; width: 100%; padding: 20px 30px;  color: #43301c; font-size: 21px; text-align: left; background: #faf2ec; font-weight: bold; box-sizing: border-box; z-index: 1}

  #CM_list ul {height: 100%; margin: 70px 0 105px; overflow-y: auto; box-sizing: border-box;}
  #CM_list ul li {position: relative; height: 90px; padding: 30px 0 30px 140px; border-bottom: 1px solid #fcf7f2; text-align: left}
  #CM_list ul li strong {display: block; font-size: 24px; padding: 10px 0 5px; font-weight: bold; letter-spacing: -0.08em}
  #CM_list ul li span {display: block; font-size: 18px; font-wegiht: bold; font-weight: bold; color: #ab9175; letter-spacing: -0.08em}
  #CM_list ul li>img {position: absolute; top: 30px; left: 30px; width: 90px; height: 90px;}
  #CM_list ul li a {position: absolute; top: 62px; right: 30px;}
  #CM_list ul li a>img {width: 18px;}
  /* 스크롤바의 폭 너비 */
  #CM_list ::-webkit-scrollbar {
      width: 3px;
  }

  #CM_list ::-webkit-scrollbar-thumb {
      background: #a69080; /* 스크롤바 색상 */
      border-radius: 3px; /* 스크롤바 둥근 테두리 */
  }

  #CM_list ::-webkit-scrollbar-track {
      background: #faf2ec;  /*스크롤바 뒷 배경 색상*/
  }

  #CM_list h1 {top: auto; bottom: 30px; margin-left: 0;}

nav {position: fixed; display: flex; width: 540px; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2}
  nav a {height: 91px;}
  nav img {width: 100%}

/* layer */
.pop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 750px; overflow-y: auto; display: none; z-index:  999;}
  .pop .bg {position:  fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.9; filter: alpha(opacity=90);}
  .popup_box a.close {display: block; position: absolute; right: -60px; top: 0; width: 38px; height: 38px;}

  #layer_pop .popup_box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; height: 541px; background: url(../images/pop.png) no-repeat left top}
  #layer_pop .auth {position: absolute; top: 170px; width: 375px; left: 33px;}
  #layer_pop .auth input {width: 238px; border-radius: 5px; padding-top: 3px; padding-bottom: 6px; border: none; text-indent: 20px; font-size: 20px; background: #f2f2f2;}
  #layer_pop .auth p {display: flex; justify-content: space-between; margin-bottom: 20px;}
  #layer_pop .auth span.countdown {position: absolute; top: 80px; font-size: 20px; left: 169px; color: #fc4141}
  #layer_pop .btn_close {position: absolute; bottom: 40px; left: 70px;}
  #layer_pop .btn-kakao-login {position: absolute; display: block; top: 180px; left: 160px; width: 120px; height: 130px; text-indent: -9999px; display: none;}
  #layer_pop .btn_agree {display: block; width: 221px; margin: 52px 0 0 64px; padding: 5px; text-indent: -9999px;}

  #layer_finish .popup_box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; height: 667px; background: url(../images/finish_popbg.png) no-repeat left top; background-size: cover;}
  #layer_finish .popup_box a {position: absolute; left: 40px; top: 270px; display: block; width: 358px; height: 200px;}
  #layer_finish .popup_box a.link {left: 20px; top: 561px; width: 398px; height: 85px;}
	#layer_finish .popup_box a.close {position: absolute; left: auto; top: 0; right: 0; display: block; width: 68px; height: 68px;}

  #layer_agree .popup_box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; height: 50%; border-radius: 15px; padding: 30px; font-size: 16px; overflow-y: auto; background: #fff; box-sizing: border-box;}
  #layer_agree .popup_box strong.tit {font-weight: 900; font-size: 20px;}
  #layer_agree .popup_box strong {font-weight: 900;}

#privacy {padding:30px 20px; font-size: 14px; line-height: 160%; word-break: keep-all; background: #fff; color:#4b4b4b}
  #privacy p.tit {margin-bottom: 20px; font-size: 22px; text-align: center;}
  #privacy strong {font-size: 17px; margin-top: 20px;}
  #privacy p {padding:10px 0;}