body {background: #ffffda;margin:0px;}
.container {width:100%;margin:0 auto;overflow:hidden; }  
#main, #result, #btn-retry, #btn-next {position:relative;}
#main {width:100%;}  
#main img, #result img, #btn-retry img, #btn-next img {width:100%; height:auto; display:block;}
#main img {margin-top:-8px;}
area { outline:none; }

#sns-link {width:100%;text-align:center;}
.sns-image {border-radius:50%;}
.sns-btn {border-radius: 50%;vertical-align:middle}
#sns-header {margin-top:1em;margin-bottom:0.5em;}
#sns-footer {margin-top:2em;margin-bottom:2em;}
#sns-header img, #sns-footer img {width:100%;}
#threestar {width:50%;}

@media (min-width:320px) {
  .container { max-width:310px;margin:0 auto; }
  .sns-image {width:45px;display:inline;}
  #myBar img{ width:45px;float:right;transform:translate(50%, -25%);}
}
@media (min-width:410px) {
  .container { max-width:400px;margin:0 auto; }
  .sns-image {width:45px;margin-right:1rem;display:inline;}
  #myBar img{ width:45px;float:right;transform:translate(50%, -25%);}
}
@media (min-width:576px) {
  .container { max-width:540px;margin:0 auto; }
  .sns-image {width:55px;margin-right:1rem;display:inline;}
  #myBar img{ width:55px;float:right;transform:translate(50%, -35%);}
}
@media (min-width:768px) {
  .container { max-width:720px;margin:0 auto; }
  .sns-image {width:60px;margin-right:1rem;display:inline;}
  #myBar img{ width:75px;float:right;transform:translate(50%, -35%);}
}  
#myProgress {
  margin:0 auto;
  width: 75%;
  background-color: grey;
}
#myBar {
  margin-top: 3em;
  height: 4.5pt;
  background-color: #ED7D31;
}
.loader {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.2); /*not in ie */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
}
.wrap-loading div{ /*로딩 이미지*/
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
.display-none{ /*감추기*/
    display:none;
}
  #main .star {
    position:absolute;
    width:50%;
    top:30%;
    transform:translateY(-50%);
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
  }
  @keyframes slidein {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(230%);
      display:none;
    }
  }