/* 공통스타일링 */
  .innerWrapper {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
  }
  .homeinnerWrapper{
    padding: 0rem 1.5rem 1.5rem 1.5rem;
  }
.homeHeader {
  padding: 2rem 1.5rem;
  height: 20%;
}
.homeHeader img {
  width: 40%;
}

.backgroundcolorwrapper {
  background-color: #f7f8f9;
  min-height: 100vh;
  height: 100%;
}

/* index 영역 */
.indexBackgroundImage {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.indexbackground {
  width: 100%;
  height: 100vh;
  object-fit: contain;
}
.indexBackgroundImage > a {
  width: 80%;
  margin-top: -15rem;
}
.indexBackgroundImage a img {
  width: 100%;
}
.calculatorbox {
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
}
.calculatorboxTopimg {
  width: 100%;
}
.calculatorbox a { 
  position: absolute;
  left: 50%; 
  transform: translateX(-50%);
  width: 90%;
  bottom: 10%;
}
.calculatorbox a img {
  width: 100%;
} 
.homeBotBtn img{
  width: 100%;
}

/* 모달 */
.indexBackgroundImage.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: #f1efef;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: #0874f5;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;}
.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: #0874f5;width: 100%;padding: 1rem;font-weight: bold;}
.modal_con .modal_box a {color: #0049a1;font-size: 1.8rem;display: block;margin-top: 1rem;}


/* content */
.contentHeader {
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
}
.contentHeader button {
  width: 3%;
}
.contentHeader button img {
  width: 100%;
}
.logoimg {
  width: 35%;
}
.logoimg img {
  width: 100%;
}
.contentTopImg {
  width: 100%;
  margin-bottom: 2rem;
}
.contentBox {
  background-color: #fff;
  border-radius: 1rem;
  padding: 5rem 2rem 10rem 2rem;
  min-height: 50vh;
  height: 100%;
  position: relative;
  
}

.contentBox img {
  width: 100%;
}
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
}
h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
}
h3 {
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 600;
  color: #777878;
}
h4 {
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 700;
}

h5 {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-top: 1rem;
  color: #b6b6b6;
}
input {
  width: 100%;
  height: 5rem;
  margin: 2.5rem 0;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  padding: 0 1rem;
  border-radius: 0.5rem;
  font-size: 1.6rem;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  background: url('../img/arrow.png') no-repeat center; /* 화살표 아이콘 이미지를 설정합니다. */
  background-size: 1.2rem 0.7rem;
}
.minimargin {
  margin: 1.5rem 0;
}
.margingogo {
  margin-bottom: 2rem;
}
.nextbtn {
  width: 90%;
  position: absolute;
  left: 50%; 
  transform: translateX(-50%); 
  bottom: 2%;
}
.likeinput {
  width: 100%;
  height: 5rem;
  margin: 2.5rem 0;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  padding: 1rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}

.resulttopimg {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 5rem;
}
.resulttopimg img {
  width: 100%;
}
.howtopimg {
  width: 40%;
  margin: 0 auto;
  margin-bottom: 5rem;
}
.howtopimg img {
  width: 100%;
}
.bordertop {
  border-top: 0.2rem solid #eee;
  padding-top: 2rem;
}
.contentincontent {
  margin: 2rem 0;
}
.contentincontent h2 {
  margin-bottom: 1rem;
}
.contentincontent h4 {
  margin-bottom: 1rem;
}
.resulttextbox {
  margin: 2rem 0;
}
.resulttextbox h3 {
  margin-bottom: 1rem;
}
.resulttextbox h4 {
  margin-bottom: 1rem;
}
.bigblue {
  font-size: 3rem;
  font-weight: 800;
  color: #0056fe;
  margin-top: 2rem;
  flex-wrap: wrap;
  word-break: break-all;
}
.bookmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bookmark img {
  width: 2rem;
  height: 2.5rem;
}
.bookmarkbox {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
}
.bookmarkbox img{
  width: 1.8rem;
  height: 2rem;
  margin-left: 94%;
  margin-bottom: 2rem;
}
.bookmarkcontent {
  display: flex;
  flex-wrap: wrap;
}
.bookmarkcontent h4 {
  width: 55%;
  margin-bottom: 1rem;
}
.bookmarkcontent h3 {
  width: 45%;
  margin-bottom: 1rem;
  font-weight: 600;
  /* display: flex; */
  /* flex-wrap: wrap; */
  word-break: break-all;
  /* justify-content: end; */
  /* align-items: center; */
  text-align: end;
}
.bookmarkcontent h3 span {
  font-size: inherit;
  margin-right: .3rem;
  word-break: break-all;
  flex-wrap: wrap;
  font-size: 1.6rem;
  line-height: 1.3;
  color: #777878;
  font-weight: 600;
}



/* id 확인용 테스트 css */
p.php {position: fixed;
  left: 1.5rem;
  bottom: 2rem;
  font-size: 1.4rem;
  z-index: 10000;
  padding: 1rem;
  color: #666;
  line-height: 1.4;
  border-radius: .5rem;
  font-family: 'Pretendard', sans-serif;
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
  background-color: rgba(255, 255, 255, .9);
}
.ddd {
  height: 30rem;
}