* {font-family: 'SUIT', sans-serif; color: #222; font-weight: 500;}

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.5;
  word-break: keep-all;
}

img {width: 100%;}

.swiper-pagination {display: flex; width: fit-content !important; bottom: 20px !important; right: 20px !important; color: #fff; left: auto !important; padding: 3px 20px; background-color: rgb(157 157 157 / 27%); border-radius: 50px; gap: 5px;}
.swiper-pagination span {color: #fff;}
.swiper-pagination-current {font-weight: bold;}

/* 공통 css */

input {width: 100%; height: 50px; border: 1px solid #ddd !important; border-radius: 50px; font-size: 15px; padding: 0 21px;}
input::placeholder {color: #aaa; font-weight: 300;}
b {font-weight: 800;}

.pd-t {padding-top: 60px;}
.pd-b {padding-bottom: 80px;}
.pd-b2 {padding-bottom: 30px;}
.pd-tb {padding-top: 60px; padding-bottom: 80px;}
.mt3 {margin-top: 30px;}
.pd {padding: 0 20px;}
.pd2 {padding: 60px 20px 80px 20px;}
.pd3 {padding: 60px 20px 20px 20px;}
.bx-shadow {box-shadow: 0 0 10px rgba(0, 0, 0, .08);}
.bd-n {border-bottom: none !important;}

/* 버튼 css */

button {height: 50px; text-align: center; border-radius: 50px;}
.main-btn {width: 100%; height: 50px; text-align: center; color: #fff; background-color: #42a468; color: #fff;}
button.line {border: 1px solid #42a468; color: #42a468; }
button.col {background-color: #42a468; color: #fff;}
button.sm {height: 45px; font-size: 15px;}

.btn-wrap {background-color: #fff; padding: 10px 20px; position: fixed; bottom: 0; left: 0; width: 100%;}
.btn-wrap2 {display: flex; flex-direction: column;}
.btn-fixed {padding: 10px 20px; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); width: 100%; }
.btn-fixed2 {padding: 10px 20px; position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 10; background-color: #fff;}
.btn-two {display: flex; gap: 10px;}
.btn-two button {width: 50%;}
.bd-b {border-bottom: 9px solid #f5f5f5;}


/* 메인페이지 */
.main-img {height: 469px; position: relative;}
.main-tit {position: absolute; bottom: 60px; left: 20px; display: flex; flex-direction: column; gap: 7px;}
.main-tit span {font-size: 18px; color: rgba(255, 255, 255, .9); color: #fff;}
.main-tit p {font-size: 26px; font-weight: bold; color: #fff; line-height: 1.4;}

.ai-btn {width: calc(100% - 40px); border-radius: 50px; background-color: #42a468e0; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; position: absolute; left: 50%; transform: translateX(-50%); margin-top: -30px;}
.ai-tit {display: flex; align-items: center; gap: 5px;}
.ai-tit em {width: 39px;}
.ai-tit p {font-size: 16px; color: #fff; font-weight: 600;}
.ai-btn > i {color: #fff;}

.main-menu {margin-top: 50px; display: flex; align-items: center; gap: 10px; justify-content: center;}
.main-menu li {width: 70px; height: 70px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; color: #fff;}
.main-menu li.menu01 {background: url(../img/menu01.jpg) no-repeat center/cover;}
.main-menu li.menu02 {background: url(../img/menu02.jpg) no-repeat center/cover;}
.main-menu li.menu03 {background: url(../img/menu03.jpg) no-repeat center/cover;}
.main-menu li.menu04 {background: url(../img/menu04.jpg) no-repeat center/cover;}
.main-menu li::after {content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); position: absolute; top: 0; left: 0; z-index: -1;}

.pro-wrap {padding: 40px 0 50px 20px;}
.pro-tit {display: flex; align-items: center; justify-content: space-between; padding-right: 20px; margin-bottom: 20px;}
.pro-tit i {font-size: 15px;}
.pro-tit .pro-txt {display: flex; flex-direction: column;}
.pro-tit .pro-txt h2 {font-size: 20px; font-weight: 600;}
.pro-tit .pro-txt h2 span {font-weight: 800; color: #42a468;display: inline-block;}
.pro-tit .pro-txt p {font-size: 14px; color: #777;}
.pro-con .pro-img {aspect-ratio: 1 / 0.6; border-radius: 5px; overflow: hidden;}
.pro-info {display: flex; flex-direction: column;  align-items: flex-start; margin-top: 11px;}
.pro-info span {font-size: 12px; color: #787878;}
.pro-info h3 {font-size: 16px; color: #000; font-weight: 500;}
.pro-info p {font-size: 15px; color: #000; font-weight: 900;}
.sub {display: flex; gap: 6px;}
.sub .star {display: flex; gap: 2px; font-size: 12px; font-weight: bold; color: #000; align-items: center;}
.sub .star em {background: url(../img/star.png) no-repeat center/cover; width: 10px; height: 10px;}
.sub .sell {font-size: 12px; color: #888;}

.banner {width: 100%; height: 100px;}

footer {background-color: #f5f5f5; padding: 35px 20px 100px 20px ; display: flex; flex-direction: column; gap: 20px;}
.foot-logo {width: 78px;}
.foot-info h3 {font-size: 12px; color: #999; font-weight: 900; margin-bottom: 8px;}
.foot-info ul {display: flex; flex-direction: column; gap: 4px;}
.foot-info ul li {display: flex; align-items: center; gap: 9px; font-size: 12px;}
.foot-info ul li p {color: #999; font-weight: 600;}
.foot-info ul li span {color: #555; font-weight: 600;}