@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

.render_text{
    image-rendering: -webkit-optimize-contrast;
}

.sub_brand .container{
    overflow: hidden;
    max-width:none;
}
.sub_brand .container .inner img{
    width: auto;
}

.sub_brand .sec{
    position: relative;
    padding-top: 12.5%;
    text-align: center;
}
.sub_brand .sec .title{
    font-size: 60px;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 700;
    color:#000;
    margin-bottom: 2.5%;
}
.sub_brand .sec .title_en{
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    color:#000;
    font-size: 40px;
}

.sub_brand .sec01 .axe {
    position: absolute;
    top: 0;
    right: 25%;
}
.sub_brand .sec01 .content{
    text-align: center;
    padding: 5% 0;
    position: relative;
}
.sub_brand .sec01 .content::before{
    content: "";
    width:100%;
    height:0;
    background-color:#dde2df;
    position: absolute;
    left: 0;
    top:0;
    transition: 2s 0.3s all;
}
.sub_brand .sec01 .content.aos-animate::before{
    height: 100%;
}
.sub_brand .sec01 .content .wrap{
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.sub_brand .sec01 .content .text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.sub_brand .sec01 .content .image{
    transform: translateY(50%);
}

.sub_brand .sec02{
    position: relative;
    max-width: 1100px;
    text-align: left;
    margin: 0 auto;
}
.sub_brand .sec02 .title_wrap {
    position: relative;
    padding-top: 2.5%;
    margin-bottom: 15%;
}
.sub_brand .sec02 .title_wrap .text{
    position: absolute;
    right: 0;
    top: 0;
}
.sub_brand .sec02 .image_wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.sub_brand .sec03{
    margin-bottom: 7.5%;
}
.sub_brand .sec03 .axe {
    position: absolute;
    top: 0;
    left: 0;
}
.sub_brand .sec03 .title_wrap {
    position: relative;
    padding-top: 15%;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 5%
}
.sub_brand .sec03 .content{
    text-align: center;
    padding: 5% 0;
    position: relative;
}
.sub_brand .sec03 .content::before{
    content: "";
    width:100%;
    height:0;
    background-color:#dde2df;
    position: absolute;
    left: 0;
    top:0;
    transition: 2s 0.3s all;
}
.sub_brand .sec03 .content.aos-animate::before{
    height: 100%;
}
.sub_brand .sec03 .content .wrap{
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.sub_brand .sec03 .content .text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.sub_brand .sec03 .content .image{
    transform: translateY(50%);
}

.sub_brand .container .inner .MB_V{
    image-rendering: -webkit-optimize-contrast;
}
.sub_brand .container .inner .MB_V img{
    width: 100%;
}

@media (max-width:1100px){
    .sub_brand .container .inner img{
        width: 100%;
    }
    .sub_brand .sec .title{
        font-size: 30px;
        text-align: left;
    }
    .sub_brand .sec .title_con{
        display: block;
    }
    .sub_brand .sec .title_en{
        font-size: 30px;
    }

    .sub_brand .sec01{
        padding-top:0;
    }
    .sub_brand .sec01 .title_wrap{
        position: relative;
        margin-bottom: 10%;
    }
    .sub_brand .sec01 .title {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
        left: 2.5%;
    }
    .sub_brand .sec01 .axe{
        max-width: max-content;
        width: 7.5%;
        right: 2.5%;
        position: relative;
        margin-left: auto;
    }
    .sub_brand .sec01 .content.aos-animate::before{
        height: 75%;
    }
    .sub_brand .sec01 .content .wrap{
        flex-direction: column;
    }
    .sub_brand .sec01 .content .text{
        width: 80%;
        margin-left: auto;
        margin-right: 2.5%;
    }
    .sub_brand .sec01 .content .text_image{
        width: 80%;
        margin-left: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        text-align: right;
    }
    .sub_brand .sec01 .content .image{
        width: 75%;
        position: relative;
        transform: translateY(0);
    }

    .sub_brand .sec02 .title_wrap .text{
        position: relative;
        width: 80%;
        left: auto;
        top: auto;
        margin-left: auto;
        margin-right: 5%;
    }
    .sub_brand .sec02 .title{
        margin-left: 5%;
    }
    .sub_brand .sec02 .title_en{
        margin-left: 5%;
        margin-bottom: 5%;
    }
    .sub_brand .sec02 .image_wrap{
        align-items: flex-start;
    }
    .sub_brand .sec02 .image_wrap .image_right{
        padding-left: 2.5%;
    }

    .sub_brand .sec03{
        padding:0;
    }
    .sub_brand .sec03 .title_wrap{
        position: relative;
        margin-bottom: 10%;
        padding:0;
    }
    .sub_brand .sec03 .title {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
        right: 2.5%;
        text-align: right;
    }
    .sub_brand .sec03 .axe{
        max-width: max-content;
        width: 7.5%;
        right: 2.5%;
        position: relative;
        margin-left: 5%;
    }
    .sub_brand .sec03 .content{
        padding-bottom: 15%;
    }
    .sub_brand .sec03 .content.aos-animate::before{
        height: 35%;
        top: auto;
        bottom: 0;
    }
    .sub_brand .sec03 .content .wrap{
        flex-wrap: wrap;
    }
    .sub_brand .sec03 .content .text{
        width: 80%;
        margin: 0 auto;
        margin-top: 15%;
    }
    .sub_brand .sec03 .content .text_image{
        width: 75%;
        margin-top: 15%;
        margin-bottom: 5%;
    }
    .sub_brand .sec03 .content .image{
        transform: translateY(0);
        width: 75%;
        margin-left: auto;
        margin-right: 5%;
    }
}
@media (max-width:650px){

    .sub_brand .sec .title{
        font-size: 7vw;
    }
    .sub_brand .sec .title_en{
        font-size: 5vw;
    }
}