/* Page Slogan */
.sl-bg{ width:100%; height:800px; padding-top:280px; color:#fff; text-align:center; background:url(../images/about.jpg) no-repeat center; background-size:cover;}
.sl-bg h1{ font-size:36px; text-transform:uppercase;}
.sl-bg h2{ font-size:30px; margin-top:20px;}
.sl-bg ul li{ float:left; width:33.333333%; font-size:24px; cursor:pointer;}
.sl-bg ul li dl{ width:120px; height:120px; border:1px solid #fff; margin:50px auto 20px; background-repeat:no-repeat; background-position:center; background-size:60px 60px; -webkit-border-radius:50%; border-radius:50%;}
.sl-bg ul li dl.gs01{ background-image:url(../images/gs01.png);}
.sl-bg ul li dl.gs02{ background-image:url(../images/gs02.png);}
.sl-bg ul li dl.gs03{ background-image:url(../images/gs03.png);}
.sl-bg ul li:hover dl{ background-color:#fff;}
.sl-bg ul li:hover dl.gs01{ background-image:url(../images/gs1.png);}
.sl-bg ul li:hover dl.gs02{ background-image:url(../images/gs2.png);}
.sl-bg ul li:hover dl.gs03{ background-image:url(../images/gs3.png);}
@media screen and (max-width:1024px){ 
.sl-bg{ height:650px; padding-top:180px;}
.sl-bg h1{ font-size:30px;}
.sl-bg h2{ font-size:24px; margin-top:10px;}
.sl-bg ul li{ font-size:18px;}
.sl-bg ul li dl{ margin:47px auto 19px;}
}
@media screen and (max-width:800px){ 
.sl-bg{ height:600px;}
.sl-bg ul li{ font-size:16px; padding:0 20px;}
.sl-bg ul li dl{ width:80px; height:80px; margin:47px auto 18px; background-size:30px 30px;}
}
@media screen and (max-width:480px){ 
.sl-bg{ height:auto; padding:100px 0 50px;}
.sl-bg h1{ font-size:18px;}
.sl-bg h2{ font-size:18px; margin-top:0;}
.sl-bg ul li{ width:100%; font-size:18px;}
.sl-bg ul li dl{ margin:30px auto 15px;}
}

/* Page About */
.gs-bg{ margin:65px 0 80px;}
.gs-tx p{ margin-top:20px;}
.gs-tx span{ font-family:"Microsoft YaHei";}
.gs-tx ul{ margin-top:35px;}
.gs-tx ul li{ float:left; width:29.5%; margin-right:5.75%;}
.gs-tx ul li:nth-of-type(3){ margin-right:0;}
.gs-tx ul li img{ width:100%;}
@media screen and (max-width:1024px){ .gs-bg{ margin:55px 0 75px;}}
@media screen and (max-width:800px){ .gs-bg{ margin:45px 0 65px;}}
@media screen and (max-width:640px){ .gs-bg{ margin:35px 0 55px;}}
@media screen and (max-width:480px){ 
.gs-tx p{ margin-top:15px;}
.gs-tx ul{ margin-top:30px;}
.gs-tx ul li{ width:48.5%; margin-right:3%;}
.gs-tx ul li:nth-of-type(2){ margin-right:0;}
.gs-tx ul li:nth-of-type(3){ display:none;}
}

/* Page Culture */
.ln-bg{ width:100%; padding:64px 0 80px; color:#fff; background:url(../images/culture.jpg) no-repeat center; background-size:cover;}
.ln-bg h1{ font-size:30px; text-align:center;}
.ln-bg dl{ margin:10px 20px 40px; font-size:15px; text-align:center;}
.ln-bg ul li{ float:left; width:31%; height:150px; margin-right:3.5%; border:1px solid #fff; font-size:16px; padding:25px;}
.ln-bg ul li:nth-of-type(1), .ln-bg ul li:nth-of-type(2), .ln-bg ul li:nth-of-type(3){ margin-bottom:3.5%;}
.ln-bg ul li:nth-of-type(3n){ margin-right:0;}
.ln-bg ul li h2{ font-size:20px; margin-bottom:10px;}
@media screen and (max-width:1024px){ 
.ln-bg{ padding:52px 0 75px;}
.ln-bg h1{ font-size:24px;}
.ln-bg dl{ margin:8px 20px 30px; font-size:14px;}
.ln-bg ul li{ font-size:14px;}
.ln-bg ul li h2{ font-size:18px;}
}
@media screen and (max-width:800px){ 
.ln-bg{ padding:42px 0 55px;}
.ln-bg dl{ margin:8px 20px 27px;}
}
@media screen and (max-width:640px){ 
.ln-bg ul li{ width:48.5%; height:140px; margin-right:3%; padding:15px; line-height:24px;}
.ln-bg ul li:nth-of-type(3n){ margin-right:3%;}
.ln-bg ul li:nth-of-type(2n){ margin-right:0;}
.ln-bg ul li:nth-of-type(1), .ln-bg ul li:nth-of-type(2), .ln-bg ul li:nth-of-type(3), .ln-bg ul li:nth-of-type(4){ margin-bottom:3%;}
.ln-bg ul li h2{ margin-bottom:5px;}
}

/* Page Workshop */
.sb-bg{ margin:70px 0 100px;}
.sb-bg h2{ font-size:18px; font-weight:normal; margin-bottom:28px; text-align:center;}
.sb-ls{ margin-bottom:60px;}
.sb-ls li{ float:left; width:20.8%; margin-right:5.6%;}
.sb-ls li:nth-of-type(4){ margin-right:0;}
.sb-ls li img{ width:100%;}
.sb-lb li{ float:left; width:28.75%; margin-right:6.875%;}
.sb-lb li:nth-of-type(3){ margin-right:0;}
.sb-lb li img{ width:100%;}
@media screen and (max-width:1024px){ 
.sb-bg{ margin:60px 0 75px;}
}
@media screen and (max-width:800px){ 
.sb-bg{ margin:50px 0 60px;}
.sb-ls{ margin-bottom:50px;}
}
@media screen and (max-width:640px){ 
.sb-bg{ margin:40px 0 50px;}
.sb-bg h2{ font-size:16px; margin-bottom:23px;}
.sb-ls{ margin-bottom:40px;}
}
@media screen and (max-width:480px){ 
.sb-ls li{ width:47.5%; margin-right:5%;}
.sb-ls li:nth-of-type(2){ margin-right:0;}
.sb-ls li:nth-of-type(1), .sb-ls li:nth-of-type(2){ margin-bottom:5%;}
.sb-lb li{ width:47.5%; margin-right:5%;}
.sb-lb li:nth-of-type(2){ margin-right:0;}
.sb-lb li:nth-of-type(1), .sb-lb li:nth-of-type(2){ margin-bottom:5%;}
.sb-lb li:nth-of-type(3){ width:100%;}
}

/* Page Contact */
.lx-fl{ width:100%; height:800px; background:url(../images/contact.jpg) no-repeat center; background-size:cover; position:relative;}
.lx-ig{ position:absolute; top:38%; left:60%; width:200px; height:250px; font-size:13px; color:#fff; line-height:24px; padding:25px 25px 0; background:-webkit-linear-gradient(120deg, #0070db, #00a8ff); background:linear-gradient(120deg, #0070db, #00a8ff); border-radius:15px; -webkit-border-radius:15px;}
.lx-ig img{ display:block; width:150px; height:150px; margin-bottom:10px;}
.lx-lb{ margin:65px 0 80px;}
.lx-lb ul li{ float:left; width:48%; margin-right:4%; border:1px solid #e5e5e5;}
.lx-lb ul li:nth-of-type(2n){ margin-right:0;}
.lx-lb ul li:nth-of-type(1), .lx-lb ul li:nth-of-type(2){ margin-bottom:4%;}
.lx-lb ul li h3{ height:35px; line-height:34px; color:#fff; border-bottom:1px solid #e5e5e5; padding:0 20px; background:-webkit-linear-gradient(90deg, #0070db, #00a8ff); background:linear-gradient(90deg, #0070db, #00a8ff);}
.lx-lb ul li p{ padding:15px 20px 20px;}
.lx-yx{ margin-top:30px; font-size:18px; text-align:center;}
.lx-yx span{ margin:0 5px;}
@media screen and (max-width:1440px){ 
.lx-fl{ height:600px;}
.lx-ig{ left:65%;}
}
@media screen and (max-width:1024px){ 
.lx-fl{ height:450px;}
.lx-ig{ top:28%; left:62%;}
.lx-lb{ margin:55px 0 65px;}
}
@media screen and (max-width:800px){ 
.lx-fl{ height:400px;}
.lx-ig{ top:25%;}
.lx-lb{ margin:45px 0 50px;}
.lx-yx{ margin-top:20px; font-size:14px; text-align:left; line-height:24px;}
}
@media screen and (max-width:640px){ 
.lx-fl{ height:350px; background-image:url(../images/lxmobile.jpg);}
.lx-ig{ display:none;}
.lx-lb ul li{ width:100%; margin-right:0;}
.lx-lb ul li:nth-of-type(1), .lx-lb ul li:nth-of-type(2), .lx-lb ul li:nth-of-type(3){ margin-bottom:3%;}
.lx-yx{ margin-top:15px;}
}
@media screen and (max-width:480px){ .lx-fl{ height:265px;}}
@media screen and (max-width:375px){ .lx-fl{ height:220px;}}
@media screen and (max-width:320px){ .lx-fl{ height:200px;}}

/* Page News */
.ns-fl{ width:100%; height:800px; background:url(../images/news.jpg) no-repeat center; background-size:cover;}
.ns-ls{ margin:65px 0 80px;}
.ns-lb a{ display:block; margin-top:50px; border:1px solid #e5e5e5;}
.ns-lb a:nth-of-type(1){ margin-top:0;}
.ns-lb a .ns-zb{ float:left; width:30%; height:250px; overflow:hidden;}
.ns-lb a:nth-of-type(2n) .ns-zb{ float:right;}
.ns-lb a .ns-zb dl{ width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-lb a .ns-yb{ float:left; width:70%; height:250px; padding:20px 25px; border-left:1px solid #f0f0f0; position:relative; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-lb a:nth-of-type(2n) .ns-yb{ border-right:1px solid #f0f0f0; border-left:none;}
.ns-lb a .ns-yb dl{ font-size:18px; color:#333; height:30px; line-height:30px; overflow:hidden; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-lb a .ns-yb span{ display:block; font-family:"Helvetica Narrow"; font-size:15px; color:#888; margin-top:3px; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-lb a .ns-yb p{ font-size:14px; color:#666; line-height:24px; margin-top:10px; height:48px; overflow:hidden; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-lb a .ns-yb font{ position:absolute; left:25px; bottom:30px; display:block; width:80px; height:24px; line-height:22px; font-size:12px; color:#a0a0a0; text-align:center; border:1px solid #e0e0e0; -webkit-border-radius:15px; border-radius:15px; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-lb a:hover .ns-zb dl{ -transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1);}
.ns-lb a:hover .ns-yb{ border-left:1px solid #0070db; background-color:#0070db;}
.ns-lb a:hover:nth-of-type(2n) .ns-yb{ border-right:1px solid #0070db; border-left:none;}
.ns-lb a:hover .ns-yb dl, .ns-lb a:hover .ns-yb span, .ns-lb a:hover .ns-yb p{ color:#fff;}
.ns-lb a:hover .ns-yb font{ color:#0070db; border:1px solid #fff; background-color:#fff;}
@media screen and ( max-width:1440px ){ .ns-fl{ height:600px;}}
@media screen and ( max-width:1024px ){
.ns-fl{ height:480px;}
.ns-ls{ margin:55px 0 65px;}
.ns-lb a{ margin-top:35px;}
.ns-lb a .ns-zb{ width:40%;}
.ns-lb a .ns-yb{ width:60%;}	
}
@media screen and ( max-width:800px ){
.ns-fl{ height:360px;}
.ns-ls{ margin:45px 0 50px;}
.ns-lb a .ns-zb{ height:215px;}
.ns-lb a .ns-yb{ height:215px; padding:15px 20px;}
.ns-lb a .ns-yb dl{ font-size:16px;}
.ns-lb a .ns-yb span{ margin-top:1px;}
.ns-lb a .ns-yb font{ left:20px; bottom:25px;}
}
@media screen and ( max-width:640px ){
.ns-fl{ height:300px;}
.ns-lb a{ margin-top:3%;}
.ns-lb a .ns-zb{ width:100%; height:430px;}
.ns-lb a .ns-yb{ width:100%; height:auto; padding:15px 15px 20px; border-left:none;}
.ns-lb a .ns-yb dl{ font-size:15px;}
.ns-lb a .ns-yb span{ font-size:14px; line-height:24px; margin-top:0;}
.ns-lb a .ns-yb p{ margin-top:3px; height:auto;}
.ns-lb a .ns-yb font{ position:relative; left:0; bottom:0; margin-top:12px;}
}
@media screen and ( max-width:480px ){ 
.ns-fl{ height:220px;}
.ns-lb a .ns-zb{ height:320px;}
}
@media screen and ( max-width:414px ){ 
.ns-fl{ height:200px;}
.ns-lb a .ns-zb{ height:278px;}
}
@media screen and ( max-width:375px ){ .ns-lb a .ns-zb{ height:252px;}}
@media screen and ( max-width:320px ){ .ns-lb a .ns-zb{ height:210px;}}

/* Page Next */
.page{ display:table; margin:50px auto 0;}
.page a{ display:block; float:left; padding:5px 20px; border:1px solid #f0f0f0; color:#888; margin:0 5px; cursor:pointer; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.page a:hover,.page a.pageNext{ color:#fff; border:1px solid #0070db; background-color:#0070db;}
.page a.pageNext:hover{ font-weight:bold;}
.page a.pageCn{ padding:5px 15px;}
@media screen and ( max-width:640px ){
.page{ margin-top:30px;}
.page a{ padding:0 10px; margin:0 2px;}
.page a.pageCn{ padding:0 8px;}
}

/* Page NewsView */
.ns-nm{ font-size:24px; color:#333; text-align:center;}
.ns-in{ font-size:14px; color:#888; text-align:center; margin-top:10px;}
.ns-in span{ margin:0 5px;}
.ns-ig{ margin-top:35px; text-align:center;}
.ns-ig img{ width:100%; max-width:640px;}
.ns-js{ margin-top:35px;}
.ns-js img{ width:100%; max-width:640px;}
.ns-nt{ margin-top:35px;}
.ns-nt a{ display:block; color:#888; margin-top:5px;}
.ns-nt a:hover{ color:#0070c0;}
@media screen and (max-width:480px){ 
.ns-nm{ font-size:18px;}
.ns-in{ font-size:12px; margin-top:0;}
.ns-js{ margin-top:20px;}
.ns-ig{ margin-top:20px;}
.ns-nt{ margin-top:20px;}
.ns-nt a{ margin-top:0;}
}

/* Page Seawater */
.hs-bg{ width:100%; height:800px; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; display:flex; justify-content:center; flex-direction:column;}
.hs-tx{ font-size:24px; color:#fff; line-height:50px; text-align:center; padding:0 10%;}
.hs-tx h1{ font-size:48px; margin-bottom:20px;}
.hs-bg dl{ position:absolute; left:50%; bottom:50px; width:40px; height:40px; border:2px solid #fff; margin-left:-20px; background:url(../images/iy.png) no-repeat center; -webkit-border-radius:50%; border-radius:50%;}
.hs-ls{ margin:65px 0 80px;}
.hs-lb{ border:1px solid #e5e5e5;}
.hs-lb h1{ height:50px; line-height:50px; font-size:24px; color:#fff; text-align:center; background:-webkit-linear-gradient(90deg, #0070db, #00a8ff); background:linear-gradient(90deg, #0070db, #00a8ff);}
.hs-lb ul{ padding:20px 25px;}
.hs-lb ul li{ float:left; width:32%; margin-right:2%; color:#666;}
.hs-lb ul li:nth-of-type(3){ margin-right:0;}
.hs-lb ul li h2{ font-size:18px; font-weight:normal; color:#333;}
.hs-ig li{ float:left; width:48.5%; margin-right:3%; margin-top:3%; border:1px solid #e5e5e5;}
.hs-ig li:nth-of-type(2n){ margin-right:0;}
.hs-ig li img{ width:100%;}
.hs-ig li dl{ height:30px; line-height:30px; font-size:15px; color:#fff; text-align:center; background:-webkit-linear-gradient(90deg, #0070db, #00a8ff); background:linear-gradient(90deg, #0070db, #00a8ff);}
.hs-ns{ text-align:center; margin-top:30px;}
.hs-ns a{ font-size:18px;}
.ts-tx{ font-size:24px; text-align:center; margin-bottom:10px;}
@media screen and ( max-width:1024px ){
.hs-bg{ height:580px;}
.hs-tx{ font-size:18px; line-height:36px; padding:0 5%;}
.hs-tx h1{ font-size:36px;}
.hs-ls{ margin:55px 0 65px;}
.hs-lb ul li{ width:49%;}
.hs-lb ul li:nth-of-type(3){ margin-right:2%; margin-top:2%;}
.hs-lb ul li:nth-of-type(2){ margin-right:0;}
}
@media screen and ( max-width:800px ){ .hs-ls{ margin:45px 0 50px;}}
@media screen and ( max-width:640px ){
.hs-lb h1{ height:40px; line-height:40px; font-size:18px;}
.hs-lb ul li{ width:100%; margin-right:0;}
.hs-lb ul li:nth-of-type(2){ margin-top:2%;}
.hs-lb ul li h2{ font-size:16px;}
}
@media screen and ( max-width:480px ){
.hs-bg{ height:450px;}
.hs-tx{ font-size:16px; line-height:30px;}
.hs-tx h1{ font-size:30px;}
.hs-bg dl{ bottom:35px; width:30px; height:30px; margin-left:-15px;}
.hs-ig li{ width:100%; margin-right:0;}
.hs-ns{ margin-top:20px;}
.ts-tx{ font-size:18px;}
}
@media screen and ( max-width:375px ){ .hs-ns a{ font-size:15px;}}
@media screen and ( max-width:320px ){ .ts-tx{ font-size:15px;}}

/* Page Surimi */
.ym-bg{ width:100%; height:800px; background:url(../images/surimi.jpg) no-repeat center; background-size:cover; position:relative;}
.ym-bg dl{ position:absolute; left:50%; bottom:50px; width:40px; height:40px; border:2px solid #fff; margin-left:-20px; background:url(../images/iy.png) no-repeat center; -webkit-border-radius:50%; border-radius:50%;}
.ym-ls{ font-size:18px; text-align:center;}
.ym-ls h1{ font-size:30px; margin-bottom:13px;}
.ym-ls span{ font-family:"Microsoft YaHei";}
.ym-ig li{ border:none;}
@media screen and ( max-width:1280px ){ .ym-bg{ height:600px;}}
@media screen and ( max-width:1024px ){ .ym-bg{ height:500px;}}
@media screen and ( max-width:800px ){
.ym-bg{ height:400px;}
.ym-bg dl{ bottom:20px; width:30px; height:30px; margin-left:-15px;}
.ym-ls{ margin-bottom:10px;}
}
@media screen and ( max-width:640px ){ .ym-bg{ height:300px;}}
@media screen and ( max-width:480px ){ .ym-bg{ height:250px;}}
@media screen and ( max-width:414px ){ .ym-bg{ height:230px;}}
@media screen and ( max-width:375px ){ .ym-bg{ height:200px;}}