@charset "utf-8";

body{font-size: 1.125em;}
@media (max-width: 1440px) {
  body{font-size: 1em;}	
}
a:hover{color: #1d68b8 !important;}

.hystyle .crumb{margin-bottom: 0;}

.body-layer{position: relative; padding-top: 50px; padding-bottom: 20px; background-position: center top; background-repeat: no-repeat; background-size: cover;}
.body-layer .tab-box{position: relative;}
.body-layer .tab-box .hd{position: absolute; top: -90px; right: 0;}
.body-layer .tab-box .hd ul li{float: left; font-size: 1.5em; margin-right: 1.5em; transition: all .3s;}
.body-layer .tab-box .hd ul li.last{margin-right: 0;}
.body-layer .tab-box .hd ul li a{display: block; position: relative; line-height: 60px; color: #1d68b8;}
.body-layer .tab-box .hd ul li a font{position: relative; z-index: 1;}
.body-layer .tab-box .hd ul li a:before{position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #91afcf; border-radius: 100em;}
.body-layer .tab-box .hd ul li.on a{padding: 0 1.5em; font-weight: bold;}
.body-layer .tab-box .hd ul li.on a:before{content: "";}
.body-layer .tab-box .hd.default{right: auto; left: 180px;}
.body-layer .tab-box .hd.default a{padding: 0 .625em !important; color: #c8e8ff;}
.body-layer .tab-box .hd.default a:hover{color: #c8e8ff !important;}
.body-layer .tab-box .hd.default ul li a:before{background: url(../images/hystyle/hd_filter_bg.png) repeat-x left top; border: none; background-size: 100% 100%;}
@media (max-width: 1440px) {
  .body-layer .tab-box .hd{top: -73px;}
  .body-layer .tab-box .hd ul li{font-size: 1.375em;}
  .body-layer .tab-box .hd ul li a{line-height: 45px;}
}
@media (max-width: 992px) {
  .body-layer .tab-box .hd{top: -60px;}
  .body-layer .tab-box .hd ul li{font-size: 1.25em;}
  .body-layer .tab-box .hd ul li a{line-height: 40px;}
}
@media (max-width: 640px) {
  .body-layer .tab-box .hd{position: static; margin-bottom: 20px;}
  .body-layer .tab-box .hd ul{margin: -10px -5px 0;}
  .body-layer .tab-box .hd ul li{margin-right: 0; font-size: 1.125em;}
  .body-layer .tab-box .hd ul li a{margin: 10px 5px 0; text-align: center;}
  .body-layer .tab-box .hd.default a{padding: 0 !important;}
  .body-layer .tab-box .hd ul.col2 li{width: 50%;}
  .body-layer .tab-box .hd ul.col3 li{width: 33.33333%;}
}
@media (max-width: 414px) {
  .body-layer .tab-box .hd ul{margin: -4px -2px 0;}
  .body-layer .tab-box .hd ul li{font-size: 1em;}
  .body-layer .tab-box .hd ul li a{margin: 4px 2px 0;}	
}

/*com-column*/
.column-thead{position: relative;}
.column-thead .currentname{position: relative; float: left;}
.column-thead .currentname img{display: block; height: 65px;}
.column-thead .more{position: absolute; top: 50%; right: 0; margin-top: -10px;  line-height: 26px; color: #1060b5;}
@media (max-width: 1440px) {
  .column-thead .currentname img{height: 52px;}
}

/*高清海报*/
.gqhb{padding-top: 7%; padding-bottom: 8%; min-height: 300px; background-image: url(../images/hystyle/gqhb_bg.png);}
.gqhb .swiper-nav{position: absolute; top: -95px; right: 0;}
.gqhb .swiper-nav li{display: none;}
.gqhb .swiper-nav li div{position: relative; top: auto; float: left; margin-top: auto !important; margin-left: 15px;}
.gqhb .swiper-nav li.on{display: block;}
.gqhb .swiper-fluid .swiper-container{margin-right: -10px; margin-left: -10px;}
.gqhb .swiper-fluid .swiper-slide dl{margin-right: 10px; margin-left: 10px;}
.gqhb .swiper-fluid .swiper-slide dl dd .place{padding-top: 176%;}
.gqhb .swiper-fluid .swiper-slide dl dd .place .pic{top: 8%; right: 10px; left: 12%; border: 5px solid #fff; border-radius: 500em 500em 150em 150em;}
.gqhb .swiper-fluid .swiper-slide dl dd .place:after{position: absolute; top: 8%; right: 0; bottom: 0; left: 12%; content: ""; margin-top: 0; border: 1px solid #fff; border-radius: 500em 500em 150em 150em;}
.gqhb .swiper-fluid .swiper-slide-active dl dd .place .pic{top: 0; left: 0;}
.gqhb .swiper-fluid .swiper-slide-active dl dd .place:after{top: 0; left: 0;}
@media (max-width: 1440px) {
  .gqhb .swiper-nav{top: -80px;}
  .gqhb .swiper-fluid .swiper-container{margin-right: 0; margin-left: 0;}
  .gqhb .swiper-fluid .swiper-slide dl{margin-right: 0; margin-left: 0;}
}
@media (max-width: 992px) {
  .gqhb{padding-top: 80px; padding-bottom: 60px;}
  .gqhb .swiper-nav{top: -60px;}
  .gqhb .swiper-fluid .swiper-container{margin-right: 0; margin-left: 0;}
  .gqhb .swiper-fluid .swiper-slide dl{margin-right: 0; margin-left: 0;}
}
@media (max-width: 640px) {
  .gqhb .swiper-nav{top: -48px;}
}

/*海洋小视频*/
.hyxsp{padding-top: 6%; padding-bottom: 5%; background-image: url(../images/hystyle/hyxsp_bg.png);}
@media (max-width: 414px) {
  .hyxsp .tab-box .hd ul li{width: 30% !important;}
  .hyxsp .tab-box .hd ul li:nth-child(2){width: 40% !important;}
}
.hyxsp .swiper-com-main{position: relative; min-height: 400px; background: #a8deff; border-radius: 20px 5px 5px 20px; overflow: hidden;}
.hyxsp .swiper-com-main .left{position: absolute; top: 0; bottom: 0; left: 0; width: 74.13%; background: url(../images/hystyle/hyxsp_left_filter.png) repeat-x top; background-size: auto 100%; border-radius: 20px;}
.hyxsp .swiper-com-main .left .bd{position: relative; margin: 45px 45px 0;}
.hyxsp .swiper-com-main .left .bd .place{padding-top: 480px; border-radius: 20px;}
.hyxsp .swiper-com-main .left .bd .place .ctrl-video-btn{position: absolute; top: 50%; left: 50%; z-index: 2; width: 66px; height: 66px; margin-top: -33px; margin-left: -33px; cursor: pointer;}
.hyxsp .swiper-com-main .left .bd .place.zindex{z-index: 3;}
.hyxsp .swiper-com-main .left .bd .caption{position: relative; margin-top: 30px; text-align: center;} 
.hyxsp .swiper-com-main .left .bd .caption a{font-size: 1.125em; font-weight: bold; color: #087fba; line-height: 1.5em;} 
.hyxsp .swiper-com-main .right{margin-left: 74.13%; padding-left: 30px;}
.hyxsp .swiper-com-main .right .swiper-fluid{padding: 35px 30px; background: #ebf8fe; border-radius: 5px;}
.hyxsp .swiper-com-main .right .swiper-fluid > a{position: absolute; right: 0; left: 0; width: 40px; margin: 0 auto;}
.hyxsp .swiper-com-main .right .swiper-fluid > a.swiperY-button-prev{top: 10px;}
.hyxsp .swiper-com-main .right .swiper-fluid > a.swiperY-button-next{bottom: 10px;}
.hyxsp .swiper-com-main .right .swiper-fluid > a:hoverr{opacity: .85;}
.hyxsp .swiper-com-main .right .swiper-container{height: 570px;}
.hyxsp .swiper-com-main .right .swiper-slide{height: 190px; width: 100%;}
.hyxsp .swiper-com-main .right .swiper-slide dl{padding: 10px 0;}
.hyxsp .swiper-com-main .right .swiper-slide dl dd .place{padding-top: 130px; border-radius: 10px;}
.hyxsp .swiper-com-main .right .swiper-slide dl dt{padding: 10px 0;}
.hyxsp .swiper-com-main .right .swiper-slide dl dt .caption{text-align: center; line-height: 30px;}
.hyxsp .swiper-com-main .right .swiper-slide-active dl dt{font-weight: bold; color: #1d68b8;}
@media (max-width: 1440px) {
  .hyxsp .swiper-com-main .left{width: 78%;}
  .hyxsp .swiper-com-main .left .bd{margin: 30px 30px 0;}
  .hyxsp .swiper-com-main .right{margin-left: 78%; padding-left: 20px;}
  .hyxsp .swiper-com-main .right .swiper-fluid{padding: 25px 15px;}	
  .hyxsp .swiper-com-main .right .swiper-fluid > a.swiperY-button-prev{top: 5px;}
  .hyxsp .swiper-com-main .right .swiper-fluid > a.swiperY-button-next{bottom: 5px;}
}
@media (max-width: 992px) {
  .hyxsp{padding-top: 50px; padding-bottom: 40px;}
  .hyxsp .swiper-com-main{border-radius: 10px 10px 10px 10px;}
  .hyxsp .swiper-com-main .left .bd{margin: 0;}
  .hyxsp .swiper-com-main .left .bd .place{padding-top: 400px; border-radius: 10px 0 0 0;}
  .hyxsp .swiper-com-main .left .bd .caption{margin-top: 20px;}
  .hyxsp .swiper-com-main .right{padding-left: 0;}
  .hyxsp .swiper-com-main .right .swiper-fluid{border-radius: 0 10px 10px 0;}
  .hyxsp .swiper-com-main .right .swiper-container{height: 450px;}
  .hyxsp .swiper-com-main .right .swiper-slide{height: 150px;}
  .hyxsp .swiper-com-main .right .swiper-slide dl dd .place{padding-top: 90px;}
}
@media (max-width: 768px) {
  .hyxsp .swiper-com-main .left{width: 70%;}
  .hyxsp .swiper-com-main .left .bd .place{padding-top: 310px;}
  .hyxsp .swiper-com-main .right{margin-left: 70%;}
  .hyxsp .swiper-com-main .right .swiper-slide dl dt{display: none;}
  .hyxsp .swiper-com-main .right .swiper-container{height: 354px;}
  .hyxsp .swiper-com-main .right .swiper-slide{height: 118px;}
  .hyxsp .swiper-com-main .right .swiper-slide dl dd .place{padding-top: 90px;}
}
@media (max-width: 640px) {
  .hyxsp .swiper-com-main{display: none;}	
}
.hyxsp .swiper-m-main{position: relative; display: none;}
.hyxsp .swiper-m-main .swiper-slide{position: relative;}
.hyxsp .swiper-m-main .swiper-slide dl dt{position:absolute; right: 0; bottom: 0; left: 0; z-index: 10; padding: 10px; background: url(../images/public/blank_black_opa25.png);}
.hyxsp .swiper-m-main .swiper-slide dl dt a{color: #fff;}
.hyxsp .swiper-m-main .swiper-pagination{bottom: 50px;}
@media (max-width: 640px) {
  .hyxsp .swiper-m-main{display: block;}	
}

/*趣味漫画*/
.qwmh .swiper-container{margin-right: -35px; margin-left: -35px;}
.qwmh .swiper-slide dl{margin-right: 35px; margin-left: 35px; background: #f1f8ff; border: 1px solid #bfddff; border-radius: 30px; overflow: hidden;}
.qwmh .swiper-slide dl dd .place{padding-top: 51.62%; border-radius: 30px;}
.qwmh .swiper-slide dl dt{padding: 15px 15%; height: 56px; line-height: 56px; text-align: center;}
.qwmh .swiper-slide dl dt a{display: inline-block; line-height: 1.5em;}
@media (max-width: 1440px) {
  .qwmh .swiper-container{margin-right: -20px; margin-left: -20px;}	
  .qwmh .swiper-slide dl{margin-right: 20px; margin-left: 20px; border-radius: 20px;}
  .qwmh .swiper-slide dl dd .place{border-radius: 20px;}
  .qwmh .swiper-slide dl dt{height: 50px; line-height: 50px;}	
}
@media (max-width: 992px) {
  .qwmh .swiper-container{margin-right: -10px; margin-left: -10px;}	
  .qwmh .swiper-slide dl{margin-right: 10px; margin-left: 10px; border-radius: 10px;}
  .qwmh .swiper-slide dl dd .place{border-radius: 15px;}
  .qwmh .swiper-slide dl dt{height: 50px; line-height: 50px;}
  .qwmh .swiper-slide dl dt{padding: 10px 5%;}	
}

/*海洋课堂*/
.hykt .tab-box .swiper-slide ul li a .place{border-radius: 30px;}
.hykt .tab-box .swiper-slide ul li a .play{top: auto; bottom: 30px; left: 30px; width: 35px; height: 35px; margin-top: 0; margin-left: 0;}
.hykt .tab-box .swiper-slide ul li a .caption{margin-top: .5em;}
@media (max-width: 1440px) {
  .hykt .tab-box .swiper-slide ul li a .play{bottom: 20px; left: 20px; width: 30px; height: 30px;}	
  .hykt .tab-box .swiper-slide ul li a .place{border-radius: 20px;}
}
@media (max-width: 992px) {
  .hykt .tab-box .swiper-slide ul li a .place{border-radius: 15px;}	
}
@media (max-width: 768px) {
  .hykt .tab-box .swiper-slide ul li a .play{bottom: 10px; left: 10px; width: 25px; height: 25px;}		
}
@media (max-width: 640px) {
  .hykt .tab-box .swiper-slide ul li{width: 50%;}
  .hykt .tab-box .swiper-slide ul li:nth-child(5){display: none;}	
  .hykt .tab-box .swiper-slide ul li:nth-child(6){display: none;}
}

/*科普读物*/
.kpdw{position: relative;}
.kpdw .swiper-fluid{border-left: 1px solid #ccd6dd;}
.kpdw .swiper-slide{float: left; width: 33.33333%;}
.kpdw .swiper-slide dl{padding-right: 40px; padding-left: 40px; border-right: 1px solid #ccd6dd;}
.kpdw .swiper-slide dl dd .place{padding-top: 140%; border-radius: 30px;}
.kpdw .swiper-slide dl dt{padding-top: 1.5em;}
.kpdw .swiper-slide dl dt .caption{padding-right: 5%; font-size: 1.1875em; font-weight: bold; line-height: 1.5em;}
.kpdw .swiper-slide dl dt .caption a{height: 3em;}
.kpdw .swiper-slide dl dt .desc{margin-top: 1em;}
.kpdw .swiper-slide dl dt .desc p{padding: .25em 0; color: #808080; line-height: 1.5em;}
.kpdw .swiper-ctrl-button.swiper-button-disabled{opacity: .65; filter: alpha(opacity=65);}
@media (max-width: 1440px) {
  .kpdw .swiper-slide dl{padding-right: 30px; padding-left: 30px;}
  .kpdw .swiper-slide dl dd .place{border-radius: 20px;}	
}
@media (max-width: 992px) {
  .kpdw .swiper-slide dl{padding-right: 20px; padding-left: 20px;}
  .kpdw .swiper-slide dl dd .place{border-radius: 15px;}	
}
@media (max-width: 768px) {
  .kpdw .swiper-ctrl-button{display: block;}
  .kpdw .swiper-slide dl dd{width: 75%; margin: 0 auto;}
  .kpdw .swiper-slide dl dt .caption{padding-right: 0; font-size: 1em;}
  .kpdw .swiper-slide dl dt .caption a{height: auto;}
}
@media (max-width: 600px) {
  .kpdw .swiper-slide dl{padding-right: 15px; padding-left: 15px;}
  .kpdw .swiper-slide dl dt .desc{font-size: .875em;}
}