@charset "utf-8";

:root {
    --main-color1: #302d90;
}

/*** main_banner **/
#main_content {
    word-break: keep-all;
}

#main_content .visual {
    position: relative;
}

#main_content .visual {
    background-image: url(../images/banner1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /* height: 100vh; */
    height: 100%;
}

#main_content .visual .main_banner {
    position: absolute;
    margin-top: 110px;
    top: 25%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.main_banner {
    color: rgba(255, 255, 255, 1);
}

.main_banner .title {
    text-align: left;
}

.main_banner .title .small {
}

.main_banner .title .small span {
    -webkit-text-stroke: 1px white;
    color: transparent;
}

#main_content .visual .slide_box img {
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

#main_content .visual .main_banner2 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

#main_content .visual .main_banner2 .box {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}


#main_content .visual .main_banner2 .box .logo img {
}

#main_content .visual .main_banner2 .box .logo {
    display: flex;
    border: 1px solid white;
    background-color: white;
    border-radius: 50px;
    width: 15%;
    height: 60px;
    justify-content: center;
    align-items: center;
}

#main_content .visual .main_banner2 .box .name {
    padding-left: 7%;
    width: 55%;
}


#main_content .visual .main_banner2 .youtube_box {
    width: 400px;
    background-color: rgba(0, 89, 61, 1);
    border: 1px solid rgba(0, 89, 61, 1);
    border-radius: 15px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

#main_content .visual .main_banner2 .youtube_box .link {
    color: rgba(164, 199, 188, 1);
    cursor: pointer;
}


#main_content .visual .main_banner2 .blog_box {
    width: 400px;
    background-color: rgba(0, 130, 89, 1);
    border: 1px solid rgba(0, 130, 89, 1);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
}

#main_content .visual .main_banner2 .blog_box .link {
    color: rgba(164, 199, 188, 1);
    cursor: pointer;
}

#main_content .visual .main_banner2 .homepage_box {
    width: 400px;
    background-color: rgba(51, 51, 51, 1);
    border: 1px solid rgba(51, 51, 51, 1);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
}

#main_content .visual .main_banner2 .homepage_box .link {
    color: rgba(149, 149, 149, 1);
    cursor: pointer;
}


/* section1 */
.main_section .section1 {
    /* background-image: url(../images/main_bg1.png); */
    /* background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; */

    padding: 100px 0 0;
}

.main_section .section3 {
    background-image: url(../images/main_bg2.png);
    background-position: 100% 0%;
    background-repeat: no-repeat;
    /* background-size: cover; */
}

.main_section .section1 .top .left {
    width: 55%;
    height: 330px;
    box-sizing: border-box;
    padding: 30px 25px;
    border: 1px solid #D7D7D7;
}

.main_section .section1 .line {
    margin: 15px 0;
    width: 32px;
    border: 1px solid black;
}

.main_section .section1 .top .left .content {
    display: flex;
    align-items: center;
    padding: 5px 0;
    cursor: pointer;

}

.main_section .section1 .top .left .sub_title {
    color: white;
    background-color: #57B4AC;
    border-radius: 20.5px;
    padding: 10px 15px;
    margin-right: 30px;

}

.main_section .section1 .top .left .close {
    color: white;
    background-color: #CCCCCC;
    border-radius: 20.5px;
    padding: 10px 15px;
    margin-right: 30px;
}

.main_section .section1 .top .left .sub_content {
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.main_section .section1 .top .left .sub_date {
    color: #959595;
    margin-left: auto;
    margin-right: 20px;
}


.main_section .section1 .top .right {
    display: flex;
    width: 45%;
}

.main_section .section1 .top .right .box {
    display: flex;
    width: 33.3%;
    border: 1px solid #D7D7D7;
    justify-content: center;
    align-items: center;
    background-color: #F5F5F5;
    cursor: pointer;
}

.main_section .section1 .top .right .box1 {
    background-color: white;
}


.main_section .section1 .bottom .right,
.main_section .section1 .bottom .left {
    display: flex;
    width: 50%;
}

.main_section .section1 .bottom .left .box {
    width: 50%;
    background-color: #006F4C;
    color: white;
    height: 380px;
    box-sizing: border-box;
    padding: 30px;

}

.main_section .section1 .bottom .left .box1 {
    width: 50%;
}

.main_section .section1 .bottom .left .box .title {
    height: 25%;
}

.main_section .section1 .bottom .left .box .content {
    height: 50%;
}

.main_section .section1 .bottom .left .box .button {
    display: inline-flex;
    padding: 15px 10px;
    border: 1px solid #FFFFFF;
    width: 60%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.main_section .section1 .bottom .left .box .button img {
    height: 100%;
    box-sizing: border-box;
    padding-right: 10px;
}


.main_section .section1 .bottom .left .sub_box {
    display: flex;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    padding: 30px;
    height: 50%;
    position: relative;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.main_section .section1 .bottom .left .sub_box .content {
    color: #959595
}

.main_section .section1 .bottom .left .sub_box .icon {
    position: absolute;
    right: 10px;

}

/* 
.main_section .section1 .bottom .left .sub_box .icon img{
} */


.main_section .section1 .bottom .right .box1 {
    width: 30%;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    padding: 30px;
}

.main_section .section1 .bottom .right .box {
    width: 70%;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    padding: 30px;
}

.main_section .section1 .bottom .right .box1 .content {
    color: #959595;
}

.main_section .section1 .bottom .right .box {
    background-color: #57B4AC;
    color: white;
    height: 380px;
    box-sizing: border-box;
    padding: 30px;
}


.main_section .section1 .bottom .right .box .title {
    height: 25%;
}

.main_section .section1 .bottom .right .box .content {
    height: 50%;
}

.main_section .section1 .bottom .right .box .button {
    display: inline-flex;
    padding: 15px 10px;
    border: 1px solid #FFFFFF;
    width: 60%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.main_section .section1 .bottom .right .box .button img {
    height: 100%;
    box-sizing: border-box;
    padding-right: 10px;
}


/* mobile */
@media screen and (max-width: 767px) {

    #main_content .visual {
        overflow: hidden;
    }

    /* main_banner */
    #main_content .visual .slider1,
    .slide_box {
        height: 70vh;
    }

    /* .text_animation1{
        margin-bottom: 0;
    }

    .text_animation1{
        height: 60px;
    }

    @keyframes show-up{
        0%{
            margin-top: 60px;
            opacity: 0.3;
        }
    
        100%{
            margin-top: 0;
            opacity: 1;
        }
    } */
    /* main_banner */
    #main_content .visual .main_banner {
        position: absolute;
        top: 22.5%;
        left: 10%;
        transform: translate(0, 0);
        margin-top: 0;
    }

    /* main_banner2 */
    #main_content .visual .main_banner2 .box {
        display: flex;
        flex-direction: column;
    }

    #main_content .visual .main_banner2 {
        transform: translate(-50%, 0);
        bottom: 0;
    }

    #main_content .visual .main_banner2 .youtube_box,
    #main_content .visual .main_banner2 .blog_box,
    #main_content .visual .main_banner2 .homepage_box {
        width: 90vw;
    }

    /* section1 */
    .main_section .section1 {
        padding: 50px 0 0;
    }

    .main_section .section1 .top .left {
        padding: 20px 15px;
        height: 100%;
    }

    .main_section .section1 .box {
        display: flex;
        flex-direction: column;
    }

    .main_section .section1 .bottom .left .box1,
    .main_section .section1 .bottom .right .box1,
    .main_section .section1 .bottom .left .sub_box,
    .main_section .section1 .box .bottom .left .box,
    .main_section .section1 .box .bottom .right .box,
    .main_section .section1 .box .top .right .box,
    .main_section .section1 .box .right .box,
    .main_section .section1 .box .right,
    .main_section .section1 .box .left {
        width: 100%;
    }

    .main_section .section1 .bottom .left .sub_box,
    .main_section .section1 .bottom .right,
    .main_section .section1 .bottom .left,
    .main_section .section1 .top .right,
    .main_section .section1 .box .bottom,
    .main_section .section1 .box .top {
        display: flex;
        flex-direction: column;
    }

    .main_section .section1 .top .right .box {
        box-sizing: border-box;
        padding: 10px 0;
    }

    .main_section .section1 .top .right .box img {
        width: 40%;
    }


    .main_section .section1 .top .right .box .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main_section .section1 .top .left .sub_content {
        width: 75%;
    }

    #main_content .visual .main_banner2 .box .name {
        width: 50%
    }

    #main_content .visual .main_banner2 .box .logo {
        height: 50px;
    }

    .main_section .section1 .bottom .left .box,
    .main_section .section1 .bottom .right .box {
        height: 300px;
    }

    .main_section .section1 .top .left .sub_date {
        margin-right: 0;
    }

    /* main_sect1 */
    .section1 {
    }


    /* main_sect2 */
    .section2 {
    }

    /* main_sect3 */
    .section3 {
    }


}


/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #main_content .visual .main_banner{
        left: 55%;
        width: 100%;
    }
    .center {
        width: 90%
    }
    #main_content .visual .main_banner2 .homepage_box,
    #main_content .visual .main_banner2 .blog_box,
    #main_content .visual .main_banner2 .youtube_box {
        width: 250px;
    }

    #main_content .visual .main_banner2 .homepage_box .link,
    #main_content .visual .main_banner2 .blog_box .link,
    #main_content .visual .main_banner2 .youtube_box .link {
        width: 30%;
    }

    #main_content .visual .main_banner2 .box .name{
        padding-left: 5px;
    }
    #main_content .visual .main_banner2 .box .logo {
        height: 5vh;
    }
}


/* 화면 작아질때*/
@media screen and (min-width: 1025px) and (max-width: 1350px) {
    .center {
        width: 90%
    }

    #main_content .visual .main_banner2 .homepage_box,
    #main_content .visual .main_banner2 .blog_box,
    #main_content .visual .main_banner2 .youtube_box {
        width: 300px;
    }

    #main_content .visual .main_banner2 .homepage_box .link,
    #main_content .visual .main_banner2 .blog_box .link,
    #main_content .visual .main_banner2 .youtube_box .link {
        width: 30%;
    }

    #main_content .visual .main_banner2 .box .logo {
        height: 6vh;
    }
}