/* header */
.header{position:fixed;height:80px; width: 100%; top: 0; left:0; z-index: 50;}
.header .container{height: 50px;background:#fff; display: flex;align-items: center;font-weight: 600;}
/* .header .container img{margin-left: 10px;} */
.header .container .return{display: none;}
.header h1 {

  font-size: 16px;
  font-weight: normal;
  color: #000;
  text-align: center;
}
.header .back{position:absolute;top:0;left:0;display:block;width:50px;height:50px;text-indent:-9999em;background:url(../images/icon-back.png) no-repeat center center;background-size:12px 20px;}
.header .tips{width: 100%;background-color: #1C4072;color: #5687cc; font-size: 12px; border-top:1px solid #efefef;padding:6px 10px}
.inner-header .container{justify-content: center;}
.inner-header .container .return {position: absolute; left: 10px;    display: flex;
    align-items: center; font-weight: normal;color: #232323; font-size: 14px; width: 60px;}
.inner-header .container .return img{height: 18px; margin-right: 5px;}

@media (min-width:641px){body{width:640px;margin:auto;}}

.nav{position: fixed; left: 0; bottom: 0;z-index: 9; width: 100%; height: 70px; display: flex; background: #fff;}
.nav a{width: 33%; display: inline-block; text-align: center;color: #1d4072; display: flex;flex-direction: column;
    align-items: center;
    justify-content: center; font-size: 12px;}
.nav a img{height: 20px; margin-bottom: 4px;}
.nav .cur{color: #0069ff}
.lang-style-tit {text-align: right; color: #868686; font-weight: normal!important; padding: 20px 20px 10px 0;}
.lang-style a{display: flex !important;align-items: center;justify-content: flex-end ;font-size: 12px !important; padding: 6px 20px!important; color: #131313!important;}
.lang-style a img{margin-right: 10px; width: 14px;}

.content-wrap{width: 100%; max-width: 750px; min-width: 360px; padding: 80px 0 90px; margin: 0 auto; }

.card{width: 100%; margin:  0 ; background: #F1F1F1; }
.demo-bars{display: flex;    justify-content: space-evenly; padding: 30px 0;}
.demo-bars a{color: #1941d7;display: flex;flex-direction: column;
    align-items: center; font-size: 14px; font-weight: bold; margin-bottom: 10px;}
.demo-bars a img{width: 56px; margin-bottom: 10px;}

.tips-bg1{background: url('../images/bg-img1.jpg') no-repeat bottom; background-size: cover;}
.tips-bg2{background: url('../images/bg-img2.jpg') no-repeat bottom; background-size: cover;}
.tips-wrap{
 padding: 20px
}
h2{font-weight: 600;}
.t-h16{font-size: 16px; font-weight: 900}
.text-12{font-size: 14px; line-height: 24px;}
.t-white{color: #fff;}
.mt-20{margin-top: 20px;}
.mt-10{margin-top: 10px;}
.mb-14{margin-bottom: 14px;}
.mr-10{margin-right: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-20{margin-bottom: 20px;}
.btn{padding:6px 16px; border-radius:4px ; font-size: 14px; display: inline-block;}
.btn-priamry{background: #007eff; color: #fff;}
.btn-warning{background: #ffcc00; color: #fff;}
.btn-danger{background: #e5004f; color: #fff;}
.btn-success{background: #00b67a; color: #fff;}
.btn-blue{background: #47b2e9; color: #fff;}
.text-dark{color: #232323 !important;}
.text-blue{color: #224475;}
.text-yellow{color: #fcc536;}
.text-white{color: #ffffff;}
.text-gray{color: #828282;}
.block{display: block;}
.clear-pr{padding-right: 0;}
.clear-pt{padding-top: 0;}
.clear-mt{margin-top: 0;}
.text-center{text-align: center;}

.news-wrap{display: flex;flex-wrap: wrap;
    justify-content: space-between}
.news-wrap .news-item{
    width: 48%; height: auto; display: inline-block; margin-top: 20px;
}
.news-item .news-pic{position: relative; overflow: hidden; height: 80px; width: 100%; border-radius: 10px 10px 0 0;}
.news-item .news-pic img{width: 100%;}
.news-item .news-pic .news-tag{padding:4px 10px; border-radius: 10px; background: #eab31a; color: #1d3d72; position: absolute; top: 20px; left: 20px; font-size: 12px; font-weight: bold;}
.news-item .news-content{width: 100%; border: 1px solid #efefef; border-top: none;border-radius:0 0 10px 10px ; padding:10px 10px 20px 10px;}
.news-item .news-content .news-time{background: #00b67a; color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 12px; display: inline-block;}
.news-item .news-content .news-title{color: #232323;height: 44px; line-height: 22px; margin: 20px 0; overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;}
    .news-item .news-content .news-btn{background: #1843e2; color: #fff; font-size: 13px; border-radius: 6px; padding: 4px 10px;}
    .badge{display: inline-block; background: #edb115; padding: 5px 5px 5px 0; border-radius: 4px;}
    .badge img{width: 16px; display: block; float: left; margin-left: 5px;}
    .slide-bg{background: url('../images/bg-img3.png') right top no-repeat;background-size: contain;}
    .warn-tips{width: calc(100% - 20px); margin: 20px 0 10px 10px; font-size: 12px; color: #5c759a; line-height: 24px;}
    .detail-wrap{padding: 10px;}
    .news-detail hr{width: 20%; border: none; height: 1px; background: #e1e1e1; margin-top: 10px; margin-bottom: 5px;}
    .news-detail .detail-pic{width: 100%; border-radius: 10px;}
    .news-detail .detail-tit{font-weight: 600; color: #1d4072; font-size: 16px; margin-top: 20px;}
    .news-detail .detail-tools{font-size: 12px ;color: #828282; margin-bottom: 30px;}
    .news-detail .detail-content{ color: #232323; font-size: 14px; line-height: 24px; padding-bottom: 60px;}
    .warn-tips{width: calc(100% - 20px); margin: 20px 0 10px 10px; font-size: 12px; color: #5c759a; line-height: 24px;}
    .more-news{width: calc(100% - 40px); margin: 30px 0 40px 20px}
    .more-news a{display: block; margin-bottom: 10px; font-size: 14px; color: #232323;}
    .more-news a span{display: block; font-size: 12px; color: #83a0ca;}
    .text{ color: #232323; font-size: 14px; line-height: 24px}
    .why-wrap{display: flex;flex-direction: column}
    .why-wrap .why-item{display: flex;flex-direction: row;
        justify-content: flex-start; margin-bottom: 20px;}
    .why-wrap .why-item div:first-child{width: 45px; height: 45px; border: 1px solid #e5e5e5; border-radius: 4px;display: flex;align-items: center;justify-content: center; margin-right: 20px;}
    .why-wrap .why-item div:first-child img{width: 25px}
    .why-wrap .why-item div:last-child{font-size: 12px; color: #232323; display: flex;    flex-direction: column;
        justify-content: space-around}
    .why-wrap .why-item div:last-child p{color: #20b89c; font-size: 14px; font-weight: 600;}
    .contrast{font-size: 14px;border: 1px solid #e5e5e5;border-bottom: none;}
    .contrast dd{border-bottom: 1px solid #e5e5e5}
    .contrast dd span{display: inline-block; font-size: 12px; line-height:30px;}
    .contrast dd span:first-child{width: 20%; text-align: center; color: #232323;}
    .contrast dd span:nth-of-type(2){width: 40%;color: #1d4072;}
    .contrast dd span:last-child{width: 40%; color: #828282;}
    .scroll-pic{width: 100%; height: 170px; overflow-y: hidden; overflow-x: scroll; display: flex;flex-direction:row}
    .scroll-pic img{height: 100%; margin-right: 20px;}
    .scroll-pic img:last-child{margin-right: 0;}
    .k-title{display: flex;justify-content: space-between;align-items: flex-end;}
    .k-title span{font-size: 12px; color: #828282;}
    .k-title span i{font-size: 14px; font-weight: bold; color: #d8ad33; font-style: normal;}
    .chart-time{color: #acacac; font-size: 12px; margin-top: 20px;}
/* :: Tiny Slider One CSS */
.tiny-slider-one-wrapper {
    position: relative;
    z-index: 1;
  }
  .tiny-slider-one-wrapper .single-hero-slide {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 160px;
    background-position: center center;
    background-size: cover;
  }
  @media only screen and (min-width:480px) and (max-width:767px) {
    .tiny-slider-one-wrapper .single-hero-slide {
      height: 210px;
    }
  }
  @media only screen and (min-width:576px) and (max-width:767px) {
    .tiny-slider-one-wrapper .single-hero-slide {
      height: 250px;
    }
  }
  @media only screen and (min-width:768px) and (max-width:991px) {
    .tiny-slider-one-wrapper .single-hero-slide {
      height: 272px;
    }
  }
  @media only screen and (min-width:992px) and (max-width:1199px) {
    .tiny-slider-one-wrapper .single-hero-slide {
      height: 274px;
    }
  }
  @media only screen and (min-width:1200px) and (max-width:1399px) {
    .tiny-slider-one-wrapper .single-hero-slide {
      height: 274px;
    }
  }
  @media screen and (min-width:1400px) {
    .tiny-slider-one-wrapper .single-hero-slide {
      height: 274px;
    }
  }
  
  .tiny-slider-one-wrapper .single-hero-slide .slide-content {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .tiny-slider-one-wrapper .single-hero-slide .slide-content p {
    font-size: 14px;
  }
  .tiny-slider-one-wrapper .tns-controls {
    position: absolute;
    z-index: 100;
    bottom: 1.25rem;
    right: 1.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .tiny-slider-one-wrapper .tns-controls button[data-controls=prev],
  .tiny-slider-one-wrapper .tns-controls button[data-controls=next] {
    outline: none;
    width: 26px;
    height: 26px;
    text-align: center;
    color: #ffffff;
    border-radius: 50%;
    -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
    font-size: 12px;
    border: none;
    background: none;
  }
  .tiny-slider-one-wrapper .tns-controls button[data-controls=prev] i,
  .tiny-slider-one-wrapper .tns-controls button[data-controls=next] i {
    line-height: 26px;
  }
  .tiny-slider-one-wrapper .tns-controls button[data-controls=prev]:hover, .tiny-slider-one-wrapper .tns-controls button[data-controls=prev]:focus,
  .tiny-slider-one-wrapper .tns-controls button[data-controls=next]:hover,
  .tiny-slider-one-wrapper .tns-controls button[data-controls=next]:focus {
    background-color: #0069ff;
    color: #1f0757;
  }
  .tiny-slider-one-wrapper .tns-controls button[data-controls=next] {
    margin-left: 0.5rem;
  }
  .left-arrow{width: 26px;
    height: 26px;display:inline-block;background: url('../images/left-arrow.png') center center no-repeat; background-size: 30%;}
  .right-arrow{width: 26px;
    height: 26px;display:inline-block;background: url('../images/right-arrow.png') center center no-repeat; background-size: 30%;}
  .tiny-slider-one-wrapper .tns-nav {
    position: absolute;
    bottom: 1.375rem;
    left: 1.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .tiny-slider-one-wrapper .tns-nav button {
    outline: none;
    border: none;
    -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
    position: relative;
    z-index: 1;
    margin-right: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 0.5rem;
            flex: 0 0 0.5rem;
    max-width: 0.5rem;
    background-color: #ebebeb;
    border-radius: 50%;
  }
  .tiny-slider-one-wrapper .tns-nav button.tns-nav-active {
    background-color: #f1b10f;
  }
  .testimonial-slide-three-wrapper {
    position: relative;
    z-index: 1;
  }
  .testimonial-slide-three-wrapper .tns-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 1rem;
  }
  .testimonial-slide-three-wrapper .tns-nav button {
    border: 0;
    width: 1rem;
    height: 0.25rem;
    background-color: #c9c9c9;
    margin: 0 0.25rem;
    border-radius: 0.25rem;
  }
  .testimonial-slide-three-wrapper .tns-nav button.tns-nav-active {
    background-color: #edb115;
  }

  .wrapper {
    position: absolute;
    top: 22px;
    right: 10px;
    transform: translate(-50%, -20%);
  }

  .nav-icon {
    width: 25px;
    height: 20px;
    position: relative;
    cursor: pointer;
    display: inline-block;
  }
  
  .nav-icon span {
    background-color: #000;
    position: absolute;
    border-radius: 3px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
    width: 100%;
    height: 2px;
    transition-duration: 500ms;
  }
  
  .nav-icon span:nth-child(1) {
    top: 0px;
    left: 0px;
  }
  
  .nav-icon span:nth-child(2) {
    top:8px;
    left: 0px;
    opacity: 1;
  }
  
  .nav-icon span:nth-child(3) {
    bottom: 0px;
    left: 0px;
  }
  
  .nav-icon:not(.open):hover span:nth-child(1) {
    transform: rotate(-0deg) scaleY(1);
  }
  
  .nav-icon:not(.open):hover span:nth-child(2) {
    transform: rotate(0deg) scaleY(1);
  }
  
  .nav-icon:not(.open):hover span:nth-child(3) {
    transform: rotate(-0deg) scaleY(1);
  }
  
  .nav-icon.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 6px;
  }
  
  .nav-icon.open span:nth-child(2) {
    opacity: 0;
  }
  
  .nav-icon.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 6px;
  }
  
  .year
  {
   background: url('../images/icon-year2.png') no-repeat bottom; background-size: cover;
  }
  
 .btn-yellow
  {
	background: #edb115; color: #232323;
  }

  :root{
    --gray-color2: #e5e5e5;
  }
  .mb20{
    margin-bottom: 20px;
  }
  .mr20{
    margin-right: 20px;
  }

  .flex-column{
    display: flex;
    flex-direction: column;
  }
  .flex{
    display: flex;
  }
  .align-center{
    align-items: center;
  }
  .w100{
    width: 100%;
  }
  .hero{
    margin-top: 40px;
  }


  .form{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -2rem;
    padding: 1rem;
    background-color: #fff;
    z-index: 20;
    position: relative;
    border-radius: 20px;
  }
  .form .type-select{
    background-color: #eee;
    padding: 6px 10px;
    border-radius: 9999px;

  }
  .form .type-select div {
    color: #a8a8a8;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 14px;

  }
  .form .type-select .active {
    background: #fff;
    color: #000;
  }
  .form .signin-or-register span {
    color: #4580DE;
    font-size: 20px;
    font-weight: 600;
    position: relative;
  }
  .form .signin-or-register >span::after {
    content: "";
    /* display: inline-block; */
    width: 1.5rem;
    height: 4px;
    background-color: #4580DE;
    border-radius: 999px;
    position: absolute;
    bottom: -8px;
    left: 8px;
  }
  .form .signin-or-register a span {
    color: #a8a8a8;
    font-weight: normal;
    margin-left: 10px;
  }

  .form .submit .btn {
    width: 100%;
    background-color: #4580DE;
    color: #fff;
    text-align: center;
    border-radius: 9999px;
    margin-bottom: 10px;
    padding: 12px 0;
  }
  .form .submit img.rotate {
    transform: rotate(180deg);
  }

  .form-inner{
    padding: 30px 0 0 ;
    width: 100%;
    overflow: hidden;
    max-height: 80px;
    transition: all .3s ease-in-out;
  }
  .form-inner.active {
    max-height: 400px;
  }
  .form-inner .label {
    width: 100%;
    display: flex;
    align-items: center;
    color: #a8a8a8;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 10px;
    margin-bottom: 24px;
  }
  .form-inner .label span {
    margin-right: 10px;
  }
  .form-inner .label span::after {
    content: "*";
    color: #4580DE;
  }
  .form-inner .label input {
    outline: none;
    flex: 1;
  }

  .form-inner .checkbox{
    position: relative;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .form-inner .checkbox input {
    width: 1rem;
    height: 1rem;
    display: block;
    /* background-color: red !important; */
    background-color: #c9c9c9;
    margin-right: 10px;
    margin-top: 2px;
    border-radius: 2px;
    position: relative;
  }

  .form-inner .checkbox input[type="checkbox"]:checked {
    background: #007eff;
    border: none;
    position: relative;
  }
  
  .form-inner .checkbox input[type=checkbox]:checked::after{
    content: '';
    width: .55rem;
    height: .3rem;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg) scale(0.8);
  }


  .mb10{
    margin-bottom: 1rem;
  }
  .mr10{
    margin-right: 10px;
  }
  .password{
    display: flex;
    align-items: center;
  }
  .password a img {
    width: 1rem;
    margin-bottom: 0;
    display: block;
  }


.flex{
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between  {
  justify-content: space-between;
}

.p-2{
  padding: .5rem;
}
.w-full {
  width: 100%;
}


.card1 {
  position: relative;
  background-image: url(../images/20240626/bg1.png);
  min-height: 350px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}
.card1 .text {
  position: absolute;
  color: #fff;
  left: 20px;
  top: 30px;
}
.card1 .text h3 {
  font-size: 20px;
}
.card1 .items a{
  color: #E4CCAA;
}

.card1 .items {
  position: absolute;
  left: 20px;
  bottom: 45px;
  display: flex;
  width: calc(100vw - 40px);
  justify-content: space-between;
  color: #E4CCAA;

}
.card1 .items .icon {
  --size: 70px;
  width: var(--size);
  height:  var(--size);
  border-radius: 50%;
  background-color: #1E2051;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #27356B;
  margin-bottom: 10px;
}
.card1 .items .icon img {
  width: 47%;
}

.card2 .flex {
  justify-content: space-between;
}
.card2 .flex .item {
  width: 28%;
  display: flex;
  font-size: 12px;
  align-items: center;
  color: #fff;
  flex-direction: column;
}
.card2 .flex img {
  margin-bottom: 14px;
  width: 100%;
}


.card3 {
  background-color: #fff;

}
.card3 > div {
  padding: 20px;
  color: #152F54;
}
.card3 p {
  margin-bottom: 20px;
}
.card3 .btns {
  display: flex;
  justify-content: space-between;
}
.card3 .btns .btn {
  background-color: #275FB2;
  color: #fff;
  min-width: 40vw;
  padding: 10px 20px;
  text-align: center;
}


.card4 {
  padding: 30px 0;
}
.card4 h3 {
  text-align: center;
  margin-bottom: 30px;
}
.card4 .item {
  margin: 0 20px 20px;
}
.card4 .item img {
  width: 100%;
  display: block;
}

.card4 .item .text {
  background-color: #fff;
  padding: 20px;
}
.card4 .item .text span {
  color: #b9b9b9;
}


.card5 {
  padding: 30px 0;
}
.card5 h3 {
  text-align: center;
  margin-bottom: 30px;
}


.qa-list {
  margin: 0 20px;
}
.qa-list .item {
  padding-bottom: 10px;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 10px;
}


.qa-list .qa-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.qa-list .item .arrow {
  transform: rotate(-90deg);
  transition: all .3s ease-in-out;
}

.qa-list .qa-item span {
  flex: 1;
  margin-left: 20px;
}
.qa-list .item p {
  margin: 0 20px;
  line-height: 1.5rem;
  font-size: 14px;
  color: #828282;
  max-height: 0px;
  overflow: hidden;
  transition: all .3s ease-in-out;
}

.qa-list .item.active p {
  margin: 20px;
  max-height: 300px;
}
.qa-list .item.active .arrow {
  transform: none;
}

.card6{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;

}
.card6 img {
  width: 80px;
  margin-bottom: 40px;
}
.card6 p {
  font-size: x-small;
  line-height: 1.3rem;
  color: #afafaf;
}


.header-menu{
  background: #fff;
  width: 100%;
  max-height: 0px;
  overflow: hidden;
  transition: all .3s ease-in-out;
  padding: 0;
  margin: 0;
}
.header-menu li {
  border-bottom: 1px solid #ccc;;
  padding: 20px 20px;
}
.header-menu a {
  color: #000;
  font-size: x-small;
  display: block;
  width: 100%;
  font-size: 16px;
}

.header-menu.active {
  max-height: 400px;
}



.header-right {
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.header-right > a {
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 13px;
  background-color: #e6e6e6;
  color: #222;
}
.header-right .sign-hightlight {
  background-color: #0f3a5f;
  color: #d9c78b;
}
.btn-box{
  display: flex;
  align-items: center;
  justify-content:center;
  padding: 15px;
}

.btn-item{
  width: 100%;
  padding: 10px 0;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
}
.btn-register{
  background: linear-gradient(135deg, #0088ff 0%, #0055cc 100%);
  margin-right: 7.5px;
}

.btn-login{
  background: linear-gradient(135deg, #00cc8a 0%, #00995c 100%);
  margin-left: 7.5px;
}