@charset "UTF-8";
html { height: 100%; }

body { height: 100%; }

.screen-top { height: 100%; width: 100%; position: relative; z-index: 15; }

.top-lky-ban { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; }
.top-lky-ban .swiper-button-next, .top-lky-ban .swiper-button-prev { width: 61px; height: 61px; background: url("../images/common/icon-arrow.png") no-repeat 0 0; }
.top-lky-ban .swiper-button-next, .top-lky-ban .swiper-container-rtl .swiper-button-prev { background-position: -61px -61px; top: auto; left: 191px; bottom: 152px; }
.top-lky-ban .swiper-button-prev, .top-lky-ban .swiper-container-rtl .swiper-button-next { background-position: 0 -61px; top: auto; left: 88px; bottom: 152px; }
.top-lky-ban .swiper-button-next.swiper-button-disabled, .top-lky-ban .swiper-button-prev.swiper-button-disabled { opacity: 1; background-position-y: 0; }

.top-lky-ban .swiper-slide a { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }

.top-lky-ban .swiper-slide a img { width: 100%; height: 100%; object-fit: cover; }

.l-video { position: absolute; right: 66px; bottom: 152px; letter-spacing: 10px; z-index: 10; font-size: 20px; color: #ffffff; }
.l-video a { color: #ffffff; line-height: 60px; }

.img-video { width: 61px; height: 61px; background: url("../images/common/icon-arrow.png") 0 -122px; margin-right: 20px; }

.top-weather-con { position: absolute; right: 40px; top: 160px; z-index: 7; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #ffffff; }
.top-weather-con p { letter-spacing: 5px; filter: drop-shadow(0 0 10px black); -webkit-filter: drop-shadow(0 0 10px black); }

.wth-l { display: inline-block; vertical-align: top; margin-right: 20px; font-size: 20px; line-height: 30px; }
.wth-l .ico-img { width: 100px; height: 100px; background: blue; background: url("../images/index/icon-weather.png") no-repeat 0 0; }
.wth-l .img-wth-a1 { background-position: 0 0; }
.wth-l .img-wth-a2 { background-position: -100px 0; }
.wth-l .img-wth-a3 { background-position: -200px 0; }
.wth-l .img-wth-a4 { background-position: -300px 0; }
.wth-l .img-wth-a5 { background-position: -400px 0; }
.wth-l .img-wth-a6 { background-position: -500px 0; }
.wth-l .img-wth-b1 { background-position: 0 -100px; }
.wth-l .img-wth-b2 { background-position: -100px -100px; }
.wth-l .img-wth-b3 { background-position: -200px -100px; }
.wth-l .img-wth-b4 { background-position: -300px -100px; }
.wth-l .img-wth-b5 { background-position: -400px -100px; }
.wth-l .img-wth-b6 { background-position: -500px -100px; }
.wth-l .img-wth-c1 { background-position: 0 -200px; }
.wth-l .img-wth-c2 { background-position: -100px -200px; }
.wth-l .img-wth-c3 { background-position: -200px -200px; }
.wth-l .img-wth-c4 { background-position: -300px -200px; }
.wth-l .img-wth-c5 { background-position: -400px -200px; }
.wth-l .img-wth-c6 { background-position: -500px -200px; }
.wth-l .img-wth-d1 { background-position: 0 -300px; }
.wth-l .img-wth-d2 { background-position: -100px -300px; }
.wth-l .img-wth-d3 { background-position: -200px -300px; }
.wth-l .img-wth-d4 { background-position: -300px -300px; }
.wth-l .img-wth-d5 { background-position: -400px -300px; }
.wth-l .img-wth-d6 { background-position: -500px -300px; }
.wth-l .img-wth-e1 { background-position: 0 -400px; }
.wth-l .img-wth-e2 { background-position: -100px -400px; }
.wth-l .img-wth-e3 { background-position: -200px -400px; }
.wth-l .img-wth-e4 { background-position: -300px -400px; }
.wth-l .img-wth-e5 { background-position: -400px -400px; }
.wth-l .img-wth-e6 { background-position: -500px -400px; }
.wth-l .img-wth-f1 { background-position: 0 -500px; }
.wth-l .img-wth-f2 { background-position: -100px -500px; }
.wth-l .img-wth-f3 { background-position: -200px -500px; }
.wth-l .img-wth-f4 { background-position: -300px -500px; }
.wth-l .img-wth-f5 { background-position: -400px -500px; }
.wth-l .img-wth-f6 { background-position: -500px -500px; }
.wth-l .wth-icon { width: 100px; height: 100px; overflow: hidden; margin-bottom: 4px; }
.wth-l .wth-icon img { width: 100px; height: 100px; }
.wth-l .wth-addre { padding-left: 20px; }
.wth-l .wth-name { padding-left: 20px; max-width: 100px; }

.wth-r { display: inline-block; vertical-align: top; font-size: 20px; line-height: 30px; text-align: right; }
.wth-r .wth-temp { font-size: 90px; line-height: 104px; }
.wth-r .wth-temp:after { float: right; content: ''; display: block; width: 40px; height: 40px; margin-top: 8px; background: url("../images/index/icon-weather-csd.png") no-repeat center center; }
.wth-r .wth-kq { line-height: 30px; padding: 10px 0; filter: drop-shadow(0 0 0 black); -webkit-filter: drop-shadow(0 0 0 black); }
.wth-r .wth-kq span { filter: drop-shadow(0 0 10px black); -webkit-filter: drop-shadow(0 0 10px black); }
.wth-r .wth-kq .kq-zl { width: 30px; height: 30px; background: #7ee248; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: inline-block; vertical-align: top; text-align: center; line-height: 30px; font-size: 16px; letter-spacing: 0; filter: drop-shadow(0 0 3px #7ee248); -webkit-filter: drop-shadow(0 0 3px #7ee248); }
.wth-r .wth-kq .kq-1 { background: #7ee248; }
.wth-r .wth-kq .kq-2 { background: orange; filter: drop-shadow(0 0 3px orange); -webkit-filter: drop-shadow(0 0 3px orange); }
.wth-r .wth-kq .kq-3 { background: red; filter: drop-shadow(0 0 3px red); -webkit-filter: drop-shadow(0 0 3px red); }

.screen-one-foot { position: absolute; left: 0; bottom: 0; z-index: 14; width: 100%; height: 110px; background: #f0f0f0; }

.sof-l { float: left; }
.sof-l .img-sofli { width: 23px; height: 22px; background: url("../images/common/icon-agg.png") no-repeat 0 0; float: left; margin: 44px 48px 0 78px; }
.sof-l .swiper-container { width: 250px; height: 50px; margin-top: 30px; padding-right: 30px; box-sizing: border-box; }
.sof-l .swiper-slide { font-size: 18px; background: none; text-align: left; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: left; justify-content: left; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.sof-l .swiper-slide a { display: block; height: 50px; line-height: 50px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.sof-l .swiper-slide a:hover { color: #4c4eda; }
.sof-l .swiper-button-next { width: 8px; height: 11px; right: 0; top: 19px; left: auto; bottom: auto; margin: 0; background: url("../images/common/icon-agg.png") no-repeat -17px -27px; }
.sof-l .swiper-button-prev { display: block; width: 8px; height: 11px; right: 17px; top: 19px; left: auto; bottom: auto; margin: 0; background: url("../images/common/icon-agg.png") no-repeat 0 -27px; }

.sof-r { float: right; padding-right: 57px; *display: inline-block; }
.sof-r a { width: 135px; height: 44px; line-height: 44px; font-size: 20px; text-align: center; display: inline-block; vertical-align: top; margin-top: 34px; color: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; letter-spacing: -1px; background: #668ae4; background: -webkit-linear-gradient(left, #668ae4, #4d4eda); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, #668ae4, #4d4eda); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, #668ae4, #4d4eda); /* Firefox 3.6 - 15 */ background: linear-gradient(left, #668ae4, #4d4eda); /* 标准的语法 */ position: relative; overflow: hidden; }
.sof-r a em { position: relative; z-index: 5; }
.sof-r a:after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 100%; background: #4d4eda; opacity: 0; transition: 500ms; -moz-transition: 500ms; -webkit-transition: 500ms; }
.sof-r a:hover:after { opacity: 1; }
.sof-r p { float: right; margin-left: 60px; font-size: 26px; line-height: 110px; color: #607be2; }
.sof-r p strong { color: #5b6fe0; }

.card-box { padding: 74px 8%; }
.card-box .c-card { display: flex; }
.card-box .c-card li { margin: 0 12px; flex-grow: 1; flex-basis: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #b8cbff; background: -webkit-linear-gradient(left, #b8cbff, #acafff); background: -o-linear-gradient(left, #b8cbff, #acafff); background: -moz-linear-gradient(left, #b8cbff, #acafff); background: linear-gradient(left, #b8cbff, #acafff); color: #fff; text-align: center; position: relative; font-family: 'SimHei'; }
.card-box .c-card li .cli-p { display: block; width: 0; height: 0; padding-left: 100%; padding-top: 69.5%; z-index: 1; }
.card-box .c-card li h5, .card-box .c-card li div, .card-box .c-card li p { position: absolute; left: 0; z-index: 5; width: 100%; }
.card-box .c-card li div { top: 50%; margin-top: -25px; }
.card-box .c-card li h5 { font-size: 20px; line-height: 66px; padding-top: 10px; top: 50%; margin-top: -101px; }
.card-box .c-card li p { bottom: 50%; margin-bottom: -103px; line-height: 1.2; font-size: 16px; height: 78px; display: table; width: 100%; }
.card-box .c-card li p span { display: table-cell; vertical-align: middle; padding-bottom: 6px; }

@media screen and (max-width: 1600px) { .card-box .c-card li p { height: 56px; margin-bottom: -81px; }
  .card-box .c-card li h5 { line-height: 46px; margin-top: -81px; } }
.img-c-hotel, .img-c-shop, .img-c-zyx, .img-c-obs, .img-c-map { width: 50px; height: 50px; background: url("../images/index/card-agg.png") no-repeat; }

.img-c-hotel { background-position: 0 0; }

.img-c-shop { background-position: -50px 0; }

.img-c-zyx { background-position: -100px 0; }

.img-c-obs { background-position: -150px 0; }

.img-c-map { background-position: -200px 0; }

.wgs-info-box { padding: 30px 8%; }

.wgs-info { min-height: 196px; display: flex; align-items: center; }

.wgs-tit { font-size: 110px; font-family: 'SimHei'; width: 36%; }

.wgs-text { width: 33%; color: #979797; -ms-word-break: break-all; word-break: break-all; font-size: 16px; line-height: 24px; font-family: 'SimHei'; letter-spacing: 4px; }

.wgs-href { padding-left: 5%; width: 26%; }
.wgs-href a { display: inline-block; vertical-align: top; text-align: center; color: #5f79e1; }
.wgs-href a span { display: block; padding-top: 12px; line-height: 1; color: #848ee7; font-size: 14px; transition: 300ms; -moz-transition: 300ms; -webkit-transition: 300ms; }
.wgs-href a:hover span { color: #5c5ddd; }

.screen-coll-box { padding: 0 8%; padding-top: 33px; }

.coll-item { float: left; width: 24.5%; margin-right: 11.9%; }
.coll-item:nth-child(4n-1) { margin-right: 0; }
.coll-item .ci-tit { font-size: 26px; line-height: 72px; padding-left: 16px; }
.coll-item .ci-img .ciimg-asize { width: 0; height: 0; position: relative; padding-left: 100%; padding-top: 59.5%; }
.coll-item .ci-img a { position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 100%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; overflow: hidden; }
.coll-item .ci-img a:hover img { left: -4%; top: -4%; width: 108%; height: 108%; }
.coll-item .ci-img img { width: 100%; height: 100%; object-fit: cover; display: inline-block; vertical-align: top; position: relative; left: 0; top: 0; -moz-transition: 400ms; -webkit-transition: 400ms; transition: 400ms; }
.coll-item .ci-list { padding-top: 26px; height: 128px; overflow: hidden; }
.coll-item .ci-list li { height: 43px; line-height: 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 18px; }
.coll-item .ci-list li:after { content: ''; display: block; height: 0; margin-left: 15px; margin-right: 14px; border-bottom: 1px solid #cbcbcb; }
.coll-item .ci-list li a { color: #979797; }
.coll-item .ci-list li a:hover { -moz-transition: 300ms; -webkit-transition: 300ms; transition: 300ms; color: #333333; text-decoration: underline; }
.coll-item .ci-list li:first-child a { color: #333333; }
.coll-item .ci-list li:last-child:after { display: none; }
.coll-item .ci-more { text-align: right; padding-right: 14px; padding-top: 20px; padding-bottom: 72px; }
.coll-item .ci-more a { padding: 5px 0; }
.coll-item .ci-more a:hover i { background: #4c4eda; }
.coll-item .ci-more i { display: inline-block; vertical-align: top; width: 6px; height: 6px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #333; margin-left: 6px; -moz-transition: 300ms; -webkit-transition: 300ms; transition: 300ms; }

.coll-line { clear: both; display: block; margin-left: 3.5%; margin-right: 8%; border-top: 1px solid #979797; height: 0; margin-bottom: 89px; }

.suspension-bar { position: fixed; right: 92px; top: 50%; z-index: 14; opacity: 0; -moz-transition: 400ms; -webkit-transition: 400ms; transition: 400ms; }
.suspension-bar a { position: absolute; }
.suspension-bar.show { opacity: 1; }

.onlineactivity { top: -174px; right: -72px; width: 144px; height: 144px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 transparent; -moz-transition: 500ms; -webkit-transition: 500ms; transition: 500ms; }
.onlineactivity:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

.onlineshop { top: 30px; right: -45px; width: 90px; height: 73px; background: #6383e3; background: -webkit-linear-gradient(top left, #6383e3, #4b55d7); background: -o-linear-gradient(top left, #6383e3, #4b55d7); background: -moz-linear-gradient(top left, #6383e3, #4b55d7); background: linear-gradient(top left, #6383e3, #4b55d7); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; box-shadow: 0 0 10px #8453ef; text-align: center; color: #ffffff; letter-spacing: 4px; font-size: 20px; line-height: 28px; padding-top: 17px; overflow: hidden; position: relative; -moz-transition: 500ms; -webkit-transition: 500ms; transition: 500ms; }
.onlineshop span { position: relative; z-index: 5; }
.onlineshop:after { content: ''; display: block; position: absolute; left: -25%; top: 0; width: 150%; height: 150%; z-index: 4; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #4b55d7; opacity: 0; -moz-transition: 500ms; -webkit-transition: 500ms; transition: 500ms; }
.onlineshop:hover { color: #ffffff; box-shadow: 0 0 3px #8453ef; }
.onlineshop:hover:after { opacity: 1; }

.top-lky-ban .swiper-button-next, .top-lky-ban .swiper-button-prev{
  bottom: 42px;
}

.card-box .c-card li a { display: block; color: #ffffff; }
.card-box .c-card li a:hover div .ico-img { transform: scale(1); -webkit-transform: scale(1); animation: anlargeSmall 500ms linear infinite alternate; -webkit-animation: anlargeSmall 500ms linear infinite alternate; }

@-webkit-keyframes anlargeSmall {
    from { -webkit-transform: scale(0.95); }
    to { -webkit-transform: scale(1.05); }
}
@keyframes anlargeSmall {
    from { transform: scale(0.95); }
    to { transform: scale(1.05); }
}