/* 2024-03-10 ryugoon
 * History -
 *
 * 2024-03-10
 *
 */

@import "reset.css";




/* Global */
#wrap {margin: 0;padding: 0;width: 100%;line-height: 0.5;position: relative;}
#wrap img {width: 100%;}
.pc {display: block;}
.mo {display: none;}

.container {width: 100%;text-align: center;}
.sec {max-width: 800px;margin: 0 auto;position: relative;width: 100%;}
.btn {position: absolute;cursor: pointer;}
.btn01 {top: 95.6%;left: 13.5%;width: 72%;height: 4.5%;}

.btn02 {top: 3.2%;left: 7.5%;width: 41.5%;height: 18.2%;}
.btn03 {top: 3.2%;left: 51.3%;width: 41.5%;height: 18.2%;}

.btn04 {top: 22.35%;left: 7.5%;width: 41.5%;height: 18.2%;}
.btn05 {top: 22.35%;left: 51.3%;width: 41.5%;height: 18.2%;}

.btn06 {top: 41.5%;left: 7.5%;width: 41.5%;height: 18.2%;}
.btn07 {top: 41.5%;left: 51.3%;width: 41.5%;height: 18.2%;}

.btn08 {top: 60.6%;left: 7.5%;width: 41.5%;height: 18.2%;}
.btn09 {top: 60.6%;left: 51.3%;width: 41.5%;height: 18.2%;}

.btn10 {top: 80%;left: 7.5%;width: 85%;height: 16.8%;}

.btn11 {top: 73.5%;left: 25.5%;width: 49%;height: 16%;}

.btn14 {top: 78.5%;left: 40.5%;width: 19%;height: 3%;}
.btn15 {top: 85.5%;left: 25.5%;width: 49%;height: 8%;}
.btn16 {top: 2.5%;left: 88.5%;width: 8%;height: 4%;}

.btn17 {top: 73.5%;left: 26.5%;width: 47%;height: 16%;}
.btn18 {top: 73.5%;left: 26.5%;width: 47%;height: 16%;}

.btncl {top: 6%;left: 89.5%;width: 6%;height: 6.8%;}
.btncl2 {top: 6%;left: 89.5%;width: 6%;height: 6.8%;}
.btncl3 {top: 6%;left: 89.5%;width: 6%;height: 6.8%;}

.tBox01 {text-align: center;line-height: 1.4em;font-size: 30px;font-weight: 600;padding: 0 5%;}
.tBox01 {top: 8%;left: 0;width: 100%;}

.inpBox {position: absolute;}
.inpBox01 {top: 52.8%;left: 11.5%;width: 78%;}
.inpBox02 {top: 40%;left: 35%;width: 56%;}
.inpBox04 {top: 49.3%;left: 35%;width: 56%;}
.inpBox03 {top: 59.3%;left: 35%;width: 56%;}
.inpBox05 {top: 70%;left: 17%;}

input[type=text] {width: 100%;font-size: 18px;color: #000;text-align: left;border: none;line-height: 1.5em;ime-mode: active;background-color: transparent;padding: 0 5px;}
input:hover {outline: none;}
input::placeholder {color: #cccccc;}
input::-webkit-input-placeholder {color: #cccccc;}
input:-ms-input-placeholder {color: #cccccc;}
textarea::-webkit-input-placeholder {color: #cccccc;}
textarea:-ms-input-placeholder {color: #cccccc;}
.pop_layer {position:absolute;z-index:9990;background-color:#000;display:none;left:0;top:0;opacity:0.6;}
.popup {display: none;position:absolute;width: 601px;margin: 0 auto;}
.popup img { display:block; height:auto; }    /* inline gap/줄맞춤 이슈 제거 */
.popup {z-index: 9991;}
.popup.pop_notice {top:2%;}


.inpBox01 input[type=text], .inpBox02 input[type=text], .inpBox03 input[type=text], .inpBox04 input[type=text] {font-size: 38px;color: #000;text-align: center;background-color: transparent;}

input[id="q_agree"] {width: 30px;height: 30px;border: 1px solid #000000;background-color: #fff;}

.policy_pop{display: none;position: absolute;z-index: 9991;width: 33%;height: 36.3%;background: #fff;text-align: center;padding: 0;}   
.policy_pop h2 {font-size: 20px;line-height: 3.5em;}
.policy_pop .policy_div {overflow-y: auto;height: 69%;width: 90%;padding: 5px;text-align: left;margin: 0 auto;margin-bottom: 20px;border: 1px solid #dadada;line-height: 1.2em;}

/*#######################*/
/*##    viewport 800   ##*/
/*#######################*/
@media screen and (max-width: 800px){
  .sec {max-width: 100%;width: 100%;}
  .container img {width: 100%;}

  .popup {width: 90% !important;}
  
}

/*#######################*/
/*##    viewport 730   ##*/
/*#######################*/
@media screen and (max-width: 730px){
  .sec {max-width: 100%;width: 100%;}
  .tBox01 {font-size: 18px;}
  .inpBox01 input[type=text], .inpBox02 input[type=text], .inpBox03 input[type=text], .inpBox04 input[type=text] {
    font-size: 22px;
    color: #000;
    text-align: center;
    background-color: transparent;
  }
  .inpBox01 {top: 52.3%;}
  .inpBox05 {top: 69.7%;left: 17.5%;}
  input[id="q_agree"] {width: 16px;height: 16px;border: 1px solid #000000;background-color: #fff;}
  #comp_prize {font-size: 28px !important;}
  .policy_pop {width: 83%;height: 51.3%;    left: 32.5px !important;}

}

/*#######################*/
/*##    viewport 480   ##*/
/*#######################*/
@media screen and (max-width: 480px){
    
.sec {max-width: 100%;width: 100%;}

}