@charset "utf-8";






@media screen and (min-width:801px){
/* history */
.history{position: relative; width: 90%; max-width: 1440px; margin: 200px auto;}
.history>.main_title{left: -100px; opacity: 0;}
.history .img_box img{width: 100%;}

.history_wrap{margin-top: 150px;}
.history_wrap>ul{display: flex; justify-content: center; height: 100vh; position: sticky; top: 25%;}
.history_wrap>ul>li:first-child{margin-right: 8%;}
.history_wrap>ul>li{margin-bottom: 200px; position: relative; top: 100px; opacity:0;  background-color: #fff;}

.history_wrap>ul>li h3{position: relative; margin-bottom: 80px; border-bottom: 2px solid #FFAA45;}

.history_wrap .title_box{position: relative;}

.history_wrap .text_box{position: relative; width: 40%;padding-left: 5%;box-sizing: border-box; border-left: 1px solid #FFAA45;}
.history_wrap .text_box h4{font-size: 1.8em; font-weight: 500; margin: 30px 0 20px 0 ;}
.history_wrap .text_box p{font-size: 1.2em; margin-bottom: 10px;}
.history_wrap .text_box h4:first-child{margin: 0 0 20px 0 ;}
    .history .img_box img{width: 100%;}
}

@media screen and (min-width:601px) and (max-width:800px) {
    /* history */
.history{position: relative; width: 90%; max-width: 1440px; margin: 200px auto;}
.history>.main_title{left: -100px; opacity: 0;}
.history .img_box img{width: 100%;}

.history_wrap{margin-top: 150px;}
.history_wrap>ul{display: flex; justify-content: center; height: 100vh; position: sticky; top: 25%;}
.history_wrap>ul>li:first-child{margin-right: 4%;}
.history_wrap>ul>li{margin-bottom: 200px; position: relative; top: 100px; opacity:0;  background-color: #fff;}

.history_wrap>ul>li h3{position: relative; margin-bottom: 80px; border-bottom: 2px solid #FFAA45;}

.history_wrap .title_box{position: relative;}

.history_wrap .text_box{position: relative; width: 80%;padding-left: 5%;box-sizing: border-box; border-left: 1px solid #FFAA45;}
.history_wrap .text_box h4{font-size: 1.4em; font-weight: 500; margin: 30px 0 20px 0 ;}
.history_wrap .text_box p{font-size: 1.1em; margin-bottom: 10px;}
.history_wrap .text_box h4:first-child{margin: 0 0 20px 0 ;}

}

@media screen and (max-width:600px) {
    /* history */
    .history{position: relative; width: 90%; max-width: 1440px; margin: 200px auto;}
    .history>.main_title{left: -100px; opacity: 0;}
    .history .con_title{font-size: 1.6em;}
    .history .img_box img{width: 50%;}
    
    .history_wrap{margin-top: 150px;}
    .history_wrap>ul{margin-bottom: 100px;}
    /* .history_wrap>ul:last-child{transform: translateY(-10%); top: 20%;} */
    .history_wrap>ul>li:first-child{margin-right: 8%;}
    .history_wrap>ul>li{position: relative; top: 100px; opacity:0;  background-color: #fff;}
    
    .history_wrap>ul>li h3{position: relative; margin-bottom: 30px; border-bottom: 2px solid #FFAA45;}
    
    .history_wrap .title_box{position: relative;}
    
    .history_wrap .text_box{position: relative; width: 100%;padding-left: 5%;box-sizing: border-box; border-left: 1px solid #FFAA45; margin-top: 50px;}
    .history_wrap .text_box h4{font-size: 1.4em; font-weight: 500; margin: 30px 0 20px 0 ;}
    .history_wrap .text_box p{font-size: 1.1em; margin-bottom: 10px;}
    .history_wrap .text_box h4:first-child{margin: 0 0 20px 0 ;}
}