.tab_wrap{
width:98%; margin:10px auto;
}
input[type="radio"]{display:none;}

.tab_area{
font-size:0; margin:0 10px;
}

.tab_area label{
width:auto; margin:2px 5px; display:inline-block; padding:16px 20px; color:#333;
background:rgba(255,255,255, .9); text-align:center; font-size:14px; cursor:pointer; transition:ease 0.2s opacity;
-webkit-border-radius: 7px 7px 0 0;
-moz-border-radius: 3px;-o-border-radius: 7px 7px 0 0;
border-radius:  7px 7px 0 0;
}


@media screen and (max-width: 768px){
.tab_area label{
display:block;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius:  0;
}}







.tab_area label:hover{
opacity:0.5;
}
.panel_area{
background:rgba(255,255,255, .5);
}



.tab_panel{
width:99%; padding:10px 12px; display:none;
}
.tab_panel p{
font-size: 1.0em; letter-spacing:1px; text-align:left;
}

#tab1:checked ~ .tab_area .tab1_label{
background:#ddd; color:#000;
}
#tab1:checked ~ .panel_area #panel1{
display:block;
}

#tab2:checked ~ .tab_area .tab2_label{
background:#ddd; color:#000;
}
#tab2:checked ~ .panel_area #panel2{
display:block;
}

#tab3:checked ~ .tab_area .tab3_label{
background:#ddd; color:#000;
}
#tab3:checked ~ .panel_area #panel3{
display:block;
}

#tab4:checked ~ .tab_area .tab4_label{
background:#ddd; color:#000;
}
#tab4:checked ~ .panel_area #panel4{
display:block;
}


#tab5:checked ~ .tab_area .tab5_label{
background:#ddd; color:#000;
}
#tab5:checked ~ .panel_area #panel5{
display:block;
}
#tab6:checked ~ .tab_area .tab6_label{
background:#ddd; color:#000;
}
#tab6:checked ~ .panel_area #panel6{
display:block;
}

#tab7:checked ~ .tab_area .tab7_label{
background:#ddd; color:#000;
}
#tab7:checked ~ .panel_area #panel7{
display:block;
}












@media screen and (max-width: 768px){
.tab_wrap{width:92%; margin:10px auto;}
}}