@media screen and (min-width: 800px) {
  #home-slider {  width: 800px;}
}
@media screen and (min-width: 1280px) {
    .contents .gra9 {bottom: 15%;}
    .contents .per514-1 {font-size: 300%;    left: -4%;    top: 38%;}
    .contents .per514-2 {font-size: 300%;   top: 52%; right: -1%;  }
    .contents .per514-3 {font-size: 300%;  top: 62%;   left: -1%;}
}


@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: 37%;}
    .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);
  }
}
    .subtit03, .subtit08, .subtit12, .subtit14 {width: 60%; left: 20%;}
    
    /*2번째*/
    p.img51-1, p.img51-2 {width: 80%; left: 10%;}
    p.txt51-1 {font-size: 200%; bottom: 28%;    left: 10%;}
    p.txt51-2 {font-size: 130%;    left: 10%;    bottom: 20%;}
    p.txt51-3 {font-size: 100%;    left: 10%;   line-height: 1.4rem;    bottom: 10%;    font-weight: 100;}
        
    /*3번째*/
    .tit00 {    width: 65% !important;    margin-top: 8%; }
    h1 span.tit01 {   font-size: 30%; line-height: 150%;}  h1 span.tit02 {   font-size: 40%; }
    p.percent00 { width: 80%; font-size: 150% ;    left: 10%;}
    .percent01, .percent02 {font-size: 200%;}
    p.zoo02 {width: 80%;    bottom: 4%;    left: 10%;}
    .txtbefore {width: 33%;    left: 15%;}
    .txtafter {width: 33%;   right: 15%;}
    .txtbefore span, .txtafter span {font-size: 120%;}
    .txtarrow {width: 2.5%;left: 49%; top: 36.5%;}
        
    /*8번쩨*/
    p.number8 {width: 15%;    bottom: 35%; right: 10%;}
    p.arrow8 {width: 15%;    bottom: 30%;}
    .swiper-image .swiper-image-eight {background-position: center center !important;}
    
    /*9번쨰*/
    .swiper-image-nine {background-position: center -140px !important;}
    .gra9 {width: 60%;    left: 20%; bottom: 10%;}
    .gra9 span {font-size: 130%;}
    
    /*10번째*/
    .history10-1, .history10-2 {width: 80%; left: 10%;}
    .history10-2 {top: 60%;}
    .line1 {width: 80%; top: 36%;}
    .line2 { width: 80%;  top: 70%;}
    
    
    /*11번째*/
    p.img511-1, p.img511-2, p.img511-3 {width: 80%; left: 10%;}
    p.txt511-1 {width: 80%;    font-size: 200%;    left: 10%; bottom: 25%;   line-height: 2rem;}
    p.txt511-2 {font-size: 150%;    width: 80%;    left: 10%; bottom: 20%;}
    p.txt511-3 {font-size: 100%;    width: 80%;    left: 10%;   bottom: 10%; line-height: 1.3rem; font-weight: 100;}
    
    /*12번째*/
    p.txt12-1 {width: 100%;    font-size: 130%;}
    .gra512-15 {width: 25%; right: 25%;}
    .gra512-1, .gra512-2, .gra512-3 {width: 100%; background-size: contain; background-repeat: no-repeat;} 
    .gra512-1 ul, .gra512-2 ul, .gra512-3 ul {width: 8%;}
    .gra512-16 {width: 38%;    right: 21%;}
    .gra512-1 ul li span {width: 100%; font-size:100%;}
    .gra512-2 ul li span {width: 100%; font-size:100%;}
    .gra512-3 ul li span {width: 100%; font-size:100%;}

    
    
    /*13번째*/
    p.img513-1, p.img513-2, p.img513-3, p.img513-4, p.img513-5 {width: 80%;    left: 10%;}
    p.txt513-1 {width: 80%;    font-size: 200%;    left: 10%;    line-height: 2rem; top: 10%;}
    p.txt513-2 {width: 80%;    font-size: 150%;    left: 10%;    line-height: 2rem; top: 20%;}
    p.txt513-3 {width: 80%;    font-size: 100%;    left: 10%;    line-height: 1.3rem; top: 30%;}
    
    /*14번째*/
    .img514-1 {width: 60%; left: 20%;}
    .per514-1 {font-size: 300%;    left: -4%;    top: 41%;}
    .per514-2 {font-size: 300%;   top: 55%; right: -1%;  }
    .per514-3 {font-size: 300%;  top: 67%;   left: -1%;}
    
    /*15번쨰*/
    .gra15 p {width: 30%;}
    .gra15 span {font-size: 130%;}
    .per15-1, .per15-2 {width: 42% !important;}
    .per15-2 {right: 17%;}
    
    /*16번쨰*/
    .gra16 {width: 80%;    left: 10%;}
    .gra16 p {    width: 80%;    font-size: 200%;    left: 10%; letter-spacing: 0.2rem;}
    .gra16 ul {width: 40%; right: 10%; }
    
    /*17번쨰*/
    .line22 {width: 55%;}
    
    /*18번째*/
    p.img518-1, p.img518-2, p.img518-3 {width: 80%; left: 10%;}
    p.txt518-1 {    width: 100%;    font-size: 200%;    left: 55%; top: 60%;}
    p.txt518-2 {    width: 100%;    left: 55%;    bottom: 30%;    font-size: 130%;    line-height: 1.5rem;}
    p.txt518-3 {    width: 100%;    left: 55%;    bottom: 15%;    font-size: 100%;    line-height: 1.3rem;}
    
    /*19번쨰*/
    .graph03 {width: 100%;}
    .graphtxt3 {width: 15%;}
    h2.graph03 ul {width: 50%; left: 25%; margin-top: 3%;}
    h2.graph03 ul li span {font-size: 80%;    height: 50px;    line-height: 3rem;    width: 50px;}
    h2.graphtxt3 ul {margin-left: 45%;    margin-top: 20%;}
    h2.graphtxt3 ul li {font-size: 50%;}
    .swiper-slide.swiper-slide-active .graph031 {width: 97%;}
    .swiper-slide.swiper-slide-active .graph032 {width: 91%;}
    .swiper-slide.swiper-slide-active .graph033 {width: 81%;}
    .swiper-slide.swiper-slide-active .graph034 {width: 78%;}
    .swiper-slide.swiper-slide-active .graph035 {width: 78%;}
    h2.graphtxt3 ul li:first-child {margin-top: 36%;}
    
    /*20번째*/
    .graph520 {width: 100%;}
    .graph520 ul {margin-top: 0;}
    .img520-1 {width: 30%; left: 5%;}
    .img520-2 {width: 30%; left: 28%;}
    .img520-3 {width: 30%; left: 55%;}
    
    /*21번째*/
    .graph521 {width: 100%;}
    .graph521 p {width: 50%; left: 25%;}
    .graph521 ul {margin-top: 7%;}
    .graph521 ul li {width: 50%; left: 22.5%;}
    
        
    /*22번쨰*/
    .history22-1, .history22-2 {width: 80%; left: 10%;}
    .history22-2 {top: 60%;}
    
    /*23번째*/
    p.img523-0, p.img523-1, p.img523-2, p.img523-3, p.img523-4 {width: 80%; left: 10%;}
    p.txt523-1 {font-size: 200%; left: 18%; top: 20%;}
    p.txt523-2 {font-size: 150%; left: 18%; line-height: 1.5rem;}
    p.txt523-3 {font-size: 100%; left: 18%; line-height: 1.3rem;}
    
    /*24번째*/
    .gra524 {width: 100%;}
    .gra524 ul li span {font-size: 80% !important;}
    .gra524txt ul li {font-size: 30%;}
    .img524-1 {    width: 20%;    left: 30%;}
    .img524-2 {    width: 20%;    right: 11%;}
    .gra524txt {margin: 0; top:65%;}
    
    /*마지막*/
    .txt27-1 {font-size: 200%;}
    .txt27-2 {font-size: 150%;}
    .txt27-3 {font-size: 100%; line-height: 1.3rem;}
    .img27 {width: 20%; left: 40%;}
    

}





/*아이패드세로형-211116*/
@media (min-width: 767px) and (min-height: 1000px) {
    .tit000 {width: 75% !important;}
    .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%;}
    /*14번슬라이드*/
    .per514-3 {top: 64%;}
    .per514-2 {top: 53%;}
    /*18번슬라이드*/
    p.txt518-1 {top: 52%;}
    p.txt518-2 {bottom: 37%;}
    p.txt518-3 {bottom: 25%;}
    /*24번슬라이드*/
    .gra524txt {top: 68%;}
    .gra524txt ul li {font-size: 70%;}
    

}


/*아이패드프로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;}
    
    /*2번슬라이드*/
    p.txt51-1 {bottom: 40%;}
    p.txt51-2 {bottom: 35%;}
    p.txt51-3 {bottom: 27%;}
    /*8번슬라이드*/
    p.arrow8 {bottom: 33%;}
    /*9번슬라이드*/
    .gra9 {bottom: 30%;}
    /*10번슬라이드*/
    .line1 {top: 31%;}
    .line2 {top: 68%;}
    /*11번슬라이드*/
    p.txt511-1 {bottom: 45%;}
    p.txt511-2 {bottom: 42%;}
    p.txt511-3 {bottom: 35%;}
    /*13번슬라이드*/
    p.txt513-1 {top: 5%;}
    p.txt513-2 {top: 13%;}
    p.txt513-3 {top: 22%;}
    /*14번슬라이드*/
    .per514-1 {top: 35%}
    .per514-2 {top: 45%}
    .per514-3 {top: 53%}
    /*18번슬라이드*/
    p.txt518-3 {bottom: 35%;}
    p.txt518-2 {bottom: 44%;}
    p.txt518-1 {top: 47%;}
    /*19번슬라이드*/
    h2.graph03 ul li span {font-size: 90%;height: 65px;line-height: 4rem;width: 65px;}
    /*20번슬라이드*/
    .graph520 ul {margin-top: 12%;}
    /*21번슬라이드*/
    .graph521 ul li {width: 70%;left: 12.5%;}
    
}




/*아이패드 가로형*/
@media (min-width: 1000px) and (min-height: 650px) {
    p.zoo, p.zoo02 {font-size: 10px;}
    .number {margin-top: 10%;}
    h1 span.dobtxt01 {margin-top: 40% !important;}
    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.cha01 {top: -10%;}
    p.img51-1, p.img51-2 {width: 60%;left: 20%;}
    p.txt51-1 {font-size: 180%; left: 20%; bottom: 50%;}
    p.txt51-2 {font-size: 120%; left: 20%; bottom: 45%;}
    p.txt51-3 {font-size: 90%; left: 20%; bottom: 35%;}
    .txtbefore {width: 25%; left: 20%;}
    .txtafter {width: 25%; right: 20%;}
    .txtarrow {width: 2%;}
    /*3번슬라이드*/
    p.percent00 {font-size: 120%; top: 27%;}
    /*8번슬라이드*/
    p.arrow8 {bottom: 20%;}
    /*10번슬라이드*/
    .history10-1 img, .history10-2 img {width: 25%;}
    .line1 {width: 76%;}
    .line2 {width: 67%;}
    /*11번슬라이드*/
    p.img511-1, p.img511-2, p.img511-3 {width: 80%; left: 12%;}
    p.txt511-1 {font-size: 180%; }
    p.txt511-2 {font-size: 120%; }
    p.txt511-3 {font-size: 90%; ;}
    /*12번슬라이드*/
    .gra512-15 {width: 18%; right: 28%;}
    .gra512-1 ul, .gra512-2 ul, .gra512-3 ul {width: 6%; left: 47%;}
    .gra512-16 {width: 30%; right: 25%;}
    /*13번슬라이드*/
    p.img513-1, p.img513-2, p.img513-3, p.img513-4, p.img513-5 {width: 80%; left: 12%;}
    p.txt513-1 {font-size: 180%; }
    p.txt513-2 {font-size: 120%; }
    p.txt513-3 {font-size: 90%; ;}
    /*14번슬라이드*/
    .img514-1 {width: 40%; left: 28%; top: 7%;}
    .per514-2 {right: 0;}
    .per514-1, .per514-2, .per514-3 {font-size: 220%;}
    /*15번슬라이드*/
    .gra15 {top: 42%;}
    /*16번슬라이드*/
    .gra16 {top: 11%;}
    /*17번슬라이드*/
    .history10-2 {top: 62%;}
    .line2 {top: 68%;}
    /*18번슬라이드*/
    p.img518-1, p.img518-2, p.img518-3 {width: 80%; left: 10%;}
    p.txt518-1 {font-size: 180%; top: 47%;}
    p.txt518-2 {font-size: 120%; bottom: 45%; }
    p.txt518-3 {font-size: 90%; bottom: 35%;}
    /*19번슬라이드*/
    h2.graph03 ul:first-child {margin-top: 2%;}
    h2.graph03 ul {margin-top: 2.2%;}
    h2.graphtxt3 ul li:first-child {margin-top: 0;}
    /*20번슬라이드*/
    .graph520 ul {margin-top: -2%;}
    .graph520 ul li {width: 27%;}
    .img520-1 {left: 14%;}
    .img520-2 {left: 32%;}
    /*21번슬라이드*/
    .graph521 ul li {width: 40%; left: 27%;}
    /*22번슬라이드*/
    .history22-1 img, .history22-2 img {width: 70%;}
    /*23번슬라이드*/
    p.img523-0, p.img523-1, p.img523-2, p.img523-3, p.img523-4 {width: 100%; left: 4%;}
    p.txt523-1 {font-size: 180%; left: 15%;}
    p.txt523-2 {font-size: 120%; left: 15%;}
    p.txt523-3 {font-size: 90%; left: 15%;}
    /*24번슬라이드*/
    .gra524txt {top: 67%;}
    .gra524txt ul li {font-size: 50%;}
    .img524-1 {top: 25%;}
    .img524-2 {top: 0;}
    /*25번슬라이드*/
    .history22-1, .history22-2 {width: 76%; left: 12%;}
    .history22-2 {top: 55%;}
    .history22-22 {top: 60%;}
    .line22 {top: 69%;}
}

/*아이패드프로10.5인치가로형*/
@media (min-width: 1100px) and (min-height: 800px) {
    /*2번슬라이드*/
    .contents p.txt2-1 {top: 33%;}
    .contents p.txt2-3 {top: 30%;}
    
}



/*아이패드프로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번슬라이드*/
    p.cha01 {top: -2%;}
    h1 span.tit01 {font-size: 35%;}
    h1 span.tit02 {font-size: 45%;}
    p.txt2-4 {top: 40%;}
    /*3번슬라이드*/
    p.wline:first-child {margin-top: 25%;}
    /*8번슬라이드*/
    p.arrow8 {bottom: 25%;}
    /*10번슬라이드*/
    .line2 {top: 72%;}
    /*11번슬라이드*/
    p.txt511-1 {top: 55%;}
    p.txt511-2 {top: 65%;}
    p.txt511-3 {bottom: 25%;}
    /*13번슬라이드*/
    p.txt513-1 {top: 5%;}
    p.txt513-2 {top: 13%;}
    p.txt513-3 {top: 21%;}
    /*14번슬라이드*/
    .contents .per514-1 {font-size: 250%; top: 35%;}
    .contents .per514-3 {font-size: 250%; top: 54%;}
    .contents .per514-2 {font-size: 250%; top: 45%;}
    /*18번슬라이드*/
    p.txt518-1 {top: 52%;}
    /*19번슬라이드*/
    h2.graph03 ul:first-child {margin-top: 7%;}
    h2.graphtxt3 ul li:first-child {margin-top: 27%;}
    /*20번슬라이드*/
    .graph520 ul {margin-top: 7%;}
    /*21번슬라이드*/
    .graph521 ul li {width: 60%; left: 17.5%;}
    /*24번슬라이드*/
    .gra524txt ul li {font-size: 40%;}
    .gra524txt {top: 66%;}
    
}

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