header {
    @media (max-width: 1239px) {

        display: flex;
        position: relative;
        top: 0;
        width: 420px;
        z-index: 100;

        .pc {
            display: none;
        }

        .mobile {
            position: absolute;
            top: 40px;
            left: 10px;
            right: 0;
            margin: 0;
            width: 400px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;

            height: 56px;
        }

        .logo img {
            width: 128px;
            height: 39px;
        }

        .sausage {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            border-radius: 10px;
            width: 183px;
            height: 56px;

            padding-left: 20px;
            padding-right: 20px;

            box-sizing: border-box;

            background: linear-gradient(45deg, #161616, #0e0e0e) padding-box,
                linear-gradient(45deg, #4D4F51, #ffffff00) border-box;

            border: 1px solid transparent;
            backdrop-filter: blur(20px);
        }

        .option {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 14px;
            color: #fff;
        }

        .switch .close {
            display: none;
        }

        .switch .open {
            display: block;
        }

        .switch.active .close {
            display: block;
        }

        .switch.active .open {
            display: none;
        }

        .open {
            width: 25px;
            height: 13px;
        }

        .close {
            width: 19px;
            height: 19px;
        }

        .dropdown.active {
            display: block;
        }

        .dropdown {
            display: none;
            position: absolute;
            transform-origin: top right;
            justify-self: center;
            justify-content: center;

            z-index: 110;

            width: 420px;
            height: 300vh;
            top: 80px;

            backdrop-filter: blur(4px);
        }

        .block {
            width: 402px;
            height: 510px;
            padding: 10px;
            margin-right: 10px;

            box-sizing: border-box;
            justify-self: center;

            background-color: #0b0b0b;
        }

        .list {
            display: flex;
            flex-direction: column;
            gap: 40px;

            margin-top: 20px;
        }

        .list a {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 20px;
            color: #fff;

            text-decoration: none;
        }

        hr {
            margin-top: 35px;
            margin-bottom: 40px;
            height: 1px;
            border: none;
            background-color: #9d9d9d;
        }

        .extra {
            display: flex;
            flex-direction: column;
        }

        .email {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 20px;
            color: #fff;

            margin-bottom: 20px;
            text-decoration: none;
        }

        .phone {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 18px;
            color: #fff;

            margin-bottom: 50px;
            text-decoration: none;
        }

        .variants {
            display: flex;
            flex-direction: row;
            gap: 15px;
        }

        .lang {
            font-family: var(--font-family);
            font-weight: 400;
            font-size: 20px;
            color: #fff;

            text-decoration: none;
        }
    }

    @media (min-width: 1240px) {

        position: absolute;
        z-index: 100;

        justify-self: center;

        .pc {
            position: absolute;
            width: 100%;

            margin-top: 40px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .mobile {
            display: none;
        }

        .primary {
            display: flex;
            flex-direction: row;
            align-self: flex-start;

            height: 52px;
            gap: 40px;
        }

        .logo {
            width: 170px;
            height: 52px;
        }

        .logo img {
            width: 170px;
            height: 52px;
        }

        .language-dropdown {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 20px;
            color: #fff;

            display: flex;
            flex-direction: row;
            align-items: center;

            gap: 2px;

            cursor: pointer;
            user-select: none;
        }

        .dropbox {
            display: none;
            flex-direction: column;
            gap: 18px;

            padding-top: 23px;
            padding-bottom: 23px;
            padding-left: 39px;
            padding-right: 39px;

            background-color: #fff;
            border-radius: 10px;

            position: absolute;
            top: 50px;
            left: 210px;
        }

        .dropbox.active {
            display: flex;
        }

        .lang {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 20px;
            color: #000;

            text-decoration: none;
        }

        .lang:hover {
            color: #6170e2;
        }

        .sausage {
            display: flex;
            flex-direction: row;

            width: 840px;

            background: linear-gradient(45deg, #161616, #0e0e0e) padding-box,
                linear-gradient(45deg, #4D4F51, #ffffff00) border-box;

            border-radius: 20px;
            border: 1px solid transparent;

            backdrop-filter: blur(20px);
        }

        .menu {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            width: 516px;

            padding-top: 30px;
            padding-left: 30px;
            padding-bottom: 30px;
            padding-right: 96px;
        }

        .menu a {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 16px;
            color: #fff;

            text-decoration: none;
            cursor: pointer;
        }

        .menu a:hover {
            color: #6170E2;
        }

        .touch {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 16px;
            color: #000;

            padding-top: 30px;
            padding-bottom: 30px;
            padding-left: 52px;
            padding-right: 52px;

            border-radius: 20px;
            backdrop-filter: blur(20px);
            background-color: #fff;

            white-space: nowrap;
            cursor: pointer;
        }
    }
}