/* --------- vision ----------- */



.company_vision{
    position: sticky;
    top:-30%;
    background: #f7f7f7;
}


.main_sub_title{
    width:80%;
    margin:0 auto;
    font-size: 30px;
    font-weight: 900;
    color:#666;
}

.company_vision ul{
    margin-top:100px;
}


.company_vision ul li{
    position: relative;
    display: flex;
    width:80%;
    margin:0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 3px 3px 7px rgb(34, 34, 34,0.3);
    margin-top:40px;
}

.company_vision ul li img{
    width:20%;
}


.company_vision_text{
    position: absolute;
    top:50%;
    left:18%;
    transform: translateY(-50%);
}

.company_vision_text h3{
    font-size: 40px;
}



/* ----------- since --------- */


.company_since{
    position: relative;
    width:100%;
    height:auto;
    background: #fff;
}

.company_since .main_title{
    text-align: center;
}

.history{
    position: relative;
    width:60%;
    margin:0 auto;
    margin-top:100px;
}


.company_since_main_wrap h3{
    width:200px;
    font-size: 40px;
    font-weight: 900;
}

.company_since_text{
    position: relative;
    margin-left:50px;
}


.history_content_wrap{
    display: flex;
    position: relative;
    margin-top:100px;
}

.history_content_wrap:first-child{
    margin-top:0;
}

.history_sub_wrap{
    width:100%;
}

.row_rever{
    flex-direction:row-reverse;
}


.history_title{
    position: relative;
    width:100%;
}

.history h1{
    position: absolute;
    right:0;
    padding-right: 100px;
    font-size: 70px;
    text-align: left;
    background:linear-gradient(to right, #fe9d37, #fd6e48);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}


.history .row_rever h1{
    position: absolute;
    left:0;
    padding-right:0;
    padding-left:100px;
}

.history_sub_wrap{
    text-align: right;
}

.history .row_rever .history_sub_wrap{
    text-align: left;
}

.history_text{
    margin-top:60px;
}

.history_text:nth-child(1){
    margin-top:0;
}


.history h2{
    font-size: 30px;
}

.history p{
    font-size: 25px;
    padding-left:100px;
    margin-top:15px;
}

.history .row_rever p{
    padding-left:0px;
    padding-right:100px;
}


.history_line_wrap{
    position: absolute;
    height:100%;
    width:4px;
    background: #666;
    left:50%;
    transform: translateX(-50%);
}

.history_line{
    width:100%;
    height:5%;
    background: #FEA036;
    transform-origin: 50% 0;
    animation: history_line_ani auto linear;
    animation-timeline: scroll();
}

@keyframes history_line_ani {
    from { transform: scaleY(0); }
    to { height:100%;; }
}



/* ------------- max 1500 -------------- */


@media (max-width:1500px) and (min-width:1024px){

    .main_section_wrap{
        padding-top:100px;
        padding-bottom:100px;
    }
    
    .main_title{
        width:90%;
        font-size: 30px;
    }

    
    .main_sub_title{
        width:90%;
        font-size: 30px;
    }
    
    .main_section_wrap p{
        font-size: 25px;
    }



    
/* --------- vision 1500 ----------- */


.company_vision ul{
    margin-top:60px;
}


.company_vision ul li{
    width:90%;
    margin-top:30px;
}


.company_vision ul li:first-child{
    margin-top:0px;
}

.company_vision img{
    width:200px;
}


.company_vision_text{
    left:22%;
}

.company_vision_text h3{
    font-size: 30px;
}



/* ----------- since 1500 --------- */



.company_since_wrap{
    width:90%;
    margin-top:60px;
}


.history{
    width:80%;
}


.history h1{
    font-size: 50px;
}


.main_section_wrap p{
    font-size: 20px;
}


.history_line{
    height:35%;
}


}





/* ------------- max 1023 -------------- */


@media (max-width:1023px) and (min-width:501px){

    .main_section_wrap{
        padding-top:60px;
        padding-bottom:60px;
    }
    
    .main_title{
        width:90%;
        font-size: 30px;
    }

    .company_vision ul{
        margin-top:0;
    }
    
    
    .main_sub_title{
        width:90%;
        font-size: 30px;
    }
    
    .main_section_wrap p{
        font-size: 15px;
    }



    
/* --------- vision 1023 ----------- */



.company_vision ul li{
    width:90%;
    margin-top:20px;
}


.company_vision ul li:first-child{
    margin-top:30px;
}

.company_vision img{
    width:180px;
}


.company_vision_text{
    left:180px;
}

.company_vision_text h3{
    font-size: 20px;
}

.company_vision_text p{
    font-size: 15px;
}

.company_vision ul li img{
    width:25%;
}


/* ----------- since 1023 --------- */

.company_since .main_title{
    text-align: left;
}

.history_content_wrap{
    display: block;
}

.history{
    width:90%;
    margin-top:30px;
}

.history_sub_wrap{
    text-align: left;
}

.history h2{
    font-size: 25px;
}

.history h1{
    position: static;
    font-size: 35px;
    padding-bottom:10px;
}

.history .row_rever h1{
    position: static;
    padding:0;
    padding-bottom:40px;
}


.history_line_wrap{
    left:0;
    transform: translatex(0);
}


.history_content_wrap{
    margin-left:5%;
    margin-top:30px;
}

.history_line{
    height:100%;
}

.history p{
    margin-top:0;
    padding:0;
}


.history_text{
    margin-top:20px;
}

.history .row_rever h1{
    padding-bottom:10px;
}

}







/* ------------- max 500 -------------- */


@media (max-width:500px){


    .main_section_wrap{
        padding-top:60px;
        padding-bottom:60px;
    }
    
    .main_title{
        width:90%;
        font-size: 25px;
    }

    
    .main_sub_title{
        width:90%;
        font-size: 20px;
    }
    
    .main_section_wrap p{
        text-align: center;
        font-size: 15px;
    }



    .company_vision ul{
        margin-top:0;
    }
    
/* --------- vision 1023 ----------- */



.company_vision ul li{
    width:90%;
    display: block;
    margin-top:20px;
    height:300px;
}


.company_vision ul li:first-child{
    margin-top:30px;
}

.company_vision img{
    position: absolute;
    top:4%;
    left:50%;
    transform: translateX(-50%);
    width:250px;
}


.company_vision_text{
    width:75%;
    top:auto;
    bottom:10%;
    left:50%;
    transform: translateX(-50%);
    text-align: center;
}

.company_vision_text h3{
    font-size: 20px;
}

.company_vision_text p{
    font-size: 15px;
}


.company_vision ul li img{
    width:70%;
}

/* ----------- since 1023 --------- */


.company_vision{
    top:-500px;
}

.company_since .main_title{
    text-align: left;
}

.history_content_wrap{
    display: block;
}

.history{
    width:90%;
    margin-top:30px;
}

.history_sub_wrap{
    text-align: left;
}

.history h2{
    font-size: 25px;
}

.history h1{
    position: static;
    font-size: 35px;
    padding-bottom:10px;
}

.history .row_rever h1{
    position: static;
    padding:0;
    padding-bottom:40px;
}


.history_line_wrap{
    left:0;
    transform: translatex(0);
}


.history_content_wrap{
    margin-left:5%;
    margin-top:60px;
}

.history_line{
    height:0%;
}

.history p{
    margin-top:10px;
    padding:0;
    text-align: left;
}


.history_text{
    margin-top:20px;
}

.history .row_rever h1{
    padding-bottom:10px;
}




}