Edit in JSFiddle

<div id="css_tabs">
  <input name="tab" id="tab1" type="radio" checked>
  <input name="tab" id="tab2" type="radio">
  <input name="tab" id="tab3" type="radio">
  <input name="tab" id="tab4" type="radio">
  <input name="tab" id="tab5" type="radio">
  <input name="tab" id="tab6" type="radio">
  <header>
    <label for="tab1">TAB 1</label>
    <label for="tab2">TAB 2</label>
    <label for="tab3">TAB 3</label>
    <label for="tab4">TAB 4</label>
    <label for="tab5">TAB 5</label>
    <label for="tab6">TAB 6</label>
  </header>
  <div class="tab1_content tc">
    <p>TAB1 내용이 출력되는 부분 입니다.</p>
    <p>...</p>
  </div>

  <div class="tab2_content tc">
    <p>TAB2 내용이 출력되는 부분 입니다.</p>
    <p>...</p>
  </div>

  <div class="tab3_content tc">
    <p>TAB3 내용이 출력되는 부분 입니다.</p>
    <p>...</p>
  </div>

  <div class="tab4_content tc">
    <p>TAB4 내용이 출력되는 부분 입니다.</p>
    <p>...</p>
  </div>

  <div class="tab5_content tc">
    <p>TAB5 내용이 출력되는 부분 입니다.</p>
    <p>...</p>
  </div>

  <div class="tab6_content tc">
    <p>TAB6 내용이 출력되는 부분 입니다.</p>
    <p>...</p>
  </div>

</div>
<!-- css_tabs end -->	

#css_tabs input[name=tab] { display: none; }

#css_tabs input:nth-of-type(1)~div:nth-of-type(1),
#css_tabs input:nth-of-type(2)~div:nth-of-type(2),
#css_tabs input:nth-of-type(3)~div:nth-of-type(3),
#css_tabs input:nth-of-type(4)~div:nth-of-type(4),
#css_tabs input:nth-of-type(5)~div:nth-of-type(5),
#css_tabs input:nth-of-type(6)~div:nth-of-type(6) {
  display: none;
}

#css_tabs input:nth-of-type(1):checked~div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked~div:nth-of-type(2),
#css_tabs input:nth-of-type(3):checked~div:nth-of-type(3),
#css_tabs input:nth-of-type(4):checked~div:nth-of-type(4),
#css_tabs input:nth-of-type(5):checked~div:nth-of-type(5),
#css_tabs input:nth-of-type(6):checked~div:nth-of-type(6) {
  display: block
}

#css_tabs input:nth-of-type(1):checked~header>label[for=tab1],
#css_tabs input:nth-of-type(2):checked~header>label[for=tab2],
#css_tabs input:nth-of-type(3):checked~header>label[for=tab3],
#css_tabs input:nth-of-type(4):checked~header>label[for=tab4],
#css_tabs input:nth-of-type(5):checked~header>label[for=tab5],
#css_tabs input:nth-of-type(6):checked~header>label[for=tab6] {
  background: #007cc9;
  border-color: #007cc9;
  color: #fff;
}

#css_tabs { padding: 1rem; }

#css_tabs>header { display: flex; justify-content: center; flex-wrap: wrap; text-align: center; }

#css_tabs>header>label {
  width: 100px; height: 40px; line-height: 40px; font-family: 'NanumBold'; font-weight: 700; text-decoration: none;
  cursor: pointer; background-color: #ededed; border: 1px solid #ddd; margin: 2px;
}

#css_tabs>header>label:hover { background-color: #fff; }


@media (max-width: 800px) {
  #css_tabs>header>label { width: 45%; }
}