@charset "UTF-8";
.wapban{ display: none;}
.Hbanner img{ width: 100%;}
.Hbanner .slick-arrow{ position: absolute; width: 50px; height: 50px; top: 50%; margin-top: -25px; background: url("../images/icon_btn.png") no-repeat left center; border: none; z-index: 10; font-size: 0;}
.Hbanner .slick-prev{ left: 5%;}
.Hbanner .slick-next{ right: 5%; background-position: right center;}
@media(max-width:1200px){
    .wapban{ display: block;}
    .pcban{ display: none;}
    .Hbanner .slick-prev{ left: 2%;}
    .Hbanner .slick-next{ right: 2%; }
}

.Hbox1{ margin: 2% auto;}
.Hbox1 li{ text-align: center; border-left: 1px solid #e9e9e9;border-right: 1px solid transparent;}
.Hbox1 li *{ transition: all 0.3s;}
.Hbox1 li:last-child{border-right-color: #e9e9e9;}
.Hbox1 li figure{ margin-bottom: 15px;}
.Hbox1 li p{ padding-bottom: 2px;}
.Hbox1 li a:hover img{ transform: scale(1.05);}
.Hbox1 li a:hover p{ font-size: 16px; padding-bottom: 0;}
.Hbox1 .slick-arrow{ content: ''; position: absolute; top: 50%; width: 48px; height: 48px; background: url("../images/icon_btn2.png") no-repeat center; margin-top: -24px; border: none; border-radius: 100%; font-size: 0; z-index: 2; cursor: pointer;}
.Hbox1 .slick-prev{ left: -2%; transform: rotateY(-180deg);}
.Hbox1 .slick-next{ right: -2%;}



.Hbox2{ margin: 1% auto; background: url("../images/Hbox2_bg.png") no-repeat right bottom;}
.Hbox2 .pic{ position: relative; width: 77%; overflow: hidden;}
.Hbox2 .pic figure{ position: relative; padding-top: 45.2%; transition: all 0.3s; background-size: cover;}
.Hbox2 .pic .txt{ position: absolute; top: 0; z-index: 5; color: #fff; width: 100%; padding-left: 9%; top: 58%; transform: translateY(-50%);}
.Hbox2 .pic h3:before{ content:''; display: block; width: 24px; height: 2px; background: #fff; margin-bottom: 2%;}
.Hbox2 .pic h3{ font-size: 26px; font-weight: normal;}
.Hbox2 .pic h4{ font-size: 20px; font-weight: normal; margin: 1.5% 0 1%;}
.Hbox2 .pic h4 span{ font-size: 16px;}
.Hbox2 .pic p{ line-height: 22px; max-height: 70px; overflow: hidden; margin-bottom: 3%;}
.Hbox2 .pic .icon{ display: block; width: 48px; height: 48px; background: url("../images/icon_btn2.png") no-repeat;transition: all 0.3s;}
.Hbox2 .title i{ width:60px; text-align: center; display: inline-block; vertical-align: middle; }
.Hbox2 .title .img2{ display: none;}
.Hbox2 .title li{ margin-left: 20%; padding: 9% 0; border-bottom: 1px solid #e6e6e6; position: relative; font-size: 15px; color: #888888; cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.Hbox2 .title li:after{ content: '+'; position: absolute; right: 20%; top: 50%; transform: translateY(-50%); font-size: 18px; color: #999999;}
.Hbox2 .title li.on{ margin-left: -18%; background: #1d2087; color: #fff; border-bottom-color:transparent; padding-left: 16%; }
.Hbox2 .title li.on i{ margin-right: 6%;}
.Hbox2 .title li.on .img2{ display: inline-block;}
.Hbox2 .title li.on .img1{ display: none;}
.Hbox2 .title li.on:after{ right: 14%;}
.Hbox2 .pic a:hover .icon{ background-image: url("../images/icon_btn3.png");}
.Hbox2 .pic a:hover figure{ transform: scale(1.03);}
@media(max-width:768px){
    .Hbox2 .pic h3{ font-size: 20px;}
    .Hbox2 .pic h4{ font-size: 16px;}
    .Hbox2 .title li:after{ display: none;}
}
@media(max-width:640px){
    .Hbox2 .ytable-cell{ width: 100%; display: block;}
    .Hbox2 .title li{width: 33.33%;float: left;text-align: center;line-height: 70px; margin-left: 0!important; padding-left: 0!important; padding: 0;}
    .Hbox2 .title i{ width: 35px; margin-right: 0%;}
    .Hbox2 .pic p{ display: none;}
    .Hbox2 .pic h3{ font-size: 18px;}
    .Hbox2 .pic h4{ font-size: 14px;}
    .Hbox2 .pic .icon{ width: 25px; height: 25px; background-size: cover;}
}


.Htitle{ text-align: center; padding: 4% 0;}
.Htitle h2{ display: inline-block; font-weight: normal; font-size: 30px; color: #fff; position: relative;}
.Htitle span{ display: block; margin-top: -20px; font-weight: bold; opacity: 0.1; text-transform: uppercase; color: #fefefe;}
.Htitle h2:before,
.Htitle h2:after{ content: ''; position: absolute; width: 1px; height: 100%; top: 0; background: #b5b5b5; opacity: 0.3; transform: rotate(30deg);}
.Htitle h2:before{ left: -15%;}
.Htitle h2:after{ right: -20%;}
@media(max-width:768px){
    .Htitle h2{ font-size: 24px;}
}
.Hmore{ display: block; width: 190px; line-height: 42px; border-radius: 50px; border: 1px solid #fff; margin: 4.5% auto 0; text-align: center; color: #fff; font-size: 15px;}
.Hmore:after{ content: ''; display: inline-block; width: 23px; height: 7px; background: url("../images/icon_more.png") no-repeat center; margin-left: 20px; vertical-align: middle; transition: all 0.3s;}
.Hmore:hover{ color: #fff;}
.Hmore:hover:after{ margin-left: 40px;}
.Hbox3{ margin: 3% 0 0; padding-bottom: 3.5%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.Hbox3 .video{ width: 49%; position: relative;}
.Hbox3 .video video{ width: 100%; display: none; position: absolute; left: 0; top: 0; height: 100%; z-index: 10; background: #000;}
.Hbox3 .play{ width: 84px; height: 84px; position: absolute; left: 50%; top: 50%; margin: -42px 0 0 -42px; background: url("../images/icon_play.png") no-repeat center; z-index: 2; cursor: pointer;}
.Hbox3 .txt{ width: 49%;}
.Hbox3 li{ background: #fff;}
.Hbox3 li:nth-child(2n){ background: #f1f1f1;}
.Hbox3 li a{ display: block; padding:3.396% 5% 3.396% 160px; position: relative;}
.Hbox3 li time{ position: absolute; width: 125px; text-align: center; left: 0; top: 50%; transform: translateY(-50%); font-size: 16px; color: #1d2087; font-weight: bold; border-right: 1px solid #dddddd;}
.Hbox3 li time b{ display: block; font-size: 28px;}
.Hbox3 li h3{ font-size: 15px; color: #3e3e3e; font-weight: normal; transition: all 0.3s; }
.Hbox3 li p{ color: #888888; padding-top: 3px;}
.Hbox3 li a:hover h3{ color: #023793; font-size: 16px; }
@media(max-width:768px){
    .Hbox3 .video,
    .Hbox3 .txt{ width: 100%; float: none; margin-bottom: 3%;}
}

.Hbox4{ margin-bottom: 3%;}
.Hbox4 .Htitle h2{ color: #1d2087;}
.Hbox4 .Htitle span{ color: #b9b9b9;}
.Hbox4 .list{max-width: 880px; margin: 0 auto; width: 100%;}
.Hbox4 .slick-list{ overflow: inherit;}
.Hbox4 li a{ margin: 0 40px; display: block;}
.Hbox4 li img{ width: 100%; transition: all 0.3s;}
/* .Hbox4 .slick-arrow{ position: absolute; width: 80px; height: 80px; top: 43%; margin-top: -40px; background: url("../images/icon_btn4.png") no-repeat left center; font-size: 0; border: none; z-index: 10; border-radius: 100%; cursor: pointer; transition: all 0.3s;}
.Hbox4 .slick-prev{ left: -10%; box-shadow: 5px 15px 30px rgba(0,0,0,0.1);}
.Hbox4 .slick-next{ right: -10%; box-shadow: -5px 15px 30px rgba(0,0,0,0.1); background-position: right center;}
.Hbox4 .slick-arrow:hover{ background-image: url("../images/icon_btn5.png");} */
.Hbox4 h3{ font-size: 24px; font-weight: normal;}
.Hbox4 p{ color: #023793;margin-top: 10px;}
.Hbox4 li .txt{ position: relative; padding-right: 200px; opacity: 0; margin: 5% 0;}
.Hbox4 .Hmore{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #1d2087; border-color: #1d2087; color: #fff; margin: 0;}
.Hbox4 .slick-current  .txt{ opacity: 1;}
.Hbox4 li a:hover img{ transform: scale(1.03);}
@media(max-width:768px){
    .Hbox4 .list{ overflow: hidden;}
    .Hbox4 .slick-prev{ left: 0; background-position:-16px center}
    .Hbox4 .slick-next{ right: 0; background-position:-104px center}
	.Hbox4 .slick-arrow{width: 40px; height: 40px;}
    .Hbox4 li .txt{ padding-right: 0;}
    .Hbox4 .Hmore{ display: block; position: static;transform: none;margin-top: 5%;}
    .Hbox4 h3{ font-size: 18px;}
}