@charset "utf-8";
/* -----------------------------------------------------------
CSS Information

 File name:      top.css

----------------------------------------------------------- */

.contents .under_banner {
	margin-top: 60px;
}

.contents .under_banner ul li {
	position: relative;
    margin-bottom: 20px;
}

.contents .under_banner ul li div{
background-color: rgba(0,0,0,1.00);
    height: 100%;
}

.contents .under_banner ul li p{
    text-shadow: 2px 3px 5px #000;
	font-size: 23px;
}
.contents .under_banner ul li:nth-child(1) p,
.contents .under_banner ul li:nth-child(3) p{
    position: absolute;
    text-align: right;
    color: #FFF;
    top: 90px;
    right: 35px;
line-height: 1.5em;
}

.contents .under_banner ul li:nth-child(1) small, .contents .under_banner ul li:nth-child(2) small{
font-size: 12px;
}

.contents .under_banner ul li:nth-child(2) p,
.contents .under_banner ul li:nth-child(4) p{
    position: absolute;
    text-align: left;
    color: #FFF;
    left: 35px;
    bottom: 55px;
    line-height: 1.5em;
}

.contents .under_banner ul li p span{
    display: block;
    width: 190px;
	margin-top: 20px;
}
.contents .under_banner ul li:nth-child(1) p span,
.contents .under_banner ul li:nth-child(3) p span{
    margin-left: auto;
}

.contents .under_banner ul li:nth-child(2) p span,
.contents .under_banner ul li:nth-child(4) p span{
    margin-right: auto;
}

.contents .under_banner ul li img{
	opacity: 0.5;
width: 100%;
}


.contents .under_banner ul li p span img{
width: 100%;
	opacity: 1;
}

.contents .under_banner ul li a{
transition: 0.3s;

}

.contents .under_banner ul li a:hover{
opacity: 0.5;
}

*

.under_bannerimg {
display: block;
}


@media screen and (max-width: 1000px) {
.contents .under_banner ul li:nth-child(2) p, .contents .under_banner ul li:nth-child(4) p {
    bottom: 15px;
}

.contents .under_banner ul li:nth-child(1) p,
.contents .under_banner ul li:nth-child(3) p{
    position: absolute;
    text-align: right;
    color: #FFF;
    top: 50px;
    right: 35px;
line-height: 1.5em;
}


}
	
@media screen and (max-width: 760px) {

.under_banner ul li{
    background-position: center;
    background-size: cover;
    height: 160px;
}	

	
	
.contents .under_banner ul li p {
    font-size: 19px;
}	

.contents .under_banner ul li div{
background-color: rgba(0,0,0,0.6);
    height: 100%;
    margin-top:-25px;
}	
	
.under_banner ul li{	
	background-color:rgba(255,255,255,0.4);
	background-blend-mode:color-burn;
	}
.under_banner ul li:nth-child(1){
	background-image: url("../img/footerbanner/01.jpg") ;

}	
.under_banner ul li:nth-child(2){
	background-image: url("../img/footerbanner/02.jpg");
}		
.under_banner ul li:nth-child(3){
	background-image: url("../img/footerbanner/03.jpg");
}		
.under_banner ul li:nth-child(4){
	background-image: url("../img/footerbanner/04.jpg");
}		
	
.contents .under_banner ul li:nth-child(1) p, .contents .under_banner ul li:nth-child(3) p {
    position: absolute;
    text-align: left;
    color: #FFF;
    top: 20px;
    right: auto;
    line-height: 1.5em;
    left: 15px;
}	

.contents .under_banner ul li:nth-child(1) p span, .contents .under_banner ul li:nth-child(3) p span {
    margin-left: 0;
}	

.contents .under_banner ul li:nth-child(2) p, .contents .under_banner ul li:nth-child(4) p {
    position: absolute;
    text-align: left;
    top: 20px;
    bottom: auto;
    left:15px;
}	
	
.contents .under_banner ul li p span img {
display: block;
}

	
.under_bannerimg {
display: none;
}
	
	
}