
:root {
    --bg-color:#0e0e0e;
    --input-border:#9aaaff;
    --select_grd1: #9aaaff;
    --select_grd2: #ffd9fe;
}
img {max-width:100%;}
.noDrag { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.tagHidden {visibility: hidden; width:0; height:0; overflow: hidden;}

.skbInternetForm {font-family: "pretendard"; font-size:46px; padding-bottom:70px;}
.inputFormItem {padding:0 100px;}
.inputFormItem[data-row="1"] {padding-top:87px;}
.inputFormItem + .inputFormItem {padding-top:72px;}
.inputFormTitle {margin-bottom:41px; font-weight: bold;}
.dataFormInput[type="text"] {width:100%; max-height:139px; height:11.58333vw; padding:0 45px; border: 5px solid #fff; border-radius:20px; font-weight: 500; font-size:.9em;}
.dataFormInput[type="text"]::placeholder {color:#a5a5a5;}
.dataFormInput[type="text"]:focus {border-color: var(--input-border); }
.inputFormRow + .inputFormRow, .inputFormRow + .customSelectWrap, .customSelectWrap + .inputFormRow {margin-top:20px;}

.customSelectWrap { position: relative; color: #0e0e0e; border-radius: 20px 20px 0 0; }
.customSelectWrap.active { background: #fff; }
.customSelectorTextWrap { background: #fff; font-weight: 500; max-height: 139px; height: 11.58333vw; padding: 5px; border-radius: 20px; overflow: hidden; cursor: pointer; position: relative; }
.customSelectWrap.active .customSelectorTextWrap { background: linear-gradient(to bottom, var(--select_grd1), var(--select_grd2)); }
.customSelectorText { padding: 0 45px; width: 100%; background: #fff; height: 100%; display: flex; align-items: center; border-radius: 15px; font-size: .9em; }
.customSelectorText[data-value=""] { color: #a4a4a4; }
.customSelectorText:after { content: ""; display: block; position: absolute; right: 40px; top: 50%; transform: translate(0, -50%); transition: transform 0.3s ease;
    background: url(https://onyouimage.cafe24.com/icon/bottom_arrow_b.png) no-repeat; background-size: contain; max-width: 35px; max-height: 18px; width: 2.91667vw; height: 1.5vw; }
.customSelectList { position: absolute; top: 100%; left: 0; width: 100%; overflow: overlay; z-index: 1; background: #fff; border-radius: 0 0 20px 20px; font-size: .9em; display: none; }
.customSelectWrap.active .customSelectList { display: block; }
.customSelectList li { color: inherit; font-weight: normal; max-height: 120px; height: 10vw; display: flex; align-items: center; padding: 0 55px; cursor: pointer; }
.customSelectList li + li { border-top: 2px solid #dbdbdb; }

.inputAgreeCheck input[type="checkbox"] + span { display: flex; gap: 12px; align-items: center; font-size: .7em; }
.inputAgreeCheck input[type="checkbox"] + span:before { content: ""; display: inline-block; max-width: 41px; max-height: 41px; width: 3.45232vw; height: 3.45232vw;
    background-image: url(/eventview/img/check_w_n.png); background-repeat: no-repeat; background-size: contain; }
.inputAgreeCheck input[type="checkbox"]:checked + span:before { background-image: url(/eventview/img/check_w_t.png); }

.popAgree .s26formTitle { padding-bottom: 38px; margin-bottom: 0; border-bottom: 1px solid #7984df; display: flex; justify-content: space-between; align-items: center; }
.agreeToggleBtn { position: static; width: auto; height: auto; border: none; background: none; font-family: "Pretendard"; padding: 0 20px; }
.agreeToggleBtn img { transform: rotate(90deg); transition: transform .3s ease; display: inline-block; max-width: 19px; max-height: 34px; width: 1.5971vw; height: 2.84517vw; }
.popAgree.active .agreeToggleBtn img { transform: rotate(270deg); }
.agreeList { font-weight: normal; font-size: .52em; margin: 38px 0; display: none; }
.popAgree.active .agreeList { display: block;
}
.agreeList .agreeRow + .agreeRow { margin-top: 22px; }

#form_submit { max-width: 1000px; width: 83.33333%; color: inherit; font-size: 1.335em; margin: 0 auto; display: block; margin-top: 38px; border-radius: 20px; font-weight: 600; padding: 23.5px 0; 
    cursor: pointer; background: #333; letter-spacing: -2px; position: relative; }
#form_submit:active {top:1px;}
.btn_text { position: relative; left: -8px; }
.btnArrow { max-height: 53px; height: 4.48412vw; position: absolute; right: 58px; top: 50%; transform: translate(0, -50%); }

#layerPopup { position: fixed; width: 100%; height: 100%; background: #00000099; top: 0; left: 0; z-index: 999;}
#layerPopupClose {position: absolute; right: 18.6667px; top: 18.6667px; max-width: 22.9333px; max-height: 22.9333px; width: 3.58333vw; height: 3.58333vw; padding: 0; background: #fff0;}
#layerPopupClose:active {top:19.6667px;}
.layerPopupContent {border-radius: 28px; background:#fff; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }
.layerPopupContent {min-width:100px; min-height:100px; max-width: 510px; max-height: 400px; width:79.6875vw; height:62.4vw; border-radius: 14.9333px;}
.layerPopupContent[data-type="apply"] .layerPopupItem { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 30.9333px; text-align: center; gap: 19.7333px; padding: 0 29.8667px; }
.applyDoneIcon {max-width:75.7333px; max-height:75.7333px; width:11.83333vw; height:11.83333vw; margin-top:9.06669px;}
.applyDoneTitle {font-weight: 600; line-height:1.2;}
.applyDoneText { font-size: 0.63em; color: #575757; font-weight: 500;}
.applyDoneBtn {display: flex; max-height: 64.5333px; height: 10.08333vw; background: #3617ce; color: #fff; width: 100%; align-items: center; justify-content: center; 
    border-radius: 16px; font-size:.7em; position:relative; cursor:pointer;}
.applyDoneBtn:active {top:1px;}

.loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #00000044; display: flex; justify-content: center; align-items: center; 
    color: #fff; font-size: 4em; z-index:1000;}
.loading span { width: 48px; height: 48px; border: 5px solid #FFF; border-bottom-color: transparent;  border-radius: 50%;
    display: inline-block; box-sizing: border-box; animation: rotation 2s linear infinite;}    
@keyframes rotation{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (max-width:1200px){
    .skbInternetForm {font-size:3.83333vw; padding-bottom:5.83333vw;}
    .inputFormItem {padding:0 8.33333vw;}
    .inputFormItem[data-row="1"] {padding-top:7.25vw;}
    .inputFormItem + .inputFormItem {padding-top:6vw;}
    .inputFormTitle {margin-bottom:3.41667vw;}
    .dataFormInput[type="text"] {border-radius:1.66667vw; border-width: 0.42719vw; padding:0 3.75vw;}
    .inputFormRow + .inputFormRow, .inputFormRow + .customSelectWrap, .customSelectWrap + .inputFormRow {margin-top:1.66667vw;}

    .customSelectorTextWrap {border-radius:1.66667vw; padding:0.41667vw; border-width: 0.41667vw;}
    .customSelectorText {padding:0 3.75vw; border-radius: 1.25vw;}
    .customSelectorText:after {right:3.33333vw;}
    .customSelectList {border-radius:0 0 1.66667vw 1.66667vw;}
    .customSelectList li { padding: 0 4.58333vw; }
    .customSelectList li + li { border-top-width: 0.16667vw; }

    .agreeToggleBtn {padding:0 1.66667vw;}
    .popAgree .s26formTitle { padding-bottom: 3.16vw; }
    .inputAgreeCheck input[type="checkbox"] + span {gap:1vw;}
    .agreeList { margin: 3.16vw 0; }
    .agreeList .agreeRow { letter-spacing: -1px; }
    .agreeList .agreeRow + .agreeRow { margin-top: 1.85069vw; }

    #form_submit { padding: 1.95833vw 0; border-radius: 1.66667vw; margin-top: 3.16vw; }
    .btnArrow { right: 4.83333vw; }
}

@media screen and (max-width:640px){
    #layerPopupClose { right:2.91667vw; top:2.91667vw; }
    #layerPopupClose:active {top:calc(2.91667vw + 1px);}
    .layerPopupContent {border-radius: 2.33333vw;}
    .layerPopupContent[data-type="apply"] .layerPopupItem  { gap: 3.08333vw; padding:0 4.66667vw; font-size:4.83333vw; }
    .applyDoneIcon {margin-top:1.41667vw;}
    .applyDoneBtn {border-radius:2.5vw;}

}