swiper 슬라이드와 css 충돌? 문의입니다.

<style>

.css3-tab {
  list-style: none;
  position: relative;
  width: 100%;
}
.css3-tab input[type='radio'] {
  display: none;
}
.css3-tab .css3-tab-nav {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.css3-tab .css3-tab-nav label {
  font-size:18px;
  display: table-cell;
  background-color: #9a9a9a;
  color: #FFFFFF;
  padding: 15px;
  text-align: center;
  transition: all .3s ease 0s;
      border-right: 1px solid #fff;
}
.css3-tab .css3-tab-nav label:hover {
  cursor: pointer;
  background: white;
  color: #9a9a9a;
  transition: all .3s ease 0s;
}
@media (max-width: 692px) {
  .css3-tab .css3-tab-nav {
    display: block;
    margin: 0 0 20px;
  }
  .css3-tab .css3-tab-nav label {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
  }  
  .css3-tab .css3-tab-nav a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
  }
}
.css3-tab .css3-tab-content {
  overflow: hidden;
  padding-top: 30px;
  display: none;
  background: #FFF;
  clear: left;
  box-sizing: border-box;
}
.css3-tab input[id='tabOne']:checked ~ .css3-tab-nav label[for='tabOne'] {
  font-size:18px;
  background: #408fde;
  color: #fff;
  cursor: default;
}
.css3-tab input[id='tabOne']:checked ~ div.tab-one {
  display: block;
  border-top: solid 3px #408fde;
}
.css3-tab input[id='tabTwo']:checked ~ .css3-tab-nav label[for='tabTwo'] {
  font-size:18px;
  background: #408fde;
  color: white;
  cursor: default;
}
.css3-tab input[id='tabTwo']:checked ~ div.tab-two {
  display: block;
  border-top: solid 3px #408fde;
}

.css3-tab-content h1 {color:#b7856d;}
.css3-tab-content h3 {color:#2d3f51;}
.css3-tab-content a {color:#fff; width:100%;}

 

    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>


<link rel="stylesheet" href="../skin/content/sub16/dist/css/swiper.min.css">


        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    

<div class="css3-tab">
        <input name="a" tabindex="1" id="tabOne" onclick="div_OnOff(this.value,'con');" type="radio" checked="" value="1">
        <input name="a" tabindex="2" id="tabTwo" onclick="div_OnOff(this.value,'con');" type="radio" value="2">

        <div class="css3-tab-nav">

                <label for="tabOne">E 책자</label>
                <label for="tabTwo">E 놀이</label>
        </div>

        <div class="css3-tab-content tab-one">

                <div class="col-md-12 col-sm-12" style="padding:0px;">
        
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../skin/content/sub16/img/Brochure1.jpg" data-u="image"></div>
      <div class="swiper-slide"><img src="../skin/content/sub16/img/Brochure2.jpg" data-u="image"></div>
      <div class="swiper-slide"><img src="../skin/content/sub16/img/Brochure3.jpg" data-u="image"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
  </div>

 

                </div>
        </div>

        <div class="css3-tab-content tab-two">
                <!-- start slipsum code -->
                <div class="col-md-12 col-sm-12" style="padding:0px;">
            
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-1.jpg" data-u="image"></div>
      <div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-2.jpg" data-u="image"></div>
      <div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-3.jpg" data-u="image"></div>
      <div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-4.jpg" data-u="image"></div>
      <div class="swiper-slide"><img src="../skin/content/sub16/img/chamberist-5.jpg" data-u="image"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>


                        </div>
                        </div>


</div>

                </div>
                </div>

</div>


  <!-- Swiper JS -->
  <script src="../skin/content/sub16/dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>