@charset "utf-8";

/* 색상을 빨간색으로 변경하는 새로운 클래스 */
.main-color {
    color: #00aa2d !important;
}
.black-color {
    color: #000 !important;
}

.pointer{cursor: pointer !important;}



.main-inquiry-con{position: relative;}
.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con dt{color:#333;}
.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con dd{background:#efefef; backdrop-filter:blur(10px);}
.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con .write-input,
.main-inquiry-con .inquiry-tbl-style07 .write-textarea{background:transparent;}

.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con dd i{transition:var(--transition-custom); color:#333;}

.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con dd.select-box::before,
.main-inquiry-con .inquiry-tbl-style07 .write-input::placeholder,
.main-inquiry-con  .inquiry-tbl-style07 .write-select,
.main-inquiry-con  .inquiry-tbl-style07 .write-textarea::placeholder,
.main-inquiry-con  .bbs-inquiry-agree-con .agree-txt{ font-size: 16px;}
.main-inquiry-con  .bbs-inquiry-agree-con .agree-txt span{padding-left: 20px;}
.main-inquiry-con .inquiry-tbl-style07 .write-input:focus::placeholder,
.main-inquiry-con  .inquiry-tbl-style07 .write-select:focus::placeholder,
.main-inquiry-con  .inquiry-tbl-style07 .write-textarea:focus::placeholder {color:rgba(34,34,34,0.35)}
@media (max-width: 768px) {

.main-inquiry-con .inquiry-tbl-style07 .write-input::placeholder,
.main-inquiry-con  .inquiry-tbl-style07 .write-select,
.main-inquiry-con  .inquiry-tbl-style07 .write-textarea::placeholder,
.main-inquiry-con  .bbs-inquiry-agree-con .agree-txt{color:#acacac; font-size: 12px;}

.agree-txt label{font-size: 12px !important;}

}
.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con dd.shadow{background:#fff;}
.main-inquiry-con .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con dd.shadow i{color:var(--main-color);}

.main-inquiry-con .bbs-inquiry-agree-con .agree-pop-btn{
        display: flex;
        align-items: center;
        width: 8rem;
        height: 3rem;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 30px;
        font-size: 16px;
        letter-spacing: -0.24px;
        color: #222;
        transition: all 0.3s;
}


@media (max-width: 768px) {
    .main-inquiry-con .bbs-inquiry-agree-con .agree-pop-btn{
        width: 6rem;
        height: 2rem;
        font-size: 12px;
    }
}

.main-inquiry-con .bbs-inquiry-agree-con .agree-pop-btn:hover{background-color: var(--main-color);}
.main-inquiry-con .bbs-inquiry-agree-con .agree-txt input:checked + label i{color:var(--main-color);}
.shadow.bbs-inquiry-agree-con .agree-txt{color:#000;}
.main-inquiry-con .shadow.bbs-inquiry-agree-con .agree-pop-btn{background: rgba(0,0,0,0.05); color:var(--main-color);}


/* 커스텀셀렉트 */
.bbs-inquiry-style07 .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con.custom-select-style .select-box:before{display: none;}
.bbs-inquiry-style07 .custom-select-wrapper,
.bbs-inquiry-style07 .custom-select-wrapper .custom-select{position: inherit;}
.bbs-inquiry-style07 .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con.custom-select-style{position: relative; z-index:1;}
.bbs-inquiry-style07 .board-custom-select-box .custom-select-trigger{height:60px; line-height:60px; color:#fff; font-size:14px;}

.bbs-inquiry-style07 .custom-option-drop-list{border-radius:10px; border:0; }
.bbs-inquiry-style07 .board-custom-select-box .custom-option-item{font-size:1em; color:#000; font-weight:500;}

.bbs-inquiry-style07 .shadow .board-custom-select-box .custom-select-trigger{color:#000;}




/* common */
.main-subtit {
    font-family: var(--font-gil);
    font-size: 20px;
    letter-spacing: 0;
    font-weight: 700;
    color: #00aa2d;
    margin-bottom: 30px;
}
.swiper-button-next{right: 15% !important;}
.swiper-button-prev{left: 15% !important;}
.swiper-button-prev, .swiper-button-next{
    position: absolute !important;
    color: #00aa2d !important;
    background-color: #e5f6ea !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 100% !important;
}

.swiper-pagination{
    display: flex !important;
    flex-flow: row wrap;
    justify-content: space-between !important;
    bottom: 0 !important;
}
.swiper-pagination-bullet {
	border-radius: 10px !important;
	width: 12% !important;
	height: 40px !important;
	text-align: center !important;
	line-height: 40px !important;
	font-size: 16px !important;
	color:#00aa2d !important;
	opacity: 1 !important;
	background: transparent !important;
    border: 1px solid #00aa2d !important;
	margin:0 !important;
    font-weight: 700 !important;
}
.swiper-button-prev, .swiper-button-next{
    display: none !important;
}
@media (max-width: 768px) {
    .swiper-pagination-bullet {
        width: 24% !important;
        margin-top: 10px !important;
    }
    .swiper-pagination-bullet {
        font-size: 12px !important;
    }
   

 

}

.swiper-pagination-bullet-active {
	color:#fff !important;
	background:#00aa2d !important;
}
.swiper-pagination-bullets{
    margin-bottom: 60px !important;
}
.sec01_swiper{
    margin-top: 100px !important;
}
@media (max-width: 768px) {
    .main-subtit {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .sec01_swiper{
        margin-top: 50px !important;
    }
    
}
.mo_view{display: none;}

@media (max-width: 768px) {
    .mo_view{display: block;}
    .pc_view{display: none;}
    .swiper-slide .mo_view{margin: 0 auto;}
}


.main-tit {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.3;
}

@media (max-width: 1400px) {
    .main-tit {
        font-size: 62px;
    }
}

@media (max-width: 960px) {
    .main-tit {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .main-tit {
        font-size: 30px;
        line-height: 40px;
    }
}


.main-tit span {
    color: #00aa2d;
}

.sub_tit{
    font-size: 18px;
    line-height: 30px;
    margin: 40px 0;
}

@media (max-width: 768px) {
    .sub_tit{
        font-size: 16px;
        line-height: 24px;
    }
} 
@media (max-width: 400px) {
    .sub_tit{
        font-size: 14px;
        line-height: 22px;
    }

} 

.core_value{
    width:100%;
    background: #fff;
    border-radius: 50px;
    padding:45px 140px 60px 140px;

}
.core_value .core_con{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;    
    align-items: center;
}
@media (max-width: 1024px) {
    .core_value .core_con{
        justify-content: center;    
        align-items: center;
    }
    .core_value .core_con div{
        width: 33.33%;
    }
    .core_value{
        width:100%;
        background: #fff;
        border-radius: 50px;
        padding:30px;
    
    }
}
@media (max-width: 768px) {
    .core_value .core_con div{
        width: 100%;
    }
}

.core_value .core_con .bg_green{
    background: #00aa2d;
    border-radius: 100%;  
    padding: 100px 0;
    width: 245px;
    height: 245px;
    margin: 0 auto;
}
.core_value .core_con .bg_green h3{
    font-size: 30px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}

.core_value .core_con .bg_green p{
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
.core_value .core_con span{
    display: block;
    font-size: 18px;
    line-height: 30px;
    margin-top: 30px;
}
@media (max-width: 768px) {
    .core_value .core_con span{
        font-size: 16px;
        line-height: 24px;
        margin: 20px 0 30px 0;
    }
    .core_value .main-subtit{
        font-size: 16px;
    }
    
}
@media (max-width: 768px) {
    .core_value{
        padding:50px 0;
    
    }
    .core_value .core_con{
        flex-flow: column;
        justify-content: center;    
        align-items: center;
    }
    .core_value .core_con .bg_green{
        width: 200px;
        height: 200px;
        padding: 75px 0 0 0 ;
    
    }
}


/* layout */
.quick-wrap {
    position: fixed;
    left: 54px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5000;
}

@media (max-width: 1700px) {
    .quick-wrap {
        left: 28px;
    }
}

@media (max-width: 1440px) {
    .quick-wrap {
        display: none;
    }
}

.quick-wrap li {
    opacity: .3;
}

.quick-wrap li.active {
    opacity: 1;
}

.quick-wrap li + li {
    margin-top: 6px;
}

.quick-wrap button {
    font-size: 12px;
    font-family: var(--font-gil);
    letter-spacing: 0.03em;
    color: #00aa2d;
    font-weight: 600;
}

.quick-wrap button:before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #00aa2d;
}
.quick-wrap .active button:before {
    background-color: #00aa2d;
}



.main-inner {
    width: 100%;
    max-width: 1248px;
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
}

.main-tit-wrap {
    position: relative;
}

/* intro */
.intro-wrap {
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    /* opacity: .5; */
    display: none;
}

@-webkit-keyframes introBack {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes introBack {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.intro-wrap .back {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: introBack .5s 2s forwards;
            animation: introBack .5s 2s forwards;
}

@-webkit-keyframes introShape {
    0% {left: 100%;}
    100% {left: 0;}
}

@keyframes introShape {
    0% {left: 100%;}
    100% {left: 0;}
}

.intro-wrap .shape {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom;
    position: absolute;
    top: 0;
    left: 100%;
    -webkit-animation: introShape 1.5s .35s forwards;
            animation: introShape 1.5s .35s forwards;
}

@media (max-width: 960px) {
    .intro-wrap .shape {
        background-position: center;
    }
}

@-webkit-keyframes introTypo {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes introTypo {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.intro-wrap .visual-typo {
    font-size: 6vh;
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 1.2;
    color: transparent;
    position: absolute;
    left: 28px;
    top: 35%;
    transform: translateY(-50%);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    -webkit-animation: introTypo .8s .3s forwards;
            animation: introTypo .8s .3s forwards;

            
}

@media (max-width: 1400px) {
    .intro-wrap .visual-typo {
        font-size: 11.1111vh;
    }
}

@media (max-width: 768px) {
    .intro-wrap .visual-typo {
        font-size: 60px;
        line-height: 1.6;
        top: calc(50% - 100px);
    }
}

.intro-wrap .visual-typo span {
    width: 23.7vh;
    height: 5vh;
    background-image: url(../img/main-visual-typo.svg);
    background-size: cover;
    display: inline-block;
    margin-left: 2px;
    margin-bottom: -3px;
}

@media (max-width: 1400px) {
    .intro-wrap .visual-typo span {
        width: 26.29630px;
        height: 10.18520px;
    }
}

@media (max-width: 768px) {
    .intro-wrap .visual-typo span {
        width: 142px;
        height: 55px;
        display: block;
    }
}

/* ------ */

@-webkit-keyframes introBtm {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}

@keyframes introBtm {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}

@-webkit-keyframes introTop01 {
    0% {margin-top: 50px;opacity: 0;}
    100% {margin-top: 0;opacity: 1;}
}

@keyframes introTop01 {
    0% {margin-top: 50px;opacity: 0;}
    100% {margin-top: 0;opacity: 1;}
}

@-webkit-keyframes introTop02 {
    0% {transform:translateY(50px);opacity: 0;}
    100% {transform:translateY(0px);opacity: 1;}
}

@keyframes introTop02 {
    0% {transform:translateY(50px);opacity: 0;}
    100% {transform:translateY(0px);opacity: 1;}
}

.main .wrap,
.main header#header,
.main footer#footer {
	opacity: 0;
}

.intro header#header {
    transform: translateY(-100%);
    -webkit-animation: .8s .2s forwards introBtm;
            animation: .8s .2s forwards introBtm;
}

.intro .quick-wrap,
.intro .main-visual .visual-typo,
.intro .visual-inner {
    margin-top: 50px;
    opacity: 0;
    -webkit-animation: .8s .2s forwards introTop01;
            animation: .8s .2s forwards introTop01;
}

.intro .sc-wrap,
.intro .visual-slide-wrap .slide-control {
    margin-top: 50px;
    opacity: 0;
    -webkit-animation: .8s .2s forwards introTop02;
            animation: .8s .2s forwards introTop02;
}

/* contents */
.main-visual {
    width: 100%;
    height: 100dvh;
    position: relative;
}

.main-visual .visual_txt {
    font-size: 1.5vh;
    letter-spacing: 0.7em;
    color: #00aa2d;
    position: absolute;
    left: 28px;
    top: 23%;
    transform: translateY(-50%);
    z-index: 100;
}

.main-visual .visual-typo {
    font-size: 6vh;
    letter-spacing: -0.07em;
    line-height: 1.2;
    color: #333;
    position: absolute;
    left: 28px;
    top: 35%;
    transform: translateY(-50%);
    z-index: 100;
}

.main-visual .visual-typo b {
    font-size: 6vh;
    letter-spacing: -0.07em;
    line-height: 1.2;
    color: #000;
    font-weight: 700;
}

@media (max-width: 1400px) {
    .main-visual .visual-typo {
        font-size: 6vh;
    }
    .main-visual .visual-typo b{
        font-size: 6vh;
    }


}

@media (max-width: 768px) {
    .main-visual .visual-typo {
        font-size: 40px;
        line-height: 1.2;
        top: 28%
    }

    .main-visual .visual-typo b {
        font-size: 40px;
    }

    .main-visual .visual_txt {
        top: 16%;
    }
}
@media (max-width: 600px) {
.main-visual .visual-typo {
    top: 30%
}
}
.main-visual .visual-typo span {
    width: 23.7vh;
    height: 5vh;
    background-image: url(../img/main-visual-typo.svg);
    background-size: cover;
    display: inline-block;
    margin-left: 2px;
    margin-bottom: -3px;
}


@media (max-width: 1400px) {
    .main-visual .visual-typo span {
        width: 26.21.29630px;
        height: 10.4.18520px;
        margin-bottom: -3px;
    }
}



@media (max-width: 768px) {
    .main-visual .visual-typo span {
        width: 165px;
        height: 35px;
        margin-bottom: -3px;
    
    }
}

.visual-slide-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.visual-slide-wrap .slide {
    width: 100%;
    height: 100%;
}

.visual-slide-wrap .visual-slide-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.visual-slide-wrap .visual-slide-item .back {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom;
}

@media (max-width: 960px) {
    .visual-slide-wrap .visual-slide-item .back {
        background-position: center;
    }
}

.visual-slide-wrap .visual-slide-item .visual-inner {
    width: 100%;
    max-width: 1248px;
    padding: 0 28px;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%,18.5185vh);
    z-index: 100;
}


@media (max-width: 1400px) {
    .visual-slide-wrap .visual-slide-item .visual-inner {
        transform: translate(-50%,15.7407vh);
    }
}

@media (max-width: 768px) {
    .visual-slide-wrap .visual-slide-item .visual-inner {
        transform: translate(-50%,125px);
    }
}

.visual-slide-wrap .visual-slide-item .txt-wrap {
    margin-bottom: 7.4074vh;
}
.visual-slide-wrap .visual-slide-item .main-statistics{
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    background: #fff;
    width: 50%;
    padding: 45px;
    border-radius: 30px;
}
.visual-slide-wrap .visual-slide-item .main-statistics div{
    text-align: center;
    width: 33.33%;
    border-right: 1px solid #d5d5d5; 
}
.visual-slide-wrap .visual-slide-item .main-statistics div:last-child{
    border-right: none;
    
}
.visual-slide-wrap .visual-slide-item .main-statistics div .t1{
    display: inline-block;
    background: #7dd895;
    border-radius: 30px;
    padding: 5px 10px;
    margin-bottom: 20px;
}
.visual-slide-wrap .visual-slide-item .main-statistics div .t2{
    font-weight: 700;
}


.visual-slide-wrap .visual-slide-item .main-statistics div p{
    font-size: 4vh;
}
@media (max-width: 1024px) {
.visual-slide-wrap .visual-slide-item .main-statistics{
    width: 100%;
    padding: 45px 55px;
}
}
@media (max-width: 768px) {
    .visual-slide-wrap .visual-slide-item .txt-wrap {
        margin-bottom: 30px;
    }

    .visual-slide-wrap .visual-slide-item .main-statistics{
        width: 100%;
        padding: 30px 0;
    }
    .visual-slide-wrap .visual-slide-item .main-statistics div{
        width: 33.33%;
    }
    .visual-slide-wrap .visual-slide-item .main-statistics div .t1{
        border-radius: 30px;
        padding: 5px 10px;
        margin-bottom: 20px;
        font-size: 12px;
    }

    .visual-slide-wrap .visual-slide-item .main-statistics div p{
        font-size: 26px;
    }
    
}

.visual-slide-wrap .visual-slide-item .txt-wrap p {
    font-size: 18px;
    letter-spacing: -0.05em;
    display: inline-block;
    color: #333;
    line-height: 30px;
}

@media (max-width: 768px) {
    .visual-slide-wrap .visual-slide-item .txt-wrap p {
        font-size: 16px;
        display: block;
        line-height: 1.5;
    }
}

.visual-slide-wrap .visual-slide-item .txt-wrap .name {
    font-weight: 700;
}

.visual-slide-wrap .visual-slide-item .txt-wrap .name:before {
    content: "";
    width: 2px;
    height: 22px;
    background-color: rgba(245, 245, 245, 0.5);
    display: inline-block;
    margin: 0 12px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .visual-slide-wrap .visual-slide-item .txt-wrap .name:before {
        display: none;
    }
}

.visual-slide-wrap .slide-control {
    position: absolute;
    right: 54px;
    bottom: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 0;
}

@media (max-width: 1700px) {
    .visual-slide-wrap .slide-control {
        right: 28px;
    }
}

@media (max-width: 768px) {
    .visual-slide-wrap .slide-control {
        width: calc(100% - 56px);
        justify-content: space-between;
    }
}

.visual-slide-wrap .slide-control .count {
    position: absolute;
    bottom: 100%;
    right: 0;
}

.visual-slide-wrap .slide-control .count p {
    font-family: var(--font-gil);
    letter-spacing: 0;
    display: inline-block;
    }

.visual-slide-wrap .slide-control.wh .count p {
    color: #333;
}

.visual-slide-wrap .slide-control .count p.curr {
    font-size: 93px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .visual-slide-wrap .slide-control .count p.curr {
        font-size: 60px;
    }
}

.visual-slide-wrap .slide-control .count p.total {
    font-size: 14px;
    font-weight: 900;
    opacity: .5;
}

.visual-slide-wrap .slide-control .count .slash {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #242424;
    opacity: .5;
    margin: 0 8px 0 20px;
    transform: rotate(22deg);
}

@media (max-width: 768px) {
    .visual-slide-wrap .slide-control .count .slash {
        margin: 0 3px 0 5px;
    }
}

.visual-slide-wrap .slide-control.wh .count .slash {
    background-color: #333;
}

@media (max-width: 768px) {
    .visual-slide-wrap .slide-control .arrow {
        margin-top: -4px;
    }
}

.visual-slide-wrap .slide-control .progress {
    width: 140px;
    height: 2px;
    overflow: hidden;
    background-color: rgba(36, 36, 36, 0.2);
    background-image: linear-gradient(to right, #242424, #242424);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .4s ease-in-out;
}

@media (max-width: 768px) {
    .visual-slide-wrap .slide-control .progress {
        width: 100px;
    }
}

.visual-slide-wrap .slide-control.wh .progress {
    background-color: rgba(245, 245, 245, 0.2);
    background-image: linear-gradient(to right, #F5F5F5, #F5F5F5);
}

.main-visual .sc-wrap {
    position: absolute;
    left: 54px;
    bottom: 0;
}

@media (max-width: 1440px) {
    .main-visual .sc-wrap {
        display: none;
    }
}

.main-visual .sc-wrap p {
    font-family: var(--font-gil);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #333;
    -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(25%);
}

.main-visual .sc-wrap .bar {
    position: relative;
    margin-top: 14px;
    width: 2px;
    height: 6.0185vh;
    background-color: rgba(255,255,255,0.2);
}

.main-visual .sc-wrap .bar:after {
    content: "";
    width: 2px;
    height: 30%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: barMotion 1.2s infinite cubic-bezier(0.555, 0.205, 0.295, 0.975);
            animation: barMotion 1.2s infinite cubic-bezier(0.555, 0.205, 0.295, 0.975);
}

@-webkit-keyframes barMotion {
    0% {top: 0;}
    100% {top: 6.0185vh;}
}

@keyframes barMotion {
    0% {top: 0;}
    100% {top: 6.0185vh;}
}

.rolling-item{
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.rolling-item h3{
    font-size: 40px;
    color: #00aa2d;
    font-weight: 700;
    text-align: left !important;
}

.rolling-item p{
    font-size: 18px;
    text-align: left !important;
    margin: 25px 0 !important;
    line-height: 30px !important;
}
.rolling-item span{
    font-size: 14px;
    opacity: 0.5;
    text-align: left !important;
    display: inline-block;
}

.rolling-item .rolling-txt{
    width: 30%
}

.rolling-item .rolling-img{
    width: 70%
}
.reco{
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #fafafa !important;
    border-radius: 30px !important;
    padding: 40px 50px !important;
    margin-top: 30px !important;
}
.reco_img{width: 10%;}
.reco_h4{width: 20%;}
.reco_p{width: 70%;}
.reco_p p{
    display: flex;
    align-items: flex-start;
}
.reco_p p span{
    display: block;
    text-align: left !important;
}

.reco_p i{color:#00aa2d; display: inline-block; margin-right: 10px;}


.reco img{
    width: 100% !important;
}
.reco h4{
    text-align: left !important;
    font-size: 26px;
    line-height: 36px !important;
    color: #00aa2d;
    font-weight: 700;
    padding-left: 0;
}
.reco p{
    font-size: 18px;
    text-align: left !important;
    padding: 7px 0 7px 30px;
}
.reco_p p span .spanin{
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
}

.rolling-item .rolling-txt{
    width: 30%
}

.rolling-item .rolling-img{
    width: 70%
}


@media (max-width: 768px) {
    .rolling-item{
        flex-flow: column wrap !important;
        align-items: center !important;
    }
    .rolling-item .rolling-txt{
        width: 100%;
        text-align: center;
    }
    
    .rolling-item .rolling-img{
        width: 100%
    }
    .rolling-item h3{
        font-size: 22px;
        text-align: center !important;
    }
    .rolling-item p{
        font-size: 16px;
        line-height: 26px !important;
        margin: 25px 0 15px 0 !important;
        text-align: center !important;
    }

    .rolling-item span{
        font-size: 12px;
        text-align: center !important;
        margin-bottom: 30px;
        opacity: 0.5 !important;
    }
    .reco{
        flex-flow: row wrap !important;
        padding: 30px !important;
    }
    .reco_img{width:20%;}
    .reco_h4{width: 80%;}
    .reco_p{width: 100%; margin-top: 30px;}
    .reco h4{
        text-align: left !important;
        font-size: 20px;
        line-height: 26px !important;
        color: #00aa2d;
        font-weight: 700;
        padding-left: 30px;
    }
    .reco p{
        font-size: 14px;
        text-align: left !important;
        padding: 10px 0;
        line-height: 20px;
    }
    .reco_p i{margin-top: 5px;}

    .reco_p p span .spanin{
        font-size: 12px;
        margin-top: 5px;
    }

}



.main-why {
    padding: 150px 0;
    position: relative;
    background-color:#fff;
    background-repeat: no-repeat;
    background-position: right;
}


@media (max-width: 1920px) {
    .main-why {
        background-position: 50vw;
    }
}

@media (max-width: 960px) {
    .main-why {
        background-position: 20vw;
    }
}

@media (max-width: 768px) {
    .main-why {
        padding: 100px 0;
        background-size: 768px;
        background-position: 20vw bottom;
    }
}

.main-why *:not(.ir_su) {
    position: relative;
}

.main-why .main-tit {z-index: 100; text-align: center;}
.main-why .main-subtit { text-align: center;}



.main-structure {
    padding: 150px 0;
    background-image: url(../img/sec02_bg.jpg);
    background-size: cover;
}

@media (max-width: 768px) {
    .main-structure {
        padding: 100px 0;
    }
}

.main-structure *:not(.ir_su) {
    position: relative;
    text-align: center;
}

.main-flex{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.main-flex2{
    display: flex;
    flex-flow: row wrap;
    justify-content:flex-start;
}
@media (max-width: 768px) {
    .main-flex2{
        display: flex;
        flex-flow: column wrap;
        text-align: left !important;
    }
}
.main-flex2 .contact-txt p{
    line-height: 28px;
    color: #9c9c9c;
    margin-left: 30px;
    text-align: left;
}

@media (max-width: 768px) {
    .main-flex{
        display: flex;
        flex-flow: column wrap;
    }
    .main-flex2 .contact-txt p{
        line-height: 24px;
        color: #9c9c9c;
        margin-left: 0;
        font-size: 14px;
    }
    .main-flex2 .contact-txt{
        margin-top: 30px;
    }
}

.main-summary {
    padding: 150px 0;
    background-size: cover;
    overflow: hidden;
    position: relative;
    background: #fff;
    
}
.main-summary form {
    margin-top: 100px;
}

@media (max-width: 768px) {
    .main-summary {
        text-align: center;
    }
    .main-summary form {
        margin-top: 50px;
    }
}
.main-summary *:not(.rolling-list) {
    position: relative;
    z-index: 100;
}

.main-summary .main-summary-txt{
    font-size: 18px;
    line-height: 30px;
    width: 50%;
}
@media (max-width: 768px) {
    .main-summary .main-summary-txt{
        font-size: 16px;
        line-height: 26px;
    }
}
.main-summary .main-summary-txt span{
    font-weight: 700;
    color: #00aa2d;
 }
 .main-summary .sec03_con{
    margin-top: 100px;
 }
 .main-summary .sec03_img{
    width: 40%;
 }
 .main-summary .sec03_circle{
    display: flex;
    flex-flow: row nowrap;
 }
 .main-summary .sec03_circle div{
    text-align: center;
    width: 215px;
    height: 215px;
    border-radius: 100%;
    border: 1px solid #00aa2d;
    line-height: 22px;
    padding:87px 0 90px 0;
    color: #00aa2d;
    font-weight: 700;
    margin-left: -15px;
 }
 @media (max-width: 1024px) {
 .main-summary .sec03_circle{
    margin-top: 30px;
 }
 .main-summary .main-summary-txt{
    margin-top: 30px;
}
}
@media (max-width: 768px) {
    .main-summary {
        padding: 100px 0 50px 0;
    }
    
    .main-summary .main-summary-txt{
        width: 100%;
    }
    .main-summary .sec03_img{
        width: 70%;
     }
     .main-summary .sec03_con{
        margin-top: 50px;
     }
   
     .main-summary .sec03_circle div{
        width: 130px;
        height: 130px;
        line-height: 16px;
        padding: 52px 0;
        font-weight: 700;
        margin-left: -15px;
        font-size: 12px;
    
     }
}
@media (max-width: 400px) {
    .main-summary .main-summary-txt {
        font-size: 14px;
        line-height: 22px;
    }
    .main-tit {
        font-size: 26px;
        line-height: 34px;
    }
    .main-summary .sec03_circle div{
        width: 120px;
        height: 120px;
        line-height: 14px;
        font-size: 10px;
    
     }

} 

.main-summary *:not(.rolling-list) {
    position: relative;
    z-index: 100;
}



.main-summary .rolling-list {
    position: absolute;
    right: 0;
    top: -180px;
    display: flex;
    gap: 24px;
    z-index: 50;
}

@media (max-width: 1700px) {
    .main-summary .rolling-list {
        right: 28px;
    }
}

@media (max-width: 960px) {
    .main-summary .rolling-list {
        right: auto;
        left: 50%;
    }
}

@media (max-width: 768px) {
    .main-summary .rolling-list {
        gap: 15px;
    }
}

.main-summary .rolling-list .rolling-col:nth-child(even) {
    margin-top: -90px;
}

.main-summary .rolling-list .rolling-item {
    width: 158px;
    height: 146px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 12px;
}

@media (max-width: 768px) {
    .main-summary .rolling-list .rolling-item {
        width: 126px;
        height: 107px;
    }
}

.main-summary .rolling-list .rolling-item + .rolling-item {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .main-summary .rolling-list .rolling-item + .rolling-item {
        margin-top: 10px;
    }
}

.main-summary .rolling-list .rolling-item img {
    opacity: 0.8;
    max-width: 80%;
    max-height: 50px;
}

.main-summary .rolling-list .rolling-item p {
    font-size: 14px;
    font-weight: 700;
    color: #DEDCDC;
    text-align: center;
    line-height: 1.3;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .main-summary .rolling-list .rolling-item p {
        margin-top: 12px;
        font-size: 12px;
    }
}

.rolling {
    padding-bottom: 24px;
}

@media (max-width: 768px) {
    .rolling {
        padding-bottom: 10px;
    }
}

.rolling.original {
	animation: rollingtop1 70s linear infinite;
}
.rolling.clone {
	animation: rollingtop2 70s linear infinite;
}

@keyframes rollingtop1 {
	0% { transform: translateY(0); }
	50% { transform: translateY(-100%); }
	50.01% { transform: translateY(100%); }
	100% { transform: translateY(0); }
}

@keyframes rollingtop2 {
	0% { transition: translateY(0); }
	100% { transform: translateY(-200%); }
}
.main-issue *:not(.ir_su) {
    position: relative;
    text-align: center;
}
.main-issue {
    padding: 150px 0 0 0;
    background: #fffaee;
}

.main-issue .refer{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 100px;
    gap: 10px;
}
@media (max-width: 768px) {
    .main-issue .refer{
        margin-top: 50px;
    }
}
.main-issue .refer div{
    cursor: pointer;
}
.main-issue .move_txt h2 {
    font-size: 15vh;
    font-weight: 900;
    color: #fff0;
}

.main-issue .move_txt h2:before {
    position: absolute;
    content: attr(title);
    -webkit-text-stroke: 2px #00aa2d;
    left: 70%;
    top: 0;
    width: max-content;
    opacity: 0.2;
    animation: TxtFlow 10s cubic-bezier(1, 1, 1, 1);
    animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

.main-issue .move_txt h2:after {
    position: absolute;
    content: attr(title);
    -webkit-text-stroke: 2px #00aa2d;
    right: 70%;
    top: 0;
    width: max-content;
    opacity: 0.2;
    animation: TxtFlow 10s cubic-bezier(1, 1, 1, 1);
    animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}


@keyframes TxtFlow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-150%);
    }
}


@media (max-width: 768px) {
    .main-issue {
        padding: 100px 0 0 0;
        background-position: 70%;
    }
    .main-issue .refer div{
       width: 47%;
    
    }
}

.selected-option {
    color: #222 !important;
}



.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 고정 위치 */
    top: 50%; /* 화면 세로 중앙 정렬을 위해 top 위치 조정 */
    left: 50%; /* 화면 가로 중앙 정렬을 위해 left 위치 조정 */
    transform: translate(-50%, -50%); /* 세로와 가로 중앙 정렬 */
    z-index: 9999; /* 다른 요소들보다 위에 나타나도록 설정 */
    background-color: rgba(0, 0, 0, 0.5); /* 배경을 반투명한 검은색으로 설정 */
    padding: 20px; /* 내부 여백 */
    border-radius: 10px; /* 모서리 둥글게 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* 그림자 효과 추가 */
    width: 100%; /* 최대 너비 설정 */
    height: 100vh;
}

.modal-content {
    position: relative;
    background-color: #fff;
    padding: 50px 30px;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
}

.modal-content  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

.close-btn {
    cursor: pointer; /* 포인터 커서로 변경 */
    position: absolute; /* 위치 설정 */
    top: -30px; /* 상단 여백 */
    right: 0; /* 우측 여백 */
    font-size: 30px; /* 아이콘 크기 설정 */
    color: #fff; /* 아이콘 색상 설정 */
}
.modal-txt{
    padding: 30px;
    background: #efefef;
}
.modal-txt h3{
    font-size: 18px;
    margin: 30px 0 10px 0;
}

.modal-txt h3:first-child{
    margin-top: 0;
}

.modal-txt p{
    font-size: 14px;
    line-height: 20px;
}

.button-wrap{
    text-align: center;
    margin: 0 auto;
    background: #444;
    width: 40%;
    padding: 20px 0;
    margin-top: 30px;
    cursor: pointer;;
}

.button-wrap button{
    color: #fff;
}

@media (max-width: 768px) {
   
    .modal-content {
        position: relative;
        background-color: #fff;
        padding: 20px;
        width: 100%;
    }
    .modal-content  h2 {
        font-size:18px;
        margin-bottom: 15px;
    }

    .modal-txt{
        padding: 20px;
        background: #efefef;
    }

    .modal-txt h3{
        font-size: 14px;
        margin: 20px 0 10px 0
    }
    
    .modal-txt p{
        font-size: 12px;
    }

    .button-wrap{
        width: 70%;
        padding: 10px 0;
        margin-top: 20px;
    }
}
/* 모달 스타일 */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-container {
    background-color: #fefefe;
    position: fixed;
    top: 50%; /* 화면 세로 중앙으로 이동 */
    left: 50%; /* 화면 가로 중앙으로 이동 */
    transform: translate(-50%, -50%); /* 모달 창을 가운데 정렬 */
    padding: 5%;
    border: 1px solid #888;
    width: 80%;
    max-width: 1000px;
    border-radius: 30px;
}
.close-modal-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: relative;

}

.close-modal-button:hover,
.close-modal-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.refer-con{
    text-align: center;
}
.refer-con .refer-con-tit-txt{
    font-size: 14px;
    color: #00aa2d;

}
.refer-con h3{
    font-size: 35px;
    font-weight: 700;
    margin: 30px 0 40px 0;

}

.refer-con .refer-con-tit h2{
    font-size: 40px;
    color: #00aa2d;
    font-weight: 700;
    background: #eaf6ed;
    padding: 35px 0;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.refer-con .refer-con-txt{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    text-align: left;
    padding: 30px 0;
}
.refer-con .refer-con-txt p{
    margin-top: 20px;
    line-height: 24px;
}
.refer-con .refer-con-txt .refer-con-p1 p{
    font-weight: 700;
}

.refer-con .refer-con-txt .refer-con-p2{
    margin-left: 30px;
}


.refer-con .refer-con-txt span{
    color: #00aa2d;
    font-weight: 700;
    
}


.refer-con-tit2 {
    text-align: center; /* 제목 가운데 정렬 */
    position: relative;
    width: 100%;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    margin: 40px 0 30px 0;
}

.refer-con-tit2::before,
.refer-con-tit2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 70%; /* 가로줄 길이 */
    height: 1px; /* 가로줄 높이 */
    background-color: #000; /* 가로줄 색상 */
}

.refer-con-tit2::before {
    left: 0; /* 왼쪽 가로줄 위치 */
    transform: translateX(-50%);
}

.refer-con-tit2::after {
    right: 0; /* 오른쪽 가로줄 위치 */
    transform: translateX(50%);
}

.refer-con .refer-con-action{
    display: flex;
    flex-flow: row nowrap;
    justify-content:center
    ;
}
.refer-con .refer-con-action div{
    background: #00aa2d;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    padding: 20px 0;
    margin: 30px;
    display: flex;
    justify-content: center; /* 내용 가운데 정렬 */
    align-items: center; /* 내용 가운데 정렬 */
    margin-bottom: 30px;
}
.refer-con .refer-con-action div p{
    color: #fff;
    font-size: 16px;
    line-height: 24px;
}


@media (max-width: 1000px) {
    .modal-container {
        padding: 10% 7%;
    }
    .refer-con .refer-con-tit-txt{
        font-size: 14px;
    }
    .refer-con h3{
        font-size:24px;
        margin: 20px 0 30px 0;

    }
    .refer-con .refer-con-tit h2{
        font-size: 30px;
        padding: 25px 0;
    }
    .refer-con .refer-con-txt .refer-con-p2{
        margin-left: 20px;
    }
    .refer-con-tit2 {
        font-size: 16px;
    }

    .refer-con .refer-con-action div{
        border-radius: 50%;
        width: 230px;
        height: 230px;
        padding: 20px 0;
        display: flex;
        justify-content: center; /* 내용 가운데 정렬 */
        align-items: center; /* 내용 가운데 정렬 */
        margin-bottom: 50px;
    }
    .refer-con .refer-con-action div p{
        color: #fff;
        font-size: 14px;
        line-height: 24px;
    }
}

@media (max-width: 768px) {
    .modal-container {
        padding: 15% 7%;
        width: 90%;
    }
    .refer-con .refer-con-tit-txt{
        font-size: 12px;
    }
    .refer-con h3{
        font-size:20px;
        margin: 10px 0 20px 0;

    }
    .refer-con-tit2::before,
    .refer-con-tit2::after {
        width: 60%; /* 가로줄 길이 */
    }
    .refer-con .refer-con-tit h2{
        font-size: 20px;
        padding: 25px 0;
        border-radius: 10px;
    }
    .refer-con .refer-con-tit h2 img{
       width: 7%;
    }
    .refer-con .refer-con-txt{
        padding: 10px 0;
    }
    .refer-con .refer-con-txt p{
        font-size: 12px;
        margin-left: 10px;
        margin-top: 10px;
        line-height: 20px;
    }
    .refer-con .refer-con-txt .refer-con-p2{
        margin-left: 0;
    }
    .refer-con-tit2 {
        font-size: 14px;
        margin: 30px 0 20px 0;
    }
    
    .refer-con .refer-con-action div{
        width: 100px;
        height: 96px;
        padding: 0;
        margin: 0 2px 30px 0;
        box-sizing: border-box;
    }
    .refer-con .refer-con-action div p {
        font-size: 12px;
        line-height: 16px;
        border-radius: 50%;
        width: 90px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


.floating-form {
    position: fixed;
    right: 20px;
    bottom: 120px;
    width: 300px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 4001;
}

.floating-form-content {
    padding: 40px 15px;
}

.floating-form-content h3 {
    margin-top: 0;
    font-size: 20px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
}

.floating-form-content label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
}
.floating-form-content label .star {
    color: #00aa2d;
}

.floating-form-content input[type="text"],
.floating-form-content input[type="email"],
.floating-form-content input[type="tel"],
.floating-form-content select,
.floating-form-content textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background: #efefef;
    border: none;
    font-size: 14px;
    color: #585858 !important;
}

.floating-form-content input[type="checkbox"] {
    display: none;
}

.floating-form-content a {
    display: inline-block;
    margin-top: -10px;
    margin-bottom: 10px;
    color: #00aa2d;
    text-decoration: none;
}

.floating-form-content button {
    width: 100%;
    padding: 10px;
    background-color: #00aa2d;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

/* 체크박스 아이콘 색상 변경 */
#agree-label .icon-checked {
    color: #00aa2d;
}

@media (max-width: 1024px) {
    .floating-form {
        display: none;
    }
}

.util-wrap li {
    cursor: pointer;
}
.icon-checked {
    color: green; /* 원하는 색상으로 변경 */
}
@media (max-width: 768px) {
    .swiper-slide .rolling-img {
        position: relative;
        top: 0;
        left: 0;
        width: 100%; /* 부모 요소에 꽉 차도록 설정 */
        height: 100%; /* 부모 요소에 꽉 차도록 설정 */
        background-size: cover; /* 배경 이미지가 요소를 가득 채우도록 설정 */
        background-position: center; /* 배경 이미지의 위치를 중앙으로 정렬 */
        z-index: 0; /* 다른 요소 위에 배치하기 위해 z-index 값 조정 */
    }
    .mo_center{
        text-align: center !important;
    }
}


/* 레이어 팝업 스타일 */
.loading-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

.loading-content p {
    margin: 0;
}

.loading-popup.active {
    display: block;
}

.footer-bottom a{
    font-size: 12px;
    margin-left: 10px;
    opacity: 0.8;
}

.br_lh{
    line-height: 26px;
    margin-top: -2px;
}
@media (max-width: 1024px) {
    .br_lh{
        line-height: 20px;
        margin-top: 0;
    }
}