@charset "utf-8";
/* 폰트 적용 */
body, html{
    font-family: 'suit';
    font-size: 0.83vw;
    width: 100vw;
    overflow-x: clip;
    font-weight: 500;
    color: #000;
    line-height: normal;
}
figure {
    line-height: 0;
}
figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mo{
    display: none;
}
body{
    padding-top: 0;
}





/* wrap */
.wrap{
    padding: 0 8.33vw;
}
/* wrap */



/* sectoin01 */
.section01{
    width: 100%;
    margin-bottom: 13.54vw;
    padding-top: calc(100px + 6.77vw);
}
.section01 .title{
    font-size: 3.125vw;
    font-weight: 900;
    margin-bottom: 1.04vw;
}
.section01 .inner .cont{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.04vw;
}
.section01 .inner .cont .left{
    width: 58.33vw;
    height: auto;
    position: relative;
}
.section01 .inner .cont .left .slide{
    width: 100%;
    height: auto;
    position: relative;
}
.section01 .inner .cont .left .slide figure{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
    opacity: 0;
}
.section01 .inner .cont .left .slide figure.on{
    opacity: 1;
}
.section01 .inner .cont .left .slide figure img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.section01 .inner .cont .left > p{
    position: absolute;
    bottom: 1.56vw;
    left: 1.3vw;
    font-size: 1.8vw;
    font-weight: 900;
}
.section01 .inner .cont .left > .btn{
    position: absolute;
    right: 1.56vw;
    top: 1.56vw;
    display: flex;
}
.section01 .inner .cont .left > .btn a{
    display: block;
    width: 2.08vw;
    height: 2.08vw;
}
.section01 .inner .cont .left > .btn a:nth-child(2){
    margin: 0 10px;
}
.section01 .inner .cont .left > .btn a:nth-child(2) figure img{
    display: none;
}
.section01 .inner .cont .left > .btn a:nth-child(2) figure img.on{
    display: block;
}
.section01 .inner .cont .left > .btn a figure{
    width: 100%;
    height: 100%;
}
.section01 .inner .cont .right{
    position: relative;
    width: 23.95vw;
    height: 33.45vw;
    padding: 3.125vw 0 0 2vw;
}
.section01 .inner .cont .right .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.section01 .inner .cont .right h1{
    font-size: 2.34375vw;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.56vw;

}
.section01 .inner .cont .right p{
    font-size: 1.56vw;
    line-height: 1.5;
    margin-bottom: 5.20vw;
    color: #fff;
    opacity: 0.6;
}
.section01 .inner .cont .right a{
    width: 13.02vw;
    height: 3.125vw;
    border-radius: 0.52vw;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.56vw;
    font-weight: 600;
    color: #fff;
    transition: 0.5s;
}
.section01 .inner .cont .right a:hover{
    background: #fff;
    color: #2BA91A;
}
.section01 .inner .info{
    width: 100%;
    background: #FFF3DF;
    border-radius: 2.60vw;
    padding-top: 1.56vw;
    padding-bottom: 3.125vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.section01 .inner .info span{
    font-size: 1.04vw;
    opacity: 0.7;
}
.section01 .inner .info h1{
    font-size: 2.08vw;
    font-weight: 800;
    margin: 0.52vw 0 1.04vw;
    padding-bottom: 1.56vw;
    position: relative;
}
.section01 .inner .info h1::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
}
.section01 .inner .info p{
    font-size: 1.04vw;
    font-weight: 600;
    color: #333;
    padding: 0 2vw;
}
/* sectoin01 */



/* section02 */
.section02{
    width: 100%;
    margin-bottom: 13.54vw;
}
.section02 .title{
    margin-bottom: 5.20vw;
}
.section02 .title h1{
    font-size: 2.60vw;
    font-weight: 800;
    color: #333;
    margin-bottom: 2.08vw;
}
.section02 .title p{
    font-size: 1.56vw;
    color: #333;
    opacity: 0.7;
}
.section02 .inner .cont{
    margin-bottom: 5.20vw;
    display: flex;
    justify-content: space-between;
}
.section02 .inner .cont figure{
    width: 40.10vw;
    height: 50.52vw;
}
.section02 .inner .cont .info{
    width: 40.10vw;
    height: 50.52vw;
    padding: 3.64vw;
    border-radius: 1.56vw;
}
.section02 .inner .cont:nth-child(odd) .info{
    transform: translateY(3.125vw);
}
.section02 .inner .cont:nth-child(even) figure{
    transform: translateY(3.125vw);
}
.section02 .inner .cont:nth-child(even) .info{
    order: -1;
}
.section02 .inner .cont:nth-child(1) .info{
    background: #F3F5E8;
}
.section02 .inner .cont:nth-child(2) .info{
    background: #EFDEB9;
}
.section02 .inner .cont:nth-child(3) .info{
    background: #E4F6FF;
}
.section02 .inner .cont:nth-child(4) .info{
    background: #FFE3CF;
}
.section02 .inner .cont .info h1{
    font-size: 2.08vw;
    font-weight: 700;
    margin-bottom: 2.60vw;
}
.section02 .inner .cont .info p{
    font-size: 1.56vw;
    font-weight: 600;
    color: #333;
    opacity: 0.7;
}
/* section02 */


/* section03 */
.section03{
    margin-bottom: 5.20vw;
}
.section03 .inner{
    width: 100%;
    height: 31.25vw;
    display: flex;
}
.section03 .inner .map{
    width: 52.08vw;
    height: 100%;
}
.section03 .inner .map iframe{
    width: 100%;
    height: 100%;
    border-radius: 2.60vw;
    overflow: hidden;
}
.section03 .inner .info{
    width: 31.25vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section03 .inner .info p{
    font-size: 1.56vw;
    font-weight: 600;
    color: #333;
    opacity: 0.7;
}
.section03 .inner .info h1{
    position: relative;
    font-size: 2.60vw;
    font-weight: 700;
    color: #333;
    margin: 1.04vw 0 1.82vw;
    padding-bottom: 1.82vw;
}
.section03 .inner .info h1::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
}
.section03 .inner .info a{
    width: 13.02vw;
    height: 3.125vw;
    border-radius: 0.52vw;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.30vw;
    color: #333;
    transition: 0.5s;
}
.section03 .inner .info a:hover{
    background: #333;
    color: #fff;
}
/* section03 */






@media screen and (max-width:500px) {
    
    .mo{
        display: block;
    }
    .pc{
        display: none;
    }




    /* .wrap */
    .wrap{
        padding: 0 20px;
    }
    /* .wrap */



    /* section01 */
    .section01 {
        margin-bottom: 32vw;
    }
    .section01 .title {
        font-size: 6vw;
        margin-bottom: 2vw;
    }
    .section01 .inner .cont {
        flex-direction: column;
        margin-bottom: 10vw;
    }
    .section01 .inner .cont .left{
        width: 100%;
        margin-top: 8vw;
        margin-bottom: 2vw;
    }
    .section01 .inner .cont .left .slide {
        height: 54vw;
    }
    .section01 .inner .cont .left > p {
        bottom: 4vw;
        left: 2.16vw;
        font-size: 3vw;
    }
    .section01 .inner .cont .right {
        width: 100%;
        height: 50vw;
        padding: 4vw;
    }
    .section01 .inner .cont .right h1 {
        font-size: 5vw;
        margin-bottom: 4vw;
    }
    .section01 .inner .cont .right p {
        font-size: 3.2vw;
        margin-bottom: 0;
    }
    .section01 .inner .cont .right a {
        position: absolute;
        bottom: 4vw;
        right: 4vw;
        width: 30vw;
        height: 8vw;
        border-radius: 2vw;
        font-size: 3.2vw;
    }
    .section01 .inner .cont .left > .btn {
        position: absolute;
        right: 0;
        top: -8vw;
        display: flex;
        justify-content: flex-end;
    }
    .section01 .inner .cont .left > .progress-bar{
        position: absolute;
        left: 0;
        top: -5vw;
        border-radius: 1vw;
        width: 70%;
        transform: translateY(-50%);
        height: 1vw;
        background: #ddd;
    }
    .section01 .inner .cont .left > .progress-bar span{
        display: block;
        background: #2BA91A;
        height: 100%;
        width: 0;
        border-radius: 1vw;
    }
    .section01 .inner .cont .left > .btn a {
        width: 6vw;
        height: 6vw;
    }
    .section01 .inner .info {
        border-radius: 4vw;
        padding-top: 6vw;
        padding-bottom: 6vw;
    }
    .section01 .inner .info span {
        font-size: 2.8vw;
    }
    .section01 .inner .info h1 {
        font-size: 5vw;
        font-weight: 800;
        margin: 2vw 0 4vw;
        padding-bottom: 6vw;
    }
    .section01 .inner .info h1::after {
        width: 2vw;
        height: 2vw;
    }
    .section01 .inner .info p {
        font-size: 2.8vw;
    }
    /* section01 */


    /* section02 */
    .section02 {
        margin-bottom: 32vw;
    }
    .section02 .title {
        margin-bottom: 6vw;
    }
    .section02 .title h1 {
        font-size: 6vw;
        text-align: center;
        margin-bottom: 4vw;
    }
    .section02 .title p {
        font-size: 3.2vw;
        text-align: center;
    }
    .section02 .inner .cont {
        margin-bottom: 8vw;
    }
    .section02 .inner .cont figure {
        width: 44vw;
        height: 54vw;
        border-radius: 2vw;
        overflow: hidden;
    }
    .section02 .inner .cont .info {
        width: 48%;
        height: 54vw;
        padding: 4vw 0 0 0;
        border-radius: 2vw;
        text-align: center;
    }
    .section02 .inner .cont:nth-child(odd) .info {
        transform: translateY(4vw);
    }
    .section02 .inner .cont .info h1 {
        font-size: 4vw;
        margin-bottom: 4vw;
    }
    .section02 .inner .cont .info p {
        font-size: 2.7vw;
    }
    /* section02 */


    /* section03 */
    .section03 {
        margin-bottom: 10vw;
    }
    .section03 .inner {
        height: auto;
        flex-direction: column;
    }
    .section03 .inner .info {
        width: 100%;
        height: 100%;
        order: -1;
        margin-bottom: 6vw;
    }
    .section03 .inner .info p {
        font-size: 3.2vw;
    }
    .section03 .inner .info h1 {
        font-size: 6vw;
        margin: 2vw 0 6vw;
        padding-bottom: 6vw;
    }
    .section03 .inner .info a {
        width: 30vw;
        height: 8vw;
        border-radius: 2vw;
        font-size: 3.2vw;
    }
    .section03 .inner .map {
        width: 100%;
    }
    .section03 .inner .map iframe {
        width: 100%;
        height: 54vw;
        border-radius: 4vw;
    }
    /* section03 */




}