.gu_kv .kv_img_area{background-image: url("../images/kv_about-us_history.jpg")}
.gu_sub_wrapper .gu_sub_contents .contents_inner{max-width: 1116px}

.color_1{color: #c1e0ff !important;}
.color_2{color: #8fc6f2 !important;}
.color_3{color: #75bbf1 !important;}
.color_4{color: #4da3e1 !important;}
.color_5{color: #459ede !important;}
.color_6{color: #0c80cf !important;}
/* 2024.1.13修改 */
.color_active{color: #00559B !important;}


#HISTORY #WEB .history_box{}
#HISTORY #WEB .history_box.box_left_nav{position: absolute;width: 165px;height: 100vh;min-height: 730px;top: 128px;z-index: 1; opacity:1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition:opacity 0.2s;
    -webkit-transition:opacity 0.2s;
}
#HISTORY.on #WEB .sec_inner{position:relative;}
#HISTORY.on #WEB .sec_inner .fix_box .history_inner .history_box.box_left_nav{position:absolute;}
#HISTORY.fix #WEB .history_box.box_left_nav{position: fixed}
#HISTORY.ab #WEB .history_box.box_left_nav{position: absolute}
/* #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after{margin-top: 350px}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before{margin-top: 70px} */
#HISTORY #WEB .history_box.box_left_nav .history_pos ul{}
#HISTORY #WEB .history_box.box_left_nav .history_pos ul li{font-size: 22px;line-height: 38px;color: rgba(0,0,0,.42);transition: all 0.3s;}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after ul li{color: rgba(0,0,0,.42);visibility: hidden;opacity: 0}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after ul li.show{visibility: visible;opacity: 1;color: rgba(0,0,0,1);}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after ul li.hide{color: rgba(0,0,0,.42);visibility: visible;opacity: 1}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul li{color: rgba(0,0,0,.42);visibility: visible;opacity: 1}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul li.hide{opacity: 0;visibility: hidden}
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul li a{color: inherit}
#HISTORY #WEB .history_box.box_left_nav .history_pos ul li sup{font-size: 12px;margin-left: 5px}
#HISTORY #WEB .history_box.box_left_nav .history_num_before{}
#HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner{font-size: 0;overflow: hidden;display: flex;align-items: center;justify-content: flex-end;}
#HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list{display: inline-block;vertical-align: top;position: relative;height: 265px;width:50%;overflow: hidden;transition: color 0.1s;font-size: 148px;color: #00559B;line-height: 148px;}
#HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list>div {
    font-size: 148px;
    font-family: 'Alimama FangYuanTi VF';
    line-height: 160px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list>div.on {
    opacity: 1
}


#HISTORY #WEB .history_box.box_right_list{padding-left: 170px;position: relative;padding-bottom: 80px}
/* #HISTORY #WEB .history_box.box_right_list .box_inner{padding-top: 40px} */
#HISTORY #WEB .history_box.box_right_list .box_list{border-top: 1px solid rgba(0,0,0,.1);margin-top: 50px;}
#HISTORY #WEB .history_box.box_right_list .box_list:first-child{border-top: 0;margin-top: 0;padding-top: 0}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head{font-size: 0;padding-top: 70px}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head>div{display: inline-block;vertical-align: middle}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head .num{font-size: 148px;color: #EAEBF0;line-height: 148px;width: 290px;overflow: hidden;height: 170px;font-family: 'Alimama FangYuanTi VF';}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc{width: calc(100% - 340px)}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy{font-size: 18px;line-height: 28px; font-weight:400;color:#182B62}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy span{display: block;margin-top: 12px;}
#HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy span:first-child{margin-top: 0}
#HISTORY #WEB .history_box.box_right_list .box_list .list_cnt{margin-top: 0px;text-align: left;padding-left:290px;box-sizing: border-box;}
.xdev_swiper_history_container{width:460px;}
#HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_img{border-radius: 8px;}
#HISTORY #WEB .history_box.box_right_list .box_list .list_cnt img{width:100%;height: 300px;object-fit: cover;border-radius: 8px;}



/* ================================== set Motion ================================== */
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after{opacity: 0;transform: translateX(-20px);
    transition: all 1.5s cubic-bezier(.3,0,.07,.99);
}
/* #HISTORY #WEB .history_box.box_left_nav .history_num_before{opacity: 0;transform: translateY(100px);
    transition: all 1.5s cubic-bezier(.3,0,.07,.99);
} */
#HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul{opacity: 0;transform: translateX(-20px);
    transition: all 1.5s cubic-bezier(.3,0,.07,.99);
}
#HISTORY #WEB .history_box.box_right_list .list1 .num{opacity: 0;transform: translateY(130px);
    transition: all 1.5s cubic-bezier(.3,0,.07,.99);
}
#HISTORY #WEB .history_box.box_right_list .list1 .desc .tit{opacity: 0;transform: translateY(20px);
    transition: all 1.5s cubic-bezier(.3,0,.07,.99);
}
#HISTORY #WEB .history_box.box_right_list .list1 .desc .copy{opacity: 0;transform: translateY(30px);
    transition: all 1.5s cubic-bezier(.3,0,.07,.99);
}
#HISTORY #WEB .history_box.box_right_list .list2,
#HISTORY #WEB .history_box.box_right_list .list3,
#HISTORY #WEB .history_box.box_right_list .list4,
#HISTORY #WEB .history_box.box_right_list .list5,
#HISTORY #WEB .history_box.box_right_list .list6{opacity: 0;transition: all 1.5s cubic-bezier(.3,0,.07,.99);}


/* ================================== action Motion ================================== */
#HISTORY.enter #WEB .history_box.box_left_nav .history_pos.pos_after{opacity: 1;transform: translateX(0);transition-delay:0s;}
#HISTORY.enter #WEB .history_box.box_left_nav .history_num_before{opacity: 1;transform: translateY(0);transition-delay: 0.2s}
#HISTORY.enter #WEB .history_box.box_left_nav .history_pos.pos_before ul{opacity: 1;transform: translateX(0);transition-delay: 0.2s}
#HISTORY.enter #WEB .history_box.box_right_list .list1 .num{opacity: 1;transform: translateY(0);transition-delay: 0.3s}
#HISTORY.enter #WEB .history_box.box_right_list .list1 .desc .tit{opacity: 1;transform: translateY(0);transition-delay: 0.4s}
#HISTORY.enter #WEB .history_box.box_right_list .list1 .desc .copy{opacity: 1;transform: translateY(0);transition-delay: 0.5s}
#HISTORY.enter #WEB .history_box.box_right_list .list2,
#HISTORY.enter #WEB .history_box.box_right_list .list3,
#HISTORY.enter #WEB .history_box.box_right_list .list4,
#HISTORY.enter #WEB .history_box.box_right_list .list5,
#HISTORY.enter #WEB .history_box.box_right_list .list6{opacity: 1;transition-delay: 0.8s}






/* ================================== Tablet css ================================== */

@media all and (max-width: 1080px){
    .gu_sub_wrapper .gu_sub_contents .contents_inner.mobile{padding-top: 0}
}

#HISTORY #MOBILE{ margin:0; padding:0; position:relative; }
#HISTORY #MOBILE .history_nav{ position:absolute; top:0; left:0; background:#fff; z-index:1; transition:all 0.6s; width:100%; overflow:hidden; height:65px; padding:35px 0; }
#HISTORY #MOBILE .history_nav.top{ }
#HISTORY #MOBILE .history_nav.fix{ position:fixed; padding:0; height:66px }
#HISTORY #MOBILE .history_nav.fix .box_inner .history_pos{ border-bottom:1px solid #f6f6f6 }
#HISTORY.end .history_nav{ height:0px; }
#HISTORY #MOBILE .history_nav .box_inner{ position:relative }
#HISTORY #MOBILE .history_nav .box_inner .history_pos{ height:65px; overflow:hidden; padding:0; }
#HISTORY #MOBILE .history_nav .box_inner .history_pos ul{ width:100%; text-align:center }
#HISTORY #MOBILE .history_nav .box_inner .history_pos ul li{ display:inline-block; vertical-align:top; line-height:65px; margin:0 15px }
#HISTORY #MOBILE .history_nav .box_inner .history_pos ul li a{ display:inline-block; font-size:15px; color:rgba(0, 0, 0, .42) }
#HISTORY #MOBILE .history_nav .box_inner .history_pos ul li.on a{ color:rgba(0, 0, 0, 1) }
#HISTORY #MOBILE .history_box{padding-top:50px }
#HISTORY #MOBILE .history_box .box_inner{ }
#HISTORY #MOBILE .history_box .box_list{ border-bottom:1px solid #ccc; padding:40px 0 }
#HISTORY #MOBILE .history_box .box_list:last-child{ border-bottom:0 }
#HISTORY #MOBILE .history_box .box_list:first-child{ padding-top:0 }
#HISTORY #MOBILE .history_box .box_list .list_head{ font-size:0;display: flex;align-items: flex-start;justify-content: space-between; }
#HISTORY #MOBILE .history_box .box_list .list_head > div{ display:inline-block; vertical-align:middle }
#HISTORY #MOBILE .history_box .box_list .list_head .num{ font-size:68px; color:#182B62; line-height:68px; width:30%; overflow:hidden; height:80px; margin-bottom:16px;}
#HISTORY #MOBILE .history_box .box_list .list_head .desc{ flex:1; }
#HISTORY #MOBILE .history_box .box_list .list_head .desc .copy{ font-size:16px; line-height:28px; font-weight:400;color:#182B62}
#HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span{ display:block; margin-top:6px; }
#HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span:first-child{ margin-top:0 }
#HISTORY #MOBILE .history_box .box_list .list_cnt{ margin-top:0px; text-align:left }
#HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_img{ margin-top:20px }
#HISTORY #MOBILE .history_box .box_list .list_cnt img{ }

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px){
    #HISTORY #MOBILE .history_nav{height: 61px}
    #HISTORY #MOBILE .history_nav .box_inner .history_pos{height: 60px;border-bottom: 1px}
    #HISTORY #MOBILE .history_nav .box_inner .history_pos ul{width: 100%;overflow-x: scroll;overflow-y:hidden !important;-webkit-overflow-scrolling: touch;white-space: nowrap;padding: 0 20px;box-sizing: border-box;font-size: 0;height: 80px;}
    #HISTORY #MOBILE .history_nav .box_inner .history_pos ul li{line-height: 60px}
    #HISTORY #MOBILE .history_box .box_list .list_head{flex-direction: column;}
    #HISTORY #MOBILE .history_box .box_list .list_head>div{display: block}
    #HISTORY #MOBILE .history_box .box_list .list_head .num{width: 100%}
    #HISTORY #MOBILE .history_box .box_list .list_head .desc{width: 100%;}
    #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy {font-size:16px; line-height:28px;}
    #HISTORY #MOBILE .history_box .box_list .list_cnt{margin-top: 40px;text-align: left}
    #HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_img{margin-top: 10px}
    #HISTORY #MOBILE .history_box .box_list .list_cnt img{width: 100%}
    .xdev_swiper_history_container{width:100%;}

}