.banner { background-image:url(../images/cases/banner3.png);width:100%;overflow: hidden; background-position:center bottom; background-size:cover; }
.banner h1 { top: 50%; left: 50%; width: 4em; margin-left: -2em; text-align: center; margin-top: -50px; font-size: 72px; font-family: sans-serif; color: #0344aa; }

.section { padding: 3em 0; }
.section .bodyer { width: 1000px; margin: 0 auto; }

.tags { position: relative; border-left: #a2a9b4 1px solid; width: 640px; margin: 0 auto; left: 170px; height:350px; }
.tags li { position: absolute; top: 0; right: 0; left: 0; height: 100%; }
.tags a { position: absolute; width: 260px; top: 0; left: -350px; background-color: #fff; font-size: 16.5px; line-height:25px; padding:20px; text-align: center; }
.tags a:hover { background-color: #cde8ff; color: #333; }
.tags li.item1 a { top: 0; }
.tags li.item2 a { top: 70px; }
.tags li.item3 a { top: 140px; }
.tags li.item4 a { top: 210px; }
.tags li.item5 a { top: 280px; }
.tags li.item6 a { top: 350px; }
.tags div { position: relative; padding-left: 3em;  opacity: 0; top: 33px; transition-duration: .5s; -webkit-transition-duration: .5s; transition-delay: .1s; transition-delay: .1s; }
.tags li.active a { background-color: #2277da; color: #fff; }
.tags li.active a::after { content: ''; display: block; position: absolute; top: 50%; right: -7px; margin-top: -7px; background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%227px%22%20height%3D%2214px%22%20viewBox%3D%220%200%207%2014%22%20enable-background%3D%22new%200%200%207%2014%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%232277DA%22%20points%3D%220%2C14%200%2C0%207%2C7%20%22%2F%3E%3C%2Fsvg%3E"); background-position: center center; background-repeat: no-repeat; width: 7px; height: 14px; }
.tags li.active div { opacity: 1; top: 0; transition-delay: .6s; transition-delay: .6s; }
.tags li h1, .tags li p { font-size: 16.5px; margin-top: 1.8em; }
.tags li p { text-indent: 2em; text-align: justify; text-justify: inter-ideograph; }
.tags li h1:first-child, .tags li p:first-child { margin-top: 0; }

.section.part1 .tags { margin-top: 3em; height: 415px; }

.section.part2 { background-color: #edf7ff; padding-top: 1em; }
.section.part2 .swiper-container { margin-top: 2em; }
.section.part2 .swiper-container img { display: block; height: 400px; margin: 0 auto; }
.section.part2 .swiper-container p { text-align: center; padding-bottom:3em; }

.section.part3 { padding-top: 2em; }

.std { position: relative; padding-left: 300px; margin-top: 2em; }
.std h1 { position: absolute; background-color: #edf7ff; width: 295px; top: 0; left: 0; height: 100%; font-size:18px; font-family:sans-serif; margin:0; }
.std h1 span { display: block; position: absolute; top: 50%; text-align: center; left: 0; margin-top: -.9em; width:100%; }
.std div { background-color: #edf7ff; padding: 2em; }
.std div h2 { position: relative; font-size: 16.5px; font-family: sans-serif; padding-left: 2em; }
.std div h2:first-child { margin-top: 0; }
.std div h2::after { position: absolute; display: block; content: ''; width: 14px; height: 14px; left: 0; background-color: #0070cc; top: .9em; margin-top:-5px; }
.std div p { position: relative; margin-left: 2em; }
.std div p::after { position: absolute; display: block; content: ''; width: 12px; height: 12px; left: 0; background-color: #0070cc; top: .9em; margin-top: -6px; border-radius: 50%; }
.fy{width: 400px;margin: 0 auto;height: 50px;}
.sy-y a{position: absolute;left:20%;;background-color: #5da8e9;padding-left: 30px;padding-right: 30px;padding-top:5px;padding-bottom:5px;border:1px solid #adadad;}
.sy-y a{color: #fff;}
.sy-y a:hover {color: #ffaa66;} 

.sy a{position: absolute;left: 48%;background-color: #5da8e9;padding-left: 30px;padding-right: 30px;padding-top:5px;padding-bottom:5px;border:1px solid #adadad;}
.sy a{color: #fff;}
.sy a:hover {color: #ffaa66;}
.xy-y a{position: absolute;right:20%;background-color: #5da8e9;padding-left: 30px;padding-right: 30px;padding-top:5px;padding-bottom:5px;border:1px solid #adadad;}
.xy-y a{color: #fff;}
.xy-y a:hover {color: #ffaa66;}