@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/Pretendard/dist/web/static/pretendard.css');
@import url("/css/feather.css");

html, body{margin:0; padding:0;}
body{ letter-spacing: -1px; width:100%; background:#fff; color:#333; font-size:14px; font-weight: 400; line-height:1.5; word-wrap:break-word; word-break:keep-all; font-family: "Pretendard", sans-serif !important;}

h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 700;}
img{width:100%; height:auto}
a,a:hover{text-decoration: none;}

p { margin:0; }

[type=button]{display: flex; align-items: center; cursor: pointer; background:#fff}

nav{display: flex; align-items: center; position: fixed; top: 0; left: 0; z-index: 999; background-color:#fff; padding: 14px 0px; width:100%;}
.container{position: relative; width: 100%; padding:0 15px; margin:0 auto;}

.navbar{position: relative; display: flex; align-items: center; justify-content: space-between; margin-right: -15px; margin-left: -15px; z-index: 1000;}
.navbar .logo{ display: flex; width: 210px; align-items: center;}
.navbar .navbarNav{display: flex; gap: 20px; margin:0 auto}
.navbar .navbarNav a{font-size: 20px; font-weight:500; color:#333; margin: 0 30px; padding:10px}
.navbar .navbarNav .active{color:#B6956E}
.navbar .navbar-toggler{display: none; padding: 0px; border: none; font-size: 24px; padding: .25rem .75rem;}
.nav-close {display: none; position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; z-index: 1002; border:none; background-color:#fff; width:24px; height:24px;}

section {position: relative; display: block;}
.pd100 {padding: 100px 0;}
.pd80 {padding: 80px 0;}

.mt80{margin-top:80px;}


.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb35{margin-bottom:35px;}
.mb40{margin-bottom:40px;}
.mb45{margin-bottom:45px;}
.mb80{margin-bottom:80px;}


/* text sizes */
.text-size-xxl { font-size: 70px; line-height: 150%; }
.text-size-xl { font-size: 60px; line-height: 130%; }
.text-size-lg { font-size: 40px; line-height: 130%; }
.text-size-md { font-size: 30px; line-height: 150%; }
.text-size-sm { font-size: 20px; line-height: 150%; }

.text-lg { font-size: 40px; line-height: 130%; }
.text-md { font-size: 30px; line-height: 150%; }
.text-xmd { font-size: 30px; line-height: 150%; }
.text-sm { font-size: 20px; line-height: 150%; }
.text-xsm { font-size: 20px; line-height: 150%; }

.text-white{color:#fff;}
.text-gradient {background: linear-gradient(90deg, #A6ADFF 0%, #434992 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; }
.text-yellow{color: #DCEF6F;}
.text-tcolor{color:#B6956E}
.text-color1{color: #34D40C;}
.text-color2{color: #4B4B4B;}
.text-color3{color: #656565;}

.text-center{text-align:center;}
.underline{text-decoration: underline; text-underline-offset: 3px;}
/* font weights */
.weight-200 { font-weight: 200; }
.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }
.weight-800 { font-weight: 800; }

.mbg{background: linear-gradient(251.93deg, #000117 8.33%, #00095E 86.35%);}

.mtxtBox{position: relative; padding-left:24px; margin-top:45px;}
.mtxtBox::after {content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 100%; background-color: #DCEF6F;}
.mtxtBox p{margin-bottom:30px; text-decoration: underline; text-underline-offset: 6px;}
.mtxtBox p:last-child { margin-bottom: 0; text-decoration: none;}

.mconBox{margin-top:85px;}
.mconBox p{margin-bottom:20px;}
.mconBox p:last-child{margin-bottom:0;}
.mconBox .iconBox{display:flex; gap:8px; margin-bottom:15px;}
.mconBox .iconBox img{width:42px; height:42px; border-radius: 10px;}

.mrimgBox{display:flex; flex-direction:column}


.conwidth{max-width:1024px; margin: 0 auto;}
.box{display:flex; flex-direction:column; align-items: center; box-shadow: 0px 10px 30px 0px #1D650C1A; border: 1px solid #34D40C; padding:80px 0; border-radius: 10px;}
.box .htxt{font-size: 40px; line-height: 130%;}
.box .stxt{font-size: 20px; line-height: 150%;}
.line {width: 25px; height: 1px; background-color: #34D40C; margin: 20px 0;}


.service{padding-top:100px;}
.promo-section {background: linear-gradient(#34D40C 4.22%, #058AA2 125.2%); color: #fff; padding:70px 0;}
.relative{position: relative; }
.icon-group{display:flex; align-items: center; gap:10px;}
.icon-group img {box-shadow: 0px 6.21px 15.53px 0px #00000033; width:77px; height:77px; border-radius: 10px;}

.promo-image-area{position: absolute; top:-362px; right:0; z-index:100; max-width:430px;}
.promo-image-area .swiper-slide .textBox{color: #1C1C1C; font-weight: 600; margin-top:15px}
.promo-image-area .swiper-pagination{position: relative;margin-top:30px;}
.promo-image-area .swiper-pagination-bullet{width:12px; height:12px;}
.promo-image-area .swiper-pagination-bullet-active{background:#03C95B;}

.promo-bottom{margin-top:80px}
.promo-bottom .subtitle {font-weight: 700; font-size: 40px; line-height: 130%; color: #DBDBDB;}

.promo-bottom .title {font-weight: 700; font-size: 40px; line-height: 130%; text-decoration: underline; text-underline-offset: 6px; color: #129F77; margin-top:10px;}
.word-circle-wrap {position: relative;}
.word-circle-wrap::before {content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; background: #129F77; border-radius: 50%;}
.word {position: relative;}

.price{margin-top:260px; background: #F5FDF4; padding-bottom:80px; }
.priceTxtBox{position: relative; z-index: 1; padding-bottom: 30px; display:flex; flex-direction:column; align-items: flex-start;}
.priceTxtBox .imgBox{position: relative; }
.priceTxtBox .imgBox .txt{position: absolute; top:55%; left:50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 50px; line-height: 130%; color:#fff;}
.priceTxtBox p{font-weight: 700; font-size: 40px; margin-top:45px; text-align:center;}
.priceTxtBox p:nth-last-of-type(1) {margin-top: 0; font-weight: 400; font-size: 18px; color:#656565}


.price .rimgBox{	position: absolute; bottom: 0;  right: 0; width: 1024px; z-index: 0;}

.contact{background: #49453E;}

.contact label {display:flex !important; gap:5px; margin-bottom:6px; display: block; font-size:16px; color:#fff}
.contact label span{color:#FF1414;}
.form-input, .form-select, .form-textarea {width: 100%; border-radius:10px; border: none; background-color:#fff; padding:15px; font-size:14px; line-height: 1.25rem; font-weight: 400; --tw-text-opacity: 1; outline: none !important; outline-offset: none !important; }

.form-check {display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem;}
.form-check span {color: #FF0000;}
.form-check label {display: flex; align-items: center; flex-wrap: wrap; color: #8C8C8C; font-size: 14px; font-weight: 500; padding-left: 20px;}
.form-check-input {width: 1.5em; height: 1.5em; margin-top:0;}
.form-check .form-check-input { margin-left: -25px; margin-right: 0.4375em;}
.form-check-input[type=checkbox] {border-radius: .25em;}

.contact .btnBox {display: flex; justify-content: center; align-items: center; margin-top:10px;}
.contact .btnBox button {display: flex; width: 200px; height: 60px; padding: 10px; justify-content: center; align-items: center; gap: 10px; flex-shrink: 0; border-radius: 10px; background: #333; color:#fff; font-size:16px; border:none; }


footer{background: #020202; padding:20px 0}
.footer-content {display:block; margin-bottom: 5px;}
.footer-content:nth-last-of-type(1) {margin-bottom: 0;}
.footer-content span {position: relative; color: #8B8B8B; font-size: 14px; font-weight: 500; padding-right: 21px;}
.footer-content span:nth-last-of-type(1) {padding-right: 0;}

.footer-content span::after {content: ""; position: absolute; top: 50%; right: 3px; width: 11px; height: 1px; background-color: #8B8B8B; transform: translateY(-50%) rotate(-90deg);}
.footer-content span:last-of-type::after {display: none;}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}