.ml-30 {
     margin-left: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
.ml-20 {
    margin-left: 20px;
}
 .container-fluid {
   /* padding: 0 5% */
 }

 .bottominfo {
     margin-top: 40px;
 }

 .navactive {
     margin: 0 15px
 }

 .pc-bottom {
     display: block
 }

 .imgWidth {
     height: 72px;
 }

 .logoText {
     font-size: 22px;
     color: #005EAE;
     font-weight: 700;
     border-bottom: 4px solid #325484;
     padding-bottom: 24px;
 }

 /* 当屏幕宽度小于768px时应用的样式 */
 @media (max-width: 768px) {
     .nav-container {
         background-color: #2E96E3 !important;
     }

     .playlist {
         display: none !important;
     }

     #navbar {
         padding-top: 0;
     }

     .nav-swiper {
         margin-top: 4rem;
     }

     .imgWidth {
         height: 66px;
     }

     .main-content {
         position: static !important;
         padding-top: 0 !important;
         height: auto !important;
     }

     /* body {
                background-color: lightcoral;
            } */
     .bg1 {
         padding-top: 0px !important;
     }

     .margintop {
         margin-top: 20px;
     }

     .bottominfo {
         margin-top: 20px;
     }

     .pc-bottom {
         display: none
     }

     .mobile-bottom {
         text-align: center;
     }

     .mobilenav {
         display: none !important;
     }

     .pcnav {
         display: none !important;
     }

     .pcline {
         display: none !important;
     }

     .pcline1 {
         display: none !important;
     }

     .bottom_border {
         border-bottom: 1px solid #D9D9D9;
         padding-bottom: 10px !important;
         margin-bottom: 20px !important;
         background-repeat: no-repeat;
         background-position: bottom right;
         display: block !important
     }

     .ml-30 {
         margin-left: 0 !important;
         margin-top: 20px;
     }
 }

 .mobilenav {
     display: block;
 }

 .pcnav {
     display: block;
     position: relative;

     .container-fluid {
         padding: 0 10%
     }
 }

 .pcline {
     height: 70px;
     width: 100%;
     background-color: #7A2B2A;
     position: absolute;
     z-index: 0;
 }

 .pcline1 {
     height: 10px;
     background: linear-gradient(90deg, #7A2B2A 0%, rgba(122, 43, 42, 0) 100%);
 }

 .btn-cyan {
     color: #fff;
     background-color: #35bdff;
     border-color: #35bdff;
 }

 .btn-cyan:hover {
     color: #fff;
     background-color: #0fb1ff;
     border-color: #02acff;
 }

 .btn-cyan:focus,
 .btn-cyan.focus {
     box-shadow: 0 0 0 0.2rem rgba(53, 189, 255, 0.5);
 }

 .btn-cyan.disabled,
 .btn-cyan:disabled {
     color: #212529;
     background-color: #35bdff;
     border-color: #35bdff;
 }

 .btn-cyan:not(:disabled):not(.disabled):active,
 .btn-cyan:not(:disabled):not(.disabled).active,
 .show>.btn-cyan.dropdown-toggle {
     color: #fff;
     background-color: #02acff;
     border-color: #00a4f4;
 }

 .btn-cyan:not(:disabled):not(.disabled):active:focus,
 .btn-cyan:not(:disabled):not(.disabled).active:focus,
 .show>.btn-cyan.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(53, 189, 255, 0.5);
 }

 .main-content {
     /* position: fixed; */
     top: 100%;
     left: 0;
     z-index: 10;
     width: 100%;
     background: white;
     /* overflow: auto; */
     outline: none;
     transition: top 1s cubic-bezier(0.5, 0, 0.2, 1) 0s;
     background-size: 100% auto;
     background-attachment: fixed;
 }



 .navactive .navlist {
     display: none !important;
     box-shadow: 0px 0px 4px 0px rgba(122, 43, 42, 0.902);
     border-radius: 4px 4px 4px 4px;
 }

 .navactive .line {
     display: none !important;
 }

 .navactive:hover {
     .navlist {
         display: block !important;
     }

     .line {
         display: block !important;
     }
 }

 .nav-link {
     color: #fff;
 }



 .card-cus:hover {
     /* .imgbg {
                transform: scale(1.1);

            } */
 }

 .d-done {
     display: none;
 }

 .bg1 {
     background: url("../assets/image/line_bg.png");
     background-repeat: no-repeat;
     background-size: 90% 100px;
 }

 .bg1::before {
     width: 100%;
     height: 100px;
     background-color: #7A2B2A;
 }

 .bg2 {
     background: url("../assets/image/bg1.png");
     background-size: 100%;
 }

 .bg4 {
     background: url("../assets/image/bg3.png");
     background-size: 100%;
 }

 .bg5 {
     background: url("../assets/image/bottombg.png");
 }

 .font14 {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
 }

 .font16 {
     font-size: 16px;
 }

 .btn-cus {
     background-color: #16a7fc;
     color: #fff;
     border-radius: 20px;
     font-size: 20px;
 }

 .bottom_border {
     border-bottom: 1px solid #D9D9D9;
     padding-bottom: 30px;
     margin-bottom: 38px;
     background-repeat: no-repeat;
     background-position: bottom right;
     display: flex;
     align-items: center;
 }

 .timecard {
     margin-right: 20px;
     padding-right: 16px;
     border-right: 1px solid #D9D9D9;
     ;
 }

 .time-top {
     width: 64px;
     height: 38px;
     color: #7A2B2A;
     font-size: 30px;
     font-weight: bold;
     text-align: center;
     border-radius: 0px 0px 0px 0px;
 }

 .time-up {
     height: 28px;
     font-size: 14px;
     font-weight: 500;
     margin-top: 18px;
     border-radius: 0px 0px 0px 0px;
 }

 .card-unactive {
     background: transparent;
     border-radius: 0px 0px 0px 0px;
     transition: background-color 0.5s ease;
     margin-bottom: 2rem;
     border-color: #EAEAEA !important;

     .card-title {
         color: #000;
         font-weight: 400;
         font-size: 18px;
         margin-bottom: 12px;
         line-height: 28px;
     }

     .card-text {
         color: #666666;
         font-size: 16px;
     }

     .time1 {

         height: 70px;
         margin-right: 24px;
         background: url('../assets/image/gonggaobg.png');
         background-size: 100% 100%;
         text-align: center;
         padding: 4px 0
     }
 }

 .gonggao {
     display: flex;
     align-items: center;
     padding: 24px;
 }

 .time-top1 {
     width: 78px;
     height: 34px;
     color: #FFFFFF;
     font-size: 30px;
     font-weight: bold;
 }

 .time-up1 {
     /* width: 66px; */
     color: #FFFFFF;
     font-size: 14px;
     font-weight: 500;
 }

 .aimg {
     position: relative;
     text-align: center;
     width: 500px;
     left: 50%;
     transform: translate(-50%);
     background-image: url('../assets/img/activity1.png');
 }

 .aimg:hover {
     /* transform: scale(1.5); */
 }

 .inputClass {
     flex: 1;
     background-color: transparent;
     border: none;
     color: #fff;
 }

 .inputClass:focus {
     border: none !important;
     box-shadow: none !important;
     outline: none;
 }

 .inputClass::-webkit-input-placeholder {
     color: #fff !important
 }

 a {
     text-decoration: none;
 }

 .margintop {
     margin-top: 20px;
 }

 .customTitle {
     overflow: hidden;
     font-family: 'Microsoft YaHei', 'MicrosoftJhengHei', 'NotoSerifCJKsc-Regular', sans-serif;
     width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin-bottom: 16px;
     font-size: 20px
 }

 .customTitle1 {
     overflow: hidden;
     font-family: 'Microsoft YaHei', 'MicrosoftJhengHei', 'NotoSerifCJKsc-Regular', sans-serif;
     width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
     font-size: 24px
 }

 .text_clip {
     font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
 }

 .huiText {
     color: #000
 }

 .nav-link {
     color: #fff;
 }

 .nav-link1:hover {
     color: #325484
 }

 .lightText {
     color: #325484
 }

 .boldText {

     /*font-weight: 700;*/
 }

 .blackText {
     font-size: 16px;
     color: #000
 }

 .blackText:hover {
     color: #325484
 }

 .playCss {
     display: flex;
     justify-content: center;
     top: 50%;
     position: relative;
 }

 .playlist {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
 }

 .page-link {
     color: #325484
 }

 .dropdown-toggle::after {
     display: none;
 }
 .navactive {
     margin: 0 20px
 }
 .dropdown-menu {
     text-align: center;

 }

 .dropdown-menu.show {
     left: -50%;

 }

 .colorText {
     color: #000
 }

 .colorText:hover {
     color: #325484
 }

 .transimg:hover {
     transform: scale(1.1);
 }