






/*main*/



.title{text-align:center;}

.title .H3{font-size:48px; color:#1a3681; font-weight: bold; text-transform: uppercase; font-family: Arial;}

.title .H4{display:inline-block; margin-top:12px; position: relative; font-size:24px; color:#333333}

.title .H4::after,

.title .H4::before{width:18px; height: 2px; position: absolute; top:50%; margin-top:-1px; left: -38px; background-color: #d1d2d7; content: "";}

.title .H4::before{left:auto; right: -38px;}

.index1 .text{font-size:16px; line-height: 36px; text-align: center; color:#333333; margin: 50px 0;}

.indexD1 .img{width:33.33%; float: left; height:512px; }

.indexD1Ul{width:66.67%; float:left;}

.


.index2{padding:100px 0; overflow: hidden;}

.index2Ul{margin-top:45px;}

.index2Ul .list{width:10.625%; float:left; height: 666px; position: relative; background-color: #000;

-webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s;

}

.index2Ul .img{position:absolute; top:0; left: 0; width:100%; height: 100%; opacity: 0.5}

.index2Ul .box1{width:100%; text-align: center; position: absolute; top:50%; left: 0; margin-top:-120px;}

.index2Ul .box1 .H5{font-size:18px; color:#fff;}

.index2Ul .box1 .line{width:1px; height: 54px; background-color: #fff; display: block; margin:20px auto}

.index2Ul .box1 .ico{display:block; width:94px; height: 94px; border-radius: 50%; background-color: #1a3681; margin: auto; overflow: hidden;}

.index2Ul .box1 .H4{margin-top:20px; font-size:20px; color:#fff;}

.index2Ul .box2{width:495px; height: 460px; position: absolute; top:50%; left: 0; margin-top:-230px;background: url(http://www.marinee.net/public/images/p25.png) no-repeat; background-position: left 350px;background-color: rgba(255,255,255,0.95); padding-right:80px; opacity: 0;-webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s;}

.index2Ul .box2 .b2Ti{padding:80px 44px 35px 0; background:url(../image/p26.png) center bottom no-repeat; background-size: 100%; text-align: right; font-size:20px; color:#333333;}

.index2Ul .box2 .b2Ti .ico{width:34px; height: 34px; display: inline-block; vertical-align: middle; line-height: 0; margin: -4px 15px 0 0 ;}

.index2Ul .box2 .p{margin:37px 0 37px 0; font-size:16px; line-height: 36px; height:144px; text-align: right; width: 100%; padding: 0 35px 0 100px; 

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 4;

-webkit-box-orient: vertical;}

.index2Ul .box2 .more{width:128px; height: 40px; line-height: 40px; text-align: center; background-color: #1a3681; float:right; margin: 0 35px 0 0; font-size;14px; color:#fff;}

.index2Ul .box2 .more .ico{width:11px; height: 11px; display: inline-block; vertical-align: middle; margin:0 0 0 20px ; line-height: 0;}

.index2Ul .box2 .more:hover{opacity:0.7;}



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

	.index2Ul .box2{width:440px; padding-right:20px;}

}

@media screen and (min-width:768px){

	.index2Ul .list.on{width:57.5%;}

	.index2Ul .list.on .img{opacity:1;}

	.index2Ul .list.on .box1{opacity:0;}

	.index2Ul .list.on .box2{opacity:1;}

}



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

	.index2Ul .box1 .ico{width:70px; height: 70px;}

	.index2Ul .box1 .H4{font-size:18px;}

	.index2{padding:60px 0;}

}

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

	.index2Ul .box1 .H4{font-size:14px;}

}

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

	.index2{padding:30px 0 30px 0; background-color: #f3f3f7; margin: 0 0 30px 0}

	.index2Ul{padding:0 15px; text-align: center; font-size: 0; margin: 0;}

	.index2Ul .list{width:33%; height: auto; float:none; display: inline-block; vertical-align: top; background-color:#fff; margin: 20px auto auto auto; background-color: transparent;}

	.index2Ul .box1{position: relative; margin: 0;}

	.index2Ul .box1 .H4{color:#333;}

	.index2Ul .box2,

	.index2Ul .box1 .H5,

	.index2Ul .box1 .line{display:none; }

	.index2Ul .img{display:none; }

}






.index4{background-color:#f3f3f7; padding:100px 0; margin: 100px 0 0 0 ;}

.in4Tab{margin-top:20px;}

.in4Nav{text-align:center; font-size:0;}

.in4Nav .list{width:166px; height: 48px; line-height: 48px; background-color: #e6e6ec; font-size:18px; color:#333333; margin: 0 10px; display: inline-block;cursor: pointer;}

.in4Nav .list.on{background-color:#1a3681; color:#fff; }

.in4D{margin-top:40px;}

.in4D .list{overflow:hidden;}

.in4Ul{margin:0 -15px; padding-bottom:50px;}

.in4Ul .li{padding:0 15px;}

.in4Ul .pic{width:100%; overflow: hidden;}

.in4Ul .pic img{-webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s;}

.in4Ul .text{background-color:#ffffff; padding:28px 20px 40px 20px;}

.in4Ul .text .time{font-size:14px; color:#1a3681;}

.in4Ul .text .H4{font-size:16px; line-height: 24px; height: 48px; margin: 10px 0 0 0; color:#333333;

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;}

.in4Ul .text .line{width:42px; height: 1px; display: block; margin:20px 0 ; background-color: #dedede;}

.in4Ul .text .p{font-size:12px; color:#666666; line-height: 24px; height: 72px;

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;}

.in4Ul .li:hover img{transform:scale(1.1);

	-webkit-transform:scale(1.1);

	-moz-transform:scale(1.1);

	-o-transform:scale(1.1);}

.in4Ul .li:hover .text{background-color:#1a3681;}

.in4Ul .li:hover .text .time{color:#fff;}

.in4Ul .li:hover .text .H4{color:#fff;}

.in4Ul .li:hover .text .line{background-color:#e25c5f;}

.in4Ul .li:hover .text .p{color:#fff;}

.in4Ul .slick-dots{width:100%; line-height: 0 ;text-align: center; font-size: 0; bottom:0;}

.in4Ul .slick-dots li{width:8px; height: 8px; background-color: #1a3681; border-radius: 50%; margin: 0 10px; opacity: 0.4;}

.in4Ul .slick-dots li.slick-active{opacity: 1;}



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

	.index4{margin-top:60px; padding:60px 0;}

}

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

	.index4{margin-top:30px; padding:30px 0;}

	.in4Nav .list{width:32%; margin: 0 1px; font-size:16px; line-height: 40px; height: 40px;}

	.in4Ul .text{padding:15px;}

	.in4Ul .text .line{margin:10px 0;}

	.in4Ul{padding-bottom:30px; margin: 0;}

	.in4Ul .li{padding:0;}

	.in4Ul .slick-dots li{margin:0 4px;}

}












