/* 공통스타일링 */
@font-face {
  font-family: "nanum";
  src: url("./font/NanumSquare_acR.ttf");
}
@font-face {
  font-family: "nanumThin";
  src: url("./font/NanumSquareL.ttf");
}
@font-face {
  font-family: "nanumThick";
  src: url("./font/NanumSquare_acEB.ttf");
}
@font-face {
  font-family: "gmarketBold";
  src: url("./font/GmarketSansTTFBold.ttf");
}
@font-face {
  font-family: "gmarketLight";
  src: url("./font/GmarketSansTTFLight.ttf");
}
@font-face {
  font-family: "gmarketMedium";
  src: url("./font/GmarketSansTTFMedium.ttf");
}

.bannerImg {
    width: 100%;
    padding: 1.5rem 0;
}
.bannerImg a {
    width: 100%;
}
.bannerImg a img {
    width: 100%;
}

img {
  width: 100%
}

/* index 영역 */
.indexBackgroundImage {
  background: url(../img/index.png);
  background-size: cover;
  position: relative;
  min-height: 100vh;
  }
  .indexText {
  width: 25%;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); 
  top: 30%;
  }



/* 홈영역 */
.homeinnerWrapper{
  padding: 2rem 1.5rem;
}
.backgroundcolorwrapper {
margin: 0;
padding: 0;
}
.homeHeader {
display: flex;
align-items: center;
justify-content: center;
background: url(../img/main-background.png);
background-size: cover;
}
.homeHeaderimg {
width: 30%;
}
.homeHeaderimg img {
width: 100%;
}

.twoBtn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.twoBtn a {
  width: 48%;
}
.calBtn {
  display: block;
  margin-bottom: 2rem;
}
h1 {
  font-size: 1.8rem;
  font-family: gmarketMedium;
  line-height: 1.3;
  font-weight: 600;
}
.homeinnerWrapper h1 {
  margin-bottom: 1rem;
}
.homeMidBox {
  padding: 2rem 1rem;
  font-size: 1.6rem;
  line-height: 1.4;
  font-family: nanum;
  color: #737e75;
  border: 0.2rem solid #e2ebd5;
  border-radius: 0.8rem;
  margin-bottom: 2rem;
}

.swiper-slide {
  border: 0.1rem solid #e9edea;
  background-color: #ebf2ec;
}
.swiper-slide .qnaQ {
  padding: 0 2rem;
  border-bottom: 0.1rem solid #e9edea;
  font-family: gmarketMedium;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  height: 10rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.swiper-slide .qnaA {
  padding: 0 2rem;
  font-family: nanum;
  font-size: 1.4rem;
  line-height: 1.4;
  height: 7rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.homeBotBox {
  padding: 2rem;
  background-color: #ebf2ec;
  border: 0.2rem solid #e2ebd5;
  border-radius: 0.8rem;
  position: relative;
  margin-bottom: 5rem;
}
.qnaTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.qnaTit img:first-child {
  width: 10rem;
}
.qnaTit img:last-child {
  width: 6rem;
  height: 2rem;
}
.swiper {
  height: 20rem;
  z-index: 1;
}
.swiper .swiper-pagination-bullet {
  background-color: #cacaca;
}
.swiper .swiper-pagination-bullet-active {
  background-color: #128556;
}

/* content */
.innerWrapper {
  padding:2rem 1.5rem;
}
.btnWrapper {
  padding:2rem 1.5rem;
}
.btnWrapper a img { 
  margin-bottom: 2rem;
}

.contentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 0.1rem solid #f4f4f4;
}
.contentHeader button img {
  width: 2rem;
}
.contentHeader a img {
  width: 3.5rem;
}
.contentHeader h1 {
text-align: center;
margin: 0;
font-family: gmarketMedium;
font-size: 1.8rem;
font-weight: 600;
}
.fourBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem 1.5rem;
}
.fourBox a {
  width: 48.5%;
  margin-bottom: 1rem;
}
.innerWrapper .content .title {
  font-family: gmarketMedium;
  padding-bottom: 2rem;
  font-size: 1.8rem;
  border-bottom: 0.1rem solid #f3f3f3;
  margin-bottom: 1rem;
  font-weight: 600;
}
.innerWrapper .content .title_none {
  font-family: gmarketMedium;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.innerWrapper .content pre {
  font-family: nanum;
  line-height: 1.3;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}


/* calculator */
#wrap {}
#wrap .fixedTop {height: 7rem; position: fixed; left: 0; top:0; width: 100%; border-bottom: 1px solid #ccc; z-index: 100; background: #fff;}
#wrap .fixedTop h1 a {text-align: center; font-size:2.2rem; font-weight: 800; line-height:7rem; display: block;}
#wrap .mainContainer {background: #fff; min-height: calc(100vh - 7rem);}
#wrap .mainContainer .container { padding: 2rem 2rem 4rem; position: relative;}
/* #wrap .mainContainer .container::after {content:''; display: block; position: absolute; bottom:1.5rem; left: 50%; margin-left: -0.6rem; border-top: 1.2rem solid #333; border-left: 1.2rem solid transparent; border-right: 1.2rem solid transparent;} */
#wrap .mainContainer .container form > div {margin-bottom: 2rem;}
#wrap .mainContainer .container form > div h3 {font-size:1.8rem; font-family: gmarketMedium; font-weight: 600; margin-bottom: 1rem;}
#wrap .mainContainer .container form > div h3 + * {display: flex; justify-content: space-between; background: #f1f1f1;}
#wrap .mainContainer .container form > div h3 + label {position: relative;}
#wrap .mainContainer .container form > div h3 + * > * {line-height: 5rem;}
#wrap .mainContainer .container form > div h3 + * input {background: unset; width: 100%; text-indent: 1rem; color:#666; font-size: 1.6rem;}
#wrap .mainContainer .container form > div h3 + * input::placeholder {color:#ccc; }
#wrap .mainContainer .container form > div h3 + label span {position: absolute; right:0; top:0; width: 5rem; height: 5rem; text-align: center; font-size: 1.6rem; color: #acacac;}
#wrap .mainContainer .container form > div h3 + ul {padding: 0.5rem; height: 5rem; display: flex; justify-content: space-between; align-items: center;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap {height: unset;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap li {width: 100%; display: flex; flex-flow: column; text-align: center; box-sizing: border-box; padding: 1rem 0.5rem;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap li em {font-size: 1.4rem; font-family: nanum; font-weight: 600; color: #878787;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap li span {font-size:1.4rem; margin-top: 1rem; padding-left: 1rem; color:#777; line-height: 1.2;}
#wrap .mainContainer .container form > div h3 + ul li {line-height: unset; width: 32%; text-align: center; color:#aaa;}
#wrap .mainContainer .container form > div h3 + ul li.selectLabel {
  background: #fff3de;
  border: 1px solid #c7cdcb;
  background-color: #f2f9f6;
  border-radius: 0.2rem;
}
#wrap .mainContainer .container form > div h3 + ul li.selectLabel em {
  color: #008c5c;
}

.btnBlock {display: flex; justify-content: center; align-items: center; margin-bottom: 0;}
#wrap .mainContainer .container form .btnBlock button {width: 100%; padding: 1.5rem 0; color:#fff; background: #079164; margin-top: 1rem; font-size: 1.6rem; font-family: gmarketMedium; border-radius: 0.8rem; }
.btnBlock a {width: 100%; padding: 1.5rem 0; color:#fff; background: #079164; margin-top: 1rem; font-size: 1.6rem; font-family: gmarketMedium; text-align: center; border-radius: 0.8rem;}
#wrap .mainContainer .errorBlock .resultBox {display: flex; flex-flow: column;}
#regisErr .totalTop .totalList {width: 100%; display:flex; padding: 1rem 2rem; margin-bottom: 0; justify-content: space-between;}
#regisErr .totalTop .halfList {justify-content: space-between;}
#regisErr .totalTop .totalList * {line-height: 1.5;font-weight: 700;}
#regisErr .totalTop .totalList h2 {width: 100px; font-size: 1.6rem; color: #acacac; font-family: nanum;}
#regisErr .totalTop .totalList em {color:#5f6060; font-size: 1.8rem;}
#regisErr .totalTop .totalList span {color:#5f6060; font-size: 1.8rem;}
#regisErr .totalTop .totalList .repayment {color:#b5c8b5; font-size: 1.8rem;}
#regisErr .totalBtm {display: flex; flex-flow:column; border-top: 0;}
#regisErr .totalBtm > div {padding: 2rem; border-bottom: 1px solid #f7f7f7;}
#regisErr .totalBtm > div:last-child {border-bottom: 0;}
#regisErr .totalBtm > div * {font-size: 1.6rem;}
#regisErr .totalBtm > div h2 {font-size:2.5rem; margin-bottom: 1rem;font-family: gmarketMedium;font-weight: 600;}
#regisErr .totalBtm > div em {color: #adc2ad; font-size:4rem}
#regisErr .totalBtm > div span {margin-left: 1rem;  color: #b0c4b0;}
#result_table {padding: 4rem 2rem;}
#result_table #result_thead {font-size:2rem; font-weight: 700; padding-bottom: 2rem; border-bottom: 1px solid #f0f1f3;}
#result_table #result_tbody {padding-left: 0; margin: 0;}
#result_table #result_tbody .result_list {display: flex; flex-flow: column; border-bottom: 1px solid #f0f1f3;}
#result_table #result_tbody .result_list:last-child {border-bottom: 0;}
#result_table #result_tbody .result_list > div {margin-bottom: 1.5rem;}
#result_table #result_tbody .result_list .result_title {font-weight: 700; margin-top: 1.5rem; font-size:1.8rem}
#result_table #result_tbody .result_list .principalPaid2 {display: flex; justify-content: space-between; align-items: center;}
#result_table #result_tbody .result_list .principalPaid2 * {font-weight: 700;}
#result_table #result_tbody .result_list .principalPaid2 span {font-size:1.4rem}
#result_table #result_tbody .result_list .principalPaid2:nth-child(2) span,
#result_table #result_tbody .result_list .principalPaid2:nth-child(3) span{color:#898989}
#result_table #result_tbody .result_list .principalPaid2:last-child em {color:#f9a326;}
#result_table #result_tbody .result_list .principalPaid2:last-child span {font-weight: 700;}

.banner_wrap ul {
  margin: 0;
  padding: 0;
}
.banner_wrap ul li a {
  font-size: 0;
  display: block;
}
.banner_wrap ul li a img {
  width: 100%;
}
.fixedTop {
  position: relative;
}
.prevBtn img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1rem;
  width: 2rem;
}


/* faq영역 */

.qnaToggleBox {
  background-color: #aec3ae;
  border-radius: 0.7rem;
  /* margin-bottom: 2rem; */
  margin-top: 1.5rem;
}



.qnaToggleBox h1 {
  font-size: 1.7rem;
  color: #fff;
  font-family: gmarketMedium;
  font-weight: normal;
}


.qnaToggleBox .content {
  padding: 2rem;
  font-size: 1.6rem;
  line-height: 1.3;
  background-color: #fffafe;
  color: #656565;
  border: 0.1rem solid #f1f1f1;
  border-bottom-left-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
}

.toggleButton {
  width: 100%;
  margin-right: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem 1.5rem 2rem;
}
.toggleButton img {
  width: 1.5rem;
  margin-left: 1rem;
}
.toggleColor {
  text-align: left; /* 텍스트를 왼쪽 정렬로 설정 */
  margin: 0; /* 기본 마진 제거 */
  padding: 0; /* 기본 패딩 제거 */
  line-height: 1.3;
}