@charset "UTF-8";

/* 공통 - 제목 */
.titleBox{margin-bottom: 20px;}
.titleBox h2{font-size: 20px; color: #000;}
.titleBox p{margin-top: 10px; font-size: 18px; color: #565353;}

@media (max-width: 768px){

  .titleBox h2{font-size: 18px;}
  .titleBox p{margin-top: 5px; font-size: 16px;}

}

/* 슬라이드 영역 */
#slideInfoWrap .slideBox01{background-color: #E4EFFF;}
#slideInfoWrap .slideBox02{background-color: #FCF8DD;}
#slideInfoWrap .slideBox03{background-color: #E5FFEB;}
#slideInfoWrap .slideBox{display: flex; align-items: center; justify-content: space-between; gap: 0 50px;}
#slideInfoWrap .slideBox .slideTextBox h2{margin-bottom: 10px; font-weight: 500; font-size: 21px; color: #000;}
#slideInfoWrap .slideBox .slideTextBox h3{margin-bottom: 20px; font-size: 30px; font-weight: 700; color: #000;}
#slideInfoWrap .slideBox .slideTextBox p{margin-bottom: 30px; font-size: 18px; color: #000;}
#slideInfoWrap .slideBox .slideDetailView{width: 142px; height: 47px; display: flex; align-items: center; justify-content: center; border: 1px solid #5C5C5C; font-size: 18px; font-weight: 300; border-radius: 50px;}
#slideInfoWrap .slideBox .slideImgBox img{display: block; width: 280px;}
#slideInfoWrap .slideLayoutBox{display: flex; align-items: center; justify-content: center; min-height: 473px; gap: 50px 200px;}
#slideInfoWrap .slick-dots{position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex!important; gap: 0 16px; align-items: center; justify-content: center; width: 100%;}
#slideInfoWrap .slick-dots li.slick-active button{width: 37px; background-color: #385E8B; border-radius: 50px;}
#slideInfoWrap .slick-dots li button{display: block; width: 14px; height: 14px; text-indent: -9999px; border-radius: 50%; background-color:#D4D4D4; cursor: pointer;}

@media (max-width: 1199px){

  #slideInfoWrap .slideBox .slideTextBox h2{font-size: 18px;}
  #slideInfoWrap .slideBox .slideTextBox h3{font-size: 26px;}
  #slideInfoWrap .slideBox{position: relative;}
  #slideInfoWrap .slideLayoutBox{padding: 50px 20px; justify-content: space-between; align-items: flex-start;}
  #slideInfoWrap .slideBox .slideDetailView{font-size: 16px;}
  #slideInfoWrap .slideBox .slideImgBox{position: absolute; bottom: 50px; right:0;}
  #slideInfoWrap .slideBox .slideImgBox img{width: 200px;}
  
}

@media (max-width: 768px){

  #slideInfoWrap .slideBox .slideTextBox h2{font-size: 16px;}
  #slideInfoWrap .slideBox .slideTextBox h3{font-size: 24px;}
  #slideInfoWrap .slideBox .slideTextBox p{margin-bottom: 20px; font-size: 16px;}
  #slideInfoWrap .slideBox .slideDetailView{width: 120px; height: 40px;}
  #slideInfoWrap .slideLayoutBox{padding: 50px 0;}

  #slideInfoWrap .slideBox .slideImgBox img{width: 160px;}

  #slideInfoWrap .slick-dots{gap: 0 6px;}
  #slideInfoWrap .slick-dots li.slick-active button{width: 26px;}
  #slideInfoWrap .slick-dots li button{width: 10px; height: 10px;}
  
}

@media (max-width: 480px){

  #slideInfoWrap .slideBox .slideTextBox h3{margin-bottom: 15px; font-size: 20px;}
  #slideInfoWrap .slideBox .slideImgBox img{width: 140px;}

}

/* 상담 폼 영역  */
#consultFormWrap{padding: 80px 0 25px;}
#consultFormWrap .consultInfoFormBox .formBox .inputTextBox{display: flex; align-items: center; gap: 20px 0;}
#consultFormWrap .consultInfoFormBox .formBox .inputTextBox label{width: 72px; flex-shrink: 0;}
#consultFormWrap .consultationProductTabBox{margin-bottom: 55px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px;}
#consultFormWrap .consultationProductTabBox .consultationProductTabBtn{display: flex; align-items: center; justify-content: center; flex: 1; height: 66px; border-radius: 10px; font-size: 18px; color: #000; border: 1px solid #898989;}
#consultFormWrap .consultationProductTabBox .consultationProductTabBtn.active{background-color: #3471C9; border-color: #3471C9; color: #fff; font-weight: 700;}
#consultFormWrap .consultInfoFormBox form{display: flex; flex-wrap: wrap; gap: 25px 6%; padding: 50px 40px 60px; border: 1px solid #828282; border-radius: 15px;}
#consultFormWrap .consultInfoFormBox .formBox{width: 47%;}
#consultFormWrap .consultInfoFormBox .formUserInfoBox{display: flex; align-items: center; gap: 0 20px;}

@media (max-width: 1199px){

  #consultFormWrap .consultInfoFormBox form{gap: 25px 0;}
  #consultFormWrap .consultInfoFormBox .formBox{width: 100%;}
  #consultFormWrap .consultInfoFormBox .formBox .inputTextBox label{display: block; width: 100%; margin-bottom: 5px;}
  #consultFormWrap .consultInfoFormBox .formBox .inputTextBox{display: block; width: 100%;}
  #consultFormWrap .consultInfoFormBox .formUserInfoBox{flex-direction: column; align-items: flex-start; gap: 10px 0;}

}

@media (max-width: 1024px){

  #consultFormWrap .consultationProductTabBox{grid-template-columns: repeat(3,1fr);}
  #consultFormWrap .consultationProductTabBox .consultationProductTabBtn{height: 60px;}

}

@media (max-width: 768px){

  #consultFormWrap .consultationProductTabBox{grid-template-columns: repeat(3,1fr); gap: 10px;}
  #consultFormWrap .consultationProductTabBox .consultationProductTabBtn{height: 55px; font-size: 16px;}

  #consultFormWrap .consultInfoFormBox form{padding: 35px 20px;}
  #consultFormWrap .consultInfoFormBox .formBox .inputTextBox label{font-size: 16px;}

}

@media (max-width: 480px){

  #consultFormWrap .consultationProductTabBox{grid-template-columns: repeat(2,1fr);}

}

/* 추천상품목록 영역 */
#recommendedProductWrap{padding: 25px 0 0;}
#recommendedProductWrap .recommendedProductList{display: grid; grid-template-columns: repeat(3, 1fr);}
#recommendedProductWrap .recommendedProductList li{margin: 0 -1px -1px 0;}
#recommendedProductWrap .recommendedProductList li a{padding: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 279px; border: 1px solid #8D8D8D;}
#recommendedProductWrap .recommendedProductList li a .recommendedProductIconBox{margin-bottom: 7px;}
#recommendedProductWrap .recommendedProductList li a .recommendedProductIconBox img{display: block; width: 100px; margin: 0 auto;}
#recommendedProductWrap .recommendedProductList li a .recommendedProductTitle01{display: block; margin-bottom: 5px; text-align: center; font-size: 18px; font-weight: 300; color: #000;}
#recommendedProductWrap .recommendedProductList li a .recommendedProductTitle02{margin-bottom: 30px; font-size: 20px; font-weight: 500; color: #000; text-align: center;}
#recommendedProductWrap .recommendedProductList li a .detailView{display: block; font-size: 17px; font-weight: 300; color: #000; text-align: center;}
#recommendedProductWrap .recommendedProductList li:nth-child(1) a{border-radius: 15px 0 0 0;}
#recommendedProductWrap .recommendedProductList li:nth-child(3) a{border-radius: 0 15px 0 0;}
#recommendedProductWrap .recommendedProductList li:nth-child(4) a{border-radius: 0 0 0 15px;}
#recommendedProductWrap .recommendedProductList li:nth-child(6) a{border-radius: 0 0 15px 0;}

@media (max-width: 1199px){

  #recommendedProductWrap .recommendedProductList li a .recommendedProductTitle01{font-size: 16px;}
  #recommendedProductWrap .recommendedProductList li a .recommendedProductTitle02{font-size: 18px;}

}

@media (max-width: 1024px){

  #recommendedProductWrap .recommendedProductList{grid-template-columns: repeat(2, 1fr);}
  #recommendedProductWrap .recommendedProductList li:nth-child(1) a{border-radius: 15px 0 0 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(2) a{border-radius: 0 15px 0 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(3) a{border-radius: 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(4) a{border-radius: 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(5) a{border-radius: 0 0 0 15px;}
  #recommendedProductWrap .recommendedProductList li a .detailView{font-size: 16px;}

}

@media (max-width: 768px){

   #recommendedProductWrap .recommendedProductList{grid-template-columns: 1fr;}
  #recommendedProductWrap .recommendedProductList li:nth-child(1) a{border-radius: 15px 15px 0 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(2) a{border-radius: 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(3) a{border-radius: 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(4) a{border-radius: 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(5) a{border-radius: 0;}
  #recommendedProductWrap .recommendedProductList li:nth-child(6) a{border-radius: 0 0 15px 15px;}

}

/* 문의 영역 */
#contactWrap{padding: 70px 0;}
#contactWrap .contactList{display: flex;}
#contactWrap .contactList li{flex: 1;}
#contactWrap .contactList li:last-child a{border: 0;}
#contactWrap .contactList li a{display: block; border-right: 1px solid #898989;}
#contactWrap .contactList li a span{display: flex; justify-content: center; gap: 0 36px; color: #000; font-size: 20px;}
#contactWrap .contactList li a span::before{content: ''; margin-top: -8px; width: 49px; height: 49px; background: url(../images/main/phone_icon.png)no-repeat center / contain;}

@media (max-width: 1024px){

  #contactWrap .contactList{flex-direction: column; gap: 0;}
  #contactWrap .contactList li{position: relative;}
  #contactWrap .contactList li::after{content: ''; position: absolute; left: 50%; margin-left: -0.5px; width: 10px; height: 1px; background-color: #898989;}
  #contactWrap .contactList li:last-child::after{display: none;}
  #contactWrap .contactList li a{padding: 30px 0; border-right: 0;}
  #contactWrap .contactList li a span::before{margin-top: -3px; width: 36px; height: 36px;}
  #contactWrap .contactList li a span{gap: 0 15px; font-size: 18px;}

}

@media (max-width: 480px){

  #contactWrap{padding: 50px 0;}
  #contactWrap .contactList li a span::before{width: 26px; height: 26px;}
  #contactWrap .contactList li a span{gap: 0 7px; font-size: 16px;}

}