#scroll {z-index: 1; bottom: 4rem; gap: 1rem;}
#scroll .img {width: 4rem; filter: drop-shadow(0 0.3rem 0.3rem rgba(0,0,0,0.5)); animation: scrollBounce 1.5s infinite ease-in-out;}
#scroll .txt {font-size: 1.6rem; color: #fff; text-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.4);}

@keyframes scrollBounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(10px); } /* 10px 만큼 아래로 내려감 (수치 조절 가능) */
    100% { transform: translateY(0); }
}

@media all and (max-width: 880px){
    #scroll {}
    #scroll .img {}
    #scroll .txt {}
}

#intro {z-index: 999; height: 100vh}
#intro .conBox {background: rgba(4, 48, 75, 0.9); width: 96rem; height: 100%; justify-content: center; z-index: 1; transition: 1s; opacity: 0; left: -50%; overflow: hidden;}
#intro .conBox .cont {opacity: 0; transition: 2s;}
#intro .conBox .intLogo {width: 44.8rem;}
#intro .conBox .tit {margin: 5rem 0; color: #fff}
#intro .conBox .wrt {padding-top: 13rem; line-height: 1.6; color: #fff}
#intro .conBox .wrt::before {content: ''; display: block; position: absolute; width: 1px; height: 8rem; top: 0; left: 50%; background: #858585}
#intro .conBox .prg {width: 5rem; transition: 0.8s; right: -100%}

#intro .conBox.on {left: 0; opacity: 1;}
#intro .conBox .cont.on {opacity: 1;}
#intro .conBox .prg.on {right: 0}

#intro .conBox.act {width: 100%}

@media all and (max-width: 880px){
    #intro {z-index: 999;}
    #intro .conBox {width: 100%; left: 0;}
    #intro .conBox .intLogo {width: 19rem;}
    #intro .conBox .tit {color: #fff; margin: 4rem 0 2rem;}
    #intro .conBox .wrt {color: #fff; padding-top: 10rem;}
    #intro .conBox .wrt::before {}
    #intro .bgBox {height: 100%}
    #intro .bgBox .txt {display: none}
    #intro .conBox .prg {width: 30rem; right: auto; left: 50%; transform: translateX(-50%); bottom: 5rem; top: auto; opacity: 0;}

    #intro .conBox .prg.on {opacity: 1;}
}


#titPanel {background: var(--fcp)}
#titPanel .inner {padding: 3.8rem 0; max-width: 130rem}
#titPanel .line {}
#titPanel .subt {margin: 4rem 0 2rem; letter-spacing: 0.5em;}
#titPanel .tit {}

@media all and (max-width: 880px){
    #titPanel {}
    #titPanel .inner {max-width: var(--innerMo); padding: 3.2rem 0;}
    #titPanel .line {}
    #titPanel .subt {font-size: 1.6rem; margin: 4rem 0 1.5rem;}
    #titPanel .tit {font-size: 3.6rem;}
}

#infoPanel {background: #F0ECE2; overflow: hidden;}
#infoPanel .inner {padding: 16rem 0;}
#infoPanel .titArea {}
#infoPanel .titArea .tit {line-height: 1.45; letter-spacing: -0.04em;}
#infoPanel .titArea .wrt {line-height: 1.6; letter-spacing: -0.02em; margin: 2rem 0 10rem;}
#infoPanel .titArea .lst {}
#infoPanel .titArea .lst li {display: flex; align-items: baseline; line-height: 1.6;}
#infoPanel .titArea .lst li + li {margin-top: 2rem;}
#infoPanel .titArea .lst li .opt {min-width: 8rem; padding-left: 1.6rem}
#infoPanel .titArea .lst li .opt::before {content: ''; display: block; position: absolute; width: 2px; background: #AB9780; height: 60%; left: 2px; top: 50%; transform: translateY(-50%);}
#infoPanel .titArea .lst li i {font-style: normal; display: inline-block; min-width: 6rem;}
#infoPanel .titArea .lst li .empty {display: inline-block; min-width: 6rem; text-align: center}
#infoPanel .titArea .lst li .time {padding-top: 0.6rem}
#infoPanel .titArea .lst li .call {bottom: -2rem;}
#infoPanel .imgArea {position: absolute; right: 0; top: 0; width: 100%; max-width: 108.3rem;}

@media all and (max-width: 880px){
    #infoPanel {}
    #infoPanel .inner {padding: 5rem 0; max-width: var(--innerMo);}
    #infoPanel .titArea {}
    #infoPanel .titArea .tit {font-size: 2.4rem; text-align: center}
    #infoPanel .titArea .wrt {margin: 2rem 0 5rem; text-align: center}
    #infoPanel .titArea .lst {font-size: 1.6rem;}
    #infoPanel .titArea .lst li {}
    #infoPanel .titArea .lst li + li {}
    #infoPanel .titArea .lst li .opt {}
    #infoPanel .titArea .lst li i {min-width: 5rem;}
    #infoPanel .titArea .lst li .empty {min-width: 4.9rem;}
    #infoPanel .titArea .lst li .time {}
    #infoPanel .titArea .lst li .call {bottom: -1rem;}
    #infoPanel .imgArea {position: relative; max-width: 100%;}
}


#mainPanel {}
#mainPanel .logoArea {padding: 15rem 0;}
#mainPanel .logoArea .logo {width: 25.6rem; margin: 0 auto;}
#mainPanel .tabArea {border-bottom: 1px solid #04304B;}
#mainPanel .tabArea .tabs {bottom: -1px;}
#mainPanel .tabArea .tabs li {width: 100%;}
#mainPanel .tabArea .tabs li a {display: block; text-align: center; padding: 1.8rem 0; background: #F5F5F5;}
#mainPanel .tabArea .tabs li.on a {border: 1px solid #04304B; border-bottom: 1px solid #fff; background: #fff; color: var(--fcp);}

@media all and (max-width: 880px){
    #mainPanel {}
    #mainPanel .logoArea {padding: 5rem 0;}
    #mainPanel .logoArea .logo {width: 19.2rem;}
    #mainPanel .tabArea {}
    #mainPanel .tabArea .tabs {max-width: var(--innerMo); font-size: 1.8rem;}
    #mainPanel .tabArea .tabs li {}
    #mainPanel .tabArea .tabs li a {padding: 1.7rem 0;}
}

#mainPanel .cont {padding: 15rem 0; display: none;}
#mainPanel .cont.act {display: block;}
#mainPanel .step {}
#mainPanel .step + .step {margin-top: 10rem;}
#mainPanel .step .title {gap: 1.5rem; margin-bottom: 3rem;}
#mainPanel .step .title .opt {color: #AB9780; padding: 1rem 2rem; border: 1px solid #AB9780; border-radius: 6rem}
#mainPanel .step .notcTxt {font-size: 1.6rem; margin-bottom: 1rem; color: red; font-weight: 500;}

@media all and (max-width: 880px){
    #mainPanel .cont {padding: 5rem 0; max-width: var(--innerMo)}
    #mainPanel .step {}
    #mainPanel .step .title {font-size: 2.4rem; gap: 1.2rem; margin-bottom: 2rem;}
    #mainPanel .step .title .opt {font-size: 1.6rem;}
    #mainPanel .step .notcTxt {}
}

.iptArea {border-top: 1px solid #000}
.iptArea .iptLst {padding: 1.5rem 3rem; border-bottom: 1px solid #D9D9D9; min-height: 9rem}
.iptArea .opt {min-width: 20rem; margin-right: 2rem; flex-shrink: 0}
.iptArea .iptBox {width: 100%; gap: 1rem}
.iptArea .iptBox .ipt {height: 6rem; background: #F5F5F5; border-radius: 0; box-shadow: none; width: 100%; max-width: 70rem; border: 0; font-size: 1.8rem; color: #333; padding: 0 1.2rem;}
.iptArea .iptBox .ipt.w200 {max-width: 20rem}
.iptArea .radBox {gap: 2rem}
.iptArea .radBox .rad {}
.iptArea .radBox .rad input {display: none;}
.iptArea .radBox .rad input + label {padding: 1rem 0; padding-left: 3.6rem; display: inline-block; background: url('../img/check_off.svg') left center / 3rem 3rem no-repeat}
.iptArea .radBox .rad input:checked + label {background: url('../img/check_on.svg') left center / 3rem 3rem no-repeat}
.iptArea .mtxt {margin-right: 2rem}
.iptArea .stxt {font-size: 1.4rem}

.iptArea .iptBox .stateTxt {display: flex; gap: 1.5rem;}
.iptArea .iptBox .stateTxt .rsvform_status_text_new {}
.iptArea .iptBox .stateTxt .stxt {}

@media all and (max-width: 880px){
    .iptArea {}
    .iptArea .iptLst {font-size: 1.6rem; padding: 1.5rem 1.2rem;}
    .iptArea .opt {min-width: 10.4rem; margin: 0;}
    .iptArea .iptBox {gap: 0.8rem;}
    .iptArea .iptBox .ipt {height: 5rem;}
    .iptArea .iptBox .ipt.w200 {max-width: 7rem;}
    .iptArea .radBox {flex-wrap: wrap; gap: 0.8rem 2rem;}
    .iptArea .radBox .rad {}
    .iptArea .radBox .rad input {}
    .iptArea .radBox .rad input + label {background-size: 2.4rem; padding-left: 3rem;}
    .iptArea .radBox .rad input:checked + label {background-size: 2.4rem;}
    .iptArea .mtxt {margin-right: 0}
    .iptArea .stxt {font-size: 1.2rem}

    .iptArea .phoneBox {gap: 0.5rem;}

    .iptArea .passBox {flex-direction: column; align-items: flex-start; gap: 0.6rem;}
    .iptArea .passBox input {max-width: 100% !important}

    .iptArea .iptBox .stateTxt {flex-direction: column; gap: 0.4rem;}
    .iptArea .iptBox .stateTxt .rsvform_status_text_new {font-size: 1.4rem;}
    .iptArea .iptBox .stateTxt .stxt {font-size: 1.4rem;}
}

.privBox {border: 1px solid #D9D9D9; padding: 3rem; line-height: 1.5}
.privBox .area {max-height: 23rem; overflow-x: hidden; overflow-y: scroll;}
.privBox table {width: 72rem; font-size: 1.4rem; margin: 1rem 0 2rem; border: 1px solid #D9D9D9;}
.privBox table tr {}
.privBox table th {padding: 1rem; background: #F5F5F5; font-weight: 600; border: 1px solid #D9D9D9;}
.privBox table td {width: 50%; padding: 1.2rem; border: 1px solid #D9D9D9;}
.privBox ul {}
.privBox ul li {padding-left: 2rem;}
.privBox ul li::before {content: '▶'; display: block; position: absolute; left: 0}
.privBox ul li + li {}

@media all and (max-width: 880px){
    .privBox {padding: 1.5rem 1rem; font-size: 1.4rem;}
    .privBox .area {}
    .privBox table {width: 100%; font-size: 1.2rem;}
    .privBox table tr {}
    .privBox table th {}
    .privBox table td {padding: 1rem 1.4rem;}
    .privBox ul {}
    .privBox ul li {}
    .privBox ul li::before {}
    .privBox ul li + li {}
}

.agree {margin-top: 3rem;}
.agree .txt {}
.agree .radBox {gap: 3rem; margin-left: auto}
.agree .radBox .rad {}
.agree .radBox .rad input {display: none;}
.agree .radBox .rad input + label {padding: 1rem 0; padding-left: 3.6rem; display: inline-block; background: url('../img/check_off.svg') left center / 3rem 3rem no-repeat}
.agree .radBox .rad input:checked + label {background: url('../img/check_on.svg') left center / 3rem 3rem no-repeat}

@media all and (max-width: 880px){
    .agree {margin-top: 2rem; flex-direction: column; align-items: flex-start; gap: 1.5rem;}
    .agree .txt {}
    .agree .radBox {margin: 0;}
    .agree .radBox .rad {}
    .agree .radBox .rad input {}
    .agree .radBox .rad input + label {}
    .agree .radBox .rad input:checked + label {}
}

.btnArea {text-align: center; margin-top: 10rem}
.btnArea .submitBtn {background: var(--fcp); padding: 2rem 4.4rem;}

@media all and (max-width: 880px){
    .btnArea {text-align: center; margin-top: 5rem}
    .btnArea .submitBtn {background: var(--fcp); padding: 2rem 4.4rem;}
}

#botPanel {background: url('../img/bot_bg.jpg') center/cover;}
#botPanel .inner {padding: 15rem 0;}
#botPanel .tit {margin-bottom: 6rem;}
#botPanel .map {width: 62rem; margin-bottom: 10rem;}
#botPanel .map .mapImg {}
#botPanel .map .mapTxt {background: #fff; padding: 1.3rem 0; justify-content: center;}
#botPanel .map .mapTxt .ico {}
#botPanel .map .mapTxt b {margin: 0 2rem 0 0.2rem;}
#botPanel .prg {margin-bottom: 0.8rem}
#botPanel .wrt {margin-bottom: 10rem;}
#botPanel .wrt i {font-style: normal; color: #AB9780}
#botPanel .botLogo {width: 38rem;}

@media all and (max-width: 880px){
    #botPanel {overflow: hidden;}
    #botPanel .inner {max-width: var(--innerMo); padding: 5rem 0;}
    #botPanel .tit {font-size: 2.4rem; margin-bottom: 3rem;}
    #botPanel .map {width: 100%; margin-bottom: 5rem;}
    #botPanel .map .mapImg {}
    #botPanel .map .mapTxt {}
    #botPanel .map .mapTxt .ico {}
    #botPanel .map .mapTxt b {}
    #botPanel .prg {}
    #botPanel .wrt {font-size: 2rem; margin-bottom: 5rem;}
    #botPanel .botLogo {width: 29.2rem;}
}


.resTableWrap {}
.resTable {font-size: 1.6rem; border-top: 1px solid #04304B;}
.resTable thead {background: #f5f5f5;}
.resTable tbody {}
.resTable tr {border-bottom: 1px solid #D9D9D9; text-align: center;}
.resTable th {padding: 1.8rem 0.8rem; font-weight: bold;}
.resTable td {padding: 1.8rem 0.8rem;}
.resTable td button {font-family: inherit; border: 1px solid #ccc; padding: 0.8rem 1.7rem; font-size: 1.4rem; font-weight: 500;}
.resTable td button:hover {background: #eee}
.resTable td.td1 {width: 13rem;}
.resTable td.td2 {width: auto}
.resTable td.td3 {width: 23rem;}
.resTable td.td4 {width: 23rem;}
.resTable td.td5 {width: 15rem; color: #173154; font-weight: bold}
.resTable td.td6 {width: 13rem;}
.resTable td.td7 {width: 13rem;}

@media all and (max-width: 880px){
    .resTableWrap .resTable,
    .resTableWrap .resTable tbody,
    .resTableWrap .resTable tr,
    .resTableWrap .resTable td {display: block; width: 100%; box-sizing: border-box;}
    .resTableWrap .resTable thead {display: none;}
    .resTableWrap .resTable tr {padding: 2rem 1.2rem;}
    .resTableWrap .resTable td {padding: 0; display: flex; align-items: center; text-align: left;}
    .resTableWrap .resTable td + td {margin-top: 1.2rem;}
    .resTableWrap .resTable td .opt {min-width: 8rem; font-weight: 600;}
    .resTableWrap .resTable td .con {}
    .resTableWrap .resTable td.td7 {position: absolute; bottom: 2rem; right: 1.2rem; width: auto; margin: 0;}
    .resTableWrap .resTable td.td7 button {}
}

#customRsvModal {position: fixed; width: 100%; height: 100%; top: 0; background: rgba(0, 0, 0, 0.7); display: none}
#customRsvModal .modalBox {background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; border-radius: 0.5rem; padding-bottom: 2rem; min-width: 44rem; overflow: hidden;}
#customRsvModal .modalBox .tit {font-size: 2rem; width: 100%; background: #173154; color: #fff; padding: 1.2rem 0;}
#customRsvModal .modalBox .num {font-size: 2rem; margin: 2.6rem 0; font-weight: 500; color: #fff; display: inline-block; color: #173154; font-weight: bold;}
#customRsvModal .modalBox .wrt {font-size: 1.5rem; line-height: 1.5;}
#customRsvModal .modalBox .prg {font-size: 1.5rem; line-height: 1.5; margin-top: 1.6rem}
#customRsvModal .modalBox .btn {background: #173154; color: #fff; font-size: 1.6rem; width: 80%; border-radius: 0.5rem; margin: 0 auto; margin-top: 3rem; display: flex; justify-content: center; align-items: center; height: 4.8rem; line-height: 4.8rem;}

@media all and (max-width: 880px){
    #customRsvModal {}
    #customRsvModal .modalBox {max-width: 90%; min-width: auto; width: 100%;}
    #customRsvModal .modalBox .tit {font-size: 2.2rem;}
    #customRsvModal .modalBox .num {font-size: 2.4rem;}
    #customRsvModal .modalBox .wrt {font-size: 1.6rem;}
    #customRsvModal .modalBox .prg {font-size: 1.6rem;}
    #customRsvModal .modalBox .btn {font-size: 1.8rem;}
}

#customRsvModal2 {position: fixed; width: 100%; height: 100%; top: 0; background: rgba(0, 0, 0, 0.7); display: none;}
#customRsvModal2 .modalBox {background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; border-radius: 0.5rem; padding-bottom: 2rem; min-width: 44rem; overflow: hidden;}
#customRsvModal2 .modalBox .wrt {font-size: 1.6rem; line-height: 1.5; margin-top: 2.4rem;}
#customRsvModal2 .modalBox .prg {font-size: 1.6rem; line-height: 1.5; margin-top: 1.2rem;}
#customRsvModal2 .modalBox .num {font-size: 2rem; margin: 2.4rem 0 0; font-weight: 500; color: #fff; display: inline-block; color: #173154; font-weight: bold;}
#customRsvModal2 .modalBox .btn {background: #173154; color: #fff; font-size: 1.6rem; width: 80%; border-radius: 0.5rem; margin: 0 auto; margin-top: 3rem; display: flex; justify-content: center; align-items: center; height: 4.8rem; line-height: 4.8rem;}

@media all and (max-width: 880px){
    #customRsvModal2 {}
    #customRsvModal2 .modalBox {max-width: 90%; min-width: auto; width: 100%;}
    #customRsvModal2 .modalBox .wrt {font-size: 1.6rem; margin-top: 2.8rem;}
    #customRsvModal2 .modalBox .prg {font-size: 1.6rem; margin-top: 1.4rem;}
    #customRsvModal2 .modalBox .num {font-size: 2.4rem;}
    #customRsvModal2 .modalBox .btn {font-size: 1.8rem;}
}

#customRsvModal_member {position: fixed; width: 100%; height: 100%; top: 0; background: rgba(0, 0, 0, 0.7); display: none;}
#customRsvModal_member .modalBox {background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; border-radius: 0.5rem; padding-bottom: 2rem; min-width: 44rem; overflow: hidden;}
#customRsvModal_member .modalBox .wrt {font-size: 1.6rem; line-height: 1.5; margin-top: 2.4rem;}
#customRsvModal_member .modalBox .prg {font-size: 1.6rem; line-height: 1.5; margin-top: 1.2rem;}
#customRsvModal_member .modalBox .num {font-size: 2rem; margin: 2.4rem 0 0; font-weight: 500; color: #fff; display: inline-block; color: #173154; font-weight: bold;}
#customRsvModal_member .modalBox .btn {background: #173154; color: #fff; font-size: 1.6rem; width: 80%; border-radius: 0.5rem; margin: 0 auto; margin-top: 3rem; display: flex; justify-content: center; align-items: center; height: 4.8rem; line-height: 4.8rem;}

@media all and (max-width: 880px){
    #customRsvModal_member {}
    #customRsvModal_member .modalBox {max-width: 90%; min-width: auto; width: 100%;}
    #customRsvModal_member .modalBox .wrt {font-size: 1.6rem; margin-top: 2.8rem;}
    #customRsvModal_member .modalBox .prg {font-size: 1.6rem; margin-top: 1.4rem;}
    #customRsvModal_member .modalBox .num {font-size: 2.4rem;}
    #customRsvModal_member .modalBox .btn {font-size: 1.8rem;}
}




..