html,body{ width: 100%; height: 100%; margin: 0; user-select: none; font-family: 'PingFang SC', '微软雅黑'; }
i{ font-family: 'PingFang SC', '微软雅黑'; }
p, img, h1, h2, h3{ margin: 0; }
h1{ font-weight: 500; color:white; }
.bannerMain{ max-width: 960px; margin: 0 auto; }
a{ text-decoration: none; color: #414141; }
ul{ list-style-type: none; margin: 0; padding: 0; }
.upnetMain{ width: 100%; height: 100%; }
/* 标题头 */
.upnetTitle{ max-width: 960px; margin: 0 auto; flex: 1; display: flex; flex-direction: row; justify-content: space-between; height: 68px; line-height: 68px; }

/* 渐变色 */
.head_linear{
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(22, 23, 28), rgb(5, 6, 6));
  background: -webkit-linear-gradient(rgb(22, 23, 28), rgb(5, 6, 6));/* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(rgb(22, 23, 28), rgb(5, 6, 6));/* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(rgb(22, 23, 28), rgb(5, 6, 6));/* Firefox 3.6 - 15 */
}

/* 头部 */
.upnetTitle_l{ width: 40px; }
.upnet_head{ align-items: center; margin-top: 90px; justify-content: space-between; }
.head_l h1{ color: #FFFFFF; font-size: 58px; margin-top: -7px; margin-bottom: 10px; font-weight: bold; }
.head_r{ width: 233px; height: 479px; margin-right: 70px; }
.head_r img{ width: 100%; }
.socialIcons{ width: 389px; }
.freeBtn{ 
  display: block; 
  width: 300px; 
  height: 48px; 
  margin-top: 50px; 
  color: white;  
  background: #00AAFF;
  border-radius: 4px; 
  text-align: center; 
  line-height: 48px; 
  text-decoration: none; 
  justify-content: center;
}

/* 客户端下载 */
.client{ width: 100%; overflow: hidden; margin: 25px auto 0; }
/* common */
.flexAuto{ display: flex; display: -webkit-flex; flex-direction: row; align-items: center; flex-wrap: wrap; }
.flexColm{ flex-direction: column !important; }
.jusLeft{ justify-content: left; }
.jusRight{ justify-content: flex-end; }
.jusCenter{ justify-content: center; }
.jusBetween{ justify-content: space-between; }
.alignStart{ align-items: start; }
.disBlock{ display: block !important; }
.disFlex{ display: flex; }
.disBlockIn{ display: inline-block; }
.disNone{ display: none; }
.margin0{ margin: 0; }
.padding0{ padding: 0; }
.tl{ text-align: left; }
.tc{ text-align: center; }
.imgAuto{ margin: 0 auto; display: block; }
.pcView{ display: block; }
.phoneView{ display: none; }

/* 颜色 */
.cr31{ color: #313131; }
.cr89{ color: #848589; }
.crff{ color: white; }
.crB8{ color: #9FA8B8; }

/* 字体 */
.fs-12{ font-size: 12px; }
.fs-16{ font-size: 16px; }
.fw-300{ font-weight: 300; }

/* margin */
.mt-120{ margin-top: 120px; }
.mt-15{ margin-top: 15px; }
.mt-20{ margin-top: 20px; }
.mt-10{ margin-top: 10px; }

/* padding */
.pt-10{ padding-top: 10px; }
.phoneIcon{ width: 24px; margin-right: 5px; }

/* 移动媒体查询 */
@media only screen and (max-width: 768px) {
  .upnetTitle, 
  .upnet_fot, 
  .devices_tip_layout, 
  .nodes_more_layout{ width: 90%; max-width: 90%; }
  .bannerMain{ width: 100%; max-width: 100%; }
  .title_layout{ display: none; }
  .upnet_head{ flex-direction: column; margin-top: 10px; }
  .head_l{ margin-top: 20px; align-items: center; }
  .head_l h1{ font-size: 28px; }
  .head_r{ margin: 0; width: 100px; height: 205px; }
  .freeBtn{ width: 100%; height: 44px; line-height: 44px; margin-top: 20px; border-radius: 4px; }
  .devices_tip_r .freeBtn{ width: 288px; height: 46px; line-height: 46px; margin: 50px auto 0; }
  /* 客户端下载 */
  .client{ height: auto; padding-bottom: 20px; flex-direction: column; }
  .client .freeBtn{ margin: 10px auto 0; height: 46px; line-height: 46px; display: flex; align-items: center; justify-content: center; }
  .client_item{ padding: 25px 35px; }
  .client_item p{ text-align: center; }
  .client_r{  flex: 1; justify-content: flex-start; width: 90%; }
  .fastTip{ margin-top: 40px; }

  .devices_tip{ padding-top: 0; padding-bottom: 40px; }
  .devices_tip_layout{ flex-direction: column; margin-top: 10px; }
  .devices_tip_r{ margin: 10px 0 0; }
  .devices_tip_r h1{ text-align: left; font-size: 24px; margin: 0 0 24px; }
  .devices_tip_r p{ margin-top: 15px; text-align: left; font-size: 15px; color: #9FA8B8; }
  .devices_tip .device_view{ max-width: 241px; margin-right: 10px; }
  .upnet_fot{ justify-content: center; padding-top: 30px; }
  .upnet_fot p{ margin-bottom: 5px; }
  .upnet_fot a{ font-size: 12px; color: #0C8AC7 !important; }
  .pcView{ display: none; }
  .phoneView{ display: block; }
  .socialIcons{ width: 245px; margin: 7px auto 36px; }
  .phoneIcon{ width: 24px; margin-right: 5px; }
  .device_phone_r{ display: flex; justify-content: center; }
}
@media only screen and (min-device-width: 360px) and (max-width: 640px) {
  .client_item{ padding: 25px 28px; }
}
@media only screen and (min-device-width: 411px) and (max-width: 823px) {
  .device_ul li{ margin-top: 12px; }
  .client_item{ padding: 25px 36px; }
  .devices_tip .device_view{ max-width: 255px; margin-right: 30px; }

}
@media (max-width: 375px){
  
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
  .client_item{ padding: 25px 31px; }
}
@media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) {
  
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  .client_item{ padding: 25px 30px; }
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
  .upnet_head{ margin-top: 3px; }
  .devices_tip .device_view{ max-width: 230px; margin-right: 15px; }
  .head_r{ width: 90px; height: 185px; }
  .device_ul li{ margin-top: 8px; }
  .head_l h1{ font-size: 26px; }
  .socialIcons{ width: 210px; }
  .client .freeBtn{ height: 40px; line-height: 40px; }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
  .upnet_head{ margin-top: 10px; }
  .head_l h1{ font-size: 26px; }
  .head_r{ width: 100px; height: 205px; }
  .nodes_more_l h1{ font-size: 24px; }
  .client_item{ padding: 25px 22px; }
  .device_ul li{ margin-top: 7px; }
  .devices_tip .device_view{ max-width: 200px; margin-right: 10px; }
  .socialIcons{ width: 210px; margin-top: 20px; }
}
 
