/* 页头分为三部分 */

/* 顶端导航条 */

.site-head{

height: 150px;

min-width:1152px;

}

.site-head .topbar{

height: 32px;

background-color: #2A2A2A ;

color: white;

line-height: 32px;

}

.site-head .topbar a{

color:white;

font-size: 12px;

}

.site-head .topbar nav{

float: left;

}

.site-head .topbar nav>ul>li{

float:left;

margin-right: 18px;

}

.site-head .topbar nav>ul>li.menu{

padding-right:14px ;

position: relative;

}

/* 制作菜单栏 */

.site-head .topbar nav>ul>li.menu .mu{

position: absolute;

top: 30px;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);

z-index: 999;

display:none;

font-size: 12px;

padding-top:3px;

padding-bottom: 18px;

padding-left: 8px;

}

.site-head .topbar nav>ul>li.menu .mu .menu-list li{

height: 18px;color:black;line-height: 18px;

}

.site-head .topbar nav>ul>li.menu .mu .menu-list li a{

color:black;

}

.site-head .topbar nav>ul>li.menu .shequ{

width: 121px;

}

.site-head .topbar nav>ul>li.menu .shangcheng{

width: 76px;

}

.site-head .topbar nav>ul>li.menu .jiudian{

width:64px;

}

.site-head .topbar nav>ul>li.menu:hover .mu{

display:block;

}

.site-head .topbar nav>ul>li.menu .arrow{

position: absolute;

right: 0;

width: 10px;

height: 10px;

top:50%;

margin-top: -5px;

transition: transform 0.3s linear 0s;

}

.site-head .topbar nav>ul>li.menu .arrow b{

position: absolute;

width: 8px;

height: 8px;

left:2px;

background-color: white;

transform: rotate(45deg);

}

.site-head .topbar nav>ul>li.menu .arrow i{

position: absolute;

width: 8px;

height: 8px;

bottom: 3px;

left:2px;

background-color:#2A2A27 ;

transform: rotate(45deg);

}

.site-head .topbar nav>ul>li.menu:hover .arrow{

transform:rotate(180deg);

}

/* 字体图标 */

.site-head .topbar .nav-r{

float: right;

width: 240px;height: 20px;

}

.site-head .topbar .nav-r a{

display: block;

width: 20px;

float: left;

line-height:20px ;

font-size:20px;

margin:8px;

}

.site-head .topbar .nav-r a:nth-child(2){

width: 1px;

}

.site-head .topbar .nav-r a:nth-last-child(1),.site-head .topbar .nav-r a:nth-last-child(2){

font-size:12px;

width: 24px;

}

.site-head .topbar .nav-r a:nth-last-child(1){

margin-right: 0px;

}

/* 主导航条 */

.site-head .main-nav{

height: 40px;

background-color: #20BD9A;

}

.site-head .main-nav .center-wrap>ul{

float:left;

height: 40px;

width: 1152px;

}

.site-head .main-nav .center-wrap ul li{

float:left;

margin-right: 18px;

position: relative;

}

.site-head .main-nav ul li.menu{

padding-right:16px;

}

.site-head .main-nav ul li a{

line-height: 40px;

font-size: 16px;

}

.site-head .main-nav ul li.menu::after {

content: '';

position: absolute;

right: 0;

width: 0;

height: 0;

border: 8px solid transparent;

border-top: 8px solid white;

top: 50%;

margin-top:-4px;

border-bottom: none;

transition:transform .3s linear 0s;

}

.site-head .main-nav ul li.menu:hover::after{

transform: rotate(180deg);

}

/* 主导航的菜单栏 */

.site-head .main-nav .center-wrap ul .menu .menu-list{

position: absolute;

top: 30px;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);

z-index: 999;

display:none;

font-size: 12px;

padding-top:3px;

padding-bottom: 18px;

padding-left: 8px;

}

.site-head .main-nav .center-wrap ul .menu .menu-list dd{

font-family: PingFangSC-Semibold;

font-size: 14px;

color: #1C1F21;

text-align: justify;

line-height: 22px;

}

.site-head .main-nav .center-wrap ul .menu .menu-list a{

height: 18px;color:black;line-height: 18px;font-size: 12px;

margin-right: 4px;

}

.site-head .main-nav .center-wrap ul .menu .menu-list a:hover {

color:rgb(48, 221, 100) ;

}

.site-head .main-nav .center-wrap ul .menu .jipiao{

width: 160px;

}

.site-head .main-nav .center-wrap ul .menu .gentuan{

width: 106px;

}

.site-head .main-nav .center-wrap ul .menu .dangdi{

width: 172px;

}

.site-head .main-nav .center-wrap ul .menu .shendu{

width: 118px;

}

.site-head .main-nav .center-wrap ul .menu:hover .menu-list{

display:block;

}

/* logo */

.site-head .logo{

height:36px;padding: 21px 0;

padding: 21px 0;

}

.site-head .logo h1{

height:36px;

float: left;

font-size: 24px;

color:#20BD9A;

font-weight: bold;

line-height: 36px;

margin-right: 21px;

}

.site-head .logo .btn{

width: 405px;height: 30px;

float: left;

top: 3px;

}

.site-head .logo .btn input{

width: 373px;

height: 30px;

border: 1px solid #20BD9A;

/* 四个角分别设置圆角：左上 右上 右下 左下 */

border-radius:4px 0 0 4px;

/* 取消默认的外线（外线是文本框默认的东西 ） */

outline: none;

float: left;

}

.site-head .logo .btn .serch{

float:left;

width: 30px;

height: 32px;

background-color: #20BD9A;

position: relative;

text-align: center;

line-height: 32px;

}

.site-head .logo .btn .serch img{

width: 20px;

height: 20px;

background-color: #20BD9A;

}

/* banner部分 */

.banner{

position: relative;

}

.banner img{

width: 100%;

min-width:1152px;

}

.banner .center-wrap {

position: absolute;

top:0px;

width: 1152px;

left:50%;

margin-left: -576px;

height: 100%;

vertical-align: middle;

}

/* bannner-nav 左边的banner */

.banner .center-wrap .banner-nav{

height: 100%;

}

.banner .center-wrap .banner-nav ul{

height: 100%;

}

.banner .banner-nav ul li{

height: 16.66%;

width: 296px;

background-color:rgba(0,0,0,.5);

border-bottom: 1px solid #9e9e9e;

/* 当高度是由百分数写的，盒子又有边框时，加上box-sizing:border-box,让height就是盒子的总高度 */

box-sizing:border-box;

}

.banner .banner-nav ul li:last-child{

border: none;

}

.banner .center-wrap .left-btn{

position: absolute;

left: -38px;

top:50%;margin-top: -22px;

background-color: #000;

width: 28px;height: 44px;

background: url(../images/left.png) no-repeat center center;

}

.banner .center-wrap .right-btn{

position: absolute;

right: -38px;

top:50%;margin-top: -22px;

width: 28px;height: 44px;

background: url(../images/right.png) no-repeat center center;

}

.banner .center-wrap .left-btn:hover,.banner .center-wrap .right-btn:hover{

/* 被触碰时，透明度变为0.7 */

opacity: .7;

}

.banner .center-wrap .banner-nav>ul>li{

position: relative;

}

.banner .center-wrap .banner-nav>ul>li dl{

position: absolute;

height: 48px;

color:white;

top:50%;

margin-top: -24px;

font-family: PingFangSC-Regular;

color: #FFFFFF;

text-align: justify;

left: 42px;

}

.banner .center-wrap .banner-nav>ul>li>dl>dd{

font-size: 18px;

line-height: 26px;

}

.banner .center-wrap .banner-nav>ul>li>dl>dt{

font-size: 14px;

line-height: 22px;

}

.banner .center-wrap .banner-nav>ul>li::before{

content:'';

position: absolute;

width: 24px;height: 24px;

top:50%;

margin-top: -12px;

left:10px;

}

.banner .center-wrap .banner-nav>ul>li.cfd::before{

background: url(../images/banner01.png);

}

.banner .center-wrap .banner-nav>ul>li.gat::before{

background: url(../images/banner02.png);

}

.banner .center-wrap .banner-nav>ul>li.rbhg::before{

background: url(../images/banner03.png);

}

.banner .center-wrap .banner-nav>ul>li.dny::before{

background: url(../images/banner04.png);

}

.banner .center-wrap .banner-nav>ul>li.ozmz::before{

background: url(../images/banner05.png);

}

.banner .center-wrap .banner-nav>ul>li.zdf::before{

background: url(../images/banner06.png);

}

/* banner-menu 右边的banner */

.banner .baner-menu{

}

.banner .baner-menu .menu{

width: 356px;

height: 100%;

background-color:rgba(0,0,0,.7);

position: absolute;

left: 296px;

top: 0;

color:white;

}

.banner .baner-menu .menu dd{

font-family: PingFangSC-Semibold;

font-size: 16px;

color: #FFFFFF;

text-align: justify;

line-height: 24px;

margin-bottom: 4px;

margin-left: 16px;

margin-top: 16px;

}

.banner .baner-menu .menu dt{

font-family: PingFangSC-Regular;

font-size: 14px;

color: #FFFFFF;

text-align: justify;

line-height: 22px;

margin-left: 16px;

}

/* 热门广告 */

.hot-ads {

margin:32px 0;

height: 110px;

}

.hot-ads ul li a img{float: left;

width: 264px;height: 110px;margin-right: 32px;

}

.hot-ads ul li:last-child img{

margin-right: 0px;

}

/* 新鲜甩尾 */

.fresh{

margin: 40px 0;

overflow: hidden;

}

.fresh .center-wrap h2{

width: 264px;height: 54px;

font-family: PingFangSC-Medium;

font-size: 36px;

color: #1C1F21;

text-align: justify;

line-height: 54px;

margin-bottom: 32px;

}

.fresh .center-wrap h2 span{

font-family: PingFangSC-Regular;

font-size: 12px;

color: #1C1F21;

text-align: justify;

line-height: 18px;

margin-left: 12px;

}

.fresh .center-wrap ul li {

width: 264px;height: 270px;

margin-right: 32px;

margin-bottom: 32px;

float: left;

background-color: rgba(239, 235, 255, 0.5);

}

.fresh .center-wrap ul li:hover{

box-shadow: 0 8px 16px 0 ;

}

.fresh .center-wrap ul li:nth-child(4n){

margin: 0;

}

.fresh .center-wrap  img{

width: 264px;

height: 184px;

}

.fresh .center-wrap dl dt a{

font-family: PingFangSC-Regular;

font-size: 14px;

color: #1C1F21;display: block;

line-height: 22px;

}

/* 机酒自由行 */

.free {

margin: 40px 0;

}

.free .center-wrap .free-title{

overflow: hidden;

}

.free .center-wrap h2{

width: 396px;height: 54px;

font-family: PingFangSC-Medium;

font-size: 36px;

color: #1C1F21;

text-align: justify;

line-height: 54px;

margin-bottom: 32px;

float: left;

}

.free .center-wrap h2 span{

font-family: PingFangSC-Regular;

font-size: 12px;

color: #1C1F21;

text-align: justify;

line-height: 18px;

margin-left: 12px;

}

.free .center-wrap .free-tool{

float:right;

}

.free .center-wrap .free-tool>li{

float: left;

margin-right: 16px;

}

.free .center-wrap .free-tool>li a{

font-family: PingFangSC-Regular;

font-size: 14px;

color: rgba(0,0,0,0.85);

text-align: center;

line-height: 22px;

}

.free .center-wrap .free-tool>li.cur a{

color:#20BD9A;

}

.free .center-wrap .free-tool>li.cur div{

width: 56px;height: 4px;background-color:#20BD9A;

}

.free .center-wrap .pic li{

float: left;margin-right: 32px;margin-bottom: 32px;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);

}

.free .center-wrap .pic li:hover{

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);

}

.free .center-wrap .pic li:nth-child(3),.free .center-wrap .pic li:nth-child(7){

margin-right: 0;

}

.free .center-wrap .big-pic{

width: 560px;height: 270px;

position: relative;

}

.free .center-wrap .big-pic img{

width: 560px;height: 270px;

}

.free .center-wrap .pic em{

position: absolute;

left: 0;

opacity: 0.6;

background: #1C1F21;

width: 74px;height: 40px;

font-family: PingFangSC-Regular;

font-size: 14px;

color: #FFFFFF;

text-align: center;

line-height: 40px;

}

.free .center-wrap .pic .big-pic em{

top: 40%;

}

.free .center-wrap .big-pic p{

position: absolute;

bottom: 0;

opacity: 0.6;

background: #1C1F21;

width: 508px;height: 43px;

font-family: PingFangSC-Regular;

font-size: 14px;

color: #FFFFFF;

line-height: 43px;

padding: 30px 26px;

}

.free .center-wrap .content-pic{

width: 264px;height: 270px;

position: relative;

}

.free .center-wrap .content-pic em{

bottom: 86px;

}

.free .center-wrap .content-pic img{

width: 264px;height: 184px;

}

.free .center-wrap .pic .content-pic .word-box{

font-family: PingFangSC-Regular;

font-size: 14px;

color: #1C1F21;

line-height: 22px;

width: 236px;height: 44px;padding: 20px 14px;

}

.free .center-wrap .more-pic{

width: 264px;height: 270px;

background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);

}

.free .center-wrap .more-pic .top-word{

width: 236px;height: 44px;

margin: 14px;margin-top: 46px;

}

.free .center-wrap .more-pic .top-word{

font-family: PingFangSC-Regular;

font-size: 14px;

color: #FFFFFF;

text-align: center;

line-height:22px;

}

.free .center-wrap .more-pic .bottom-word{

width: 236px;height: 22px;

margin: 14px;margin-bottom: 46px;

}

.free .center-wrap .more-pic .bottom-word p{

font-family: PingFangSC-Regular;

font-size: 14px;

color: #FFFFFF;

text-align: center;

line-height: 22px;

}

.free .center-wrap .more-pic .more-img{

width: 264px;

margin-left: 108px;

}

.free .center-wrap .more-pic a.iconfont{

font-family: feather;

font-size: 48px;

color: #FFFFFF;

margin: 0 auto;

line-height: 48px;

}

/* 当地玩乐 */

.local-play {

background: #F7F7F7;

height: 586px;

width: 100%;

margin-top: 40px;

padding-top: 40px;

}

.local-play .local-title h2{

width: 144px;height: 54px;

font-family: PingFangSC-Medium;

font-size: 36px;

color: #000000;

text-align: justify;

line-height: 54px;

float: left;

}

.local-play .local-title  p{

float: left;

margin-left: 12px;

position: relative;

top:28px;

width: 192px;height: 18px;

font-family: PingFangSC-Regular;

font-size: 12px;

color: #000000;

text-align: justify;

line-height: 18px;

}

.local-play .local-tool ul{

float: right;

}

.local-play .local-tool ul li{

float: left;

margin-right: 30px;

}

.local-play .local-tool ul li.cur{

color:#20BD9A ;

border-bottom: 4px solid #20BD9A;

}

.local-play .local-tool ul li:last-child{

margin: 0;

}

.local-play .local-pic ul li{

margin-top: 32px;

margin-bottom: 30px;

box-shadow: 0 4px 8px 0;

position: relative;

}

.local-play .local-pic ul li:hover{

box-shadow: 0 8px 16px 0;

}

.local-play .local-pic ul li.big-pic img{

width: 364px;height: 270px;

}

.local-play .local-pic ul li.content-pic img{

width: 120px;height: 120px;

}

.local-play .local-pic .big-pic {

width: 364px;height: 270px;

}

.local-play .local-pic .content-pic{

width: 364px;height: 120px;

}

.local-play .local-pic .nb{

margin-bottom: 0;

}

.local-play .local-pic ul{

float: left;

margin-right: 30px;

}

.local-play .local-pic ul:last-child{

margin: 0;

}

.local-play .local-pic .big-pic .word-box{

position: absolute;

width: 364px;height: 104px;

background: rgba(0,0,0,.5);

bottom: 0;

padding:17px 21px;

font-family: PingFangSC-Regular;

font-size: 14px;

line-height: 22px;

box-sizing: border-box;

}

.local-play .local-pic .big-pic .word-box div{

width: 317px;height: 22px;

}

.local-play .local-pic .big-pic .word-box  .left-p{

float: left;

}

.local-play .local-pic .big-pic .word-box  .right-p{

float:right;

}

.local-play .local-pic .big-pic .word-box .right-p span{

color:#36DFBA;

}

.local-play .local-pic .content-pic img{

float: left;

}

.local-play .local-pic .content-pic p{

float: left;

margin: 26px 18px;

width: 208px;height: 66px;

font-size: 14px;

color: #000000;

}

.local-play .local-pic .more-pic{

width: 364px;height: 270px;

background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);

}

.local-play .local-pic .more-pic .top-word{

width: 236px;height: 44px;

margin: 64px 46px;

font-size: 14px;

color: #FFFFFF;

text-align: center;

line-height: 22px;

}

.local-play .local-pic .more-pic .more-img{

width: 48px;height: 48px;

margin-left: 158px;

}

.local-play .local-pic .more-pic .iconfont{

font-size: 48px;

}

.local-play .local-pic .more-pic .bottom-word{

width: 310px;height: 22px;

font-size: 14px;

color: #FFFFFF;

text-align: center;

line-height: 22px;

margin: 46px 27px;

}

​