/* PC */
@media screen and (min-width : 1201px) {
/* commom */
.title{font-size: 3em; font-weight: 700;}

/* banner */
#banner{position: relative; width: 100%; height: 200px; top: 80px; background-image: url(../img/info/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* ani_con */
#ani_con{position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 300px 0 150px 0;}
#ani_con .con1{display: flex; justify-content: space-between; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con1 .text_box{width: 62%;}
#ani_con .con1 .text_box p{font-size: 1.4em; font-weight: 700; text-align: center;}
#ani_con .con1 .img_box{width: 32%;}
#ani_con .con1 .img_box img{width: 100%;}
#ani_con .con2{display: flex; justify-content: space-between; align-items: center; padding: 200px 0; margin-top: -100px; opacity: 0;}
#ani_con .con2 .text_box{width: 62%;}
#ani_con .con2 .text_box p{font-size: 1.4em; font-weight: 700; text-align: center;}
#ani_con .con2 .img_box{width: 32%;}
#ani_con .con2 .img_box img{width: 100%;}
#ani_con .con3{display: flex; flex-direction: column; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con3 .img_box{width: 50%;}
#ani_con .con3 .img_box img{width: 100%;}
#ani_con .con3 .text_box{width: 100%; padding-top: 80px;}
#ani_con .con3 .text_box p{font-size: 1.4em; font-weight: 700; text-align: center;}

/* rule */
#rule{position: relative; padding: 100px 0;}
#rule .rule_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 150px;}
#rule .rule_wrap h2{margin-bottom: 80px;}
#rule .rule_wrap p{font-size: 1.4em; text-align: center;}
#rule .acco_inner{position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#rule .accordion{position: relative;}
#rule .accordion li{margin-bottom: 10px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#rule .accordion li h3{background-color: #fff; padding: 30px; font-size: 20px; font-weight: 700; border-radius: 10px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s;}
#rule .accordion li h3 img{transition-duration: 0.5s;}
#rule .accordion li.select h3 img{transform: rotate(180deg);}
#rule .accordion li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); font-size: 16px; line-height: 1.6em; border-radius: 10px; display: none;}
#rule .accordion li div p{color: #fff; font-size: 1.125em;}

/* history */
#history{position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 100px 0 200px 0;}
#history .his_text{padding-bottom: 80px;}
#history .his_text h2{text-align: center;}
.swiper {
    width: 500px;
    height: 600px;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
  }

  .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }

  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }

  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }

  .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }

  .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }

  .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }

  .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }

  .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }

  .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }

  .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }
#history .swiper-slide img{width: 68%; margin-bottom: 50px; border: 1px solid #eee;}
#history .swiper-slide h3{width: 88%; margin: 0 auto; font-size: 1.3em; font-weight: 700; text-align: center; padding-bottom: 20px; color: #fff;}
#history .swiper-slide p{font-size: 1.25em; color: #fff;}
}






















/* Tablet 가로 */
@media screen and (min-width : 901px) and (max-width : 1200px) {
/* commom */
.title{font-size: 3em; font-weight: 700;}

/* banner */
#banner{position: relative; width: 100%; height: 200px; top: 60px; background-image: url(../img/info/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* ani_con */
#ani_con{position: relative; width: 100%; margin: 0 auto; padding: 150px 0;}
#ani_con .ani_wrap{width: 92%; margin: 0 auto;}
#ani_con .con1{display: flex; justify-content: space-between; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con1 .text_box{width: 62%;}
#ani_con .con1 .text_box p{font-size: 1.4em; font-weight: 700; text-align: center;}
#ani_con .con1 .img_box{width: 32%;}
#ani_con .con1 .img_box img{width: 100%;}
#ani_con .con2{display: flex; justify-content: space-between; align-items: center; padding: 200px 0; margin-top: -100px; opacity: 0;}
#ani_con .con2 .text_box{width: 62%;}
#ani_con .con2 .text_box p{font-size: 1.4em; font-weight: 700; text-align: center;}
#ani_con .con2 .img_box{width: 32%;}
#ani_con .con2 .img_box img{width: 100%;}
#ani_con .con3{display: flex; flex-direction: column; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con3 .img_box{width: 50%;}
#ani_con .con3 .img_box img{width: 100%;}
#ani_con .con3 .text_box{width: 100%; padding-top: 80px;}
#ani_con .con3 .text_box p{font-size: 1.4em; font-weight: 700; text-align: center;}

/* rule */
#rule{position: relative; padding: 100px 0;}
#rule .rule_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 150px;}
#rule .rule_wrap h2{margin-bottom: 80px;}
#rule .rule_wrap p{font-size: 1.4em; text-align: center;}
#rule .acco_inner{position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#rule .accordion{position: relative;}
#rule .accordion li{margin-bottom: 10px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#rule .accordion li h3{background-color: #fff; padding: 30px; font-size: 20px; font-weight: 700; border-radius: 10px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s;}
#rule .accordion li h3 img{transition-duration: 0.5s;}
#rule .accordion li.select h3 img{transform: rotate(180deg);}
#rule .accordion li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); font-size: 16px; line-height: 1.6em; border-radius: 10px; display: none;}
#rule .accordion li div p{color: #fff; font-size: 1.125em;}

/* history */
#history{position: relative; padding: 100px 0 200px 0;}
#history .his_text{padding-bottom: 80px;}
#history .his_text h2{text-align: center;}
.swiper {
    width: 350px;
    height: 450px;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
  }

  .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }

  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }

  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }

  .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }

  .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }

  .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }

  .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }

  .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }

  .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }

  .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }
#history .swiper-slide img{width: 68%; margin-bottom: 50px; border: 1px solid #eee;}
#history .swiper-slide h3{width: 88%; margin: 0 auto; font-size: 1.3em; font-weight: 700; text-align: center; padding-bottom: 20px; color: #fff;}
#history .swiper-slide p{font-size: 1.25em; color: #fff;}  
}




























/* Tablet 세로 */
@media screen and (min-width : 601px) and (max-width : 900px) {
/* commom */
.title{font-size: 2em; font-weight: 700;}

/* banner */
#banner{position: relative; width: 100%; height: 100px; top: 60px; background-image: url(../img/info/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* ani_con */
#ani_con{position: relative; width: 100%; margin: 0 auto; padding: 150px 0 100px 0;}
#ani_con .ani_wrap{width: 92%; margin: 0 auto;}
#ani_con .con1{display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con1 .text_box{width: 70%; margin-bottom: 50px;}
#ani_con .con1 .text_box p{font-size: 1.2em; font-weight: 700; text-align: center;}
#ani_con .con1 .img_box{width: 80%;}
#ani_con .con1 .img_box img{width: 100%;}
#ani_con .con2{display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 200px 0; margin-top: -100px; opacity: 0;}
#ani_con .con2 .text_box{width: 87%; margin-top: 50px;}
#ani_con .con2 .text_box p{font-size: 1.2em; font-weight: 700; text-align: center;}
#ani_con .con2 .img_box{width: 80%;}
#ani_con .con2 .img_box img{width: 100%;}
#ani_con .con3{display: flex; flex-direction: column; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con3 .img_box{width: 80%;}
#ani_con .con3 .img_box img{width: 100%;}
#ani_con .con3 .text_box{width: 86%; padding-top: 50px;}
#ani_con .con3 .text_box p{font-size: 1.2em; font-weight: 700; text-align: center;}

/* rule */
#rule{position: relative; padding: 100px 0;}
#rule .rule_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 100px;}
#rule .rule_wrap h2{margin-bottom: 60px;}
#rule .rule_wrap p{width: 78%; font-size: 1.2em; text-align: center;}
#rule .acco_inner{position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#rule .accordion{position: relative;}
#rule .accordion li{margin-bottom: 10px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#rule .accordion li h3{background-color: #fff; padding: 30px; font-size: 20px; font-weight: 700; border-radius: 10px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s;}
#rule .accordion li h3 img{transition-duration: 0.5s;}
#rule .accordion li.select h3 img{transform: rotate(180deg);}
#rule .accordion li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); font-size: 16px; line-height: 1.6em; border-radius: 10px; display: none;}
#rule .accordion li div p{color: #fff; font-size: 1.125em;}

/* history */
#history{position: relative; padding: 100px 0;}
#history .his_text{padding-bottom: 80px;}
#history .his_text h2{text-align: center;}
.swiper {
    width: 250px;
    height: 350px;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
  }

  .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }

  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }

  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }

  .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }

  .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }

  .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }

  .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }

  .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }

  .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }

  .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }
#history .swiper-slide img{width: 80%; margin-bottom: 40px; border: 1px solid #eee;}
#history .swiper-slide h3{width: 88%; margin: 0 auto; font-size: 1em; font-weight: 700; text-align: center; padding-bottom: 20px; color: #fff;}
#history .swiper-slide p{font-size: 1em; color: #fff;}  
}





























/* Mobile */
@media screen and (max-width : 600px) {
/* commom */
.title{font-size: 1.4em; font-weight: 700;}

/* banner */
#banner{position: relative; width: 100%; height: 60px; top: 40px; background-image: url(../img/info/banner.jpg); background-position: center; background-size: cover;}
#banner .banner_text{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#banner .banner_text h2{color: #fff;}

/* ani_con */
#ani_con{position: relative; width: 100%; margin: 0 auto; padding: 150px 0 100px 0;}
#ani_con .ani_wrap{width: 92%; margin: 0 auto;}
#ani_con .con1{display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con1 .text_box{width: 70%; margin-bottom: 50px;}
#ani_con .con1 .text_box p{font-size: 1.2em; font-weight: 700; text-align: center;}
#ani_con .con1 .img_box{width: 80%;}
#ani_con .con1 .img_box img{width: 100%;}
#ani_con .con2{display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 0; margin-top: -100px; opacity: 0;}
#ani_con .con2 .text_box{width: 87%; margin-top: 50px;}
#ani_con .con2 .text_box p{font-size: 1.2em; font-weight: 700; text-align: center;}
#ani_con .con2 .img_box{width: 80%;}
#ani_con .con2 .img_box img{width: 100%;}
#ani_con .con3{display: flex; flex-direction: column; align-items: center; margin-top: -100px; opacity: 0;}
#ani_con .con3 .img_box{width: 80%;}
#ani_con .con3 .img_box img{width: 100%;}
#ani_con .con3 .text_box{width: 86%; padding-top: 50px;}
#ani_con .con3 .text_box p{font-size: 1.2em; font-weight: 700; text-align: center;}

/* rule */
#rule{position: relative; padding-bottom: 100px;}
#rule .rule_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 100px;}
#rule .rule_wrap h2{margin-bottom: 60px;}
#rule .rule_wrap p{width: 78%; font-size: 1.2em; text-align: center;}
#rule .acco_inner{position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#rule .accordion{position: relative;}
#rule .accordion li{margin-bottom: 10px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#rule .accordion li h3{background-color: #fff; padding: 30px; font-size: 20px; font-weight: 700; border-radius: 10px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s;}
#rule .accordion li h3 img{transition-duration: 0.5s;}
#rule .accordion li.select h3 img{transform: rotate(180deg);}
#rule .accordion li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); font-size: 16px; line-height: 1.6em; border-radius: 10px; display: none;}
#rule .accordion li div p{color: #fff; font-size: 1.125em;}

/* history */
#history{position: relative; width: 92%; margin: 0 auto; padding-bottom: 100px;}
#history .his_text{padding-bottom: 80px;}
#history .his_text h2{text-align: center;}
.swiper {
    width: 59%;
    height: 300px;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
  }

  .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }

  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }

  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }

  .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }

  .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }

  .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }

  .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }

  .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }

  .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }

  .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }
#history .swiper-slide img{width: 80%; margin-bottom: 15px; border: 1px solid #eee;}
#history .swiper-slide h3{width: 88%; margin: 0 auto; font-size: 1em; font-weight: 700; text-align: center; padding-bottom: 10px; color: #fff;}
#history .swiper-slide p{font-size: 1em; color: #fff;}  
}