@charset "UTF-8";



.index-page01 .list.c-flex{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	-ms-flex-align: center;
    -webkit-box-align: center;
	align-items:stretch
}
.index-page01 .item-l{
	position:relative;
	width:33.33%;
	
}
.index-page01 .item-r{
	width:66.67%;
}
.index-page01 .item-l .item{ width:100%; background-size:100% 100%; position:relative; overflow: hidden;}
.index-page01 .item-l .img, .index-page01 .item-r .item>img{ width:100%;}
.index-page01 .item-l .main{ position:absolute; left:0; bottom:0px;width:100%; height:200px; background-image: linear-gradient(to top, rgb(12,55,112) 10%, transparent); opacity: 0;
    transform: translateY(100%);
    transition: opacity .3s,transform .3s; z-index:1}
.index-page01 .item-l .main a{ position:absolute; bottom:30px; left:0;  padding:5% 8%; display:block;color:#fff; font-size:14px;}
.index-page01 .item-l .main .title{ font-size:24px; font-weight:700; line-height:1.6;}
.index-page01 .item-l .main .text{ padding:15px 0;}
.index-page01 .item-l .main a:hover .arrow{-webkit-animation: jt-anmi 1s linear infinite;animation: jt-anmi 1s linear infinite;}

.index-page01 .item-r{ align-content:stretch;align-items:stretch;}
.index-page01 .item-r .item{ position:relative; width:calc(50% - 20px); margin-left:20px; margin-bottom:20px; overflow:hidden}
.index-page01 .item-r .item:nth-child(3),.index-page01 .item-r .item:nth-child(4){ margin-bottom:0}
.index-page01 .item-r .item img{display:block;width: 100%; height:100%}

.index-page01 .box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    color: #fff;
    padding:20px 0 100px 0;
    background-image: linear-gradient(to bottom, rgb(12,55,112), transparent);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .3s,transform .3s;
	text-align:center
}
.index-page01 .title {
    font-size:22px;
    font-weight: 600;
    color:#fff;
}

.index-page01 .more-a{ margin-top:40px; text-align:center;}
.index-page01 .more-a a{ margin:0 auto;
}



.index-title-tit {
	display:block;
	width:100%;
	font-size:30px;
	font-weight:700;
	color:#222;
	text-align:center;
}

@media only screen and (min-width: 961px) {
	.index-page01 .item-r a:hover .box {
		opacity:1;
		transform:translateY(0)
	}
	
	.index-page01 .item-l:hover .item .main {
		opacity:1;
		transform:translateY(0)
	}
	
}



@media only screen and (max-width: 640px) {
 .index-page01 .item-r .item .bg h3{ font-size:14px;}
  
}
@media only screen and (max-width:1700px) {
	.index-page01 .item-r .item .bg img{ max-width:80%;}
}
@media only screen and (max-width:1600px) {
	.index-page01 .item-r .item .bg img{ max-width:70%;}
}
@media only screen and (max-width:1440px) {

.index-page01 .item-r .item .bg img{ max-width:60%;}


}
@media only screen and (max-width:1200px) {
	
.index-banner .tit, .index-banner .text {
	font-size:80px;
}
.index-page01 .index-title-text {
	line-height:1.8;
	font-size:14px;
	margin-bottom:0px
}

}
@media only screen and (max-width:960px) {
.index-page01 .picture,.index-page01 .wrap {
	margin-top:30px;
	width:100%;
}
.index-page01 .index-title-tit{ margin-bottom:0}
.index-page01 .item .picture {
	order:0; margin-right:0;
}

.index-page01 .item-r{justify-content:space-between;}
.index-page01 .item-l{ display:none}
.index-page01 .item-r{ width:100%}
.index-page01 .item-r .item{ width:49%; margin-left:1%; margin-bottom:2%}
.index-page01 .item-r .item:nth-child(1), .index-page01 .item-r .item:nth-child(3){ margin-left:auto; margin-right:1%;}


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

.index-page01 .main {
	padding:0px 3%
}
.index-page01 .index-title-tit{ margin-bottom:0;}
.index-page01 .index-title-text {
	line-height:1.8;
	font-size:14px;
}
.index-title-tit {
	font-size:24px;
	margin-bottom:6px
}

}