/* home page */
.grid{padding: 80px 60px;}
.grid .m_title{width: 1400px; margin: 0 auto;}
.grid .m_title{font-size: 50px; line-height: 50px; color: #000; text-align: center; }
.grid .m_title span{display: inline-block; width: 55px; height: 55px; background-color: #1E88E5; position: relative; vertical-align: middle; margin-right:30px;}
.grid .m_title span em{font-family: 'Landon'; font-size: 64px; color: #fff; position: absolute; right: -2px; bottom: 0px; font-style: unset; }
.grid.step1 .list{margin-top: 96px; display: flex; justify-content:space-between;}
.grid.step1 .item{width: 29.16666%;position: relative; opacity: 0;}
.grid.step1 .item .img_box{width: 100%; text-align: center;}
.grid.step1 .item .desc{position: absolute; right: 0px; bottom: -30px; z-index: 1; width: calc(66.66666% - 60px); padding: 30px; background-color: #fff; font-size: 16px; color: #333333; line-height: 30px; height: 90px; box-shadow: 0px 10px 20px rgba(0,0,0,0.08);}
.grid.step1 .inq_btn{display: block; width: 280px; height: 50px; line-height: 50px; text-align: center; margin: 80px auto 0px; background-color: #1E88E5; border-radius: 25px; font-size:20px; color: #fff;}

.grid.step1.cur .list .item{-webkit-animation: up_to_down 1s 0.5s ease-out forwards; animation: up_to_down 1s 0.5s ease-out forwards;}

@keyframes up_to_down{
    0% { transform: translateY(-30px); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}

.item_box{display: flex; justify-content:space-between; align-items:center; width: 1400px; margin: 0 auto;}
.item_box .left{position: relative;}
.item_box .left .po_img{position: absolute;}
.item_box .right{}
.item_box .right .tit{font-size: 40px; color: #000; line-height: 40px; }
.item_box .right .tit .green{color: #1E88E5}
.item_box .right .list{margin-top: 15px;}
.item_box .right .list li{font-size: 20px; line-height: 40px; color: #636363; padding-left: 24px; position: relative;}
.item_box .right .list li:before{content: ''; position: absolute; left: 0px; top: 17px; width: 6px; height: 6px; border-radius: 3px; background-color: #1ac488;}
.item_box .right .desc{font-size: 20px; color: #636363; line-height: 40px; margin-top: 15px;}
.item_box .right .btn{display: block; width: 280px; height: 50px; text-align: center; margin-top: 25px; background-color: #1E88E5; border-radius: 25px; font-size:20px; color: #fff;}

.item_box.item0{margin-top: 50px}
.item_box.item0 .left{border: 1px solid #dedede;border-radius: 5px;width: 49%;padding: 40px 50px 60px;box-sizing: border-box;}
.item_box.item0 .right{border: 1px solid #dedede;border-radius: 5px;width: 49%;padding: 40px 50px 60px;box-sizing: border-box;}
.item_box.item0 .page_img_box{text-align: center;position: relative;display: inline-block;}
.item_box.item0 .page_title{font-size: 40px;color: #1E88E5;text-align: center;margin-top: 15px}
.item_box.item0 .page_content{font-size: 18px;line-height: 34px;color: #636363;margin-top: 10px;min-height: 102px}
.item_box.item0 .btn {display: block;width: 280px;height: 50px;text-align: center;background-color: #1E88E5;border-radius: 25px;font-size: 20px;color: #fff;margin: 25px auto 0;}
.item_box.item0 .po_img{position: absolute;}
.item_box.item0 .left .po_img.img1{right: 0;bottom: 115px;opacity: 0}
.item_box.item0 .left .po_img.img2{right: 50px;bottom:40px;opacity: 0}
.item_box.item0.cur .left .po_img.img1 {
    -webkit-animation: type1_step2_up 1s 0.5s ease-out forwards;
    animation: type1_step2_up 1s 0.5s ease-out forwards;
}
.item_box.item0.cur .left .po_img.img2 {
    -webkit-animation: type1_step2_up 1.25s 0.75s ease-out forwards;
    animation: type1_step2_up 1.25s 0.75s ease-out forwards;
}
.item_box .right .po_img.img1{right: 0;bottom: 55px;opacity: 0}
.item_box .right .po_img.img2{bottom: 0;left: 20px;width: 81px;height: 81px;transform: scale(0);border-radius: 100%;box-shadow: 0px 0px 30px #ccc;}
.item_box .right .po_img.img3{    bottom: 12px;left: 112px;width: 55px;height: 55px;transform: scale(0);border-radius: 100%;box-shadow: 0px 5px 20px #eee;}
.item_box .right .po_img.img4{bottom: 12px;left:178px;width: 55px;height: 55px;transform: scale(0);border-radius: 100%;box-shadow: 0px 5px 20px #eee;}

.item_box.item0.cur .right .po_img.img1 {
    -webkit-animation: type1_step2_up 1s 0.5s ease-out forwards;
    animation: type1_step2_up 1s 0.5s ease-out forwards;
}

.item_box .right .po_img.img2 {
    -webkit-animation: type1_step2_img_big 0.5s 1.5s ease-out forwards;
    animation: type1_step2_img_big 0.5s 1.5s ease-out forwards;
}

.item_box .right .po_img.img3 {
    -webkit-animation: type1_step2_img_big 0.5s 2s ease-out forwards;
    animation: type1_step2_img_big 0.5s 2s ease-out forwards;
}

.item_box .right .po_img.img4 {
    -webkit-animation: type1_step2_img_big 0.5s 2.5s ease-out forwards;
    animation: type1_step2_img_big 0.5s 2.5s ease-out forwards;
}
@media screen and (max-width:1280px){
    .item_box.item0 .page_content{min-height: 136px}
}

.grid.step2{ background: #ffffff;}
.item_box.item1{background: #ffffff; padding-top: 20px;}
.item_box.item1 .left{width: 35.76388%; margin-left:4.51388%;}
.item_box.item1 .left .po_img.img1{top: -61px; right: 64px; opacity: 1;}
.item_box.item1 .left .po_img.img2{top: 48px; left: 55px; opacity: 1;}
.item_box.item1 .left .po_img.img3{bottom: 132px; right: -9px; opacity: 1;}

.item_box.item1.cur .left .po_img.img1{-webkit-animation: type1_step2_up 1s 0.5s ease-out forwards; animation: type1_step2_up 1s 0.5s ease-out forwards;}
.item_box.item1.cur .left .po_img.img2{-webkit-animation: type1_step2_up 1s 1s ease-out forwards; animation: type1_step2_up 1s 1s ease-out forwards;}
.item_box.item1.cur .left .po_img.img3{-webkit-animation: type1_step2_up 1s 1.5s ease-out forwards; animation: type1_step2_up 1s 1.5s ease-out forwards;}

.item_box.item1 .right{width: 38.75%; margin-right: 4.86111%;}
.item_box.item2{flex-direction:row-reverse;}
.item_box.item2 .left{width: 52.22222%; text-align: right;}
.item_box.item2 .left .banner_box{width: 580px; height: 404px; position: absolute; top: 40px; right: 110px; box-shadow: 0px 10px 20px rgba(0,0,0,0.08); opacity: 0;}
.item_box.item2 .left .banner_box .main_ul{width: 580px; height: 404px; overflow: hidden;}
.item_box.item2 .left .left_btn{display: inline-block; width: 37px; height: 37px; background-color: #fff; z-index: 2; border-radius: 18px; box-shadow: 0px 10px 20px rgba(0,0,0,0.1); position: absolute; left: -17px; top: calc(50% - 17.5px);}
.item_box.item2 .left .left_btn:before{content: '';  width: 0;height: 0;border-top: 7px solid transparent;border-right: 8px solid #b3b3b3;border-bottom: 7px solid transparent; position: absolute; left: 35%; top: calc(50% - 7px);}
.item_box.item2 .left .left_btn:after{content: '';  width: 0;height: 0;border-top: 7px solid transparent;border-right: 8px solid #fff;border-bottom: 7px solid transparent; position: absolute; left: calc(35% + 1px); top: calc(50% - 7px);}

.item_box.item2 .left .right_btn{display: inline-block; width: 37px; height: 37px; background-color: #fff; z-index: 2; border-radius: 18px; box-shadow: 0px 10px 20px rgba(0,0,0,0.1); position: absolute; right: -17px; top: calc(50% - 17.5px);}
.item_box.item2 .left .right_btn:before{content: '';  width: 0;height: 0;border-top: 7px solid transparent;border-left: 8px solid #b3b3b3;border-bottom: 7px solid transparent; position: absolute; right: 35%; top: calc(50% - 7px);}
.item_box.item2 .left .right_btn:after{content: '';  width: 0;height: 0;border-top: 7px solid transparent;border-left: 8px solid #fff;border-bottom: 7px solid transparent; position: absolute; right: calc(35% + 1px); top: calc(50% - 7px);}
.item_box.item2 .left .s_pic_list{margin-top: 40px; margin-left: -17px;}
.item_box.item2 .left .s_pic_list ul{width: 609px; display: flex; justify-content:space-between;}
.item_box.item2 .left .s_pic_list ul li{display: inline-block; width: 131px; height: 81px; border:1px solid transparent; border-radius: 5px; overflow: hidden; cursor: pointer; text-align: center;}
.item_box.item2 .left .s_pic_list ul li img{width: 100%; max-height: unset;}
.item_box.item2 .left .s_pic_list ul li.swiper-slide-thumb-active{border:1px solid #1ac488;}
.item_box.item2 .right{width: 38.75%; margin-left: 8.33333%; }

.item_box.item2 .left .banner_box{-webkit-animation: type1_step2_up 1s 0s ease-out forwards; animation: type1_step2_up 1s 0s ease-out forwards;}

.item_box.item3{margin-top: 326px;}
.item_box.item3 .left{width: 30.625%; margin-left: 1.875%;}

.item_box.item3 .left .po_img{transition:all .3s; }
.item_box.item3 .left .po_img.img0{top:-63px ;left: 93px; opacity:0;}
.item_box.item3 .left .po_img.img1{top:50px ;right: -210px; opacity:0;}
.item_box.item3 .left .po_img.img2{bottom:63px ;left: 117px; width: 81px; height: 81px; transform: scale(0);border-radius: 100%;box-shadow: 0px 0px 30px #ccc;}
.item_box.item3 .left .po_img.img3{bottom:73px ;left: 224px; width: 55px; height: 55px; transform: scale(0);border-radius: 100%;box-shadow: 0px 5px 20px #eee;}
.item_box.item3 .left .po_img.img4{bottom:73px ;left: 301px; width: 55px; height: 55px; transform: scale(0);border-radius: 100%;box-shadow:0px 5px 20px #eee;}

.item_box.item3.cur .left .po_img.img0{-webkit-animation: type1_step2_up 1s 0.5s ease-out forwards; animation: type1_step2_up 1s 0s ease-out forwards;}
.item_box.item3.cur .left .po_img.img1{-webkit-animation: type1_step2_up 1s 0.5s ease-out forwards; animation: type1_step2_up 1s 0.5s ease-out forwards;}

.item_box.item3.cur .left .po_img.img2{-webkit-animation: type1_step2_img_big 0.5s 1.5s ease-out forwards; animation: type1_step2_img_big 0.5s 1.5s ease-out forwards;}
.item_box.item3.cur .left .po_img.img3{-webkit-animation: type1_step2_img_big 0.5s 2s ease-out forwards; animation: type1_step2_img_big 0.5s 2s ease-out forwards;}
.item_box.item3.cur .left .po_img.img4{-webkit-animation: type1_step2_img_big 0.5s 2.5s ease-out forwards; animation: type1_step2_img_big 0.5s 2.5s ease-out forwards;}

@-webkit-keyframes type1_step2_up {
    0% { transform: translateY(30px); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}

@-webkit-keyframes type1_step2_img_big {
    0% {transform: scale(0);}
    50% { transform: scale(1.2);}
    100% { transform: scale(1);}
}

.item_box.item4{flex-direction:row-reverse;}
.item_box.item4 .left{width:39.86111%; margin-right: 7.56944%;}
.item_box.item4 .left .po_img{position: absolute; transition:all .3s; opacity: 1;}
.item_box.item4 .left .img3{}
.item_box.item4 .left .img3 .technology1{position: absolute; left: 50%; bottom: 77px; transform: translateX(-50%);}
.item_box.item4 .left .img3 .technology1 .tec_list{ margin: 0 0 -5px -7px;}
.item_box.item4 .left .img3 .technology1 .tec_list.small{ margin-bottom: 0; height: 20px; line-height: 20px;}
.item_box.item4 .left .img3 .technology1 .tec_list.small .sec{ display: flex; width: 60px; position: absolute; left: 50%; bottom: 30px; margin-left: 4px; height: 20px; line-height: 20px; font-size: 14px; color: #1E88E5; transform: translateX(-50%);}
.item_box.item4 .left .img3 .technology1 .tec_list.small em{ margin-left: 3px; font-style: inherit;}
.item_box.item4 .left .img3 .technology1 .tec_list.small span{ display: inline; font-size: 14px; color: #1E88E5;}
.item_box.item4 .left .img3 .technology1 span{ font-size: 26px; color: #424242;}
.item_box.item4 .left .img4{bottom: 0px; right: 205px;}
.item_box.item4 .right{width: 40%; margin-left: 8.33333%;}
.item_box.item4 .left .po_img.icon0{opacity: 1; top: 0px; right: 11px; -moz-animation: effect2-icon0-anim 4s; -webkit-animation: effect2-icon0-anim 4s; animation: effect2-icon0-anim 4s;}
.item_box.item4 .left .po_img.icon1{opacity: 1; top: 20px; left: 52px; -moz-animation: effect2-icon1-anim 4s; -webkit-animation: effect2-icon1-anim 4s; animation: effect2-icon1-anim 4s;}
.item_box.item4 .left .po_img.icon2{opacity: 1; bottom: 17px; left: 25px; -moz-animation: effect2-icon2-anim 4s; -webkit-animation: effect2-icon2-anim 4s; animation: effect2-icon2-anim 4s;}
.item_box.item4 .left .po_img.icon3{opacity: 1; bottom: 0px; right: 120px; -moz-animation: effect2-icon3-anim 4s; -webkit-animation: effect2-icon3-anim 4s; animation: effect2-icon3-anim 4s;}

.grid.step2 .item_box.item3{margin: 60px auto;}
.grid.step2 .item_box.item3 .left{width: 30.625%; margin-left: 1.875%;}
.grid.step2 .item_box.item3 .left .po_img{transition:all .3s; }
.grid.step2 .item_box.item3 .left .po_img.img0{top:-63px ;left: 0px; opacity:0;}
.grid.step2 .item_box.item3 .left .po_img.img1{top:50px ;right: 210px; opacity:0;}
.grid.step2 .item_box.item3 .left .po_img.img2{bottom:63px ;left: 117px; width: 81px; height: 81px; transform: scale(0);border-radius: 100%;box-shadow: 0px 0px 30px #ccc;}
.grid.step2 .item_box.item3 .left .po_img.img3{bottom:73px ;left: 224px; width: 55px; height: 55px; transform: scale(0);border-radius: 100%;box-shadow: 0px 5px 20px #eee;}
.grid.step2 .item_box.item3 .left .po_img.img4{bottom:73px ;left: 301px; width: 55px; height: 55px; transform: scale(0);border-radius: 100%;box-shadow:0px 5px 20px #eee;}
.grid.step2 .item_box.item3.cur .left .po_img.img0{-webkit-animation: type1_step2_up 1s 0.5s ease-out forwards; animation: type1_step2_up 1s 0s ease-out forwards;}
.grid.step2 .item_box.item3.cur .left .po_img.img1{-webkit-animation: type1_step2_up 1s 0.5s ease-out forwards; animation: type1_step2_up 1s 0.5s ease-out forwards;}
.grid.step2 .item_box.item3.cur .left .po_img.img2{-webkit-animation: type1_step2_img_big 0.5s 1.5s ease-out forwards; animation: type1_step2_img_big 0.5s 1.5s ease-out forwards;}
.grid.step2 .item_box.item3.cur .left .po_img.img3{-webkit-animation: type1_step2_img_big 0.5s 2s ease-out forwards; animation: type1_step2_img_big 0.5s 2s ease-out forwards;}
.grid.step2 .item_box.item3.cur .left .po_img.img4{-webkit-animation: type1_step2_img_big 0.5s 2.5s ease-out forwards; animation: type1_step2_img_big 0.5s 2.5s ease-out forwards;}