@charset "utf-8";

.site-header{
    position:fixed;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:9rem;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(0,0,0,.08);
    transition:height .25s ease, box-shadow .25s ease;
}

.site-header.is-open{
    height:29rem;
    box-shadow:0 2rem 4rem rgba(0,0,0,.08);
}

.header-inner{
    position:relative;
    z-index:2;
    width:min(100% - 8rem, 144rem);
    height:9rem;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo a{
    display:block;
    font-size:3.2rem;
    font-weight:800;
    letter-spacing:-.04em;
}

.gnb{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    height:9rem;
}

.depth1{
    display:flex;
    height:100%;
    align-items:center;
    gap:6rem;
}

.depth1>li{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
}

.depth1>li>a{
    display:flex;
    align-items:center;
    height:100%;
    font-size:1.8rem;
    font-weight:700;
    white-space:nowrap;
}

.depth2{
    position:absolute;
    top:9rem;
    left:50%;
    transform:translateX(-50%);
    min-width:14rem;
    padding:2rem 0 0;
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
    text-align:center;
}

.site-header.is-open .depth2,
.depth1>li:focus-within .depth2{
    opacity:1;
    visibility:visible;
}

.depth2 a{
    display:block;
    padding:.7rem 0;
    color:#555;
    font-size:1.5rem;
    white-space:nowrap;
}

.header-util{
    display:flex;
    align-items:center;
    gap:2.4rem;
    font-weight:700;
}

.all-menu-btn{
    width:3.8rem;
    height:3.8rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.6rem;
}

.all-menu-btn span{
    display:block;
    width:2.4rem;
    height:.2rem;
    background:#111;
}

.gnb-bg{
    position:absolute;
    top:9rem;
    left:0;
    width:100%;
    height:20rem;
    background:#fff;
    opacity:0;
    visibility:hidden;
    border-top:1px solid #eee;
}

.site-header.is-open .gnb-bg{
    opacity:1;
    visibility:visible;
}

.menu-dim{
    position:fixed;
    inset:0;
    z-index:190;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.menu-dim.is-active{
    opacity:1;
    visibility:visible;
}

.all-menu{
    position:fixed;
    top:0;
    right:0;
    z-index:200;
    width:min(52rem, 90vw);
    height:100vh;
    padding:4rem;
    background:#fff;
    transform:translateX(100%);
    transition:.3s ease;
    overflow-y:auto;
}

.all-menu.is-active{
    transform:translateX(0);
}

.all-menu-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:3rem;
    border-bottom:1px solid #ddd;
}

.all-menu-top strong{
    font-size:2.8rem;
    font-weight:800;
}

.all-menu-close{
    min-width:5.6rem;
    min-height:4.4rem;
    font-weight:700;
}

.all-menu-list>li{
    border-bottom:1px solid #eee;
}

.all-menu-list button{
    position:relative;
    width:100%;
    min-height:6.8rem;
    text-align:left;
    font-size:2.2rem;
    font-weight:800;
}

.all-menu-list button::after{
    content:"+";
    position:absolute;
    right:0;
}

.all-menu-list li.is-active button::after{
    content:"-";
}

.all-menu-list div{
    display:none;
    padding:0 0 2rem;
}

.all-menu-list li.is-active div{
    display:grid;
    gap:1rem;
}

.all-menu-list a{
    color:#555;
    font-size:1.7rem;
}

.section-pad{
    width:min(100% - 8rem, 144rem);
    margin:0 auto;
    padding:13rem 0;
}

.section-head{
    margin-bottom:5rem;
}

.section-head span,
.sustain-copy>span{
    display:block;
    margin-bottom:1.2rem;
    color:#0057a8;
    font-weight:800;
    letter-spacing:.28em;
    font-size:1.4rem;
}

.section-head h2{
    font-size:5rem;
    line-height:1.12;
    letter-spacing:-.06em;
}

.section-head.split{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:2rem;
}

.section-head.split>a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:10rem;
    height:4.6rem;
    border:1px solid #111;
    border-radius:10rem;
    font-weight:700;
}

.footer{
    background:#111;
    color:#fff;
}

.footer-inner{
    width:min(100% - 8rem, 144rem);
    margin:0 auto;
    padding:6rem 0;
}

.footer strong{
    display:block;
    margin-bottom:2rem;
    font-size:3rem;
}

.footer div div{
    display:flex;
    flex-wrap:wrap;
    gap:1.6rem 3rem;
    margin-bottom:2rem;
}

.footer p,
.footer small{
    color:#aaa;
}

@media (max-width:1439px){
    .header-inner,
    .section-pad,
    .footer-inner{width:min(100% - 6rem, 128rem);}
    .depth1{gap:4.2rem;}
    .section-head h2{font-size:4.4rem;}
}

@media (max-width:1279px){
    .site-header,
    .header-inner{height:7.6rem;}
    .site-header.is-open{height:7.6rem;}
    .gnb,.gnb-bg{display:none;}
    .logo a{font-size:2.8rem;}
    .section-pad{padding:10rem 0;}
}

@media (max-width:767px){
    .header-inner,
    .section-pad,
    .footer-inner{width:calc(100% - 3.2rem);}
    .site-header,
    .header-inner{height:6.6rem;}
    .logo a{font-size:2.3rem;}
    .header-util>a{display:none;}
    .all-menu{padding:2.4rem;width:100vw;}
    .section-pad{padding:7.2rem 0;}
    .section-head{margin-bottom:3rem;}
    .section-head h2{font-size:3.2rem;}
    .section-head.split{align-items:flex-start;flex-direction:column;}
}

@media (max-width:320px){
    .header-inner,
    .section-pad,
    .footer-inner{width:calc(100% - 2.4rem);}
    .section-head h2{font-size:2.8rem;}
}