@charset "utf-8";

/*

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.1em;
  margin: 1em 0;
}
.description {
  margin: 1em auto 2.25em;
}
body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}
h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}
ul {
  list-style: none;
  padding: 0;
} */

div.tabs_area{
	width:100%;
	margin:10px 0;
}

ul .shutter-panel-collapse {
  overflow: hidden;
  display: none;
}
ul .shutter-panel-collapse.show {
  /*display: block;*/
}
ul li .panel-heading {
  width: 100%;
  display: block;
  background: #fff;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
  /* transition: background .3s ease; */
}
/*
ul li a.panel-heading:hover {
  background: rgba(194, 194, 194, 0.9);
}
*/

/** tabs-a **/
ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs:after{
	content:""; clear:both; display:block;
}
ul.tabs li{
	background: #d1d1d1;
	color: #9f9393;
	float: left;
	width: 50%; 
	cursor: pointer;
	border: 2px solid #d1d1d1; 
	box-sizing: border-box;
	padding: 10px 0;
	font-size: 20px;
	font-family: "NotoSansBold";
	text-align: center;
}

ul.tabs li.current{
	background: #24780f;
	border: 2px solid #24780f;
	color: #fff;
}

.tab-content{
	display: none;
	background: #d1d1d1;

}

.tab-content.current{
	display: inherit;
	background: #fff;
}

/** tabs-1 **/ 
ul.tabs-a{
	
}
ul.tabs-a:after{
	content:""; clear:both; display:block;
}
ul.tabs-a li{
	background: #eee;
	color: #9f9393;
	float: left;
	width: 50%;
	cursor: pointer;
	padding: 12px 0;
	font-size: 18px;
	font-family: "NotoSansBold";
	text-align: center;
	box-sizing:border-box;
}
ul.tabs-a li:last-child{
	border-right: none;
}
ul.tabs-a li.current{
	background: #24780f;
	color: #fff;
	box-sizing:border-box;
}

/** tabs-2 **/ 
ul.tabs-b{
	
}
ul.tabs-b:after{
	content:""; clear:both; display:block;
}
ul.tabs-b li{
	background: #eee;
	color: #9f9393;
	float: left;
	width: 50%;
	cursor: pointer;
	padding: 12px 0;
	font-size: 18px;
	font-family: "NotoSansBold";
	text-align: center;
	box-sizing:border-box;
}
ul.tabs-b li:last-child{
	border-right: none;
}
ul.tabs-b li.current{
	background: #4bbe50;
	color: #fff;
	box-sizing:border-box;
}

/* foreign*/
ul.tabs-menu-a{
	width:100%;
	border-bottom:none;
	box-sizing:border-box;
	padding:6px 0;
}
ul.tabs-menu-a:after{
	content:""; clear:both; display:block;
}
ul.tabs-menu-a li{
	background: #f9fafd;
	color: #555;
	float: left;
	width: 15.8%;
	margin: 6px 0 6px 12px;
	border: 1px solid #ddd;
	cursor: pointer;
	padding: 12px 0;
	font-size: 18px;
	font-family: "NotoSansBold";
	text-align: center;
	box-sizing: border-box;
	display: block;
} 
ul.tabs-menu-a li:nth-child(1){
	width: 16%;
	margin-left:0;
}

ul.tabs-menu-a li:nth-child(7){
	width: 16%;
	margin-left:0;
}

ul.tabs-menu-a li.current{
	background: #4bbe50;
	border: 1px solid #4bbe50;
	color: #fff;
}

/* diy */
ul.tabs-menu-b{
	width:100%;
	border-bottom:none;
	box-sizing:border-box;
	padding:6px 0;
}
ul.tabs-menu-b:after{
	content:""; clear:both; display:block;
}
ul.tabs-menu-b li{
	background: #f9fafd;
	color: #555;
	float: left;
	width: 19.1%;
	margin: 6px 0 6px 12px;
	border: 1px solid #ddd;
	cursor: pointer;
	padding: 12px 0;
	font-size: 18px;
	font-family: "NotoSansBold";
	text-align: center;
	box-sizing: border-box;
	display: block;
} 
ul.tabs-menu-b li:nth-child(1){
	width: 19.5%;
	margin-left:0;
}
ul.tabs-menu-b li:nth-child(6){
	width: 19.5%;
	margin-left:0;
}
ul.tabs-menu-b li.current{
	background: #325e6b;
	border: 1px solid #325e6b;
	color: #fff;
}