:root {
    --bg-color:#0e0e0e;
}
.noDrag { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

#s26formBox { background: var(--bg-color); color: #fff; font-size: 49px; font-weight: 600; padding: 31px 100px 137px;}
.s26formRow {display:flex; flex-direction: column;}
.s26formRow input[type="radio"] {display:none;}
.s26formTitle {margin-bottom:53px;}

.popParentRow {margin-top:80px;}
/* .preorderTypeRow {margin-top:124px; gap:20px;} */
.preorderTypeRow {margin-top:87px; gap:20px;}
.popUserRow .s26formTitle {display:flex; justify-content: space-between; align-items:flex-end;}

.inputParentCheck {font-weight:normal; font-size:.7em; cursor:pointer;}
.inputParentCheck input[type="checkbox"] {display:none;}
.inputParentCheck input[type="checkbox"] + span { display: flex; gap: 12px; align-items: center;}
.inputParentCheck input[type="checkbox"] + span:before {content:""; display:inline-block; width:34px; height:34px; 
    background-image:url(https://onyouimage.cafe24.com/model/s26/form/form_checko.png); background-repeat: no-repeat; background-size:contain;}
.inputParentCheck input[type="checkbox"]:checked + span:before {background-image:url(https://onyouimage.cafe24.com/model/s26/form/form_checki.png?v0);}

.s26_datas[type="text"] { padding: 38px 49px; border-radius: 20px; font-size: .9em; border: 5px solid #fff;}
.s26_datas[type="text"]:focus {border-color:#d25ef5;}
.s26_datas[type="text"]::placeholder {color:#a5a5a5;}
.s26_datas[type="text"] + .s26_datas[type="text"] {margin-top:20px;}

/* ul-li customSelector */
.preorderTypeRow .s26formTitle {margin-bottom:33px; display:flex; align-items: flex-end; gap:34px;}
.preorderTypeRow .s26formTitle .s26subtitle { font-size: 0.76em; font-weight: normal; letter-spacing: -1px;}
.preorderTypeRow .s26formTitle .s26subtitle span { background: linear-gradient(225deg, #99b5fe, #e38ffe, #ffeeff); background-clip: text; color: transparent; font-weight: bold;}
.customSelectWrap {position:relative; color:#0e0e0e; border-radius: 20px 20px 0 0;}
.customSelectorTextWrap {background: #fff; font-weight: 600; max-height:139px; height:11.58333vw; padding:5px; border-radius: 20px; overflow:hidden; cursor:pointer; position:relative;}
.customSelectorText { padding: 0 50px; width: 100%; background: #fff; height: 100%; display: flex; align-items: center; border-radius:15px; }
.customSelectorText[data-value=""] {color:#a4a4a4; }
.customSelectorText:after {content: ""; display: block; position: absolute; right: 43px; 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; }
.customSelectList li { color: inherit; font-weight: normal; max-height:120px; height: 10vw; display: flex; align-items: center; padding: 0 55px; cursor:pointer;}
.customSelectList li:hover {background:#f0f0f0;}
.customSelectList li + li {border-top: 2px solid #dbdbdb;}
.customSelectList li.before_select {color:#3617ce; font-weight: 600;}

.customSelectWrap.active {background:#fff;}
.customSelectWrap.active .customSelectorTextWrap { background: linear-gradient(to bottom, #9aaaff, #ffd9fe); }
.customSelectWrap.active .customSelectorText:after {transform:translate(0, -50%) rotate(180deg);}
.customSelectWrap.active .customSelectList {display:block;}

.popAgree {margin-top:92px; font-size: 0.85em;}
.popAgree .s26formTitle {padding-bottom:38px; margin-bottom:0; border-bottom:2px solid #454545; display: flex; justify-content: space-between; align-items:center;}
.inputAgreeCheck {cursor:pointer;}
.inputAgreeCheck input[type="checkbox"] {display:none;}
.inputAgreeCheck input[type="checkbox"] + span { display: flex; gap: 12px; align-items: center;}
.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(https://onyouimage.cafe24.com/model/s26/form/form_agreeo.png); background-repeat: no-repeat; background-size:contain;}
.inputAgreeCheck input[type="checkbox"]:checked + span:before {background-image:url(https://onyouimage.cafe24.com/model/s26/form/form_agreei.png);}
.agreeToggleBtn {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:.6em; margin:38px 0; display: none;}
.agreeList .agreeRow + .agreeRow {margin-top:22px;}
.popAgree.active .agreeList {display:block;}

.preorderTypeWrap {display:flex; gap:24px; margin-top: 15px;}
.preorderTypeWrap > label {width:0; flex-grow:1; position:relative;}
.preorderTypeWrap > label:active {top:1px;}
.s26_datas + .radio_box {max-height:180px; height:14.99024vw; background-repeat: no-repeat; background-size:contain; cursor:pointer;}
.s26_datas[value="SKT"] + .radio_box {background-image:url(https://onyouimage.cafe24.com/model/s26/form/tel_skt_n.png);}
.s26_datas[value="SKT"]:checked + .radio_box {background-image:url(https://onyouimage.cafe24.com/model/s26/form/tel_skt_y.png);}
.s26_datas[value="타사"] + .radio_box {background-image:url(https://onyouimage.cafe24.com/model/s26/form/tel_other_n.png);}
.s26_datas[value="타사"]:checked + .radio_box {background-image:url(https://onyouimage.cafe24.com/model/s26/form/tel_other_y.png);}

#form_submit { width: 100%; color: inherit; font-size: 1.335em; margin-top: 38px; border-radius: 20px; font-weight: 600; padding: 30px 0; cursor:pointer;
    background: #333; letter-spacing: -2px; position: relative; }
#form_submit:active {top:1px;}
#form_submit[data-state="done"] {background: center / contain no-repeat url(https://onyouimage.cafe24.com/model/s26/form/submit_btn.png);}
.btn_text { position: relative; left: -8px;}
.btnArrow {height:53px; position:absolute; right:141px; top:50%; transform:translate(0, -50%);}

.s26ShareRow {background:var(--bg-color); color:#fff; display:flex; align-items: center; padding: 0 100px 51px; gap:16px;}
.s26ShareBtn { position: relative; display: flex; color: inherit; font-size: 46px; font-weight: 500; letter-spacing: -0.5px; align-items: center; justify-content: space-between; width: 100%;}
.s26ShareBtn:active {top:1px;}
.s26ShareBtn img { width:9.16667vw; height:9.16667vw; max-width:110px; max-height:110px;}

#layerPopup { position: fixed; width: 100%; height: 100%; background: #00000099; top: 0; left: 0; z-index: 999;}
#layerPopupClose {position:absolute; right:35px; top:35px; max-width:43px; max-height:43px; width: 3.58333vw; height: 3.58333vw; }
#layerPopupClose:active {top:36px;}
.layerPopupContent {border-radius: 28px; background:#fff; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }
.layerPopupContent[data-type="apply"] {min-width:100px; min-height:100px; max-width: 1020px; max-height: 90%; width:65.68421vw; height:62.4vw;}
.layerPopupContent[data-type="apply"] .layerPopupItem {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 58px; text-align: center; gap:37px;
    padding:0 56px; }
.applyDoneIcon {max-width:142px; max-height:142px; width:11.83333vw; height:11.83333vw; margin-top:17px;}
.applyDoneTitle {font-weight: 600; line-height:1.2;}
.applyDoneText { font-size: 0.63em; color: #575757; font-weight: 500;}
.applyDoneBtn {display: flex; max-height: 121px; height: 10.08333vw; background: #3617ce; color: #fff; width: 100%; align-items: center; justify-content: center; 
    border-radius: 30px; font-size:.7em; position:relative; cursor:pointer;}
.applyDoneBtn:active {top:1px;}

@media screen and (max-width:1200px){

    #s26formBox { font-size: 4.08333vw; padding: 2.57452vw 8.301106vw 11.38728vw; }
    .s26formTitle {margin-bottom:4.356547vw;}
    .inputParentCheck input[type="checkbox"] + span {gap:1.044494vw;}
    .inputParentCheck input[type="checkbox"] + span:before {width:2.847269vw; height:2.847269vw;}
    
    .popParentRow {margin-top:6.64883vw;}
    .preorderTypeRow {margin-top:7.28619vw; gap:1.66667vw;}
    .preorderTypeWrap {gap:1.98121vw; margin-top:3.52941vw;}
    
    .s26_datas[type="text"] {padding: 3.17357vw 4.06889vw; border-radius: 1.66667vw; border-width:0.42719vw;}
    .s26_datas[type="text"] + .s26_datas[type="text"] {margin-top:1.66072vw;}
    .radio_box {height:14.93079vw; border-radius:1.66667vw;}
    .radioBoxTextWrap {border-radius:1.5vw; gap:1.16667vw;}

    .preorderTypeRow .s26formTitle {margin-bottom:2.75vw; gap:2.83333vw;}
    .customSelectWrap {border-radius:1.66667vw 1.66667vw 0 0;}
    .customSelectorTextWrap {padding:0.41667vw; border-width:0.41667vw; border-radius: 1.66667vw;}
    .customSelectorText {padding:0 4.16667vw; border-radius:1.25vw;}
    .customSelectorText:after {right:3.58333vw;}
    .customSelectList {border-radius:0 0 1.66667vw 1.66667vw;}
    .customSelectList li {padding:0 4.58333vw;}
    .customSelectList li + li {border-top-width:0.16667vw;}

    .popAgree {margin-top:7.66811vw;}
    .popAgree .s26formTitle {padding-bottom:3.16vw;}
    .agreeToggleBtn {padding:0 1.66667vw;}
    .agreeList { margin:3.16vw 0;}
    .agreeList .agreeRow {letter-spacing: -1px;}
    .agreeList .agreeRow + .agreeRow {margin-top:1.85069vw;}

    #form_submit {padding: 2.52487vw 0; border-radius: 1.66667vw; margin-top:3.16vw;}
    .btnArrow {height:4.48412vw; right:11.73682vw;}

    .s26ShareRow {gap: 1.33333vw; padding: 0 8.301106vw 4.15vw;}
    .s26ShareBtn {font-size:3.83333vw;}

    #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;}
}
@media screen and (max-width:500px){
    .s26_datas[type="text"] {border-width:2px;}
    #form_submit {letter-spacing: -0.5px;}
    
    .popAgree .s26formTitle {border-bottom-width: 1px;}
}