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

/* -------------------------------------------------
contents
------------------------------------------------- */

#mv {
	height: 450px;
	display: block;
	float: left;
	width: 100%;
}

#bx-pager {}

.bxslider li {
	height: 450px;
	font-size: 0;
}
.bxslider .sl01 {
	background: url(../service/img/oil/mv.jpg) top center;
	background-size: cover;
}
.bxslider .sl02 {
	background: url(../service/img/lng/mv.jpg) top center;
	background-size: cover;
}
.bxslider .sl03 {
	background: url(../service/img/chemicals_d/mv.jpg) top center;
	background-size: cover;
}
.bxslider .sl04 {
	background: url(../service/img/chemicals_i/mv.jpg) top center;
	background-size: cover;
}
.bxslider .sl05 {
	background: url(../service/img/container/mv.jpg) top center;
	background-size: cover;
}
#bx-pager {
	background: rgba(0,0,0,0.6);
	position: relative;
	height: 80px;
	top:-80px;
}
#bx-pager ul {
	max-width: 960px;
    margin: 0 auto;
    padding: 20px 0;
    width: 100%;
}
#bx-pager ul li {
	float: left;
	width: 192px;
}
#bx-pager li a {
	display: block;
	width: 240px;
	height: 40px;
	font-size: 0;
}
#bx-pager li.btn01 a {
	background: url(../service/img/mvMenuBtn01.png) no-repeat 0 0;
}
#bx-pager li.btn01 a.active {
	background: url(../service/img/mvMenuBtn01_on.png) no-repeat 0 0;
}
#bx-pager li.btn02 a {
	background: url(../service/img/mvMenuBtn02.png) no-repeat 0 0;
}
#bx-pager li.btn02 a.active {
	background: url(../service/img/mvMenuBtn02_on.png) no-repeat 0 0;
}
#bx-pager li.btn03 a {
	background: url(../service/img/mvMenuBtn03.png) no-repeat 0 0;
}
#bx-pager li.btn03 a.active {
	background: url(../service/img/mvMenuBtn03_on.png) no-repeat 0 0;
}
#bx-pager li.btn04 a {
	background: url(../service/img/mvMenuBtn04.png) no-repeat 0 0;
}
#bx-pager li.btn04 a.active {
	background: url(../service/img/mvMenuBtn04_on.png) no-repeat 0 0;
}
#bx-pager li.btn05 a {
	background: url(../service/img/mvMenuBtn05.png) no-repeat 0 0;
}
#bx-pager li.btn05 a.active {
	background: url(../service/img/mvMenuBtn05_on.png) no-repeat 0 0;
}

#special {
}
#special h3 {
	display: none;
}
#special ul {
	width: 100%;
}
#special li {
	width: 25%;
	float: left;
}
#special li a {
	display: block;
	height: 120px;
	font-size: 0;
}
#special li.menu01 a {
	background: url(../about/img/transport/thum.jpg) top center no-repeat;
}
#special li.menu02 a {
	background: url(../about/img/numeral/thum.jpg) top center no-repeat;
}
#special li.menu03 a {
	background: url(../about/img/notonly/thum.jpg) top center no-repeat #f2f2f2;
}
#special li.menu04 a {
	background: url(../about/img/safety/thum.jpg) top center no-repeat;
}
#special li.menu02 a {}
#special li.menu03 a {}
#special li.menu04 a {}
#special li.menu05 a {}

#contents>.inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0 50px;
}

#cont01 li {
	float: left;
	width: 300px;
	margin-right: 30px;
}
#cont01 li:nth-child(3) {
	margin-right: 0;
}
#cont01 li a:hover {
	text-decoration: none;
}
#cont01 li a:hover img {
	opacity: 0.7;
}
#cont01 li dl {
}
#cont01 li dd {
	margin-top: 10px;
}
#cont01 li dd span {
	display: block;
	color: #1c6e5d;
	font-weight: bold;
	padding-bottom: 10px;
}

#news {
	padding: 25px 0 30px;
	/*background: #f2f2f2;*/
	font-size: 13px;
}
#news>.inner {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	background: url(../img/top/titNews.png) left center no-repeat;
}
#news h3 {
	float: left;
	width: 110px;
	font-size: 0;
	height: 10px;
}
#news p {
	float: right;
	padding: 5px 0;
}
#news .newsList {
	float: left;
	width: 740px;
	border-left: solid 1px #ccc;
	padding-left: 40px;
}
#news .newsList li {
	padding: 5px 0 0;
	line-height: 1.4em;
}

#news .newsList li a {
	display: block;
	line-height: 1.6em;
	overflow: hidden;
}
#news .newsList li a:hover .news {
	text-decoration: underline;
}
#news .newsList li dt {
}
#news .newsList li dt span {
	display: inline-block;
}
#news .newsList li .date,
#news .newsList li .ctg,
#news .newsList li .news {
	float: left;
}
#news .newsList dt.date {
	width: 100px;
}
#news .newsList dd.ctg {
	width: 70px;
	text-align: center;
	font-size: 11px;
	color: #fff;
}
#news .newsList .typeA .ctg {
	border: solid 1px #92167c;
	color: #92167c;
}
#news .newsList .typeB .ctg{
	border: solid 1px #1a6494;
	color: #1a6494;
}
#news .newsList .typeC .ctg{
	border: solid 1px #55a520;
	color: #55a520;
}
#news .newsList .typeD .ctg{
	border: solid 1px #333;
	color: #333;
}
#news .newsList li .news {
	padding-left: 30px;
	width: 530px;
}




@media only screen and (max-width: 768px){
	.bxslider li{
		height: 30vh;
	}
	.bxslider .sl01 {
		background: url(../service/img/oil/mv_sp.jpg) top center;
		background-size: cover;
	}
	.bxslider .sl02 {
		background: url(../service/img/lng/mv_sp.jpg) top center;
		background-size: cover;
	}
	.bxslider .sl03 {
		background: url(../service/img/chemicals_d/mv_sp.jpg) top center;
		background-size: cover;
	}
	.bxslider .sl04 {
		background: url(../service/img/chemicals_i/mv_sp.jpg) top center;
		background-size: cover;
	}
	.bxslider .sl05 {
		background: url(../service/img/container/mv_sp.jpg) top center;
		background-size: cover;
	}
	#special li{
			width: 50%;
	}
	#special li:nth-child(-n + 2){
		margin-top: 30px;
	}
	#special li a{
		height: 12vh;
		background-size: cover!important;
	}

	#news {
		padding: 25px 0 30px;
		/*background: #f2f2f2;*/
		font-size: 13px;
	}
	#news>.inner {
		max-width: 960px;
		width: 90%;
		margin: 0 auto;
		background: none;
	}
	#news h3 {
		float: none;
		width: 100%;
		font-size: 14px;
		height: auto;
		line-height: 1.4em;
		background: none;
	}
	#news h3 span{
		font-size: 10px;
	}
	#special ul{
		overflow: hidden;
	}
	#news .newsList li{
	    padding: 10px 0 10px;
		border-bottom: 1px dotted #cdcecd;
		overflow: hidden;
	}
	#news p {
		float: right;
		padding: 5px 0;
	}
	#news .newsList {
		float: none;
		width: 100%;
		border-left: none;
		padding-left: 0;
	}
	#news .newsList dt.date {
		width: 100px;
	}
	#news .newsList dd.ctg {
		width: 70px;
		text-align: center;
		font-size: 11px;
		color: #fff;
	}
	#news .newsList li .news {
		padding-left: 0;
		width: 100%;
	}
	#cont01 li{
		width: 300px;
		margin: 0 auto 30px auto!important;
		float: none;
	}
	#cont01 li img{
		display: block;
		width: 100%;
	}
}
@media screen and (min-width: 641px) and (max-width: 768px){
	#cont01 li{
		width: 500px;
	}
}