/* /assets/css/home.css */

/* HERO */

.hero-section{
    position:relative;

    width:100%;
    height:100vh;

    display:flex;
    align-items:center;

    padding-left:8vw;

    overflow:hidden;
}

.hero-content{
    position:relative;

    z-index:5;
}

.hero-subtitle{
    display:block;

    margin-bottom:24px;

    font-size:18px;

    color:#222;
}

.hero-content h1{
    font-size:110px;

    line-height:1.15;

    font-weight:300;

    letter-spacing:2px;
}

.hero-content p{
    margin-top:40px;

    font-size:26px;

    color:#6d6d6d;

    font-family:
    'Cormorant Garamond',
    serif;
}

/* 中央圆 */

.hero-center-circle{
    position:absolute;

    top:50%;
    left:52%;

    transform:translate(-50%,-50%);

    width:420px;
    height:420px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.05);
}

.inner-circle{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:120px;
    height:120px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.08);
}

/* 右下方块 */

.hero-square{
    position:absolute;

    right:12%;
    bottom:10%;

    width:180px;
    height:180px;

    background:#8d3327;
}

.square-dot{
    position:absolute;

    right:18px;
    bottom:18px;

    width:36px;
    height:36px;

    border-radius:50%;

    background:#fff;
}

/* 第二屏 */

.philosophy-section{
    position:relative;

    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:0 10vw;
}

.section-number{
    position:absolute;

    top:120px;
    left:10vw;

    font-size:14px;

    color:#999;
}

.section-content h2{
    font-size:72px;

    font-weight:300;

    margin-bottom:32px;
}

.section-content p{
    font-size:24px;

    line-height:2;
}

/* 图片区域 */

.image-section{
    width:100%;
    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:120px 0;
}

.image-box img{
    width:680px;

    max-width:90vw;

    display:block;
}

.image-text{
    margin-top:48px;

    text-align:center;
}

.image-text span{
    font-size:14px;

    letter-spacing:6px;

    color:#999;
}

.image-text h2{
    margin-top:24px;

    font-size:56px;

    font-weight:300;
}

/* 最后一屏 */

.closing-section{
    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.closing-en{
    margin-bottom:24px;

    font-size:18px;

    letter-spacing:4px;

    color:#888;
}

.closing-content h2{
    font-size:88px;

    font-weight:300;
}

/* 手机 */

@media (max-width:768px){

    .hero-section{
        padding:120px 8vw 0;
    }

    .hero-content h1{
        font-size:56px;
    }

    .hero-content p{
        font-size:18px;
    }

    .hero-square{
        width:100px;
        height:100px;

        right:8%;
        bottom:8%;
    }

    .square-dot{
        width:24px;
        height:24px;
    }

    .section-content h2{
        font-size:42px;
    }

    .section-content p{
        font-size:18px;
    }

    .image-text h2{
        font-size:36px;
    }

    .closing-content h2{
        font-size:48px;
    }

}