.wrapper { position: relative; height: 100%; overflow: hidden;}
.wrap-index-bg { background: url(../../i/hn/index-banner-bg.png) top center no-repeat;}
.wrap-index-bg .float-element { display: block;}
.wrap-ocean-bg { background: url(../../i/hn/ocean-banner-bg.png) top center no-repeat;}
.wrap-tourism-bg { background: url(../../i/hn/tourism-banner-bg.png) top center no-repeat;}
.sub-nav { height: 44px; line-height: 44px; width: 100%; font-size: 14px; background: rgba(50, 111, 225, .3);}
.sub-menu { float: right;}
.sub-menu > li { display: inline; margin: 0 8px;}
.sub-menu > li a { color: #fff;}
.sub-date>p { color: #fff;}
.main-banner { height: 450px; position: relative;}
.logo { margin:58px 38px; width:250px; overflow: hidden;}
.logo img { width: 100%;}
.float-element { display: none; width:562px; height:200px; position: absolute; top:320px; right: 120px; z-index: 8; background: url(../../i/hn/float-element-mov.png);}
.forecast-card { float: right; background: rgba(0, 132, 255, .8); border-radius: 20px; box-shadow: 10px 0 30px rgba(0, 132, 255, .5); padding: 25px 28px; width: 400px; margin: 68px;}
.main-nav { margin-bottom: 46px; padding-bottom: 36px; background: url(../../i/hn/banner-bg.png) bottom center no-repeat;}
.main-nav-bar { height: 100px; padding: 10px; background: #006cff; border-radius:5px; overflow: hidden;}
.main-nav-bar h2 { margin: 10px 44px; float: left;}
.main-nav-bar h2 a { font-size: 24px; color: #fff;}
.nav-list { float: left; margin: 15px; position: relative; z-index: 9;}
.nav-first { margin-bottom: 10px;}
.nav-first-item { float: left; margin: 0 30px 0 0;}
.nav-first-item a { color: #fff; font-size: 16px;}
.nav-second { background: rgba(0, 0, 0, .1); *background: #006bd8; border-radius: 5px; padding:3px 10px;}
.nav-second-item { float: left; margin: 0 15px 0 0;}
.nav-second-item a { color: rgba(255, 255, 255, .5); *color:#fff; font-size:14px;}
.forecast-card-add { float: right; line-height: 18px;}
.forecast-card-add .icon { width: 18px; height: 18px; display: inline-block; margin: 0 10px; vertical-align: middle; color: #fff;}
.forecast-card-add >span { color: #fff; font-size: 14px; vertical-align: middle;}
.forecast-card-tem {}
.forecast-card-tem .icon { width: 40px; height: 40px; display: inline-block; margin: 0 10px; vertical-align: middle;}
.forecast-card-tem >span { color: #fff; font-size: 50px; vertical-align: middle; font-family: 'Arial'; line-height: 1em;}
.forecast-card-info { margin-bottom: 10px;}
.forecast-card-chart { height: 76px;}
.footer { padding: 50px 0;}
.foot-contact { text-align: center; color: #333; margin-bottom: 30px; font-weight: 600;}
.foot-contact>span {margin-right: 20px;}
.foot-copyright { line-height: 1.2em; color: #999; text-align: center;}
.main-wrap { position: relative;}
.col-main-box { margin-bottom: 30px;}
.col-main-head { padding: 15px 30px; line-height: 1em;}
.col-main-head .prompt { font-size: 14px;color: #999; line-height: 34px;}
.col-main-head h3 { font-size: 24px; color: #333;}
.col-main-head h3>span { font-size: 14px; margin-left: 10px; color: #999;}
.col-main-block { background: #fff; padding: 20px 30px;}
.col-sub-box {background: #fff; border-radius: 5px; padding: 30px; margin-bottom: 30px;}
.col-sub-head { margin-bottom: 15px;}
.col-sub-head>h3 { font-size: 16px; color: #333;}
.col-sub-head>h3 a { color: #333;}
.col-sub-head>h3::before { content: ''; width: 4px; height: 8px; background: #3ddbc1; display: inline-block; margin-right: 10px;}
.col-sub-list { padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis;}
.col-sub-list li { padding: 4px 0; list-style: disc; white-space: nowrap;}
.col-sub-list li a { line-height: 1em; font-size: 14px; color: #333;}
.col-sub-list li a:hover { color: #6a7491;}
.col-sub-tab { border-bottom: 1px solid #eee; margin-bottom: 10px;}
.col-sub-tab li { padding: 0 0 10px; margin: 0 20px 0 0; float: left;}
.col-sub-tab li a { color: #999; font-size: 15px;}
.col-sub-tab .active { border-bottom: 2px solid #006cff;}
.col-sub-tab .active a { color: #333;}
.col-sub-content { padding: 0;}
.col-sub-content .table { margin: 0;}
.col-sub-content th { font-weight: 400;}
.col-main-tab { position: relative;}
.col-main-tab li { display: inline-block; margin: 0 10px;}
.col-main-tab li a {color: #666; font-size: 15px; font-weight: bold; line-height: 30px; display: inline-block;}
.col-main-tab .active a { color: #333;}
.col-main-tab .active::after { content: ''; background: #006cff; margin: auto; display: block; height: 4px; width: 14px;}
.col-main-more { text-align: center;}
.col-main-more { color: #006cff;}
.head-fr { float: right;}
.head-fr li a { font-size: 14px; font-weight: 500;}
.fore-city-item { border: 1px solid #eaeaea; border-radius: 3px; padding: 10px; margin: 0 0 10px; background: #fff; white-space: nowrap; overflow: hidden;}
.fore-city-name { width: 4em; font-size: 14px; font-weight: 600; color: #333; display: inline-block;}
.fore-city-icon { width: 20px; display: inline-block;}
.fore-city-highest { color: #006cff; margin: 0 2px;}
.fore-city-lowest { color: orange; margin: 0 2px;}
.fore-city-wrap { background: #f5f5f5;}
.fore-city-wrap .col-md-4 {padding: 0 6px;}
.fore-area-wrap { position: relative; padding: 10px 0;}
.fore-area-wrap>h4 { font-size: 18px; color: #333; margin-bottom: .6em; font-weight: 600;}
.fore-area-wrap>h5 { font-size: 15px; padding: 10px 0; border-bottom: 1px solid #e5e5e5; color: #333; margin-bottom: .6em; font-weight: 600;}
.fore-area-wrap>p { font-size: 14px; color: #666; line-height: 1.5em;}
.fore-area-wrap .dropdown-menu { width: 300px;}
.fore-area-wrap .dropdown-menu>li { display: inline-block; }
.fore-area-wrap .dropdown-menu>li>a { display: inline-block; padding: 3px 10px; width: 5em;}
.fore-area-list>li { display: inline-block; padding: 3px 20px; border: 1px solid #e5e5e5;}
.thumbnail-item { overflow: hidden; border-radius: 5px; background: #fff; padding-bottom: 15px;}
.thumbnail-more { padding: 0 15px;}
.thumbnail-title { padding: 15px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.thumbnail-title a { font-size: 14px; color: #333;}
.thumbnail-subtitle { font-size: 12px; color: #999; line-height: 1.2em; padding:0 15px;}
.thumbnail-tag { padding: 0 15px; margin-bottom: 30px;}
.thumbnail-tag a { font-size: 12px; border: 1px solid #e5e5e5; border-radius: 3px; padding: 4px 6px; color: #999;}
.thumbnail-wrap { margin-bottom: 20px; background: #f4f4f4;}
.thumbnail-wrap li { padding: 0 5px; margin-bottom:10px;}
.col-icon-wrap { position: relative;}
.col-icon-wrap .col-md-2 { padding: 0 10px;}
.col-icon-item { display: block; margin-bottom: 10px;}
.col-icon-item .icon { padding: 25px 0; margin-bottom: 10px; background: #f8f9fa; border-radius: 5px; text-align: center;}
.col-icon-item .icon img { width: 40px;}
.col-icon-item >p { color: #333; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.col-warning-tip { margin-bottom: 20px;}
.col-warning-icon { padding: 10px 0; white-space: nowrap; margin: 0;}
.col-warning-icon>span { display: inline-block; width: 15px; height: 15px; margin-right: 5px; border-radius: 10px;}
.col-sub-thumbnail { margin: 0 0 10px;}
.col-sub-thumbnail img { width: 100%;}
.col-sub-thumbnail p { margin: 10px 0; color: #333; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5em;}
.col-img-row {}
.col-img-row .col-md-6 { padding: 0 5px;}
.col-img-item { margin-bottom: 10px;}
.col-img-item img { width: 100%;}
.col-img-item .title { height: 3em; line-height: 1.5em; overflow: hidden; color: #666; margin: 10px 0;}
.col-main-catalog { padding: 15px 0; border-bottom: 1px solid #eee;}
.col-main-catalog h4 { font-size: 16px; color: #333; margin-bottom: 15px;}
.col-main-catalog .tag { color: #333; background: #fff; padding: 5px 20px; border: 1px solid #d5d5d5; border-radius: 30px; display: inline-block; margin: 0 10px 10px 0;}
.carousel-caption h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-tabpane-pic { width: 220px; height: 300px; overflow: hidden; float: left; margin:0 30px 0 -10px;}
.main-tabpane-pic img { width: 220px; height: 300px; }
.main-tabpane-list { float: left;}
.main-tabpane-head { margin-bottom: 15px;}
.main-tabpane-head h4 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 15px 0; font-weight: 600;}
.main-tabpane-head h4 a { color: #333;}
.main-tabpane-head p { font-size: 14px; height: 2.8em; line-height: 1.4em; overflow: hidden; color: #999;}
.main-tabpane-list { padding-left: 20px;}
.main-tabpane-list li { padding: 5px 0; list-style: disc;}
.main-tabpane-list li a { font-size: 15px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-news { position: relative; height: 620px; margin-bottom: 30px;}
.news-carousel { width: 450px; margin-right: 40px; float: left;}
.news-carousel .carousel-indicators>li { width: 24px; height: 4px; border-radius: 0; border: none; margin: 0; background: #fff;}
.news-carousel .carousel-indicators .active { background: orange;}
.news-list { float: left; width: 680px;}
.news-list-first { padding: 20px 36px; overflow: hidden; border: 1px solid #dedcd5; height: 128px; background: #fff;}
.news-list-first>h4 { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 0; margin-bottom: 10px;}
.news-list-first>h4 a { color: #3470e1;}
.news-list-first>p { height: 3em; font-size: 12px; overflow: hidden; text-overflow: ellipsis; line-height: 1.5em; color: #959aa4;}
.news-list-body { margin: 30px 30px 10px; height: 260px; overflow: hidden;}
.news-list-body >li { display: inline-block; white-space: nowrap; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; line-height: 2em;}
.news-list-body >li a { font-size: 16px; color: #000;}
.news-list-body >li a:hover { color: #3470e1;}
.news-list-more { padding: 0 30px;}
.news-list-more a { font-size: 14px; color: #3470e1;}
.news-list-banner { margin: 26px -5px 0 -5px;}
.news-list-banner li { padding: 0 5px; height: 144px; overflow: hidden;}
.news-list-banner img { width: 100%;}
.news-live { padding: 36px; overflow: hidden; height: 368px; border: 1px solid #dedcd5; background: #fff;}
.news-live h3 { font-size: 18px; margin-bottom: 15px;}
.news-live .table p { margin: 0; }
.news-meteorology { margin-bottom: 20px; }
.news-meteorology dl { text-align: center; margin: 0; }
.news-meteorology dt { font-size: 14px; font-weight: 400; color: #999; }
.news-meteorology dd { font-size: 24px; }
.news-release-info span { margin-right: 20px; color: #999;}
.weather-warning { margin-top:26px; height: 54px; border: 1px #fbce01 solid; background: #fef1ab; padding: 10px 36px;}
.weather-warning h3 { font-size: 18px; color: #c00; line-height: 36px;}
.weather-warning > a { font-size: 14px;float: right; color: #36B; line-height: 36px;}

.weather-warning > dl { margin: 10px 0; background: rgba(255,255,255,.2); padding: 10px; }
.weather-warning > dl:after { content: ''; display: block;height: 1px; clear: both; }
.weather-warning > dl dt { float: left; width: 25px; margin: 0 10px 0 0; }
.weather-warning > dl dd h2 { line-height: 22px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; float: left; width: 400px; text-align: left;}
.weather-warning > dl dd { margin: 0 0 0 35px; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.weather-warning > dl .detail { margin: 0 0 0 20px; }

.main-weather-forecast-7 { height: 340px; padding-top: 100px; background: url(../../i/hn/main-weather-forecast-7-bg.png) 100% center no-repeat; margin-bottom: 30px;}
.wf-title { width: 380px; padding-left: 80px; float: left; overflow: hidden;}
.wf-title h4 { font-size: 30px; white-space: nowrap; overflow: hidden; margin-bottom: 24px;}
.wf-title .wf-infoitem { font-size: 14px; color: #666; margin: 0;}
.wf-content { background: #0084ff; border-radius:10px; box-shadow: 0 0 30px rgba(0,63,177,.5); padding: 0 20px; float: left; position: relative;}
.wf-content :nth-last-child(1) { border: none;}
.wf-forecast-item { height: 168px; border-right: 1px solid rgba(255, 255, 255, .1); width: 90px; float: left; padding: 24px 0;}
.wf-forecast-item .t-date { font-size: 14px; color: #fff; text-align: center; line-height: 1em;}
.wf-forecast-item .t-icon { width: 28px; height: 28px; margin: auto; display: block;}
.wf-forecast-item .t-icon img { width: 100%;}
.wf-forecast-item:hover { box-shadow: 0 0 20px rgba(0, 0, 0, .1); border: none;}
.wf-line-chart { position: absolute; top:85px; left: 20px; right: 20px; height: 60px;}
.main-traverse-col { margin-bottom: 30px; padding: 30px 0;}
.main-traverse-head { margin-bottom: 15px; text-align: center; position: relative;}
.main-traverse-head>h3 { font-size: 30px; color: #363738; white-space:nowrap; overflow: hidden; margin-bottom: 15px;}
.main-traverse-head .info-item { font-size: 14px; color: #666;}
.main-sights-tag { padding: 30px 200px; text-align: center;}
.main-sights-tag .active a { background: #5a5a59 !important; color: #fff !important;}
.main-sights-tag li { display: inline-block;}
.main-sights-list { position: relative;}
.main-sights-list a:hover .main-sights-item { box-shadow: 0 5px 20px rgba(0, 0, 0, .06); transition: all .5s;}
.main-sights-item { border-radius: 8px; overflow: hidden; background: #fff; transition: all .5s;}
.main-sights-img { width: 360px; height: 240px; overflow: hidden; margin: 30px; float: left;}
.main-sights-head { position: relative; margin: 0 0 20px;}
.main-sights-head h4 { color: #333; font-size: 30px; line-height: 1.4em;}
.main-sights-head > p { margin: 0; color: #999; font-size: 14px; white-space: nowrap; overflow: hidden;}
.main-sights-inner { margin: 30px; overflow: hidden; float: left; width: 650px;}
.main-sights-tem { margin-bottom: 15px; white-space: nowrap; overflow: hidden;}
.main-sights-tem .icon { width: 40px; height: 40px; overflow: hidden; display: inline-block; vertical-align: middle;}
.main-sights-tem .num { font-size: 36px; color: #422f2f; vertical-align: middle; margin-left: 20px;}
.main-sights-weather { margin-bottom: 15px;}
.main-sights-weather >span { font-size: 14px; color: #422f2f; margin-right: 20px; font-weight: 600;}
.main-sights-int { text-align: justify;}
.main-sights-int p { font-size: 13px; color: #999; line-height: 2em;}
.weather-map { margin: auto;}
.main-sub-box { padding:50px 0;}
.main-today-weather { margin-bottom: 50px;}
.weather-note-card { margin-bottom: 80px;}
.note-title { width: 380px; padding: 20px 0 0 80px; float: left; overflow: hidden;}
.note-title h4 { font-size: 24px; white-space: nowrap; overflow: hidden; margin-bottom: 24px;}
.note-title .note-infoitem { font-size: 14px; color: #666; margin: 0;}
.note-content { background: #0084ff; width: 666px; height: 166px; overflow: hidden; border-radius:0px 10px 10px 0px; box-shadow: 0 0 30px rgba(0,63,177,.5); float: left; position: relative;}
.note-content .note-text { font-size: 14px; color: #cae3f9; line-height: 1.8em; text-align: justify; margin: 30px 50px;}
.sights-weather-wrap { margin-bottom: 80px;}
.sights-weather-info { float: left; padding: 30px 40px 0 60px; width: 330px;}
.sights-weather-info .sights-name { font-size: 24px; color: #000; margin-bottom: 30px;}
.sights-weather-info .sights-name .sight-switch { font-size: 14px; color: #0084ff; margin-left: 20px;}
.sights-weather-info .sights-name .dropdown { display: inline-block;}
.sights-forecast-7 { float: left; position: relative;}
.sights-weather-info .sights-tem { margin: 0 0 30px -60px;}
.sights-weather-info .sights-tem .icon { width: 40px; height: 40px; display: inline-block; vertical-align: middle;}
.sights-weather-info .sights-tem .info { margin-left: 20px; font-size: 50px; color: #0370c4; vertical-align: middle; font-weight: 600;}
.sights-weather-info .date { margin-bottom: 36px; color: #999;}
.sights-weather-info .details { margin-bottom: 36px;}
.sights-weather-info .details >span { color: #333; margin-right: 2em; display: inline-block; margin-bottom: 1em;}
.sights-weather-info .details .glyphicon { width: 18px; height: 18px; display: inline-block;}
.sights-weather-info .sights-tip { white-space: nowrap; overflow: hidden; height: 36px; line-height: 36px; text-align: center; background: #465b6b; color: #fff;}
.sights-weather-info .sights-tip .glyphicon { color: orange; width: 24px; height: 24px; display: inline-block; margin-right: 1em;}
.sights-forecast-list { box-shadow: 0 5px 10px rgba(0, 0, 0, .02); position: relative; z-index: 1;}
.sights-forecast-list .s-yesterday { opacity: .5;}
.sights-forecast-list .s-today { box-shadow: 0 0 10px rgba(255, 155, 0, .2); z-index: 2;}
.sights-forecast-item { transition: all .5s; position: relative; height: 468px; width: 120px; padding: 36px 0; float: left; background: #fff; margin-left: -1px; border:1px solid #f1eee8;}
.sights-forecast-item .s-date { font-size: 14px; color: #333; text-align: center; margin: 0 0 44px;}
.sights-forecast-item .s-icon { display: block; width: 40px; height: 40px; margin: 0 auto 30px; text-align: center;}
.sights-forecast-item .s-details { text-align: center;}
.sights-forecast-item .s-details p { color: #5b87e5; line-height: 1.2em;}
.sights-forecast-item:hover { box-shadow: 0 0 10px rgba(255, 155, 0, .2); z-index: 2; border:1px solid orange; transition: all .5s;}
.sights-forecast-chart { position: absolute; bottom: 0; left: 0; right: 0; height: 250px; z-index: 3;}
.main-feature-wrap { background: #fff; padding: 100px 0; position: relative;}
.main-feature-wrap:after { content: ''; display: block; position: absolute; top:0; right: 0; bottom: 0; left: 40%; background: #e4e0d7; z-index: 0;}
.main-feature-list { position: relative; z-index: 1; margin: 0 auto 100px; width: 1000px;}
.main-feature-list-head { padding: 0 0 55px 55px;}
.main-feature-list-head .more { font-size: 14px; color: #4588FF; }
.main-feature-list-head h3 { font-size: 30px; color: #333; white-space: nowrap; overflow: hidden; margin-bottom: 10px;}
.main-feature-list-head >p { font-size: 14px; color: #999;}
.bg-leaf { background: url(../../i/hn/main-feature-bg-leaf.png) no-repeat; background-position:right 30px;}
.bg-flower { background: url(../../i/hn/main-feature-bg-flower.png) no-repeat; background-position:right 30px;}
.main-feature-item { float: left; width: 250px; height: 250px; position: relative; overflow: hidden;}
.main-feature-list .main-feature-item:nth-child(1) { box-shadow: 80px 36px 0 rgba(155, 155, 116, .2);}
.main-feature-list .main-feature-item:nth-child(2) { margin-top: 68px; z-index: 2;}
.main-feature-list .main-feature-item:nth-child(3) { z-index: 2;}
.main-feature-list .main-feature-item:nth-child(4) { margin-top: 68px; box-shadow: -80px -36px 0 rgba(255, 255, 255, .5);}
.main-feature-item >img { position: relative; z-index:2;}
.main-feature-item .text-box { position: absolute; padding: 30px; top:0; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; transform: translateY(250px); transition: all .5s;}
.main-feature-item .text-box >h4 { font-size: 24px; color: #fff; line-height: 1.2em; white-space: nowrap; overflow: hidden; margin:80px 0 30px; text-align: center;}
.main-feature-item .text-box >p { font-size: 13px; color: #fff; line-height: 1.5em;}
.main-feature-item .text-box p>b { margin: 0 5px; font-size: 15px; text-decoration: underline;}
.main-feature-list:nth-child(1) .text-box { background: #ff6c6c;}
.main-feature-list:nth-child(2) .text-box { background: #72d2a1;}
.main-feature-list:nth-child(3) .text-box { background: #d2c272;}
.main-feature-item a:hover .text-box { transform: translateX(0); transition: all .3s;}
.article-wrap { background: #fff; padding: 50px; position: relative; margin-bottom: 50px;}
.article-head { border-bottom: 1px solid #e5e5e5;}
.article-head >h4 { font-size: 30px; color: #333; line-height: 1.5em; margin-bottom: 1em;}
.article-from-data { margin-bottom: 20px;}
.article-from-data >span { margin-right: 10px; font-size: 14px; color: #999;}
.article-body { padding: 30px 0;}
.article-body >p { margin-bottom: 30px; font-size: 16px; color: #666; line-height: 2em;}
.article-body img { margin-bottom: 30px;}
.article-body >h4 { font-size: 18px; font-weight: 600; color: #333;  margin-bottom: 30px; line-height: 1.4em;}
.article-form-row { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; }
.article-list { padding: 0 20px; }
.article-list li { padding: 10px 0; list-style: decimal; line-height: 24px; }
.article-list li .text { font-size: 16px; color:#36b; }
.article-list li .date { float: right; }
 
.col-main-box .carousel-inner > .item { height: 368px; }
.col-main-box .carousel-inner > .item img { height: 100%; }