﻿@charset "utf-8";
.de{ width: 100%; background: url(banner.jpg) center center no-repeat; background-size: cover; font-family: "宋体"; min-height: 100vh;}
.de01{ box-sizing: border-box; width: 100%; padding: 40px 4% 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;  font-family: "雅黑";}
.de01 .logo img{ height: 84px;}
.de01 .lan{ position: relative; cursor: pointer;}
.de01 .lan .t1{ display: flex; align-items: center; justify-content: center; width: 136px; height: 44px; box-sizing: border-box ; border:1px solid #d5b992; border-radius: 25px; position: relative;}
.de01 .lan .t1 img{ display: block; height: 18px;}
.de01 .lan .t1 span{ display: block; background: url(bx2.png) right center no-repeat; background-size: 0!important; padding-right: 0!important; font-size: 16px; color: #fff; margin-left: 14px;}
.de01 .lan ul{  position: absolute; left: 0; top:100%; width: 100%; padding-top: 10px; display: none;}
.de01 .lan ul li a{ display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 10px 0; border-bottom: 1px solid #eee; color: #000; background: #fff;}
.de01 .lan ul li a:hover{ background: #d5b992; color: #fff;}
.de02{ text-align: center; margin-top: -60px; color: #fff;}
.de02 .p1{ width: fit-content; font-size: 24px; margin: 0 auto; position: relative;  line-height: 1;}
.de02 .p1::after{ content: ""; display: block; width: 32px ; height: 1px; background: #d5b992; position: absolute; top: 50%; right: 110%;}
.de02 .p1::before{ content: ""; display: block; width: 32px ; height: 1px; background: #d5b992; position: absolute; top: 50%; left: 110%;}
.de02 .p2{ width: fit-content; font-size: 48px; margin: 0 auto; position: relative; font-weight: bold; line-height: 1; padding: 20px 0 16px;}
.de02 .p2::after{ content: ""; display: block; width: 32px ; height: 1px; background: #d5b992; position: absolute; left: 50%; bottom:0; transform: translateX(-50%);}
.de02 .p3{ width: fit-content; font-size: 30px; margin: 0 auto; position: relative; font-weight: bold; line-height: 1; padding: 16px 0 0 0;}
.de03{ display: flex; align-items: flex-start; justify-content: center; margin-top: 45px; font-weight: bold;}
.de03 .item{ width: 447px; position: relative; margin: 0 60px;}
.de03 .item .pic{ width: 100%; overflow: hidden;}
.de03 .item .pic img{ width: 100%; overflow: hidden;}
.de03 .item .t1{ width: 100%; position: absolute; left: 0; top:40px;}
.de03 .item .logo{ display: flex; align-items: center; justify-content: center; height: 116px;}
.de03 .item .logo img{ display: flex; height: 100%;}
.de03 .item .p1{ font-size: 22px; color: #1e2566; line-height: 1; padding: 25px 0 20px; text-align: center; position: relative;}
.de03 .item .p1::after{ content: ""; display: block; width: 32px ; height: 1px; background: #d5b992; position: absolute; left: 50%; bottom:0; transform: translateX(-50%);}
.de03 .item .p2{ font-size: 16px; color: #161631; line-height: 1.6;  text-align: center; position: relative; margin-top: 16px;}

.de03 .item .p3{ display: flex; align-items: center; justify-content: center; width: 280px; height: 66px; background: #08255f; color: #fff; border-radius: 35px; position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-size: 18px;}
.de03 .item .p3 i{ display: block; background: url(bx11.png) right center no-repeat; padding-right: 32px;}
.de03 .item:nth-child(2) .p3{  background: #b18c51; }
.de04{ display: flex; align-items: center; justify-content: center; padding: 40px 0;  }
.de04 .intro{ width: fit-content; position: relative; text-align: center; color: #fff;}
.de04 .intro .p1{ font-size: 26px; line-height: 1;}
.de04 .intro .p2{ font-size: 18px; line-height: 1; margin-top: 6px;}
.de04 .intro::after{ content: ""; display: block; width: 32px ; height: 1px; background: #d5b992; position: absolute; top: 50%; right: 110%;}
.de04 .intro::before{ content: ""; display: block; width: 32px ; height: 1px; background: #d5b992; position: absolute; top: 50%; left: 110%;}

.de05{ border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; padding: 25px 0;}
.de05 .item{ display: flex; align-items: center; margin: 0 70px;}
.de05 .item .ico img{ display: block; height: 42px;}
.de05 .item .cont{ margin-left: 20px;}
.de05 .item .cont .p1{ font-size: 18px; color: #fff; line-height: 1;}
.de05 .item .cont .p2{ font-size: 12px; color: #b18c51; line-height: 1; margin-top: 6px;}
.de06{ padding: 20px 0; font-size: 12px; color: #b18c51; text-align: center;}
.de06 a{ color: #b18c51;}

@media (max-width: 1600px){
    
    .de01{ padding: 30px 4% 0;}
    .de01 .logo img{ height: 70px;}
    .de01 .lan .t1{ width: 120px; height: 40px;}
    .de01 .lan .t1 img{ height: 16px;}
    .de01 .lan .t1 span{ background-size: 8px; padding-right: 14px; font-size: 14px; margin-left: 12px;}
    .de01 .lan ul li a{ font-size: 14px; padding: 5px 0; }

    .de02{ margin-top: -40px;}
    .de02 .p1{ font-size: 20px; }
    .de02 .p1::after{ width: 28px ;}
    .de02 .p1::before{ width: 28px ;}
    .de02 .p2{  font-size: 40px;  padding: 20px 0 16px;}
    .de02 .p2::after{ width: 28px ;}
    .de02 .p3{ font-size: 26px; padding: 16px 0 0 0;}
    .de03{  margin-top: 40px;}
    .de03 .item{ width: 360px; margin: 0 40px;}

    .de03 .item .t1{ top:35px;}
    .de03 .item .logo{ height: 100px;}
    .de03 .item .p1{ font-size: 18px; padding: 20px 0 16px;}
    .de03 .item .p1::after{ width: 28px ;}
    .de03 .item .p2{ font-size: 14px;  margin-top: 6px;}

    .de03 .item .p3{ width: 240px; height:58px; font-size: 16px;}
    .de03 .item .p3 i{ background-size: 14px; padding-right: 25px;}

    .de04{ padding: 30px 0;  }

    .de04 .intro .p1{ font-size: 22px; }
    .de04 .intro .p2{ font-size: 16px; margin-top: 10px;}
    .de04 .intro::after{ width: 28px ; }
    .de04 .intro::before{ width: 28px ; }

    .de05{ padding: 20px 0;}
    .de05 .item{ margin: 0 50px;}
    .de05 .item .ico img{ height: 36px;}
    .de05 .item .cont{ margin-left: 16px;}
    .de05 .item .cont .p1{ font-size: 16px; }
    .de05 .item .cont .p2{ margin-top: 5px;}
    .de06{ padding: 16px 0;}
}
@media (max-width: 1200px){
    
    .de01{ padding: 20px 4% 0;}
    .de01 .logo img{ height: 60px;}
    .de01 .lan .t1{ width: 100px; height: 32px;}
    .de01 .lan .t1 img{ height: 14px;}
    .de01 .lan .t1 span{ background-size: 7px; padding-right: 12px; font-size: 12px; margin-left: 10px;}
    .de01 .lan ul li a{ font-size: 14px; padding: 5px 0; }

    .de02{ margin-top: 30px;}
    .de02 .p1{ font-size: 18px; }
    .de02 .p1::after{ width: 24px ;}
    .de02 .p1::before{ width: 24px ;}
    .de02 .p2{  font-size: 32px;  padding: 20px 0 16px;}
    .de02 .p2::after{ width: 24px ;}
    .de02 .p3{ font-size: 24px; padding: 16px 0 0 0;}
    .de03{  margin-top: 30px;}
    .de03 .item{ width: 300px; margin: 0 30px;}

    .de03 .item .t1{ top:30px;}
    .de03 .item .logo{ height: 80px;}
    .de03 .item .p1{ font-size: 16px; padding: 20px 0 16px;}
    .de03 .item .p1::after{ width: 24px ;}
    .de03 .item .p2{ font-size: 12px;  margin-top: 12px;}

    .de03 .item .p3{ width: 180px; height:50px; font-size: 14px;}
    .de03 .item .p3 i{ background-size: 12px; padding-right: 20px;}

    .de04{ padding: 20px 0;  }

    .de04 .intro .p1{ font-size: 20px; }
    .de04 .intro .p2{ font-size: 14px; margin-top: 10px;}
    .de04 .intro::after{ width: 24px ; }
    .de04 .intro::before{ width: 24px ; }

    .de05{ padding: 20px 0;}
    .de05 .item{ margin: 0 30px;}
    .de05 .item .ico img{ height: 30px;}
    .de05 .item .cont{ margin-left: 16px;}
    .de05 .item .cont .p1{ font-size: 14px; }
    .de05 .item .cont .p2{ margin-top: 5px;}
    .de06{ padding: 16px 0;}
}

@media (max-width: 750px){
    
    .de01{ padding: 20px 4% 0;}
    .de01 .logo img{ height:40px;}
    .de01 .lan .t1{ width: 90px; height: 32px;}
    .de01 .lan .t1 img{ height: 12px;}
    .de01 .lan .t1 span{ background-size: 7px; padding-right: 12px; font-size: 12px; margin-left: 10px;}
    .de01 .lan ul li a{ font-size: 12px; padding: 5px 0; }

    .de02{ margin-top:20px;}
    .de02 .p1{ font-size: 16px; }
    .de02 .p1::after{ width: 20px ;}
    .de02 .p1::before{ width: 20px ;}
    .de02 .p2{  font-size: 24px;  padding: 20px 0 16px;}
    .de02 .p2::after{ width: 20px ;}
    .de02 .p3{ font-size: 18px; padding: 16px 0 0 0;}
    .de03{  margin-top: 30px;}
    .de03 .item{ width: 47vw; margin: 0 1vw; overflow: hidden; border-radius: 15px;}
    .de03 .item .pic{ width: 110%; position: relative; left: -5%;}
    .de03 .item .t1{ top:20px;}
    .de03 .item .logo{ height: 60px;}
    .de03 .item .p1{ font-size: 12px; padding: 20px 0 16px;}
    .de03 .item .p1::after{ width: 20px ;}
    .de03 .item .p2{ font-size: 10px;  margin-top: 12px;}

    .de03 .item .p3{ width: 94%; height:42px; font-size: 12px;}
    .de03 .item .p3 i{ background-size: 10px; padding-right: 16px;}

    .de04{ padding: 20px 0;  }

    .de04 .intro .p1{ font-size: 18px; }
    .de04 .intro .p2{ font-size: 12px; margin-top: 10px;}
    .de04 .intro::after{ width: 20px ; }
    .de04 .intro::before{ width: 20px ; }

    .de05{ padding: 20px 6%; flex-wrap: wrap;}
    .de05 .item{ margin: 10px  0; width: 50%;}
    .de05 .item .ico img{ height: 30px;}
    .de05 .item .cont{ margin-left: 16px;}
    .de05 .item .cont .p1{ font-size: 14px; }
    .de05 .item .cont .p2{ margin-top: 5px;}
    .de06{ padding: 16px 0;}
}


















