@media screen and (min-width: 800px) {
  #home-slider {  width: 800px;}
}


@media screen and (min-width: 640px) {
    .number {font-size: 1000%;    margin-top: 30%;}
    .swiper-pagination-bullet {margin: 0 0.2%;}
    .btn-index, .btn-index2 {top: 5%;    width: 5%;}
    .layer-popup p {font-size: 100% !important; width: 40%;} .layer-popup p span {font-size: 120% !important;}
    .menuspan1 {height: 11%;}
    .menuspan2 {height: 11%; margin-top: 24%;}
    .menuspan3 {height: 11%; margin-top: 46%;}
    .menuspan4 {height: 11%; margin-top: 68%;}
    .menuspan5 {height: 11%; margin-top: 90%;}
    .contents {    height: 90%; }
    .logo {    width: 13%; margin-top: 17%; }
    h1 span:not(.emphasis) { font-size: 25%;}  
    h1 + p  { font-size: 105%;}  
    .logofooter {    width: 24%;    margin-left: -12%; }
    p.logofooter02 {    width: 40%;    margin-top: 10% !important; }
    p.zoo02 {right:20%; bottom: 40%;}
    .arrow {display: none;}
    .arrow2 {display: block; position: absolute; z-index: 9999; right:1vw; top:7%; width: 5%;}
    .arrow2 img {width:100%;}
    .arrow2 {
    animation: arrow2 1.5s linear infinite;
}

@keyframes arrow2 {
  0% {
    opacity: 1;
      transform: translate3d(0, 0%, 0);
     }
  50% {
    opacity: 0.5;
      transform: translate3d(0, 10%, 0);
  }
  100% {
    opacity: 1;
      transform: translate3d(0, 0%, 0);
  }
}
    p.chabar01, p.chabg01, p.chabar02, p.chabg02, p.chabar04 {height:10%;}
    /*첫번째*/
    .tit00 {    width: 60%;    margin-top: 8%; }
    h1 span.tit01 {   font-size: 30%; line-height: 150%;}  h1 span.tit02 {   font-size: 40%; }
    p.cha01, p.chabg01 {width: 60%;  left:20%;}
    p.chabar01 {left: 20%;}
    p.cha02, p.chabg02 {width: 60%;  left:20%; top: 45%;}
    p.chabar02 {left: 20%; top: 45%;}
    p.cha01, p.chabg01, p.chabar01 {top:25%;}
    .swiper-slide.swiper-slide-active .chabar01 {width: 60%; left:20%;} 
    p.percent00 {width: 60%; left:20%; font-size: 150%; top: 37%;}
    .percent01 {font-size: 200%;}
    .swiper-slide.swiper-slide-active .chabar02{    width: 18%;}
    p.contit02 {left: 0; width: 100%; font-size: 110%; line-height: 140%; font-weight: 200;}
    p.contit03 {left: 20%; width: 60%; font-size: 130%; line-height: 140%; font-weight: 500;}
        
    /*두번째*/
    p.chabar04 {top: 45%;}
    .swiper-slide.swiper-slide-active .chabar04{    width: 32.5%; left: 20%;    }
    
    /*네번째 그래프*/
    .graph00 {width: 108%;}
    h2.graphtxt ul {width: 55%;    margin-left: -3.5%;}
    h2.graph00 ul li {width: 4%;}
    h2.graph00 ul li:nth-child(2) {margin-left: 4.5%;}
    h2 ul li span, h2 ul li:nth-child(2) span {font-size: 80%; top: -25px !important;}
    p.zoo03 {width: 20%;}
    .graphtxt {width: 100%;}
    h2.graphtxt ul {width: 100%; margin: 0 auto; padding: 2% 0;}
    h2.graphtxt ul li {font-size: 12px; line-height: 1rem; margin: 0 4px;}
    
    /*다섯번째*/
    p.gra01, p.gra20, p.gra30, p.gra40, p.gra50 {width: 70%; left:15%;} 
    p.contit0502, p.contit0503, p.contit0504, p.contit0505 {width: 90%; font-size: 100%;}
    .txt20, .txt30, .txt40, .txt50 {font-size: 120%;}
    .swiper-slide.swiper-slide-active .contit0502 {bottom: 26%}
    .swiper-slide.swiper-slide-active .contit0503 {bottom: 20%}    
    p.zoo05 {top: 55%; right: 20%; width: 100%;}


}



/*아이패드세로형-211116*/
@media (min-width: 767px) and (min-height: 1000px) {
    .btn-index, .btn-index2 {top: 4%;  width: 6%;}
    p.zoo, p.zoo02 {font-size: 10px;}
    h1 span.dobtxt01 {font-size:45%; line-height: 1.8rem;}
    h1 span.dobtxt02 {font-size:35%; line-height: 1.4rem;}
    h1 span.dobtxt03 {font-size:40%; line-height: 1.4rem;}
    .menuspan1 {height: 10%;}
    .menuspan2 {height: 10%; margin-top: 35%;}
    .menuspan3 {height: 10%;margin-top: 70%;}
    .menuspan4 {height: 10%;margin-top: 105%;}
    .menuspan5 {height: 10%;margin-top: 140%;}
    /*1번슬라이드*/
    h1 span.tit01 {font-size: 40%;line-height: 180%; }
    h1 span.tit02 {font-size: 60%;}
    p.chabar01, p.chabg01, p.chabar02, p.chabg02, p.chabar04 {height: 9%;}
    /*4번슬라이드*/
    .swiper-slide.swiper-slide-active .contit0505 {bottom: 8%;}

}


/*아이패드프로13인치세로형*/
@media (min-width: 1000px) and (min-height: 1280px) {
        /*1번슬라이드*/
    .contents h1 span.dobtxt01 {margin-top: 80% !important; line-height: 2.2rem;}
    .contents h1 span.dobtxt02 {line-height: 1.8rem;}
    .contents p.chabar01, .contents p.chabg01, .contents p.chabar02, .contents p.chabg02, .contents p.chabar04 {height: 7%;}
    /*5번슬라이드*/
    p.gra01, p.gra20, p.gra30, p.gra40, p.gra50 {width: 80% !important; left: 10% !important;}
}




/*아이패드 가로형*/
@media (min-width: 1000px) and (min-height: 650px) {
    p.zoo, p.zoo02 {font-size: 10px;}
    .contents .number {margin-top: 10%;}
    h1 span.dobtxt01 {margin-top: 40% !important;}
    p.chabar01, p.chabg01, p.chabar02, p.chabg02, p.chabar04 {height: 12%;}
    p.contit02 {font-size: 90%;}
    p.contit03 {font-size: 110%;}
    p.contit0502, p.contit0503, p.contit0504, p.contit0505 {font-size: 90%;}
    p.gra01, p.gra20, p.gra30, p.gra40, p.gra50 {width: 50%; left: 25%; margin-top:3%;}
    p.zoo05 {top: 50%;}
    .swiper-slide.swiper-slide-active .contit0505 {bottom: 8%;}
}
/*아이패드프로13인치가로형*/
@media (min-width: 1281px) and (min-height: 1000px) {
    .btn-index, .btn-index2 {width: 4%;}
    .menuspan2 {height: 9%; margin-top: 20%;}
    .menuspan3 {height: 9%; margin-top: 40%;}
    .menuspan4 {height: 9%; margin-top: 60%;}
    .menuspan5 {height: 9%; margin-top: 80%;}
    
    .contents h1 span.dobtxt01 {margin-top: 55% !important;  font-size: 30%;}
    .contents h1 span.dobtxt02 { font-size: 20%;}
    .contents h1 span.dobtxt03 { font-size: 25%;}
    /*2번슬라이드*/
    h1 span.tit01 {font-size: 35%;}
    h1 span.tit02 {font-size: 45%;}
    .contents p.chabar01, .contents p.chabg01, .contents p.chabar02, .contents p.chabg02, .contents p.chabar04 {height: 10%;}
}

/*아이패드프로13인치가로형그이상*/
@media (min-width: 1380px) and (min-height: 1000px) {
    .btn-index .btn-index2 {width: 3%;}
    /*1번슬라이드*/
    .contents h1 span.dobtxt01 {margin-top: 65% !important;}
    /*2번슬라이드*/
    .contents p.chabar01, .contents p.chabg01, .contents p.chabar02, .contents p.chabg02, .contents p.chabar04 {height: 8%;}
}