.guide-banner {
    margin-top:91px;
    background: #18bef9;
    padding: 60px 0 40px 0;
    color: #fff;
}
.guide-banner .title {
    font-size: 32px;
    line-height: 1.2em;
    color: #fff;
}
.guide-banner .p-title{
    padding: 10px 0;
}
.win-mac-bt {
    position: relative;
    display: block;
}
.try-buy div {
    float: left;
}
.button{
    padding-left: 25%;
}
.button p {
    color: #fff;
}
.guide-banner .button p {
    margin: 50px 0 20px;
}
.guide-banner .bt-try {
    margin-right: 40px;
}
a {
    transition: all .3s ease 0s;
}
.pb-btn {
    display: inline-block;
    line-height: 50px;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.pb-try {
    border: solid 2px #fff;
    padding-left: 43px;
    padding-right: 79px;
    margin-right: 40px;
    color: #259bd6;
    background: #fff url(../images/icon-hover.png) no-repeat 150px -54px;
    text-decoration: none;
}
.pb-buy {
    border: solid 2px #f6a623;
    padding-left: 47px;
    padding-right: 78px;
    color: #fff;
    background: #f6a623 url(../images/icon.png) no-repeat 133px -144px;
    text-decoration: none;
}
.new-back-bt-try, .new-back-bt-buy {
    font-weight: 700;
}
.win-mac-bt .new-back-bt-try {
    padding-left: 48px;
    padding-right: 87px;
    margin: 0;
    background: #fff url(../images/icon-hover.png) no-repeat 165px -54px;
}
.win-mac-bt .new-back-try a.new-back-bt-win:hover{
    background:#d6ebff url(../images/icon-hover.png) no-repeat 48px -151px;
    color:#259bd6;
}
.win-mac-bt .new-back-try a.new-back-bt-mac:hover{
    background:#d6ebff url(../images/icon-hover.png) no-repeat 48px -100px;
    color:#259bd6;
}
.win-mac-bt .new-back-buy a.new-back-bt-win:hover{
    background:#fdedd3 url(../images/icon-hover.png) no-repeat 48px -47px;
    color:#ed8b04;
}
.win-mac-bt .new-back-buy a.new-back-bt-mac:hover{
    color:#ed8b04;
    background:#fdedd3 url(../images/icon-hover.png) no-repeat 48px 4px;
}
.guide-banner .new-back-bt-try {
    font-weight: 600;
}
.guide-banner .win-mac-bt .new-back-bt-try {
    color: #2961a1;
    padding-left: 31px;
    padding-right: 53px;
    background: #fff url(../images/download_icon2.png) no-repeat 220px center;
}

.new-back-bt-buy {
    padding-left: 57px;
    padding-right: 87px;
    background: #f6a623 url(../images/icon.png) no-repeat 143px -144px;
}
.pb-buy:hover {
    border: solid 2px #ed8b04;
    color: #fff;
    background: #ED8B05 url(../images/icon.png) no-repeat 133px -144px;
    text-decoration: none;
}

.win-mac-bt span {
    display: inline-block;
    position: absolute;
    left: 0;
    box-shadow: 0px 4px 15px rgba(0,0,0,.2);
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}
.win-mac-bt .new-back-bt-all {
    display: none;
}
.guide-banner .win-mac-bt .new-back-bt-all {
    word-spacing: -5px;
    width: 229px;
}
.win-mac-bt .new-back-bt-all a {
    display: block;
    height: 60px;
    border-top: 1px solid #d6ebff;
    line-height: 50px;
}
.win-mac-bt .new-back-bt-all .new-back-bt-win {
    padding: 0 55px 0 102px;
    background: #fff url(../images/icon-df.png) no-repeat 48px -47px;
}
.win-mac-bt .new-back-bt-all .new-back-bt-mac {
    padding: 0 60px 0 74px;
    background: #fff url(../images/icon-df.png) no-repeat 48px 4px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}


.guide-banner .win-mac-bt .new-back-bt-all .new-back-bt-mac {
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 0;
}

.new-back-bt-buy {
    padding-left: 57px;
    padding-right: 107px;
    background: #f6a623 url(../images/icon.png) no-repeat 143px -144px;
}
.button-buy .new-back-bt-all a {
    border-top: 1px solid #ffdda5;
}
.button-buy .new-back-bt-all .new-back-bt-win {
    background: #fff url(../images/icon-df.png) no-repeat 48px -47px;
}
.guide-banner .win-mac-bt .new-back-bt-all a {
    display: inline-block;
    width: 114px;
    text-align: center;
    padding: 10px 0;
    background: #fff;
    line-height: 70px;
}
.guide-banner .win-mac-bt .new-back-bt-all i {
    display: inline-block;
    width: inherit;
    height: 45px;
    font-style: unset;
}
.guide-banner .win-mac-bt .new-back-bt-all .new-back-bt-win i {
    background: url(../images/version_df.png) no-repeat 42px -60px;
}
.guide-banner .win-mac-bt .new-back-bt-all .new-back-bt-mac i {
    border-left: 1px solid #a6c7ed;
    background: url(../images/version_df.png) no-repeat 42px -7px;
}
.guide-banner .win-mac-bt .new-back-try .new-back-bt-win i:hover{
    color:#2074d3;
    background:url(../images/version_ho.png) no-repeat 42px -60px;
}
.guide-banner .win-mac-bt .new-back-try .new-back-bt-mac i:hover{
    color:#2074d3;
    background:url(../images/version_ho.png) no-repeat 42px -7px;
}
.guide-banner .win-mac-bt .new-back-bt-all .new-back-bt-win {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 30px;
}
.guide-banner .win-mac-bt .new-back-buy .new-back-bt-mac i {
    border-left: 1px solid #f6a623;
}
.pb-try:hover {
    border: solid 2px #259bd6;
    color: #fff;
    background: #259bd6 url(../images/icon.png) no-repeat 150px -54px;
    text-decoration: none;
}
.new-back-bt-buy:hover {
    color: #fff;
    background: #ed8b04 url(../images/icon.png) no-repeat 155px -144px;
}
.guide-banner .win-mac-bt .new-back-bt-buy {
    padding-left: 46px;
    padding-right: 96px;
}
.guide-banner .win-mac-bt a.new-back-bt-try-curr{
    border-color:#2074d3;
    color:#fff;
    background:#2074d3 url(../images/download_hover.png) no-repeat 180px center
    
}
.guide-banner .win-mac-bt .new-back-bt-try-curr{
    color:#fff;
    border-color:#259bd6;
    background:#259bd6 url(../images/icon.png) no-repeat 165px -54px;
    border-top-right-radius:30px;
    border-top-left-radius:30px;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    transition:border-bottom-radius,border-top-radius .1s;
    -moz-transition:border-bottom-radius,border-top-radius .1s;
    -webkit-transition:border-bottom-radius,border-top-radius .1s;
    -o-transition:border-bottom-radius,border-top-radius .1s;
}
.win-mac-bt .new-back-bt-buy-curr{
    color:#fff;
    border-color:#ed8b04;
    background:#ed8b04 url(../images/icon.png) no-repeat 143px -144px;
    border-top-right-radius:30px;
    border-top-left-radius:30px;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    transition:border-bottom-radius,border-top-radius .1s;
    -moz-transition:border-bottom-radius,border-top-radius .1s;
    -webkit-transition:border-bottom-radius,border-top-radius .1s;
    -o-transition:border-bottom-radius,border-top-radius .1s;
    
}
.guide-banner .win-mac-bt .new-back-bt-all a:hover{
    background:#fff;
}
.guide-banner .win-mac-bt .new-back-buy .new-back-bt-win i:hover{
    background:url(../images/buy_hover.png) no-repeat 42px -60px;
}

.guide-banner .win-mac-bt .new-back-buy .new-back-bt-mac i:hover{
    color:#f6a623;
    background:url(../images/buy_hover.png) no-repeat 42px -7px;
}
div.win-mac-bt{
    margin-bottom:20px;
}
.guide-banner [class^="icon-"],.guide-banner [class*=" icon-"]{
    padding-left: 10px;
}

.guide_content .container {
    width: 1200px;
    padding: 0;
}
.cont_area{
    position:relative;
}

.cont_area .cont_body {
    float: left;
    width: 900px;
    border-left: solid 2px #2c2047;
    padding-left:40px;
    padding-top:40px;
    color:#999;
}
.cont_area .cont_body .case{
    display:none;
    /*调用动画效果*/
	-webkit-animation-name: fadeIn; /*动画名称*/
	-webkit-animation-duration: 0.8s; /*动画持续时间*/
	-webkit-animation-iteration-count: 1; /*动画次数*/
	-webkit-animation-delay: 0s; /*延迟时间*/
}
.cont_area .cont_body .case.curr{
    display:block;
}
.cont_area .cont_body .guide-title {
    font-size:36px;
    color:#484848;
}
.cont_area .cont_body .content {
    padding: 30px 0 50px 0;
}
.cont_area .cont_body .content p {
    color:#585858;
    line-height:1.88;
    margin-bottom:15px;
}
.cont_area .cont_side {
    position: sticky;
    top:40px;
    float: left;
    width: 270px;
    margin-right: 10px;
    padding-top:40px;
}
.cont_area .cont_side .guide_sys{
    font-size:20px;
}
.cont_area .cont_side .guide_sys a i{
    padding-left:15px;
}
.cont_area .cont_side .guide_sys a.active i{
    color:#18bef9;
}
.cont_area .cont_side .p-title{
    font-size:20px;
    padding:10px;
}
.cont_area .cont_side ul.list{
    padding: 0 0 30px 30px;
}
.cont_area .cont_side ul.list li {
    padding: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.2em;
    list-style: disc;
    color: #666;
    cursor:pointer;
}

.cont_area .cont_side ul.list li.curr {
    color: #18bef9;
    text-decoration: underline;
}
.cont_area .cont_side .close-list{
    display:none;
    position: absolute;
    left: 360px;
    padding-top: 10px;
}
.cont_area .open-list{
    width: 414px;
    padding:5px;
    position: absolute;
    padding-top: 10px;
    font-size:20px;
    color:#fff;
    top:0;
    display:none;
    background:#18bef9;
    padding-left:40px;
}
.cont_area .open-list span{
    padding-left:200px
}
.choose-sys a{
    font-size:24px;
    padding:10px;
}
.choose-sys a.act{
    color:#0027ff;
}
/*动画效果*/
@-webkit-keyframes fadeIn {
	0% {
	opacity: 0; /*初始状态 透明度为0*/
	}
	20%{
		opacity: .2;
	}
	50% {
		opacity: .5; /*中间状态 透明度为0.5*/
	}
	70%{
		opacity: .7;
	}
	100% {
		opacity: 1; /*结尾状态 透明度为1*/
	}
}
@media screen and (max-width: 768px) {
    .cont_area .cont_body .guide-title {
        font-size: 24px;
        padding-top:16px;
    }
    .guide-banner .title {
        font-size: 20px;
    }
    .button {
        padding-top:15px;
        padding-left: 0;
    } 
    div.bt-try{
        display:none;
    }
    .cont_area .cont_side{
        background: #18bef9;
        width: 100%;
        float:unset;
    }
    .cont_area .cont_side ul.list li.curr {
       color:#fff;
    }
    .cont_area .cont_body{
        width:375px;
    }
    .cont_area .cont_side .close-list{
        display:block;
    }
}