@charset "UTF-8";

#box01 {
    width: 100%;
    height: 640px;
    margin-inline: auto;
    color: #fff;
    background: url(https://queenskorea.com/img/pd-title-1920x595.png) no-repeat;
    background-size: cover;
    background-position: center;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#box01 .visual-co {
    position: absolute;
}

#box01 .visual-co .visual-tx {
    width: min(92%, 1200px);
    margin-inline: auto;
    text-align: center;
    font-weight: 400;
    font-size: clamp(5rem, calc(6vw + 1rem), 7rem);
    font-family: var(--queens_font);
    line-height: 1.3;
    color: var(--galleryfont-main-color);
}

#box01 .visual-co .sub-tx {
    width: min(86%, 1200px);
    line-height: 1.2;
    font-weight: 300;
    text-align: center;
    margin-inline: auto;
    margin-top: clamp(1.6rem, 3vw, 2rem);
    font-size: clamp(1.8rem, calc(2vw + 1rem), 2rem);
    font-family: var(--main_font);
    color: var(--galleryfont-main-color);
}


/* 스크롤 내렸을때 애드클래스 추가 */
.hovp.active .tt01 {
    width: 100%;
    background: transparent;
}

.hovp.active .tt01 h1.fonti-logo {
    color: #1a1a1a;
}

.hovp.active .tt01 h1.fonti-logo a {
    /*color: #1a1a1a !important; */
    color: var(--main-a-hover);
    transition: all .5s;
}

.hovp.active .tt01 ul.main li>a {
    color: #1a1a1a;
}

.hovp.active .tt01 ul.main li>a:hover {
    color: var(--main-a-hover);
    transition: all .5s;
}

.hovp.active ul.main li ul.sub01>li>a {
    color: #1a1a1a !important;
}

.hovp.active ul.main li ul.sub01>li>a:hover {
    color: var(--main-a-hover) !important;
    transition: all .5s;
}


/* 1depth bg color:#fff; */
#box01 .hovp .tt01 {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    border-bottom: 0.3px solid rgba(221, 221, 221, 1);
    background-color: rgba(255, 255, 255, 0.5);
}

/*  수정 신규적용 시작  */
#box01 .hovp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 80px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.4);
    transition:
        min-height 0.3s ease,
        background-color 0.3s ease;
}

/* 네비가 펼쳐진 상태 */
#box01 .hovp.is-menu-open {
    min-height: 300px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* 스크롤 여부와 무관하게 동일 */
#box01 .hovp.active,
#box01 .hovp.active.is-menu-open {
    background-color: rgba(255, 255, 255, 0.95);
}

#box01 .hovp .tt01,
#box01 .hovp.active .tt01 {
    background-color: transparent;
}

/*  수정 신규적용 종료  */


/* 로고파트 */
#box01 .hovp .tt01 h1.fonti-logo {
    float: left;
    display: inline;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 3.6rem;
    font-family: var(--main-font-family);
    color: #1a1a1a;
    margin: 19px 0 0 40px;
}

#box01 .hovp .tt01 h1.fonti-logo a {
    z-index: 100;
    color: #1a1a1a;
}

#box01 .hovp .tt01 h1.fonti-logo a:hover {
    color: var(--main-a-hover);
    transition: all .5s;
}

/* 2deps 네비파트 */
#box01 .hovp .tt01 .bx01-a {
    float: right;
    margin-right: 20px;
}

#box01 .hovp .tt01 .bx01-a ul {
    list-style: none;
    float: right;
}

#box01 .hovp .bx01-a ul.main>li {
    display: inline;
    float: left;
    position: relative;
    margin: 26px 10px 0 0;
    line-height: 80px;
    width: 150px;
    font: 400 1.4rem "Pretendard Variable", Pretendard;
    color: #fff;
    line-height: 25px;
}


.main li>a {
    color: #1a1a1a;
}

.main li>a:hover {
    color: var(--main-a-hover);
    transition: all .5s;
}

.main>li:hover .sub01 {
    display: inline;
    width: 100%;
    height: 120px;
}

.main .sub01 {
    display: none;
    line-height: 30px;
    width: 100%;
    height: 120px;
    padding: 40px 0 90px 0;
}

.main .sub01>li {
    display: block;
    margin: 0;
    padding-left: 1px;
    width: 150px;
    height: 30px;
    margin: 0 auto;
    color: var(--main-a-color);
}

/* 2depth navi color  */
.main .sub01 li>a {
    color: #1a1a1a;
}

.main .sub01 li>a:hover {
    color: var(--main-a-hover);
    transition: all .5s;
}



.hovp-ms {
    display: none;
}



/* ================responsive web design area ==============
============================================================ */
@media screen and (max-width:1200px) {
    header {
        width: 92%;
    }
}

@media screen and (max-width:1178px) {
    #box01 {
        height: 613px
    }

    /* 텍스트, 박스의 중앙 정렬 */
    #box01 .hovp {
        position: absolute;
        top: 0;
    }

    /* 로고파트 */
    #box01 .hovp .tt01 h1.fonti-logo {
        display: none;
    }

    /* 네비파트 */
    #box01 .hovp .tt01 .bx01-a {
        display: none;
    }

    #box01 .bx01-a ul li {
        display: inline;
        float: left;
        margin: 10px 10px 0 0;
        padding-left: 30px;
        font: 100 1.4rem "Pretendard Variable", Pretendard;
        color: #fff;
        line-height: 25px;
    }

    /* 스크롤 내렸을때 CSS .active */
    .hovp-ms.active {
        background: rgba(255, 255, 255, 0.8);
    }

    .hovp-ms.active h1.fonti-logo {
        color: #1a1a1a;
    }

    .hovp-ms.active h1.fonti-logo a {
        color: #1a1a1a !important;
    }

    .hovp-ms.active .hambb span {
        background: #1a1a1a;
    }

    .hovp-ms.active .hambb.mmh span {
        background: #1a1a1a;
    }

    .hovp-ms.active input[id="hamburger"]:checked+label span {
        background: #1a1a1a;
    }

    .hovp-ms {
        display: inline;
        z-index: 1001;
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 80px;
    }

    .hovp-ms h1.fonti-logo {
        float: left;
        font: bold 3.2rem "Pretendard Variable", Pretendard;
        margin: 20px 0 0 24px;
        z-index: 20;
        letter-spacing: 2px;
        color: var(--white);
    }

    .hovp-ms h1.fonti-logo a {
        color: var(--white);
    }

    .hovp-ms .hambb {
        display: inline;
        top: 0;
        right: 30px;
        margin: 28px 0 0 0;
        z-index: 20;
    }

    input[id="hamburger"] {
        display: none;
    }

    input[id="hamburger"]+label {
        display: block;
        width: 24px;
        height: 16px;
        position: fixed;
        cursor: pointer;
        padding: 4px;
        color: #000;
    }

    input[id="hamburger"]+label span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        border-radius: 30px;
        background: #fff;
        transition: all 0.35s;
    }

    input[id="hamburger"]+label span:nth-child(1) {
        top: 0;
    }

    input[id="hamburger"]+label span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    input[id="hamburger"]+label span:nth-child(3) {
        bottom: 0;
    }

    input[id="hamburger"]:checked+label {
        z-index: 99;
    }

    input[id="hamburger"]:checked+label span {
        background: #1a1a1a;
    }

    input[id="hamburger"]:checked+label span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    input[id="hamburger"]:checked+label span:nth-child(2) {
        opacity: 0;
    }

    input[id="hamburger"]:checked+label span:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    div[class="bx-nav"] {
        width: 100%;
        height: 100%;
        background: white;
        /* opacity: 0.85; */
        position: fixed;
        top: 0;
        /* 원본 left: -100%; */
        left: 100%;
        z-index: 98;
        transition: all 0.35s;
        margin-left: 390px;
    }

    input[id="hamburger"]:checked+label+div {
        left: 0;
    }

    /*   모바일 네비  제어 추가 :: 시작  */
    .bx-nav ul.nav_mss>li>ul.sub {
        display: none;
    }

    .bx-nav ul.nav_mss>li.is-open>ul.sub {
        display: block;
    }

    /*   모바일 네비  제어 추가 :: 종료  */



    .bx-nav {
        position: absolute;
        top: 119px;
        width: 100%;
    }

    .bx-nav .nav_mss li {
        color: #fff;
        position: relative;
        float: left;
        width: 100%;
        list-style-type: none;
        /* border-bottom:1px solid #fff; */
        font-weight: 500;
        font-size: 1.6rem;
        font-family: var(--main-font-family);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 50px;
        text-align: left;
    }


    .bx-nav a {
        padding: 0;
        text-decoration: none;
        display: block;
    }

    .bx-nav ul.nav_mss {
        margin-top: 70px
    }

    .bx-nav li a {
        display: block;
        color: #1a1a1a;
        line-height: 40px;
        margin: 0px;
        padding: 0;
        text-decoration: none;
        transition: all 0.4s;
    }

    .bx-nav li a:hover {
        text-decoration: none;
        color: #f12614;
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul li:hover a {
        text-decoration: none;
        color: #797979;
        padding: 0;
        margin: 0;
        border: 0px;
    }

    /*2뎁스 적용 호버 색상*/
    .bx-nav ul.nav_mss li a:hover {
        text-decoration: none;
        color: var(--main-a-hover);
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul.sub li:hover a {
        text-decoration: none;
        color: var(--main-a-hover);
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul.nav_mss li ul.sub li {
        font-weight: 300;
        font-size: 1.4rem;
        font-family: var(--main-font-family);
        color: #7d7d7d;
        padding-left: 22px;
    }

    .bx-nav ul.nav_mss li ul.sub li a {
        float: left;
        margin: 0;
        padding: 2px 0 10px 0;
        line-height: 10px;
    }


}

@media screen and (max-width:1024px) {
    #box01 {
        height: 613px;
    }

    #box01 .hovp {
        position: fixed;
        top: 0;
        width: 100%;
        height: auto;
        z-index: 100;
        left: 0px;
    }

    #box01 .hovp .tt01 {
        width: 100%;
        height: 80px;
        margin: 0 auto;
        text-align: center;
    }

    #box01 .hovp .tt01 h1.fonti-logo a:hover {
        color: var(--main-a-hover);
        transition: all .5s;
    }

    #box01 .hovp .bx01-a ul.main>li {
        width: 90px;
    }

    .main ul.sub01>li {
        width: 90px;
    }


}

@media screen and (max-width:768px) {
    #box01 {
        height: 613px;
        background: url(https://queenskorea.com/img/qcpd-800x613.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* 텍스트, 박스의 중앙 정렬 */
    #box01 .hovp {
        position: absolute;
        top: 0;
    }

    /* 로고파트 */
    #box01 .hovp .tt01 h1.fonti-logo {
        display: none;
    }


    /* 네비파트 */
    #box01 .hovp .tt01 .bx01-a {
        display: none;
    }

    #box01 .bx01-a ul li {
        display: inline;
        float: left;
        margin: 10px 10px 0 0;
        padding-left: 30px;
        font: 100 1.4rem "Pretendard Variable", Pretendard;
        color: #fff;
        line-height: 25px;
    }

    /* 스크롤 내렸을때 CSS .active */
    .hovp-ms.active {
        background: rgba(255, 255, 255, 0.8);
    }

    .hovp-ms.active h1.fonti-logo {
        color: #1a1a1a;
    }

    .hovp-ms.active h1.fonti-logo a {
        color: #1a1a1a !important;
    }

    .hovp-ms.active .hambb span {
        background: #1a1a1a;
    }

    .hovp-ms.active .hambb.mmh span {
        background: #1a1a1a;
    }

    .hovp-ms.active input[id="hamburger"]:checked+label span {
        background: #1a1a1a;
    }

    .hovp-ms {
        display: inline;
        z-index: 1001;
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 80px;
    }

    .hovp-ms h1.fonti-logo {
        float: left;
        font: bold 3.2rem "Pretendard Variable", Pretendard;
        margin: 20px 0 0 24px;
        z-index: 20;
        letter-spacing: 2px;
        color: var(--white);
    }

    .hovp-ms h1.fonti-logo a {
        color: var(--white);
    }

    .hovp-ms .hambb {
        display: inline;
        top: 0;
        right: 30px;
        margin: 28px 0 0 0;
        z-index: 20;
    }

    input[id="hamburger"] {
        display: none;
    }

    input[id="hamburger"]+label {
        display: block;
        width: 24px;
        height: 16px;
        position: fixed;
        cursor: pointer;
        padding: 4px;
        color: #000;
    }

    input[id="hamburger"]+label span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        border-radius: 30px;
        background: #fff;
        transition: all 0.35s;
    }

    input[id="hamburger"]+label span:nth-child(1) {
        top: 0;
    }

    input[id="hamburger"]+label span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    input[id="hamburger"]+label span:nth-child(3) {
        bottom: 0;
    }

    input[id="hamburger"]:checked+label {
        z-index: 99;
    }

    input[id="hamburger"]:checked+label span {
        background: #1a1a1a;
    }

    input[id="hamburger"]:checked+label span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    input[id="hamburger"]:checked+label span:nth-child(2) {
        opacity: 0;
    }

    input[id="hamburger"]:checked+label span:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    div[class="bx-nav"] {
        width: 100%;
        height: 100%;
        background: white;
        /* opacity: 0.85; */
        position: fixed;
        top: 0;
        /* 원본 left: -100%; */
        left: 100%;
        z-index: 98;
        transition: all 0.35s;
        margin-left: 390px;
    }

    input[id="hamburger"]:checked+label+div {
        left: 0;
    }

    .bx-nav {
        position: absolute;
        top: 119px;
        width: 100%;
    }

    .bx-nav .nav_mss li {
        color: #fff;
        position: relative;
        float: left;
        width: 100%;
        list-style-type: none;
        /* border-bottom:1px solid #fff; */
        font-weight: 500;
        font-size: 1.6rem;
        font-family: var(--main-font-family);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 50px;
        text-align: left;
    }

    .bx-nav a {
        padding: 0;
        text-decoration: none;
        display: block;
    }

    .bx-nav ul.nav_mss {
        margin-top: 70px
    }

    .bx-nav li a {
        display: block;
        color: #1a1a1a;
        line-height: 40px;
        margin: 0px;
        padding: 0;
        text-decoration: none;
        transition: all 0.4s;
    }

    .bx-nav li a:hover {
        text-decoration: none;
        color: #f12614;
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul li:hover a {
        text-decoration: none;
        color: #797979;
        padding: 0;
        margin: 0;
        border: 0px;
    }

    /*2뎁스 적용 호버 색상*/
    .bx-nav ul.nav_mss li a:hover {
        text-decoration: none;
        color: var(--main-a-hover);
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul.sub li:hover a {
        text-decoration: none;
        color: var(--main-a-hover);
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul.nav_mss li ul.sub li {
        font-weight: 300;
        font-size: 1.4rem;
        font-family: var(--main-font-family);
        color: #7d7d7d;
        padding-left: 22px;
    }

    .bx-nav ul.nav_mss li ul.sub li a {
        float: left;
        margin: 0;
        padding: 2px 0 10px 0;
        line-height: 10px;
    }


}

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

    #box01,
    #box02,
    #box03,
    #box04,
    #box05,
    #box06 {
        float: none;
    }

    #box01 {
        height: 613px
    }

    /* 텍스트, 박스의 중앙 정렬 */
    #box01 .hovp {
        position: absolute;
        top: 0;
    }

    #box01 .hovp .bx01-a h1 {
        float: left;
        font: bold 2.6rem "Abril Fatface", serif;
        color: #fff;
        margin: 14px 30px 0 30px;
        letter-spacing: 4px;
    }

    #box01 .hovp .bx01-a ul li {
        display: none;
    }

    .hovp-ms {
        z-index: 200;
    }

    .hovp-ms h1.fonti-logo {
        float: left;
        font: bold 3.2rem "Pretendard Variable", Pretendard;
        margin: 20px 0 0 24px;
        z-index: 20;
        letter-spacing: 2px
    }

    #box02 .main-md01 {
        display: none;
    }

    #box02 .main-md02 {
        display: inline;
        width: 100%;
    }

    #box02 .main-md02 ul li {
        display: block;
        float: none;
        width: 84%;
        margin: 30px auto 0;
        box-sizing: border-box;
    }

    div[class="bx-nav"] {
        width: 100%;
        height: 100%;
        background: white;
        /* opacity: 0.85; */
        position: fixed;
        top: 0;
        /* 원본 left: -100%; */
        left: 100%;
        z-index: 98;
        transition: all 0.35s;
        margin-left: 120px;
    }

    .bx-nav {
        position: absolute;
        top: 119px;
        width: 100%;
    }

    .bx-nav .nav_mss li {
        color: #fff;
        position: relative;
        float: left;
        width: 100%;
        list-style-type: none;
        /* border-bottom:1px solid #fff; */
        font-weight: 500;
        font-size: 1.6rem;
        font-family: var(--main-font-family);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 50px;
        text-align: left;
    }

    .bx-nav a {
        padding: 0;
        text-decoration: none;
        display: block;
    }

    .bx-nav ul.nav_mss {
        margin-top: 70px
    }

    .bx-nav li a {
        display: block;
        color: #1a1a1a;
        line-height: 40px;
        margin: 0px;
        padding: 0;
        text-decoration: none;
        transition: all 0.4s;
    }

    .bx-nav li a:hover {
        text-decoration: none;
        color: #f12614;
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul li:hover a {
        text-decoration: none;
        color: #797979;
        padding: 0;
        margin: 0;
        border: 0px;
    }

    /*2뎁스 적용 호버 색상*/
    .bx-nav ul.nav_mss li a:hover {
        text-decoration: none;
        color: var(--main-a-hover);
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul.sub li:hover a {
        text-decoration: none;
        color: var(--main-a-hover);
        padding: 0;
        margin: 0;
        border: 0px;
    }

    .bx-nav ul.nav_mss li ul.sub li {
        font-weight: 300;
        font-size: 1.4rem;
        font-family: var(--main-font-family);
        color: #7d7d7d;
        padding-left: 22px;
    }

    .bx-nav ul.nav_mss li ul.sub li a {
        float: left;
        margin: 0;
        padding: 2px 0 10px 0;
        line-height: 10px;
    }

}

@media screen and (max-width:450px) {
    #box01 {
        height: 613px;
        background: url(/assets/img/qcpd-450x613.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    #box01 video.pcv001 {
        display: none;
    }

    #box01 video.mv002 {
        display: block;
        height: 720px;
    }

}

@media screen and (max-width:430px) {
    #box01 {
        height: 613px;
        background: url(/assets/img/qcpd-430x613.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    #box01 video.pcv001 {
        display: none;
    }

    #box01 video.mv002 {
        display: block;
        height: 730px;
    }

    .hovp-ms h1.fonti-logo {
        font: bold 3.6rem "Pretendard Variable", Pretendard;
        margin: 20px 0 0 24px;
        letter-spacing: -1px;
    }

}

@media screen and (max-width:390px) {
    #box01 {
        height: 613px;
        background: url(/assets/img/qcpd-390x613.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    #box01 .hovp {
        position: absolute;
        top: 0;
    }

    #box01 .hovp .bx01-a {
        display: none;
    }

    .hovp-ms {
        z-index: 200;
    }

    .hovp-ms h1.fonti-logo {
        float: left;
        font: bold 3.2rem "Pretendard Variable", Pretendard;
        margin: 20px 0 0 24px;
        z-index: 20;
        letter-spacing: -2px;
    }

    div[class="bx-nav"] {
        width: 100%;
        height: 100%;
        background: white;
        /* opacity: 0.85; */
        position: fixed;
        top: 0;
        /* 원본 left: -100%; */
        left: 100%;
        z-index: 98;
        transition: all 0.35s;
        margin-left: 50px;
    }
}

@media screen and (max-width:320px) {
    #box01 {
        height: 613px;
        background: url(/assets/img/qcpd-320x613.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    .hovp-ms h1.fonti-logo {
        font-size: 2.8rem;
        margin: 23px 0 0 24px;
    }
}

@media screen and (max-width:280px) {
    #box01 {
        height: 613px;
        background: url(/assets/img/qcpd-280x613.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    div[class="bx-nav"] {
        width: 100%;
        height: 100%;
        background: white;
        /* opacity: 0.85; */
        position: fixed;
        top: 0;
        /* 원본 left: -100%; */
        left: 100%;
        z-index: 98;
        transition: all 0.35s;
        margin-left: 30px;
    }

    .hovp-ms h1.fonti-logo {
        font-size: 2.5rem;
    }

    #box01 .visual-co p.visual-tx span.sub-tx {
        font-size: 1.6rem;
    }

}