/* =====================
   IMAGE BLOCK
===================== */


.block-image img{

    display:block;
    width:100%;
}


/* 内缩图片
   Hero / Gallery同尺寸
*/

.block-image.inner{

    width:60%;
    margin:120px auto;
}



/* 满版图片 */

.block-image.full{

    width:100%;
}



/* multiply */

.block-image.full.multiply img{

    mix-blend-mode:multiply;

    opacity:.95;

}





/* =========================
TEXT MODULE
========================= */

.block-text{

    width:100%;

    font-size:18px;

    line-height:1.8;

    letter-spacing:.03em;

    margin-bottom:120px;

}


/* Intro */

.block-text.intro{

    font-size:20px;

    font-style:italic;

    font-weight:550;

}


/* Body */

.block-text.body{

    font-size:18px;

}



/* Info */

.block-text.info{

    max-width:100%;

    margin:120px auto;

    text-align:center;

    font-size:16px;

    line-height:1;

    letter-spacing:.03em;

}




/* Intro */

.block-text.intro{

    font-size:20px;

    font-style:italic;

    font-weight:550;

}



/* Body */

.block-text.body{

    width:100%;

    margin-left:auto;

    margin-right:auto;

    font-size:18px;

}




/* =========================
   SPECS
========================= */


.specs{

    text-align:center;

    font-size:16px;

    line-height:1.5;

    margin:60px auto 100px;

}


.specs div{

    margin-bottom:8px;

}





/* =========================
 GRID
========================= */


.grid-block{

    margin-bottom:120px;

}

.image-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:8px;

}



.image-grid img{

    width:100%;

    display:block;

    cursor:pointer;

}






/* =========================
 VIDEO
========================= */


/* 视频基础 */

.video-block video{

    width:100%;

    display:block;

}

/* =========================
VIDEO PLAY BUTTON
========================= */


.video-wrapper{

    position:relative;

    width:100%;

}


.video-wrapper video{

    width:100%;

    display:block;

}



.video-play{

    position:absolute;

    left:50%;

    top:50%;


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


    color:white;

    font-size:60px;


    line-height:1;


    cursor:pointer;


    z-index:10;


    text-shadow:
    0 2px 10px rgba(0,0,0,.5);


    transition:.3s;

}



.video-wrapper:hover .video-play{

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

}

/* 内缩视频 */

.video-block.inner{

    width:60%;

    margin:120px auto;

}


/* 满版视频 */

.video-block.full{

    width:100%;

}


/* =====================
TITLE MODULE
===================== */


.block-title{

    width:100%;

    font-weight:500;

    margin:120px auto 80px;

    letter-spacing:.05em;

}


/* size */

.block-title.large{

    font-size:42px;

}


.block-title.medium{

    font-size:36px;

}


.block-title.small{

    font-size:20px;

}


/* align */

.block-title.left{

    text-align:left;

}


.block-title.center{

    text-align:center;

}


.block-title.right{

    text-align:right;

}

/* =====================
PRODUCT MODULE
===================== */


.product-block{

    margin-bottom:220px;

}





/* =========================
IMAGE CAPTION
========================= */


.image-caption{

    margin-top:20px;

    font-size:14px;

    line-height:1.5;

    color:#808080;

    letter-spacing:0.03em;

}


.image-caption p{

    margin:0;

}


@media(max-width:768px){

    .image-caption{

        font-size:12px;

        margin-top:12px;

    }



.block-image.contained img{

    width:100%;

}



.image-grid{

    grid-template-columns:repeat(2,1fr);

}

.block-title{

    margin:60px auto 40px;

}

.block-title.large{

    font-size:20px;

}


.block-title.medium{

    font-size:17px;

}


.block-title.small{

    font-size:15px;

}

.block-image.inner{

    width:90%;

    margin:60px auto;

}


.block-image.full{

    width:100%;

}

.video-block.inner{

    width:90%;

    margin:60px auto;

}


.video-block.full{

    width:100%;

}

.video-play{

font-size:40px;

}

.block-text{

    font-size:15px;

    line-height:1.8;

    margin-bottom:70px;

}


.block-text.intro{

    font-size:13px;

}


.block-text.body{

    font-size:12px;

}


.block-text.info{

    font-size:11px;

    margin:60px auto;

}


}