/* 初始化部分 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  Helvetica,"PingFang SC","Microsoft Yahei",sans-serif;
    font-size: 14px;
}

img{
    width: 100%;
}

/* :root 是html标签(根元素) */
:root{  
    --primary-color:#ff434f;
    --secondary-color:#e3e3e3;
    --text-color-lightest:#e7e9e3;
    --text-color-darker:#2e2e2e;
    --text-color-dark:#494949;
    --text-color-gray:#8b8b8b;
    --text-color-dark-gray:#727272;
    --text-color-light-gray:#c2c2c2;
    --backdrop-color:rgba(42,42,42,.69);
}

/* header部分 */
header{
    width: 100vw;
    height: 80px;
    display: grid; 
    padding:0 40px;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    position: relative;
    /* border: 1px solid #000; */
    z-index: 200;
}

.logo{
    font-size: 24px;
    font-weight: 600;
    color:var(--text-color-lightest)
}

header nav{
    justify-self: end;
}

header nav i {
    color:var(--text-color-lightest)
}

header nav a{
    color: var(--text-color-lightest);
    text-decoration: none;
    margin: 0 24px;
}

/* 隐藏折叠按钮 */
header .burger {
    display: none;
}

/* !固定导航 */
header.sticky {
    position: fixed;
    background-color: white;
    box-shadow: 0 0  18px rgba(0,0,0,.2);
     /*执行时间0.5s  执行函数ease in out , forward 当动画结束时 保留最后一帧*/
    animation: dropDown 0.5s ease-in-out forwards; 
}

header.sticky .logo,
header.sticky nav a,
header.sticky nav i {
    color:var(--text-color-darker)
}
/* 动画效果 定义动画名*/
@keyframes dropDown {
    from{
        /* 先把他移动到窗口的上边100像素, 本身高为80 上移动会看不见 */
        transform: translateY(-100px); 
    }
    to{
        /* 恢复到原先的地方 */
        transform: translateY(0);
    }
}

/* 轮播图部分 */
.glide{
    position: relative;
    top: -80px;
    z-index: 50;
}
/* object-fit:cover 一般用于 img 和 video 标签 处理图片失真问题。保持原有尺寸比例,
保证图片内容尺寸一定大于容器尺寸，
宽度和高度至少有一个和容器一致, 最终会导致图片部分区域不可见, 但是不会被拉伸的模糊显示
总结: 给一个400*400的容器, 放一个800*800的图 一般会把整个图缩小到400*400放入
而object-fit:cover 会把图裁切成400*400 保持长宽比
最佳最完美的居中自动剪裁图片(800*800中最中心的400*400裁切出来显示)
*/

.glide__slide img,
.glide__slide video{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

/* 标题的位置 */
.slide-caption{
   
    position: absolute;
    z-index: 70;
    color: var(--text-color-lightest);
    text-align: center;
    max-width: 60vw;
}
.slide-caption h1{
    font-size:40px;
}
/* 将其子元素 进行全部居中   */
.glide__slide{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 主标题 */
.glide__caption h1{
    font-size: 54px;
    font-weight: 600;
}

/* 动画出现效果实现 slide-caption 所有子直接元素 */
.slide-caption > * {
    opacity: 0;
}

/* 副标题 */
.slide-caption h3{
    font-size: 24px;
    margin: 48px 0;
}

/* 文字对齐 */
.slide-caption.center{
    max-width: 80vw;
    text-align: center;
}
.slide-caption.left{
    max-width: 80vw;
    text-align: left;
}

/*  遮笼罩 */
.backdrop{
    background-color: var(--backdrop-color);
    z-index: 60; 
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    opacity: 0.5;
}

/* 探索更多(按钮的样式) */
.explore-btn{
    padding: 14px 32px;
    background-color: var(--primary-color);
    border: 0;
    border-radius: 4px;
    color: var(--text-color-lightest);
    font-size: 18px;
    cursor: pointer;
    outline: none;
}

/* 内容区域 */
/* 通用样式 */
.content-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

section{
    display: grid;
    /* 对于每一个列的居中方式 */
    justify-items: center;
    max-width: 1180px;
    padding: 0 80px;
}

/* 通用的背景 */
/* ! 设置背景的方法 借鉴 以一个relative 进行布局, 利用伪元素 进行定位 将背景平铺上去 并将其的层级设置为-1
 */
.section-bg{
    position: relative;
}

.section-bg::after{
    content: "";
    /* display: block; */
    position: absolute;
    background-color: #f9fbfb;
    width: 100vw;
    height: 100%;
    z-index: -1;
}
 
.title1{
    font-size: 34px;
    color: var(--text-color-darker);
}

/* !红色显示条  用after 伪元素实现*/
.title1::after{
    content: "";
    /* 因为title是一个block元素 而把伪元素也变成块级 形成分成两行显示 */
    display: block;
    width: 80%;
    height: 4px;
    background-color: var(--primary-color);
    margin-top: 14px;
    /* ! 当位置不对的时候 进行平移*/
    transform: translateX(10%);
}

/* 介绍 */
.intro{
    margin:28px 0 60px 0;
    font-size: 18px;
    color: var(--text-color-dark-gray);
}

/* 关于我们 */
.about-us{
    padding-bottom:32px ;
}

/* 公司业务的布局 */
/* 旗下有6个feature的类  CSS将其装到3*2的一个网格中 */
.features{
    display: grid;
    /* 三列 */
    grid-template-columns: repeat(3,1fr);
     /*两行  */
    grid-template-rows: 126px 126px;
    /* 保持百分之5分空隙, 注意是响应式的 */
    column-gap: 5vw;
    /* display: flex;
    flex-wrap: wrap;
    width: 1200px;
    height: 252px;
    justify-content: space-around; */
}

/* 每一项 */
.feature{
    /* 在大网格里面布局小网格 */
    display: grid;
    /* (4个网格 分别对应4个自定义名称)*/
    grid-template-areas: 
    "icon title"
    "icon content";
    /* 小网格分成两列 一列60 一列自动填充 */
    grid-template-columns: 60px 1fr;
    /* 标题占1/4 内容占3/4 */
    grid-template-rows: 1fr 3fr;
}

/*  */
/* 图标 */
.feature i.fas{
    /* 分配自定义名称 这样内容就会填充到对应的网格 */
        /* icon 正好对应上面区域的两个网格 就会占据上面两个网格的位置 */
    grid-area: icon;
    font-size: 34px;
    color: var(--primary-color);
}

.feature-title{
    /* 将DOM的内容 填入到对应的名字的网格中 */
    grid-area: title;
    font-size: 18px;
    color: var(--text-color-darker);
}
/* 将内容显示到对应的 网格中 */
.feature-content {
    grid-area: content;   
    color: var(--text-color-gray);
    margin-top: 8px;
}

/* 成功案例 */
.showcases{
    /* 取消最大宽度的显示  section 标签 max-width 1180的影响*/
    /* unset 不设置 */
    max-width: unset;
    padding: 0;
    padding-top: 72px;
}

.filter-btns{
    margin-top: 54px;
    margin-bottom: 38px;
}

/* !hover 也会触发transition的过度效果 */
.filter-btn{
    margin:0 7px;
    background-color: var(--secondary-color);
    border: 0;
    color:var(--text-color-dark-gray);
    /* 设置padding 把内容撑开*/
    padding:8px 18px;
    border-radius: 4px;
    cursor: pointer;
    /* 当指上去的时候 会有一个0.4过渡效果 */
    transition: .4s;
}

/* 选中和点击的时候*/
.filter-btn:focus,
.filter-btn:active{
    outline: none;
}

.filter-btn.active,
.filter-btn:hover
{
    background-color: var(--primary-color);
    color: white;
}

.showcases .cases{
    width: 100vw;
}

.showcases .case-item{
    width: 25vw;
    /*!根据宽度的比例 来制定高度 */
    height: 20vw;
    /* 设定外面容器的高度, 而内容超过容器的部分就隐藏 */
    overflow: hidden;
}

.case-item img{
    height: 100%;
    object-fit: cover;
}

/* 服务流程 */
.service{
    padding-top: 131px;
}

.services{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    column-gap: 38px;
    row-gap: 34px;
}

.service-item{
    display: grid;
    grid-template-areas: 
    "icon title"
    "icon content";
    grid-template-columns: 70px 1fr;
    grid-template-rows:1fr 3fr ;
    padding: 24px;
    /* ！ 学习阴影的技巧 */
    box-shadow: 0px 0px 18px rgba(0,0,0,.06);
}

.service-item i.fas{
    grid-area: icon;
    font-size: 42px;
    color: var(--primary-color);
    padding-top: 6px;
}

.service-item .service-title{
    grid-area: title;
    color: var(--text-color-darker);
    font-size: 24px;
}

.service-item .service-content{
    grid-area: content;
    color: var(--text-color-gray);
    line-height: 30px;
    font-size: 16px;
    margin-top: 8px;
}

/* 团队介绍 */
.team-intro{
    margin-top: 48px;
    padding-top: 62px;
    padding-bottom: 52px;
}

.team-members{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    /* 不写多少行 默认为一行 */
    /* !每一列留出一部分空白 给阴影效果 */
    column-gap: 24px;
    margin-top: 86px;
}

.team-member{
    background-color: white;
    /* !x偏移 y偏移 扩散的距离正好和上面列的间隙相等, */
    box-shadow: 0px 0px 24px rgba(0, 0, 0, .2); 
    text-align: center;
    padding-bottom: 28px;
    transition: 0.4s;
   
     
}

.profile-image{
    overflow: hidden;
}

.profile-image img{
    /* ? */
    width: 100%;
    /* width: ; */
    height: 264px;
    /* 等比例的缩放=>解决图片和容器宽高不适配的问题*/
    object-fit: cover;
    
    /* 容器大小重置图片的大小，并设置图片的位置 */
    /* 图片放大之后 按什么位置摆放 从最上边开始 然后居中 */
    /* 最终容器里会显示 图片的上部分, 超出的左右部分, 平均裁切,留中间的部分 */
    /* 默认 center center */
    /* 比例缩放之后,会裁切图片以适应容器,那么留哪一部分呢 
    需要进行指定 这里是留上中部分,左右裁切面积相同,下面直接不要 */
    object-position: top center;
}

.team-member .name{
    margin-top: 18px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color-dark);
}

.team-member .position{
    color: var(--text-color-dark-gray);
    margin-top: 12px;
    margin-bottom: 18px;
}

.social-links{
    width: 100%;
    /* 最高放大到200像素 */
    max-width: 200px;
    display: flex;
    justify-content: space-around;
    /* padding:0 42px */
    margin: 0 auto;
}

.social-links li{
    list-style: none;
}

.social-links li a{
    color:var(--text-color-dark);
    text-decoration: none;
}

.team-member:hover {
    /* 上移  负的就是往上走 */
    /* 直角坐标系在左上角为原点 x往右越大, y往下越大*/
    /*  放大0.05倍 sacle  */
    transform: translateY(-20px) scale(1.05);
    /* 阴影变淡 远离地面的效果 */
    box-shadow: 0px 0px 36px rgba(0, 0, 0, .1);
}

/* 数据部分 */
/* 显示部分 内容>遮笼罩>背景图片 无关层叠*/
.data-section {
    max-width: unset;
    width: 100vw;
    height: 255px;
    background-image: url(static/images/adult-business-computer-contemporary-380769.jpg);
    /* ! 图片背景 cover 等比例缩放 */
    background-size: cover;
    /* 背景图片> 容器 => 进行裁切 => 取中间那一部分 */
    background-position: center;
    display: grid;
    /* 最小值 根据剩余宽度来确定 , 最大值不能超过220px */
    grid-template-columns: repeat(4,minmax(auto,220px));
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 20;
}
/* !遮罩层 伪元素设定,在元素上只用 相对定位即可 */
.data-section::before{
    content:"";
    display: block;
    position:absolute;
    /* !可以借鉴这个颜色 */
    background-color: var(--backdrop-color);
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* 设置数据项的样式 */
.data-piece{
    width: 250px;
    display: grid;
    grid-template-rows: repeat(3,1fr);
    justify-items: center;
    color: white;
    z-index: 40;
}

.data-piece i.fas{
    font-size: 44px;
}

.data-piece .num{
    margin-top: 7px;
    font-size: 41px;
    font-weight: 600;
}
.data-piece .data-desc {
    font-size: 18px;
    font-weight: 500;
}
/* 公司动态 */
.company-activities{
    margin-top: 88px;
}

.activities{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 24px;
}
.activity{
    box-shadow: 0px 0px 24px rgba(0, 0, 0, .1);
    /* !父盒子设置padding  让内容留白 */
    padding: 24px;
    /* 鼠标滑过放大上移动的时间 */
    transition: 0.4s;
}

.act-image-wrapper{
    height: 255px;
    /* overflow: hidden; */
    /* ！不需要留白的部分 就用margin负值来抵消 去掉留白*/
    margin: -24px;
    /* 下面的内容不需要上移动24 */
    margin-bottom: 0;

}

.act-image-wrapper img{

    /* 图片高度保持一致 */
    height: 100%;
    /* 自动拉伸 */
    object-fit: cover;
}

.activity .meta{
    margin-top: 20px;
    margin-bottom: 12px;
    color: var(--text-color-light-gray);
    font-size: 12px;
    display: flex;
}

.activity .meta >p:last-child{
    margin-left: 36px;
}

.act-title{
    color: var(--text-color-dark);
    font-size: 18px;
    margin-bottom: 16px;
}

.activity article{
    color: var(--text-color-gray);
    letter-spacing: 0.54;
    line-height: 24px;
}

.readmore-btn{
    border: 0;
    color: white;
    background-color: var(--primary-color);
    border-radius: 4px;
    padding:6px 14px;
    margin-top: 24px;
}

.activity:hover{
    transform: translateY(-20px) scale(1.05);
    box-shadow: 0px 0px 36px rgba(0, 0, 0, .1);
}

/* 底部信息 */
footer{
    margin-top: 124px;
    background-color: #181818;
    display:  grid;
    justify-items: center; 
    padding-top: 72px;
    padding-bottom: 24px;
}

.footer-menus {
    /* 父盒子如果没有给宽度 则默认根据元素长度 撑开盒子 */
    width: 100%;
    display: grid;
    /* 没有指定行时 行数会根据子元素的盒子来确定有几行
        例如父元素6个盒子 而一行只有5列时 多出来的盒子就会去下一行
    */
    grid-template-columns: 2fr repeat(4,1fr);
    padding: 0 80px;
}

.menu-title {
    font-size: 16px;
    color: white;
    font-weight: 500; 
    margin-bottom: 20px;
}

.contact-us {
    justify-self: start;
    color: var(--text-color-lightest);
}

/*! not 关键字学习  非第一个元素*/
.contact-us p:not(:first-child){
    padding-bottom:16px ;
}

.menu-items  li{
    list-style: none;
    padding-bottom: 8px;
}

.menu-items li a {
    text-decoration: none;
    font-weight: 300;
    color: var(--text-color-lightest);
}

.icp-info{
    margin-top: 24px;
    margin-bottom: 16px;        
}
.icp-info,
.rights{
    /* 
        将默认在不同网格的子元素, 放在一起
    ! 左边框所在的网格编号为1, 第一根网格线 右边框网格编号为-1  -1表示最后一个 最后一个网格线
        同理-2 就是倒数第二个

    */
    /*  ! 本来子元素 默认是在不同网格的 但是给两个子元素 设置相同的网格线进行放置 那么他们就会在一起 */
     grid-column: 1 / -1;  
     justify-self: center;
     color: white;  
}

.scrollToTop{
    display: none;
    position: relative;
    z-index: 300;
}
.scrollToTop a{
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    position: fixed;
    bottom: 60px;
    right: 30px;
}

/* 设定屏幕最大的宽度 */
@media(max-width:1100px){
    header nav{
        display: none;
    }

    header {
        grid-template-columns: repeat(2,1fr);
    }
    header .burger{
        display: block;
        width: 20px;
        height: 6px;
        position: relative;
        justify-self: end;
        cursor: pointer;
    }

    .burger-line1,
    .burger-line2,
    .burger-line3 {
        width: 20px;
        height: 2px;
        background-color: var(--text-color-dark-gray);
    }
    

    .burger-line1 {
        position: absolute;
        top: -6px;
    }

    .burger-line3 {
        position: absolute;
        top: 6px;
    }

    header.open nav{
        display: grid;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        /* 
            grid-auto-rows属性为网格容器中的行设置大小。此属性仅影响未设置大小的行。 
            设置每行的大小以取决于行中的最大项
        */
        grid-auto-rows: max-content;
        justify-items: end;
        padding: 0 40px;
        opacity: 0;
        /* 停留在最后一帧 */
        animation: slideDown 0.6s ease-out forwards;
    }
    /* !justfiy-items 是网格里所有的内容 放置 */
    /*  justfiy-self  作用于单个项目  */
    header.open .burger-line1
    header.open .burger-line2
    header.open .burger-line3
    header.sticky .burger-line1
    header.sticky .burger-line2
    header.sticky .burger-line3{
        background-color: var(--text-color-darker);
        transition: 0.4s ease;
    }

    /* burger-line1,2,3 的动画效果 就是为了把三条横线 变成X */
    header.open .burger-line1 {
        /*  */
        transform: rotate(45deg) translate(3px,5px);
    }

    header.open .burger-line2 {
        /*  */
        transform: translateX(5px);
        opacity: 0;
    }

    header.open .burger-line3 {
        /*  */
        transform: rotate(-45deg) translate(3px,-5px);
    }

    header.open .logo {
        z-index: 40;
        color: var(--text-color-darker);
    }

    header.open nav > * {
        color: var(--text-color-darker);
        /* 在导航菜单下拉0.4秒后开始进行动画效果 */
        animation: showMenu 0.5s linear forwards 0.4s;
        font-size: 18px;
        margin:4px 0;
        opacity: 0;
    }

    header .open nav > i.fas{
        margin-top: 10px;
    }
    @keyframes slideDown {
        from{
            height: 0;
            opacity: 0;
        }   
        to{
            height: 100vh;
            padding-top: 80px;
            opacity: 1;
        }
    }
    /* 定义菜单项 下滑的效果 */
    @keyframes showMenu{
        from{
            opacity: 0;
            transform: translateY(-1vh);
        }
        to{
            opacity: 1;
            /* 到他原有的位置 */
            transform: translateY(0);
        }
    }

    .service-item .service-title {
        font-size: 20px;
    }
    
    .service-item .service-content {
        font-size: 14px;
        line-height: 24px;
    }

    .team-members{
        grid-template-columns: repeat(2,1fr);
        row-gap: 36px;
        column-gap: 6vw;
    }

    .activities{
        grid-template-columns: repeat(2,1fr);
        row-gap: 36px;
    }
}
/* 小于992px 生效 */
@media(max-width:992px){
    
    .slide-caption h1{
        font-size: 48px;
    }

    .slide-caption h3{
        font-size: 18px;
    }

    /*!
    unset 可以理解为不设置,其实他是inital与inherit结合
    当我们给一个css属性设置了unset的话：

        1,如果该属性默认继承属性，该值等同于inherit

        2,如果该属性是非继承属性，该值等同于initial
    
    inherit  继承, 随父级修改
    
    initial: 默认的颜色,不随继承的父级更改 显示为默认样式 比如字体 默认为黑色等 
    */

    .features, .services {
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: unset;
    }

    .data-section {
        /* 最小不超过200 最大不让他自增长 */
        grid-template-columns: repeat(2,minmax(200px,auto)); 
        padding:24px 0;
        height: auto;
        row-gap: 24px;
        background-size: 200%;
    }

    .showcases .case-item{
        /* !显示3列的方法 */
        width: calc(100vw / 3);
    }
}

/* 小于768 */
@media(max-width:768px){
    section, .footer-menus{
        padding: 0 40px;
    }

    .footer-menus{
        grid-template-columns: 2fr ,repeat(2,1fr);
        row-gap: 24px;
    }

    .contact-us{
    /* 内容占满 上边框是第一条网格线, 下边框是第3条网格线,的内容区域 */
        grid-row: 1 / 3; 
    }
    
    .footer-menu{
        text-align: right;
    }

    .activities{
        grid-template-columns: 1fr;
        row-gap: 36px;
    }
    .data-section {
        grid-template-columns: 1fr;
        background-size: 300%;
    }

    .team-members {
        grid-template-columns: minmax(200px,400px);
    }

    .features, .service {
        grid-template-columns: 1fr;
    }

    .showcases .case-item{
        width: calc(100vw/2);
        height: 30vw;

    }
}



/* 小于576时 最大576像素 */
@media(max-width:576px){

    .slide-caption h1 {
       font-size: 28px; 
    }

    .slide-caption h3{
        font-size: 14px;
    }

    .explore-btn{
        font-size: 14px;
        padding: 8px 18px;
    }

    .showcases .case-item {
        width: 100vw;
        height: 60vw;
    }

    .footer-menus{
        grid-template-columns: 1fr;
    }

    .footer-menu{
        justify-self: start;
        text-align: left;
    }
}