@charset "utf-8";

/*=============================================
 * body
 *=============================================*/

body {
	color: #000;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 35px;
	letter-spacing: 0.8px;
	background: #FFF;
	font-weight: bold;
	min-width: 1400px;
	max-height: 100%;
}

/*=============================================
 * #wrapper
 *=============================================*/

#wrapper {
	clear: both;
	width: 100%;
	min-width: 1400px;
	position: relative;
	overflow: hidden;
}

.wrap { width: 1000px; }

.pa_t20 { padding-top: 20px; }

.tourokuyoko {
	position: fixed;
	top: 149px;
	left: 0;
	z-index: 1000;
}

.line-fixed {
	position: fixed;
	top: 449px;
	left: 0;
	z-index: 1000;
}

/*=============================================
 * header
 *=============================================*/

#header {
	min-width: 1400px;
	position: relative;
}

#header h1 {
	font-size: 14px;
	line-height: 20px;
	color: #FFF;
	position: absolute;
	top: 84px;
	left: 20px;
	z-index: 99;
	font-weight: bold;
}

/* .language { */
    /* width: 129px; */
    /* border: 1px solid #284a8d; */
    /* border-radius: 30px; */
    /* position: fixed; */
    /* top: 15px; */
    /* right: 120px; */
    /* z-index: 1000; */
	/* font-family: "Times New Roman", sans-serif; */
/* } */
/* .language p{ */
	/* float:left; */
	/* line-height: 43px; */
	/* text-align: center; */
	/* width: 43px; */
/* } */
/* .language a { */
    /* display: block; */
    /* border-radius: 50%; */
    /* color: #000; */
	/* width:100%; */
    /* text-decoration: none; */
/* } */
/* .language a:hover { */
    /* color: #fff; */
    /* background-color: #284a8d; */
/* } */
/* .language .active { */
    /* border-radius: 50%; */
	/* background-color: #284a8d; */
    /* color: #fff; */
	/* width:43px; */
    /* text-decoration: none; */
/* } */

.language {
	font-family: "Times New Roman", sans-serif;
	background-color: #204e95;
	cursor: pointer;
    word-wrap: break-word;
    width: 100px;
    position: fixed;
    top: 61px;
    right: 112px;
    z-index: 98;
    line-height: 30px;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
    padding: 3px 10px;
	color: #fff;
    box-shadow: none;
    border: 1px solid #ffffff;
    border-radius: .28571429rem;
    -webkit-transition: box-shadow .1s ease,width .1s ease;
    transition: box-shadow .1s ease,width .1s ease;
}
.language:before {
	content: "";
	position: absolute;
    top: 16px;
    right: 10px;
    width: 10px;
    height: 5px;
	background: url('../img/shared/arrow.png') no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
}
.language ul {
	display: none;
	transition: all .3s ease;
	position: absolute;
	top: 35px;
	left: -1px;
	outline: 0;
	background-color: #204e95;
    border: 1px solid #ffffff;
    width: 100% !important;
    opacity: 1 !important;
    border-top: none;
    border-radius: 0 0 .28571429rem .28571429rem;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease;
}
.language ul li {
	position: relative;
    cursor: pointer;
    display: block;
    line-height: 1em;
    color: #fff;
    font-size: 1rem;
    text-transform: none;
    font-weight: 400;
    box-shadow: none;
    padding: 10px;
	border-top: 1px solid #fafafa;
}
.language ul li:hover {
	background-color: rgba(0, 0, 0, 0.1);
}
.language ul li a {
	text-decoration: none;
}
.language.active {
	border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
	border-color: #5ec3cf;
}
.language1 {
	display: none;
    width: 122px;
    line-height: 40px;
    border: 1px solid #fff;
    padding: 0 !important;
    margin-left: 10px;
    margin-top: 15px;
}
.language1 a {
    display: block;
    float: left;
    width: 40px;
    text-align: center;
    text-decoration: none;
}
.language1 a + a {
	border-left: 1px solid #fff;
}
.language1 a.active {
    background-color: #284a8d;
}

.banner-fb {
	display: block;
	background: #204e95 url('../img/shared/fb_icon.png') no-repeat 88% center/11px auto;
	cursor: pointer;
	word-wrap: break-word;
	width: 100px;
	position: fixed;
	top: 10px;
	right: 112px;
	z-index: 98;
	font-family: "Times New Roman", sans-serif;
	line-height: 30px;
	box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
	padding: 3px 10px;
	color: #fff;
	box-shadow: none;
	border: 1px solid #ffffff;
	border-radius: .28571429rem;
	-webkit-transition: box-shadow .1s ease,width .1s ease;
	transition: box-shadow .1s ease,width .1s ease;
	text-transform: capitalize;
}

.banner-fb a:hover { text-decoration: none; }

.side-fb {
	display: none;
}
@media(max-width:1024px) {	
	.banner-fb { display: none; }
}
@media (max-width:766px) {	
	.side-fb {
		display: block;
		position: relative;
		top: 0;
		right: 0;
		width: 71%;
		margin-top: 6%;
	}
}

#header .number {
	font-size: 14px;
	line-height: 20px;
	color: #FFF;
	position: absolute;
	top: 110px;
	left: 20px;
	z-index: 99;
	font-weight: bold;
}

#header .number2 {
	font-size: 14px;
	line-height: 20px;
	color: #000;
	position: absolute;
	top: 50px;
	left: 20px;
	z-index: 99;
	font-weight: bold;
}

#header .logo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}

#header .logo_blue {
	position: absolute;
	top: 19px;
	left: 1.5%;
	z-index: 99;
}

#header .nav {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	font-size: 14px;
}

#header .nav .toggle_bnr {
	position: fixed;
	top: 0;
	right: 0;
	cursor: pointer;
	padding: 0;
}

#header .nav ul li {
	padding-left: 10px;
	letter-spacing: 1.2px;
	margin-left: 13px;
	line-height: 1.9;
}

#header .nav ul {
	padding: 30px 0 80px 30px;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	background: rgba(94,195,207,0.9);
	display: none;
	overflow-y: auto;
	color: #FFF;
}

#header .nav li.icon {
	background: url(../img/shared/nav-icon.png) no-repeat 10px center;
	padding-left: 27px;
	font-size: 16px;
	letter-spacing: 1.5px;
}

#header .nav .pad1 { margin-bottom: 16px; }

/*=============================================
 * key
 *=============================================*/

#key { }

#key ul { min-height: inherit; }

#key li { min-height: inherit; }

/*=============================================
 * container
 *=============================================*/

#container { min-width: 1400px; }

/*=============================================
 * #socialbuttons
 *=============================================*/

#socialbuttons {
	margin: auto;
	padding: 35px 0 0;
	max-width: 350px;
}

/*=============================================
 * footer
 *=============================================*/

#footer {
	min-width: 1400px;
	padding-top: 50px;
}

#footer .logo { float: left; }

#footer .nav li {
	float: left;
	margin-right: 16px;
	font-weight: bold;
}

#footer .sub-nav li {
	float: none;
	margin-right: 0;
}

#footer .nav li a {
	font-size: 13px;
	line-height: 20px;
	background: #44a8d1;
	color: #FFF;
	margin-bottom: 6px;
	padding: 3px 0 2px 6px;
	width: 224px;
	display: block;
	letter-spacing: 0.8px;
}

#footer .sub-nav li a {
	background: none;
	color: #000;
	line-height: 35px;
	padding: 0;
	margin-bottom: 0;
	padding-left: 10px;
}

#footer .sub-nav .lt1 { letter-spacing: 0; }

#footer .tel {
	background: url(../img/shared/footer-arrow.png) no-repeat center top;
	color: #fff;
	text-align: center;
	padding: 35px 0 21px;
	letter-spacing: 1px;
	display: inline-block;
	vertical-align: top;
}

#footer .tel h3 {
	font-size: 20px;
	padding-bottom: 4px;
}

#footer .tel p {
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
}

#footer .tel p span {
	font-size: 28px;
	letter-spacing: 2px;
}

#footer .nav li + li { }

#footer .nav li + li:before { /* display: none; */
}

address {
	float: right;
	font-size: 13px;
	height: 20px;
	color: #0f8fba;
	font-weight: bold;
	padding: 20px 20px 0 0;
	letter-spacing: 0.6px;
}

.f-inner {
	background: #0f8fba;
	overflow: hidden;
	margin-top: 40px;
	text-align: center;
}

.f-inner .line {
	background-color: #43c500;
	display: inline-block;
	vertical-align: top;
	width: 31%;
	margin: 3.5% 0 3.5% 3%;
}

.f-inner .line .l-inner {
	background-color: #fff;
	margin: 2%;
	padding: 3% 3% 3% 5%;
	overflow: hidden;
}

.f-inner .line .l-inner dl {
	float: left;
	width: 58%;
}

.f-inner .line .l-inner dt {
	text-align: left;
	font-size: 162%;
	font-weight: bold;
	line-height: 1.5;
}

.f-inner .line .l-inner dd {
	background-color: #43c500;
	color: #fff;
	font-size: 70%;
	margin-top: 4%;
	padding: 0 6%;
}

.f-inner .line .l-inner dd:before {
	content: "→";
}

.f-inner .line .l-inner div {
	float: right;
	width: 42%;
}


.col_l { float: left; }
.col_r { float: right; }
.pr-0 { padding-right: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.mb-0 { margin-right: 0 !important; }
.text_r { text-align: right; }
.text_c { text-align: center; }
.bg-n { background: none !important; }
.bd-n { border: none !important; }

.z1 {
	position: relative;
	z-index: 1;
}

.bg1 { background: url(../img/shared/bg-01.jpg) repeat center top; }
.bg2 { background: url(../img/shared/bg-02.jpg) repeat center top; }

.fc-wow {
	animation-duration: 1s;
	-moz-animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}

.pa_l10 { padding-left: 10px !important; }

.f18 { font-size: 18px !important; }

.f20 { font-size: 20px !important; }

.tel2 {
	width: 1000px;
	background: #0f8fba /*url(../img/shared/footer-arrow.png) no-repeat center top*/;
	color: #fff;
	text-align: center;
	margin: 0 auto;
	padding: 35px 0 30px;
	margin-top: 40px;
	letter-spacing: 1px;
	position: relative;
	z-index: 10;
}

.tel2 h3 {
	font-size: 20px;
	padding-bottom: 10px;
	font-weight: bold;
}

.tel2 p.left {
	width: 380px;
	float: left;
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
	margin-left: 130px;
}

.tel2 p span {
	font-size: 35px;
	letter-spacing: 2px;
}

.tel2 p.right {
	width: 360px;
	float: right;
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
	border-left: 1px solid #fff;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-right: 100px;
	padding-left: 20px;
}

.kito {
	background: #fff url(../img/shared/kito_inner_bg.png) no-repeat right top;
	clear: both;
	margin: 12% 10% 2%;
	position: relative;
	text-align: left;
}

.kito dt {
	padding: 5%;
}

.kito dd {
	position: absolute;
	bottom: 0;
	right: 3%;
}
/* --------------------------------------------------------------------------------------
   シングルページ
--------------------------------------------------------------------------------------- */

.single-kv {
	background: url(../img/career_change/key_gra_bg.gif) repeat-x left top;
	height: 831px;
}

.single-kv div {
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 831px;
}

.characteristic {
	background: url(../img/career_change/line04.png) no-repeat left top;
	min-height: 515px;
	color: #fff;
	margin-top: -13%;
	position: relative;
}

.characteristic .wrap { padding: 7% 0 0; }

.characteristic .wrap dl {
	float: left;
	width: 29.3%;
	margin-left: 6%;
}

.characteristic .wrap dl:first-child {
	margin-left: 0;
	margin-top: 12%;
}

.characteristic .wrap dl:nth-child(2) { margin-top: 5%; }

.characteristic .wrap dt {
	border-bottom: 3px solid #fff;
	text-align: center;
	line-height: 1.5;
	font-size: 175%;
	padding-bottom: 4%;
}

.characteristic .wrap dd {
	margin-top: 4%;
	line-height: 2.0;
}

.single-main {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	margin-top: -11%;
}

.single-main dl {
	background-color: #fff;
	line-height: 2.0;
	margin: 24% 0 19%;
	padding: 4% 6%;
	width: 47%;
	position: relative;
	z-index: 20;
	float: right;
}

.single-main dt {
	color: #0eb8f1;
	font-size: 236%;
	font-weight: bold;
	line-height: 1.3;
}

.single-main dd { margin-top: 4%; }

.single-ttl {
	background: url(../img/career_change/line05.png) no-repeat left top;
	padding: 8% 0 13%;
	text-align: center;
	position: relative;
	z-index: 10;
	margin-top: -7%;
}

.single-ttl img {
	border-bottom: 2px solid #fff;
	padding-bottom: 10px;
}

.single-table {
	border-right: 1px solid #1a418f;
	width: 820px;
	margin: 1% auto 5%;
}

.single-table th {
	border-top: 1px solid #fff;
	background-color: #1a418f;
	color: #fff;
	vertical-align: middle;
	font-size: 115%;
	font-weight: bold;
	padding: 1% 0%;
	width: 27%;
}

.single-table td {
	border-top: 1px solid #1a418f;
	vertical-align: middle;
	font-weight: bold;
	padding: 2% 5%;
	width: 72%;
	line-height: 1.7;
}

.single-table tr:first-child th { border-top: 1px solid #1a418f; }

.single-table tr:last-child th,
.single-table tr:last-child td { border-bottom: 1px solid #1a418f; }

@media(min-width: 1600px) {
	.characteristic {
		background-position: center center !important;
		background-size: 100% auto !important;
		padding-bottom: 5%;
		min-height: inherit;
	}
	
	.single-main { margin-top: -13%; }
	
	.single-ttl {
		background-size: 100% auto !important;
		padding-bottom: 9%;
	}
}

/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media(max-width:1024px) and (min-width: 767px) {
	#wrapper,body,#container,#header,#footer { min-width: inherit; }
	
	#header .nav .toggle_bnr { width: 9%; }
	
	#header .nav ul { padding-top: 3%; }
	
	.wrap { width: auto; }
	
	#sec1 .info1 .main h2 img,
	.tourokuyoko img,
	#header .nav .toggle_bnr img,
	.kito img,
	.line-fixed img,
	.f-inner .line .l-inner div img {
		width: 100%;
		height: auto;
	}
	
	.tourokuyoko {
		width: 7%;
		top: 23%;
		z-index: 1000000;
	}
	
	.line-fixed {
		width: 7%;
		top: 42.7%;
		z-index: 1000000;
	}
	
	.tel2 { width: auto; }
	
	.tel2 p.left {
		float: none;
		margin: 0 auto;
		border-bottom: 1px solid #fff;
		padding-bottom: 2%;
	}
	
	.tel2 p.right {
		border: none;
		float: none;
		margin: 2% auto 0;
	}
	
	#footer { padding-top: 6%; }
	
	#footer .nav li {
		width: 47%;
		margin-bottom: 3%;
	}
	
	#footer .nav li a { width: auto; }
	
	#footer .sub-nav li {
		width: auto;
		margin-bottom: 0;
	}
	
	#footer .tel { padding-top: 5%; }
	
	.kito {
		background-size: 36% auto;
		margin-top: 4%;
	}
	
	.kito dt { width: 56%; }
	.kito dd { width: 22%; }
	
	.f-inner .line {
		width: 34%;
		margin-bottom: 4%;
	}
	
	.f-inner .line .l-inner dl {
		float: none;
		width: auto;
	}
	
	.f-inner .line .l-inner dt {
		font-size: 125%;
		text-align: center;
	}
	.f-inner .line .l-inner dd:before { content: "↓";}
	
	.f-inner .line .l-inner div {
		float: none;
		width: 40%;
		text-align: center;
		margin: 7% auto 5%;
	}
	
	.single-kv { height: auto; }
	
	.single-kv div {
		background-size: 80% auto;
		height: auto;
		padding-bottom: 87%;
	}
	
	.characteristic {
		background-size: 175% auto;
		background-position: left top;
		margin-top: -20%;
		min-height: 443px;
	}
	
	.characteristic .wrap { padding: 14% 4% 0; }
	
	.characteristic .wrap dt { font-size: 120%; }
	
	.characteristic .wrap dd {
		line-height: 1.7;
		font-size: 90%;
	}
	
	.single-main {
		background-size: 152% auto;
		min-height: 514px;
	}
	
	.single-main dl {
		margin-top: 9%;
		width: 40%;
		margin-right: 3%;
		margin-bottom: 11%;
	}
	
	.single-main dt { font-size: 155%; }
	
	.single-main dd {
		font-size: 107%;
		line-height: 1.7;
	}
	
	.single-ttl {
		background-size: 122% auto;
		background-position: left top;
	}
	
	.single-table { width: 77%; }
	
	.single-table th { width: 38%; }
}


@media screen and (max-width:1024px) {
	.language {
		display: none;
	}
	.language1 {
		display: block;
	}
}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 766px) {
	
	body { padding-bottom: 65px; }
	
	#wrapper,body,#container,#header,#footer { min-width: inherit; }
	
	.wrap { width: auto; }
	
	#header .nav .toggle_bnr { width: 14%; }
	
	.tourokuyoko {
		width: 50%;
		top: auto;
		z-index: 1000000;
		bottom: 0;
	}
	
	.tourokuyoko a {
		background-image: url(/wp-content/themes/kojijob/shared/img/shared/botan_soudan.png);
		display: block;
		height: 63px;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: #1a418f;
		background-position: center center;
	}
	
	.tourokuyoko a img { display: none; }
	
	#sec1 .info1 .main h2 img,
	.tourokuyoko img,
	#header .nav .toggle_bnr img{
		width: 100%;
		height: auto;
	}
	
	#header h1 {
		font-size: 65%;
		top: 52px;
		left: 4%;
	}
	
	#header .number {
		font-size: 65%;
		left: 4%;
		top: 70px;
	}
	
	#header .nav ul { width: 92%; }
	
	#header .nav .pad1 img { width: 53%; }
	
	#header .logo { width: 54%; }
	
	.tel2 {
		width: auto;
		margin-top: 0;
		padding-bottom: 0;
	}
	
	.tel2 h3 {
		font-size: 150%;
		padding: 0 7% 5% 13%;
		text-align: left;
	}
	
	.tel2 p.left {
		float: none;
		margin: 0 auto;
		border-bottom: 1px solid #fff;
		padding-bottom: 2%;
	}
	
	.tel2 p.right {
		border: none;
		float: none;
		margin: 2% 11% 0;
		width: auto;
		padding-left: 0;
	}
	
	#footer { padding-top: 0; }
	
	#footer .nav li {
		width: auto;
		margin-right: 0;
		margin-bottom: 0;
		float: none;
	}
	
	#footer .nav li a,
	#footer .nav li > span { 
		width: 100%;
		padding: 1% 4% 1% 13%;
		margin-bottom: 0;
		line-height: 1.5;
	}
	
	#footer .nav li > span {
		display: block;
		background-color: #c3e6f5;
		margin-bottom: -10%;
	}
	
	#footer .sub-nav li {
		width: auto;
		margin-bottom: 0;
	}
	
	#footer .sub-nav a {
		background-color: #ddf5ff !important;
		margin-bottom: 1px !important;
	}
	
	#footer .tel {
		margin-top: 0;
		display: block;
	}
	
	#footer .tel p {
		width: 90%;
		margin: 2% auto 0;
		padding: 0;
		font-size: 15px;
	}
	
	#footer .logo { width: 39%; }
	
	address {
		font-size: 66%;
		padding: 0;
		margin-right: 2%;
		margin-top: 1%;
	}
	
	.kito {
		background-size: 28% auto;
		margin: 4% 0 0;
	}
	
	.kito dt {
		width: 61%;
		padding: 3%;
		margin-left: 10%;
	}
	.kito dd {
		width: 17%;
		right: 4%;
	}
	
	.f-inner { margin-top: 0; }
	
	.f-inner .line {
		width: 50%;
		margin: 0;
		position: fixed;
		bottom: 0;
		z-index: 100;
		height: 63px;
	}
	
	.f-inner .line .l-inner {
		background-color: #43c500;
		margin: 0;
		display: table;
		height: 45px;
	}
	
	.f-inner .line .l-inner dl {
		width: auto;
		margin-top: 5%;
		margin-left: 8%;
		display: table-cell;
		float: none;
		vertical-align: middle;
	}
	
	.f-inner .line .l-inner dt {
		font-size: 87%;
		text-align: center;
		color: #fff;
	}
	
	.f-inner .line .l-inner dd{
		width: 85%;
		margin: 0 auto;
		line-height: 25px;
		display: none;
	}
	.f-inner .line .l-inner dd:before { content: "↓";}
	
	.f-inner .line .l-inner div {
		width: 32%;
		text-align: center;
		display: table-cell;
		float: none;
	}
	
	#header .logo_blue {
		width: 48%;
		top: 11px;
		left: 4%;
	}
	
	.single-kv {
		height: auto;
	}
	
	.single-kv div {
		background-size: 80% auto;
		height: auto;
		padding-bottom: 87%;
	}
	
	.characteristic {
		background-size: 175% auto;
		background-position: left top;
		margin-top: -20%;
		min-height: 443px;
	}
	
	.characteristic .wrap {
		padding: 14% 0 0;
		position: relative;
	}
	
	.characteristic .wrap dl {
		background-color: #1b428f;
		float: none;
		width: auto;
		margin-left: 0;
		padding: 6% 6% 0;
	}
	
	.characteristic .wrap dl:first-child { padding-top: 0; }
	.characteristic .wrap dl:last-child { padding-bottom: 10%; }
	
	
	
	.characteristic .wrap dl:last-child:after {
		background: url(../img/career_change/line04.png) no-repeat left bottom/ 125% auto;
		content: "";
		display: block;
		padding-bottom: 20%;
		margin-bottom: -30%;
		margin-left: -7%;
		width: 114%;
		overflow: hidden;
	}
	
	.characteristic .wrap dl:nth-child(2) { margin-top: 0; }
	
	.characteristic .wrap dt { font-size: 120%; }
	
	.characteristic .wrap dd {
		line-height: 1.7;
		font-size: 90%;
	}
	
	.single-main {
		background-size: 208% auto;
		min-height: inherit;
		margin-top: 0;
		background-position: 13% 0;
		padding-top: 97%;
		margin-bottom: 10%;
	}
	
	.single-main dl {
		margin-top: 0;
		width: auto;
		margin: 0 9%;
	}
	
	.single-main dt { font-size: 155%; }
	
	.single-main dd {
		font-size: 107%;
		line-height: 1.7;
	}
	
	.single-ttl {
		background-size: 177% auto;
		background-position: 15% top;
		padding: 12% 0 19%;
	}
	
	.single-ttl img { width: 27%; }
	
	.single-table {
		border-right: none;
		width: 77%;
	}
	
	.single-table th {
		width: auto;
		display: block;
	}
	.single-table td {
		display: block;
		width: auto;
	}
	
	.line-fixed { display: none; }
}

#banner_list  {
	background: #5ec3cf;
    padding: 4.5% 0px;
}
#banner_list ul.banner {
	width:90%;
	margin:auto;
}
#banner_list .banner li{
	display: inline-block;
	margin: 6px;
	width: 196px;
	/*height: 85px;
	background-color: #fff;*/
}
@media screen and (max-width: 1489px) {
#banner_list .banner li{
		float: left;
		margin: 0.5%;
		width: 15.65%;
	}
}
@media screen and (max-width: 999px) {
#banner_list .banner li{
	float: left;
	margin: 0.5%;
	width: 32.3%;
	}	
}
@media screen and (max-width: 768px){
	#banner_list .banner li {
		float: left;
		margin: 0.75%;
		width: 31.8%;
	}
}
@media screen and (max-width: 610px){
	#banner_list .banner {
	margin-bottom: 30px;
	}
	#banner_list .banner li{
	float: left;
	margin: 1%;
	width: 48%;
	background-color: #fff;
	}
}