﻿ .slide{
    height:460px;
  }
  .slide>.wrapper{
    height:100%;
    position:relative
  }
  .banner:hover .slick-prev,
  .banner:hover .slick-next {
      opacity: 1;
  }
  .text_box a.detail{
    line-height: 1;
    text-decoration: underline;
    color: #FFF;
    font-size: 14px;
  }
  .banner .slide_mac{
    height: 460px;
    background: url("../image/banner_Mac.png") center no-repeat;
    background-size: cover;
  }
  .slide_mac .svga_box{
    position:absolute;
    width: 470px;
    height: 300px;
    left: 105px;
    top: 79px;
  }
  .slide_mac .text_box a {
    position:absolute;
    top: 295px;
    left: 740px;
    width: 210px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-radius: 5px;
    text-align: center;
  }
  .slide_mac .text_box a>span{
    padding-left: 28px;
    font-size: 18px;
    color: #2D73FF;
    background-size: 18px 22px;
    background-image: url(../image/ios_bt.svg);
    background-repeat: no-repeat;
    background-position: left;
  }
  .banner .slide_mobile{
    height: 460px;
    background: url("../image/banner_Mobile.png") center no-repeat;
    background-size: cover;
  }
  .banner .slide_mobile .text_box a{
      position: absolute;
      left: 78px;
      top: 279px;
      width: 211px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      display: block;
      background: #fff;
      border-radius: 5px;
  }
  .banner .slide_mobile .text_box a>span{
      font-size: 18px;
      color: #2D73FF;
  }
  .banner .slide_mobile .text_box p{
    line-height: 1;
    color: #cde4f8;
    font-size: 12px;
    position: absolute;
    left: 78px;
    top: 345px;
  }
  
  .banner .slide_pc{
    height: 460px;
    background: url("../image/banner_pc.png") center no-repeat;
    background-size: cover;
  }
  .banner .slide_pc .text_box{
    color:#fff;
    position:absolute;
    left:555px;
    top:265px;
  }
  .banner .slide_pc .text_box .pc_btns{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .banner .slide_pc .text_box .pc_btns>a.btn{
    display: inline-block;
    box-sizing: border-box;
    width: 164px;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    position: relative;
  }
  
  .banner .slide_pc .text_box .pc_btns>a>span{
      padding-left: 30px;
      font-size: 18px;
      color: #2D73FF;
      background-size: 22px 24px;
      background-image: url(../image/win_bt.svg);
      background-repeat: no-repeat;
      background-position: left;
      margin-left: 20px;
      height: 50px;
      display: inline-block;
  }
  .banner .slide_pc .text_box>p{
      margin-top:12px;
      line-height: 1;
      font-size: 12px;
      color: #cde4f8;
  }
  .banner .slide_pc .text_box>p>span{
    color: #5ea3ff;
  }
  
  .banner .slide_screen{
    height: 460px;
    background: url("../image/banner_screen.png") center no-repeat;
    background-size: cover;
  }
  .banner .slide_screen .text_box{
    display:flex;
    align-items:center;
    gap:12px;
    position: absolute;
    left: 712px;
    top: 308px;
  }
  .banner .slide_screen .text_box a.btn{
    width: 211px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    border-radius: 5px;
    background-image: linear-gradient(to right, #FFD779, #DB00FF);
    overflow: hidden;
    text-align: center;
  }
  .banner .slide_screen .text_box a>span{
      color: #ffffff;
      font-size: 18px;
  }
  .banner .slide_yk{
    height: 460px;
    background: url("../image/banner_yk.png") center no-repeat;
    background-size: cover;
  }
  
  .banner .slide_yk .text_box{
    color:#fff;
    position:absolute;
    left:555px;
    top:265px;
  }
  .banner .slide_yk .text_box .pc_btns{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .banner .slide_yk .text_box .pc_btns>a.btn{
    display: inline-block;
    box-sizing: border-box;
    width: 164px;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    position: relative;
  }
  .banner .slide_yk .text_box .pc_btns>a.detail{
    color: #1A243E;
  }
  
  .banner .slide_yk .text_box .pc_btns>a>span{
      padding-left: 30px;
      font-size: 18px;
      color: #2D73FF;
      background-size: 22px 24px;
      background-image: url(../image/win_bt.svg);
      background-repeat: no-repeat;
      background-position: left;
      margin-left: 20px;
      height: 50px;
      display: inline-block;
  }
  .banner .slide_yk .text_box>p{
      margin-top:12px;
      line-height: 1;
      font-size: 12px;
      color: #76819D;
  }
  
  .tit_header{
    text-align:center;
  }
  .tit_header h2{
      color: #1A243E;
      line-height:1.5;
      font-size:min(36px,calc( 16px + 1vw));
      font-weight: bold;
      text-align: center;
  }
  .tit_header p{
    font-size:min(16px,calc( 10px + .5vw));
    line-height:1;
    margin-top: 10px;
    color: #C3C8D5;
    text-align: center;
  }
  .down_cards{
    margin-bottom:40px;
  }
  .down_cards>.wrapper{
    display:flex;
    flex-direction:column;
    gap:40px;
  }
  .down_cards .down_body{
      display:flex;
      gap:14px;
  }
  .down_cards .down_card{
      display:flex;
      flex-direction:column;
      background:#fff;
      padding:24px 12px;
      background: #fff;
      border: 1px solid rgba(195, 200, 213, 0.35);
      border-radius: 10px;
      transition: all 0.2s;
      gap: 14px;
  }
  .down_cards .down_card .cover{
      display:flex;
      justify-content:center;
      flex-direction:column;
  }
  .down_card .double_btn>a{
    font-size: min(11px,calc(5px + .5vw));
  }
  
  .down_cards .down_footer{
      display:flex;
      align-items:center;
      gap:14px;
  }
  .down_cards .down_footer .more_apps{
      display:flex;
      gap:14px;
      align-items:center;
      overflow-x:auto;
  }
  .down_cards .down_footer .more_apps .text_card{
      background: #fff;
      border: 1px solid rgba(195, 200, 213, 0.35);
      border-radius: 5px;
      padding:6px 12px;
      flex-shrink: 0;
  }

.news_block{
    padding:30px 0;
    background:#fff;
}
.articles{
    display:flex;
    gap:14px;
}
.news-list{
    padding:12px 24px;
    display:flex;
    flex-direction:column;
    flex:8;
}
.news-sidelist{
    padding:12px 24px;
    display:flex;
    flex-direction:column;
    align-items: flex-end;
    gap:14px;
    flex:2;
}
.news-item{
 display:flex;
 gap:14px;
}
.news-item:hover{
    box-shadow: 0px 6px 10px rgba(45, 115, 255, 0.1);
    border-radius: 5px;
}
.news-item .news-h-cover>img,.news-item .news-v-cover>img{
    transform: scale(1);
    transition: transform 0.2s;
    object-fit: cover;
}
.news-item:hover .news-h-cover>img,.news-item:hover .news-v-cover>img{
    transform: scale(1.05);
}
.news-list .news-item{
    padding:20px;
    border-bottom: 1px solid #F7F9FC;
}
.news-sidelist .news-item{
 flex-direction:column;
 align-items:center;
}

.news-sidelist .news-info{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-wrap: balance;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    text-align: center;
    min-height:14px;
    line-height:1.5;
}
.news-h-cover{
    overflow: hidden;
    display:inline-block;
    width:min(20vw,200px);
    min-height:120px;
    border-radius: 5px;
    background-color:var(--bg-color);
}
.news-v-cover{
    overflow: hidden;
    display:inline-block;
    width:min(25vw,250px);
    min-height: 191px;
    border-radius: 5px;
    background-color:var(--bg-color);
}
.news-info{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:12px 0;
    flex-grow: 1;
}
.news-info p{
  max-width: 600px;
	color:#666;
}
.news-footer{
  display:flex;
  justify-content:space-between;
  color:#76819D;
  font-size:12px;
}
.news-footer a{
  color:#76819D;
  font-size:12px;
}

@media (max-width: 1239px) {
  .banner{
    display:none;
  }
  .news-item{
    width:100%;
  }
  .articles{
    flex-direction:column;
  }
  .down_cards .down_body{
    max-width:100%;
    flex-direction:column;
  }
  .news-list .news-item{
    flex-direction:column;
    padding: 0;
  }
  .news-v-cover,.news-h-cover{
    width:100%;
    height:auto;
  }
  .news-info {
    gap:1rem;
  }
}