@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
    font-style: normal;
    font-weight: 700;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    /*background-color: #7c7c7c;*/
    background-image: url('/qrorder/images/bg/bg_phxvb.jpg'); /* 배경 이미지 경로 */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dim {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}

.section {
    z-index: 10;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}
.logo {
    /* padding-top: 5%; 높이를 너비의 40%로 지정하여 동그란 로고를 만듦 */
    /* width: 33%; 로고 크기 */ 
    height: auto;
}
.frame-outer{
    height:100vh;flex-direction: column; justify-content: space-between; align-items: center; display: inline-flex;
}
.frame-top-inner{
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px; display: flex;
}
.title{
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 18px; display: flex;
    padding: 0 50px  0 50px;
}
.h1{
    text-align: center; color: white; font-size: 10.0000vw; font-family: Pretendard; font-weight: 700; line-height: 33px; word-wrap: break-word;
}
.h2{
    text-align: center; color: white; font-size: 7.3333vw; font-family: Pretendard; font-weight: 700; line-height: 22px; word-wrap: break-word;
}
.h3{
    text-align: center; color: white; font-size:  7.3333vw; font-family: Pretendard; font-weight: 400; line-height: 22px; word-wrap: break-word;
}

.button-container {
    margin-top: auto; /* 버튼을 화면 하단에 정렬 */
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    margin-bottom: 30%;
    gap:15px;
}
.button {
    width: 100%; margin:  1vw 0; padding:  10px 20px;
    border: 2px solid #000000;
    border-radius: 25vw;
    justify-content: center; align-items: center; gap: 5px; display: inline-flex;
}
.bk{
    background: black;
}
.wh{
    background: white;
}

.bk_txt{
    text-align: center; color: white; font-size: 5.8000vw; font-family: Pretendard; font-weight: 500; line-height: 20px; word-wrap: break-word
}

.wh_txt{
    text-align: center; color: black; font-size: 5.8000vw; font-family: Pretendard; font-weight: 500; line-height: 20px; word-wrap: break-word
}

.sm_bk_txt{
    text-align: center; color: white; font-size: 3.2000vw; font-family: Pretendard; font-weight: 400; line-height: 16px; word-wrap: break-word;margin-top:1vw;
}

.sm_wh_txt{
    text-align: center; color: black; font-size: 3.2000vw; font-family: Pretendard; font-weight: 400; line-height: 16px; word-wrap: break-word;margin-top:1vw;
}