.indexBackgroundImage {
  height: 100vh;
  background-image: url(../img/index.png);
  background-size: cover;
}
.indexText {
  width: 40%;
  display: block;
  margin: 0 auto;
  padding-top: 30%;
}
header img {
  width: 100%;
}
main {
  min-height: 100vh;
  padding-bottom: 13.5rem;
}
main header {
  background: #fff;
}

.search_wrap p:nth-child(1) {
  font-size: 2rem;
  font-weight: 600;
}
.search_wrap p:nth-child(3) {
  font-size: 1.4rem;
  margin: 1rem 0;
}
.search_wrap p:nth-child(4) {
  font-size: 1.4rem;
  font-weight:500;
}
/* home */
.homeInput {
  font-size: 1.8rem;
  padding: 1rem 2rem;
  border: 0.2rem #f4422b solid;
  width: 100%;
  border-radius: 3rem;
  outline: none;
}
form {
  position: relative;
}
input {
  background-color: #fff !important;
  border: none; 
  outline: none; 
}
.homeTopContent {
  text-align: center;
  padding-top: 7rem;
  background-color: #fff;
  margin-bottom: 2rem;
}
.homeTopContent span {
  font-size: 3rem;
  font-weight: 800;
  display: inline-block;
  line-height: 1.3;
}
.homeTopContent img {
  width: 100%;
  margin-top: 5rem;
}
.redText {
  color: #f21900;
}
.homeWrap {
  background-color: #f7f7f7;
  min-height: 150vh;
}
.homeSearchWrap {
  padding: 2rem;
}
.homeSearchWrap pre {
  font-size: 1.4rem;
  line-height: 1.3;
  margin-top: 1rem;
  font-weight: 500;
}
/* result */
.resultInner {
  padding: 4rem 2rem 0 2rem;
}
.resultInput {
  font-size: 1.8rem;
  padding: 1rem 2rem;
  border: 0.1rem #d1d2d2 solid;
  width: 100%;
  border-radius: 3rem;
  outline: none;
  margin-bottom: 1rem;
}
.input_wrap {
  position: relative;
}
.input_wrap button img {
  position: absolute;
  right: 5%;
  top: 15%;
  width: 2.5rem;
}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
/* 결과값 */

.result > li {
  border-bottom: 1px solid #ddd;
  padding: 2rem;
  position: relative;
}
.result > li > div.zipNo {
  margin-bottom: 1rem;
}
.result > li > div.zipNo p {
  font-weight: 500;
}
.result > li > div.lnmAdres {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.result > li > div.lnmAdres p {
  font-weight: 500;
}
.result > li > div.lnmAdres:before {
  content: '도로명';
  display: inline-block;
  color: #f21a00;
  background-color: #fcc9bb;
  border-radius: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  font-weight: 500;
}
.result > li > div.rnAdres {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.result > li > div.rnAdres p {
  color: #747474;
  font-weight: 500;
}
.result > li > div.rnAdres:before {
  content: '구주소';
  display: inline-block;
  color: #3b3b3b;
  background-color: #dddddd;
  border-radius: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  font-weight: 500;
}

.result > li > div p {
  font-size: 1.6rem;
  width: 80%;
  line-height: 1.3;
  display: inline;
  padding-top: 0.2rem;
}
.result > li > div .copy_btn {
  text-indent: -9999px;
  width: 5rem;
  height: 2.3rem;
  background: url(../img/copy.png) no-repeat center / 80%;
  z-index: 9998;

}
.result .no_data {
  padding: 3rem 0;
}

.searchResult {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 2rem;
}

.result h1 {
  display: inline-block;
  font-size: 3rem;
  line-height: 1.3;
  color: #f11500;
  font-weight: 700;
}
.result h2 {
  display: inline;
  font-size: 3rem;
  line-height: 1.3;
  color: #f11500;
  font-weight: 700;
}
.result h3 {
  font-size: 2rem;
  display: inline;
  line-height: 1.3;
  font-weight: 700;
}

.searchContent {
  padding: 0 2rem;
}

.result > li .book {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background-image: url(../img/star_wh.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
  width: 3rem;
  height: 3rem;
}
.result > li .book.on {
  background-image: url(../img/star_red.png);
}

.book {
  border: none;
  outline: none;
}

.homeBookmark {
  padding: 2rem;
  background-color: #fff;
  position: relative;
  border-bottom: 0.1rem solid rgb(198, 198, 198);
}
.homeBookmark:last-child {
  border-bottom: none;
}

.doro span {
  display: inline-block;
  color: #f21a00;
  background-color: #fcc9bb;
  border-radius: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  font-weight: 500;
}
.gu span {
  display: inline-block;
  color: #3b3b3b;
  background-color: #dddddd;
  border-radius: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  font-weight: 500;
}
.doro {
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.gu {
  font-size: 1.6rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
}
.zipnum {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 700;
}
.removeBookmark img {
  position: absolute;
  top: 2.2rem;
  right: 2rem;
  width: 2rem;
}
.no_data img {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 30rem;
}





#wrap { background: url(../img/index_bg.png) no-repeat; min-height: 100vh; background-position: bottom center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12rem;}
#wrap .img_wrap { text-align: center; margin-top: -5rem;}
#wrap .img_wrap img { width: 62%; max-width: 35rem;}


/* 모달 */
#wrap.on .modal {display: block}
.modal {display:none;position: fixed; min-height: 100vh;width: 100%; left: 0; right: 0; top: 0;z-index: 100;background: transparent;}
.modal .modal_bg {position: fixed;left: 0;top: 0;height: 100%;width: 100%;background: rgba(0,0,0,.3);}
.modal_con {background: #d7c7a1;max-width:400px;width: 85%;  top: 50%;left: 50%;position: absolute;transform: translate(-50%,-50%);display: flex;flex-direction: column;border-radius: .3rem;box-shadow: 0 0 .5rem rgba(0,0,0,.3);z-index: 101;}
.modal_con h3 {padding: 1.2rem;color: #270000;font-weight: bold; text-align: center;position:relative; margin-right: 0;display: block; font-size: 1.8rem;}
.modal_con h3 span {display: block;width: 1rem;position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);}
.modal_con .modal_box {position: relative;background: #fff;margin: 0 1rem;padding: 2rem 0;margin-bottom: 1rem;}
.modal_con .modal_box img {width: 4rem;margin: 0 auto;display: block;margin-bottom: .5rem;}
#wrap .modal_con .modal_box p {font-size: 1.7rem;text-align: center;color: #333;margin-bottom: 5rem;padding: 1rem;}
.modal_con .modal_box > div {padding: 0 1rem;padding-top:0;position: absolute;bottom:1rem;width: 100%;display: flex;align-items: center;justify-content: center;gap: 1rem;}
.modal_con .modal_box button {font-size: 1.8rem;color: #fff;background: rgb(153, 110, 0);width: 100%;padding: 1rem;font-weight: bold;}
.modal_con .modal_box a {color: #270500;font-size: 1.8rem;display: block;margin-top: 1rem;}
/*  */