html {
    font-size: calc(100vw / 1920 * 10)
}

body {
    background-color: #000000;
}

.header {
    padding: 0 18rem;
    width: 100%;
    background-size: cover;
    position: relative;
    background-image: url(../images/background-section-header.webp);
}

.header-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 3.5rem 0;
    z-index: 2;
    position: relative;
}

.header-top img {
    width: 22.3rem;
    height: 7.8rem;
    cursor: pointer;
}

h1 {
    font-family: Furore;
    font-size: 3rem;
    font-weight: 400;
    color: #ffffff;
}

h1 span {
    color: #ffb600;
}

h2 {
    font-family: Furore;
    font-size: 2rem;
    font-weight: 400;
    color: #ffffff;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gift {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 11.4rem;
    z-index: 2;
    position: relative;
    margin-top: -2.3rem;
}

.gift-text {
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: fit-content;
}

.gift-none {
    font-family: Russo One;
    text-transform: uppercase;
    Line-height: 9.1rem;
    letter-spacing: 0.2rem;
}

.gift-gradient {
    background: linear-gradient(90deg, rgb(144, 221, 240),rgb(227, 150, 77));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Russo One;
    text-transform: uppercase;
    Line-height: 9.1rem;
    letter-spacing: 0.2rem;
}

.gift h1 {
    font-size: 7rem;
}

.gift img {
    width: 42.1rem;
    height: 23.4rem;
}

.beginner {
    padding-bottom: 13rem;
    z-index: 2;
    position: relative;
}

.beginner-text {
    display: flex;
    flex-direction: column;
}

.beginner-text h1 {
    font-size: 2.4rem;
    font-family: Russo One;
    text-transform: uppercase;
    Line-height:3.12rem;
    letter-spacing: 0.1rem;
    Size: 2.2px !important;
    margin-top: -0.5rem;
    margin-bottom: 0.7rem;
}

.beginner-text img{
    width: 26rem;
    height: 8.8rem;
}

.feedback {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    position: relative;
}

.feedback-left {
    display: flex;
    flex-direction: column;
}

.feedback-left h1 {
    font-family: Russo One;
    font-size: 1.8rem;
    text-align: center;
}

.feedback-left h1 span {
    color: #61c3e5;
}

.feedback-left img{
    width: 42.9rem;
    height: 15.4rem;
    cursor: pointer;
}

.feedback-right {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-top: -2.2rem;
    margin-left: -5.5rem;
}

.feedback-right h1 {
    font-size: 2rem;
    font-family: Advent Pro;
    font-weight: 500;
    width: 30rem;
    font-family: Russo One;
    text-transform: uppercase;
    Line-height: 3.12rem;
    letter-spacing: 0.1rem;
    Size: 2.2rem !important;
    margin-top: -0.5rem;
    margin-bottom: 0.7rem;
}

.feedback-right h1 span{
    color: #61c3e5;
}

.man-background {
    position: absolute;
    width: 70%;
    height: 110.9rem;
    top: 20rem;
    left: 44rem;
    background-image: url(../images/man2.webp);
    background-repeat: no-repeat;
    pointer-events: all;
    background-size: 113.3rem;
    z-index: 1;
}

.man-background2 {
    position: absolute;
    width: 70%;
    height: 110.9rem;
    top: 20rem;
    left: 44rem;
    background-image: url(../images/Group48.webp);
    background-repeat: no-repeat;
    pointer-events: all;
    background-size: 113.3rem;
    z-index: 1;
}

.fire-background {
    position: absolute;
    width: 100%;
    height: 110.9rem;
    top: 0;
    left: 0;
    background-image: url(../images/b7e0a8b259d740820c57635493ef0826.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -10rem;
    background-position-x: -50rem;
    pointer-events: all;
    opacity: 0.5;
}

.guitar {
    display: flex;
    flex-direction: column;
    gap: 20rem;
    padding: 19rem 15rem 0 15rem;
    align-items: end;
    position: relative;
    background-image: url(../images/57.webp);
    background-size: 148.3rem;
    background-repeat: no-repeat;
    background-position-x: 42rem;
    background-position-y: -7rem;
    z-index: 1;
}

.guitar-h1 {
    width: fit-content;
    z-index: 2;
    margin-right: 13rem;
}

.guitar-h1 h1 {
    font-size: 5rem;
    font-family: Russo One;
}

.guitar-h1 h1 span{
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.guitar-h2 {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    z-index: 2;
    margin-right: 25rem;
}

.guitar-h2 h1 {
    font-size: 2rem;
    font-family: Advent Pro;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 0%;
}

.guitar-h2 h1 .blue {
    color: #61c3e5;
}

.guitar-h2 h1 .orange {
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.guitar-img {
    background-size: cover;
    position: absolute;
    width: 188.8rem;
    height: 190.5rem;
    z-index: 1;
}

.guitar-red {
    background-image: url(../images/guitarred.webp);
    top: -47rem;
    left: -21rem;
}

.guitar-black {
    background-image: url(../images/guitarblack.webp);
    top: -20rem;
    left: -21rem;
}

.feedback-anim {
    display: flex;
    align-items: center;
}

.feedback-anim img {
    width: 8.4rem;
    height: 8.4rem;
}

.premium {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 6rem;
    padding: 0 7.5rem;
    width: 100%;
    height: 100%;
    top: 180rem;
}

.premium-guitar {
    position: absolute;
    background-image: url(../images/washburn.webp);
    background-size: 100%;
    background-position-x: 7rem;
    background-repeat: no-repeat;
    width: 188.8rem;
    height: 193.6rem;
}

.premium h1 {
    white-space: pre-line;
    z-index: 2;
    font-size: 5rem;
    margin-right: 15rem;
    margin-top: 30rem;
    font-family: Russo One;
}

.premium h1 span{
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.advantages {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: absolute;
    top: 58rem;
    left: 107rem;
}

.adv-in {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

.adv-in h1 {
    white-space: pre-line;
    font-family: Russo One;
    font-size: 2.4rem;
    margin-right: unset;
    margin-top: unset;
    color: #ffffff;
    font-weight: 400;
}

.adv-in h2 {
    color: #ffffff;
    font-family: Inter;
    font-size: 2rem;
    white-space: pre-line;
}

.adv-in img {
    height: 2.8rem;
    max-width: fit-content;
    width: auto;
}

.advantages img {
    z-index: 2;
    height: 75rem;
}

.video {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120rem;
    background-image: url(../images/bg2.webp);
    background-size: cover;
    gap: 4.5rem;
    margin-bottom: 15rem;
}

.video video {
    width: 109rem;
    height: 62rem;
    border: 1rem solid rgb(95, 171, 197);
    border-radius: 4rem;
}

.video-text {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    z-index: 2;
}

.video-text h1 {
    font-family: Russo One;
    text-align: center;
    font-size: 5rem;
}

.video-text h2 {
    font-family: Russo One;
    text-align: center;
}

.video img {
    width: 109rem;
    height: 64rem;
}

.video-text-mini h1 {
    font-size: 1.4rem;
    font-family: Russo One;
    text-align: center;
}

.video-text-mini h1 span {
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.button-video {
    width: 42.9rem !important;
    height: 15.4rem !important;
    cursor: pointer;
}

.complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    background-image: url(../images/guitarback.webp);
    background-size: cover;
    background-position-y: -20rem;
    background-position-x: -25rem;
    background-repeat: no-repeat;
    position: relative;
}

.complete-text h1 {
    font-family: Russo One;
    text-align: center;
    font-size: 5rem;
    text-transform: uppercase;
}

.complete-text h1 span{
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.complete img {
    width: 164.1rem;
    height: 109.9rem;
    z-index: 50;
}

.complete-text-mini h1 {
    font-size: 1.4rem;
    font-family: Russo One;
    text-align: center;
}

.complete-text-mini h1 span {
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.btn-video {
    width: 46.9rem !important;
    height: 15.4rem !important;
    cursor: pointer;
}

.design {
    display: flex;
    flex-direction: column;
    align-items: end;
    background-image: url(../images/design-back.webp);
    background-size: 156.1rem;
    background-repeat: no-repeat;
    background-position-x: -28rem;
    background-position-y: -16rem;
    gap: 5rem;
    position: relative;
}

.gif-fire {
    opacity: 0.3;
    width: 61rem;
    height: 52rem;
    position: absolute;
    left: 0;
    bottom: 30rem;
    z-index: 1;
    object-fit: cover;
}

.guitar-design {
    width: 73.1rem;
    height: 109.8rem;
    position: absolute;
    left: 0;
    bottom: 27rem;
    z-index: 2;
}

.design-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.design-text h1 {
    font-family: Russo One !important;
    font-size: 5rem !important;
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.design-text h2 {
    font-family: Russo One;
    font-size: 2.4rem !important;
}

.design h1 {
    font-size: 1.8rem;
    font-family: Advent Pro;
}

.design h2 {
    font-size: 1.8rem;
}

.design-right {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 15rem 22.8rem 43rem 0;
}

.design-result {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.design-result .design-result-img {
    width: 8.2rem !important;
    height: 8.2rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.design-result h1 {
    font-family: Advent Pro;
    font-size: 1.8rem;
}

.design-result h1 span {
    color: #61c3e5;
}

.design-description {
    display: flex;
    width: fit-content;
    align-items: start;
}

.design-description h1 {
    margin: 0 3rem;
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-family: Russo One;
    text-align: center;
}

.design-description img {
    width: 2rem !important;
    height: 2rem !important;
}

.design-right img {
    width: 54.5rem;
    height: 15.4rem;
    cursor: pointer;
}

.design-result-img img {
    width: 100%;
    height: auto;
}

.music {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    margin-bottom: 15rem;
}

.music img {
    width: 155.8rem;
    height: 85.2rem;
}

.music h1 {
    font-size: 5rem;
    font-family: Russo One;
    text-transform: uppercase;
}

.prem {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../images/prem-back.webp);
    background-size: 156.9rem;
    background-position-x: 14rem;
    background-repeat: no-repeat;
    position: relative;
}

.prem h1 {
    font-size: 5rem;
    text-align: center;
    font-family: Russo One;
    text-transform: uppercase;
}

.prem-elements {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
}

.prem-flex {
    display: flex;
    justify-content: space-between;
    margin: 0 18rem;
}

.prem-margin {
    margin: 0 25rem;
}

.prem-element {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 40rem;
}

.prem-element img {
    
}

.prem-element h2 {
    font-family: Russo One;
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
}

.prem-element p {
    font-family: Advent Pro;
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.prem-element span {
    color: rgb(97, 195, 229);
}

.footer h1 {
    font-size: 5rem;
    text-align: center;
    font-family: Russo One;
    text-transform: uppercase;
}

.footer h2 {
    font-size: 2.4rem;
    text-align: center;
}

.footer h2 span {
    color: #61c3e5;
}

.chehol {
    position: absolute;
    width: 32.6rem !important;
    height: 78.5rem !important;
    top: 15rem;
    left: 63rem;
    z-index: 1 !important;
    filter: grayscale(100%);
}

.chehol:hover {
    filter: unset;
}

.footer-base {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.footer-left h1 {
    font-size: 5rem;
    font-family: Russo One;
    background: linear-gradient(90deg, rgb(255, 213, 62),rgb(212, 63, 16));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    text-align: start;
}

.footer-left h2 {
    text-align: start;
}

.footer {
    background-image: url(../images/footer-back.webp);
    background-repeat: no-repeat;
    background-size: 306.4rem;
    background-position-x: -36rem;
    background-position-y: 39rem;
    margin-top: 156rem;
}

.footer-left img {
    width: 65.2rem;
    height: auto;
    margin-left: 5rem;
    z-index: 2;
    left: 47rem;
    top: 0rem;
}

.footer-right {
    display: flex;
}

.detail-prem-detail {
    width: 8.2rem;
}

.detail-prem-detail img {
    width: 100%;
    margin: unset;
}

.prem-detail h3 {
    font-family: Advent Pro !important;
    font-size: 3rem !important;
    color: #C5C5C5;
    font-weight: 500;
    line-height: 130%;
}

.prem-detail h3 span {
    color: #61C3E5;
}

.prem-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-prem {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-left {
    margin-left: 18rem;
    position: relative;
    z-index: 2;
}

.guitar-footer {
    position: absolute;
    margin: unset !important;
    top: -9rem;
    right: -28rem;
    width: 84.9rem;
    height: 128.8rem;
}

.input-footer {
    background-image: url(../images/inputs.webp);
    background-size: 44.7rem;
    width: 44.7rem !important;
    height: 59.4rem !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.input-footer input {
    border: 0.1rem solid rgba(255, 255, 255, 0.2);
   /* background: rgba(255, 255, 255, 0.2); */
    border-radius: 4rem;
    width: 34.7rem;
    height: 7.8rem;
    padding: 2.8rem 2rem;
    color: #ffffff !important;
    font-family: Inter;
    font-size: 1.6rem;
}

.input-footer {
    width: 34.7rem;
    height: 12.4rem;
}

.input-checkbox {
    display: flex;
    gap: 1rem;
}

.input-checkbox input {
    width: 1.7rem;
    height: 1.7rem;
}

.input-checkbox p {
    color: #b0b0b0;
    font-size: 1.2rem;
    font-family: Inter; 
}

.input-checkbox p a {
    color: #60c1e3;
}

.input-footer img {
    width: 34.7rem;
    height: 12.4rem;
    cursor: pointer;
}

.virtuoso {
    background-image: url(../images/virtuoso/bg.webp);
    background-size: cover;
    background-color: #00070D;
    padding-bottom: 125rem;
    position: relative;
}

.virtuoso h1 {
    font-family: Oswald;
    color: #ffb600;
    font-size: 5.6rem;
}

.virtuoso h1 span {
    color: transparent;
    -webkit-background-clip: text;
	background-clip: text;
    background-image: linear-gradient(180deg, #ffffff, #ffffff00);
}

.virtuoso-text {
    padding: 13rem 0 0 96rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.virtuoso-advantages {
    display: flex;
    gap: 1rem;
    width: 66rem;
}

.virtuoso-advantages img {
    width: 2.4rem;
    height: 2.4rem;
}

.virtuoso-advantages p {
    font-family: Inter;
    color: #ffffff;
    font-weight: 700;
    font-size: 2rem;
}

.virtuoso-advantages p span{
    color: #c5c5c5;
    font-weight: 400;
}

.virtuoso-btn {
    display: flex;
    gap: 2rem;
}

.virtuoso-btn button {
    font-family: Inter;
    font-size: 1.8rem;
    font-weight: 400;
    padding: 1.6rem 3.2rem 1.6rem 3.2rem;
    border: 0.1rem solid rgb(255, 182, 0);
    color: #ffffff;
    border-radius: 10rem;
}

.virtuoso-btn p {
    font-family: Inter;
    color: #ffffff;
    font-size: 1.4rem;
    width: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.virtuoso-btn p span{
    color: #ffb600;
}

.virtuoso-text h2 {
    color: #ffb600;
    font-family: Oswald;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 130%;
    width: 30rem;
    margin-top: 3.5rem;
}

.virtuoso-open {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 28rem 0 0 20rem;
}

.virtuoso-open h1 {
    color: #ffffff;
    font-family: Oswald;
    font-size: 3.6rem;
    font-weight: 400;
    width: 62rem;
}

.virtuoso-open-advantages {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.virtuoso-open-advantages p {
    color: #ffffff;
    font-family: Inter;
    font-size: 2rem;
    font-weight: 400;
    width: 75rem;
}

.virtuoso a {
    color: #ffb600;
    position: absolute;
    font-family: Inter;
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration-line: underline;
    top: 1rem;
    right: 23rem;
}

.photos {
    padding: 0 22.8rem;
    width: 100%;
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(2, 1fr);
}

.p1 {
    width: 76.4rem;
    height: 41.1rem;
    transition: all 0.5s ease-out;
    background-image: url(../images/photos/p1.webp);
    background-size: cover;
}

.p1:hover {
    background-image: url(../images/photos/p1.webp);
    transition: all 0.5s ease-out;
}

.p2 {
    width: 76.4rem;
    height: 41.1rem;
    transition: all 0.5s ease-out;
    background-image: url(../images/photos/p2.webp);
    background-size: cover;
}

.p2:hover {
    background-image: url(../images/photos/p2.webp);
    transition: all 0.5s ease-out;
}

.p3 {
    width: 76.4rem;
    height: 41.1rem;
    transition: all 0.5s ease-out;
    background-image: url(../images/photos/p3.webp);
    background-size: cover;
}

.p3:hover {
    background-image: url(../images/photos/p3.webp);
    transition: all 0.5s ease-out;
}

.p4 {
    width: 76.4rem;
    height: 41.1rem;
    transition: all 0.5s ease-out;
    background-image: url(../images/photos/p4.webp);
    background-size: cover;
}

.p4:hover {
    background-image: url(../images/photos/p4.webp);
    transition: all 0.5s ease-out;
}

.gif-fire2 {
    margin: unset !important;
    width: 218.6rem !important;
    height: 103.2rem !important;
    position: absolute;
    z-index: 1;
    background-image: url(../images/b7e0a8b259d740820c57635493ef0826.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 4rem;
    top: -19rem;
    right: 0rem;
    opacity: 0.5;
}

.gif-fire-mini {
    margin: unset !important;
    width: 41rem !important;
    height: 23.1rem !important;
    position: absolute;
    z-index: 1;
    background-image: url(../images/c43d301059085ba26d07345cc3dafa63.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: -20rem;
    top: 54rem;
    right: 38rem;
    opacity: 0.3;
}

.bg-border {
    margin: unset !important;
    width: 100% !important;
    height: 4rem !important;
    position: absolute;
    z-index: 1;
    background-image: url(../images/bg.webp);
    background-position-x: -20rem;
    top: -23rem;
    right: 0;

}

.footer-down {
    padding: 2rem 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-down h1{
    font-size: 1.2rem !important;
    font-weight: 300;
    color: #ffffff;
    font-family: Inter;
}

.footer-down h1 span{
    font-size: 1.2rem !important;
    font-weight: 500;
    color: #ffffff;
}

.footer-down img {
    width: 21.5rem;
    height: 4.5rem;
    cursor: pointer;
}

.header-cosmos {
    background-image: url(../images/musor/header-back.webp);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 34rem;
}

.cosmos-text h1 {
    font-size: 4.8rem;
    font-weight: 700;
    font-family: Oswald;
    line-height: 130%;
    text-transform: uppercase;
}

.cosmos-text .cosmos-span {
    color: #ffb600;
    font-weight: 500;
    font-size: 3.6rem;
}

.text-lightning {
    display: flex;
    gap: 1.5rem;
}

.text-lightning img {
    width: 1.32rem !important;
    height: 2.4rem !important;
}

.text-lightning p {
    font-family: Inter;
    font-size: 2rem;
    font-weight: 500;
    color: #ffffff;
}

.text-lightning p span{
    font-weight: 400;
    color: rgb(197, 197, 197);
}

.cosmos-text {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 10rem 0 0 20rem;
}

.cosmos-btn img {
    width: 21.1rem !important;
    height: 5.3rem !important;
    cursor: pointer;
}

.cosmos-btn p {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 1.4rem;
    font-weight: 400;
}

.cosmos-btn {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-cosmos img {
    width: 105.93rem;
    height: 87.6rem;
}

.cosmonaft {
    position: absolute;
    top: 6rem;
    right: 0rem;
}

.open {
    background-image: url(../images/musor/mask.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    top: 2076rem;
    z-index: 2;
}

.open img {
    width: 149rem;
    height: auto;
    margin-bottom: 9rem;
    border: red solid 2rem;
    border-radius: 1.5rem;
}

.open h1 {
    font-family: Oswald;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 130%;
}

.open h2 {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 2rem;
    font-weight: 400;
    line-height: 140%;
}

.open-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 39rem;
    margin-bottom: 16rem;
}

.cosmos-footer {
    background-image: url(../images/musor/cosmos-bottom.webp);
    background-size: cover;
    background-position-x: -2rem;
    background-position-y: -33rem;
    background-repeat: no-repeat;
    width: 174.63rem;
    height: 154.4rem;
    margin-top: 133rem;
}

.callback {
    width: 18.6rem;
    height: 4.4rem;
    position: absolute;
    left: 148.8rem;
    top: 1.4rem;
    cursor: pointer;
}

.header-cosmos-2 {
    background-image: url(../images/musor/mask-back.webp) !important;
    background-size: 220.6rem;
    background-position-y: -44rem;
    background-position-x: 21rem;
}

.header-cosmos-2 .cosmonaft {
    width: 82rem;
    height: 90.16rem;
    margin-right: 15rem;
    z-index: 1;
}

.q1 {
    width: 22.3rem;
    height: 7.8rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/1.webp);
    background-size: cover;
}

.q1:hover {
    background-image: url(../images/btn/1q.webp);
    transition: all 0.5s ease-out;
}

.q2 {
    width: 42.9rem;
    height: 15.4rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/2.webp);
    background-size: cover;
}

.q2:hover {
    background-image: url(../images/btn/2q.webp);
    transition: all 0.5s ease-out;
}

.q3 {
    width: 42.9rem;
    height: 15.4rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/3.webp);
    background-size: cover;
}

.q3:hover {
    background-image: url(../images/btn/3q.webp);
    transition: all 0.5s ease-out;
}

.q4 {
    width: 46.9rem;
    height: 15.4rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/4.webp);
    background-size: cover;
}

.q4:hover {
    background-image: url(../images/btn/4q.webp);
    transition: all 0.5s ease-out;
}

.q5 {
    width: 54.5rem;
    height: 15.4rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/5.webp);
    background-size: cover;
}

.q5:hover {
    background-image: url(../images/btn/5q.webp);
    transition: all 0.5s ease-out;
}

.q6 {
    width: 40.4rem;
    height: 13.5rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/6.webp);
    background-size: cover;
    position: absolute;
    bottom: 9.2rem;
    right: 24.7rem;
}

.q6:hover {
    background-image: url(../images/btn/6q.webp);
    transition: all 0.5s ease-out;
}

.q7 {
    width: 34.7rem;
    height: 12.4rem;
    cursor: pointer;
    transition: all 0.5s ease-out;
    background-image: url(../images/btn/7.webp);
    background-size: cover;
}

.q7:hover {
    background-image: url(../images/btn/7q.webp);
    transition: all 0.5s ease-out;
}

.fb {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080;
    position:fixed;
    z-index: 998;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.fb .input-footer {
    background-image: url(../images/bg-gray.webp);
    position: sticky;
}

.cross {
    background-image: url(../images/cross.webp);
    background-size: cover;
    width: 2rem;
    height: 2rem;
    margin-left: 34rem;
    margin-bottom: 1rem;
}

.input-footer-fb {
    opacity: 0;
    z-index: 999;
}

.video-pc {
    display: flex;
}

.sponsor-mob {
    display: none;
}

.sponsor-pc {
    display: flex;
    flex-direction: column;
}

.pc {
    display: flex;
}

.mob {
    display: none;
}

.video-pc {
    display: flex;
}

.video-mob {
    display: none;
}

@media screen and (max-width: 777px) {
    html {
        font-size: calc(100vw / 400 * 10)
    }

    .guitar-h1 {
        margin-right: 11rem;
    }

    .pc {
        display: none;
    }

    .mob {
        display: flex;
    }

    .header {
        padding: 0 1rem;
    }

    .header-top {
        padding: 1.5rem 0;
        margin-bottom: 2rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1rem;
    }

    .q1 {
        width: 13.3rem;
        height: unset;
    }

    .gift {
        padding-bottom: 1rem;
    }

    .gift h1 {
        font-size: 3rem;
    }

    .gift-none, .gift-gradient {
        Line-height: unset;
        letter-spacing: unset;
    }

    .gift img {
        width: 12rem; 
        height: auto; 
    }

    .prem-flex-center {
        justify-content: center !important;
    }

    .man-background {
        width: 36rem;
        background-size: 38.3rem;
        top: 21rem !important;
        left: 2rem !important;
    }

    .beginner-text h1 {
        font-size: 1.5rem;
        margin-bottom: unset;
    }

    .beginner-text img {
        width: 16rem;
        height: auto;
    }
    
    .feedback {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .feedback-right {
        margin-top: 16.8rem;
        margin-left: unset;
        gap: 2rem;
    }

    .feedback-right h1 {
        font-size: 1.5rem;
        Line-height: 2rem;
        margin-bottom: unset;
        margin-top: unset;
    }

    .feedback-anim img {
        width: 3rem;
        height: unset;
    }

    .q2 {
        height: 9rem;
        width: auto;
    }

    .fire-background {
        background-position-y: -4rem;
        background-position-x: -52rem;
        height: 56rem;
    }
    
    .logo-text {
        padding-bottom: 2rem;
    }

    .feedback-left h1 {
        font-size: 1.4rem;
    }

    .guitar {
        padding: 0 1rem;
    }

    .guitar-h1 h1 {
        font-size: 2rem;
    }

    .guitar-h2 h1 {
        font-size: 2rem !important;
    }

    .guitar-h2 {
        font-size: 2rem !important;
        margin-right: unset;
        gap: 1rem;
    }

    .guitar-img {
        width: 43.8rem;
        height: 50.5rem;
    }

    .guitar-black {
        top: -1rem;
        left: -8rem;
        width: 46rem;
    }

    .premium h1 {
        font-size: 3rem;
        margin-right: unset;
        margin-top: unset;
    }

    .premium { 
        padding: 0 1rem;
    }

    .premium-guitar {
        background-position-x: 26rem;
        background-position-y: 20rem;
        background-repeat: no-repeat;
        width: 67.8rem;
        height: 178.6rem;
        background-image: url(../images/washburn2.webp);
    }

    .advantages img {
        height: 50rem;
    }

    .advantages {
        top: 70rem;
        left: 1rem;
        width: 95%;
        height: 15rem;
    }

    .header-orange {
        margin-top: 124rem !important;
    }

    .man-background2 {
        width: 36rem;
        background-size: 38.3rem;
        top: 22rem !important;
        left: 1rem !important;
    }

    .guitar-red {
        top: -10rem;
        left: -7rem;
    }

    .video {
        margin-top: 5rem !important;
        gap: 1.5rem;
    }

    .video-text h1 {
        font-size: 2rem;
    }

    .video-text {
        gap: 1rem;
    }

    .video-pc {
        display: none;
    }
    
    .video-mob {
        display: flex;
    }

    .q3 {
        width: 17.9rem;
        height: 6.4rem;
    }

    .complete {
        padding: 0 1rem;
    }

    .complete-text h1 {
        font-size: 3rem;
    }

    .complete img {
        width: auto;
        height: 35rem;
    }

    .q4 {
        width: 17.9rem;
        height: 6.4rem;
    }

    .design {
        padding: 0 1rem;
        background-size: 92.1rem;
        background-position-x: -25rem;
        background-position-y: -36rem;
    }

    .design-text h1 {
        font-size: 3rem !important;
    }

    .design-text h2 {
        font-size: 1.5rem;
    }

    .design-right {
        margin: unset;
        gap: 1rem;
        margin-top: 40rem;
        align-items: center;
    }

    .design-description h1 {
        margin: unset;
    }

    .q5 {
        width: 17.9rem;
        height: 6.4rem;
    }

    .guitar-design {
        width: 30rem;
        height: auto;
        top: -5rem;
    }

    .gif-fire {
        bottom: 70rem;
    }

    .design-result-img img {
        width: 4rem;
    }

    .design-result {
        width: 100%;
    }

    .q5 {
        width: 24rem;
    }

    .virtuoso {
        padding: 0 1rem;
        background-position-x: -10rem;
        background-size: 110rem;
        background-repeat: no-repeat;
    }

    .virtuoso-text {
        gap: 1rem;
        padding: unset;
        padding-top: 51rem;
    }

    .virtuoso h1 {
        font-size: 2.5rem;
    }

    .virtuoso-btn button {
        background-color: #000000b3;
        padding: 0.8rem 1rem;
        font-size: 1.4rem;
    }

    .virtuoso-open {
        padding: 68rem 0 0 0;
    }

    .music {
        padding: 0 1rem;
    }

    .music h1 {
        font-size: 2.5rem;
        
    }

    .virtuoso-open-advantages p{
        width: 36rem;
    }

    table tbody tr td div img {
        margin-left: 4.5rem !important;
    }

    .music img {
        height: auto;
    }

    .virtuoso-advantages {
        width: 37rem;
    }

    .prem h1 {
        font-size: 2.5rem;
        margin-bottom: 43rem;
    }

    .prem img {
        height: unset;
    }

    .q6 {
        width: 37rem;
        height: 12rem;
        bottom: 6rem;
        right: 1.5rem;
    }

    .cosmos-text {
        padding: 91rem 0 0 4rem;
    }

    .cosmos-text h1 {
        font-size: 2.5rem;
    }

    .header-cosmos {
        background-position-x: -34rem;
        background-size: 76rem;
        padding: unset;
        margin-top: 1rem;
    }

    .header-cosmos img {
        height: auto;
    }

    .footer {
        margin: unset;
        padding: 1rem;
        margin-top: 10rem;
    }

    .footer h1 {
        font-size: 2.5rem;
    }

    .footer-left {
        margin: unset;
    }

    .footer-base {
        flex-direction: column;
    }

    .footer-left img {
        left: 0rem;
        top: 4rem;
        width: 35.2rem;
    }

    .uli {
        margin: unset !important;
        margin-top: 42rem !important;
    }

    .open {
        top: 1355rem;
        padding: 0 1rem;
    }

    .virtuoso-open h1 {
        width: 35rem;
    }

    .chehol {
        display: none;
    }

    .gif-fire2 {
        right: -1rem;
        width: 94.6rem !important;
        height: 55.2rem !important;
        top: -7rem;
    }

    .cosmos-text {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .input-footer {
        background-size: 38rem;
        background-repeat: no-repeat;
        height: 53.4rem !important;
    }

    .input-footer input {
        height: 1rem;
        padding: 2rem 2rem;
    }

    .q7 {
        width: 22.7rem;
        height: 7.5rem;
    }

    .detail-prem-detail {
        width: 5rem;
    }

    .footer-right {
        margin-top: 2rem;
    }

    .cross {
        margin-left: 29rem;
    }

    .photos {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: unset;
    }

    .p1, .p2, .p3, .p4 {
        width: 36rem;
        height: 19.4rem;
    }

    .sponsor-pc {
        display: none;
    }

    .sponsor-mob {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-bottom: 8rem;
    }

    .sponsor-mob img {
        width: 20rem;
        height: auto;
    }

    .bg-border {
        top: -9.6rem;
        z-index: unset;
        right: -1rem;
        width: 110% !important;
    }

    .footer {
        background-position-y: 70rem;
    }

    .prem-margin {
        margin: 0 1rem;
    }

    .prem-flex {
        margin: 0 1rem;
    }

    .prem-element {
        max-width: 18rem;
        gap: 1rem;
    }

    .prem-elements {
        gap: 1rem;
    }

    .prem-element-mob {
        margin-top: 0rem !important;
    }

    .prem {
        background-size: 56.9rem;
        background-position-x: -13rem;
    }
}


input  {
    color: white !important;
} 

@media (max-width: 777px) 

{
.video7 {display: run-in}
.video77 {display: none} 

} 



@media (min-width: 777px) 

{
.video7 {display: none}
.video77 {display: run-in} 

}