section { margin: 20px auto; padding: 15px; width: 1050px; overflow: hidden; border-radius: 15px; }
.aside { float: left; width: 200px; }
.aside dl { overflow: hidden; height: 100%; transition: height 0.4s; }
.aside dl .leaf{ padding: 10px 30px; }
.aside dt { z-index: 2; position: relative; cursor: url(../img/a2.png),pointer; margin-bottom: 6px; color: rgba(255,255,255,0.8); font-weight: bold; }
.aside dd { position: relative; top: 0; cursor: url(../img/a2.png),pointer; padding: 5px 0 5px 20px; width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: top 0.4s linear 0s; }
.aside dd:nth-child(even) { color: rgba(255,255,255,0.5); }
.aside dd:nth-child(odd) { color: rgba(255,255,255,0.9); }
.aside dd:hover { font-size: 18px; font-weight: bold; color: #87de0d;  text-shadow: rgba(0,0,0,0.5) 2px 0 0, rgba(0,0,0,0.5) 0 2px 0, rgba(0,0,0,0.5) -2px 0 0, rgba(0,0,0,0.5) 0 -2px 0; }
.aside .current { font-size: 18px; font-weight: bold; color: #87de0d !important;  text-shadow: rgba(0,0,0,0.5) 2px 0 0, rgba(0,0,0,0.5) 0 2px 0, rgba(0,0,0,0.5) -2px 0 0, rgba(0,0,0,0.5) 0 -2px 0; }
article { float: right; background-color: rgba(255,255,255,0.7); padding: 20px 20px 345px 20px; width: 800px; border-radius: 15px; }
article .project h2 { color: #31763f; font-size: 26px; margin-bottom: 10px; }
article .project h2 em { font-weight: bold; font-size: 24px; margin-right: 5px; }
article .project .case { margin-bottom: 10px; }
article .project .case h3 { color: #565656; font-size: 18px; margin-bottom: 10px; }
article .project .case h3 em { font-size: 20px; margin: 0 5px 0 20px; }
article .project .case .cbox { margin: 0 10px; width: 180px; height: 85px; text-align: center; }
article .project .case .cbox p{ display: inline; letter-spacing: 1px; }
article .project .case .c-box { position: relative; text-align: center; line-height: 64px; width: 180px; height: 64px; }
article .project .case .c-box1 { background: linear-gradient(to right, #45B649, #DCE35B); }
article .project .case .c-box1 span:first-child { animation: enlarge1 1.5s infinite; color: rgba(255,255,255,.8); font-size: 22px; font-weight: bold; }
article .project .case .c-box1 span:last-child { position: absolute; top: 0; left: 48px; animation: enlarge2 1.5s infinite; color: rgba(255,255,255,.7); font-size: 16px; font-weight: bold; }
@keyframes enlarge1{
	from{ transform: scale(1); }
	to{ transform: scale(1.5); opacity: .3; }
}
@keyframes enlarge2{
	from{ transform: scale(1); }
	to{ transform: scale(1.3); }
}
article .project .case .c-box2 { background: linear-gradient(to right, #ccc, #bdbdbd); }
article .project .case .c-box2 span { animation: fill 3s infinite; transition: 0.5s linear; background: linear-gradient(90deg, #e041ff 0%, #e041ff 100%); color: transparent; -webkit-text-stroke: 2px #ff980d; text-shadow: 4px 4px 8px #f38f09, -4px -4px 8px #f38f09; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; font-size: 32px; font-weight: bold; }
@keyframes fill{
	from{ background-size: 0%; }
	to{background-size: 100%; }
}
article .project .case .c-box3 { line-height: 55px; background: linear-gradient(to right, #45B649, #DCE35B); }
article .project .case .c-box3 span { animation: bounce 2s infinite; color: rgba(255,255,255,.8); font-size: 32px; font-weight: bold; text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3); }
@keyframes bounce{
	0%,20%,53%,80%,to{ animation-timing-function:cubic-bezier(.215,.61,.355,1); transform:translateZ(0); }
	40%,43%{ animation-timing-function:cubic-bezier(.755,.05,.855,.06); transform:translate3d(0,-20px,0); }
	70%{ animation-timing-function:cubic-bezier(.755,.05,.855,.06); transform:translate3d(0,-15px,0) }
	90%{ transform:translate3d(0,-4px,0)} 
}
article .project .case .c-box4 { background: linear-gradient(to right, #ccc, #bdbdbd); }
article .project .case .c-box4 span { animation: flash 3s infinite; color: #fff; font-size: 32px; font-weight: bold; }
article .project .case .c-box4 span:nth-child(1) { color:pink; text-shadow:0 0 white, 0 0 7px red, 0 0 20px red; filter:drop-shadow(0 0 25px red); }
article .project .case .c-box4 span:nth-child(2) { color:skyblue; text-shadow:0 0 white, 0 0 7px blue, 0 0 20px blue; filter:drop-shadow(0 0 25px blue); }
article .project .case .c-box4 span:nth-child(3) { color:lightgreen; text-shadow:0 0 white, 0 0 7px lime, 0 0 20px lime; filter:drop-shadow(0 0 25px lime); }
article .project .case .c-box4 span:nth-child(4) { color:#fff49b; text-shadow:0 0 wheat, 0 0 7px #ffa500, 0 0 20px #ffa500; filter:drop-shadow(0 0 25px #ffa500); }
article .project .case .c-box4 span:nth-child(5) { color:#fa5fff; text-shadow:0 0 wheat, 0 0 7px #ec0ff3, 0 0 20px #ec0ff3; filter:drop-shadow(0 0 25px #ec0ff3); }
article .project .case .c-box4 span:nth-child(6) { color:#d69682; text-shadow:0 0 wheat, 0 0 7px #a1553a, 0 0 20px #a1553a; filter:drop-shadow(0 0 25px #a1553a); }
article .project .case .c-box4 span:nth-child(7) { color:#CDDC39; text-shadow:0 0 wheat, 0 0 7px #CDDC39, 0 0 20px #CDDC39; filter:drop-shadow(0 0 25px #CDDC39); }
@keyframes flash{
	0%,20%,90%,to{opacity:1}
	10%,30%{opacity:0.1}
}
article .project .case .c-box5 span { animation: glow 8s linear infinite; cursor: url(../img/a2.png),pointer; position: relative; margin: 12px 0; width: 130px; height: 40px; line-height: 40px; border-radius: 20px; color: white; background-color: white; font-size: 20px; border: transparent; outline: transparent; background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde); background-size: 300%; z-index: 1; }
article .project .case .c-box5 span::before { filter: blur(8px); animation: glow 8s linear infinite; position: absolute; content: ""; top: -3px; left: -3px; bottom: -3px; right: -3px; background: inherit; background-size: inherit; border-radius: 4em; transition: 0.5s; z-index: -1; }
article .project .case .c-box5 span:hover::before { filter: blur(20px); }
@keyframes glow {
  to { background-position: 300%; }
}
article .project .case .c-box6 span { cursor: url(../img/a2.png),pointer; transform: skewX(-10deg); width: 130px; height: 40px; line-height: 40px; border: 1px solid #ffeca8; border-radius: 20px 5px 20px 0px; backdrop-filter: blur(10px); background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6)); box-shadow: 0 0 70px rgba(255, 138, 48, 0.6), 0 5px 20px rgba(255, 138, 48, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8; color: #ffeca8; animation: breath2 2s 0.5s infinite alternate; transition: all 0.2s ease; }
article .project .case .c-box6 span::before { content: ""; width: calc(100% - 22px); height: calc(40px - 8px); box-shadow: inset 0 0 8px 0 #ffeca8; animation: breath 2s infinite alternate; left: 10px; top: 3px; position: absolute; background-color: transparent; border: 1px solid #fff; border-radius: 15px 3px 15px 3px; }
article .project .case .c-box6 span:hover { box-shadow: 0 0 70px rgba(255, 138, 48, 0.8), 0 5px 20px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8; }
article .project .case .c-box6 span:hover::before { box-shadow: inset 0 0 24px 0 #ffeca8; }
@keyframes breath {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0.9); }
}
@keyframes breath2 {
  0% { transform: skewX(-10deg) scaleX(1); }
  100% { transform: skewX(-10deg) scaleX(0.9); }
}
.switch { position: relative; margin: 10px 22px; padding: 8px; width: 120px; height: 30px; border-radius: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; cursor: url(../img/a2.png),pointer; box-shadow: 0 15px 15px rgba(150, 148, 148, 0.7) inset, 0px -5px 6px white inset; }
.switch .switch__inner { position: relative; width: 100%; height: 100%; background: #abdc28; border-radius: 20px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px rgba(0, 0, 0, 0.3); border: 0.5px solid rgba(0, 0, 0, 0.4); }
.switch .switch__inner .switch__status { transition: all 1s ease-in-out; text-indent: -20px; line-height: 31px; text-shadow: 0px 0.2px rgba(255, 255, 255, 0.3); }
.switch .switch__toggle { transition: all 1s ease-in-out; position: absolute; top: 5px; right: 0; left: 95px; height:36px; width:36px; background: #D2D1D2; border-radius: 50%; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8), 0px 3px 3px white inset, 0px -2px 2px rgba(0, 0, 0, 0.6) inset; }
.switch.switch-off .switch__inner { background: #908e8f; }
.switch.switch-off .switch__inner .switch__status { text-indent: 20px; }
.switch.switch-off .switch__toggle { left: 5px; }
article .project .case .c-box7 { position: relative; }
article .project .case .c-box7 span { transition: all .5s ease-in-out; color: #fff; cursor: url(../img/a2.png),pointer; border-radius: 20px; margin: 12px 0; width: 130px; height: 40px; line-height: 40px; font-size: 20px; font-weight: bold; border: 2px solid #fff; box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, #FEB692 0%, #EA5455 100%); }
article .project .case .c-box7 div { opacity: 1; transition: all 1s ease-in-out; width: 40px; height: 40px; border: 2px solid white; border-radius: 50%; position: absolute; top: 13px; left: 68px; display: none; transform: scale(1); }
article .project .case .c-box7 .click { display: block; transform: scale(1.5); opacity: 0; }
article .project .case .c-box7 span:hover { background: linear-gradient(135deg, #EA5455 0%, #FEB692 100%); animation: c-box7 .5s ease-in both; }
@keyframes c-box7{
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
article .project .case .sbox { float: left; position: relative; width: 400px; height: 240px; text-align: center; }
article .project .case .sbox span { font-weight: bold; letter-spacing: 2px; display: inline; position: absolute; top: 0; left: 170px; }
article .project .case .sbox iframe { margin-top: 20px; text-align: center; }
article .project .case .sbox .s-box { margin-top: 30px; }
article .project .case .sbox .s-box .ull { position: relative; z-index: 1; height: 45px; line-height: 45px; }
article .project .case .sbox .s-box .ull li { width: 90px; background: #1e8246; float: left; }
article .project .case .sbox .s-box .ull li a { color: #f0f0f0; font-weight: bold; }
article .project .case .sbox .s-box .ull li .lii { display: none; }
article .project .case .sbox .s-box .ull li .lii li { background: #2ea66e; color: #f0f0f0; height: 44px; line-height: 44px; border-top: 1px dotted #a3a3a3; float: none; padding: 0; }
article .project .case .sbox .s-box .ull li .lii2 li { z-index: -1; height: 44px; line-height: 44px; top: 0; transition: all .5s linear; background: #2ea66e; position: absolute; border-top: 1px dotted #a3a3a3; color: #f0f0f0; float: none; padding: 0; }
.banner { position: relative; margin: 30px auto; width: 320px; height: 180px; }
.banner .a-img-ban { position: absolute; top: 0; left: 0; z-index: 9; width: 320px; height: 180px; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; transition: opacity 0.8s linear 0s; }
.banner .a-img-ban .img-ban { position: absolute; left: 0; width: 320px; height: 180px; border-radius: 10px; z-index: 9; }
.banner .img-ban-curr { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; z-index: 10; }
.banner ul { z-index: 99; display: inline-block; position: relative; top: 155px; left: 0; overflow: hidden; }
.banner ul li { margin: 0 5px; float: left; background: #e7e7e7; cursor: url(../img/a2.png),pointer; width: 10px; height: 10px; border-radius: 50%; transition: background-color 0.3s linear 0s; }
.banner ul li.curr { background-color: #79d48b; }
.banner2 { z-index: 1; position: relative; margin: 30px auto; width: 320px; height: 180px; }
.banner2 #ul1 { z-index: -1; position: relative; left: 0; -webkit-transform-style:preserve-3d; transition-duration: 0.6s; }
.banner2 #ul1 img { width: 320px; height: 180px; border-radius: 10px; }
.banner2 #ul1 li{ position: absolute; float: left; -webkit-transform-style:preserve-3d ;backface-visibility: hidden; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.banner2 #ul1 li:nth-child(1){ -webkit-transform:rotateY(0deg) translateZ(160px); }
.banner2 #ul1 li:nth-child(2){ -webkit-transform:rotateY(90deg) translateZ(160px); }
.banner2 #ul1 li:nth-child(3){ -webkit-transform:rotateY(180deg) translateZ(160px); }
.banner2 #ul1 li:nth-child(4){ -webkit-transform:rotateY(270deg) translateZ(160px); }
.banner2 #ul2 { z-index: 99; display: inline-block; position: relative; top: 155px; left: 0; overflow: hidden;  }
.banner2 #ul2 li { margin: 0 5px; float: left; background: #e7e7e7; width: 10px; height: 10px; border-radius: 50%; transition: background-color 0.3s linear 0s; }
.banner2 #ul2 li.curr { background-color: #79d48b; }
.banner2 span { cursor: url(../img/a2.png),pointer;  position: relative; background-color: rgba(255,255,255,.2); font-size: 40px; color: #D0D0D0; }
.banner2 #lt { top: 64px; left: 5px; }
.banner2 #gt { top: 64px; left: auto; right: 5px; }
article .project .case .zbox { float: left; position: relative; width: 260px; height: 240px; text-align: center; }