@import "./common.less";

body {
	font-size: var(--ft16);
	color: #000;
	.d-flex;

	.flex-column;
	min-height: 100vh;

	@media (max-width: 768px) {}
}

main {
	flex: 1;
}
header{
    .layui-main{
        padding: var(--p20) 0;
    }
    .layui-nav .layui-this:after, .layui-nav-bar{
        background: var(--ftc);
        border-radius: 4px;
    }
    .layui-nav .layui-nav-item a:hover, .layui-nav .layui-this a{
        color: var(--ftc) !important;
    }
    background: #F1F1F1;
     .layui-nav .layui-nav-item{
         line-height: 2em;
         margin-left: var(--p40);
     }
    .layui-nav .layui-nav-item a{
        padding: 0;
        color: #000;
        font-size: var(--ft14);
    }
 
}
.Banner{
    padding: var(--p100) 0;
    color: #fff;
    .bg_fixed;
    .Block{
        .d-grid;
        .grid2;
        gap: var(--p30);
    }
    ul{
        .d-flex;
        .al-c;
        margin-bottom: var(--p20);
        li{
            margin-right: var(--p30);
            cursor: pointer;
            position: relative;
            &.layui-this::after{
                width: 24px;
            }
        }
        li::after{
            transition: all 0.3s;
            margin: var(--p10) auto;
            display: block;
            content: '';
            background: #fff;
            width: 0;
            height: 3px;
        }
        
    }
       video{background: rgba(20,0,0,0.5);
        max-width: 100%;border-radius: 20px 20px 20px 20px;
        aspect-ratio: 650/380;
    }
    h1{
        font-size: var(--ft64);
    }
    h5{
        margin-top: var(--p25);
        font-size: var(--ft32);
    }
    .layui-btn{
    display: inline-block;
        margin-top: var(--p90);
        background: #Fff;
        color: var(--ftc);border-radius: 16px 16px 16px 16px;
        --btn:56px;
        font-size: var(--ft20);
        letter-spacing: 5px;
        border: none !important;
    }
}
.MobileSection{
    .Block{
        .d-flex;
        .al-c;
        .jc-c;
        margin-top: var(--p170);
        position: relative;
        .phone{
            left: -40px;
            position: absolute;
            width: 340px;
            max-width: 100%;
            aspect-ratio: 340/718;
            border-radius: 60px 60px 60px 60px;
            border: 12px solid #000000;
        }
        .bg{
        }
    }
    ul{
        flex-shrink: 0;
        color: var(--bgc);
        .d-grid;
        font-size: var(--ft24);
        gap: var(--p90);
        li:nth-child(2),
        li:nth-child(3){
            margin-left: var(--p30);
        }
        
    }
}
.Youshi{
    ul{
        margin-top:var(--p60);
        .d-flex;
        .jc-se;
        text-align: center;
        color: var(--bgc);
     h5{
         font-weight: normal;
         margin-top: var(--p20);
         font-size: var(--ft24);
     }
     p{
         margin-top: var(--p10);
         opacity: 0.5;
     }
    }
}
.HexinBlock{
    .bg_fixed;
    .Block{
        margin-top: vaR(--p70);
        .d-flex;
        .al-c;
        .jc-c;
        gap: var(--p90);
        .pic{
        }
        ul{
            flex-shrink: 0;
            gap: var(--p80);
            .d-grid;
            color: var(--bgc);
            font-weight: bold;
            li{
                .d-flex;
                .al-c;
                gap: var(--p10);
                .img {
                    width: 48px;
                    flex-shrink: 0;
                }
            }
        }
        
        
    }
}
.About{
       .titleLine,
    .titleSub{
        color: #fff;
    }
    
    padding-bottom: 0;
    
    color: #fff;
             font-size: var(--ft20);
    .Card{
        margin-top: var(--p50);
         min-height: 656px;background: rgba(0,0,0,0.4);
         .d-grid;
         grid-template-columns:  20vw 1fr;
     }
     .right-content{
         padding: var(--p40) var(--p90);
         ul{
             margin-top: var(--p30);
             .d-grid;
             .grid3;
             gap: var(--p25);
             .img{
                 aspect-ratio: 1/1;
             }
         }
         
     }
     .left-menu{
         background: rgba(0,0,0,0.2);
         .menu-item {
             padding: var(--p30) var(--p20);
             text-align: center;
             background: #000;
             cursor: pointer;
             &.active{
                 background: var(--ftc);
             }
         }
     }
}
.titleSub{
    font-size: var(--ft24);
    letter-spacing: 3px;
    color: var(--bgc);
    opacity: 0.5;
    text-align: center;
}
.Changjing{
    margin-top: var(--p80);
    ul{
        margin-top: vaR(--p50);
        .d-grid;
        .grid4;
        gap: var(--p50);
        li{
            position: relative;
                border-radius: 20px;
                overflow: hidden;
            .img{
                overflow: hidden;
            }
            .block{
                position: absolute;
                left: 0;
                color: #fff;
                right: 0;
                background: rgba(0,0,0,0.4);
                bottom: 0;
                padding: var(--p20);
                text-align: center;
                font-size: var(--ft24);
                letter-spacing: 4px;
                transition: all 0.5s ;
            }
            &:hover{
                    .block{
                bottom: -100%;
                    }
            }
        }
    }
}
.titleLine{
    letter-spacing: 4px;
        text-align: center;
        font-size: var(--ft40);
        color: var(--bgc);
        font-weight: bold;
    &::after{
        display: block;
        content: '';
        width: 34px;
        margin: 5px auto 8px;
                height: 6px;
                background: #1A9B0D;
                border-radius: 11px 11px 11px 11px;
    }
}
.Contact{
    color: #fff;
    background: var(--bgc);
    .titleLine{
    font-size: var(--ft24);
        text-align: left;
    margin-bottom: var(--p25);
    font-weight: normal;
        color: #fff;
           &::after{
               margin-left: 0;
           }
    }
    .layui-main{
        .d-flex;
        .al-fs;
        .jc-s;
        gap: var(--p120);
    }
   
    .Content{
            .d-grid;
            gap: var(--p30);
     
    }
    .qrcode{
        .d-flex;
        flex-wrap: flex-wrap;
        gap: var(--p20);
        li{
            position: relative;
        }
        .img{
            border: 1px solid #fff;
            border-radius: 10px;
            padding: var(--p10);
            width: 120px;
            aspect-ratio: 1/1;
        }
        .title{
            font-size: var(--ft14);
            background: var(--ftc);
            display: inline-block;
            position: absolute;
            left: 50%;
        transform: translateX(-50%);border-radius: 21px 21px 21px 21px;
        padding:0 10px;
        bottom: -6px;
        white-space: nowrap;
        }
    }

}
.XinLai{
  .swiper{
      margin-top: var(--p50);
  }
  .swiper-slide{
      width: 50%;
      aspect-ratio: 577/436;
      scale: 0.8;
      transition: all 0.3s;
  }
  .swiper-slide-active{
      scale: 1;
  }
  .img{
      margin:  var(--p30) 0;
      box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
border-radius: 30px 30px 30px 30px;
  }
}

@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    section{
        padding: 50px 0;
    }
        .menu_button .line{
        stroke: #000 !important;
    }
    .navMobile{
        background: var(--bgc);
    }
    header{
        top: 0 !important;
    }
    .Banner .layui-btn{
        --btn:40px;
    }
    .Youshi ul{
        .d-grid;
        .grid1;
    }
    .About .Card{
        .d-flex;
        .flex-column;
    }
    .About .Card,
    .Banner .Block{
        .grid1;
    }
    .HexinBlock .Block ul li .img{
        width:  20px;
    }
    .HexinBlock .Block .pic img{
        max-width: 50vw;
        
    }
    .About .left-menu{
        .d-flex;
        .menu-item{
            flex: 1;
        }
    }
    .About .right-content ul,
    .Changjing ul{
        .grid2;
    }
    .MobileSection .Block {
    margin-top: 50px;
    }
    .MobileSection .Block .phone{
        width: 130px;
        border-radius: 20px;
        left: 0;
        border-width: 5px;
    }
    .Contact .qrcode .img{
        width: 90px;
    }
    .Contact .layui-main{
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

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