@media screen and (min-width:100px) and (max-width:389.99px) {
    /***  frame 360 height:640 ***/
    .frame {
        position: fixed;
        top: 50%;
        left: 50%;
        height: 640px;
        width: 360px;
        background-color: var(--p-yellow);
        transform: translate(-50%, -50%);
        background-position-x: 50%;
        background-position-y: 50%;
    }
    .inner {
        position: absolute;
        height: 640px;
        width: 360px;
        overflow-y: auto;
    }

    /*   .ios
    {
        height:659px;
     
    }*/
    .frame_i {
        background-size: cover;
        background-image: url("../img/framei/360.png");
    }
    .frame_q {
        background-size: cover;
        background-image: url("../img/frameq/360.png");
    }
    .frame_s {
        background-size: cover;
        background-image: url("../img/frames/360.png");
    }
    .frame_t {
        background-size: cover;
        background-image: url("../img/framet/360.png");
    }
       .frame_t_ios {
        background-size: cover;
        background-image: url("../img/framet/360_i.png");
    }
    .frame_b {
        background-size: cover;
        background-image: url("../img/frameb/360.png");
    }
    .frame_w {
        background-size: cover;
        background-image: url("../img/framew/360.png");
    }
    .frame_c {
        background-size: cover;
        background-image: url("../img/framec/360.png");
    }
    .button_i {
        width: 144px;
        height: 56px;
        position: absolute;
        bottom: 16px;
        left: calc(50% - 72px);
        background: transparent;
    }
    .button_b {
        position: absolute;
        width: 64px;
        height: 64px;
        bottom: 164px;
        right: 24px;
        background: transparent;

    }
    .button_t {
        position: absolute;
        width: 64px;
        height: 64px;
        top: 24px;
        right: 24px;
        background: transparent;
    }
    .text_b {

        position: absolute;
        width: calc(100% - 64px);
        left: 32px;
        top: 492px;
        font-family: 'Hahmlet';
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 27.2px */
    }

    .stage_p {
        position: absolute;
        width: 51px;
        height: 15px;
        left: 40px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .stage_p1 {
        position: absolute;
        width: 9px;
        height: 15px;
        left: 118.5px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .money_p {
        position: absolute;
        width: 113px;
        height: 15px;
        right: 24px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
    .q1_text,
    .q2_text
    {
                position: absolute;
                display: flex;
 
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
flex: 1 0 0;
align-self: stretch;

        width: 147px;
        bottom: 24px;
        height: 195px;
   padding: 0px 0px 8px 16px;
    }
    .q1_text p,
    .q2_text p {
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;

        color: black;
        text-align: center;
   
     height: 76.8px;
        display: flex;
;
        align-items: anchor-center;

    }
    .q1_text {
        left: 24px;
    }
    .q2_text {
        right: 24px;
    }
    .button_q1,
    .button_q2 {
        position: absolute;
        top: 413.22px;
        width: 132px;
        height: 187px;
        background: transparent;
    }
    .button_q1 {

        left: 24px;

    }
    .button_q2 {

        right: 24px;

    }
    .question_p {
        position: absolute;
        left: 0;
        top: 72px;
        color: #FFF;
        text-align: center;

        /* Gothic A1/지시문 */
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        /* 25.6px */
        display: flex;
        width: 360px;
        height: 341px;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
    }
    #slot_d,
    #slot_gif {
        position: absolute;
        width: 322px;
        left: 19px;
        bottom: 188px;
    }
    .touch_b
    {
        bottom:382px;
    }
      .down_b
    {
        bottom:372px;
    }
    .border-rb,
    .border-lb
    {
              width:148px;
         height:187px;
    }
}

@media screen and (min-width:390px) and (max-width:411.99px) {
    /***  frame 390 height 693   ***/
    .frame {

        position: fixed;
        top: 50%;
        left: 50%;
        height: 693px;

        width: 390px;
        background-color: var(--p-yellow);
        transform: translate(-50%, -50%);
        background-position-x: 50%;
        background-position-y: 50%;
    }
    .ios {
        height: 659px;

    }
    .inner {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow-y: auto;
    }
    .frame_i {
        background-size: cover;
        background-image: url("../img/framei/390.png");
    }
    .frame_i_ios {
        background-image: url("../img/framei/390_i.png") !important;
    }
    .frame_s {
        background-size: cover;
        background-image: url("../img/frames/390.png");
    }
    .frame_s_ios {
        background-image: url("../img/frames/390_i.png") !important;
    }
    .frame_q {
        background-size: cover;
        background-image: url("../img/frameq/390.png");
    }
    .frame_q_ios {
        background-image: url("../img/frameq/390_i.png") !important;
    }

    .frame_t {
        background-size: cover;
        background-image: url("../img/framet/390.png");
    }
    .frame_t_ios {
        background-image: url("../img/framet/390_i.png") !important;
    }
    .frame_b {
        background-size: cover;
        background-image: url("../img/frameb/390.png");
    }
    .frame_b_ios {

        background-image: url("../img/frameb/390_i.png") !important;
    }
    .frame_w {
        background-size: cover;
        background-image: url("../img/framew/390.png");
    }
       .frame_w_ios {
        background-size: cover;
        background-image: url("../img/framew/390_i.png");
    }
    .frame_c {
        background-size: cover;
        background-image: url("../img/framec/390.png");
    }
       .frame_c_ios {
        background-size: cover;
        background-image: url("../img/framec/390_i.png");
    }
    .button_i {
        width: 144px;
        height: 56px;
        position: absolute;
        bottom: 16px;
        left: calc(50% - 72px);
        background: transparent;
    }
    .button_b {

        position: absolute;
        width: 64px;
        height: 64px;
        bottom: 164px;
        right: 24px;
        background: transparent;
    }
    .button_t {
        position: absolute;
        width: 64px;
        height: 64px;
        top: 24px;
        right: 24px;
        background: transparent;
    }

    .text_b {

        position: absolute;
        width: calc(100% - 64px);
        left: 32px;
        top: 545px;
        font-family: 'Hahmlet';
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 27.2px */
    }
    .text_b_ios {

        top: 511px !important;
    }

    .stage_p {
        position: absolute;
        width: 51px;
        height: 15px;
        left: 40px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .stage_p1 {
        position: absolute;
        width: 9px;
        height: 15px;
        left: 118.5px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .money_p {
        position: absolute;
        width: 113px;
        height: 15px;
        right: 24px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
   .q1_text,
    .q2_text
    {
                position: absolute;
                display: flex;
 
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
flex: 1 0 0;
align-self: stretch;

        width: 147px;
        bottom: 24px;
        height: 213px;
   padding: 0px 0px 8px 16px;
    }
    .q1_text p,
    .q2_text p {
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;

        color: black;
        text-align: center;
           height: 76.8px;
     

    }
    .q1_text_ios,
    .q2_text_ios
    {
        bottom: 24px;
    }
    .q1_text {
        left: 31.95px;
    }
    .q2_text {
        right: 31.95px;
    }
    .button_q1,
    .button_q2 {
        position: absolute;
        top: 448.87px;
        width: 147px;
        height: 220px;
        background: transparent;
    }
    .buu_ios
    {
           height: 186px !important;
    }
    .button_q1 {

        left: 25px;

    }
    .button_q2 {

        right: 25px;

    }
    .question_p {
        position: absolute;
        left: 0;
        top: 72px;
        color: #FFF;
        text-align: center;

        /* Gothic A1/지시문 */
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        /* 25.6px */
        display: flex;
        width: 390px;
        height: 377px;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
    }
        .question_p_ios {
 
        height: 343px !important;;
 
    }
    #slot_d,
    #slot_gif {
        position: absolute;
        width: 358px;
        left: 16px;
        bottom: 188px;
    }
        .touch_b
    {
        bottom:401px;
    }
          .down_b
    {
        bottom:391px;
    }
         .border-rb,
             .border-lb
             {
         width:157px ;
         height:204px;
             }
}
    .border-rb-ios,
             .border-lb-ios
             {
         width:157px !important;
         height:194px !important;
             }

@media screen and (min-width:412px) and (max-width:427.99px) {
    /***  frame 412   height 732    ***/
    .frame {

        position: fixed;
        top: 50%;
        left: 50%;
        height: 732px;
        width: 412px;
        background-color: var(--p-yellow);
        transform: translate(-50%, -50%);
        background-position-x: 50%;
        background-position-y: 50%;
    }
    .inner {
        position: absolute;
        height: 732px;
        width: 412px;
        overflow-y: auto˙
    }
    .ios {
        height: 698px;

    }
    .frame_i {
        background-size: cover;
        background-image: url("../img/framei/412.png");
    }
    .frame_i_ios {
        background-image: url("../img/framei/412_i.png") !important;
    }
    .frame_s {
        background-size: cover;
        background-image: url("../img/frames/412.png");
    }
    .frame_s_ios {
        background-image: url("../img/frames/412_i.png") !important;
    }
    .frame_q {
        background-size: cover;
        background-image: url("../img/frameq/412.png");
    }
    .frame_q_ios {
        background-image: url("../img/frameq/412_i.png") !important;
    }

    .frame_t {
        background-size: cover;
        background-image: url("../img/framet/412.png");
    }
    .frame_t_ios {
        background-image: url("../img/framet/412_i.png") !important;
    }
    .frame_b {
        background-size: cover;
        background-image: url("../img/frameb/412.png");
    }
    .frame_b_ios {

        background-image: url("../img/frameb/412_i.png") !important;
    }
    .frame_w {
        background-size: cover;
        background-image: url("../img/framew/412.png");
    }
    .frame_c {
        background-size: cover;
        background-image: url("../img/framec/412.png");
    }

    .button_i {
        width: 144px;
        height: 56px;
        position: absolute;
        bottom: 16px;
        left: calc(50% - 72px);
        background: transparent;
    }
    .button_b {
        position: absolute;
        width: 64px;
        height: 64px;
        bottom: 164px;
        right: 24px;
        background: transparent;
    }
    .button_t {
        position: absolute;
        width: 64px;
        height: 64px;
        top: 24px;
        right: 24px;
        background: transparent;
    }
    .text_b {

        position: absolute;
        width: calc(100% - 64px);
        left: 32px;
        top: 584px;
        font-family: 'Hahmlet';
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 27.2px */
    }

    .stage_p {
        position: absolute;
        width: 51px;
        height: 15px;
        left: 40px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .stage_p1 {
        position: absolute;
        width: 9px;
        height: 15px;
        left: 118.5px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .money_p {
        position: absolute;
        width: 113px;
        height: 15px;
        right: 24px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
    .q1_text,
    .q2_text {
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        position: absolute;
        color: black;
        text-align: center;
  height: 234px;
        width: 161px;
           display: flex;
 
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
bottom:24px;
    }
      .q1_text p,
    .q2_text p {
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;

        color: black;
        text-align: center;
           height: 76.8px;
     

    }
    .q1_text {
        left: 30.44px;
    }
    .q2_text {
        right: 30.44px;
    }
    .button_q1,
    .button_q2 {
        position: absolute;
        top: 474.87px;
        width: 174px;
        height: 233px;
        background: transparent;
    }
    .button_q1 {

        left: 24px;

    }
    .button_q2 {

        right: 24px;

    }
    .question_p {
        position: absolute;
        left: 0;
        top: 72px;
        color: #FFF;
        text-align: center;

        /* Gothic A1/지시문 */
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        /* 25.6px */
        display: flex;
        width: 412px;
        height: 403px;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
    }
    #slot_d,
    #slot_gif {
        position: absolute;
        width: 384px;
        left: 14px;
        bottom: 188px;
    }
         .touch_b
    {
        bottom:416px;
    }
        .down_b
    {
        bottom:406px;
    }
        .border-rb,
             .border-lb
             {
         width:158px !important;
         height:217px !important;
             }
}
@media screen and (min-width:428px) {
    /***  frame 428   height 761  ***/
    .frame {
        position: fixed;
        top: 50%;
        left: 50%;
        height: 761px;
        width: 428px;
        background-color: var(--p-yellow);
        transform: translate(-50%, -50%);
        background-position-x: 50%;
        background-position-y: 50%;
    }
    .inner {
        position: absolute;
        height: 761px;
        width: 428px;
        overflow-y: auto;
    }
    .ios {
        height: 727px;

    }
    .frame_i {
        background-size: cover;
        background-image: url("../img/framei/428.png");
    }
    .frame_i_ios {
        background-image: url("../img/framei/428_i.png") !important;
    }
    .frame_s {
        background-size: cover;
        background-image: url("../img/frames/428.png");
    }
    .frame_s_ios {
        background-image: url("../img/frames/428_i.png") !important;
    }
    .frame_q {
        background-size: cover;
        background-image: url("../img/frameq/428.png");
    }
    .frame_q_ios {
        background-image: url("../img/frameq/428_i.png") !important;
    }

    .frame_t {
        background-size: cover;
        background-image: url("../img/framet/428.png");
    }
    .frame_t_ios {
        background-image: url("../img/framet/428_i.png") !important;
    }
    .frame_b {
        background-size: cover;
        background-image: url("../img/frameb/428.png");
    }
    .frame_b_ios {
        background-image: url("../img/frameb/428_i.png") !important;
    }
    .frame_w {
        background-size: cover;
        background-image: url("../img/framew/428.png");
    }
    .frame_c {
        background-size: cover;
        background-image: url("../img/framec/428.png");
    }
    .button_i {
        width: 144px;
        height: 56px;
        position: absolute;
        bottom: 16px;
        left: calc(50% - 72px);
        background: transparent;
    }
    .button_b {

        position: absolute;
        width: 64px;
        height: 64px;
        bottom: 164px;
        right: 24px;
        background: transparent;
    }
    .button_t {
        position: absolute;
        width: 64px;
        height: 64px;
        top: 24px;
        right: 24px;
        background: transparent;
    }
    .text_b {

        position: absolute;
        width: calc(100% - 64px);
        left: 32px;
        top: 613px;
        font-family: 'Hahmlet';
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 27.2px */
    }
    .stage_p {
        position: absolute;
        width: 51px;
        height: 15px;
        left: 40px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .stage_p1 {
        position: absolute;
        width: 9px;
        height: 15px;
        left: 118.5px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 14.5px */
        letter-spacing: 1.45px;
    }
    .money_p {
        position: absolute;
        width: 113px;
        height: 15px;
        right: 24px;
        top: 33px;
        color: #FFF;

        text-align: center;
        /* Gothic A1/btn label S 10% */
        font-family: "Gothic A1";
        font-size: 14.5px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
 
    .q1_text {
        left: 24px;
    }
    .q2_text {
        right: 24px;
    }

 .q1_text,
    .q2_text {
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        position: absolute;
        color: black;
        text-align: center;
height: 245px;
        width: 182px;
           display: flex;
 
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
bottom:24px;
    }
      .q1_text p,
    .q2_text p {
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;

        color: black;
        text-align: center;
           height: 76.8px;
     

    }

    .button_q1,
    .button_q2 {
        position: absolute;
        top: 494px;
        width: 182px;
        height: 243px;
        background: transparent;
    }
    .button_q1 {

        left: 24px;

    }
    .button_q2 {

        right: 24px;

    }
    .question_p {
        position: absolute;
        left: 0;
        top: 72px;
        color: #FFF;
        text-align: center;

        /* Gothic A1/지시문 */
        font-family: "Gothic A1";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        /* 25.6px */
        display: flex;
        width: 428px;
        height: 403px;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
    }
    #slot_d,
    #slot_gif {
        position: absolute;
        width: 404px;
        left: 11px;
        bottom: 188px;
    }
            .touch_b
    {
        bottom:426px;
    }
             .down_b
    {
        bottom:416px;
    }
      .border-rb,
             .border-lb
             {
         width:165px !important;
         height:226px !important;
             }
}