.tab_wrap{width:100%; margin:0;}
input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{
    margin:6px;
    display:inline-block;
    padding:12px;
    border-radius: 6px;
    color:#333;
    background:#ddd;
    text-align:center;
    font-size:13px;
    cursor:pointer;
    transition:ease 0.2s opacity;
}
.tab_area label:hover{background-color:#4cd964;color:#fff;}
.panel_area{background:#fff;}
.tab_panel{width:100%; margin:10px 0; display:none;}
.tab_panel p{font-size:medium; letter-spacing:1px; text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:#4cd964; color:#fff;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#4cd964; color:#fff;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#4cd964; color:#fff;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background:#4cd964; color:#fff;}
#tab4:checked ~ .panel_area #panel4{display:block;}
#tab5:checked ~ .tab_area .tab5_label{background:#4cd964; color:#fff;}
#tab5:checked ~ .panel_area #panel5{display:block;}
#tab6:checked ~ .tab_area .tab6_label{background:#4cd964; color:#fff;}
#tab6:checked ~ .panel_area #panel6{display:block;}