html { font-size : 18px;}
body {
    margin-top: 10px;
    line-height: 0;
    background-color: #000;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    align-content: center;
    text-align: center;
}

img {
    max-width: 100%;
    width: auto;
    height: auto !important;
    margin: 0;
    padding: 0;
    align-content: center;
    text-align: center;
    vertical-align:bottom;
}

input:focus {outline:none;}

select:focus {outline:none;}

input[type=image] {
    max-width: 400px;
    width: auto;
    height: auto !important;
    margin: 0;
    padding: 0;
    align-content: center;
    text-align: center;
    width: 100%;
    vertical-align: bottom;
}

input[type=text] {
    border-radius: 0px;
    border: none;
    font-size: 1.3rem;
    max-width: 240px;
    cursor: pointer;
    max-height: 40px;
    text-align: left;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
}

select {
    border-radius: 0px;
    border: none;
    font-size: 1.3rem;
    max-width: 140px;
    cursor: pointer;
    max-height: 38px;
    margin-top: 1px;
    text-align: left;
    width: 100%;
    height:100%;
    background: rgb(255, 255, 255);
}

    select.roomtype {
        border-radius: 0px;
        border: none;
        font-size: 1.2rem;
        max-width: 650px;
        cursor: pointer;
        max-height: 38px;
        margin-top: 1px;
        text-align: left;
        width: 100%;
        height: 100%;
    }

[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

input[type=radio] + img {
    max-width: 100%;
    width: auto;
    height: auto !important;
    margin: 0;
    padding: 0;
    margin-bottom: 0px;
    align-content: center;
    text-align: center;
    cursor: pointer;
}

input[type=radio]:checked + img {
    outline: none;
}

.wrapper-tab1 {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 33.25% 0 33.25% 0 33.5%;
    grid-template-columns: 33.25% 33.25% 33.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 54px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-tab1 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-tab1 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-tab1 > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.item-tab1-01 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-tab1-02 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-tab1-03 {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wrapper-tab2 {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 33.25% 0 33.25% 0 33.5%;
    grid-template-columns: 33.25% 33.25% 33.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 54px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-tab2 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-tab2 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-tab2 > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.item-tab2-01 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-tab2-02 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-tab2-03 {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wrapper-submit {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 25% 0 50% 0 25%;
    grid-template-columns: 25% 50% 25%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-submit > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-submit > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-submit > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}


.wrapper-wpt {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 13.75% 0 25% 0 20% 0 32.50% 0 8.75%;
    grid-template-columns: 13.75% 25% 20% 32.50% 8.75%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 115px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-wpt > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-wpt > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-wpt > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-wpt > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}

.wrapper-wpt > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
}


.wrapper-marriott {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 67.5% 0 32.5%;
    grid-template-columns: 67.5% 32.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-marriott > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-marriott > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-somerset {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 67.5% 0 32.5%;
    grid-template-columns: 67.5% 32.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-somerset > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-somerset > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-shinhwa {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 67.5% 0 32.5%;
    grid-template-columns: 67.5% 32.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-shinhwa > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-shinhwa > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}


.wrapper-landing {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 67.5% 0 32.5%;
    grid-template-columns: 67.5% 32.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-landing > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-landing > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}


.wrapper-language {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 73.125% 0 13.125% 0 13.75%;
    grid-template-columns: 73.125% 13.125% 13.75%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-language > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-language > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-language > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}




.wrapper-call {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 15% 0 70% 0 15%;
    grid-template-columns: 15% 70% 15%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-call > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-call > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-call > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-download {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 75% 0 23% 0 2%;
    grid-template-columns: 75% 23% 2%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-download > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-download > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-download > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-select {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 10% 0 80% 0 10%;
    grid-template-columns: 10% 80% 10%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-select > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-select > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-select > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-date {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 18.75% 0 26.25% 0 19.375% 0 26.25% 0 9.375%;
    grid-template-columns: 18.75% 26.25% 19.375% 26.25% 9.375%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-date > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-date > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-date > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-date > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}

.wrapper-date > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
}

.wrapper-person {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 16.25% 0 17.5% 0 9.375% 0 17.5% 0 12.5% 0 17.5% 0 9.375%;
    grid-template-columns: 16.25% 17.5% 9.375% 17.5% 12.5% 17.5% 9.375%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-person > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-person > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-person > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-person > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}

.wrapper-person > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
}

.wrapper-person > *:nth-child(6) {
    -ms-grid-row: 1;
    -ms-grid-column: 11;
}

.wrapper-person > *:nth-child(7) {
    -ms-grid-row: 1;
    -ms-grid-column: 13;
}

.wrapper-person > *:nth-child(8) {
    -ms-grid-row: 1;
    -ms-grid-column: 15;
}

.wrapper-bf {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 10% 0 22.5% 0 8.125% 0 22.5% 0 36.875%;
    grid-template-columns: 10% 22.5% 8.125% 22.5% 36.875%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-bf > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-bf > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-bf > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.wrapper-bf > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}

.wrapper-bf > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
}

.wrapper-language {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 73.75% 0 12.5% 0 13.75%;
    grid-template-columns: 73.75% 12.5% 13.75%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 55px;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.wrapper-language > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-language > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-language > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}


.wrapper-faq {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 65.5% 0 10% 0 24.5%;
    grid-template-columns: 65.5% 10% 24.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 34px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-faq > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-faq > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.wrapper-faq > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}


.wrapper-tnc {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 72.5% 0 27.5%;
    grid-template-columns: 72.5% 27.5%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 34px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper-tnc > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.wrapper-tnc > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

#scrollToReserv {
    display: none;
    border: none;
    position: fixed;
    bottom: 20px; /* 버튼 위치 : 페이지 최하단 끝으로부터 거리 */
    right: 20px; /* 버튼 위치 : 페이지 최우측 끝으로부터의 거리 */
    z-index: 99;
    border: 1px; /* 버튼 테두리 두께 */
    border-style: solid;
    border-color: transparent; /* 버튼 테두리 색상 */
    outline: none;
    background-color: transparent; /* 버튼 배경색 */
    color: #ffffff; /* 버튼 텍스트 색상 */
    height: 210px;
    width: 110px;
    cursor: pointer;
    padding: 0; /* 버튼 안쪽 여백, 좌측: 상하 여백, 우측: 좌우 여백 */
    margin: 0;
}

    #scrollToReserv:hover {
        background-color: transparent; /* Hover 시 버튼 배경색 */
        border: none;
    }


@media screen and (min-width: 801px) {
    html {
        font-size: 18px;
    }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 800px) {
    html {
        font-size: 16px;
    }

    input[type=text] {
        border-radius: 0px;
        border: none;
        font-size: 1.3rem;
        max-width: 240px;
        cursor: pointer;
        max-height: 40px;
        text-align: left;
        width: 100%;
        height: 100%;
        vertical-align:text-top;
        background-color:transparent;
    }

    select {
        border-radius: 0px;
        border: none;
        font-size: 1.3rem;
        max-width: 140px;
        cursor: pointer;
        max-height: 38px;
        text-align: left;
        margin-top: 1px;
        width: 100%;
        height: 100%;
        background-color:rgb(255, 255, 255);
    }

    select.roomtype {
        border-radius: 0px;
        border: none;
        font-size: 1.3rem;
        max-width: 650px;
        cursor: pointer;
        max-height: 38px;
        text-align: left;
        margin-top: 1px;
        width: 100%;
        height: 100%;
    }

    select.property {
        border-radius: 0px;
        border: none;
        font-size: 1.2rem;
        max-width: 650px;
        cursor: pointer;
        max-height: 38px;
        margin-top: 1px;
        text-align: left;
        width: 100%;
        height: 100%;
    }  
}