@charset "UTF-8";
.btn_top {
  width: 60px;
  height: 60px;
  border: 2px solid #9c7055;
  box-sizing: border-box;
  border-radius: 30px;
  position: fixed;
  bottom: 50px;
  right: 60px;
  line-height: 58px;
  text-align: center;
  font-size: 36px;
  color: #9c7055;
  background-color: #feffed;
  cursor: pointer;
  font-family: "Gowun Dodum", sans-serif;
  font-weight: bold;
}

/************************** 포트폴리오용 문구 **************************/
#pop {
  display: none;
}

#pop ~ .pop_box {
  display: none;
}

#pop:checked ~ .pop_box {
  display: block;
}

.pop_box {
  width: 140px;
  height: 140px;
  background-color: #EFEFEF;
  border-radius: 70px;
  border: 1px solid #F4E53B;
  box-sizing: border-box;
  position: fixed;
  top: 150px;
  left: 50px;
  z-index: 9;
  animation: up_down 4s infinite;
}

@keyframes up_down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
.pop_box p {
  font-size: 12px;
  text-align: center;
  color: #1A1A1A;
  padding-top: 30px;
}

.pop_box label {
  float: right;
  color: #F4E53B;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  text-align: center;
  font-size: 20px;
}

.pop_box label:hover {
  cursor: pointer;
}

/************************** 사용법 **************************/
.how_use_wrap {
  animation: up_down 4s infinite;
  position: fixed;
  top: 150px;
  right: 50px;
  z-index: 9;
}

@keyframes up_down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
.how_use_box {
  width: 130px;
  height: 130px;
  background-color: #9c7055;
  border-radius: 65px;
}

.how_use_box p {
  font-size: 24px;
  text-align: center;
  color: #feffed;
  font-family: "Gowun Dodum", sans-serif;
  padding-top: 4px;
}

.how_use_box .how_use_top {
  padding-top: 28px;
}

.how_use_wrap button {
  float: right;
  color: #9c7055;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background-color: #ffc1cc;
  text-align: center;
  font-size: 18px;
}

.how_use_wrap button:hover {
  cursor: pointer;
}

/************************** Top **************************/
/************************** 실시간 채팅상담 **************************/
#chat_chk {
  display: none;
}

#chat_chk ~ .chat .chat_box {
  display: none;
}

#chat_chk:checked ~ .chat .chat_box {
  display: block;
}

#chat_chk ~ .chat .open {
  display: block;
}

#chat_chk ~ .chat .close {
  display: none;
}

#chat_chk:checked ~ .chat .open {
  display: none;
}

#chat_chk:checked ~ .chat .close {
  display: block;
}

.chat label {
  position: fixed;
  bottom: 120px;
  right: 50px;
}

.chat label:hover {
  cursor: pointer;
}

.chat label div {
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 2px solid #9c7055;
  box-sizing: border-box;
  font-size: 50px;
  text-align: center;
  line-height: 80px;
  color: #9c7055;
  background-color: #feffed;
}

.chat .chat_box {
  width: 405px;
  height: 440px;
  background-color: white;
  border: 1px solid #9c7055;
  border-radius: 15px;
  position: fixed;
  bottom: 210px;
  right: 100px;
  z-index: 99999;
}

.chat .chat_box .brand {
  width: 405px;
  height: 100px;
  border-radius: 15px 15px 0 0;
  background-color: #feffed;
  border-bottom: 1px solid #9c7055;
  box-sizing: border-box;
}

.chat .chat_box .brand .logo_box {
  width: 60px;
  height: 60px;
  border: 1px solid #9c7055;
  box-sizing: border-box;
  border-radius: 15px;
  margin: 20px 0 0 20px;
  float: left;
}

.chat .chat_box .brand .brand_intro {
  width: 260px;
  height: 60px;
  margin: 20px 0 0 20px;
  float: left;
}

.chat .chat_box .brand .brand_intro p {
  color: #575757;
  font-family: "Gowun Dodum", sans-serif;
}

.chat .chat_box .brand .brand_intro .brand_tit {
  font-size: 24px;
  font-weight: bold;
}

.chat .chat_box .chat_first {
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-family: "Gowun Dodum", sans-serif;
  font-size: 18px;
  color: #feffed;
  float: left;
  margin: 0 30px;
  margin-top: 20px;
  padding-left: 20px;
  background-color: white;
  border-radius: 15px;
  background-color: #9c7055;
}

.chat .chat_box .faq span:hover {
  background-color: #9c7055;
  color: #feffed;
  cursor: pointer;
}

.chat .chat_box .chat_txt_box {
  width: 100%;
  height: 40px;
  border-radius: 0 0 15px 15px;
  background-color: white;
  border-top: 1px solid #9c7055;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #feffed;
}

.chat .chat_box .chat_txt_box .chat_txt {
  width: 390px;
  margin: 6px;
  font-size: 16px;
  color: #9c7055;
  font-family: "Gowun Dodum", sans-serif;
  border: none;
  background-color: #feffed;
}