.inScenarios { background: -webkit-gradient(linear, left top, right top, from(#fdfdfd), to(#eeeff3)); background: -webkit-linear-gradient(left, #fdfdfd, #eeeff3); background: -moz- oldlinear-gradient(left, #fdfdfd, #eeeff3); background: -o-linear-gradient(left, #fdfdfd, #eeeff3); background: linear-gradient(to right, #fdfdfd, #eeeff3); }

.inScenarios .swiper-container { padding: 30px 0; text-align: center; font-size: 13px; }

.inScenarios .swiper-container img { width: 100%; display: block; margin-bottom: 5px; }

.inScenarios .swiper-container .page-dot { width: 100%; position: absolute; bottom: 10px; text-align: center; font-size: 0; }

.inScenarios .swiper-container .page-dot span { margin: 0 3px; background-color: #ccc; }

.inScenarios .swiper-container .page-dot span.swiper-pagination-bullet-active { background-color: #3878c8; }

.inScenarios-container { position: relative; height: 700px; }

.inScenarios-container .text { width: 26.67%; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: #fff; padding: 53px 3.333% 60px; -webkit-box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1); }

.inScenarios-container .text .title { font-size: 26px; color: #2e2e2e; }

.inScenarios-container .text .desc { padding-top: 25px; color: rgba(46, 46, 46, 0.8); font-size: 14px; line-height: 26px; }

.inScenarios-container .text li{text-align: center; padding: 10px;}

.inScenarios-container .text img{display: block; margin: 0 auto;}

.inScenarios-main { width: 64.67%; float: right; padding-top: 210px; position: relative; }

.inScenarios-main .thumb { position: relative; }

.inScenarios-main .icon { width: 40px; height: 40px; display: block; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; cursor: pointer; }

.inScenarios-main .blue { width: 40px; height: 40px; display: block; background-color: rgba(56, 120, 200, 0.4); -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: dot2 3s linear infinite; -moz-animation: dot2 3s linear infinite; -o-animation: dot2 3s linear infinite; animation: dot2 3s linear infinite; }

.inScenarios-main .gray { width: 28px; height: 28px; display: block; -webkit-border-radius: 50%; border-radius: 50%; background-color: #ccd1d3; position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -14px; z-index: 1; -webkit-animation: dot 3s linear infinite; -moz-animation: dot 3s linear infinite; -o-animation: dot 3s linear infinite; animation: dot 3s linear infinite; }

.inScenarios-main .white { width: 16px; height: 16px; display: block; -webkit-border-radius: 50%; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; z-index: 2; }

.inScenarios-main .white:after { content: ""; display: block; width: 10px; height: 10px; background-color: #3878c8; -webkit-border-radius: 50%; border-radius: 50%; margin: 3px auto; opacity: 0; }

.inScenarios-main .on .white:after { opacity: 1; }

.inScenarios-main .dot1 { left: 186px; top: 6px; }

.inScenarios-main .dot2 { left: 317px; top: 46px; }

.inScenarios-main .dot3 { left: 417px; top: 6px; }

.inScenarios-main .dot4 { left: 517px; top: 44px; }

.inScenarios-main .dot5 { left: 66px; top: 232px; }

.inScenarios-main .dot6 { left: 196px; top: 192px; }

.inScenarios-main .dot7 { left: 347px; top: 184px; }

.inScenarios-main .dot8 { left: 590px; top: 182px; }

.inScenarios-main .dot9 { left: 189px; top: 252px; }

.inScenarios-tab .image { width: 112px; height: 112px; border: 4px solid #3878c8; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; vertical-align: top; position: relative; }

.inScenarios-tab .image img { width: 100%; display: block; -webkit-border-radius: 50%; border-radius: 50%; position: relative; z-index: 4; }

.inScenarios-tab .image:after { content: ""; display: block; position: absolute; z-index: 1; }

.inScenarios-tab .info { float: right; max-width: 102px; }

.inScenarios-tab .title { font-size: 18px; color: #3878c8; text-align: center; padding-top: 6px; padding-bottom: 6px; line-height: 20px; }

.inScenarios-tab .more { display: block; position: relative; }

.inScenarios-tab .more i { width: 66px; height: 28px; display: block; margin: 0 auto; background-color: #3878c8; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; line-height: 28px; font-style: normal; color: #fff; font-size: 12px; opacity: 0; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }

.inScenarios-tab .more:after { content: ""; display: block; width: 28px; height: 28px; background: url(../image/inScenariosAdd.png) no-repeat; position: absolute; left: 50%; top: 0; margin-left: -14px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }

.inScenarios-tab .more:hover i { opacity: 1; }

.inScenarios-tab .more:hover:after { opacity: 0; }

.inScenarios-tab .circle { width: 14px; height: 14px; border: 1px solid #3878c8; display: block; margin: 0 auto; background-color: #fff; -webkit-border-radius: 50%; border-radius: 50%; }

.inScenarios-tab .circle:after { content: ""; display: block; width: 8px; height: 8px; background-color: #3878c8; -webkit-border-radius: 50%; border-radius: 50%; margin: 2px auto; }

.inScenarios-tab .bd { display: none; position: absolute; }

.inScenarios-tab .bd:after { content: ""; display: block; width: 1px; background-color: #3878c8; position: absolute; z-index: 3; }

.inScenarios-tab .bd1 { left: 55px; top: 47px; }

.inScenarios-tab .bd1 .image { margin-right: 46px; }

.inScenarios-tab .bd1 .image:after { width: 43px; height: 11px; background: url(../image/inScenariosArrow01.png) no-repeat; left: 100%; top: 43px; }

.inScenarios-tab .bd1 .circle { margin-top: 5px; }

.inScenarios-tab .bd1:after { height: 115px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); top: 74px; left: 170px; }

.inScenarios-tab .bd2, .inScenarios-tab .bd3, .inScenarios-tab .bd4, .inScenarios-tab .bd7, .inScenarios-tab .bd9 { top: 57px; left: 319px; }

.inScenarios-tab .bd2 .info, .inScenarios-tab .bd3 .info, .inScenarios-tab .bd4 .info, .inScenarios-tab .bd7 .info, .inScenarios-tab .bd9 .info { float: left; margin-right: 28px; padding-top: 57px; }

.inScenarios-tab .bd2 .circle, .inScenarios-tab .bd3 .circle, .inScenarios-tab .bd4 .circle, .inScenarios-tab .bd7 .circle, .inScenarios-tab .bd9 .circle { position: absolute; top: 89px; left: -17px; }

.inScenarios-tab .bd2:after, .inScenarios-tab .bd3:after, .inScenarios-tab .bd4:after, .inScenarios-tab .bd7:after, .inScenarios-tab .bd9:after { height: 115px; -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); -ms-transform: rotate(-13deg); -o-transform: rotate(-13deg); transform: rotate(-13deg); top: 101px; left: 3px; }

.inScenarios-tab .bd2 .image:after, .inScenarios-tab .bd3 .image:after, .inScenarios-tab .bd4 .image:after, .inScenarios-tab .bd7 .image:after, .inScenarios-tab .bd9 .image:after { width: 41px; height: 27px; background: url(../image/inScenariosArrow02.png) no-repeat; left: -32px; top: 70px; }

.inScenarios-tab .bd3, .inScenarios-tab .bd7, .inScenarios-tab .bd9 { width: 240px; left: 546px; top: 93px; }

.inScenarios-tab .bd3 .info, .inScenarios-tab .bd7 .info, .inScenarios-tab .bd9 .info { padding-top: 7px; margin-right: 26px; }

.inScenarios-tab .bd3 .image, .inScenarios-tab .bd7 .image, .inScenarios-tab .bd9 .image { float: right; }

.inScenarios-tab .bd3 .image:after, .inScenarios-tab .bd7 .image:after, .inScenarios-tab .bd9 .image:after { width: 44px; height: 16px; top: 55px; left: -45px; background: url(../image/inScenariosArrow03.png) no-repeat; }

.inScenarios-tab .bd3 .circle, .inScenarios-tab .bd7 .circle, .inScenarios-tab .bd9 .circle { top: 62px; left: -15px; }

.inScenarios-tab .bd3:after, .inScenarios-tab .bd7:after, .inScenarios-tab .bd9:after { top: 49px; left: -61px; height: 117px; -webkit-transform: rotate(53deg); -moz-transform: rotate(53deg); -ms-transform: rotate(53deg); -o-transform: rotate(53deg); transform: rotate(53deg); }

.inScenarios-tab .bd4 { width: 260px; left: 625px; top: 210px; }

.inScenarios-tab .bd4 .image:after { width: 43px; height: 11px; top: 47px; left: -46px; background: url(../image/inScenariosArrow04.png) no-repeat; }

.inScenarios-tab .bd4 .info { margin-right: 10px; max-width: 140px; padding-top: 13px; }

.inScenarios-tab .bd4 .circle { top: 45px; left: 16px; }

.inScenarios-tab .bd4:after { height: 105px; top: 6px; left: -36px; -webkit-transform: rotate(84deg); -moz-transform: rotate(84deg); -ms-transform: rotate(84deg); -o-transform: rotate(84deg); transform: rotate(84deg); }

.inScenarios-tab .bd5 { top: 410px; left: -77px; }

.inScenarios-tab .bd5 .image:after { width: 23px; height: 42px; top: -40px; left: 61px; background: url(../image/inScenariosArrow05.png) no-repeat; }

.inScenarios-tab .bd5 .info { position: absolute; top: -100px; left: 52px; }

.inScenarios-tab .bd5 .circle { position: absolute; top: 31px; right: -13px; }

.inScenarios-tab .bd5:after { height: 109px; top: -58px; right: -33px; -webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); -ms-transform: rotate(-18deg); -o-transform: rotate(-18deg); transform: rotate(-18deg); }

.inScenarios-tab .bd6 { top: 148px; left: -94px; }

.inScenarios-tab .bd6 .image { margin-right: 23px; }

.inScenarios-tab .bd6 .info { padding-top: 40px; }

.inScenarios-tab .bd6 .circle { position: absolute; top: 79px; right: -3px; }

.inScenarios-tab .bd6:after { height: 201px; left: 267px; top: 82px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); }

.inScenarios-tab .bd7, .inScenarios-tab .bd9 { left: 436px; top: 536px; }

.inScenarios-tab .bd7 .info, .inScenarios-tab .bd9 .info { position: relative; }

.inScenarios-tab .bd7 .title, .inScenarios-tab .bd9 .title { padding-top: 38px; }

.inScenarios-tab .bd7 .circle, .inScenarios-tab .bd9 .circle { top: 27px; left: 50%; margin-left: -7px; }

.inScenarios-tab .bd7:after, .inScenarios-tab .bd9:after { top: -136px; left: -12px; height: 183px; -webkit-transform: rotate(-37deg); -moz-transform: rotate(-37deg); -ms-transform: rotate(-37deg); -o-transform: rotate(-37deg); transform: rotate(-37deg); }

.inScenarios-tab .bd8 { left: 706px; top: 419px; padding-left: 75px; }

.inScenarios-tab .bd8 .info { position: absolute; top: -80px; left: 0; }

.inScenarios-tab .bd8 .image:after { width: 35px; height: 36px; top: -14px; left: -13px; background: url(../image/inScenariosArrow07.png) no-repeat; }

.inScenarios-tab .bd8 .circle { margin-top: 5px; }

.inScenarios-tab .bd8:after { width: 135px; height: 1px; top: -8px; left: -94px; }

.inScenarios-tab .bd9 { left: 195px; }

.inScenarios-tab .bd9 .info { margin-right: 36px; }

.inScenarios-tab .bd9:after { top: -54px; left: 24px; height: 83px; -webkit-transform: rotate(-14deg); -moz-transform: rotate(-14deg); -ms-transform: rotate(-14deg); -o-transform: rotate(-14deg); transform: rotate(-14deg); }