@font-face {

    font-family: 'inter';

    src: url('./Inter.woff2') format('woff2'),

         url('./Inter.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



:root {



  --primary-color: #1C439A;



  --secondary-color: #ff6b35;



}







html {



  overflow-x: hidden;



}







@media screen and (max-width:360px) {



  html {



    font-size: .8px



  }



}







@media screen and (min-width:361px) and (max-width:750px) {



  html {



    font-size: 0.2vw;



  }



}







@media screen and (min-width:751px) and (max-width:1199px) {



  html {



    font-size: 1px



  }



}



@media screen and (min-width:1200px) and (max-width:1550px) {
  html {
    font-size: 0.8px
  }
}
@media screen and (min-width:1551px) and (max-width:1820px) {
  html {
    font-size: 0.9px
  }
}



@media screen and (min-width:1821px) and (max-width:2100px) {
  html {
    font-size: 1px
  }
}



@media screen and (min-width:2101px) {



  html {



    font-size: 1px



  }



}
@media screen and (min-width:4101px) {



  html {



    font-size: 1px



  }



}







body {



  font-family: 'inter', 'Microsoft YaHei', 'PingFang SC', sans-serif;



  color: #111;



  line-height: 1.6;



  margin: 0;



  padding: 0;



  /* animation: pageFade 0.9s ease-out forwards; */



  font-size: 16px;



  background-color: #fff;



  transition: all 0.9s ease-in-out;



  opacity: 0;



}



body.fadeIn{



  opacity: 1;



}



@keyframes pageFade {







  from {







    opacity: 0;







  }







  to {







    opacity: 1;







  }







}







@keyframes around {



  from {



    transform: rotate(0deg);



  }







  to {



    transform: rotate(360deg);



  }



}







.around {



  position: relative;



  transform-origin: center center;



  animation: around 6s linear infinite;



}







a {



  color: #111;



  transition: all 0.5s ease-in-out;



  text-decoration: none;



}







a:hover {



  color: var(--primary-color);



}







ul,



ol {



  list-style: none;



  padding: 0;



  margin: 0;



}



dl,



dd {



  margin: 0;



}































/* 全局动画 */







.animated {







  -webkit-animation-duration: 2s;







  animation-duration: 2s;







  -webkit-animation-fill-mode: both;







  animation-fill-mode: both;



  



}















.animated.hinge {







  -webkit-animation-duration: 2s;







  animation-duration: 2s;







}







@-webkit-keyframes fadeInUp {







  0% {







    opacity: 0;







    -webkit-transform: translateY(40%);







    transform: translateY(40%);







  }















  100% {







    opacity: 1;







    -webkit-transform: translateY(0);







    transform: translateY(0);







  }







}















@keyframes fadeInUp {







  0% {







    opacity: 0;







    -webkit-transform: translateY(100px);







    -ms-transform: translateY(100px);







    transform: translateY(100px);







  }















  100% {







    opacity: 1;







    -webkit-transform: translateY(0);







    -ms-transform: translateY(0);







    transform: translateY(0);







  }







}



@keyframes fadeInLeft {







  0% {







    opacity: 0;







    -webkit-transform: translateX(30px);







    -ms-transform: translateX(30px);







    transform: translateX(30px);







  }















  100% {







    opacity: 1;







    -webkit-transform: translateX(0);







    -ms-transform: translateX(0);







    transform: translateX(0);







  }







}







@keyframes fadeIn {







  0% {



    opacity: 0;



  }







  100% {



    opacity: 1;



  }







}



@keyframes zoomIn {



  0% {



    opacity: 0;



    transform: scale(0.2);



  }



  100% {



    opacity: 1;



    transform: scale(1);



  }



}



@keyframes zoomOut {



  0% {



    opacity: 1;



    transform: scale(1);



  }



  100% {



    opacity: 0;



    transform: scale(0.2);



  }



}















.fadeInUp {







  -webkit-animation-name: fadeInUp;







  animation-name: fadeInUp;







}







.fadeIn {



  -webkit-animation-name: fadeIn;



  animation-name: fadeIn;



}



.fadeInLeft {



  -webkit-animation-name: fadeInLeft;



  animation-name: fadeInLeft;



}



.zoomIn {



  -webkit-animation-name: zoomIn;



  animation-name: zoomIn;



}



.zoomOut{



  -webkit-animation-name: zoomOut;



  animation-name: zoomOut;



}



.wow {



  visibility: hidden;



}















/* 全局类 */







.wrapper {



  width: 74vw;



  min-width: 1200px;



  margin: 0 auto;



}







.flex {



  display: flex;



}



.flex-1 {



  flex: 1;



}



.justify-between {



  justify-content: space-between;



}



.items-center {



  align-items: center;



}



.text-center {



  text-align: center;



}







.pic {



  overflow: hidden;



  font-size: 0;



}







.pic img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.5s;



}







.h-100px {



  height: 100rem;



}



.h-150px {



  height: 150rem;



}







.h-70px {



  height: 70px;



}







/* 按钮 */







.common-btn {



  display: block;



  width: 183rem;



  height: 55rem;



  line-height: 55rem;



  background: linear-gradient(45deg, transparent 15px, var(--primary-color) 0);



  color: #fff;



  text-align: center;



  transition: all 0.3s;



  cursor: pointer;



  font-size: 16rem;



}



.common-btn:hover {



  color: #fff;



  transform: translateX(5px);



}







@media screen and (max-width: 1200px) {

  .wrapper {
    width: auto;
    min-width: 0;
    margin: 0 40px;
    box-sizing: border-box;
  }

  .common-btn {
    width: 120px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background: linear-gradient(45deg, transparent 10px, var(--primary-color) 0);
  }

}

@media screen and (max-width: 750px) {

  .wrapper {
    margin: 0 30rem;
  }

}







/* 限制显示文字 */



.clamp-1 {



  overflow: hidden;



  text-overflow: ellipsis;



  display: -webkit-box;



  -webkit-line-clamp: 1;



  -webkit-box-orient: vertical;



}



.clamp-2 {



  overflow: hidden;



  text-overflow: ellipsis;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



}







.clamp-3 {



  overflow: hidden;



  text-overflow: ellipsis;



  display: -webkit-box;



  -webkit-line-clamp: 3;



  -webkit-box-orient: vertical;



}







.pos-dot {



  position: absolute;



  width: 12rem;



  height: 12rem;



  background: var(--primary-color);



  border-radius: 50%;



}