.banner{padding-top: 70px; padding-bottom: 10px;}
.banner h1{font-size: 60px; font-family: 'cp'; color: #599afc; font-weight: 700; padding-top: 15px;}
.banner h2{font-size: 44px; font-family: 'cp'; color: #555; font-weight: 300;}
.banner p{font-size: 14px; color: #444; padding: 10px 0; line-height: 22px;}
.banner p a{color: #444;}
.banner p a:hover{color: #599afc;}
.banner .box{display: block; width: 100px; margin: 20px auto;}
.banner .box a.btn{display: block; width: 74px; height: 74px; margin: 0 auto; box-sizing: border-box; border: 3px solid #d0e0f8; border-radius: 5px;}
.banner .box a.down{background: url(/img/web/down.png) center no-repeat; background-size: 33px auto;}
.banner .box a.down:hover{background: url(/img/web/down-act.png) center no-repeat #599afc; background-size: 33px auto; border-color: #599afc; -webkit-transition: all .5s; transition: all .5s;}
.banner .box a.sc{background: url(/img/web/ShoppingCart.png) center no-repeat; background-size: 48px auto;}
.banner .box a.sc:hover{background: url(/img/web/ShoppingCart-act.png) center no-repeat #599afc; background-size: 48px auto; border-color: #599afc; -webkit-transition: all .5s; transition: all .5s;}
.banner .box h3{font-size: 20px; color: #4f8ae2; text-align: center; padding: 6px 0; font-weight: normal;}
.banner .box p{font-size: 12px; color: #505050; text-align: center; font-family: 'cp'; font-weight: 300; padding: 0;}
.banner .line{border-bottom: 2px dashed #969696; border-right: 2px solid #599afc;}
.banner .system{display: table; text-align: center; width: 100%; padding: 12px 0;}
.banner span{display: table-row; font-size: 12px; color: #969696; display: inline; padding-left: 24px; background: url(/img/web/win.png) left center no-repeat;}
.banner .character{position: relative;}
.banner .enlarge{transform: scale(1.2); position: relative;}
.banner .robot{position: absolute; width: 128px; height: 128px; left: 0; top: -40px; animation: heart 2.3s ease-in-out 1s infinite alternate;}
@media screen and (max-width: 1048px) {
  .banner{padding-bottom: 0;}
  .banner .enlarge{transform: scale(1);}
}

.slide{width: 100%; height: 64px; background: #ffd052; position: relative;}
.slide .width-3, .slide .width-4, .slide .width-5{margin: 0; padding: 0;}
.slide .box{height: 64px; transform: skewX(-20deg); width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.slide .box-l{background: #3d3d3d; border: 3px solid #3d3d3d;}
.slide .box-m{border: 3px solid #2b2b2b; background: #484848; border-width: 0 3px;}
.slide .box-r{background: #424242; border: 3px solid #424242;}
.slide dl{transform: skewX(20deg); height: 35px;}
.slide dt{color: #fff; font-weight: 700; font-family: 'ak'; font-size: 18px;}
.slide dd{color: #b0b0b0; font-size: 12px;}
.slide .one{background: url(/img/web/1.png) left center no-repeat; padding-left: 30px;}
.slide .two{background: url(/img/web/2.png) left center no-repeat; padding-left: 38px;}
.slide .three{background: url(/img/web/3.png) left center no-repeat; padding-left: 38px;}
@media screen and (max-width: 1024px) {
  .slide .box{transform: skewX(0deg);}
  .slide dl{transform: skewX(0deg);}
}
@media screen and (max-width: 768px) {
  .slide{height: auto;}
}

.list{padding-top: 45px; padding-bottom: 40px; background: #515151; width: 100%;}
.list .con{width: 94%; margin: 0 auto;}
.list h2{font-size: 20px; color: #989898; font-family: 'ak'; font-weight: 700; margin-bottom: 8px;}
.list h2.ut{background: url(/img/web/ut.png) left center no-repeat; padding-left: 22px;}
.list h2.sul{background: url(/img/web/sul.png) left center no-repeat; padding-left: 30px;}
.list .box{position: relative; width: 100%; height: 180px;}
.list .border{position: absolute; z-index: 10; border: 2px solid #d9d9d9; width: 100%; height: 100%; border-radius: 5px; padding-top: 10px; padding-left: 20px; box-sizing: border-box;}
.list .floor{position: absolute; left: 10px; top: 10px; z-index: 2; width: 100%; height: 100%; border-radius: 5px; background: url(/img/web/floor_bg.png);}
.list .border ul{padding-left: 15px;}
.list .border li{list-style-image: url(/img/web/list_ico.png); padding: 5px 0;}
.list .border a{color: #fff; font-size: 16px; text-decoration: none;}
.list .border a:hover{text-decoration: underline; color: #599afc;}
.list .border ul a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; padding-right: 5px;}
.list .border p{font-size: 14px; color: #fff; line-height: 24px;}
.list .border a.buy{font-size: 18px; font-weight: 700;}
@media screen and (max-width: 768px) {
  .list .con{margin: 15px auto;}
  .list .box{min-height: 160px;}
}
@media screen and (max-width: 500px) {
  .list .border a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; padding-right: 5px;}
}

.eva{padding: 20px 0;}
.eva dl{max-width: 282px; height: auto; margin: 0 auto;}
.eva dt{float: left; width: 62px; height: 62px;}
.eva dt.dav{background: url(/img/web/dav.png) center no-repeat;}
.eva dt.mark{background: url(/img/web/mark.png) center no-repeat;}
.eva dt.chris{background: url(/img/web/chris.png) center no-repeat;}
.eva dd{float: left; max-width: 220px; width: auto; padding-left: 14px; box-sizing: border-box;}
.eva dd h3{color: #4f8ae2; font-size: 16px; font-style: oblique; font-weight: normal; border-bottom: 1px solid #e3e3e3; padding: 10px 0;}
.eva dd p{color: #707070; font-style: 12px; font-style: oblique; line-height: 28px; padding-top: 10px;}
.eva p img{float: left;}

.bottom{width: 100%; height: auto; background: #f5fbff;}
.bottom .container{background: url(/img/web/bottom_bg.png) top right no-repeat; padding-top: 110px; padding-bottom: 80px;}
.bottom .con{display: table; text-align: center; width: 100%;}
.bottom .box{display: table-row; display: inline-block;}
.bottom .box .logo{float: left; margin-left: -90px; margin-top: -22px; width: 96px;}
.bottom .box a{border: 4px solid #d0e0f8; height: 75px; padding: 0 20px; box-sizing: border-box; border-width: 4px 0; background: rgba(255, 255, 255, 0.7); display: block; text-decoration: none; float: left;}
.bottom .box a h4{font-size: 40px; font-family: 'age'; color: #599afc; text-align: center; padding: 0;}
.bottom .box a span{font-size: 12px; color: #555; text-align: center; display: block; padding: 0;}
.bottom .box a:hover{background: #599afc; border: 4px solid #599afc; border-width: 4px 0;}
.bottom .box a:hover > h4{color: #fff;}
.bottom .box a:hover > span{color: #fff;}
.bottom .container p{text-align: center; font-size: 14px; color: #565656; padding: 5px 0;}