@charset "utf-8";

.row>* {
    padding-right: 0 !important;
}
.kso-contents > .container{
    padding-top: 0 !important;
}

    .inner{
        width: 100%;
        margin: 0 auto;
        padding: 50px 0 0 0;
        display: flex;
        flex-direction: column;
    }
    .image .img_box{
        margin: 0 auto;
        width: 90%;
        height: 30vh;
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        background-image: url(../img/visual.jpg);
        opacity: 0;
        transform: translateY(100px);
        transition: all 1s;
    }
    .image.act .img_box{
        opacity: 1;
        transform: translateY(0);
    }
    .text{
        padding: 20px;
    }
    
    /* con01 */
    .con01{
        width: 100%;
        height: 150px;
        position: relative;
    }
    .con01 .txt_box{
        z-index: 9;
        width: 100%;
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
    }
    .con01 .txt_box h1{
        all: unset;
        color: #000;
        display: block;
        font-size: 14px;
        margin-bottom: 20px;
        font-weight: normal;
        opacity: 0;
        transition:1s opacity;
    }
    .con01.act .txt_box h1{ opacity:1; }
    .con01 .txt_box p{
        all: unset;
        color: #000;
        font-size: 12px;
        line-height: 20px;
        opacity: 0;
        transition:2s;
        font-weight: 300;
    }
    .con01.act .txt_box p{
        opacity: 1;
        transform: translateY(0);
    }
    
    /* con02 */
    .con02{
        width: 100%;
    }
    .con02 p{
        margin: 0  !important;
    }
    .con02 ul{
        padding-left: 0;
        margin-bottom: 0;
    }
    .con02 li{
        width: 100%;
        box-sizing: border-box;
    }
    .con02 li .txt_box{
        width: 100%;
        margin: 0 auto;
    }
    .con02 li .txt_box p{
        /* all: unset; */
        color: #000;
        width: 100%;
        font-size: 12px;
        line-height: 20px;
        opacity: 0;
        transform: translateY(100px);
        transition: all 1s;
        font-weight: 300;
    }
    .con02 .group1.act li .txt_box p{
        opacity: 1;
        transform: translateY(0);
    }
    .con02 li .txt_box p strong{
        /* all: unset; */
        color: #000;
        font-weight: 300;
    }
    .con02 .group2 .txt_box p{
        transition: all 2s;
        padding-bottom: 10%;
    } 
    .con02 .group1 li{
        padding-bottom: 5%;
        text-align: left;
    }
    .con02 .group2.act li .txt_box p{
        opacity: 1;
        transform: translateY(0);
    }

    /* con03 */
    .con03{
        width: 100%;
        position: relative;
    }
    .con03 .txt_box{
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    .con03 .txt_box p{
        color: #000;
        width: 100%;
        font-size: 12px;
        line-height: 25px;
        margin-bottom: 10px;
        opacity: 0;
        transform: translateY(100px);
        transition: all 1s;
    }
    .con03.act .txt_box p{
        opacity: 1;
        transform: translateY(0);
    }
    .con03 .txt_box span{
        color: #000;
        font-size: 14px;
        opacity: 0;
        transform: translateY(100px);
        transition: all 2s;
    }
    .con03.act .txt_box span{
        opacity: 1;
        transform: translateY(0);
    }

@media (min-width: 768px){
    .inner{
        flex-direction: row;
    }

    .image{
        flex-basis: 50%;
        width: 100%;
        height: 100%;
        display: flex;
    }
    .text{
        flex-basis: 50%;
        padding: 0;
    }
    .image .img_box{
        align-items: center;
        width: 50%;
        height: 40vh;
    }
    /* con01 */
    .con01 .txt_box{
        text-align: left;
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }
    .con01 .txt_box h1{
        font-size: 16px;
    }
    .con01 .txt_box p{
        font-size: 14px;
        line-height: 22px;
    }
    
    /* con02 */

    .con02 li .txt_box p{
        font-size: 14px;
    }
    
    /* con03 */
    .con03{
    }
    .con03 .txt_box p{
        font-size: 14px;
        line-height: 22px;
    }
    .con03 .txt_box span{
        font-size: 16px;
    }
}

@media (min-width: 1200px){
    .inner{
        width: 1040px;
        margin: 0 auto;
        padding: 100px 0;
    }
    
    /* con01 */
    .con01{
        height: 150px;
        margin-bottom: 2%;
    }
    .con01 .txt_box{
        width: 100%;
        text-align: left;
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }
    .con01 .txt_box h1{
        font-size: 16px;
        margin-bottom: 20px;
    }
    .con01 .txt_box p{
        font-size: 14px;
        line-height: 30px;
    }
    
    /* con02 */
    .con02{
        width: 100%;
    }
    .con02 li{
        width: 100%;
        box-sizing: border-box;
    }
    .con02 li .txt_box{
        width: 100%;
    }
    .con02 li .txt_box p{
        width: 100%;
        font-size: 14px;
        line-height: 30px;
    }
    .con02 .group1 li{
        padding-bottom: 5%;
    }
    .con02 .group2 .txt_box p{
        padding-bottom: 5%;
    }

    /* con03 */
    .con03{
    }
    .con03 .txt_box{
        width: 100%;
    }
    .con03 .txt_box p{
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .con03 .txt_box span{
        font-size: 14px;
    }
}