@import url(../../../../assets/font/iconfont.css);
@font-face {
    font-family: 'SourceHanSans';
    src: url('../fonts/SourceHanSansK-Bold.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SourceHanSansMedium';
    src: url('../fonts/SourceHanSansK-Medium.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {

}


body {
    font-family: 'SourceHanSans', sans-serif;
    font-family: arial;
    overflow-x: hidden;
}
.iconfont {
    font-size: inherit;
    line-height: 1;
    -webkit-text-stroke-width: 0;
}
a:focus, a:hover{
    text-decoration: none!important;
    color: #fff!important;
}
a {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    outline: none;
  color: #fff;
}

a:hover{
    text-decoration: none;
    color: #fff!important;
}


button, input {
    outline: none !important;
}

::-moz-placeholder {
    color: #ccc;
}

::-webkit-input-placeholder {
    color: #ccc;
}

:-ms-input-placeholder {
    color: #ccc !important;
}

.clearfix:before, .clearfix:after, .wrapper:after, .wrapper:before {
    content: "";
    display: table;
}

.clearfix:after, .wrapper:after {
    clear: both;
    overflow: hidden;
}

.clearfix, .wrapper {
    zoom: 1;
}
.btn-primary{
    background: #165a95;
}

ul {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0;
    padding: 0;
    margin: 0;
}

body {
    font-size: 14px !important;
    color: #000;
    background-color: #fff;
}
a{
    text-decoration: none;
}
li {
    list-style: none;
}

.uli14 li, .nowrapli li {
    list-style: inside;
}

ul.nowrapli.uli16 li a {
    padding-left: 8px;
}
img {
   max-width: 100%;
}

.contai{
    width: 1200px;
    margin: 0px auto;
}


.top-news{background: url(../img/top-news-bg.jpg) no-repeat;background-size: 100% 100%;padding: 80px 0px;}
.banner{
}


.carousel-container {
    position: relative;
    overflow: hidden;
    width: 1200px;
    margin: 30px auto 40px;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease-out;
    gap: 30px;
    width: fit-content;
}

.insight-card {
    flex-shrink: 0;
    background: #1ba6f8;
    padding: 20px;
    /* backdrop-filter: blur(10px); */
    /* box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; */
    width: 380px;
    border-radius: 15px;
}

.card-header {
    /* display: flex; */
    -webkit-box-align: center;
    align-items: center;
    gap: 20px;
    /* background: url("../img/div3-lis-bg.png") 0% 0% / 100% 100% no-repeat; */
    position: relative;
    padding-top: 25px;
    min-height: 86.2px;
}
.card-header .bf{
    
width: 50px;
    
margin-top: -43px;
    
float: right;
}
.icon {
    width: 165px;
    height: 165px;
    position: absolute;
    left: -22px;
    top: -22px;
}

.card-title {
    color: white;
    font-size: 21px;
    font-weight: bold;
    margin: 10px 0px0px;
}

.card-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.progress-container {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 1200px;
    margin: 0px auto;
    border: 10px solid rgb(0 106 240);
    border-radius: 16px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #96d7ea;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(0, 102, 255), rgb(0, 204, 255));
    border-radius: 4px;
    transition: width 0.1s;
    position: relative;
}

.progress-handle {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 33px;
    background: url("../img/scroll-bar.png") 0% 0% / 100% 100% no-repeat;
    cursor: -webkit-grab;
    transition: 0.2s;
}

.progress-handle:hover {
    transform: translateY(-50%) scale(1.2);
}

.progress-handle:active {
    cursor: -webkit-grabbing;
    transform: translateY(-50%) scale(1.1);
}

.back-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, rgb(0, 102, 255), rgb(0, 153, 255));
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: rgba(0, 100, 255, 0.4) 0px 4px 20px;
    transition: 0.3s;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 2px;
}

.back-button:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 100, 255, 0.6) 0px 6px 25px;
}

.back-button::before {
  
}

@media (max-width: 768px) {
    .insight-card {
        min-width: 90vw;
    }

    .progress-bar {
        width: 300px;
    }
}


.top-news{background: url(../img/what-is-iblat.png) no-repeat;background-size: 100% auto;background-position-y: top;background-color: #ddf0f8;}
.top-news-content{

}
.top-news-left {

width: 40%;

float: left;

padding-right: 20px;
}
.top-news-left .img{
        height: 302px;
    object-fit: cover;
}
.top-news-left .bf{

width: 60px;

margin-top: -50px;

margin-right: 0px;

display: block;

float: right;

z-index: 1;

position: relative;
}
.top-news-left h4{

background-color: #ffe473;

padding: 20px;

font-size: 22px;

margin: 0px  0px 0px;

border-bottom: 10px #006bf2 solid;

color: #21252b;

font-weight: bold;

font-family: 'SourceHanSans';
}
.top-news-right-left{

width: 211px;

float: left;

}

.top-news-right-left  img{
    height: 376px;
    object-fit: cover;

}
.top-news-right-right{

width: calc(60% - 211px);

float: left;
}
.top-news-right-right ul li:nth-child(1){

margin-bottom: 20px;

padding-left: 20px;
}
.top-news-right-right ul li:nth-child(1) a{
    
background-color: #317fe0;
    
padding: 20px 20px;
    
display: block;
    
font-size: 21px;
    
font-family: 'SourceHanSansMedium';
line-height: 34px;
}
.top-news-right-right ul li:nth-child(2){
    
padding-left: 20px;
}
.top-news-right-right ul li:nth-child(2) a{
    
display: block;
    
background-color: #fff;
}
.top-news-right-right ul li:nth-child(2) img{
    
width: 55%;
    
float: right;
}
.top-news-right-right ul li:nth-child(2) a p{
    
color: #022aaa;
    
font-size: 21px;
    
padding: 20px;
    
height: 100%;
    
font-weight: bold;
    
line-height: 32px;
    
font-family: 'SourceHanSans';
}

.Popular-Shanghai{

padding: 80px 0px;

background: url(../img/highlights.png) no-repeat;

background-size: 100% auto;

background-position-y: bottom;

background-color: #fafafa;
}
.Popular-Shanghai .animate-slider1{
    
background-color: #1ba6f8;
    
padding: 20px;
    
border-radius: 10px;
}
.Popular-Shanghai .animate-slider1 .item{
    
}
.Popular-Shanghai .animate-slider1 .item img{

height: 375px;

object-fit: cover;
}
.Popular-Shanghai .animate-slider1 .item p{

font-size: 24px;

line-height: 30px;

background-color: rgba(255,255,255,0.8);

color: #000;

padding: 15px;

position: absolute;

bottom: 0px;

margin-bottom: 0px;
width: 100%;
}
.latest-right{

}
.latest-right ul {

}
.latest-right ul li{

}
.latest-right ul li a{
    
background-color: #10a0fc;
    
display: block;
    
padding: 15px;
    
margin-bottom: 26px;
    
border-left: 15px #006bf2 solid;
}
.latest-right ul li p{

margin-bottom: 0px;

font-size: 24px;

color: #000;

line-height: 30px;

min-height: 90px;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

text-overflow: ellipsis;

white-space: break-spaces;

display: -webkit-box;
}
.public-title{

margin: 0px auto  20px;

width: 400px;

text-align: center;

background: linear-gradient(45deg, #0096ff, #59ceef);

padding: 18px 0px 13px;

border-radius: 40px;

border: 5px #fff solid;

margin-bottom: 40px;
}
.public-title img{
    
height: 45px;
    
width: auto;
}
.voices{
    background: url(../img/voices-bg.png) no-repeat;
    padding: 80px 0px;
}
.videos-new{
    background: url(../img/jbh-bg.png) no-repeat;
    background-size: cover;
    padding: 80px 0px;
}
.videos-slider1{
    width: 50%;
    margin: 0px auto;
}
.videos-slider1 .owl-nav{

}
.videos-slider1 .owl-nav button{

}
.videos-slider1 .owl-nav button{

width: 60px;

height: 60px;

background: none!important;

border-radius: 100%;

border: 2px #006af0 solid;

outline: none!important;

position: absolute;

top: 50%;

transform: translateY(-50%);
}
.videos-slider1 .owl-nav button i{

font-size: 22px;

color: #0054f3;
}
.videos-slider1 .owl-nav button.owl-prev{

left: -90px;
}
.videos-slider1 .owl-nav button.owl-next{
    
right: -90px;
}

.milestones{
background: url(../img/Milestones.png) no-repeat;
background-size: 100% 100%;
padding: 80px 0px;
position: relative;
}

.milestones .milestones-slider::before{
    content: '';
    width: 100%;
    height: 15px;
    background: linear-gradient(90deg, transparent  0%,#00e48f  50%, transparent 100%);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.milestones .milestones-slider{
    width: 90%;
    margin: 0px auto;
background: linear-gradient(90deg, transparent  0%,#006bf2  50%, transparent 100%);
}
.years{

/* border-bottom: 1px #fff solid; */

padding: 30px 0px;

position: relative;

text-align: center;
}
.years b{
    
width: 30px;
    
height: 30px;
    
display: block;
    
background-color: #00e48f;
    
border-radius: 100%;
    
border: 3px #fff solid;
    
position: absolute;
    
bottom: -19px;
    
left: 50%;
    
transform: translateX(-50%);
}
.years span{
    
font-size: 23px;
    
color: #fff;
    
display: flex;
    
text-align: center;
    
justify-content: center;
    
align-items: center;
}
.years span small{
     
width: 7px;
     
height: 7px;
     
background-color: #fff;
     
display: inline-block;
     
border-radius: 100%;

margin-right: 5px;
}
.years p{
    
font-size: 23px;
    
color: #fff;
    
margin-bottom: 0px;
    
height: 70px;
    
/* display: flex; */
    
/* align-items: center; */
    
/* justify-content: center; */
}
.milestones .milestones-slider .owl-item:nth-child(even){
    
margin-top: 161px;
}
.milestones .milestones-slider .owl-item:nth-child(even) .years{

/* border-top: 1px #fff solid; */

/* border-bottom: none; */

padding-top: 40px;
}
.milestones .milestones-slider .owl-item:nth-child(even) .years b{
    
bottom: auto;
    
top: -9px;
}

.milestones-slider  .owl-nav{

}
.milestones-slider  .owl-nav button{

}
.milestones-slider  .owl-nav button{

width: 40px;

height: 43px;

background-color: transparent!important;

outline: none!important;

position: absolute;

top: 50%;

transform: translateY(-50%);

border: none!important;
}
.milestones-slider  .owl-nav button i{
  display: none;
}
.milestones-slider  .owl-nav button.owl-prev{

left: -40px;

background: url(../img/left-btn.png) no-repeat;

background-size: 100% auto;
}
.milestones-slider  .owl-nav button.owl-next{
    background: url(../img/right-btn.png) no-repeat;
    right: -40px;
    background-size: 100% auto;
}
.latest-owl .owl-dots {
    bottom: auto;
    top: 30px;
    right: 30px;
}