body { background-image: url(../img/direction_bg.jpg); background-size: 100% 100%; }

.direction .dir_l, .direction .dir_r { width: 400px; }
.direction .dir_l .box, .direction .dir_r .box { background: linear-gradient(to right, rgba(50, 137, 255, 0.1), rgba(50, 137, 255, 0.05)); overflow: hidden; }
.direction .dir_c { width: 1016px; }
.direction .dir_c .total { position: relative; height: 710px; }
.direction .dir_c .total li { position: absolute; text-align: center; }
.direction .dir_c .total.operate_total .t1 { left: 470px; top: 30px; }
.direction .dir_c .total.operate_total .t2 { left: 754px; top: 189px; }
.direction .dir_c .total.operate_total .t3 { left: 757px; top: 469px; }
.direction .dir_c .total.operate_total .t4 { left: 127px; top: 469px; }
.direction .dir_c .total.operate_total .t5 { left: 118px; top: 189px; }
.direction .dir_c .total .t1 { left: 470px; top: 30px; }
.direction .dir_c .total .t2 { left: 770px; top: 340px; }
.direction .dir_c .total .t3 { left: 720px; top: 558px; }
.direction .dir_c .total .t4 { left: 188px; top: 558px; }
.direction .dir_c .total .t5 { left: 128px; top: 340px; }
.direction .dir_c .total .t6 { left: 720px; top: 130px; }
.direction .dir_c .total .t7 { left: 188px; top: 130px; }
.direction .dir_c .total .t8 { left: 470px; top: 640px; }
.direction .dir_c .total i { display: block; width: 118px; height: 118px; background: url(../img/direction/circle_icon.png) no-repeat 0 0; z-index: -1; animation: circle 15s infinite linear; }
.direction .dir_c .total .num { position: absolute; left: 0; top: 0; padding: 33px 0; width: 118px; height: 52px; line-height: 26px; }
.direction .dir_c .total .num.num_icon_box { display: flex; align-items: center; justify-content: center; }
.direction .dir_c .total .num .num_icon { width: 54px; height: 47px; background: url("../img/direction/manage_icon1.png") no-repeat center center; }
.direction .dir_c .total .num .num_icon.num_icon2 { width: 56px; height: 51px; background: url("../img/direction/manage_icon2.png") no-repeat center center; }
.direction .dir_c .total .num .num_icon.num_icon3 { width: 57px; height: 50px; background: url("../img/direction/manage_icon3.png") no-repeat center center; }
.direction .dir_c .total .num .num_icon.num_icon4 { width: 43px; height: 49px; background: url("../img/direction/manage_icon4.png") no-repeat center center; }
.direction .dir_c .total .num .num_icon.num_icon5 { width: 53px; height: 54px; background: url("../img/direction/manage_icon5.png") no-repeat center center; }
.direction .dir_c .total p { width: 88px; margin: 0 auto; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.direction .dir_c .total span { font-size: 24px; font-family: DINR; color: #ffe13a; }
.direction .proportion { padding: 20px 18px 0; }
.direction .proportion .name { width: 130px; }
.direction .proportion .bar { margin-right: 12px; width: 90px; }
.direction .proportion .num { margin-right: 20px; width: 60px; text-align: center; }
.direction .proportion .tit { margin-bottom: 4px; font-style: italic; color: #9eaac8; }
.direction .proportion .item { height: 26px; }
.direction .proportion .item .name { color: #e5efff; }
.direction .proportion .item .bar { height: 6px; background-color: #162863; }
.direction .proportion .item .bar i { display: block; height: 6px; background: linear-gradient(to right, rgba(51, 106, 246, 0), #336af6); }
.direction .proportion .item .num { font-family: DINR; color: #2ee2f3; }
.direction .proportion .item .per { font-family: DINR; color: #2ef399; }

.basics .dir_l .box { height: 680px; }
.basics .dir_l .dir_b .box { height: 180px; }
.basics .dir_r .box1 { height: 484px; }
.basics .dir_r .box2 { height: 410px; }
.basics .sub_tt { margin: 20px 0 0 16px; }
.basics .part1 .chart { margin-bottom: 20px; height: 174px; }
.basics .part2 .chart { margin-bottom: 20px; height: 200px; }
.basics .part3 .con { margin-bottom: 20px; height: 164px; }
.basics .part3 .item .per { color: #33a3f6; }
.basics .part4 .chart { height: 214px; }
.basics .part5 .con { margin-bottom: 20px; height: 396px; }
.basics .part5 .proportion .name { width: 56px; }
.basics .part5 .proportion .bar { margin-right: 0; width: 200px; }
.basics .part5 .proportion .num { margin-right: 10px; }
.basics .part5 .proportion .item .bar i { background: linear-gradient(to right, rgba(46, 243, 153, 0), #2ef399); }
.basics .part6 .chart { height: 174px; }
.basics .part6 .proportion .name { width: 160px; }
.basics .part6 .proportion .bar { margin-right: 16px; width: 80px; }
.basics .part6 .proportion .num { margin-right: 12px; }
.basics .part6 .proportion .item .bar i { background: linear-gradient(to right, rgba(255, 225, 58, 0), #ffe13a); }
.basics .part6 .proportion .item .per { color: #ffff3a; }
.basics .part7 .con { margin-bottom: 20px; height: 206px; }
.basics .part7 .proportion .name { width: 160px; }
.basics .part7 .proportion .bar { margin-right: 16px; width: 80px; }
.basics .part7 .proportion .num { margin-right: 12px; }
.basics .part7 .proportion .item .bar i { background: linear-gradient(to right, rgba(255, 80, 62, 0), #ff503e); }
.basics .part7 .proportion .item .per { color: #ff503e; }

.operate .sub_tt { margin: 16px 0 0 16px; }
.operate .proportion { padding-top: 26px; }
.operate .proportion .name { width: 48px; }
.operate .proportion .bar { width: 190px; }
.operate .proportion .num { margin-right: 10px; }
.operate .proportion .tit { margin-bottom: 8px; }
.operate .main_tab { position: relative; margin-top: 16px; padding: 0 20px; }
.operate .main_tab .swiper-slide { position: relative; display: inline-block; margin: 0 4px; height: 28px; line-height: 28px; font-style: italic; text-align: center; cursor: pointer; background: url(../img/direction/swiper_title.png) no-repeat 0 0; }
.operate .main_tab .swiper-slide.cur { background-position-x: -150px; }
.operate .main_tab .tit1 { width: 117px; }
.operate .main_tab .tit2 { width: 97px; background-position-y: -30px; }
.operate .main_tab .tit3 { width: 107px; background-position-y: -60px; }
.operate .main_tab .tit4 { width: 137px; background-position-y: -90px; }
.operate .main_tab .swiper-button-next, .operate .main_tab .swiper-button-prev { position: absolute; top: 50%; margin-top: -14px; width: 28px; height: 28px; background: url(../img/direction/swiper_jt.png) no-repeat -30px 0; z-index: 999; }
.operate .main_tab .swiper-button-disabled { background-position-x: 0; opacity: 1; }
.operate .main_tab .swiper-button-prev { left: 0; }
.operate .main_tab .swiper-button-next { right: 0; background-position-y: -30px; }
.operate .dir_r1 { height: 340px; }
.operate .dir_r1 .part1_2 .chart { height: 150px; }
.operate .dir_r2 { height: 350px; }
.operate .dir_r2 .item .bar i { background: linear-gradient(to right, rgba(255, 225, 58, 0), #ffe13a); }
.operate .dir_r2 .item .per { color: #ffe13a; }
.operate .dir_r2 .part2_2 .chart { height: 150px; }
.operate .dir_r_box { height: 920px; }
.operate .dir_r_box .part4 .chart { height: 170px; }
.operate .dir_r_box .part5 .proportion { padding-top: 10px; }
.operate .dir_r_box .part5 .proportion .item .bar i { background: linear-gradient(to right, rgba(46, 243, 153, 0), #2ef399); }
.operate .dir_r_box .part6 .chart { height: 170px; }
.operate .dir_r_box .part7 .proportion { padding-top: 10px; }
.operate .dir_r_box .part7 .item .bar i { background: linear-gradient(to right, rgba(255, 80, 62, 0), #ff503e); }
.operate .dir_r_box .part7 .item .per { color: #ff503e; }
.operate .dir_r_box .part8 .chart { height: 150px; }
.operate .part1 { margin-bottom: 12px; /*        .box { height: 340px; }*/ }
.operate .part1 .proportion { padding-top: 10px; }
.operate .part1 .proportion .item .per { color: #33a3f6; }
.operate .part2 { margin-bottom: 12px; }
.operate .part2 .main_td { position: relative; height: 256px; }
.operate .part2 .main_td > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.operate .part2 .main_td .cur { opacity: 1; z-index: 9; }
.operate .part2 .chart { height: 256px; }
.operate .part2 .proportion { padding-top: 10px; }
.operate .part2 .proportion .name { width: 48px; }
.operate .part2 .proportion .bar { width: 190px; }
.operate .part2 .proportion .num { margin-right: 10px; }
.operate .part2 .proportion .tit { margin-bottom: 8px; }
.operate .part2 .prop1 .item .bar i { background: linear-gradient(to right, rgba(255, 160, 76, 0), #ffa04c); }
.operate .part2 .prop2 .item .bar i { background: linear-gradient(to right, rgba(255, 62, 255, 0), #ff3eff); }
.operate .part3 .box { height: 140px; }
.operate .part3 .proportion { padding-top: 10px; }
.operate .part3 .proportion .num { margin-right: 10px; }
.operate .part3 .proportion .tit { margin-bottom: 8px; }
.operate .part3 .proportion .item .bar i { background: linear-gradient(to right, rgba(46, 243, 153, 0), #2ef399); }
.operate .part4 { margin-bottom: 12px; }
.operate .part4 .chart { height: 240px; }
.operate .part5 { margin-bottom: 12px; }
.operate .part5 .main_tab { padding: 0 14px; }
.operate .part5 .main_td { position: relative; height: 256px; }
.operate .part5 .main_td > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.operate .part5 .main_td .cur { opacity: 1; z-index: 9; }
.operate .part5 .chart { height: 256px; }
.operate .part5 .proportion { padding-top: 26px; }
.operate .part5 .proportion .num { margin-right: 10px; }
.operate .part5 .proportion .tit { margin-bottom: 8px; }
.operate .part6 .box { height: 240px; }
.operate .part6 .proportion .num { margin-right: 10px; }
.operate .part6 .proportion .tit { margin-bottom: 8px; }
.operate .part6 .proportion .item .bar i { background: linear-gradient(to right, rgba(46, 243, 153, 0), #2ef399); }

.manage .dir_l, .manage .dir_r { padding-top: 40px; }
.manage .sub_tt { margin: 20px 0 0 16px; }
.manage .dir_l .partl_box { height: 850px; }
.manage .partr_box { height: 850px; }
.manage .part1 { margin-bottom: 22px; }
.manage .part1 .chart { height: 400px; }
.manage .part2 .con { height: 370px; }
.manage .part2 .proportion { padding-top: 32px; }
.manage .part2 .proportion .tit { margin-bottom: 22px; }
.manage .part2 .proportion .tit .name { width: 65px; }
.manage .part2 .proportion .tit .bar { width: 165px; }
.manage .part2 .proportion .item { position: relative; height: 58px; }
.manage .part2 .proportion .item .name { position: absolute; top: 4px; width: 230px; }
.manage .part2 .proportion .item .bar { width: 230px; }
.manage .part2 .proportion .item .bar i { background: linear-gradient(to right, rgba(255, 225, 58, 0), #ffe13a); }
.manage .part3 { margin-bottom: 22px; }
.manage .part3 .chart { height: 380px; }
.manage .part4 { margin-bottom: 22px; }
.manage .part4 .chart { height: 360px; }

.effect .sub_tt { margin: 20px 0 26px 16px; }
.effect .dir_l { padding-top: 80px; }
.effect .dir_l .l_img { width: 96px; height: 83px; background: url("../img/direction/up_ico.png") no-repeat center center; }
.effect .dir_l .l_icon2 { background: url("../img/direction/ping_ico.png") no-repeat center center; }
.effect .dir_l .l_icon3 { background: url("../img/direction/down_ico.png") no-repeat center center; }
.effect .dir_l .l_icon4 { background-position-y: -249px; height: 84px; }
.effect .dir_l .l_icon5 { background-position-y: -0; height: 82px; }
.effect .dir_l .l_main { margin-left: 16px; }
.effect .dir_l .l_main .lm_h { margin-top: 30px; margin-bottom: 15px; display: inline-block; font-size: 14px; color: #e5efff; }
.effect .dir_l .l_main .lm_m { display: flex; align-items: center; }
.effect .dir_l .l_main .bar { height: 8px; background-color: #162863; margin-right: 16px; width: 140px; border-radius: 4px; }
.effect .dir_l .l_main .bar i { display: block; height: 8px; background: linear-gradient(to right, rgba(255, 80, 62, 0), #ff503e); border-radius: 4px; }
.effect .dir_l .l_main .bar .i2 { background: linear-gradient(to right, rgba(255, 160, 76, 0), #ffa04c); }
.effect .dir_l .l_main .bar .i3 { background: linear-gradient(to right, rgba(46, 226, 243, 0), #33a3f6); }
.effect .dir_l .l_main .bar .i4 { background: linear-gradient(to right, rgba(46, 226, 243, 0), #2ee2f3); }
.effect .dir_l .l_main .bar .i5 { background: linear-gradient(to right, rgba(46, 243, 153, 0), #2ef399); }
.effect .dir_l .l_main .skyblue { color: #2ee2f3; font-size: 16px; vertical-align: middle; font-family: DINPro; }
.effect .dir_l .l_main .skyblue span { font-size: 14px; }
.effect .dir_l .l_main .green { margin-left: 15px; color: #2ef399; font-size: 16px; font-family: DINPro; }
.effect .dir_r { padding-top: 80px; }
.effect .part1 .box { margin-top: 4px; height: 120px; padding: 10px 0 0 15px; box-sizing: border-box; }
.effect .part1 ul li:nth-child(2) .green { color: #ffa04c !important; }
.effect .part1 ul li:nth-child(3) .green { color: #ff503e !important; }
.effect .part4 { margin-top: 20px; }
.effect .part2 .box, .effect .part4 .box { margin-bottom: 4px; height: 100px; }
.effect .part2 .box.li1, .effect .part4 .box.li1 { background: url("../img/direction/down_bg.png") no-repeat center center; }
.effect .part2 .box.li2, .effect .part4 .box.li2 { background: url("../img/direction/ping_bg.png") no-repeat center center; }
.effect .part2 .box.li3, .effect .part4 .box.li3 { background: url("../img/direction/up_bg.png") no-repeat center center; }
.effect .part2 .box .chart, .effect .part4 .box .chart { height: 100%; width: 50px; margin-left: 50px; }
.effect .part2 .box .txt, .effect .part4 .box .txt { margin-left: 26px; }
.effect .part2 .box .txt .p1, .effect .part4 .box .txt .p1 { margin-top: 30px; font-size: 14px; color: #fff; line-height: 14px; margin-bottom: 10px; }
.effect .part2 .box .txt .p2, .effect .part4 .box .txt .p2 { display: flex; align-items: center; }
.effect .part2 .box .txt .p2 .s1, .effect .part4 .box .txt .p2 .s1 { color: #2ee2f3; font-size: 20px; line-height: 14px; }
.effect .part2 .box .txt .p2 .s2, .effect .part4 .box .txt .p2 .s2 { font-size: 14px; line-height: 14px; color: #2ee2f3; margin-left: 2px; }
.effect .part2 ul { width: 368px; margin: 0 auto; }
.effect .part2 ul .box { background-position: right !important; }
.effect .part2 ul .box .chart { margin-left: 40px; }
.effect .part3 { margin-top: 52px; }
.effect .part3 .con { margin-bottom: 20px; height: 240px; }
.effect .part3 .keyPress .item1 { margin-top: 12px; }
.effect .part3 .keyPress .item { margin-bottom: 25px; }
.effect .part3 .keyPress .item p { margin-bottom: 6px; }
.effect .part3 .keyPress .item .bar_box { display: flex; align-items: center; }
.effect .part3 .keyPress .item .bar_box .bar { width: 230px; }
.effect .part3 .keyPress .item .bar_box .bar .i1 { background: linear-gradient(to right, rgba(255, 80, 62, 0), #ff503e); }
.effect .part3 .keyPress .item .bar_box .bar .i2 { background: linear-gradient(to right, rgba(255, 160, 76, 0), #ffa060); }
.effect .part3 .keyPress .item .bar_box .bar .i3 { background: linear-gradient(to right, rgba(51, 163, 246, 0), #33a3f6); }
.effect .part3 .keyPress .item .bar_box .bar .i4 { background: linear-gradient(to right, rgba(46, 226, 243, 0), #2ee2f3); }
.effect .part3 .keyPress .item .bar_box .bar .i5 { background: linear-gradient(to right, rgba(46, 243, 153, 0), #2ef399); }
.effect .part3 .keyPress .item .bar_box .num { font-size: 16px; }
.effect .part3 .keyPress .item .bar_box .per { font-size: 16px; }

@keyframes circle { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

/*# sourceMappingURL=direction.css.map */