@charset "utf-8";
/* CSS Document */
.detail{width: 1080px; margin: 0 auto;}
.details {width: 1100px;margin: 0 auto;}
.detail a{color: #30a6ec;}
.detail a:hover{text-decoration: underline;}

.main01{background: url(../../software/images/spsce/div01-bg01.jpg) no-repeat center top #0b0b0b; height: 240px;color: #fff;}
.main01 .crumb{padding: 20px 0 70px;}
.main01 .crumb a{text-decoration: none;}
.main01 .crumb a:hover{text-decoration: underline;}
.main01 .crumb .Flag{float:right;}
.main01 .crumb .Flag a{margin-left:5px;}
.main01 h1{font-size: 45px;text-align: center;line-height: 51px;padding-bottom: 18px;}
.main01 p{text-align: center;color: #ededed;font-size: 17px;padding-bottom: 6px;line-height: 31px;}
/*----------*/

.main02{background: url(../../software/images/spsce/div02-bg01.jpg) repeat-x center top;color: #fff;}
.main02 .detail{padding-top:40px;}
.main02 p {font-size: 15px;line-height: 19px;color: #acacac;text-align: center;margin-bottom: 25px;}
.main02 .btn{ text-align:center;}
.main02 .btn a{display: inline-block;font-size:21px;color: #fff;text-align: center;width: 258px;height: 58px;border: 1px solid #0fb4ff;line-height: 58px;background: #0fb4ff;border-radius: 4px;text-decoration: none;}
.main02 .btn a::after {content: "";width: 16px;height: 20px;background: url(../images/win-icon.png) no-repeat center/cover;display: inline-block;vertical-align: middle;margin: -3px 0 0 15px;}
.main02 .btn a.mac-download::after {width: 20px;height: 21px;background: url(../images/mac-icon.png) no-repeat center/cover;margin-top: -5px;}
.main02 .btn a:hover {background-color: transparent;}
.btn-info {font-size: 15px;line-height: 19px;color: #fff;text-align: center;margin-bottom: 24px;}
.mark-content {display: inline-block;vertical-align: middle;margin-right: 5px;width: 18px;height: 18px;border-radius: 50%;background: #fff url(../images/mark-icon.png) no-repeat;cursor: pointer;position: relative;}
.mark-info {display: none;width: 250px;padding: 5px 10px;background-color: #fff;border: 1px solid #dedfe3;border-radius: 10px;font-size: 12px;line-height: 16px;color: #595959;position: absolute;bottom: 30px;left: -20px;text-align: justify;}
.mark-info::after {content: "";width: 12px;height: 12px;border-right: 1px solid #dedfe3;border-bottom: 1px solid #dedfe3;background-color: #fff;transform: rotate(45deg);position: absolute;bottom: -7px;left: 22px;}
.mark-content:hover .mark-info {display: block;}
.main02 .btn-info+.icon {padding-top: 17px;}
.main02 .icon{padding: 84px 0 0 0;}
.main02 .icon.small-padding {padding-top: 17px;}
.main02 .icon .icon_one{float: left; width: 25%; text-align: center;font-size: 17px;}
.main02 .icon .icon_one a{display: inline-block; width: 184px; height:141px; text-decoration: none; background: url(../../software/images/spsce/i2.png) no-repeat center bottom;color: #fff;}
.main02 .icon .icon_one:first-child a{ color: #15171c; text-decoration: none; background: url(../../software/images/spsce/i1.png) no-repeat center top; }
.main02 .icon .icon_one a>img{padding: 20px 0 10px;}
/*----------*/

.main03 {padding: 40px 0 32px;}
.main03 h2 {font-size: 24px;color: #000;line-height: 41px;margin-bottom: 20px;text-align: center;font-weight: 600;}
.main03 .table-container {margin-bottom: 74px;width: 100%;overflow-x: auto;overflow-y: hidden;}
.main03 .table-special-container {position: relative;}
.main03 .special-top {padding-top: 20px;}
.main03 .style-one {width: 100%;border-left: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: center;}
.main03 .style-one tr:nth-child(odd) {background-color: #f5f5f5;}
.main03 .style-one th {background-color: #c8e2fa;font-size: 17px;line-height: 29px;color: #333a40;height: 64px;font-weight: 500;padding: 10px 50px;}
.main03 .style-one th:first-child {border-right: 1px solid #fff;width: 250px;}
.main03 .style-one th:last-child {width: 850px;text-align: left;}
.main03 .style-one td {font-size: 17px;line-height: 25px;color: #000;border-top: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;padding: 20px 50px;}
.main03 .style-one td:last-child {text-align: left;}
.main03 .style-one td a{color:#30a6ec;}
.main03 .style-one tr:last-child td[colspan="2"] {text-align: left;}

.main03 .table-list li {list-style: none;display: inline-block;;text-align:center;width: 274px;background-color: #fff;font-size: 17px;color: #333a40;height: 70px;font-weight: 500;border-right: 1px solid #fff;position: relative;}
.main03 .table-list li:last-child {border: none;}
.main03 .table-list li span {position: absolute;bottom: 0;left: 0;width: 100%;background-color: #c8e2fa;vertical-align: bottom;height: 48px;line-height: 48px;border-radius: 6px 6px 0 0;cursor: pointer;transition: all 0.3s;}
.main03 .table-list li span.on-focus {background-color: #9cc9f8;height: 70px;line-height: 70px;}
.main03 .table-list li span:hover {height: 70px;line-height: 70px;background-color: #9cc9f8;}
.main03 .style-two {width: 100%;border-bottom: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;}
.main03 .table-special-container .style-two {margin-bottom: 65px;}
.main03 .style-two tr:nth-child(even) {background-color: #f5f5f5;}
.main03 .style-two th {box-sizing: border-box;font-size: 17px;line-height: 25px;color: #000;border-top: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;padding: 20px 50px;}
.main03 .style-two th:first-child {width: 274px;}
.main03 .style-two th:last-child {width: 826px;text-align: left;}
.main03 .style-two td {text-align: center;font-size: 17px;line-height: 25px;color: #000;border-top: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;padding: 20px 50px;}
.main03 .style-two td:last-child {text-align: left;}
.main03 .table-special-container .toggle-slide {height: 65px;width: 100%;background: #e6e9ec url(../images/toggle-down.png) center center no-repeat;position: absolute;left: 0;bottom: 0;cursor: pointer;}
.main03 .table-special-container .toggle-slide-up {background-image: url(../images/toggle-up.png);}


.main04 {padding: 54px 0 68px;background-color: #f1f2f6;text-align: center;}
.main04 h3 {font-size: 45px;color: #1e2231;font-weight: 600;}
.main04 h3 img {vertical-align: middle;margin-right: 10px;}
.main04 p {font-size: 21px;color: #1e2231;margin: 33px 0 43px;}
.main04 .btn-container a {display: inline-block;vertical-align: middle;width: 250px;height: 52px;font-size: 21px;color: #fff;line-height: 52px;background-color: #0fb4ff;border-radius: 4px;margin: 0 26px 10px;font-weight: 600;text-decoration: none;}
.main04 .btn-container a.to-buy {background-color: #ffab1b;}
.main04 .btn-container a:hover {box-shadow: 0 0 4px 2px rgba(0,0,0,0.1);}

.DivMain19 { background:#000; width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; display: none; }
.DivMain19 .Details { height: 80px; margin: 0 auto; }
.DivMain19 .Logo { width: 138px; height: 40px; float: left; padding: 10px 0 0; }
.DivMain19 .Btn {  float: right; padding: 9px 0 0 10px; }
.DivMain19 .Down { width: 145px; height: 38px; border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
background: #0fb4ff; color: #fff; float: left;  text-align: center;  padding: 5px 0 0; cursor: pointer; transition:all 0.4s; 
-webkit-transition:all 0.4s;  -moz-transition:all 0.4s;  }
.DivMain19 .Down:hover { background: #2d9dd0; }
.DivMain19 .Down p {  font-weight: 800; font-size: 17px; line-height: 17px; }
.DivMain19 .Down p i { font-size: 11px;  display: block; font-style: normal; font-weight: 400; line-height: 18px; }
.DivMain19 ul { float: right; font-size: 17px; color: #fff;  padding: 28px 0 0; }
.DivMain19 ul li {  float: left; width: 120px; text-align: center; }
.DivMain19 ul li a { color: #fff; text-decoration:none; }

.Top {width: 90px;height: 90px;position: fixed;bottom: 10%;right: 5%;cursor: pointer;display: none;}
.Top img {display: block;max-width: 100%;}

@media (max-width: 979px) {
  .detail {width:100%;}
  .details {width: 94%;}
  
  .main01{height:auto;background: #000;}
  .main01 p{padding:10px 0 0; }
  .main02 {padding-bottom: 30px;background: #000;}
  .main02 .detail{padding-top:30px;}
  .main02 .icon {display: none;}

  .main03 h2 {font-size: 24px;line-height: 30px;}
  .main03 .style-one th {padding: 10px;}
  .main03 .style-one td {padding: 10px;}

  .main03 .table-list li {width: 23%;}
  .main03 .style-two th,
  .main03 .style-two td {padding: 10px;}
}

@media (max-width: 767px) {
  .main02 .detail{padding-top:10px;}
  .main02 .btn a.mac{margin-top:10px;}
  .main02 .icon{padding-top:79px;}

  .Top {width: 60px;height: 60px;}
}

@media (max-width: 479px) {
  .main02{background-size:cover;}
  .main02 .icon .icon_one{float:none; width:100%;}
  
  .main03 .detail{width:500px;}
}