@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%; width: 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%;}
    p.zoo01 {width: 100%; bottom: 35%;}
    .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);
  }

    
    /*첫번째*/
    .tit00 {    width: 60%;    margin-top: 8%; }
    h1 span.tit01 {   font-size: 30%; line-height: 150%;}  h1 span.tit02 {   font-size: 40%; }
    p.cha01-1, p.cha01-2, p.cha01-3 {width: 70%; left: 15%;}
    p.contit1-1{left: 0; width: 100%; font-size: 110%; line-height: 140%; font-weight: 200; bottom: 24% !important;}
    p.contit1-2{left: 20%; width: 60%; font-size: 130%; line-height: 140%; font-weight: 500; bottom: 15% !important}
    p.contit1-11{bottom: 20% !important;}
    p.contit1-22{bottom: 10% !important;}
        
    /*두번째*/
    p.chabar04 {top: 45%;}
    .swiper-slide.swiper-slide-active .chabar04{    width: 32.5%; left: 20%;    }
    
    
    /*5번째*/
    p.contit1-3{left: 0; width: 100%; font-size: 110%; line-height: 140%; font-weight: 200; bottom: 5% !important;}
    
    /*6번째 그래프*/
    .graph00, .graphtxt, h2.graphtxt ul, .graph02, .graphtxt2 {width: 100%;}
    h2.graphtxt2 ul {width: 100%; margin-left: -1%;}
    h2.graphtxt ul li {font-size: 14px; line-height: 1.2rem;}
    h2.graph00 ul li {width: 80%;}
    h2 ul li span, h2 ul li:nth-child(2) span {font-size: 100%; }
    .threedot1 {font-size: 100%;}
    p.contit3-1 {left: 0; width: 100%; font-size: 110%; line-height: 140%; font-weight: 200; bottom: 8% !important;}
    p.contit3-1 strong {left: 20%; width: 60%; font-size: 130%; line-height: 140%; font-weight: 500;}
    
    /*7번쩨*/
    h2.graphtxt2 ul li:nth-child(-n+4) {font-size: 12px; line-height: 1rem;}
    h2.graphtxt2 ul li {font-size: 10px;}
    p.contit1-27{bottom: 10% !important;}
    
    
    
    /*8번째 그래프*/
    .graph03, h2.graph03 ul {width: 100%;}
    .graphtxt3 {width: 15%;}
    h2.graph03 ul {left: 25%; height: 8.5%;}
    h2.graph03 ul li span {right: -72px !important;}
    h2.graph03 p {font-size: 100%; left:25%;}
    h2.graphtxt3 ul {padding-top: 5%; margin-left: 40%;}
    h2.graphtxt3 ul li { height: 12.5%;  }
    h2.graphtxt3 ul li:nth-child(-n+4) {font-size: 12px; line-height:1rem;}
    .swiper-slide.swiper-slide-active .graph031 {width: 52.2%;}
    .swiper-slide.swiper-slide-active .graph032 {width: 42.3%;}
    .swiper-slide.swiper-slide-active .graph033 {width: 36.15%;}
    .swiper-slide.swiper-slide-active .graph034 {width: 34.8%;}
    .swiper-slide.swiper-slide-active .graph035 {width: 14%;}
    .swiper-slide.swiper-slide-active .graph036 {width: 13%;}
    .swiper-slide.swiper-slide-active .graph037 {width: 10%;}

}





/*아이패드세로형-211116*/
@media (min-width: 767px) and (min-height: 1000px) {
    .btn-index, .btn-index2 {top: 4%;  width: 6%;}
    p.zoo01, 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.contit1-22 {bottom: 12% !important;}
    /*7번슬라이드*/
    p.contit1-27 {bottom: 13% !important;}

}


/*아이패드프로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;}
    
}




/*아이패드 가로형*/
@media (min-width: 1000px) and (min-height: 650px) {
    .number {margin-top: 10%;}
    p.zoo01, p.zoo02 {font-size: 10px;}
    h1 span.dobtxt01 {margin-top: 40% !important;}
    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%;}
    /*2번슬라이드*/
    p.contit1-1 {font-size: 90%;}
    p.contit1-2 {font-size: 110%;}
    p.cha01-1, p.cha01-2, p.cha01-3 {width: 50%; left: 25%;}
    /*5번슬라이드*/
    p.contit1-3, p.contit3-1 {font-size: 90%;}
    /*8번슬라이드*/
    h2.graph03 ul {height: 7.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%;}
    p.cha01-1, p.cha01-2, p.cha01-3 {width: 70%; left: 15%;}
    /*8번슬라이드*/
    h2.graph03 ul {height: 8.8%;}
}

/*아이패드프로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%;}
}