@charset "utf-8";

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */




/* 아트와 default */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
    color: #333;
}
.en {
    font-family: "Montserrat", sans-serif;
}
.dn {
    display: none !important;}
p.title {
    width: fit-content;
    font-size: 52px;
    font-weight: 500;
    margin: 0 auto;
    padding-bottom: 30px;
    /* border-bottom: 3px solid var(--lightGreen); */
    position: relative;
}
p.title::after {
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    background-color: var(--lightGreen);
    position: absolute;
    bottom: 0;
    left: 25%;
}
@media screen and (max-width: 650px) {
    p.title {
        font-size: 4vw;
    }
    p.title::after {
        width: 50%;
        height: 2px;
        background-color: var(--lightGreen);
        position: absolute;
        bottom: 0;
        left: 25%;
    }
    
}
:root {
    --lightGreen: #42C17B;
    --green: #339550;
    --white: #fff;
}


/* ---------------헤더 */
header {
    width: 100%;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
header a.logo {
    width: 172px;
    height: 30px;
    background: url('../img/0_header/headerlogo_wh.svg') no-repeat center / contain;
    background-repeat: no-repeat;

}
header.on a.logo {
    width: 172px;
    height: 30px;
    background: url('../img/0_header/headerLogoBlack.png') no-repeat center / contain;

}
header 
/* header .headerBlack,
header .headerWhite {
    position: absolute;
    transition: opacity 500ms, visibility 500ms;
}
header .headerWhite {
    opacity: 1;
    visibility: visible;
}
header .headerBlack {
    opacity: 0;
    visibility: hidden;
}
header.on .headerWhite {
    opacity: 0;
    visibility: hidden;
}
header.on .headerBlack {
    opacity: 1;
    visibility: visible;
} */
header.on {
    color: #333;
}
header.on {
    color: #333;
    background: #fff;
    box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.15);
}
header.on ul .rental {
    border: 2px solid #333;
    cursor: pointer;
}

header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}
header a.logo {

}
header ul {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 18px;
    font-weight: 500;
}
header ul li {

}
header ul .rental {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 35px;
    border-radius: 5px;
    border: 2px solid #FFF;
    cursor: pointer;
    transition: background-color 500ms;
}
header ul .rental.redBtn{ border-color: #DF3A6D; background-color: #DF3A6D; color: #fff; }


/* header tablet */
@media screen and (max-width: 1250px) {
    header .inner {
        width: 90%;
        margin: 0 auto;
    }
    header ul {
        gap: 20px;
    }
}

@media screen and (max-width: 1050px) {
    header ul {
        font-size: 2vw;
        gap: 25px;
    }
    header .inner {
        flex-direction: column;
        gap: 20px;
    }
    header img {
        width: 13vw;
    }
    header ul .rental {
        padding: 0.6vw 3vw;
    }

    header.on a.logo {
        width: 16vw;
        height: 2.7vw;
    }
    header a.logo {
        width: 16vw;
        height: 2.7vw;
    }
    
}
@media screen and (max-width: 850px) {
    header ul li {
        width: calc((100%/4) - 30px);
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    header ul {
        font-size: 2.5vw;
        gap: 20px;
        flex-wrap: wrap;
        order: 2;
    }
    /* header ul .rental {
        display: none;
    } */
    header ul {
        align-items: center;
        justify-content: center;
    }
    header ul .rental{ width: 100%; }


}

@media screen and (max-width: 650px) {
        header .inner {
            flex-direction: column;
            gap: 20px;
            padding: 10px 0;
            width: auto;
        }
        header img {
            width: 25vw;
        }
        /* header ul .rental {
            display: none;
        } */
        header ul {
            font-size: 14px;
            gap: 10px;
        }
        header.on a.logo {
            width: 122px;
            height: 26px;
        }
        header a.logo {
            width: 122px;
            height: 26px;
        }
        header ul li{ width: calc((100% / 4) - 12px) ; }
        header ul .rental{ padding: .6vw 2vw; }
        
    
    }





/* ---------------메인 */
main {

}

/* 섹션1 main_visual */
section.main-visual {
    width: 100%;
    /* height: 100vh; */
    background: url('../img/1_main-visual/main_bg.png') no-repeat center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 230px 0 240px;
}
.main-visual .inner {
}
.main-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #fff;
    border-radius: 10px;
    gap: 100px;
    padding: 63px 0;
}
ul.main-left {
    font-size: 22px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.main-left li.main-title {
    width: fit-content;
    padding: 13px 40px;
    border: 2px solid #fff;
    border-radius: 5px;
}
.main-left li.main-title p {

}
.main-left li.main-title p strong {
    font-size: 25px;
    font-weight: 700;
}
.main-left li.main-titleSub {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.main-left li.main-titleSub strong {
    width: fit-content;
    font-size: 25px;
    font-weight: 700;
    border-bottom: 2px solid #fff;
    padding-bottom: 5px;
}
.main-left li.main-titleSub span {
    line-height: 170%;
    letter-spacing: -0.5px;
    
}
ul.main-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
ul.main-right li.main-rental {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 50px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 500ms;
}
ul.main-right li.main-rental p {
    font-size: 20px;
    font-weight: 500;
    color: #42C17B;
}
@media screen and (max-width: 1250px) {
    .main-container {
        width: 90%;
        margin: 0 auto;
        gap: 60px;
    }
    section.main-visual {
        padding: 22vw 0 10vw;
    }
        li.main-logo img {
        width: 20vw;
    }
    .main-left li.main-title p {
        font-size: 18px;
    }
    .main-left li.main-title p strong {
        font-size: 20px;
    }
    .main-left li.main-titleSub strong {
        font-size: 18px;
    }
    .main-left li.main-titleSub span {
        font-size: 18px;
    }
    li.main-botbox {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    li.main-botbox img {
        width: 25vw;
    }
}

@media screen and (max-width: 1050px) {
    .main-container {
        width: 70%;
        margin: 0 auto;
        flex-direction: column;
        padding: 6.28vw 0;
        gap: 30px;
        }
    ul.main-left {
        font-size: 2vw;
        justify-content: center;
        align-items: center;
        gap: 30px;

    }
    li.main-logo img {
        width: 25vw;
    }
    .main-left li.main-title p strong {
        font-size: 2.8vw;
    }
    .main-left li.main-titleSub strong {
        font-size: 2.7vw;
    }
    .main-left li.main-titleSub {
        align-items: center;
    }
    .main-botbox img {
        width: 28vw;
        margin: 0 auto;
    }
    li.main-botbox {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    ul.main-right li.main-rental p {
        font-size: 2.4vw;
    }
    ul.main-right li.main-rental {
        padding: 2vw 5vw;
    }
    .main-rental img {
        width: 3vw;
    }
    .main-left li.main-titleSub span {
        font-size: 2.3vw;
    }
    .main-left li.main-title p {
        font-size: 2.3vw;
    }
}
@media screen and (max-width: 1050px) {
    .main-container {
        /* width: 100%; */
    }
}

@media screen and (max-width: 650px) {
    .main-container {
        width: 100%;
    }

    li.main-logo {
        display: none;
    }
    .main-left li.main-title p {
        font-size: 5vw;
    }
    .main-left li.main-title p strong {
        font-size: 5vw;
    }
    .main-left li.main-titleSub strong {
        font-size: 4vw;
    }
    .main-left li.main-titleSub span {
        font-size: 3.5vw;
        text-align: center;
    }
    .main-left li.main-title {
        padding: 10px 25px;
        border: 1px solid #fff;
    }
    li.main-botbox img {
        width: 60vw;
    }
    ul.main-right li.main-rental {
        padding: 3vw 0;
    }
    ul.main-right li.main-rental p {
        font-size: 3.5vw;
    }
    .main-rental img {
        width: 5vw;
    }
    .main-container {
        padding-top: 90px;
        border: none;
        gap: 30px;
    }
    ul.main-left {
        gap: 25px;
    }
    ul.main-right {
        gap: 20px;
    }
}


/* 섹션2 banner */
section.banner {
    width: 100%;
    background: url('../img/2_banner/bg.png') no-repeat center / cover;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 150px 0;

}
.banner .inner {
}
.bannerContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 52px;
}
.bannerContainer .bn1 {
    padding-bottom: 5px;
    border-bottom: 3px solid #fff;
}
.bannerContainer .bn2 {
    padding-top: 30px;
}

    @media screen and (max-width: 1050px) {
        .bannerContainer {
            font-size: 52px;
        }
        .bannerContainer .bn1 {
            border-bottom: 2px solid #fff;

        }
    }
    section.banner {
        padding: 10vw 0;
    }
    @media screen and (max-width: 720px) {
        section.banner {
            background: url('../img/2_banner/bg_720.png') no-repeat center / cover;
            
        }

    @media screen and (max-width: 650px) {
    }
    .bannerContainer {
        font-size: 4vw;

    }


}
.swiper-wrapper{ transition-timing-function: linear; }

/* 섹션3 partner */
section.partner {
    padding: 80px 0 100px; overflow: hidden;
    box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, 0.20);
}
.partnerSwiper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.partnerWrapper {
    align-items: center;
}
.partnerSlide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.partnerSlide img {
    /* width: 10vw; */
    max-width: 100%;
    max-height: 100%;
}
.partner p.title {
    color: var(--lightGreen);
    margin-bottom: 5vw;
}

@media screen and (max-width: 1250px) { 
    .partner p.title {
        font-size: 4vw;
    }
    section.partner {
        padding: 5vw 0 6vw;
    }

    
}
@media screen and (max-width: 1000px) { 
    .partnerSlide img {
        width: 60%;
    }
    section.partner {
        padding: 5vw 0 6vw;
    }
    
    
}

@media screen and (max-width: 650px) { 
    .partner p.title {
        font-size: 4vw;
    }
    .partnerSlide img {
        width: 50%;
    }
    .partnerSlide {
        max-width: 150px;
}    
    section.partner {
        padding: 30px 0 50px;
    
    }
    .partner p.title {
        font-size: 4vw;
        color: var(--lightGreen);
        margin-bottom: 30px;
    }
}
/* 섹션4 story */
section.story {
    padding: 100px 0 0px; overflow: hidden;
}
.story p.title {
    z-index: 2;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 50px;
    padding-bottom: none;

}
.storyTitle {
}
.story p.title span.circle1 {
    width: 176px;
    height: 176px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #42C17B;
    border-radius: 50%;
    color: #FFF;
}
.story span.circle2::after {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 34px;
    right: -17px;
    z-index: -1;
    display: inline-block;
    background-color: var(--lightGreen);
}
ul.benefit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 80px;
}
ul.benefit li {
    display: flex;
    flex-direction: column;
}
p.benefitTitle {
    position: relative;
    font-size: 32px;
    font-weight: 500;
}
.benefit > li {
    width: 
}
p.benefitTitle::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    top: -11px;
    left: -12px;
    z-index: -1;
    display: inline-block;
    background-color: var(--lightGreen);
}

p.benefitText {
    font-size: 22px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--lightGreen);
    margin: 10px 0 0 40px;
}
.storyContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.storyContainer li {
    width: 100%;
    display: flex;
    gap: 100px;
    align-items: center;
    justify-content: center;
}
.storyBox {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.storyBox1,  .storyBox3 {
    flex-grow: 1;
    padding-left: 70px;

}
.storyBox2 {
    position: relative;
    left:150px;
    flex-grow: 0;
}
p.storyNumTitle {
    font-size: 32px;
    font-weight: 500;
    color: var(--lightGreen);
    border-bottom: 2px solid var(--lightGreen);
    padding: 0 0px 10px 0;
    position: relative;
    display: flex;
}
p.storyNumTitle::before {
    content: url('../img/4_story/stick.svg');
    margin-right: 10px;
}
p.storyNumTitle::after {
    content: url('../img/4_story/circle.png');
    position: absolute;
    top: -30px;
    right: -85px;
}
p.storyBoxSubTitle {
    font-size: 20px;
    font-weight: 500;
    padding: 25px 0 15px;
}
.stick {
    display: flex;
}
/* .stick .NumStick {
    width: 3px;
    height: 24px;
    background: var(--lightGreen);
} */
p.storyBoxText {
    font-size: 20px;
    line-height: 170%;
    letter-spacing: -0.5px;
}
p.storyCustomer {
    padding-top: 15px;
    color: #42C17B;
}
.storyBottomBg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 150px;
}

@media screen and (max-width: 1250px) {
        .story p.title {
            font-size: 4.5vw;
        }
        p.storyNumTitle::after {
            transform: scale(0.8); /* 이미지 크기를 80%로 줄임 */
        }
        .story span.circle2::after {
            width: 5vw;
            top: 31px;
            height: 5vw;
            right: -20px;
        }

    }
@media (max-width: 1000px) {
    .story p.title span.circle1 {
        width: 15vw;
        height: 15vw;
        }

    p.benefitTitle {
        font-size: 3vw;
    }
    p.benefitText {
        font-size: 2vw;
    }
    p.benefitTitle::before {
        width: 4vw;
        height: 4vw;
    }
    .storyContainer li {
        flex-direction: column;
        gap: 40px;
    }
    .storyContainer {
        gap: 60px;
    }
    p.storyNumTitle::before {
        position: absolute;
        top: 3px;
        left: -10px;
    }
    .storyContainer li img {
        width: 35vw;
    }
    p.storyNumTitle {
        font-size: 3vw;
    }
    p.storyNumTitle::before {
        position: absolute;
        top: 1px;
        left: -10px;
        transform: scale(0.8);
    }
    p.storyNumTitle::after {
        transform: scale(0.5); /* 이미지 크기를 80%로 줄임 */
    }
    p.storyNumTitle::after {
        top: -45px;
    }
    .storyBox {
        order: 1;
    }
    p.storyBoxSubTitle {
        font-size: 2.5vw;
    }
    p.storyBoxText {
        font-size: 2vw;
    }
    p.storyCustomer {
        font-size: 2vw;
    }
    .storyBox2 {
        position: relative;
        left: 0px;
        flex-grow: 0;
    }
    .storyBottomBg {
        padding-top: 12vw;
    }
    .storyBottomBg img {
        width: 100%;
        /* width: 50vw; */
    }
    
}


@media (max-width: 720px) {
    ul.benefit {
        align-items: center;
        justify-content: center;
        padding: 12vw 0;
        gap: 3vw;
    }
    p.benefitText {
        font-size: 3.3vw;
    }
    p.benefitText {
        margin: 2vw 0 0 0;
        font-size: 3vw;
    }
    
    .storyContainer li img {
        width: 35vw;
    }
    .storyBox {
        order: 1;
    }

    p.storyBoxText {
        font-size: 14px;
    }
    p.storyCustomer {
        font-size: 14px;
    }
    p.storyNumTitle {
        font-size: 18px;
    }
    p.storyBoxSubTitle {
        font-size: 16px;
    }
    p.storyNumTitle::before {
        top: -2px;
        left: -10px;
        transform: scale(-0.6);
    }

}

    






/* 섹션5 intro */
section.intro {
    width: 100%;
    background: url('../img/5_intro/1.png') no-repeat center / cover;
    padding: 0 0 150px;
}
.intro p.title {
    color: #fff;
    border-color: #fff;
    padding-top: 100px;
    margin-bottom: 40px;
}
.intro p.title::after {
    background-color: #fff;
}
.introContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding-bottom: 40%;
    margin: 0 auto;
    /* height: 40vw; */
}
.introContainer iframe {
    width: 100%;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow: 4px 4px 7px 5px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1250px) { 
    section.intro {
        background: url('../img/5_intro/1.png') no-repeat center / cover;
    }
    
    .intro p.title {
        font-size: 4vw;
    }
}
@media screen and (max-width: 650px) { 
    .intro p.title {
        color: #fff;
        border-color: #fff;
        padding-top: 50px;
        margin-bottom: 28px;
        font-size: 4vw;
        
    }
    .introContainer {
        padding-bottom: 55%;
    }

    section.intro {
        padding: 0 0 100px;
    }    
}
@media screen and (max-width: 1200px) { 
    .introContainer {
        padding-bottom: 50%;
    }
    
}

/* 섹션6 service */
section.service {
    padding: 150px 0;
    color: #fff;
}
.service p.title {
    color: var(--lightGreen);
}
.service .serviceSubTitle {
    color: #909090;
    text-align: center;
    margin-top: 30px;
    font-size: 24px;
}
ul.serviceContainer {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    gap: 6px;
}
ul.serviceContainer li.serviceList {
    background: var(--lightGreen);
    padding: 50px 35px;
    border-radius: 10px;
    gap: 2vw;
}
.service2::after {
}
.serviceContent {
    font-weight: 500;
    position: relative;
}
.serviceIcon {
    position: absolute;
    top: -10px;
    right: 0px;
}
.serviceContent p.serviceListTitle {
}
.serviceContent p.serviceListSubTitle {
    padding: 1vw 0 1vw;
    font-size: 24px;
}
.serviceContent p.serviceText {
    font-size: 18px;
    line-height: 170%; /* 30.6px */
    letter-spacing: -0.5px;
    font-weight: 400;
}
.serviceContent1 {
    max-width: 304px;
    width: 100%;
}
li.service1 {
    width: 100%;
    /* margin-bottom: 5px; */
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.serviceBotbox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    
    
}
.serviceBotbox.serviceBotbox1 img {
    width: 100%;
}
ul.serviceBotbox li {
    display: flex;
}
.serviceBotbox1 {
}
li.service2,
li.service3,
li.service4 {
    width: calc((100% / 3) - 4px);
}
ul.serviceContainer li.service3 {
    /* padding: 50px 45px 80px; */
}

@media screen and (max-width: 1250px) {
    section.service {
        padding: 12vw 0 0;
    }
    
    li.service2, li.service3, li.service4 {
        max-width: 400px;
        width: calc((100% / 3) - 5px);
    }
    .serviceContent p.serviceText {
        font-size: 16px;
    }
    .serviceContent p.serviceListSubTitle {
        /* font-size: 2vw; */
    }
    .serviceContent p.serviceText {
        /* font-size: 1.5vw; */
    }
    .serviceContent p.serviceListTitle {
        /* font-size: 1.5vw; */
    }
    .service1 br {
        display: none;
    }
    .serviceList img {
        width: 4.5vw;
    }
    .serviceIcon {
        right: -10px;
    }
    ul.serviceBotbox li {
    }
}

@media screen and (max-width: 1000px) {
    .service .serviceSubTitle {
        font-size: 2vw;
    }
    ul.serviceBotbox {
        gap: 12vw;
    }

    ul.serviceContainer li.serviceList {
        display: flex;
        flex-direction: column;
        padding: 40px 35px;
    }   
    ul.serviceBotbox {
        padding-left: 0;
    }
    .serviceContent1 {
        max-width: 100%;
        /* width: 100%; */
    }
    .serviceContent p.serviceListSubTitle {
        font-size: 2vw;
        
    }
    .serviceContent p.serviceText {
        font-size: 1.6vw;
    }
    

}


@media screen and (max-width: 720px) {
    .serviceContent p.serviceListTitle {
        font-size: 3vw;
        text-align: center;
    }
    .serviceContent p.serviceListSubTitle {
        text-align: center;
        font-size: 3vw;
    }
    .serviceContent p.serviceText {
        text-align: center;
        font-size: 2.5vw;
        display: none;
    }
    .serviceContainer {
        max-width: 400px;
        margin: 0 auto;
    }
    ul.serviceBotbox {
        flex-direction: column;
    }
    ul.serviceBotbox {
        gap: 5vw;
    }
    .serviceList {
        max-width: 100%;
        margin: 0 auto;
    }
    ul.serviceContainer {
        flex-direction: column;
    }
    li.service2, li.service3, li.service4 {
        width: 100%;
    }
    .serviceList img {
        width: 4.5vw;
    }
    li.service2, li.service3, li.service4 {
        width: 100%;
    }
    li.service2, li.service3, li.service4 {
        max-width: 400px;
        /* width: calc((100% / 3) - 5px); */
    }
    .serviceList img {
        width: 6vw;
    }
    .service .serviceSubTitle {
        font-size: 14px;
    }
}






/* 섹션7 step */
section.step {
    padding: 150px 20px 0;
}
section.step .inner {
    padding: 40px 50px 80px;
    border: 3px solid var(--lightGreen);
    border-radius: 10px;

}
.step p.title {
    color: var(--lightGreen);
}
.step p.stepSubTitle {
    color: #909090;
    text-align: center;
    margin-top: 30px;
    font-size: 24px;
}
ul.stepContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    gap: 15px;
}
ul.stepContainer li.stepList {
    width: calc((100% / 4) + 5px);
}
ul.stepContainer li.stepList img {
    /* width: 14vw; */
    width: 100%;
}
@media screen and (max-width: 1250px) {
    section.step {
        padding: 12vw 20px 0;
    }
    
    ul.stepContainer li.stepList img {
        /* width: 20vw; */
        section.step {
            padding: 12vw 20px 0;
        }
        
    }
    
}
@media screen and (max-width: 1000px) {
    .step p.stepSubTitle {
        font-size: 3vw;

    }
    .step p.title {
        font-size: 5vw;
    }
    .step p.stepSubTitle {
        font-size: 2.5vw;
    }
    
}
@media screen and (max-width: 800px) {
    ul.stepContainer {
        max-width: 600px;
        flex-wrap: wrap;
    }
    ul.stepContainer li.stepList {
        width: calc((100% / 2) + -15px);
    }   
}
@media screen and (max-width: 650px) {
    section.step .inner {
        border: 2px solid var(--lightGreen);
    }
    ul.stepContainer {
        margin-top: 40px;
    }
    .step p.title {
        padding-bottom: 20px;
    }
    .step p.stepSubTitle {
        margin-top: 20px;
    }
    section.step .inner {
        padding: 30px 20px 50px;
    }
}




/* 섹션8 about */
section.about { overflow: hidden; }

/* @@@about 1 @@@@*/
.about1 {
    padding: 100px 0 0px;

}
article.aboutSlideContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.about p.title {
    color: var(--green);
}
.about p.title::after {
    background: var(--green);
}
.about .aboutSwiper {
    position: relative;
    overflow: hidden;
}
.about .aboutWrapper {
    width: 100%;

}
.about .aboutSlide {
    border: 3px solid var(--green);
    padding: 30px 60px 50px;
    border-radius: 10px;
    margin-top: 40px;
    background: #fff;
}
p.aboutQuestion {
    font-size: 28px;
    font-weight: 500;
    color: var(--green);
    text-align: center;
    
}
.aboutQuestionBox {
    margin-top: 30px;
    display: flex;
}
.aboutQuestionBox > img {
    padding-right: 40px;
}
.aboutContent {
    width: calc(100%/2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}
.aboutContent li {
    width: 100%;
    display: flex;
    align-items: center;
}
.aboutContent li p.aboutContentList {
    font-size: 22px;
}
.aboutContent li img {
    margin-right: 5px;
}
.about article .aboutNext {
    background: url('../img/8_about/1_slide/next.svg') no-repeat center / contain;
    right: -50px;
}
.aboutSwiper .aboutNext,
.aboutSwiper .aboutPrev {
    margin-top: 0;

}
.about article .aboutPrev {
    background: url('../img/8_about/1_slide/prev.svg') no-repeat center / contain;
    left: -50px;

}
.aboutSwiper .swiper-pagination-bullet-active {
    background: var(--green);
    border-radius: 50%;
}
.about .swiper-pagination-bullet {
    border-radius: 50%;
}
.about .aboutPage {
    /* margin: 10px 0; */
}

@media screen and (max-width: 1250px) {
    .aboutContent li p.aboutContentList {
        font-size: 1.92vw;
    }
    .aboutQuestionBox > img {
        width: calc(100% / 2);
        padding-right: 40px;
    }
    p.aboutQuestion {
        font-size: 2.24vw;
    }

}
@media screen and (max-width: 800px) {
    .aboutQuestionBox {
        max-width: 600px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    
    article.aboutSlideContainer{ max-width: 80%; margin: 0 auto; }
    .aboutQuestionBox > img {
        width: 80%;
        padding-right: 0;
    }
    .about .aboutSlide {
        width: 100%; padding: 4vw;
        border: 2px solid var(--green);
    }
    
    .about .aboutWrapper {
        /* border: 5px solid #000; */
        /* background: #000; */
    }
    .aboutContent {
        width: 100%;
        gap: 20px;
    }
    .about .aboutSlide {
        width: 100%;
    }
    .about .aboutNext,
    .about .aboutPrev {
        display: none;
    }
    .about .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 0px;
    }
    p.aboutQuestion {
        font-size: 16px;
    }
    .aboutContent li p.aboutContentList {
        font-size: 14px;
    }
    .aboutContent li img {
        margin-right: 5px;
        width: 15px;
    }
}

/* @@@about 2 @@@@*/
.about2 {
    border: 3px solid var(--green);
    padding: 50px 20px 70px;
    border-radius: 10px;
    margin-top: 50px;
}
.about2 p.title {
    padding-bottom: 40px;
}
.about2 > ul.product {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 40px;
}
.about2 > ul.product li.productList {
    width: 100%;
    /* margin: 30px 40px; */
}
ul.product li.productListImg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.productBotbox {
    width: 100%;
    display: flex;
    /* gap: 5px; */
    justify-content: center;
}
ul.product li.productListImg img {
    width: calc((100%/3) - 5px);
}
li.aboutStick {
    width: 1px;
    height: 120px;
    background: var(--green);
}
ul.productListDetail {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #000; */
    margin: 30px 0 50px;
    padding: 30px;
}
ul.productListDetail li.productDetailList {
    /* width: calc((100% / 3 - 5px)); */
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 30px;
}
li.productDetailList1 {
    width: 35%;
}
li.productDetailList2 {
    width: 25%;
}
li.productDetailList3 {
    width: 20%;
}
li.productDetailList .detailBox {
    width: 100%;
    display: flex;
    align-items: center;
}
.detailBox p.detailInfoName {
    max-width: 110px;
    width: 100%;
    font-size: 24px;
    display: block;
    color: var(--green);
    margin-right: 20px;
}
.detailBox p.detailInfoText {
    font-size: 20px;
    text-align: center;
}

ul.spec {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
ul.spec li.specList {
    width: calc((100%/5));
}
ul.spec li.specList img {
    width: 100%;
}
/* @@@about 3 @@@@*/
.about3 {
    padding: 50px 60px 70px;
    border-radius: 10px;
    border: 3px solid var(--green);
    border-radius: 10px;
    margin: 50px 0;
}
.about3 p.title {

}
ul.option {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 20px;
}
ul li.optionList {
    /* width: calc((100%/3) + 10px); */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
li.optionList img {
    width: 100%;
}

ul li.optionList p.optionText {
    text-align: center;
    line-height: 150%;
    font-size: 20px;
}
@media screen and (max-width: 1250px) {
    li.optionList img {
        /* width: 30vw; */
    }
}
@media screen and (max-width: 750px) {
    .about3 {
        max-width: 600px;
        margin: 20px auto 0;    

    }
    ul.option {
        flex-direction: column;
        margin: 30px auto 0;    
        gap: 30px;
    }
    li.optionList {
        width: 100%;
        gap: 0;

    }
    br.brTag {
        display: none;
    }
    li.optionList img {
        width: 50vw;
    }


}
@media screen and (max-width: 650px) {
    .about3 {
        margin: 20px auto 0;
    }
}


/* 섹션8 price */
section.price {
    color: #fff;
    background: url('../img/9_price/priceBg.png') no-repeat center / cover;
    padding: 150px 0;
}
.price p.title {
    padding-bottom: 25px;
}
.price p.title::after {
    background: var(--white);
}
p.priceSubTitle {
    font-size: 26px;
    text-align: center;
    padding-top: 25px;
    font-weight: 300;
}
ul.priceContainer {
    width: 100%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    gap: 20px;
    margin-top: 50px;
    transition: all 100ms;

}
ul.priceContainer li.priceList {
    width: calc((100%/3) - 10px);
    background: #fff;
    border-radius: 10px;
    padding: 30px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 100ms;
}
.squareBox{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.squareBox .square {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: var(--green);
    transform: rotate(45deg);
}
li.priceList .priceListTitle {
    color: var(--green);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    position: relative;
}
.priceListTextBox {
    max-height: 220px;
    height: 220px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
    margin: 20px 0 30px;
}
.priceListText {
    display: flex;
}
.priceListText .checkDiv{ position: relative; }
.priceListText .checkDiv .active{ position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s; }
ul.priceContainer li.priceList:hover .checkDiv .active{ opacity: 1; }

.priceListText img {
    margin-right: 5px;
}
.priceListText p {
    border-bottom: 2px solid var(--green);
}
.priceTotal {
    font-size: 24px;
    text-align: center;
}
.priceTotal p {
    font-size: 18px;
}
.priceTotal span {
    font-weight: 500;
    margin-left: 5px;
    font-size: 24px;
}

button.priceRentalBtn {
    background: var(--green);
    border: none;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
    font-size: 20px;
    padding: 15px 70px;
}

@media screen and (max-width: 1250px) {
    li.priceList .priceListTitle {
        font-size: 1.92vw;
    }
    .priceListTextBox {
        font-size: 1.6vw;
    }
    .priceTotal p {
        font-size: 1.44vw;
    }
    .priceTotal span {
        font-size: 1.92vw;
    }
    button.priceRentalBtn {
        font-size: 1.6vw;
        padding: 15px 70px;
    }

}
@media screen and (max-width: 900px) {
    p.title {
        font-size: 5vw;
    }
    p.priceSubTitle {
        font-size: 2vw;
    }
    .priceListTextBox {
        /* margin: 1.6vw 0 2.4vw; */
    }
    ul.priceContainer {
        max-width: 400px;
        flex-direction: column;
        margin: 0 auto;
    }
    ul.priceContainer li.priceList {
        width: 100%;
        margin-top: 50px;
        
    }

    li.priceList .priceListTitle {
        font-size: 3.5vw;
    }
    .priceListTextBox {
        font-size: 2.3vw;
    }
    .priceTotal p {
        font-size: 2.5vw;
    }
    .priceTotal span {
        font-size: 3vw;
    }
    button.priceRentalBtn {
        font-size: 2.5vw;
        padding: 15px 70px;
    }


}
@media screen and (max-width: 650px) {
    .price p.title {
        
    }
    li.priceList .priceListTitle {
        font-size: 24px;
    }
    .priceListTextBox {
        font-size: 20px;
    }
    .priceTotal p {
        font-size: 20px;
    }
    .priceTotal span {
        font-size: 24px;
    }
    button.priceRentalBtn {
        font-size: 22px;
        padding: 15px 70px;
    }
    p.priceSubTitle {
        font-size: 3vw;
        text-align: center;
        padding-top: 25px;
        font-weight: 300;
    }
}


/* 섹션8 new */
section.new {
    background: url('../img/10_new/newBg.png') no-repeat center / cover;
    padding: 150px 0;
}
.newContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
p.newTitle {
    font-size: 52px;
    color: #fff;
    font-weight: 500;
}
.newLogo {
    padding: 40px 0 50px;
}
.newBtnBox {
    color: #fff;
}
button.newServiceBtn,
button.newOfficalBtn {
    background: none;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    font-size: 22px;
}
button.newServiceBtn {
    margin-right: 20px;
    padding: 15px 45px;

}
button.newOfficalBtn {
    padding: 15px 50px;
}

@media screen and (max-width: 1250px) {
    p.newTitle {
        font-size: 4vw;
    }

}
@media screen and (max-width: 1000px) {
    section.new {
        padding: 10vw 0;
    }

    button.newServiceBtn,
    button.newOfficalBtn {
    font-size: 2vw;
    }
    .newLogo img {
        width: 20vw;
    }
    button.newServiceBtn {
        margin-right: 10px;
    }


}

@media screen and (max-width: 650px) {
    button.newServiceBtn {
        padding: 10px 30px;
        margin-right: 5px;
    }
    button.newOfficalBtn {
        padding: 10px 35px;
    }
    button.newServiceBtn,
    button.newOfficalBtn {
        border: 1px solid #fff;
        font-size: 3vw;
    }
    section.new {
        padding: 80px 0;
    }
    .newLogo {
        padding: 20px 0 20px;
    }
    
}






/* 섹션8 customer */
section.customer {
    padding: 100px 0;
}
.customer p.title {
    color: var(--green);
    border-color: var(--green);
}
.customer p.title::after {
    background-color: var(--green);
}
ul.customerContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 35px;
    gap: 10px;
}
ul.customerContainer li.customerList {
    /* width: calc((100% / 4) - 10px); */
    width: calc(25% - 30px );
    border: 4px solid var(--green);
    border-radius: 10px;
}
.customerIcon {
    max-height: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 50px;
    font-weight: 500;
    font-size: 26px;
    text-align: center;
    gap: 10px;
}
.iconKakao {
    position: relative;
    top: 10px;

}
.customerIcon p {
    font-size: 24px;
    text-align: center;
    color: #339550;
}
li.customerList .customerText {
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0 10px;
}
li.customerList .customerText p {
    font-size: 20px;
    font-weight: 400;
    color: var(--white);
}
li.customerList .customerText span {
    font-family: 'Pretendard', sans-serif;
}

@media screen and (max-width: 1250px) {
    .customerIcon img {
        width: 8vw;
    }
    .customerIcon {
        padding: 5vw 2vw;
    }
    .customerText {
        padding: 10px 0 6px;    
    }
    .iconKakao {
        padding: 3.8vw 2vw;

        }
    

}
@media screen and (max-width: 1150px) {
    .customer p.title {
        font-size: 4vw;
    }
    .iconKakao {
        /* padding: 5vw 2vw; */
        padding: 3.6vw;

    }

}
@media screen and (max-width: 1000px) {
    ul.customerContainer {
        /* display: flex;
        flex-wrap: wrap; */
        
    }
    

    .customerIcon p {
        font-size: 2vw;
    }
    li.customerList .customerText p {
        font-size: 2vw;
    }
        
}
@media screen and (max-width: 650px) {
    .customerIcon img {
        width: 10vw;
    }

    .customerContainer {
        flex-wrap: wrap;
    }
    ul.customerContainer li.customerList {
        width: calc(50% - 70px );
        border: 3px solid var(--green);
    }
    .customerIcon {
        padding: 7vw 2vw;
    }
    .customerIcon p {
        font-size: 3vw;
    }
    li.customerList .customerText p {
        font-size: 3vw;
    }
    .iconKakao {
        padding: 5vw 2vw;

    }
    section.customer {
        padding: 30px 0 50px;
    }
    li.customerList .customerText {
        padding: 9px 0 5px;
    }
    

}



/* ---------------푸터 */
footer {
    background: #333;
    color: #7F7F7F;
}
.footerTop {
    padding: 70px 0;
}

.footerLogo {
    padding-bottom: 60px;
}
.footerTop .footerLogo img {
    width: 20%;
}
.footerTopContent {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
ul.footerText {
    max-width: 620px;
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
}
.footerStick::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #7f7f7f;
    margin: 0 10px;
}
.footerStickPadding {
    padding-top: 20px;
}
.buttonBox {
    /* border: 1px solid #fff; */
}
.buttonBox button {
    border: 2px solid #7f7f7f;
    background: none;
    border-radius: 5px;
}
button.offical {
    padding: 10px 30px;
    margin-right: 10px;
}
button.privacy {
    padding: 10px 20px;
}


.footerBottom {
    padding: 15px 0;
    border-top: 1px solid #7F7F7F;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
}

@media screen and (max-width: 1250px) {
    .footerTop .footerLogo img {
        width: 20vw;
    }
    

}
@media screen and (max-width: 1000px) {
    ul.footerText {
        font-size: 16px;
        padding-bottom: 30px;
    }
    .footerTopContent {
        display: flex;
        justify-content: start;
        flex-direction: column;
        align-items: start;
    }
}
@media screen and (max-width: 800px) {
    ul.footerText {
        flex-direction: column;
        flex-wrap: nowrap;
    }   
    .footerStickPadding {
        padding-top: 0;
    }
    ul.footerText li {
        padding-bottom: 20px;
    }
    .footerStick::after {
        display: none;
    }
}

@media screen and (max-width: 650px) { 
    .footerTop {
        padding: 8vw 0;
    }
    
    .footerTop .footerLogo img {
        width: 25%;
    }
    ul.footerText {
        font-size: 2.5vw;
    }   
    .footerBottom {
        padding: 3vw 0;
        font-size: 2vw;
        font-weight: 500;
    }
    button.offical {
        padding: 2vw 6.5vw;
    }
    button.privacy {
        padding: 2vw 4vw;
    }
    .footerLogo {
        padding-bottom: 6vw;
    }
    ul.footerText {
        padding-bottom: 2vw;
    }
}
@media screen and (max-width: 600px) { 
    .buttonBox {
        font-size: 2.5vw;
    }
}



/* 연습 */
/*봇박스를 사용한 농민들의 이야기*/
@media screen and (max-width: 1000px) { 
    .storyBox{ padding-left: 0; }
}
@media screen and (max-width: 720px) { 
    .storyContainer li img{ width: 56vw; }
    p.storyNumTitle{ font-size: 20px; }
    p.storyBoxSubTitle{ font-size: 18px; }
    p.storyBoxText{ font-size: 18px; }
}
@media screen and (max-width: 650px) { 
    p.storyNumTitle::before{ left: 0; }
    p.storyNumTitle{ font-size: 18px; padding-left: 10px; }
    p.storyBoxSubTitle{ font-size: 16px; }
    p.storyBoxText{ font-size: 16px; }
}
@media screen and (max-width: 400px) { 
    p.storyBoxSubTitle{ font-size: 14px; }
    p.storyBoxText{ font-size: 14px; }
}

/* 봇박스 소개 */
section.intro{ margin-top:50px; }


/* 부담 없는 렌탈서비스 */
@media screen and (max-width: 720px) { 
    .serviceContent p.serviceListTitle{ font-size: 18px; }
    .serviceContent p.serviceListSubTitle{ font-size: 16px; }
    .serviceList img{ width: 50px; }
}

/* 렌탈 서비스 절차  */
@media screen and (max-width: 720px) { 
    .step p.stepSubTitle{ font-size: 16px; }
    section.step .inner{ padding: 30px 10px 30px 10px; }
    ul.stepContainer{ gap: 5px; }
    ul.stepContainer li.stepList{ width: calc((100% / 2) + -4px); }

}
/* About US  */

@media screen and (max-width: 1400px) { 
    article.aboutSlideContainer{ max-width: calc(100% - 100px); margin: 0 auto; }
    .about article .aboutPrev{ width: 40px; }
    .about article .aboutNext{ width: 40px; }
    .about article .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 21px; }
}
@media screen and (max-width: 900px) { 
    .about .aboutSlide{ display: flex; flex-wrap: wrap;  }
    p.aboutQuestion{ width: 100%; }
    .aboutQuestionBox{ flex-direction: column; width: 100%; align-items: center; }
    .aboutQuestionBox > img{ width: auto; max-width: 100%; padding-right: 0; }
    .aboutContent{ margin: 20px 0 0 0; width: 100%; max-width: 498px; }
    .about article .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 16px; }
}
@media screen and (max-width: 800px) { 
    .aboutContent{ margin: 20px 0; } 
    article.aboutSlideContainer{ max-width: unset; }
    .aboutContent{ margin: 10px 0 35px 0; }
    p.aboutQuestion{ word-break: keep-all; /*단어 단위로 줄바꿈 (띄어쓰기)*/ }
}


/* 봇박스 제품 사양 */
li.productDetailList1{ flex-grow: 1; }
li.productDetailList2{ flex-grow: 1; }
li.productDetailList3{ flex-grow: 1; }

@media screen and (max-width: 900px) { 
    ul.productListDetail{ padding: 30px 0; }
    .detailBox p.detailInfoName{ font-size: 18px; }
    .detailBox p.detailInfoName{ max-width: 82px; }
}

@media screen and (max-width: 770px) { 
    ul.productListDetail{ flex-direction: column; gap: 20px; }
    ul.productListDetail li.productDetailList{ gap: 20px; }
    li.productDetailList1{ width: 100%; max-width: 278px; }
    li.productDetailList2{ width: 100%; max-width: 278px; }
    li.productDetailList3{ width: 100%; max-width: 278px; }
    ul.productListDetail{ margin-bottom: 30px;  }
    ul.spec{ flex-wrap: wrap; max-width: 500px; margin: 0 auto 0 auto; }
    ul.spec li.specList{ width: calc((100% / 3) - 10px); }

}

@media screen and (max-width: 770px) { 
    section.price{ margin-top: 50px; }
}

@media screen and (max-width: 770px) { 
    /* ul.customerContainer{ width: calc(100% + 10px); margin-left: -5px; gap: 0; }
    ul.customerContainer > li{ padding: 5px; width: calc(100% / 2); } */
    ul.customerContainer{ margin: 0 auto 0 auto; }
    ul.customerContainer li.customerList{ overflow: hidden; width: calc((100% / 2) - 5px ); border-width: 2px; }
}
@media screen and (max-width: 650px) {
    ul.customerContainer{ max-width: 70vw; }
}




@media screen and (max-width: 770px) { 
    section.price{ padding: 80px 0; }
}

@media screen and (max-width: 1518px) { 
    .storyBox2{ left: 0; }
}


/*============================ privacy ============================*/
.f_popup_bg{ 
    background-color:rgba(0,0,0,0.5); position:fixed;
    left:0; top:0; width:100%; height:100%; z-index:9999; 
    display:flex; align-items: center; justify-content: center;
    padding:10px; font-family: 'Noto Sans KR', sans-serif;
    opacity:0; visibility: hidden; transition: all 0.5s;

}
.f_popup_bg.on{ opacity:1; visibility: visible; }
.f_popup_bg .popup_box{ width:90%; max-width:480px; }
.f_popup_bg .btn_wrap{ width:100%; display:flex; justify-content: flex-end; }
.f_popup_bg .btn_wrap .btn{ width:30px; height:30px; cursor:pointer; padding:0; }
.f_popup_bg .btn_wrap .btn span{ display:block; width:100%; height:2px; background-color:#fff;  }
.f_popup_bg .btn_wrap .btn span:nth-child(1){ transform: translateY(14px) rotate(-45deg); -webkit-transform: translateY(14px) rotate(-45deg); }
.f_popup_bg .btn_wrap .btn span:nth-child(2){ transform: translateY(12px) rotate(45deg); -webkit-transform: translateY(12px) rotate(45deg); }
.f_popup_bg .content_wrap{ background-color:#fff; overflow-y: scroll; max-height: 60vh; padding:40px 30px; margin-top:10px; }
.f_popup_bg .content_wrap p.title{ text-align:center; font-weight: 600; font-size: 20px;  }
.f_popup_bg .content_wrap p.content{ font-size: 16px; margin-top:30px; font-weight: 300;  }

@media screen and (max-width: 650px) {
    .f_popup_bg .content_wrap p.content{ font-size: 14px; margin-top: 20px; }
    .f_popup_bg .content_wrap{ padding: 20px 15px;  }
}



















/* 최초버전 */



.sub .applyResultArti{ display: flex; align-items: center; min-height: 100vh; padding: 50px 0; }
.sub .applyResultArti .inner{ display: flex; align-items: center; justify-content: center; }
.sub .applyResultArti .whiteBox{ background: #fff; width: 100%; max-width: 780px; padding: 80px 20px; border-radius: 4px; box-shadow: 8px 10px 30px 0px rgba(0, 0, 0, 0.12); }
.sub .applyResultArti .whiteBox .logo{ display: block; margin: 0 auto; max-width: 100%; }
.sub .applyResultArti .whiteBox .title{ text-align: center; font-size: 20px; margin-top: 40px; }
.sub .applyResultArti .whiteBox .title .green{ color: #42C17B; }
.sub .applyResultArti .whiteBox .text{ text-align: center; margin-top: 16px; color: #7F7F7F; line-height: 1.5em; }
.sub .applyResultArti .whiteBox .mainBtn{ display: block; margin: 0 auto; margin-top: 60px; width: 100%; max-width: 380px; background-color: #42C17B; color: #fff; text-align: center; padding: 20px 10px; }
.sub .applyResultArti .whiteBox .mainBtn + .mainBtn{ margin-top: 10px; }
@media screen and (max-width: 1250px) {
    .sub .applyResultArti .whiteBox{ padding: 50px 10px; }
    .sub .applyResultArti .whiteBox .logo{ width: 150px; }
    .sub .applyResultArti .whiteBox .title{ font-size: 18px; }
}
@media screen and (max-width: 650px) {
    .sub .applyResultArti{ min-height: unset; }
    .sub .applyResultArti .whiteBox .text{ font-size: 14px; }
    .sub .applyResultArti .whiteBox .mainBtn{ padding: 10px; max-width: 200px; }
}

.sub .formList{ display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin-left: -5px; }
.sub .formList > li{ padding: 10px 5px; width: 100%; }
.sub .formList > li.half{ width: calc(100% / 2); }
.sub .formList.three > li.half{ width: calc(100% / 3); }
.sub .formList .label span{ color: #EB5757; }
.sub .formList .label span.grayInfo{ font-size: 0.8em; color: #7F7F7F; }
.sub .formList .red{ color: #EB5757; }
.sub .formList .iptBox{ margin-top: 5px; }
.sub .ipt{ padding: 10px; border: 1px solid #ECECEC; border-radius: 0; width: 100%; }
.sub textarea.ipt{ resize: none; height: 170px; }
.sub .ipt::placeholder{ color: rgba(119, 119, 119, 0.2); }
.sub .formList .ipt + .red{ margin-top: 5px; display: block; }
.sub .formList .scrollDiv{ border: 1px solid #E4E4E4; padding: 10px; height: 200px; overflow-y: scroll; color: #7F7F7F; line-height: 1.5em; }
.sub input[type="file"].ipt{ border-radius: 8px; padding: 15px 15px 15px 45px; background-image: url('../img/boardImg/folder.png'); background-repeat: no-repeat; background-position: left 10px center; }
.sub textarea.ipt{ resize: none; height: 170px; }
.sub .formList .iptBox.btnIpt{ display: flex; gap: 4px; }
.sub .formList .iptBox .grayBtn{ flex-shrink: 0; padding: 10px 20px; background: #222; border: none; border-radius: 0; color: #fff; }

.sub .formList .iptBox.radioIpt{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.sub .formList .iptBox.radioIpt label{ cursor: pointer; display: flex; align-items: center; padding-right: 10px; }
.sub .formList .iptBox.radioIpt label input{ display: none; }
.sub .formList .iptBox.radioIpt label input + .text{ display: flex; gap: 4px; align-items: center; }
.sub .formList .iptBox.radioIpt label input + .text::before{ content:''; display: block; width: 20px; height: 20px; border: 1px solid #E4E4E4;  }
.sub .formList .iptBox.radioIpt label input:checked + .text::before{ background-image: url('../img/common/checkbox_icon.png'); background-size: 60%; background-repeat: no-repeat; background-position: center; background-color: #FC504F; }

.sub .agreeCheckDiv{ margin-top: 10px; display: flex; justify-content: flex-start; color: #7F7F7F; }
.sub .agreeCheckDiv label input[type="checkbox"]{ display: none; }
.sub .agreeCheckDiv label input[type="checkbox"] + .textBox{ display: flex; align-items: flex-start; gap: 4px; }
.sub .agreeCheckDiv label input[type="checkbox"] + .textBox::before{ flex-shrink: 0; content:''; display: block; flex-shrink: 0; border: 1px solid #00AD00; width:20px; height: 20px;  }
.sub .agreeCheckDiv.type2 label input[type="checkbox"] + .textBox::before{ border: 1px solid #7f7f7f; }
.sub .agreeCheckDiv label input[type="checkbox"]:checked + .textBox::before{ background-color: #fff; background-image: url('../img/common/checkbox_icon.png'); background-size: 100%; background-repeat: no-repeat; background-position: center; }

.sub input[type="file"].ipt label input[type="checkbox"]{ display: none;  }
.sub .checkIpt{ margin-top: 10px; display: flex; justify-content: flex-end; }
.sub .checkIpt.fileDel{ color: #7f7f7f; font-size: 14px; }
.sub .checkIpt input[type="checkbox"]{ display: none; }
.sub .checkIpt input[type="checkbox"] + .text{ cursor: pointer; position: relative; padding-left: 25px; padding-right: 10px; }
.sub .checkIpt input[type="checkbox"] + .text::before{ content:''; display: block; width: 18px; height: 18px; border: 1px solid #dedede; position: absolute; left: 0; margin-top: 2px; }
.sub .checkIpt.fileDel input[type="checkbox"] + .text{ padding-left: 20px; padding-right: 0; }
.sub .checkIpt.fileDel input[type="checkbox"] + .text::before{ margin-top: 0; width: 15px; height: 15px; }
.sub .checkIpt input[type="checkbox"]:checked + .text::before{ background: #FC504F; background-image: url('../img/common/checkbox_icon.png'); background-size: 70%; background-repeat: no-repeat; background-position: center; }

@media screen and (max-width: 900px) {
    .sub .formList.three > li.half{ width: calc(100% / 2); }
}
@media screen and (max-width: 650px) {
    .sub .formList{ font-size: 14px; }
    .sub .formList > li.half{ width: 100%; }
    .sub .formList.three > li.half{ width: 100%; }
    .sub .formList .iptBox.radioIpt label input + .text::before{ width: 18px; height: 18px; }
    .sub .agreeCheckDiv{ font-size: 14px; }
    .sub .agreeCheckDiv label input[type="checkbox"] + .textBox::before{ width: 14px; height: 14px; }
    .sub .checkIpt.fileDel{ font-size: 13px; }

    .sub .checkIpt input[type="checkbox"] + .text{ padding-left: 20px; }
    .sub .checkIpt input[type="checkbox"] + .text::before{ width: 16px; height: 16px; }
    .sub .checkIpt{ margin-top: 5px; }
}

.sub .subTitle{ color: #42C17B; font-weight: 600; font-size: 26px; text-align: center; }
.sub .subContent{ text-align: center; margin-top: 10px; color: #7F7F7F; }
.sub .btnHelp{ text-align: center; margin-top:10px; color: #7f7f7f; }
.sub .applyResultArti .formList{ max-width: 442px; margin : 20px auto 0 auto; }
.sub .applyResultArti .grayBtn{ 
    display: block; width: 100%; max-width: 442px; margin: 20px auto 0 auto; border-radius: 10px;
    border: 2px solid #595959; background-color: #484848; color: #fff; padding:12px 10px;  
}

@media screen and (max-width: 650px) {
    .sub .btnHelp{ font-size: 14px; }
    .sub .subTitle{ font-size: 20px; }
}

.sub .apymentCheckArti{ padding: 50px 0; }
.sub .apymentCheckArti .grayBar{ width: 100%; height: 1px; background: #D9D9D9; margin: 20px 0; }
.sub .apymentCheckArti .formList{ margin-top: 40px; }
.sub .apymentCheckArti .formList .label{ color: #7f7f7f; }
.sub .apymentCheckArti .inner{ max-width: 500px; }
.sub .priceTable{ margin-top: 30px; border-top: 1px solid #E4E4E4; }
.sub .priceTable .row{ display: flex;  }
.sub .priceTable .box{ min-height: 70px; border-bottom: 1px solid #E4E4E4;; border-left: 1px solid #E4E4E4; width: calc(100% / 4); display: flex; align-items: center; justify-content: center; padding: 10px; }
.sub .priceTable .box:last-child{ border-right: 1px solid #E4E4E4; }
.sub .priceTable .box.grayBox{ background-color: #F7F7F7; }
.sub .greenBtn{ border: 1px solid #42C17B; width: 100%; margin-top: 50px; text-align: center; color: #fff; padding: 16px 10px; display: block; background: #42C17B; }
.sub .grayBtn2{ border: 1px solid #E4E4E4; width: 100%; margin-top: 50px; text-align: center; color: #fff; padding: 16px 10px; display: block; background: #E4E4E4; }
.sub .priceTable .green{ color: #42C17B; }
.sub .priceTable b{ font-weight: 700; }

@media screen and (max-width: 650px) {
    .sub .priceTable .row{ flex-wrap: wrap; }
    .sub .priceTable .box{ padding:15px 5px; min-height: unset; width: calc(100% / 2); font-size: 14px; }   
    .sub .priceTable .box:nth-child(2){ border-right: 1px solid #E4E4E4; }
    .sub .priceTable .box:nth-child(2n-1){ width: 100px; }
    .sub .priceTable .box:nth-child(2n){ width: calc(100% - 100px); }
}

.sub .applyArti{ display: flex; overflow: hidden; width: 100%; }
.sub .applyArti .leftDiv{ height: calc(100vh - 90px); overflow-y: scroll; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.sub .applyArti .leftDiv .subTitle{ font-size: 40px; }
.sub .applyArti .leftDiv .stepList > li{ display: none; }
.sub .applyArti .leftDiv .stepList > li.show{ display: block; }
.sub .applyArti .leftDiv .item{ padding: 20px; } 
.sub .applyArti .leftDiv .item1{ width: 100%; max-width: 100%; width: 620px; }
.sub .applyArti .leftDiv .item1 .contentWrap{ margin-top: 100px; display: flex; gap: 56px; align-items: center; }
.sub .applyArti .leftDiv .item1 .contentWrap.type2{ justify-content: center; }
.sub .applyArti .leftDiv .item1 .contentWrap .imgBox{ max-width: 100%; }

.sub .applyArti .leftDiv .item2 .formList{ max-width: 240px; }
.sub .applyArti .leftDiv .item2 .greenTitle{ color: #00AD00; font-size: 18px; text-align: center; }
.sub .applyArti .leftDiv .item2 .calendarDiv{ display: flex; gap:103px; margin-top: 30px; }
.sub .applyArti .leftDiv .item2 .calendarDiv .calendarBox{ width: 25vw; max-width: 430px; margin-top: 10px; }
.sub .applyArti .leftDiv .fc .fc-toolbar-title{ font-size: 18px; }

.sub .applyArti .leftDiv .fc .fc-button .fc-icon{ display: none; }
.sub .applyArti .leftDiv .fc .fc-button.fc-prev-button{ background: transparent; width: 20px; height: 20px; border: none; border-radius: 0; background-image: url('../img/apply/calender_arrow.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }
.sub .applyArti .leftDiv .fc .fc-button.fc-next-button{ background: transparent; transform: rotate(180deg); width: 20px; height: 20px; border: none; border-radius: 0; background-image: url('../img/apply/calender_arrow.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }
.sub .applyArti .leftDiv .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{ min-height: .5em; }




@media screen and (max-width: 1500px) {
    .sub .applyArti .leftDiv .item2 .calendarDiv{ gap: 30px; }
}

@media screen and (max-width: 1350px) {
    .sub .applyArti .leftDiv .item2 .calendarDiv .calendarBox{ width: 100%; }
    .sub .applyArti .leftDiv .stepList > li.show{ width: 100%; }
    .sub .applyArti .leftDiv .item1 .contentWrap{ flex-direction: column; }
}
@media screen and (max-width: 650px) {
    .sub .applyArti .leftDiv{ height: unset; overflow-y: auto; padding-bottom: 50px; }
    .sub .applyArti .leftDiv .item2 .calendarDiv{ flex-direction: column; }
}


.sub .applyArti .rightDiv{ position: relative; background-color: #fff; max-width: 100%; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; width: 560px; border-left: 1px solid #E4E4E4;}
.sub .applyArti .rightDiv .contentWrap{  height: calc(100vh - 90px); overflow-y: scroll; padding: 30px;  }
.sub .applyArti .rightDiv .titleBox{ width: 100%; background: #42C17B; color: #fff; text-align: center; padding: 20px; }
.sub .applyArti .rightDiv .titleBox.grayBg{ background-color: #E4E4E4; color: #7f7f7f; }
.sub .applyArti .rightDiv .emptyBox{ margin-top: 10px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; }
.sub .applyArti .rightDiv .emptyBox .text{ margin-top: 10px; color: #7F7F7F; }
.sub .applyArti .rightDiv .emptyWrap{ display: flex; align-items: center; justify-content: center; flex-direction: column; flex-grow: 1; }
.sub .applyArti .rightDiv .date{ margin: 10px 0; padding-bottom: 10px; border-bottom: 2px solid #E4E4E4; font-size: 23px; font-weight: 700; }
.sub .applyArti .rightDiv .start_end{ margin-top: 5px; font-size: 18px; }
.sub .applyArti .rightDiv .start_end b{ font-weight: 700; }
.sub .applyArti .rightDiv .start_end .green{ color: #00AD00; }
.sub .applyArti .rightDiv .red{ margin-top:10px; color: #B2312D; }
.sub .applyArti .rightDiv .btnWrap{ display: none; }
.sub .applyArti .rightDiv .openBtn{ display: none; border: none; position: absolute; right: 100%; background: #fff; border: 1px solid #dedede; padding: 8px; border-radius: 5px 0 0 5px; }
.sub .applyArti .rightDiv .openBtn .icon{ width: 15px; }

@media screen and (max-width: 1350px) {
    .sub .applyArti .rightDiv{ position: fixed; right: -560px; top: 51.48px; z-index: 999; transition: right 0.5s; }
    .sub .applyArti .rightDiv.show{ right: 0; }
    .sub .applyArti .rightDiv .openBtn{ display: block; }

    .sub .applyArti .rightDiv .btnWrap{ display: flex; justify-content: flex-end; align-items: center; padding: 20px; }
    .sub .applyArti .rightDiv .btnWrap .closeBtn{ background-color: transparent; border: none; padding: 5px; }
    .sub .applyArti .rightDiv .contentWrap{ padding: 20px; padding-top: 0; height: calc(100vh - 200px); }
}
@media screen and (max-width: 900px) {
    .sub .applyArti .rightDiv{ top: 41px;}
}
@media screen and (max-width: 650px) {
    .sub .applyArti .rightDiv{ right: -100%; top: 48px;}
}


.fc .fc-cell-shaded, .fc .fc-day-disabled{ 
    /* background:none !important;  */
    /* pointer-events: none;  */
}
.fc-theme-standard td.selectBg{ background-color: #efefef !important; }


/* 선택된 날짜의 배경색을 비활성화 */
.fc .fc-highlight{
    background: none !important; 
}




/* 일들 가운데로 옮기기 */
.fc .fc-daygrid-day-number{
    top:13px;
    right:15px;
}

/* 달력 테두리제거 */
.fc-theme-standard td, .fc-theme-standard th{
    border: none;
}
.fc .fc-daygrid-day.fc-day-today{
    background: none ; 
}


/* 지연 추가 */
.fc-theme-standard .fc-scrollgrid{ border: none; }
.fc .fc-daygrid-day-frame{ height: 3.9em; }
/* .fc .fc-daygrid-day-frame{ width: calc(100% / 7); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fc .fc-daygrid-day-number{ position: absolute; z-index: 2; right: unset; top: unset; } */
.fc-theme-standard td.clickBg{ background: #fff !important; position: relative; } 
.fc-theme-standard td.clickBg.fc-day-other{ color: #fff !important; }
.fc-theme-standard td.clickBg.fc-day-other .fc-daygrid-day-top{ display: flex !important; opacity: 1; }
.fc-theme-standard td.clickBg::before{ max-height: 61.97px; content:''; display: block; width: 100%; height: 50vw; background: #000; border-radius: 50%; z-index: 1; position: absolute; }
.fc-theme-standard td.clickBg::after{ content:''; background-color: #efefef; display: block; width: 50%; height: 100%; position: absolute; right: 0; top: 0; background-color: #; }
.fc-theme-standard td.clickBg.end::after{ right: unset; left: 0; }

.fc .fc-daygrid-day-number{ position: absolute; z-index: 4; right: unset; top: unset; }
.fc .clickBg .fc-daygrid-day-number{ color: #fff; }
.fc-theme-standard td{ border-bottom: 2px solid #fff; }

.sub .applyArti .leftDiv .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{ display: none; }
.fc .fc-daygrid-day-top{ width: 100%; height: 100%; display: flex; align-items: center;  justify-content: center; }
.fc-day-other{ opacity: 0; background-color: #fff !important; }
/* .fc-theme-standard td.clickBg.fc-day-other::before{ display: none !important; } */
/* .fc-theme-standard td.clickBg.fc-day-other::after{ display: none !important; } */
@media screen and (max-width: 470px) {
    .fc .fc-daygrid-day-frame{ height: 13vw; }
    .fc-theme-standard td.clickBg::before{ height: 13vw; }
}


/* .fc-past-date{ pointer-events: none !important; } */
.fc-past-date .fc-daygrid-day-number{ opacity: 0.3; }







.sub .applyArti .leftDiv .stepList .btnWrap{ display: flex; justify-content: flex-end; }
.sub .applyArti .leftDiv .stepList .btnWrap .nextBtn{ display: none; background-color: #00AD00; color: #fff; padding: 10px 20px; border-radius: 4px; border: none; }

@media screen and (max-width: 1350px) {
    .sub .applyArti .leftDiv .stepList .btnWrap .nextBtn{ display: inline-block; }
}







.insu {
    margin: 0 auto;
    text-align: center;
}
p.insuTitle {
    color: #339550;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}
p.insuTitleText {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
}




/* 2024년 11월 13일 */
@media screen and (max-width: 1350px) {
    header.main.on{ position: relative; }
    header.main.on ul{ position: fixed; left: 0; top: 0; width: 100%; background: #fff; justify-content: center; padding: 10px 0; }
}

header.sub{ height: 65.5px; display: flex; align-items: center; justify-content: center; }
header.sub .inner{ justify-content: center; }
@media screen and (max-width: 800px) {
    header.sub{ height: unset; padding:5px 0; }
}
@media screen and (max-width: 650px) {
    header.sub .inner{ padding: 10px 0; }
}


.sec_top{ padding-top: 50px; }
@media screen and (max-width: 800px) {
    .sec_top{ padding-top: 42.48px; }
}
@media screen and (max-width: 650px) {
    .sec_top{ padding-top: 56px; }
}


@media screen and (max-width: 720px) {
    ul.benefit{ flex-wrap: wrap; gap: unset; }
    ul.benefit > li{ width: calc(100% / 2); padding:3vw 2vw; }
}
@media screen and (max-width: 650px) {
    ul.benefit{ flex-direction: column; }
    ul.benefit > li{ width: auto; }
}

.about .aboutWrapper{ height: auto !important; }
.about .aboutSlide{ height: auto; }

@media screen and (max-width: 800px) {
    .about2 , .about3 { border-width: 2px; }
}
@media screen and (max-width: 720px) {
    section.banner{ position: relative; }
    section.banner::before{ content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 6px; background-image: url('../img/2_banner/gradient_border.png'); background-repeat: no-repeat; background-size: 100% 100%; }
    section.banner::after{ content:''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background-image: url('../img/2_banner/gradient_border.png'); background-repeat: no-repeat; background-size: 100% 100%; }
}




/* ======= 지연 추가 ====== */

/* footer */
footer{ background-color: #222; padding: 50px 0; color: #7A7A7A; }
footer .box1{ padding-bottom: 20px; /* border-bottom: 1px solid #7A7A7A; */ display: flex; align-items: flex-end; justify-content: space-between; }
footer .box1 .siteInfoList{ display: flex; gap: 8px; }
footer .box1 .siteInfoList .item{ transition: background .5s, color .5s; padding: 10px 20px; border: 1px solid #7A7A7A; border-radius: 4px;  }
footer .box1 .siteInfoList .item:hover{ background-color: #7a7a7a; color: #fff; }

footer .box2{ margin-top: 20px; }
footer .box2 .site_infoList{ display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; align-items: center; }
footer .box2 .site_infoList .bar{ width: 1px; height: 14px; background-color: #7a7a7a; }
footer .box2 .copy_right{ margin-top: 20px; font-size: 14px; }

@media screen and (max-width: 1250px) { 
    footer .logo{ width: 140px; }

}
@media screen and (max-width: 900px) { 
    footer{ padding: 30px 0 20px 0; }
    footer .box1{ flex-direction: column; gap: 10px; align-items: flex-start; }

}
@media screen and (max-width: 650px) { 
    footer{ font-size: 14px; }
    footer .logo{ width: 120px; }
    footer .box1 .siteInfoList .item{ padding: 5px 10px; }
    footer .box2 .site_infoList{ gap: 2px; }
    footer .box2 .site_infoList .bar{ display: none; }
    footer .box2 .site_infoList > li{ width: 100%; }
    footer .box2 .site_infoList > li:before{ content:'・  '; }  
    footer .box2 .copy_right{ font-size: 12px; }
}

.sub .applyArti .rightDiv .contentWrap .countBox {  display: flex; align-self: center; justify-content: space-between; }
.sub .applyArti .rightDiv .contentWrap .countBox .iptWrap{ border: 1px solid #D9D9D9; border-radius: 4px; overflow: hidden; display: flex; max-width: 148px; }
.sub .applyArti .rightDiv .contentWrap .countBox .pmBtn{ flex-shrink: 0; border: none; background-color: #F0F0F0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.sub .applyArti .rightDiv .contentWrap .countBox .ipt{ text-align: center; border: none; }
input[type='number'] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


.customBtn{ transition: background .5s, color .5s; margin: 20px 0; color: #7f7f7f; border-radius: 4px; border: 1px solid #efefef; padding: 10px 15px; font-size: 14px; background-color: #fff; }
.customBtn:hover{ background-color: #efefef; color: #222; }
.custom_btn_wrap{ display: flex; flex-wrap: wrap; gap: 5px; }