@charset "utf-8";
/* CSS Document */
.banner-slider-wrap{ width:100%; height:600px; position:relative; margin:0 auto;}
.banner-slider-bg{ width:100%; height:600px; float:left;}
.banner-slider-1{background:url(../images/index-banner-1.jpg) center top no-repeat; background-size:cover; position:relative;}
.banner-central{ float:left; width:300px; height:600px; position:relative;}
.banner-slider-2{ background:url(../images/index-banner-2.jpg) center top no-repeat; background-size:cover; position:relative;}

.border-right{width:0;height:0; border-left: 83px solid transparent; border-right: 0px solid transparent;border-top: 600px solid #fff; position:absolute; top:0; right:0px;z-index:9;}
.border-left{width:0;height:0; border-left: 0px solid transparent; border-right: 83px solid transparent;border-top: 600px solid #fff; position:absolute; top:0; left:0px; z-index:9;}
.banner-slider-bg-wrap{ width:100%; position:absolute; transition:all 0.3s; bottom:0; opacity:0;}
.banner-slider-txt-wrap{ width:540px; height:auto; color:#fff;}
.lefttxt-wrap{position:absolute; bottom:0; right:0;}
.righttxt-wrap{position:absolute; bottom:0; left:0;}
.banner-slider-txt{ width:410px; text-align:center;}
.banner-slider-txt h2{ width:262px; height:52px; background:url(../images/index-banner-txt-bg.png) no-repeat; font-size:30px; font-weight:bold; text-align:center; line-height:52px; margin-bottom:20px; display:inline-block; }
.banner-slider-txt p{ font-size:20px; font-style:italic; margin-bottom:85px;}
.righttext{ position:absolute; right:0; bottom:0;}
.banner-central-content{ width:300px; padding-top:60px; text-align:center; position:relative;}
.central-content-text{ width:100%; margin-top:50px; position:absolute; vertical-align:top; opacity:0; transition:opacity 0.3s}
.central-content-text h3{ font-size:20px;}
.central-content-text p{ margin-top:10px;}
.central-text-1{ font-size:24px; color:#212121; margin-top:-20px !important;}
.central-text-2{ font-size:34px !important; font-style:italic; font-weight:bold; margin-top:20px; margin-bottom:20px;}
.central-text-3{ font-size:16px; color:#666; font-style:italic;}
.central-text-4{ width:208px; height:60px; display:inline-block; background:url(../images/index-win10.png) 20px center no-repeat; line-height:60px; font-size:16px; color:#0283c3; border:2px solid #0283c3; padding-left:50px; margin-top:25px;}
.central-text-5{ color: #f00;}
.central-text-5 a{ color: #212121; text-decoration: underline;}
.central-text-5 a:hover{ color: #666;}


.banner-color{width:100%; height:600px; background-color:rgba(0,0,0,0.4);}
.banner-display-content h2{ background:none;}
.banner-btn{ margin-bottom:160px;}
.banner-btn a{ display:inline-block; width:298px; height:35px; border:1px solid #fff; color:#fff; line-height:35px; margin-bottom:20px;}
.banner-btn a:hover{ text-decoration:none; background-color:rgba(255,255,255,0.4);}

.display{ opacity:1;}


.module-wrap{ width:100%;}
.module-wrap-content{margin:0 auto; padding-top:80px;}
.module-wrap-content h1, .module-wrap-content h2{ font-size:40px; color:#333; text-align:center; margin-bottom:20px;}
.module-wrap-content .module-descipition{ font-size:20px; color:#666; text-align:center;}
.manager-wrap{ width:1000px; margin:0 auto; margin-top:60px; position:relative;}
.manager-content{ width:490px; height:339px; float:left; position:relative;}
.index-resize{ background:url(../images/index-manager-bg-1.jpg) no-repeat; margin-bottom:20px;}
.index-disk{ background:url(../images/index-manager-bg-2.jpg) no-repeat; margin-bottom:20px; margin-left:20px;}
.index-magrate{ background:url(../images/index-manager-bg-3.jpg) no-repeat;}
.index-convert{ background:url(../images/index-manager-bg-4.jpg) no-repeat; margin-left:20px;}
.manager-center-cion-wrap{ width:237px; height:237px; background-color:#fff; border-radius:50%; position:absolute; z-index:9; left:381.5px; top:230.5px; text-align:center;}
.manager-center-cion{ display:inline-block; width:187px; height:187px; background:url(../images/index-manager-icon.png) center center no-repeat #838f96; border-radius:50%; margin-top:10%; transition:all 0.3s;}
.manager-center-cion-active{ background-color:#dadede;}
.manager-text{ width:367px; height:240px; color:#fff; text-align:center; position:relative;}
.manager-content .resize-text, .manager-content .magrate-text{ padding:50px 73px 50px 50px;}
.manager-content .disk-text, .manager-content .convert-text{ padding:50px 50px 50px 73px;}

.resize-text{ background:url(../images/index-manager-i1.png) left 50px top 50px no-repeat;}
.disk-text{ background:url(../images/index-manager-i2.png) right 50px top 50px no-repeat;}
.magrate-text{ background:url(../images/index-manager-i3.png) left 50px bottom 40px no-repeat;}
.convert-text{ background:url(../images/index-manager-i4.png) right 50px bottom 40px no-repeat;}

.manager-text h3{ font-size:32px; padding-top:100px;}
.index-disk .manager-text h3{ line-height:40px;}

.manager-text-content{ z-index:1; background-color:rgba(238,238,238,0.9); color:#333; text-align:left; width:100%; height:100%; position:absolute; overflow:hidden; bottom:0; transition:all 0.3s; opacity:0;}
.manager-text-wrap{ height:289px; padding:50px 73px 0px 50px;}
.manager-text-wrap1{ height:289px; padding:50px 30px 0px 93px;}

.manager-text-content h3{ font-size:24px; padding:0;}
.index-disk .manager-text-content h3{ line-height:26px;}
.manager-text-content p{ font-size:18px; margin-top:15px; line-height:30px;}

.manager-down{ width:993px; margin:0 auto; border:2px solid #c1c1c1; margin-top:20px; transition:all 0.3s;}
.manager-down-btn{ display:inline-block; padding:20px; font-size:26px; color:#666; text-align:center; transition:all 0.3s;}
.manager-down-btn-icon{ display:block; float:right; width:95px; background:url(../images/manager-down.png) right center no-repeat; font-size:16px; color:#999; text-align:left; margin-top:5px; transition:all 0.3s;}
.manager-down:hover{border:2px solid #3093c7;}
.manager-down:hover .manager-down-btn{ text-decoration:none; color:#3093c7}
.manager-down:hover .manager-down-btn-icon{  background:url(../images/manager-down-current.png) right center no-repeat; color:#3093c7;}


.active .manager-text{ opacity:0;}
.active .manager-text-content{ opacity:1;}

.module-choose-wrap{ width:100%; margin-top:60px;}
.module-choose-bg{ height:765px; float:left; position:relative;}
.choose-left{ width:45%; background:url(../images/index-choose-bg-1.jpg) no-repeat; background-size:cover;}
.choose-right{ width:55%; background:url(../images/index-choose-bg-2.jpg) no-repeat; background-size:cover;}
.choose-left-bg{ width:624px; height:765px; background:url(../images/index-choose-bg-editor.png) left 50px no-repeat; position:absolute; right:0; top:0;}
.choose-right-bg{ width:100%; height:765px; background:url(../images/index-choose-bg-user.png) left 620px bottom 50px no-repeat; position:absolute; left:0; top:0;}
.choose-left-text{ width:395px; position:absolute; right:30px; text-align:center; padding-top:25%; color:#fff;}
.editor-time{ display:block; font-size:16px; margin-top:10px; margin-bottom:30px;}
.editor-content{position:relative; padding:0 10px;}
.editor-content-text{ display:inline-block; width:310px; font-size:18px; text-align:left; padding:10px 0px; }
.yinh{ display:block; font-size:80px; color:#8c898d;}
.yinhstart{ position:absolute; top:0; left:0;}
.yinhend{ position:absolute; bottom:-26px; right:20px;}
.editor-review-wrap{ text-align:left; margin-top:60px; margin-left:50px;}
.editor-review{ font-size:18px; text-decoration:underline; color:#fff; margin-right:5px;}
.choose-right-text{ width:605px; height:auto; background-color:rgba(255,255,255,0.8); position:absolute; left:-20px; top:115px;}
.choose-right-user-show{ width:90%; height:458px; margin:0 auto; margin-top:40px; overflow:hidden; position:relative;}
.choose-right-user-wrap{ position:absolute; top:0;}
.choose-right-user-content{ color:#333; float:left;}
.choose-user-content-wrap{ display:inline-block; margin-bottom:30px;}
.choose-user-content-wrap h3{ color:#222; font-size:22px; margin-bottom:10px;}
.choose-user-content-wrap p{ font-size:16px; line-height:30px; margin-bottom:10px;}
.choose-user-content-wrap img{ float:right;}

.index-newest-tutorial{ width:1000px; margin-bottom:60px;}
.newest-tutorial-ul{ width:100%; margin-top:50px;}
.newest-tutorial-ul li{ display:inline-block; width:47%; background:url(../images/index-article-li.png) left 5px no-repeat; padding-left:25px; vertical-align:top; margin-bottom:10px;}
.newest-tutorial-ul li a{ padding-right:5%; color:#666; font-size:20px;}


.s-index-btn{ position:absolute; bottom:30px;}
.s-index-btn li{ width:10px; height:10px; border-radius:50%; background-color:#c8c6c6; display:inline-block; margin-right:10px; cursor:pointer; transition:all 0.2s;}
.s-index-btn .action{background-color:#9a9a9a;}

.banner-slider-wrap:after, .banner-central:after, .manager-down:after, .module-choose-wrap:after, .choose-right-user-content:after, .choose-right-user-wrap:after{ content:"";display:block;height:0;clear:both;}
.manager-wrap:after{ width:100%; content:""; display:inline-block; height:0;}