html { font-size : 12px;}
body {
    margin-top: 10px;
    line-height: 0;
    
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    background: rgb(26, 21, 43);
    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;
    background: rgb(255, 255, 255);
}

input[type=text] {
    border-radius: 0px;
    border: none;
    font-size: 1.4rem;
    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.2rem;
    max-width: 140px;
    cursor: pointer;
    max-height: 40px;
    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: 640px;
    cursor: pointer;
    max-height: 40px;
    text-align: left;
    width: 100%;
    height: 100%;
}

select.property {
    border-radius: 0px;
    border: none;
    font-size: 1.2rem;
    max-width: 640px;
    cursor: pointer;
    max-height: 40px;
    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-tab {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 50% 0 50%;
    grid-template-columns: 50% 50%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 56px;
    width: 100%;
    margin: 0;
    padding: 0;
}

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

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

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

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

.wrapper-rsv-space {
    max-height: 70px;
    height:100% auto;
    margin: 0;
    padding: 0;
    background: rgb(255, 255, 255);
}

.wrapper-rsv01 {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 18.75% 0 25% 0 21.25% 0 25% 0 10%;
    grid-template-columns: 18.75% 25% 21.25% 25% 10%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(26, 21, 43);
}

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

    .wrapper-rsv01 > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv01 > *:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv01 > *:nth-child(4) {
        -ms-grid-row: 1;
        -ms-grid-column: 7;
        background: rgb(255, 255, 255);
    }

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


.item {
    margin: 0;
    padding: 0;
}

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

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

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

.item-rsv01-04 {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-rsv01-05 {
    grid-column: 5;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wrapper-rsv02 {
    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.4%;
    grid-template-columns: 16.25% 17.5% 9.375% 17.5% 12.5% 17.5% 9.4%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(26, 21, 43);
}

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

    .wrapper-rsv02 > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv02 > *:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv02 > *:nth-child(4) {
        -ms-grid-row: 1;
        -ms-grid-column: 7;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv02 > *:nth-child(5) {
        -ms-grid-row: 1;
        -ms-grid-column: 9;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv02 > *:nth-child(6) {
        -ms-grid-row: 1;
        -ms-grid-column: 11;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv02 > *:nth-child(7) {
        -ms-grid-row: 1;
        -ms-grid-column: 13;
        background: rgb(255, 255, 255);
    }

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

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

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

.item-rsv02-04 {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-rsv02-05 {
    grid-column: 5;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-rsv02-06 {
    grid-column: 6;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-rsv02-07 {
    grid-column: 7;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-rsv02-08 {
    grid-column: 8;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wrapper-rsv03 {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 8.75% 0 82.5% 0 8.75%;
    grid-template-columns: 8.75% 82.5% 8.75%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(26, 21, 43);  
}

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

    .wrapper-rsv03 > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        background: rgb(255, 255, 255);
    }

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

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

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

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

.wrapper-rsv04 {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 8.75% 0 31.25% 0 0% 0 31.25% 0 28.75%;
    grid-template-columns: 8.75% 31.25% 0% 31.25% 28.75%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(26, 21, 43);
}

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

    .wrapper-rsv04 > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv04 > *:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
        background: rgb(255, 255, 255);
    }

    .wrapper-rsv04 > *:nth-child(4) {
        -ms-grid-row: 1;
        -ms-grid-column: 7;
        background: rgb(255, 255, 255);
    }

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


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

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

.item-rsv04-04 {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.item-rsv04-05 {
    grid-column: 5;
    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;
    background: rgb(26, 21, 43);
}

    .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;
    }

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

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

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


.wrapper-socar {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 50% 0 41.25% 0 8.75%;
    grid-template-columns: 50% 41.25% 8.75%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 28px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color:rgb(255,255,255);
}

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

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

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

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

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

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

.wrapper-select {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 16.25% 0 74.375% 0 9.375%;
    grid-template-columns: 16.25% 74.375% 9.375%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(26, 21, 43); 
}

.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;
    background: rgb(255, 255, 255);
}

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

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

.wrapper-call-2 {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 18% 0 64% 0 18%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 35px;
    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;
    }

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

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

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

.wrapper-rm-rate {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 30.625% 0 38.75% 0 30.625%;
    grid-template-columns: 30.625% 38.75% 30.625%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(5, 5, 43);
}

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

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

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

.wrapper-htl {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 26.5% 0 36.25% 0 37.25%;
    grid-template-columns: 26.5% 36.25% 37.25%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 35px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(5, 5, 43);
}

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

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

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

.wrapper-htl-01 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wrapper-htl-02 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
}

.wrapper-htl-03 {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    padding: 0;
}


.wrapper-member {
    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-member > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

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

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

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

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

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

.wrapper-pro {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 57.5% 0 36.125% 0 6.375%;
    grid-template-columns: 57.5% 36.125% 6.375%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(0, 41, 71);
}

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

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

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


.wrapper-marr {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 68.25% 0 25.5% 0 6.25%;
    grid-template-columns: 68.25% 25.5% 6.25%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 54px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(0, 41, 71);
}

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

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

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

.wrapper-marri {
    display: -ms-grid;
    display: grid;
    grid-gap: 0;
    -ms-grid-columns: 57.5% 0 36.125% 0 6.375%;
    grid-template-columns: 57.5% 36.125% 6.375%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    max-width: 800px;
    max-height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(0, 41, 71);
}

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

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

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

.wrapper-plcc {
    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;
    background: rgb(7, 13, 16);
}

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

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

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

#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: 40px;
        text-align: left;
        width: 100%;
        height: 100%;
        background-color:rgb(255, 255, 255);
    }

    select.roomtype {
        border-radius: 0px;
        border: none;
        font-size: 1.3rem;
        max-width: 600px;
        cursor: pointer;
        max-height: 40px;
        text-align: left;
        width: 100%;
        height: 100%;
    }

    select.property {
        border-radius: 0px;
        border: none;
        font-size: 1.2rem;
        max-width: 640px;
        cursor: pointer;
        max-height: 40px;
        text-align: left;
        width: 100%;
        height: 100%;
    }    

    /* 왼쪽 이미지 */
    #childage_left {
        position: absolute;
        left: 0; /* 화면의 왼쪽에 고정 */
        max-width: 100%; /* 이미지 크기 자동 조정 */
        height: auto;
        display: block; /* 이미지가 보이도록 설정 */
    }

    /* 오른쪽 이미지 */
    #childage_right {
        position: absolute;
        right: 0; /* 화면의 오른쪽에 고정 */
        max-width: 100%; /* 이미지 크기 자동 조정 */
        height: auto;
        display: block; /* 이미지가 보이도록 설정 */
    }
}