.mission_section{width: 100%;background-image: url("jpg/about37f4.jpg");background-repeat: no-repeat;background-size: auto 670px;height: 100%;background-position: top}
.mission_box{max-width: 1200px;margin: 0 auto;padding: 7rem}
.mission_article{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 5rem;gap: 1rem;text-align: center;background: rgba(32, 34, 35, 0.7);max-width: 800px;margin: 0 auto}
.mission_article_tit{font-weight: 700;font-size: 2rem;line-height: 3rem;color: #FFFFFF}
.mission_article_cnt{font-weight: 500;font-size: 1rem;line-height: 1.5rem;color: #FFFFFF;margin-top: 1rem}
@media (max-width: 991px) {
    .mission_article{padding: 2rem}
}
@media (max-width: 768px) {
    .mission_box{padding: 3rem}
}
@media (max-width: 425px) {
    .mission_box{padding-left: 1rem;padding-right: 1rem}
}

/*timeline start*/
.timeline-section{width: 100%;background-color: #f5f5f5}
.timeline-section ul,li{list-style-type:none;margin: 0;padding: 0}
.timeline-container{max-width: 1200px;position: relative;margin-left: auto;margin-right: auto;text-align: center;padding-right: 15px;padding-left: 15px}
.timeline-container h2{position: relative;color: #232323;text-align: center;padding: 0 0 8px;display: inline-block;margin: 0;max-width: 80%}
.timeline-container h2:after {background-color: #ff6700;position: absolute;bottom: 0;min-width: 35px;content: '';width: 30%;height: 2px;left: 50%;margin-left: -15%}

.course-box {text-align: left;overflow: hidden}
.course-box ul{overflow: hidden}
.course-box ul li{margin-bottom: 25px;float: left}

.course-box h4 {font-size: 5em;color: #5a5858;height: 80px;line-height: 80px;margin-bottom: 36px;text-align: left}

.course-box .course-content {height: 400px;overflow: hidden;margin-bottom: 1em}
.course-box .course-content.active{height: auto}
.no-masking::before{display: none}
.course-box .course-content p{color: #5a5858}
.course-box .course-content p span {display: block;margin: 12px 0}

.course-timeline-box {position: relative;border-top: 1px solid #dfdfdf;margin: 20px 0 0;padding: 0 25px;overflow: hidden}
.course-timeline-box ul {width: 100%;overflow-x: auto;overflow-y: hidden;-ms-overflow-style: none;text-align: center;white-space: nowrap;position: relative}
.course-timeline-box ul li {display: inline-block;margin: 0 10px;overflow: hidden}
.course-timeline-box ul li a{color: #232323;font-size: 14px;display: inline-block;text-decoration: none;width: 76px}
.course-timeline-box ul li a.active {border-top: 2px solid #ff6700;font-size: 16px;color: #ff6700}

.course-timeline-box ul::-webkit-scrollbar {width: 6px;height: 6px;background-color: rgb(232, 232, 232)}
.course-timeline-box ul::-webkit-scrollbar-track {box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.5);border-radius: 10px;background-color: rgba(255, 255, 255, 0.5)}
.course-timeline-box ul::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 0 rgb(211, 211, 211);background-color: rgb(211, 211, 211)}
.btn-loadmore {display: inline-block;text-align: center;line-height: 36px;color: #666666}
.btn-loadmore span {vertical-align: middle;color: #666666;font-size: 16px;display: inline-block;margin-right: 5px}
.btn-loadmore .iconfont {font-size: 22px;color: #ff6700 !important;display: inline-block;vertical-align: middle}

@media (min-width: 992px){
    .timeline-container h2{position: absolute;top: 250px;left: 0}
    .timeline-container h2:after {margin-left: 0;left: 0;transform: translateX(0)}
    .course-box {padding: 130px 0 130px 228px;height: 768px}
    .course-box ul {width: 100%;padding-right: 70px}
    .course-box ul li {opacity: 0.1;display: block;-webkit-transition: all 0.4s;transition: all 0.4s;width: 100%}
    .course-box ul li.active {opacity: 1}
    .course-box .course-content{height: 410px;overflow: hidden;position: relative}
    .course-box .course-content::before {content: "";left: 0;height: 80px;width: 100%;position: absolute;bottom: 0;background: linear-gradient(rgba(245,245,245,0) 0%,rgba(245,245,245,1) 90%);z-index: 9}
    .course-box .course-content p{font-size: 16px;line-height: 32px}

    .course-timeline-box {position: absolute;right: 0;top: 0;bottom: 0;border: none;padding: 100px 0 0;width: auto;margin: 0;overflow: visible !important}

    .course-timeline-box ul {margin: 0;height: 580px;overflow-y: scroll;border-right: 1px solid #d7d7d7}
    .course-timeline-box ul li {margin: 18px 0;display: block}

    .course-timeline-box ul li a {height: 40px;line-height: 40px;opacity: 0.35}
    .course-timeline-box ul li a.active {border-right: 2px solid #ff6700;font-size: 16px;color: #ff6700;opacity: 1;border-top: 0}
    .course-timeline-box ul li a:hover {color: #ff6700;font-size: 16px;border-right: 2px solid #ff6700;opacity: 1}
}
@media (max-width: 991px){
    .timeline-container{padding-top: 2rem}
    .course-box h4 {margin-top: 20px;margin-bottom: 15px;text-align: center}
}
/*timeline end*/