body{
  background: url('../../../images/download/download-page-bg-web1024.png');
  background-size:cover;
}
main{
  padding-bottom:120px;
}
.mobileBreadcrumb{
  color:#00000099;
  height:36px;
  line-height: 36px;
}

.mobileBreadcrumb a,.mobileBreadcrumb span{
  font-family: 'NunitoSans-Medium';
  font-size: 1rem;
  text-decoration: none;
  color:#00000099;
}
.mobileBreadcrumb span{
  color:#000000;
}
.downloadTopWrap{
  padding:34px 20px 34px 20px;
}
.downloadTopWrap a:first-child{
  margin-right:4px;
}
.downloadTopWrap a:nth-child(2){
  margin:0 4px 0 2px;
}
.downloadTopWrap span{
  margin-left:4px;
}
.downloadTopText{
  font-family: 'NunitoSans-ExtraBold';
  font-size: 2.5rem;
  margin-top:34px;
  text-align: center;
}
.dropdownAndListWrap{
  background-color: #ffffff;
  padding:20px 0;
}
.dropdownAndListWrap .screenBtn{
  font-family: 'NunitoSans-SemiBold';
  text-decoration: none;
  color:#212121;
  font-size: 1.25rem;
  margin-top:20px;
}
.screenBtn img{
  margin-bottom: 4px;
  margin-right: 2px;
}

.downloadMobileMenu{
  padding:12px 16px;
  border:1px solid #D2D2D2;
  border-radius: 8px;
  width:200px;
  box-shadow: 0px 0px 8px 0px #00000029;
}
.downloadMobileMenu li {
  color:#00000099;
  font-size: 1rem;
  padding: 6px 8px;
  box-sizing: border-box;
  height:36px;
  line-height: 25px;
  cursor: pointer;
  font-family: 'NunitoSans-SemiBold';
}
.downloadMobileMenu .dropdown-item:focus, .downloadMobileMenu .dropdown-item:hover{
  background-color: #FFEEE3;
  color:#000000E5;
  font-size: 1rem;
}
.downloadMobileMenu .dropdown-item.active, .downloadMobileMenu .dropdown-item:active{
  color:#000000E5;
  font-size: 1rem;
  background-color:#fff;
}
.downloadLeftNav{
  width:276px;
  position: static;
  margin-right: 24px;
}
.downloadLeftNav li {
  height:44px;
  line-height: 34px;
  font-size: 1rem;
  color:#000000E5;
}
.downloadLeftNav .dropdown-item:focus, .downloadLeftNav .dropdown-item:hover{
  color:#000000E5;
  font-family: 'NunitoSans-ExtraBold';
  font-size: 1rem;
  background-color:#FFEEE3;
}
.downloadLeftNav .dropdown-item.active, .downloadLeftNav .dropdown-item:active{
  color:#000000E5;
  font-family: 'NunitoSans-ExtraBold';
}
.dropdownAndListWrap .productItemWrap{
  width:100%;
  flex-wrap: wrap;
  flex:1;
  display: none;
}
.dropdownAndListWrap .procuctActive{
  display: flex;
}
.productItem{
  width:360px;
  height:352px;
  padding: 32px;
  border: 1px solid #D7D7D7;
  border-radius: 12px;
  flex: 1 1 100%;
  margin-top:20px;
}

.productItem h3{
  font-family: 'NunitoSans-ExtraBold';
  font-size: 1.25rem;
  margin-top:16px;
  line-height: 28px;
}
.productItem p{
  color:#00000099;
  font-size: 1rem;
  margin-top:8px;
  margin-bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.productItem .iconOrangeBtn{
  height:52px;
  line-height: 52px;
  margin-top: 26px;
}
.productItem .iconOrangeBtn img{
  margin-bottom:4px;
}
.productItem .availableDiv{
  margin-top:17px;
}
.winBtn{
  display: block;
}
.macBtn{
  display: none;
}
.availableDiv .oschangeIconWin{
  color:#E08349;
}
*[data-sys="win"] .productItem .macBtn, *[data-sys="mac"] .productItem .winBtn{
  display: none;
}
*[data-sys="win"] .productItem .winBtn, *[data-sys="mac"] .productItem .macBtn{
  display: block;
}
*[data-sys="win"] .availableDiv .oschangeIconWin, *[data-sys="mac"] .availableDiv .oschangeIconMac{
  color:#E08349;
}
*[data-sys="win"] .availableDiv .oschangeIconMac, *[data-sys="mac"] .availableDiv .oschangeIconWin{
  color:#0000008C;;
}
.availableDiv span{
  font-family: 'NunitoSans-SemiBold';
  font-size: 1.125rem;
  margin-right:5px;
}
.availableDiv div{
  margin-left: 11px;
  cursor:pointer;
  color:#0000008C;
}
.availableDiv div:hover, .availableDiv .active{
  color:#E08349;
}

@media (min-width: 768px) {
  .downloadTopWrap{
    padding:34px 20px 60px 20px;
  }
  .dropdownAndListWrap{
    padding:20px 0 20px 0;
  }
  .productItemWrap{
    gap:28px;
  }
  .productItem{
    flex: 0 0 calc(50% - 20px);
    margin-top:0px;
  }
  /* 使用伪元素处理最后一行项目不足的情况 */
  .productItemWrap::after {
    content: "";
    flex: auto;
  }
}

@media (min-width: 1464px) {
  .downloadTopWrap{
    padding:34px 20px 103px 20px;
  }
  .dropdownAndListWrap{
    padding:30px 0 40px 0;
  }
  .productItemWrap{
    gap:32px;
  }
  .productItem{
    flex: 0 0 calc(33.333% - 32px);
  }
}