body{font-size: 17px;color: #333;font-family: Tahoma;}
.detail{width:1080px; margin:0 auto;}
img{max-width: 100%;}
a{ text-decoration:none;}
a:hover{text-decoration: underline;}
li{ list-style:none;}
/*----------------*/
.main01 {background: url('../images/userguide-how/bg.jpg') center center no-repeat;  height: 305px;}
.main01 h1 {font-size: 45px;text-align: center;line-height: 50px;padding: 35px 0 275px 0;}
/*----------------*/
.main02 {padding: 35px 0 55px 0;}
.main02 .left-content {width: 730px;float: left;}
.main02 .left-content .crumb {font-size: 15px; color: #333;}
.main02 .left-content h1 {font-size: 31px;line-height: 35px;padding: 50px 0 30px 0;text-align: center;}
.main02 .left-content .software-list {text-align: center;font-size: 17px;margin-bottom: 30px;}
.main02 .left-content .software-list li {display: inline-block;text-decoration: underline;}
.main02 .left-content .software-list li:nth-child(1) {margin-right: 40px;}
.main02 .left-content .software-list li a {color: #333;}
.main02 .left-content .software-list li a:hover {text-decoration: none;color: #25abfe;}
.main02 .left-content .software-list li img {display: inline-block;vertical-align: middle;margin-right: 4px;}
.main02 .left-content>p {font-size: 17px;color: #666;line-height: 27px;margin-bottom: 20px;}

.main02 .left-content .navigation-box { border:1px solid #ececec; border-radius:8px; margin:20px 0 30px; background:#fcfcfc;}
.main02 .left-content .navigation-box .t{ background:#ececec; line-height:46px; font-size:19px; color:#333333; padding-left:15px; border-radius:8px 8px 0 0;}
.main02 .left-content .navigation-box ul{padding:15px 0;}
.main02 .left-content .navigation-box ul li { font-size:17px; padding:9px 0 9px 15px;}
.main02 .left-content .navigation-box ul li a {color: #1b96ff;text-decoration: none;}
.main02 .left-content .navigation-box li a:hover {color: #ff3300;text-decoration: underline;}
.main02 .left-content .navigation-box ul li:before{ content:"●"; display:inline-block;color: #1b96ff; font-size:15px; padding:0 5px 0 0; vertical-align:text-top;}

.main02 .left-content .download-box { background: url(../images/userguide-how/show-bg.png) no-repeat right center #f3fbfe; border-radius:5px; padding-bottom:30px;}
.main02 .left-content .download-box ul{padding:20px 0;}
.main02 .left-content .download-box ul li{color:#666666; padding:7px 0 7px 20px; font-size:15px;}
.main02 .left-content .download-box ul li b{ color:#333;}
.main02 .left-content .download-box ul li:before{ content:""; display:inline-block; background:url(../images/userguide-how/icon.png) no-repeat center left; width:18px; height:18px; padding-right:15px; vertical-align:middle; }
.download-box .download-sys{padding:0 0 0 20px;}
.download-box .download-sys a{ display:inline-block;border-radius:5px; background:url(../images/userguide-how/win-mac.png) no-repeat center right 10px #16b3fc; font-size:16px; color:#fff; font-weight:bold; line-height:38px; padding:0 60px 0 15px;}
.download-box .download-sys a:hover{text-decoration:none;}
.download-box .download-sys a.pmMobile{background:#16b3fc; padding-right:15px; }

.to-download { display: block; width: 308px; box-sizing:border-box; padding-left: 20px; height: 72px;color: #fff;margin: 20px 0 10px 0;  float: left;
	background:#78c443 url('../images/userguide-how/button-win-icon.png') 244px center no-repeat; overflow: hidden; border-radius:  5px; 
	-webkit-border-radius:  5px; -moz-border-radius:  5px; -ms-border-radius:  5px; -o-border-radius:  5px; }
.to-download:hover {text-decoration: none;color: #fff;}
.to-download b  {display: block;font-size: 25px;margin: 14px 0 4px 0;font-weight: 550;}
.to-download span {display: block;font-size: 15px;}

.to-download-mac { display: block; width: 288px; padding-left: 20px; height: 72px;color: #fff;margin: 20px 0 10px 0;  float: left;
	background:#78c443 url('../images/userguide-how/macioc.png') 244px center no-repeat; overflow: hidden; border-radius:  5px; 
	-webkit-border-radius:  5px; -moz-border-radius:  5px; -ms-border-radius:  5px; -o-border-radius:  5px; }
.to-download-mac:hover {text-decoration: none;color: #fff;}
.to-download-mac b  {display: block;font-size: 25px;margin: 14px 0 4px 0;font-weight: 550;}
.to-download-mac span {display: block;font-size: 15px;}

.to-buy { display: block; width: 288px; padding-left: 20px; height: 72px;color: #fff; margin: 20px 0 10px 60px;  float: left;
	background:#ff9c00 url('../../img/buycion.png') 224px center no-repeat; overflow: hidden; border-radius:  5px; 
	-webkit-border-radius:  5px; -moz-border-radius:  5px; -ms-border-radius:  5px; -o-border-radius:  5px; }
.to-buy:hover {text-decoration: none;color: #fff;}
.to-buy b  {display: block;font-size: 25px;margin: 14px 0 4px 0;font-weight: 550;}
.to-buy span {display: block;font-size: 15px;}

.main02 .left-content .download-step p a {font-size:15px;color: #25abfe;}
.main02 .left-content .btn a{float:none;margin: 0;display: inline-block;}
.main02 .left-content .main-intro {padding-top: 46px;}
.main02 .left-content .main-intro h2 {font-size: 20px;font-weight:550;padding: 14px 0 14px 14px;border-left: 5px solid #cccccc;background-color: #ececec;margin-bottom: 26px;}
.main02 .left-content .main-intro h2.red-bg{ background-color:#fff8f6; border-left-color:#ffe6e2;}
.main02 .left-content .main-intro h3{ font-size:17px; font-weight:bold;}
.main02 .left-content .main-intro p {color: #666666;margin-bottom: 20px;line-height: 30px;}
.main02 .left-content .main-intro p b {color: #333;}
.main02 .left-content .main-intro>ul {padding:12px 0 22px 0;}
.main02 .left-content .main-intro>ul>li {position: relative;padding-left: 16px;font-size: 17px;color: #666;line-height: 25px;margin-bottom: 12px;}
.main02 .left-content .main-intro>ul>li::before {content: ""; width: 6px; height: 6px; background-color: #25abfe;position: absolute; top: 11px; left: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%;}
.main02 .left-content .main-intro>img {margin-bottom: 22px;width: 100%;max-width: auto;}
.main02 .left-content .main-intro .tips-info {background-color: #fcfcfc;border: 1px dashed #d6d6d6;padding: 20px 20px 1px 60px;position: relative;}
.main02 .left-content .main-intro .tips-info::before {content: "";width: 34px;height: 34px;background-color: #f2f2f2;border: 1px dashed #d6d6d6;position: absolute;top: -1px;left: -1px; }
.main02 .left-content .main-intro .tips-info::after {content: "";border-top: 17px solid #fff;border-left: 17px solid #fff;border-right: 17px solid transparent;border-bottom: 17px solid transparent;position: absolute;top: -1px;left: -1px;}
.main02 .left-content .main-intro .tips-info p {font-size: 17px;margin-bottom: 15px;}
.main02 .left-content .main-intro .tips-info p img {display: inline-block;vertical-align: middle;margin-right: 5px;}
.main02 .left-content .main-intro .tips-info li {position: relative;padding-left: 18px;font-size: 17px;color: #666;line-height: 27px;margin-bottom: 16px; }
.main02 .left-content .main-intro .tips-info li::before { content: ""; width: 6px; height: 6px; background-color: #25abfe;position: absolute; top: 11px; 
left: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.main02 .left-content .main-intro .tips-info li b {font-weight:550;}
.main02 .left-content .main-intro .warning-info {margin-bottom: 25px;background-color: #fff8f6;border-top: 4px solid #ffe6e2;padding: 14px 18px 10px;}
.main02 .left-content .main-intro .warning-info p {font-size: 17px;margin-bottom: 14px;}
.main02 .left-content .main-intro .warning-info p img {display: inline-block;vertical-align: middle;margin-right: 5px;}
.main02 .left-content .main-intro .warning-info li {position: relative;padding-left: 15px;font-size: 17px;color: #666;line-height: 25px;margin-bottom: 8px; }
.main02 .left-content .main-intro .warning-info li::before { content: ""; width: 6px; height: 6px; background-color: #fe9f88;position: absolute; top: 10px; left: 0; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.main02 .left-content .main-intro .compare-box{margin:20px 0;}
.main02 .left-content .main-intro .compare-box table{border-collapse:collapse; border:1px solid #ededed; color:#666; font-size:14px;}
.main02 .left-content .main-intro .compare-box table td{border:1px solid #ededed; padding:10px;}
.main02 .left-content .main-intro .compare-box table td.tac-bg{text-align:center; background-color:#fff8f6;}

.main02 .right-content {width:270px;float: right;margin-top: 200px;}
.main02 .fixed-style {position: fixed;top: 20px;float: none;margin-top: 0;margin-left: 810px;}
.main02 .right-content .sys-title{ font-size:13px; display:flex;justify-content:center;}
.main02 .right-content .sys-title a{line-height:29px; background:url(../images/userguide-how/win2.png) no-repeat center right 10px; border:1px solid #ececec;border-right:none; border-radius:5px 0 0 5px; color:#000; display:inline-block; padding:0 10px; width:50%; box-sizing:border-box;}
.main02 .right-content .sys-title a:hover{text-decoration:none;}
.main02 .right-content .sys-title a:nth-child(2){ border-right:1px solid #ececec; border-left:none;border-radius:0 5px 5px 0; padding-left:20px;background:url(../images/userguide-how/mac2.png) no-repeat center right 25px;}
.main02 .right-content .sys-title a.focus{ background-color:#16b3fc;color:#fff;border:1px solid #16b3fc;}
.main02 .right-content .sys-title a:nth-child(1).focus{ background-image:url(../images/userguide-how/win.png);}
.main02 .right-content .sys-title a:nth-child(2).focus{ background-image:url(../images/userguide-how/mac.png);}

.main02 .right-content .video-handle {position: relative;overflow: hidden;margin: 10px 0 30px 0; border-radius:6px;}
.main02 .right-content .video-handle img {display: block;width: 100%;}
.main02 .right-content .video-handle div {width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;cursor: pointer;}
.main02 .right-content .video-handle div:hover {background-color: rgba(0,0,0,0.2);}
.main02 .right-content .video-handle div span { width: 58px; height: 58px; border: 1px solid #Fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); border-radius:  50%; -webkit-border-radius:  50%; -moz-border-radius:  50%; -ms-border-radius:  50%; -o-border-radius:  50%; }
.main02 .right-content .video-handle div span::after {content: "";border-top: 13px solid transparent;border-bottom: 13px solid transparent;border-left: 23px solid #fff;position: absolute;top: 17px;left: 22px;}
.main02 .right-content .more-list { padding: 26px 14px 8px 22px; background-color: #f9f9f9; border-radius: 5px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius:7px; -o-border-radius: 7px; margin-bottom: 20px;}
.main02 .right-content .more-list p {margin-bottom: 6px;}
.main02 .right-content .more-list li {padding: 16px 0;border-bottom: 1px solid #ececec;font-size: 16px;}
.main02 .right-content .more-list li a {color: #333;display: block;}
.main02 .right-content .more-list li a:hover {color: #333;text-decoration: none;background-color: #eaeaea;}
.main02 .right-content .more-list li:last-child {border-bottom: none;}
.main02 .right-content .more-list li div {display: inline-block;vertical-align: middle;width: 50px;}
.main02 .right-content .other-info {padding: 0 0 15px; text-align:center;}
.main02 .right-content .other-info img {}
.main02 .right-content .other-info p {text-align: center;margin-top: 10px;}
.main02 .right-content .other-info p a {color: #333; font-size:16px;}
.main02 .right-content .other-info p a:hover{text-decoration: none;color: #25abfe;}
/*----------------*/
.popup-container {position: fixed;top: 0;left: 0;z-index: 100;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);display: none;}
.popup-content { width: 769px; background: #fff; position: absolute; top: 50%; left: 50%;padding:  14px 18px 35px;transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.popup-content .to-download {margin-top: 18px; margin-left:40px;}
.popup-content iframe {width: 100%;height: 425px;}
.popup-content .cancel {position: absolute;top: -60px;right: -60px;cursor: pointer;}
.popup-content .to-download.pmMobile{ background:#78c443; padding-left:60px;}

.to-top{position:fixed; right:50px; bottom:100px; cursor:pointer; display:none;}
/*----------------*/
@media (max-width: 979px) {
    .detail {width: 95%;}
    .main02 .left-content {width: 100%;float: none;}
	.main02 .right-content {width: 100%;float: none;margin-top:60px;}
	.main02 .fixed-style {position: static;top: 0;margin-left: 0;margin-top:60px;}
    .popup-content {width: 90%;height: auto;}
}

@media (max-width: 767px) {
	.main02 .left-content .download-box{ background:#f3fbfe;}
	
}

@media (max-width: 479px) {
	.popup-content iframe {height: 250px;}
	
	.popup-content .to-download,.to-buy{ margin-left:20px;}
}