.header { position:fixed; left:0; right:0; top:0; width:100%; z-index:2000; background-color:transparent; }
.header .container { position:relative; }
.header .container h1 { padding:3rem 0; transition-duration:300ms; }
.header .container h1 a {  }
.header .container h1 a img { width:24.1rem; transition-duration:300ms; }

.header .container .gnb { position:absolute; top:50%; right:0; transform:translate(0, -50%); font-size:0; z-index:0; transition-duration:300ms; }
.header .container .gnb li { display:inline-block; position:relative; }
.header .container .gnb li a { display:block; font-size:2.2rem; padding:2rem 3rem; transition-duration:300ms; color:#ffffff; }
.header .container .gnb li:last-child a { padding-right:0; }
/* .header .container .gnb li a:hover ,
.header .container .gnb li a.active { color:var(--main-color); font-weight:700; } */

.header #mobile { position:absolute; top:50%; transform:translate(0, -50%); display:none; z-index:1000; }
.header #mobile:before,
.header #mobile:after,
.header #mobile span { position:absolute; display:block; right:0; top:50%; transform:translate(0, -50%); height:2px; background-color:#ffffff; transition-duration:100ms; }
.header #mobile:before ,
.header #mobile:after { content:''; width:100%; }

.header #mobile { width:3.1rem; height:3.1rem; }
.header #mobile:before,
.header #mobile:after,
.header #mobile span { width:3.1rem; }
.header #mobile:before { margin-top:-1.4rem; }
.header #mobile:after { margin-top:1.4rem; }

.header.small { background-color:rgba(0, 0, 0, 0.25); box-shadow:0 0 1.5rem rgba(0, 0, 0, 0.25); }
.header.small .container h1 { padding:2rem 0; }
.header.small .container h1 a img { width:16rem; }
.header.small .container .gnb li a { font-size:1.8rem; }

.header.small #mobile:before { margin-top:-1.1rem; }
.header.small #mobile:after { margin-top:1.1rem; }

.header.mobile #mobile span { opacity:0; }
.header.mobile #mobile:before ,
.header.mobile #mobile:after { margin-top:0; transform:translate(-50%, 0); }
.header.mobile #mobile:before { transform:rotate(45deg); }
.header.mobile #mobile:after { transform:rotate(-45deg); }

.aside { position:fixed; bottom:10.8rem; right:calc((100% - 1600px) / 2); z-index:2000; }
.aside ul {  }
.aside ul li { box-shadow:0 0 0.5rem rgba(0, 0, 0, 0.25); border-radius:50%; overflow:hidden; margin:0.9rem 0 0; }
.aside ul li a { display:block; background-color:#767676; width:5.6rem; height:5.6rem; position:relative; }
.aside ul li a.active { background-color:#3d7ebb; }
.aside ul li a img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:2.4rem; max-width:50%; }

@media screen and (max-width:1640px) {
    .header .container .gnb { right:20px; }

    .aside { right:20px; }
}

@media screen and (max-width:1280px) {
}

@media screen and (max-width:1024px) {
    .header .container .gnb { right:15px; }

    .aside { right:15px; }
}

@media screen and (max-width:768px) {
    .header .container .gnb { display:none; position:fixed; right:0; width:80%; max-width:360px; background-color:#333333; transform:none; top:107px; height:calc(100% - 107px); }
    .header .container .gnb li { display:block; position:relative; }
    .header .container .gnb li a { display:block; font-size:2.2rem; padding:2rem 3rem; transition-duration:300ms; color:#ffffff; border-bottom:1px solid #222222; }
    .header .container .gnb li:last-child a { padding-right:0; border:none; }

    .header #mobile { right:15px; display:block; }

    .header.small .container .gnb { top:73px; height:calc(100% - 73px); }

    .header.mobile { background-color:#222222; box-shadow:0 0 1.5rem rgba(0, 0, 0, 0.25); }
    .header.mobile .container .gnb { display:block; }
}

@media screen and (max-width:640px) {
    .header .container .gnb { top:94px; height:calc(100% - 94px); }

    .header #mobile { right:10px; }

    .header.small .container .gnb { top:64px; height:calc(100% - 64px); }

    .aside { right:10px; }
}