@charset "UTF-8";
/*================================
 frontpage.css
 20200604-
=================================*/

#frontpage main{overflow: hidden;}
/*================================
 header
=================================*/

#frontpage header {
overflow: hidden;
background:url(../img/frontpage/header_bg.jpg) no-repeat center center;
height:960px;
position: relative;
margin:0 auto;
}

#frontpage header #topnav{margin-top:860px;}


#frontpage header h3{
background:url(../img/frontpage/header_tit.png) no-repeat center center;
display: block;
width:1080px;
height: 320px;
position: absolute;
top:60px;
left:0;
right:0;
margin:auto;
}

#frontpage header .car2l{
background:url(../img/frontpage/header_car2l.png) no-repeat center center;
display: block;
width:382px;
height: 202px;
position: absolute;
top:480px;
right:0;
}

#frontpage header .car2r{
background:url(../img/frontpage/header_car2r.png) no-repeat center center;
display: block;
width:448px;
height: 220px;
position: absolute;
top:550px;
left:0;
}

.railway_anim {
animation: railway_frame 20s infinite;
-webkit-animation: railway_frame 20s infinite;
}

.railway2_anim {
animation: railway2_frame 15s infinite;
-webkit-animation: railway2_frame 15s infinite;
}

@keyframes railway_frame {
0%, 1% { left:2000px; }
30%,50% { left:55%; }
98%,100% { left:-500px}
}
@-webkit-keyframes railway_frame {
0%, 1% { left:2000px; }
30%,50% { left:55%; }
98%,100% { left:-500px; }
}

@keyframes railway2_frame {
0% { left:-500px; }
36%,53% { left:20%; }
99%,100% { left:2000px; }
}
@-webkit-keyframes railway2_frame {
0% { left:-500px; }
36%,53% { left:20%; }
99%,100% { left:2000px; }
}


/* .bgon #intro
-------------------------------- */

#frontpage #intro.bgon{
height:720px;
}

#frontpage .bgon .topbg{
height:720px;
}

#frontpage .bgon .row_inner .card .topcard{
height:720px;
}

#frontpage .bgon .card h3 {
background: url(../img/frontpage/intro_tit.png) no-repeat left top;
}

#frontpage .bgon .card .pic {
background: url(../img/frontpage/intro_pic.png) no-repeat right top;
}


#frontpage .bgon .row_inner .card .topcard a.btn_to_aboutus{
background: url(../img/frontpage/intro_btn_to_aboutus.png) no-repeat center center;
display: block;
width:277px;
height:62px;
position: relative;
margin-top:20px;
}


/* #news (system)
-------------------------------- */
#system{
overflow: hidden;
}

#system h3.gen{
background: url(../img/frontpage/news_tit.png) no-repeat center center;
}

#system a.btn_to_system{
background: url(../img/frontpage/news_btn_to_system.png) no-repeat center center;
display: block;
width:277px;
height:62px;
position: relative;
margin:20px auto 70px;
}


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

.blog2ul{
overflow: hidden;
display: block;
margin:0 auto 0;
}

#system .blog2ul{
margin:60px auto 0;
}

.blog2ul  .blog2li{
position: relative;
display:inline-block;
width:300px;
overflow:hidden;
padding:0 30px 20px;
}


@media screen and (max-width: 1889px){
	.blog2ul {
	    width:1280px;
	}
	.blog2ul .blog2li:nth-child(n+5) {
	    display: none;
	}
}


.blog2ul .blog2li a{
display: block;
padding:0;
}


/* ---// for rect and cut img-- */


.blog2ul .blog2li img.fitimg{
display: block;
position: absolute;
}

.blog2ul .blog2li .cutimg260 img{
-webkit-filter:drop-shadow(0 0 5px rgba(0, 0, 2, 0.1));
filter:drop-shadow(0 0 5px rgba(0, 0, 2, 0.1));
}

.blog2ul .blog2li a:hover .cutimg260{
opacity:0.74;
transition:0.3s;
text-decoration: none;
}

/* ---for rect and cut img //-- */

.blog2ul .blog2li .desc{
overflow: hidden;
position: relative;
width:280px;
height:120px;
padding:10px 20px 10px 20px;
margin:0;
text-align: left;
}

.blog2ul .blog2li .desc h4{
overflow: hidden;
display:block;
height:58px;
font-size:18px;
font-weight: bold!important;
line-height:1.6em;
font-weight:normal;
text-align: center;
padding:0;
margin:0;
margin-bottom: 15px;
}


.blog2ul .blog2li .desc .deex{
overflow: hidden;
padding:0;
margin-bottom: 10px;
text-align: center;
}

.blog2ul .blog2li .desc .deex .date{
display: inline-block;
padding:0;
font-size:13px;
font-weight: normal;
color:#666;
line-height:1.8em;
letter-spacing: 0.02em;

}

.blog2ul .blog2li .desc .deex .cattag{
display: inline-block;
padding:0;
margin-right: 10px;
}


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

#bnr{
overflow: hidden;
display: block;
margin:0 auto 0;
}

#bnr .bnr_bg{
position: relative;
background: url(../img/frontpage/bnr_sdgs_bg.png) no-repeat center top;
width: 1200px;
height: 312px;
margin: 20px auto 90px;
}

#bnr .boy{
background: url(../img/frontpage/bnr_sdgs_boy.png) no-repeat center top;
width:115px;
height: 169px;
position: absolute;
left:506px;
top: 120px;
}

#bnr a.btn_to_sdgs{
background: url(../img/frontpage/bnr_sdgs_btn.png) no-repeat center center;
display: block;
width:295px;
height:61px;
position: absolute;
top: 198px;
left: 652px;
}