html {
    --color: #0c51a8;
    --font-family: 'Arial';
}
a:hover {
    color: var(--color);
}

.w1520 {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
}
.w1500 {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}
.w1400 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.w1250{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}
.w1200{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.w1000{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.flex-x {
    display: flex;
    flex-direction: row;
}
.flex-y {
    display: flex;
    flex-direction: column;
}
.flex-align{
    justify-content: space-between;
    align-items: center;
}
button{
    cursor: pointer;
}
/* p,
a {
    font-size: initial;
} */

.menu{
    display: none;
}
.menu_down{
    display: none;
}


body{
    background: #fff;
}

header{
    width: 100%;
    height: 100px;
    background: #fff;
    font-size: 16px;
    color: #000;
    box-shadow: 0 0 5px 2px #ccc;
}

header .w1400{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header .logo{
    width: 10%;
    min-width: 100px;
    height: 100%;
    padding: 10px 0;
}
header .logo a{
    display: inline-block;
    height: 100%;
}
header .logo img{
    height: 100%;
}

header .nav{
    width: 65%;
    height: 100%;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
   flex: 1 0 auto;
}
header  .nav>li{
    position: relative;
}
header .nav>li a{
    display: block;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    font-size: 16px;
	white-space: nowrap;
}
header .nav>li::after{
    content: '';
    width: 100%;
    height: 2px;
    background: var(--color);
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
}
header .nav>li+li{
    margin-left: 10px;
}
header .nav>li.active a{
color: var(--color);
}
/* header .nav>li.active::after{
    display: block;
} */
/* header .nav>li:hover::after{
    display: block;
} */
header .nav>li:hover a{
    color: var(--color);
}
/* header .nav2{
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding-top:10px;
   
}

header .nav .nav2  a{
    white-space: nowrap;
    padding: 0 50px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    font-size: 14px;
    border-radius: 3px;
}
header .nav li:hover .nav2{
    display: block;
}
header .nav li:hover .nav2 a{
    color: #333;
}
header .nav li:hover .nav2 li:hover a{
    color: #52B548;
} */
header .language{
    width: 10%;
    height: 100%;
    min-width: 100px;
    text-align: right;
    position: relative;
   font-size: 16px;
}
header .language-icon{
    width: 20px;
    height: 20px;
    margin-right: 16px;
}
header .language-a{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    font-size: 16px;

}
header .language-a::after{
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;   
    border-bottom: 5px solid transparent;
    border-top: 8px solid #000;
    margin-top: 8px;
    margin-left: 16px;
}
header .language-list{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
    width: 100%;
    margin-top: -1px;
    padding: 20px 10px;
    line-height: 36px;
    text-align: center;
}
header .language:hover .language-list{
    display: block;
}
.pop-w{
	position: fixed;
	left:0;
	top:0;
	z-index:999;
	background:rgba(0,0,0,.5);
	width:100%;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}

        .pop-box {
            width:40%;
			
			min-width:500px;
            padding:40px 50px 50px;
            border-radius: 20px;
            background: url('/images/index_page_3.jpg') no-repeat center;
			background-size:cover;
			filter: sepia(50%) brightness(150%) ;
			/* filter: sepia(100%) saturate(1) invert(1) contrast(1.5); */
            z-index: 9999;
			position:relative;
        }
		.pop-box .close{
			width:30px;
			height:30px;
			font-size:50px;
			position:absolute;
			right:-15px;
			top:-15px;
			    background: rgba(0, 0, 0, 8);
    border-radius: 50%;
    padding: 8px;
	cursor:pointer;
		}
        .pop-box .top{
			
           
        }
		 .pop-box a{
			color: #000;
		 }
        .pop-box .top h3{
			text-align:center;
            font-size: 36px;
            color: #0c51a8;
			font-weight:bold;
        }
     
        .pop-box .img{
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
            margin: 10px 0;
        }
		        .pop-box .img img{
					width:100%;
					max-height:300px;
					object-fit:cover;
				}
				   .pop-box .info{
					display:flex;
					flex-direction:row;
					justify-content:space-between;
					align-items:end;
				   }
        .pop-box .time{
            font-size: 16px ;
            color: #444;
			 white-space: nowrap;
			margin-left:50px;
        }
		.pop-box .info>a{
			
			overflow:hidden;
			text-overflow: ellipsis;
		}
        .pop-box .name{
			flex:1;
			    white-space: nowrap;
				overflow:hidden;
			text-overflow: ellipsis;
            font-size: 24px;
            color: #000;
            font-weight: bold;
        }
		 .pop-box .editor{
			margin-top:10px;
			font-size:20px;
		 }

















.index-page-link{
    width: 170px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px ;
    line-height: 56px;
    border:2px solid #fff;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
}
.index-page-link:hover{
    background: #1A92CF;
    border-color: #1A92CF;
    color: #fff;
}
.index-page1{
    width: 100%;
    position: relative;
}
.index-page1 .w1400{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.index-page1 .info h2{
    font-size: 72px;
    line-height: 75px;
    color: #fff;
    font-weight: bold;
}
.index-page1 .index-page-link{
    margin-top: 50px;
    margin-left: 5px;
}
.index-page2{
    font-size: 20px;
    line-height: 36px;
    color: #000;
    font-weight: bold;
    padding: 30px 0;
    text-align: center;
}
.index-page3{
    width: 100%;
    position: relative;
    color: #fff;
}
.index-page3>img{
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
}
.index-page3 .w1400{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.index-page3 .info h3{
   
    font-size: 46px;
    line-height: 50px;
    margin-bottom: 30px;
}
.index-page3 .info p{
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 30px;
}
.index-page3 .index-page-link{
    margin-top: 40px;
}
.index-page4{
    background: url('../images/index_page_4.jpg') no-repeat center;
    background-size: cover;
    padding: 70px 0;
}
.index-page4 img{
    width: 47%;
}
.index-page4 .editor{
    width: 48%;
}
.index-page4 .editor h3{
    font-size: 30px;
    line-height: 36px;
    font-weight: bold;
    margin-bottom: 50px;
}
.index-page4 .editor .p1{
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 30px;
}
.index-page4 .editor .p2{
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 30px;
}
.index-page4 .editor .p3{
    font-size: 20px;
    line-height: 30px;
    font-family: "Times new Roman";
}

.banner{
    position: relative;
}
.banner .w1400{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.banner h2{
    font-size: 60px;
    line-height: 1.2;
    color: #fff;
    font-weight: bold;
}
.about-page{
    padding: 70px 0 100px;
    background: url('../images/about_page1_bg.png') no-repeat;
    background-size: 850px auto;
    background-position: 91% -190px;
}
.about-page1{
    margin-bottom: 80px;
}
.about-page1 .editor{
    font-size: 18px;
    line-height: 36px;
}
.about-page1 .editor h2{
    font-size: 32px;
    font-weight: bold;
} 
.about-page1 .editor h3{
    font-size: 24px;
    margin-bottom: 10px;
} 
.about-page1 .editor p{
    margin-bottom: 30px;
    line-height: 36px;
}
.about-page1 .editor span{
	    text-wrap-mode: wrap !important;
}
.about-page1 .icons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.about-page1 .icons img{
    margin: 0 20px;
    height: 112px;
    object-fit: contain;
}

.about-page2{
    background: url('../images/index_page_4.jpg') no-repeat center;
    background-size: cover;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 80px;
}

.about-page2 h2{
    font-size: 40px;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 30px;
}
.about-page2 p{
    font-size: 18px;
    line-height: 24px;
	display:flex;
	flex-direction:column;
}
.about-page2 p span{
	    text-wrap-mode: wrap !important;
}
.about-page2 ul{
   margin-top: 60px;
}
.about-page2 ul li{
    display: flex;
    flex-direction: column;
}
.about-page2 ul li p img{
	margin-bottom:15px;
}
.about-page2 ul li p{
	font-size:20px;
	font-weight:600;
}
.about-page2 ul li span{
    padding: 20px 0;
    font-size: 24px;
    font-weight: bold;
}

.about-page3 img{
    width: 47%;
}
.about-page3 .editor{
    width: 48%;
}
.about-page3 h2{
    font-size: 30px;
    font-weight: bold;
}
.about-page3 p{
    font-size: 16px;
    line-height: 30px;
}
.about-page3 h3{
    font-size: 20px;
    font-weight: bold;
}
.fish-banner h2{
    font-size: 42px;
}
.fish-banner h3{
    font-size: 18px;
    line-height: 4;
    color: #fff;
}
.fish-banner .form{
    display: flex;
    flex-direction: row;
}
.fish-banner .item{
    background: #fff;
    flex: 1;
    padding: 10px 20px;
}
.fish-banner .item+.item{
    border-left: 1px solid #ddd;
}
.fish-banner .item .title{
    font-size: 14px;
    line-height: 20px;
    color: #333;
    display: flex;
    flex-direction: row;
    align-items: center;

}
.fish-banner .item .title img{
    width: 20px;
    height: 18px;
    object-fit: contain;
    margin-right: 10px;
}
.fish-banner .item .title span{
    margin-top: 2px;
}
.fish-banner .item select{
    width: 100%;
    height: 30px;
    font-size: 16px;
}
.fish-banner .item select option{
    font-size: 16px;
    line-height: 24px;
}
.fish-banner .clear-btn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    background: #1E92CF;
    color: #fff;
    font-size: 18px;

}
.fish-banner .clear-btn img{
    width: 14px;
    height: 14px;
    margin-right: 6px;
}
.fish-banner .clear-btn:hover{
    background: #262626;
}
.fish-page{
    padding: 40px 0 100px;
}
.fish-page h4{
    font-size: 22px;
    color: #333;
}
.fish-page h4 .span1{
    font-weight: bold;
}
.fish-page h4 .span2{
    color: #1a92cf;
}
.fish-page .fish-page-list{
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
   
}
.fish-page .fish-page-list>li{
    border-radius: 20px;
    box-shadow: 0 0 5px 4px rgba(200, 200, 200, .1);
    overflow: hidden;
}
.fish-page .fish-page-list>li .img{
    position: relative;
}
.fish-page .fish-page-list>li img{
    width: 100%;
    object-fit: contain;
}
.fish-page .fish-page-list .info{
    padding: 60px 20px 30px;
}
.fish-page .fish-page-list .info li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
    margin-top: 10px;
    border-bottom: 1px dashed #999;
    color: #999;
}
.fish-page .fish-page-list .info li p:first-child{
    color: #0c51a8;
    font-size: 16px;
}
.fish-page .fish-page-list .info li p:last-child{
    min-width: 130px;
    font-size: 16px;
}
.fish-page .fish-page-list>li .fish-type{
    position: absolute;
    top: 100%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 10;
    background: #0B52A8;
    padding: 30px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.news-page{
    padding: 50px 0 100px;
}
.news-page-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:50px 25px ;
} 
.news-page-list .img{
    padding: 10px;
    border: 1px solid #e5e5e5;
}
.news-page-list li .img:hover{
    border: 1px solid #0c51a8;
    box-shadow: 0 0 4px 4px rgba(100, 100, 100, .1);
}
.news-page-list li .title{
    font-size: 20px;
    line-height: 1.2;
    color: #333;
    font-weight: bold;
    margin: 20px 0;
}
.news-page-list li .time{
    font-size: 15px;
}
.news-page-list li:hover a{
    color: #333;
}
.news-detail-page {
    padding: 50px 0 100px;
    
}
.news-detail-page .title{
    font-size: 36px;
    line-height: 1.2;
    font-weight: bold;
    color: #333;
}  
.news-detail-page .time{
    margin: 40px 0;
    font-size: 18px;
    color: #333;
    font-weight: lighter;
}
.news-detail-page .editor{
    line-height: 2;
}
.contact-page{
    padding-top: 70px ;
    background: url('../images/about_page1_bg.png') no-repeat;
    background-size: 850px auto;
    background-position: 91% -190px;
}
.contact-page .w1400{
    border-bottom: 1px solid #e5e5e5;
}
.contact-page  h1{
    font-size: 48px;
    color: #000;
    font-weight: bold;
}
.contact-page ul{
    margin: 50px 0 60px;
}
.contact-page ul li{
    margin-bottom: 50px;
}
.contact-page ul li:last-child{
    margin-bottom: 0;
}
.contact-page ul .top{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    color: #0c51a8;
    font-weight: bold;
}
.contact-page ul .img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #0c51a8;
    padding: 6px;
    margin-right: 10px;
}
.contact-page ul p{
    font-size: 20px;
}
.message{
    padding: 50px 0;
}
.message h3{
    font-size: 24px;
    line-height: 2;
    color: #999;
    margin-bottom: 30px;
}
.message .form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.message .form .item{
    width: 49%;
    margin-bottom: 20px;
}
.message .form .item:last-of-type{
    width: 100%;
}
.message .form .item p{
    font-size: 18px;
    line-height: 2;
}
.message .form .item input{
    width: 100%;
    height: 50px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 10px;
    font-size: 18px;
}
.message .form .item textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    font-size: 18px;
}
.message .form .item .tip{
    font-size: 18px;
    color: #999;
    margin-top: 10px;
}
.message .form button{
    padding: 12px 30px 10px;
    background: #0B52A8;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
}



footer .top{
    height: 450px;
   background: url('../images/footer_bg_1.jpg') no-repeat center;
    background-size: cover;
    color: #fff;
    padding: 70px 0 60px;
    
}
footer .top .w1400{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
footer .top h2{
    font-size: 48px;
    line-height: 1;
}

footer .top ul li{
    display: flex;
    flex-direction: row;
    line-height: 26px;
    margin: 10px 0;
   font-size: 16px;
}
footer .top ul li span{
    flex: 1;
    max-width: 500px;
    line-height: 26px;
}
footer .top ul li .img{
    width: 26px;
    height: 26px;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
footer .top ul li img{
    width: 100%;
    object-fit: contain;
}
footer .top .link-btn a{
    display: inline-block;
    line-height: 50px;
    padding: 0 40px;
    border-radius: 30px;
    color: #fff;
    font-size: 20px;
    border: 1px solid #fff;
}
footer .top .link-btn:hover a{
    background: #1A92CF;
    border-color: #1A92CF;
    color: #fff;
}

footer .center{
    width: 100%;
    height: 360px;
    background: url('../images/footer_bg_2.jpg') no-repeat center;
    background-size: cover;
    padding: 45px 0;
}
footer .center .w1400{
    height: 100%;
}
footer .center ul{
    height: 100%;
    justify-content: center;
}
footer .center li{
    width: 600px;
    height: 100%;
    padding: 30px 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    border-radius: 30px;
}
footer .center li img{
    height: 110px;
}
footer .center li p{
    font-size: 32px;
    line-height: 1.2;
    font-weight: bold;
}


footer .bottom{
    background: #03428B;
    padding: 25px 0 50px;
}
footer .bottom .w1400{
    justify-content: space-between;
}
footer .bottom .left{
    width: 20%;
}
footer .bottom .right {
    width: 70%;
}
footer .bottom .right .links{
    justify-content: right;
    margin: 10px 0 20px;
}
footer .bottom .right .links li{
    margin-left: 20px;
}
footer .bottom .right .links img{
    height: 28px;
}
footer .bottom .right .nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    
} 
footer .bottom .right .nav a{
    line-height: 100px;
    color: #fff;
}
footer .bottom .right .info{
    font-size: 14px;
    color: rgba(255, 255, 255, .3);
    margin-top: 36px;
}
footer .bottom .right .info img{
    height: 20px;
}