@charset "utf-8";
/* -----------------------------------------------
 recruit CSS
-------------------------------------------------- */
.row{
    margin-bottom: 5em;
}
.box_left{
    position: relative;
    width: 100%;
    top:3em;
    right: -5em;
    background-color:white;
    padding: 2.5em;
    z-index: 10;
    box-shadow: 0px 0px 3px 3px rgba(197, 197, 197, 0.35);
}
.box_right{
    position: relative;
    width: 100%;
    top:3em;
    left: -5em;
    background-color:white;
    padding: 2.5em;
    z-index: 10;
    box-shadow: 0px 0px 3px 3px rgba(197, 197, 197, 0.35);
}
/*---tab---*/
ul.tab {
	width:100%;
	list-style: none;
	position: relative;
	overflow: hidden;	
   display: inline-block;
   margin-bottom:-9px;
}
ul.tab li {
	float: left;
	width:32.5%;
	margin: 0 0 0 0.75%;
	padding:15px 0;
	font-size: 18px;
	font-weight: 500;
	text-align:center;
	cursor: pointer;
	background-color: #eaeaea;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
ul.tab li:last-child {
	border-right:none;
	margin-right: 0;
}

ul.tab li:hover {
	color: #FFF;
	background-color: #6d6d6d;
}
ul.tab li.active {
   color: #FFF;
	background-color: var(--green);
}
ul.tab li.active:hover {
   color: #FFF;
   background-color: var(--green);
}
ul.tab li.active:active {
   color: #FFF;
   background-color: var(--green);
}
ul.tab li.active:visited {
   color: #FFF;
   background-color: var(--green);
}
ul.tab li i{
padding-right: 4px;
}


div.tabContent {
	clear: both;
	width: 100%;
	padding: 1.25em 3.5em 0;
	display: none;
	height: auto;
	overflow-y:scroll;
	background-color: #FFF;
	margin-bottom:30px;
	border: 3px solid #EDEDED;
}
div.tabContent.active {
	display: block;
	width: 100%;
}
div.tabContent a {
	color:#1c6a97;
}
div.tabContent a:hover {
	color:#5b9abe;
}
div.tabContent img{
height: 80px;
}
/* -----------------------------------------------
smartPhone
-------------------------------------------------- */
@media screen and (max-width: 992px) {
.row{
    margin-bottom: 3em;
}
.box_left{
    top:0;
    right:0;
}
.box_right{
    top:0;
    left: 0;
}
}

/* -----------------------------------------------
smartPhone
-------------------------------------------------- */
@media screen and (max-width: 768px) {
ul.tab li {
	float: left;
	width:100%;
	border-radius: 0px;
    border-bottom: 2px solid #fff;
	}
div.tabContent {
	clear: both;
	width: 100%;
	padding: 1.25em 1em 0;
	border: none;
}
div.tabContent .border_box_d{
	padding: 1.5em;
}
}