@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Nunito+Sans:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */
/* font-family: 'Roboto', sans-serif; */
*{padding: 0; margin: 0;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; font-size: 16px;}

ul, li, a {list-style: none; text-decoration: none;}
a {color: inherit;}
.wrap {width: 100%; box-sizing: border-box; }
.contract_top {
  background-image: url(../img/contract.jpg); width: 100%; height: 840px; content: ''; display: block;
  background-size: cover; background-repeat: no-repeat; position: relative; background-position-y: 93%;
}

/*top 타이틀*/
.contract_title {position:absolute; top:46%; color:#ffffff; left:50%; transform:translate(-50%,-50%);}
.contract_title p {font-size: 60px; color: transparent; text-shadow: 0 0 2px #ffffff;}
.contract_title h3 {font-size:70px; font-weight: 600; position: relative; top:-40%; text-align: center;} 
.contract_title h3::before {
  background-image: url(../img/introduce_title2.png); display: block; width: 11em; 
  height: 1.55em;  background-size: cover; position: absolute;
  content: ''; left:50%; transform: translateX(-50%); top:0%; animation: 2.8s contract ease forwards;  font-family: 'Nunito';
}
@keyframes contract {
    0% { top:-100%; opacity: 0;}
    50% { opacity: 0.3;}
    80% {opacity: 0.5; }
    100% {top:-58%; opacity: 1; }
}
.contract_subtitle {
  position: absolute; top : 70%; left:50%; transform:translate(-50%,-50%);
  text-align: center; color: #fff;
}
.contract_subtitle > p {font-size: 20px; line-height: 1.6;}


/* 본문 */
.inner_wrap {max-width: 1920px; width: 100%; padding:0 10%;  box-sizing: border-box; background-color:#ffffff; }
.inner_wrap > div:first-child {padding-bottom:4%}
.inner_wrap > div {padding-bottom:10%}

.ci_list {width: 100%;  text-align: center; margin: 30px 0 0;}
.ci_list > ul {display: flex;flex-wrap: wrap; justify-content: space-between;}
.ci_list > ul > li {
  width: 32%; margin-bottom: 20px; padding: 20px 10px; border: 1px solid #ccc;
  transition: all 0.4s;
}
.cil_number {font-weight: bold; font-size: 24px;}
.cil_icon {
  width: 100px; height: 100px; border-radius: 50px; background-color: #eee; margin: 10px auto;
  background-image: url(../img/icon_01.png); background-repeat: no-repeat; background-position: center;
  background-size: 80px 80px;
}
.icon02 {background-image: url(../img/icon_02.png);}
.icon03 {background-image: url(../img/icon_03.png);}
.icon04 {background-image: url(../img/icon_04.png); background-position: 8px 10px;}
.icon05 {background-image: url(../img/icon_05.png);}
.icon06 {background-image: url(../img/icon_06.png); background-size: 100px 100px; background-position: 0px 2px;}


.cil_title {font-size: 20px; font-weight: bold; color: #8a1002; margin-bottom: 10px;}
.cil_p {width: 80%; margin: 0 auto;}





.ci_title { text-align: left; display: flex; align-items: flex-start; }
.ci_title h4 {font-size: 1.6em; width: 40%; color: #161616; position: relative;}   

.ci_title h4::before {width: 80%;  height: 1px; position: absolute; display: block; content: ''; top:-40%; background-color: #cccccc; }
.ci_title h4::after {width: 40%;  height: 3px; position: absolute; top:0; display: block; content: ''; top:-40%; background-color: #8a1002; }
.ci_title p {font-size: 1.2em; width:60%; }

.line {position: relative;}
.line::before {width: 100%; height: 1px; position: absolute; display: block; content: ''; background-color: #cccccc; top:-30%}
.line2::before {top: -7%;}


















/* *************************반응형************************ */

/************************************* 타블렛 *************************************/
@media screen and (max-width:1023px) {
  .inner_wrap {width:100%; padding: 0 10%}
  .ci_title h4 {font-size: 1.5em;}
}


/* **********************모바일****************************/
@media screen and (max-width:767px) {
  .contract_title h3 {font-size: 3.5em;}
  .contract_top {width: 100%; }
  .contract_title h3::before {width: 100%; width: 6em; height: 1.5em;}
  .inner_wrap {box-sizing: border-box;}
  .ci_title {padding: 0;}
  
  .ci_title h4 {font-size: 1.5em; width: 100%; text-align: left; position: relative;}   
  .ci_title p {font-size: 1em; width:100%; }
  .ci_title > p {margin-bottom: 20%;}
  .mobile_m {margin-top: 0;}

}

/* **********************리스트 크기****************************/
@media screen and (max-width:500px) {
  .ci_list > ul > li {width: 48%;}
}

/************************************* 모바일2 *************************************/

@media screen and (max-width:480px) {
  .contract_top {height: 30em;}
  .contract_subtitle > p {font-size: 0.9em;}
  /* .inner_wrap {padding: 40% 5%; box-sizing: border-box;} */
  .ci_title {padding: 0;}
  
  .ci_title h4 {font-size: 1.5em; width: 100%; text-align: center;position: relative;}   
  .ci_title h4::before {width: 1px; height: 1.5em; background-color: #EB7468; content: ''; display: block; position: absolute; top:100%; left:50%; transform: translateX(-50%);    margin-top: 8px; }
  .ci_title p {font-size: 1em; width:100%; }
  .ci_title > p {margin-bottom: 20%; padding: 50px 0 0;}
  .contract_title h3 {font-size: 2em;}
  .ci_title {display: block;}
  .line::before {display: none;}
  .ci_title h4::after {display: none;}
  /* .rental_kind_box {position: relative;} */
}

/* **********************리스트 크기2****************************/
@media screen and (max-width:400px) {
  .ci_list > ul > li {width: 100%;}
}