@media screen and (min-width: 1050px) {

    body {

        margin: 0px;

    }

    .header-letter-wrap {

        background-color: #ffffff;

        position: fixed;

        width: 100%;

        border-style: none none solid none;

        border-width: 1px;

        border-color: #e5e5e5;

        box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);

    }

    .header-letter {

        display: flex;

        margin: 0 auto;

        padding: 30px 30px 10px 30px;

        width: 1000px;

    }

    #cp_toggle01 {

        display: none;

    }

    .hamburger {

        display: none;

    }

    .menu {

        list-style: none;

        display: flex;

        align-items: center;

        width: 700px;

        margin: 0;

    }

    .menu li {

        font-weight: 700;

    }

    .menu > li:first-child {

        width: 84px;

    }

    .menu > li {

        border-style: none none solid none;

        border-color: #ffffff;

        width: 14%;

        text-align: center;

    }

    .menu > li:hover {

        border-style: none none solid none;

        border-color: #b3ddf6;

        transition: 0.5s;

    }

    .menu ul {

        list-style: none;

    }

    .menu > li > div {

        display: none;

    }

    .menu > li:hover > div {

        display: block;

        position: absolute;

    }

    .menu > li > div:hover {

        display: block;

    }

    .menu > li:hover > div > ul {

        background-color: #ffffff;

        padding: 0;

    }

    .menu > li > div:hover > ul {

        background-color: #ffffff;

        padding: 0;

    }

    .menu > li:hover > div > ul > li {

        text-align: center;

        padding: 10px;

    }

    .menu > li > div:hover > ul > li {

        text-align: center;

    }

    .menu > li > div > ul > li:hover {

        background-color: #b3ddf6;

        transition: 0.5s;

    }

    .menu > li > div > ul > li > a {

        text-decoration: none;

        color: #0d0d0d;

    }

    .menu > li > a {

        text-decoration: none;

        color: #0d0d0d;

    }

}

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

    *, *:before, *:after {

        padding: 0;

        margin: 0;

        box-sizing: border-box;

    }

    ol, ul {

        list-style: none;

    }

    a {

        text-decoration: none;

        color: inherit;

    }

    .header-letter-wrap {

        height: 20vh;

    }

    .header-letter {

        position: absolute;

        top: 20px;

        left: 10px;

        display: inline-block;

    }

    /* menu */

    .header-letter .menu {

        position: fixed;

        top: 0;

        right: -100vw;

        width: 45%;

        height: 100%;

        cursor: pointer;

        -webkit-transition: 0.53s transform;

                transition: 0.53s transform;

        -webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);

                transition-timing-function: cubic-bezier(.38,.52,.23,.99);

        background-color: #607D8B;

        overflow-y: scroll;

    }

    .header-letter .menu::-webkit-scrollbar {

        width: 10px;

    }

    .header-letter .menu::-webkit-scrollbar-track {

        background: #fff;

        border: none;

        border-radius: 10px;

        box-shadow: inset 0 0 2px #777; 

    }

    .header-letter .menu::-webkit-scrollbar-thumb {

        background: #ccc;

        border-radius: 10px;

        box-shadow: none;

    }

    .header-letter .menu li div ul {

        margin: 0;

        padding: 0;

    }

    .header-letter > .menu > li {

        list-style: none;

        display: block;

        padding: 20px;

        text-decoration: none;

        color: #ffffff;

    }

    .header-letter > .menu > li > div > ul > li {

        list-style: none;

        display: block;

        padding: 20px 20px 20px 40px;

        text-decoration: none;

        color: #ffffff;

        border-bottom: 1px solid #ffffff;

    }

    .header-letter #cp_toggle01 {

        position: absolute;

        display: none;

        opacity: 0;

    }

    .header-letter #cp_toggle01:checked ~ .menu {

        -webkit-transform: translateX(-100vw);

                transform: translateX(-100vw);

    }

    /* menu toggle */

    .header-letter #cp_toggle01 ~ label {

        display: block;

        padding: 0.5em;

        cursor: pointer;

        -webkit-transition: 0.5s transform;

                transition: 0.5s transform;

        -webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);

                transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);

        text-align: right;

        color: #333333;

        position: absolute;

        top: 10px;

        left: 700px;

    }

    .header-letter #cp_toggle01:checked ~ label {

        -webkit-transform: translateX(-250px);

                transform: translateX(-250px);

    }

    /* contents */

    .hamburger {

        height: 40px;

    }

    .menu {

        z-index: 1;

    }

}

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

    .header-letter #cp_toggle01 ~ label {

        left: 650px;

}

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

    .header-letter #cp_toggle01 ~ label {

        left: 600px;

}

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

    .header-letter #cp_toggle01 ~ label {

        left: 500px;

}

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

    .header-letter .menu {

        width: 70%;

    }

    .header-letter #cp_toggle01 ~ label {

        position: absolute;

        top: 50px;

        left: 235px;

    }

}