body {
    /*font-family: 'Sniglet', cursive !important;*/
}
.hide{ display:none; }
.show{ display:block; }
.bold{ font-weight:bold; }
.w320, .w640, .w1024{ display:none !important; }
a{
  text-decoration: none;
}
/*#home .ui-link img {
  max-width: 100%;
  vertical-align: middle;
}*/
img {
  max-width: 100%;
  vertical-align: middle;
}

/*img:not(.text){
    vertical-align: middle;
}*/

input:focus{
  border: 0px;
  outline: 0px;
}
/*.section .inner{ position:relative; height:100%; }*/
/*.section .inner{ position:relative; }*/
.select_section {
  position: absolute;
  box-sizing: border-box;
  /*height: 56px;*/
  /*border-bottom: 1px solid #d8d8d8;*/
  /*border: 1px solid ;*/
  width: 100%;
  padding: 8px;
}

.select_section .inner {
  /*border: 1px solid red ;*/
  box-sizing: border-box;
  /*width: 95%;*/
  padding-right: 1px;
}

.select_section .inner > * {
  vertical-align: middle;
}


/*div {border : 1px solid red;}*/
.info_section{
border: 1px solid blue;
margin: 0 auto;
/*height:250px; */
margin-top: 10px; width : 100%
/*border: 1px solid red;*/
}
.info_section .title, .play{

  /*margin: 15px;*/
  text-align:right;
  line-height:41px;
  height: 100px;
}
.info_section div.inner img {
  width: 50%; vertical-align: middle ; max-width: 326px;}
.info_section .play{
  border: 1px solid ;
  /*float right;*/

  display:block;position: absolute;
  z-index: 9999
}
.image_section {
  margin-top: 10%;
  /*background-color: white;
  height: 250px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid red;
  margin: 10px auto;
  */
}

.image_section .next, .image_section .prev {
  z-index: 3;
  position: absolute;
  top: 55%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  /*background-color: #1A342C;
  background-color: rgba(26, 52, 44, 0.75);*/
  -webkit-transition: padding 100ms ease-in-out;
  -moz-transition: padding 100ms ease-in-out;
  -o-transition: padding 100ms ease-in-out;
  transition: padding 100ms ease-in-out;
  padding: 1.25em 0.5em;
  width: 22px;
  margin: 0 auto;


}
.image_section .next:hover, .image_section .prev:hover {
  /*background-color: #1A342C;
  background-color: #1a342c;*/
   /*padding: 1.5em 0.45em 1.4em;*/
}
.question_word  .text:hover  {
 /*background-color: #ededed;*/
  /*padding: 1.5em 0.45em 1.4em;*/
}
/*@media (min-width: 30em) {
  .next, .prev {
       padding: 2.25em 1.25em;
  }
  .next:hover, .prev:hover {
       padding: 2.25em 2em 2.25em 2em;
  }
}*/
.image_section .prev {
  left: 0;
  visibility: visible;
  opacity: 0.3;
  width :50px;
  transition-delay: 0s;
}

.image_section .next{
  right: 0;
  visibility: visible;
  opacity: 0.3;
  transition-delay: 0s;
  width :50px;

}

.choose {
  /*border: 1px solid blue;*/
  position: relative;
  font-size : 1.5em;
  text-align: center;
  top: -150px;
  width:98%;
  opacity: 0.5;
}
#Choose {
  /*position: relative;*/
  /*left: -25px;*/
  top: -55px;
  text-align:right;
  /*color : blue;*/
  opacity: 0.2;
  /*font-size : 70%*/


}

/*#correct, #incorrect {
  left: 50%;
  margin-top: -167px;
  margin-left: -69px;
  width : 10%;
}*/

#correct, #incorrect {
 position: absolute;
 left: 50% ;
 width:10% ;
 top : 100px;

}
.question_section {
  /*background-color: white;
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;*/
}

.question_section .inner {
  /*box-sizing: border-box;
  border: 2px solid #c5c3c6;
  height: 45px;
  background: #c5c3c6;*/
}

.question_section .answer {
  /*position: relative;*/

  /*border: 1px solid #E1ECF3;
  height: 40px;
  background: #c5c3c6;*/
}

.fingerImg{
  position: absolute;
  top: 45px;
  left: 70px;
  width:  50px;
  height: 50px;
}
.fingerImg2{
  position: absolute;
  top: 40%;
  left: 50%;
  /*opacity: 0.5;*/
}
#Home {
 /*border: 1px solid red;*/
 position: absolute;
 top: 95px;
 left:30px;
 width: 50px;
 height:50px;
}

.question_section .answer #answer_number {
  position: relative;
  width: 30px;
  height: 30px;
  margin-top: 6px;
  margin-left: 5px;
  padding: 4px;
  /*border: 1px solid #1985a1;*/
  /*background: #38c;
  color: white;*/
  color : black;
  text-align: center;
  float: left;
  left:30px;
  border-radius: 30%;
  font-size:1.5em;

}

.question_section .answer .answer_sentence {
  word-break: normal;
  /*height: 66px;*/
  top: 15px;
  left: 60px;
  position: relative;
  /*position: absolute;*/
  /*padding-right: 50px;*/
  font-size:2em;
  letter-spacing: 0px;

}

.question_section .mp3 {
  padding: 3px;
  position: absolute;
  top: 0px;
  right: 0;
  font-size: 30px;
  color: #333;
  /*color:#38c;*/

  /*background: #1985a1;*/
  /*border-radius: 100px;*/
  opacity: 0.6
}
.image_section .example_image,  {
 text-align: center;
 height:200px;
 /*border: 1px solid blue;*/

}
.imgresize{
  width: 85%!important;
}
/*@media all and (max-width: 568px) {
  .image_section {
      background-color: white;
      height: 450px;
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto;
  }
  .image_section .inner {
      box-sizing: border-box;
      border: 0px solid #D3E0EC;
      height: 75%;
      width: 50%;
      border: 1px solid orange;
      margin: 0px auto;

  }

}*/
.example_image1 .inner{
   margin: 0 auto;
   text-align: center;

}
.example_image1 img{
   max-width: 150px;
   cursor: pointer;
}
.question_word1. question_image{

}

/* 320 이상*/
@media all and (min-width: 320px) {
  .image_section {
      background-color: white;
      /*height: 300px;*/
      /*width: 100%;*/  - -iphone 6 ~ 수정
      width: 80%;
      box-sizing: border-box;
      margin: 0 auto;
      margin-top:30px;

  }
  /*div 그림 이미지 부모 영역*/
  .image_section .inner {
      box-sizing: border-box;
      /*border: 0px solid #D3E0EC;*/
      /*height: 50%;*/
      /*width: 60%;*/
      /*border: 1px solid orange;*/
      margin: 0px auto;

  }

  .image_section .example_image img {
      height: auto;
      /*width: 250px;*/
  }
  .question_word, question_word1 {
      display: table;
      width: 100%;
      /*position: absolute;          */
      position: relative;
      top:0px;
      /*top:-20px;*/
      /*background-color: #f9f9f9;*/
      font-size: 0.75em;
      /*width: 80%;*/
  }

  .question_word div{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      border: 1px solid black;
      width: 100px;
      font-size : 2em;
      border-radius: 10px;
      cursor:pointer;
      padding: 5px;

      /*letter-spacing:2px;*/
      font-family: 'Sniglet', cursive !important;
  }
  .question_word1{
      /*margin: 0 auto;*/

  }
  .question_word1 div {
      /*display: table-cell;*/
      text-align: center;
      vertical-align: middle;
      /*border: 1px solid black;*/
      width: 160px;
      /*font-size : 2em;*/
      border-radius: 10px;
      cursor:pointer;
      padding: 2px;

  }
  .text{
      border: 2px solid #c5c3c6;
  }


  #correct, #incorrect {
      position: absolute;
      left: 50%;
      /*top: 200px;
      margin-top: -67px;*/
      margin-left: -69px;
  }

  .question_word1 img#cimage.question_image{
      width:80% !important;
  }

}

/* 320이상 639이하 */
@media all and (min-width:320px) and (max-width:567px){
  .answer_sentence{
      font-size: 1em !important;
      left:40px !important;
      height: 30px;
  }

  #correct, #incorrect {
      /*position: absolute;*/
      left: 50% ;
      width:20% !important ;
      top:-100px;
  }

  .question_word1 div {
      /*width: 130px !important;*/
  }
  example_image1 img{
      max-width: 150px !important;
  }
  .ui-link img{
      width: 60%;
  }

}
/* 320이상 639이하 */
@media all and (min-width:320px) and (max-width:388px){
    .image_section .example_image {
       height: 250px;
       line-height: 250px;
       vertical-align: middle;
       text-align: center;
       border-radius: 11px;
       margin-top: 10%;
       /*border: 2px solid;*/

    }
    .prev, .next{
        top:45% !important;
        height:100px !important;
        line-height: 100px !important;
        /*border:1px solid !important;*/
        text-align: center !important;
    }
    .answer_sentence{
        font-size: 1.2em !important;
        left:40px !important;
        height: 30px;
    }
    .ui-navbar li .ui-btn{
        font-size: 10px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .example_image img, a.ui-link img{
        width : 70% !important;
    }
    #correct, #incorrect {
        /*position: absolute;*/
        left: 55% ;
        width:20% !important ;
        top:-90px;
    }

    .image_section .next, .image_section .prev {
        top: 50%;
    }
    .image_section{
        margin-top: 10%;
    }
    .question_word{
        font-size: 9px !important ;
    }
}
/*@media all and (min-width:375px) {
    img{
        width : 100% !important;
    }
    a.ui-like img{
        width: 60% !important;
    }
}
@media all and (min-width:414px) {
    img{
        width : 100% !important;
    }
    a.ui-like img{
        width: 60% !important;
    }
}*/
/* 414px */
@media all and (min-width:414px) and (max-width:414px){
  .image_section .example_image {
     height: 250px;
     line-height: 300px;
     vertical-align: middle;
     text-align: center;
     border-radius: 11px;
     margin-top: 20%;
     /*border: 2px solid;*/

  }
  .prev, .next{
      top:43% !important;
      height:100px !important;
      line-height: 100px !important;
      /*border:1px solid !important;*/
      text-align: center !important;
  }
  .answer_sentence{
      font-size: 1.2em !important;
      left:40px !important;
      height: 30px;
  }
  .ui-navbar li .ui-btn{
      font-size: 10px !important;
      padding-top: 20px !important;
      padding-bottom: 20px !important;
  }
  .example_image img, a.ui-link img{
      width : 70% !important;
  }
  #correct, #incorrect {
      /*position: absolute;*/
      left: 50% ;
      width:20% !important ;
      top:-50px;
  }

  .image_section .next, .image_section .prev {
      top: 50%;
  }
  .image_section{
      margin-top: 10%;
  }
  .question_word{
      font-size: 10px !important ;
      top:70px;
  }
  .question_section .answer .answer_sentence{
      font-size: 1.2em !important;
      letter-spacing: 0px;
  }
  #home img{
      width: 60%  !important;
  }
  .question_word1 div {
      width: 180px;
  }
}
/* 568이상 iphone5 가로*/
@media all and (min-width:568px){
  .image_section .example_image {
      width: auto;
      height: auto;
      width: 180px;
      margin-top: 7% !important;
      border-radius: 10px;
      margin: 0 auto;
      overflow: hidden;
      border-color: #38c;
  }
  .question_word {
      position: relative;
      /*top:-30px;*/
      top:0px;
  }
  .select_section .inner {
      /*border: 1px solid red ;*/
      box-sizing: border-box;
      /*width: 95%;*/
      padding-right: 1px;
      top : -150px;
  }

  #correct, #incorrect {
      position: absolute;
      left: 50% ;
      width:13% !important;
      top:-150px;

  }
  .example_image1 img{
      max-width: 200px;
  }
  /*.ui-link img{
      width: 70%;
  }*/
  .question_word1 div {
      display: table-cell;
      width: 3000px !important;

  }
  .question_section .answer .answer_sentence{
      font-size: 1em !important;
      letter-spacing: 0px;
  }

}
@media all and (min-width:568px){
    .question_image {
      width: 90% !important;

    }
}
/* 640이상*/
@media all and (min-width:640px){

  .image_section .example_image {
      width: auto;
      height: auto;
      width: 200px;
      margin-top: 20px;
      border-radius: 10px;
      margin: 0 auto;
      overflow: hidden;
      border-color: #38c;
  }
  .question_word {
      /*position: relative;*/
      /*top:-30px;*/
      /*top:0px;*/
      margin: 10px auto;

  }
  .select_section .inner {
      /*border: 1px solid red ;*/
      box-sizing: border-box;
      /*width: 95%;*/
      padding-right: 1px;
      top : -150px;
  }

  #correct, #incorrect {
      position: absolute;
      left: 50% ;
      width:12% !important;
      top:-140px;

  }
  /*.example_image img#cimage.question_image{
      width:70% !important;
  }*/

  .question_image {
    width: 100% !important;
  }

  .question_word1{
      margin-top: 4%;
  }
  .question_word1 div {
      display: table-cell;
      width: 3000px !important;

  }
  .question_section .answer .answer_sentence{
      font-size: 1.5em !important;
      letter-spacing: 0px;
  }
  .example_image{
      /*margin-top: 7% !important;*/
  }

}
/*iphone 6 가로*/
@media all and (min-width:667px){
    .image_section .example_image{
        margin-top: 5% !important;
    }
    .image_section .example_image img{
        /*width: 190px !important;*/
    }
    .question_word{
        top: -10px;
    }

}
/*iphone 6 plus 가로*/
@media all and (min-width:736px){
    .question_image{
        width:100% !important;
    }
}
/*삼성 갤럭시 세로 탭10.5*/
@media all and (min-width: 768px) {
  .image_section{
      margin-top: 20%;
  }
  .image_section .example_image {

      width: auto; height: auto;
      width: 320px;
      /*height: 550px;*/
      border-radius: 10px;
      margin: 0 auto;
      overflow: hidden;
      border-color: #38c;
      margin-top: 80px;
      text-align: center;
  }
  .image_section div.inner img {
    /*position: relative;*/
    width: 100%;
    vertical-align: middle ;
    max-width: 320px;
    /*top:20px;*/
    /*border: 1px solid red;*/
    /*max-width: 726px;*/
  }
  .select_section .inner {
      /*border: 1px solid red ;*/
      box-sizing: border-box;
      /*width: 95%;*/
      padding-right: 1px;
      top : -90px;
  }
    /* 문제풀이 단어 위치  */
  .question_word {
      top:100px;
  }
  .prev, .next{
      top:40% !important;
  }
  #correct, #incorrect {
      position: absolute;
      left: 50% ;
      width:18% !important;
      top : -100px;

  }
  .question_image{
      width:100% !important;
  }
  .question_word1{
       /*margin: 100px auto;*/
       margin-top: 7%;
       width:100% !important;
  }
  .example_image1 .inner{
      /*height: 250px;*/
      /*width: 50%;*/
  }
  .question_word1 .inner{
     /*border: 1px solid red;*/
     display: table-cell;
     text-align: center;
  }
  .question_section .answer .answer_sentence{
      font-size: 2em !important;
      letter-spacing: 1px;
  }
  .question_word1 img#cimage.question_image{
      width:100% !important;
  }

}
/*ipad pro (세로  )*/
@media all and (min-width: 834px) {
  .image_section{
      margin-top: 20%;
  }
  .image_section .example_image {

      width: auto; height: auto;
      width: 320px;
      height: 550px;
      border-radius: 10px;
      margin: 0 auto;
      overflow: hidden;
      border-color: #38c;
      margin-top: 80px;
  }
  .image_section div.inner img {
    position: relative;
    width: 100%;
    vertical-align: middle ;
    max-width: 320px;
    /*top:20px;*/
    /*border: 1px solid red;*/
    /*max-width: 726px;*/
  }
  .select_section .inner {
      /*border: 1px solid red ;*/
      box-sizing: border-box;
      /*width: 95%;*/
      padding-right: 1px;
      top : -90px;
  }

  .question_word {
      top:0px;

  }

  .prev, .next{
      top:40% !important;
  }
  #correct, #incorrect {
      position: absolute;
      left: 50% ;
      width:15% !important;
      top : -180px;

  }
  .question_image{
      width:100% !important;
  }


}
/*삼성 갤럭시 가로 탭10.5*/
@media all and (min-width: 1000px) {
  .image_section{
      height : 430px;
      margin-top: 3%;
  }
  .image_section .example_image {

        /*width: auto; height: auto;*/
        /*max-width: 300px;
        max-height: 600px;*/
        width: 320px;
        /*height: 350px;*/
        height: auto;
        border-radius: 10px;
        margin: 0 auto;
        overflow: hidden;
        /*border: 2px solid #38c;*/
        border-color: #38c;
        /*opacity: 0.6;*/
        /*margin-bottom: 5px;*/
        /*float: left;*/
        /*margin: 0, auto;*/
        margin-top: 80px;


  }
  .image_section div.inner img {
    position: relative;
    width: 100%;
    vertical-align: middle ;
    /*max-width: 540px;*/
    /*top:50px;*/
    /*border: 1px solid red;*/
    /*max-width: 726px;*/
  }
  .select_section .inner {
      /*border: 1px solid red ;*/
      box-sizing: border-box;
      /*width: 95%;*/
      padding-right: 1px;
      top : -150px;
  }
  #correct, #incorrect {
      /*position: absolute;*/
      left: 50% ;
      width:12% !important;
      top : -150px;

  }

  .prev, .next{
      top:45% !important;
  }
  .question_image{
      /*width:120% !important;*/
  }
  .question_word1 div {
      padding: 10px;
      top:-50px;
  }

  .example_image1 inner {
      height: 100px !important;
  }
  .example_image1 .inner .img{
      top : 20px !important;
  }
}

@media (min-height: 768px) and (min-width: 1024px) {
    .example_image1 {
        margin: 10px auto;
    }
    .question_word1 {
        margin: 10px auto;
    }
    .question_word {
        margin: 80px auto;
    }
    /*.image_section div.inner img{
        max-width: 500px;
    }*/

}

@media (min-height: 1366px) and (min-width: 1024px) {
    .example_image1 {
        margin: 20px auto;
    }
    .example_image {
        margin: 200px auto;
    }
    .question_word1 {
        margin: 10px auto;
    }
    .question_word {
        margin: 250px auto;
    }
}
/*삼성 갤럭시 가로 탭10.5*/
/*@media all and (min-height: 768px) {
}*/
@media all and (min-width: 1024px) {
    .example_image1 {
        margin: 0px auto;
    }
    .question_word1 {
        margin: 50px auto;
    }
    .question_word {
        font-size: 1em;
    }
    #correct, #incorrect {
        left: 50% ;
        width:10% !important;
        top : -120px;
    }
}
/* ipad pro */
@media all and (min-width: 1112px) {
  .image_section{
      height : 430px;
      margin-top: 5%;
      /*margin: 100px auto;*/
      /*border: 1px solid red;*/
  }
  .prev, .next{
      top:45% !important;
  }
  .question_word {
      top:50px;
      margin: 50px auto;
      font-size: 1em;

  }
  #correct, #incorrect {
      left: 50% ;
      width:13% !important;
      top : -150px;
  }
  .example_image1 {
      margin: 50px auto;

  }

}
@media all and (min-width: 1200px) {
  .image_section{
      height : 430px;
      margin-top: 5%;
      /*border: 1px solid red;*/
  }
  .image_section .example_image{
      width : 450px !important;
  }
  .prev, .next{
      top:45% !important;
  }
  .question_word {
      /*top:0px;*/
      margin: 0px auto;
      font-size: 1em;

  }
  #correct, #incorrect {
      left: 50% ;
      width:10% !important;
      top : -250px;
  }
}
@media all and (min-width: 1800px) {
  .image_section{
      margin-top: 5%;
      /*border: 1px solid red;*/
  }
  .prev, .next{
      top:45% !important;
  }
  .question_word {
      top:130px;

  }
  .question_word1 {
      margin: 40px auto;

  }
  #correct, #incorrect {
      left: 50% ;
      width:7% !important;
      top : -200px;
  }
  .image_section div.inner img {
    max-width: 450px;
  }
}
@media all and (max-height:320px){
  .question_image{
      /*width : 80% !important ;*/
  }

  .queen_word{
      top:15px !important;
  }
}