.index-banner { min-width: 1200px; height: 620px; color: #d4fff4; background: #32b091 url(../img/index_banner_bg.jpg)  center bottom; }
.index-banner .img-wrap { width: 670px; padding-top: 100px; margin-left: 10px; }
.index-banner .img-wrap .other { font-size: 20px; line-height: 36px; padding-left: 80px; text-align: center; }
.index-banner .img-wrap .other-link { color: #d4fff4; }
.index-banner .slide { position: absolute; top: 75px; left: 0; width: 395px; height: 285px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.6); }
.index-banner .slide-box { position: relative; height: 445px; }
.index-banner .slide img { width: 100%; height: 100%; }
.index-banner .slide.active { z-index: 2; top: 0; left: 80px; width: 580px; height: 415px; }
.index-banner .detail { padding-top: 120px; margin-right: 10px; overflow: hidden; }
.index-banner .detail .title { width: 440px; height: 70px; margin-bottom: 10px; text-indent: -9999px; background: url(../img/index_banner_title.png) no-repeat 0 0; }
.index-banner .detail .brief { margin: 20px 0 30px; }
.index-banner .detail .brief-item { overflow: hidden; margin-bottom: 15px; font-size: 14px; }
.index-banner .detail .brief-item .dotlight { float: left; }
.index-banner .detail .brief-item-title, .index-banner .detail .brief-item p { margin-left: 65px; }
.index-banner .detail .brief-item-title { font-size: 28px; margin: 5px 0; }
/* .index-banner .detail .download-btn { display: inline-block; font-size: 20px; color: #fff; width: 150px; height: 50px; line-height: 50px; margin-bottom: 15px; text-align: center; background-color: #4be281; background-image: linear-gradient(0deg, rgba(50, 176, 145, 0.59) 0%, #4be281 100%), linear-gradient(#3fe7be, #3fe7be); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1), inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4); border-radius: 12px; margin-left: 5px; } */
.index-banner .detail .download-btn { display: inline-block; font-size: 20px; color: #fff; width: 150px; height: 50px; line-height: 50px; margin-bottom: 15px; text-align: center; background-color: #32b091; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1), inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4); border-radius: 12px; margin-left: 5px; }

.fadeIn, .fadeOut { animation-duration: .6s; animation-timing-function: linear; animation-fill-mode: forwards; }
.fadeIn { z-index: 9; animation-name: fadeIn; }
.fadeOut { animation-name: fadeOut; }

@keyframes fadeIn { 0% { top: 75px; left: 0; width: 395px; height: 285px; opacity: 1; }
  100% { top: 0; left: 80px; width: 580px; height: 415px; opacity: 1; } }
@keyframes fadeOut { 0% { top: 0; left: 75px; width: 570px; height: 415px; opacity: 1; }
  100% { top: 75px; left: 0; width: 390px; height: 285px; opacity: 1; } }
.index-instruction { padding: 60px 0; }
.index-instruction .list { overflow: hidden; }
.index-instruction .item { float: left; width: 300px; font-size: 16px; }
.index-instruction .item + .item { width: 260px; padding-left: 40px; }
.index-instruction .item-title { font-size: 22px; line-height: 54px; margin-bottom: 5px; color: #666; }
.index-instruction .item-title:before { content: ''; display: inline-block; width: 54px; height: 54px; margin-right: 10px; vertical-align: top; background: url(../img/icon_one.png) no-repeat; }
.index-instruction .item-desc { font-size: 14px; line-height: 1.5; color: #999; }
.index-instruction .item-onestep .item-title:before { background-image: url(../img/icon_one.png); }
.index-instruction .item-reset .item-title:before { background-image: url(../img/icon_reset.png); }
.index-instruction .item-part .item-title:before { background-image: url(../img/icon_part.png); }
.index-instruction .item-backup .item-title:before { background-image: url(../img/icon_backup.png); }

.index-platform { min-width: 1200px; position: relative; padding: 40px 0; background-color: #f3f3f3; }
.index-platform .platform-list { overflow: hidden; }
.index-platform .platform-item { font-size: 20px; float: left; width: 25%; text-align: center; transition: color ease-out .4s; vertical-align: top; color: #666; }
.index-platform .platform-item p { line-height: 1.2; margin-top: 10px; }
.index-platform .platform-item .img { display: block; width: 86px; height: 86px; margin: 0 auto 5px; background: url(../img/icon_win7.png) no-repeat; }
.index-platform .platform-item .img-xp { background-image: url(../img/icon_win7.png); }
.index-platform .platform-item .img-win7 { background-image: url(../img/icon_win7.png); }
.index-platform .platform-item .img-win8 { background-image: url(../img/icon_win8.png); }
.index-platform .platform-item .img-win10 { background-image: url(../img/icon_win8.png); }

.index-tutorial { overflow: hidden; margin-bottom: 40px; }
.index-tutorial dl { float: left; width: 380px; }
.index-tutorial dl + dl { margin-left: 30px; }
.index-tutorial dt { overflow: hidden; font-size: 25px; position: relative; color: #32b091; padding-bottom: 20px; margin-bottom: 15px; line-height: 1; border-bottom: 1px solid rgba(50, 176, 145, 0.5); }
.index-tutorial dt:after { position: absolute; z-index: 9; bottom: 0; left: 0; width: 6em; height: 5px; content: ''; background-color: rgba(50, 176, 145, 0.6); }
.index-tutorial dt a { position: absolute; right: 0; top: 10px; font-size: 16px; color: #32b091; }
.index-tutorial .block + .block { margin-top: 15px; }
.index-tutorial .media { width: 170px; color: #666; }
.index-tutorial .media + .media { margin-top: 10px; }
.index-tutorial .media img { width: 170px; height: 105px; margin-bottom: 5px; }
.index-tutorial .media p { font-size: 14px; line-height: 1.3; height: 2.6em; overflow: hidden; }
.index-tutorial .media a { color: inherit; }
.index-tutorial .media:hover { color: #32b091; }
.index-tutorial .list { width: 203px; font-size: 14px; }
.index-tutorial .list + .list { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #a6a6a6; }
.index-tutorial .list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; }
.index-tutorial .list li + li { margin-top: 15px; }
.index-tutorial .list li a { color: inherit; }
.index-tutorial .list li:hover { color: #32b091; }
.index-tutorial .videos { width: 780px; margin-left: 0; margin-top: 60px; }
.index-tutorial .videos dt:after { width: 4em; }
.index-tutorial .video-list { overflow: hidden; margin-right: -25px; }
.index-tutorial .video-list li { float: left; width: 245px; height: 160px; margin-bottom: 20px; margin-right: 20px; overflow: hidden; }
.index-tutorial .video-list li a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.index-tutorial .video-list li img { width: 100%; height: 100%; }
.index-tutorial .video-list li p { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 10px; font-size: 16px; color: #fff; text-align: center; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0, 0, 0, 0.56); }
.index-tutorial .infos { width: 380px; float: right; margin-top: 60px; }
.index-tutorial .infos dt:after { width: 4em; }
.index-tutorial .info-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #002832; }
.index-tutorial .info-list li:before { content: ''; display: inline-block; vertical-align: middle; width: 4px; height: 4px; background-color: #000; border-radius: 50%; margin-right: 10px; }
.index-tutorial .info-list li + li { margin-top: 22px; }
/* .index-tutorial .info-list li a { color: inherit; } */
.index-tutorial .info-list li:hover { color: #32b091; }

.index-links { margin-bottom: 40px; }
.index-links dt { overflow: hidden; font-size: 25px; position: relative; color: #32b091; padding-bottom: 20px; margin-bottom: 15px; line-height: 1; border-bottom: 1px solid rgba(50, 176, 145, 0.5); }
.index-links dt:after { position: absolute; z-index: 9; bottom: 0; left: 0; width: 4em; height: 5px; content: ''; background-color: rgba(50, 176, 145, 0.6); }
.index-links dt a { position: absolute; right: 0; top: 10px; font-size: 16px; color: #32b091; }
.index-links dd { font-size: 13px; overflow: hidden; }
.index-links dd a { float: left; color: #002832; margin-right: 15px; margin-bottom: 20px; }
.index-links dd a:hover { color: #32b091; }

/*# sourceMappingURL=index.css.map */
