@charset "UTF-8";
/* CSS Document */

.tab_box{
	width: 810px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}
input[type="radio"]{
    display: none;
}
.tab_area{
	font-size: 0;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.tab_area label{
	width: 250px;
	display: inline-block;
	color: #999;
	background: #333;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	transition: ease 0.2s opacity;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
	padding-top: 18px;
	padding-right: 0;
	padding-bottom: 18px;
	padding-left: 0;
}
.tab_area label:hover{
    opacity: 0.8;
}
.panel_area{
    background: #fff;
}
.tab_panel{
    width: 100%;
    padding: 0;
    display: none;
}
.tab_panel p{
    letter-spacing: 1px;
    text-align: center;
}
.tab_panel p.des{
    font-size: 20px;
    padding: 10px 0;
}

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

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

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

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

#tab5:checked ~ .tab_area .tab5_label{background:#00ffee; color:#000;}
#tab5:checked ~ .panel_area #panel5{display:block;}

#tab6:checked ~ .tab_area .tab6_label{background:#f68fff; color:#000;}
#tab6:checked ~ .panel_area #panel6{display:block;}

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