.notFound{
    min-height:70vh;
    display:grid;
    place-content:center;
    text-align:center;
    padding:24px
}

.notFound p{
    font-size:12px;
    letter-spacing:.2em
}

.notFound h1{
    font:400 clamp(46px,12vw,80px)/.95 Georgia,serif;
    margin:10px 0 20px
}

.notFound span{
    font-size:13px;
    color:#7d858a
}

:root{
    --blue:#073c60;
    --deep:#052c47;
    --paper:#f7f7f3;
    --ink:#163546;
    --muted:#78868e;
    --line:rgba(7,60,96,.14);
    --serif:Georgia,"Times New Roman",serif
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif
}

a{
    color:inherit;
    text-decoration:none
}

.header{
    height:76px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--blue);
    border-bottom:1px solid #ffffff24;
    position:relative;
    z-index:5
}

.logoFrame{
    width:155px;
    height:52px;
    display:flex;
    align-items:center
}

.logoFrame img{
    display:block;
    width:150px;
    height:auto
}

.headerMeta{
    text-align:right;
    display:grid;
    gap:5px;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff
}

.headerMeta span{
    max-width:145px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.headerMeta b{
    font-weight:400;
    color:rgba(255,255,255,.55)
}

.catalog{
    padding:0 14px 54px
}

.catalogBar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--line)
}

.catalogBar p{
    margin:0;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.catalogBar p span{
    font-weight:700;
    letter-spacing:.16em;
    margin-right:10px
}

.catalogBar small{
    display:none
}

.productGrid{
    display:grid;
    gap:18px;
    padding-top:14px
}

.productCard{
    background:#fff;
    overflow:hidden;
    border:1px solid rgba(7,60,96,.09);
    box-shadow:0 12px 35px rgba(5,44,71,.06)
}

.productImage{
    position:relative;
    aspect-ratio:1/1.04;
    overflow:hidden;
    background:#dfe5e6
}

.productImage img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s ease
}

.productCard:hover .productImage img{
    transform:scale(1.015)
}

.imageShade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(5,44,71,0) 76%,
        rgba(5,44,71,.48)
    )
}

.colorTag{
    position:absolute;
    left:14px;
    bottom:14px;
    padding:7px 10px;
    border-radius:99px;
    background:rgba(247,247,243,.94);
    color:var(--blue);
    font-size:9px
}

.imageNo{
    position:absolute;
    right:14px;
    bottom:11px;
    font:26px var(--serif);
    color:#fff
}

.productInfo{
    padding:24px 20px
}

.code{
    font-size:13px;
    letter-spacing:.2em;
    margin:0;
    color:var(--blue)
}

.productTitle h2{
    font:400 clamp(32px,9vw,44px)/.9 var(--serif);
    letter-spacing:-.045em;
    margin:13px 0 8px;
    color:var(--blue)
}

.detail{
    font-size:11px;
    color:var(--muted);
    margin:0
}

.productCard dl{
    margin:25px 0 20px;
    border-top:1px solid var(--line)
}

.productCard dl div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:11px
}

.productCard dt{
    color:var(--muted)
}

.productCard dd{
    margin:0;
    font-weight:700;
    text-align:right
}

.request{
    background:var(--blue);
    color:#fff;
    padding:15px 17px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:10px;
    letter-spacing:.02em
}

.request span{
    font-size:15px
}

footer{
    padding:27px 18px;
    background:var(--deep);
    color:#fff;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:18px
}

.footerBrand{
    width:125px;
    overflow:hidden
}

.footerBrand img{
    width:120px;
    display:block
}

footer nav{
    display:flex;
    gap:15px;
    font-size:9px
}

footer p{
    grid-column:1/-1;
    margin:0;
    padding-top:14px;
    border-top:1px solid #ffffff1f;
    font-size:8px;
    opacity:.55
}

@media(min-width:860px){

    .header{
        height:112px;
        padding:0 5vw
    }

    .logoFrame{
        width:260px;
        height:82px
    }

    .logoFrame img{
        width:250px
    }

    .headerMeta{
        font-size:12px;
        gap:7px
    }

    .headerMeta span{
        max-width:320px;
        font-size:13px;
        letter-spacing:.04em
    }

    .headerMeta b{
        font-size:11px;
        letter-spacing:.12em
    }

    .catalog{
        padding:0 5vw 7vw
    }

    .catalogBar{
        height:88px
    }

    .catalogBar p{
        font-size:13px
    }

    .catalogBar p span{
        margin-right:18px
    }

    .catalogBar small{
        display:block;
        font-size:11px;
        color:var(--muted);
        letter-spacing:.08em
    }

    .productGrid{
        grid-template-columns:1fr;
        gap:42px;
        padding-top:42px
    }

    .productCard{
        display:grid;
        grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);
        min-height:620px
    }

    .productImage{
        aspect-ratio:auto;
        min-height:620px
    }

    .productInfo{
        padding:56px 48px;
        display:flex;
        flex-direction:column
    }

     .code{
        font-size:17px
    }

      .productTitle h2{
        font-size:clamp(48px,4vw,66px);
        margin:20px 0 14px
    }

    .detail{
        font-size:15px;
        line-height:1.55
    }

    .productCard dl{
        margin-top:46px
    }

    .productCard dl div{
        padding:17px 0;
        font-size:14px
    }

    .request{
        margin-top:auto;
        padding:19px 21px;
        font-size:13px
    }

    .colorTag{
        left:22px;
        bottom:22px;
        padding:10px 14px;
        font-size:12px
    }

    .imageNo{
        right:22px;
        bottom:17px;
        font-size:38px
    }

    .productCard:nth-child(even){
        grid-template-columns:minmax(390px,.8fr) minmax(0,1.2fr)
    }

    .productCard:nth-child(even) .productImage{
        order:2
    }

    footer{
        padding:34px 5vw;
        grid-template-columns:1fr auto auto
    }

    .footerBrand{
        width:220px
    }

    .footerBrand img{
        width:215px
    }

    footer nav{
        gap:34px;
        font-size:12px
    }

    footer p{
        grid-column:auto;
        border:0;
        padding:0;
        font-size:10px
    }
}

@media(min-width:1500px){

    .header{
        padding-left:6vw;
        padding-right:6vw
    }

    .catalog{
        padding-left:6vw;
        padding-right:6vw
    }

    .productCard{
        grid-template-columns:minmax(0,1.35fr) minmax(460px,.65fr);
        min-height:700px
    }

    .productImage{
        min-height:700px;
        max-height:50%
    }

    .productCard:nth-child(even){
        grid-template-columns:minmax(460px,.65fr) minmax(0,1.35fr)
    }

    .productInfo{
        padding:70px 64px
    }

      .productTitle h2{
        font-size:72px
    }

    .productCard dl div{
        font-size:15px
    }
}

@media(max-width:430px){

    .headerMeta span{
        max-width:115px
    }

    .catalog{
        padding-left:10px;
        padding-right:10px
    }

    .productGrid{
        gap:14px
    }

    .productInfo{
        padding:22px 17px
    }

    .productTitle h2{
        font-size:34px
    }
}