@media (min-width:0px) and (max-width:1600px){
  .left_right div:first-child{
    font-size: 3.4vw;
  }
}
@media (min-width:1279px) and (max-width:3000px) {
  .equ .flip-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 10px solid rgba(0, 103, 104, 0.2);
    border-radius: 38px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .equ .flip-card:hover::before {
    opacity: 1;
  }
  .equ .flip-card:hover {
    outline: 5px solid #009799;
    outline-offset: 0px;
  }
}
@media (min-width:0px) and (max-width:1280px){
  .s3_tit {
    font-size: 35px;
    margin-bottom: 10px;
  }
  .s3_tit+p{
    font-size: 20px;
  }
  .left_right div:first-child {
    font-size: 3.7vw;
  }
  .intro_left .left_right >div:not(:first-child){
    font-size: 17px;
  }
  .circle1, .circle2, .circle3, .circle4 {
    width: 1vw;
    height: 1vw;
  }
  .equ .swiper-slide-active .flip-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 10px solid rgba(0, 103, 104, 0.2);
  border-radius: 38px;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.equ .swiper-slide-active .flip-card {
  outline: 5px solid #009799;
  outline-offset: 0px;
}

}
@media (min-width:0px) and (max-width:1080px){
  .s3_li.swiper-slide{
    flex-direction: column;
  }
  .sec3::before{
    height: 35%;
  }
  .intro_right {
    width: 70%;
  }
  .intro::after{
    width: 53vw;
    height: 53vw;
    right: -5%;
  }
  .doc_content{
    gap: 50px;
  }
  .doc_inner_left ul{
    line-height: 1.6;
  }
  .s3_txt{
    width: 100%;
    padding: 40px;
  }
  .switch{
    width: 395px;
  }
  .toggle{
    width: 180px;
  }
  .map_tit.color{
    font-size: 18px;
  }
  .way_right::after{
    top: 20px;
    right: 20px;
  }
  .map_txt_ul{
    font-size: 2.5rem;
  }
  .map_txt_ul li:nth-of-type(4){
    margin-bottom: 10px;
  }
  .way_right{
    padding: 35px;
  }
}
@media (min-width:0px) and (max-width:900px){
  .s3_num {
    font-size: 50px;
    line-height: 1;
  }
  .intro_wrap{
    flex-direction: column;
  }
  .intro_right {
    width: 40%;
  }
  .left_right{
    /* align-items: center; */
    gap: 0px;
    margin-bottom: 30px;
  }
  .intro_left .left_right >div:not(:first-child){
    /* text-align: center; */
    font-size: 18px;
  }
  .intro::after {
    width: 53vw;
    height: 53vw;
    right: -5%;
    bottom: 0;
    top: inherit;
  }
  .doc_content {
    flex-direction: column-reverse;
  }
  .s3_txt {
    width: 100%;
    background: rgb(255, 255, 255, 0.5);
    height: fit-content;
  }
  .switch {
    width: 395px;
  }
  .slider{
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  }
  .way_wrap{
    flex-direction: column-reverse;
    gap: 20px;
  }
  .way_right, .way_left{
    width: 80%;
    border-radius: 50px;
  }
  .way_left, .root_daum_roughmap_landing{
    height: 350px;
  }
  .map, .root_daum_roughmap_landing{
    border-radius: 50px;
  }
  .left_right div:first-child {
    font-size: 55px;
  }
  .s3_li.swiper-slide .s3_img{
    height: 300px;
  }
  .s3_li.swiper-slide .s3_img img{
    object-fit: cover;
    object-position: right;
  }
  .equ .flip-card{
    height: 400px;
  }
  .program::after{
    width: 430px;
    height: 430px;
    background: url(../img/intro_bg_logo.png) no-repeat center/cover;
  }
  .circle1, .circle2, .circle3, .circle4 {
    width: 1.4vw;
    height: 1.4vw;
  }
}
@media (min-width:0px) and (max-width:768px){
  .text_box{
    padding: 40px;
    height: fit-content;
  }
  .program .slide_box{
    left: 330px;
  }
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    justify-content: flex-start !important;
  }
  .text_box .title{
    font-size: 30px;
  }
  .program .title_sub{
    font-size: 1.6rem;
  }
  .equ .flip-card{
    height: 400px;
  }
  .prgm_slide .swiper-slide .item_wr {
    width: 298px;
    height: 317px;
  }
  /* .swiper-backface-hidden .swiper-slide{
  width: 310px !important;
  } */
  .prgm_slide .swiper-slide .txt_box .tit{
    font-size: 30px;
  }
  .prgm_slide .swiper-slide .txt_box .desc{
    font-size: 18px;
  }
  .left_right div:first-child {
    font-size: 7vw;
  }
  .circle1, .circle2, .circle3, .circle4 {
    width: 1.4vw;
    height: 1.4vw;
  }
  .map_txt_ul li em{
    width: 20vw;
  }
}
@media (min-width:0px) and (max-width:600px){
  .s3_li.swiper-slide {
    padding: 20px;
    gap: 20px;
  }
  .s3_txt{
    gap: 10px;
  }
  .s3_tit {
    font-size: 8vw;
  }
  .s3_tit+p {
    font-size: 4vw;
  }
  .left_right div:first-child {
    font-size: 7.5vw;
  }
  .intro_left .left_right >div:not(:first-child){
    font-size: 16px;
  }
  .s3_li.swiper-slide .s3_img {
    height: 250px;
  }
  .demo{
    bottom: -20px;
  }
  .program .slide_box {
    left: 260px;
  }
  .text_box .title br:nth-child(2){
    display: block;
  }
  .program .title_sub{
    width: 36vw;
  }
  .program .title_sub br{
    display: none;
  }
  .prgm_pagination{
    margin-top: 100px;
  }
  .equ .flip-card {
    height: 350px;
  }
  .equ .swiper{
    padding-top: 15px;
  }
  .map_tit.color {
    font-size: 13px;
  }
  .way_right::after{
    width: 15vw;
    height: 15vw;
  }
  .intro::after {
    width: 65vw;
    height: 65vw;
  }
  .way_right, .way_left{
    width: 95%;
  }
  @media (min-width:0px) and (max-width:500px){
    .main_station .info-text h2{
      font-size: 62px;
    }
    .main_tit{
      font-size: 9vw;
    }
    .doc .main_tit::before{
      font-size: 13px;
    }
    .label, .toggle-text{
      font-size: 6vw;
    }
    .circle1, .circle2, .circle3, .circle4 {
      width: 6px;
      height: 6px;
    }
    .intro_left .left_right >div:not(:first-child) {
      font-size: 4vw;
    }
    .left_right div:first-child {
      font-size: 7.5vw;
    }
    .circle1, .circle2, .circle3, .circle4{
      width: 1.7vw;
      height: 1.7vw;
    }
    .intro_wrap{
      gap: 0px;
    }
    .switch {
      width: 338px;
    }
    .toggle {
      width: 160px;
    }
    input:checked + .slider .toggle {
      transform: translateX(163px);
    }
    .s3_wrap .s3_txt .txt1, .txt2.active div{
      line-height: 1.5;
    }
    .s3_li.swiper-slide .s3_img {
      height: 230px;
    }
    .program .slide_box {
      left: 40px;
    }
    .text_box{
      height: 700px;
    }
    .program .slide_box{
      top: 68%;
    }
    .prgm_pagination {
      margin-top: 35px;
    }
    /* .swiper-backface-hidden .swiper-slide{
    width: 310px !important;
    } */
    .swiper-pagination-bullets.swiper-pagination-horizontal{
      justify-content: center !important;
    }
    .text_box .title br:nth-child(2) {
      display: none;
    }
    .text_box .title {
      font-size: 38px;
      line-height: 1.3;
    }
    .program .title_sub {
      width: 100%;
    }
    .map_txt_ul li em{
      width: 120px;
    }
    .map_txt_ul {
      font-size: 4vw;
    }
    .way_right{
      height: fit-content;
    }
    .map_txt_s{
      font-size: 1.8rem;
    }
    .left_right {
      margin: 0 auto;
      width: 90%;
      margin-bottom: 20px;
    }
    .left_right div:first-child {
      font-size: 6.8vw;
    }
    .map_tit_sticker{
      padding: 0px 6px;
    }
  }
  @media (min-width:0px) and (max-width:430px){
    .doc_inner_left span{
      font-size: 9vw;
    }
    .doc_inner_left > span i{
      font-size: 6vw;
    }
    .doc_inner_left ul{
      font-size: 4vw;
    }
    .switch {
      width: 72vw;
    }
    .intro_right {
      width: 65%;
    }
    input:checked + .slider .toggle {
      transform: translateX(34vw);
    }
    .toggle {
      width: 35vw;
    }
    .s3_wrap .s3_txt .txt2{
      font-size: 5vw;
    }
    .equ_title{
      font-size: 6vw;
    }
    .equ .flip-card {
      width: 257px;
    }
    .equ .swiper-slide {
      width: 257px !important;
      border-radius: 28px;
    }
    .map_tit.color {
      font-size: 3vw;
    }
    .map_top {
      font-size: 6vw;
    }
    .map_tit img{
      width: 7vw;
      height: 7vw;
    }
    .map_tit{
      gap: 10px;
    }
    .map_txt_ul li em {
      width: 20vw;
    }
    .map_txt_s, .program .title_sub, .main_station .banner3 .info-text .txt_small {
      font-size: 4vw;
    }
    .s3_wrap .s3_txt .txt1, .prgm_slide .swiper-slide .txt_box .desc{
      font-size: 5vw;
    }
    .switch{
      height: 14vw;
    }
    .toggle{
      height: 12vw;
      top: 3.5px;
    }
    .map_tit.color1{
      font-size: 7vw;
    }
    .way_right::after{
      width: 13vw;
      height: 13vw;
    }
    .way_left, .root_daum_roughmap_landing {
      height: 300px;
    }
    .doc .main_tit::before, .main_tit::before, .text_box .tiny {
      font-size: 3vw;
    }
    .arrow svg, .arrow{
      width: 15vw;
      height: 15vw;
    }
    .demo{
      grid-gap: 7vw;
    }
    .s3_li.swiper-slide .s3_img {
      height: 180px;
    }
    .s3_txt {
      padding: 5px;
    }
    .text_box .title{
      font-size: 9vw;
    }
    .prgm_slide .swiper-slide .txt_box .tit{
      font-size: 7vw;
    }
    .prgm_slide .swiper-slide .item_wr {
      width: 70vw;
      height: 80vw;
      margin-top: 10vw;
    }
    .text_box{
      height: 180vw;
    }
    .prgm_pagination{
      margin-top: 8vw;
    }
    .doc_inner_right{
      width: 80vw;
    }
    .intro::after{
      width: 80vw;
      height: 80vw;
    }
    .s3_li.swiper-slide{
      gap: 0px;
    }
    .equ .flip-card {
      height: 90vw;
    }
    .intro_left .left_right >div:not(:first-child) {
      font-size: 3.8vw;
    }
    .intro_left .left_right >div:last-child{
      font-size: 4.5vw;
    }
  }
  @media (min-width:0px) and (max-width:350px){
    .text_box {
      padding: 30px;
    }
  }
  @media (min-width:0px) and (max-width:300px){
    
  }
}