/* BASIC css start */
.secretBg {position:relative; height:100vh; background: #000e17;}
.secretBg img {width:100%; height:100%; object-fit:cover;}
.secretBg .secretCodeArea {position:absolute; width:50%; max-width:500px; left:50%; top:78.5%; transform:translate(-50%,-50%); display:flex; width:50%;}
.secretCodeArea .secretCode {flex:1;}
.secretCodeArea .secretCode input {width:100%; height:60px; font-size:20px; color:#000; font-weight:bold; text-align:center; line-height:60px; border:0; background:#fff; }
.secretCodeArea .secretBtn {width:35%;}
.secretCodeArea .secretBtn span { display:block; height:60px; font-size:20px; color:#fff; font-weight:700; text-align:center; line-height:60px; cursor:pointer; background:#23aefa;}



@media (max-width:1024px) {
    .secretBg img {object-fit:inherit; height:auto;}
    .secretBg img.pc {display:none;}
    .secretBg img.mo {display:block;}
    .secretBg .secretCodeArea {transform: inherit; width:70%; left: 5%; top: 85vw;}
    .secretCodeArea .secretCode input {font-size:18px;}
    .secretCodeArea .secretBtn span {font-size:18px;}
}

@media (max-width:767px) {
    .secretBg .secretCodeArea{width:90%; top:90vw; }
    .secretCodeArea .secretCode input {height:60px; font-size:14px; line-height:60px;}
    .secretCodeArea .secretBtn span {height:60px; font-size:14px; line-height:60px;}
    .secretCodeArea .secretBtn{width:30%;}
}

/* BASIC css end */