html,body{ width: 100%; height: 100%; } body{ font-family: "微软雅黑","宋体", sans-serif; font-size: 14px; } a:hover,a:focus { text-decoration: none; } /*头部开始*/ .center-box{ width: 1170px; margin: 0 auto; } .head-center{ width: 1170px; } .head-center>ul>li>a{ color: #000; } .head-center>ul>li{ height: 45px; line-height: 45px; padding: 0 15px; border-left:1px solid #e9e9e9; } .head-center>ul>.head-nav-list1,.head-nav-list2{ width: 213px; text-align: center; vertical-align: middle; } .head-center>ul>li>a>img{ vertical-align: middle; margin-right: 5px; } .head-center>ul>.head-nav-list4>a>img{ margin-right: 15px; } .head-center>ul>.head-nav-list3{ width: 455px; text-align: center; padding-left: 0px; } #recruit{ display: inline-block; color: #fff; background-color: #fc0909; border-radius: 10px; min-width: 20px; height: 20px; line-height: 20px; } .head-nav-list4{ border-right: 1px solid #e9e9e9; } .head-center>ul>.head-nav-list4{ padding: 0 20px; text-align: center; } .head-center>ul>.head-nav-list4>a>img{ border-radius: 6px; } .head-nav-line{ height: 1px; background-color: #e9e9e9; } /*头部结束*/ /*主要导航开始*/ .main-nav-box{ margin-top: 16px; margin-bottom: 16px; vertical-align: middle; } .manage-time{ color: #000; display: inline-block; font-size: 10px; } .main-nav-l{ width: 33%; } .main-nav-l>a{ margin-right: 10px; } /*右边部分 主要导航栏*/ .main-nav-r{ padding:0 15px; } .main-nav-r>ul>li{ float: left; position: relative; margin-left: 8px; height: 50px; } .main-nav-r>ul>li>a{ color: #777; display: inline-block; height: 50px; line-height: 50px; padding: 0 18px; text-align: center; } .main-nav-r>ul>li>.active{ color: #fff; background-color: #f96868; } .main-nav-r>ul>li>.active:hover{ color: #fff; } .main-nav-r>ul>li>a>span{ display: inline-block; height: 0; width: 0; border-top:4px solid; border-bottom: 4px solid transparent; border-right: 4px solid transparent; border-left: 4px solid transparent; } .main-nav-r>ul>li>a:hover{ color: #fff; background-color: #f96868; } /********************走进胖东来*************************/ /*把头部导航栏的下列表的li 和a的样式设置相同*/ .indl-list>ul>li,.culture>li, .manage>li,.service-list>li, .video-list>li,.share>li,.system>li{ margin: 7px 0; } /*设置列表的分割线样式*/ .division-line{ height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } /*设置列表a的样式*/ .indl-list>ul>li>a,.culture>li>a, .manage>li>a,.service-list>li>a, .video-list>li>a,.share>li>a,.system>li>a{ padding-left: 20px; color: #262626; display: inline-block; height: 26px; line-height: 26px; } /*设置li hover的样式*/ .indl-list>ul>li:hover,.culture>li:hover, .manage>li:hover,.service-list>li:hover, .video-list>li:hover,.share>li:hover,.system>li:hover{ background-color: #e8e8e8; } /*走进胖东来*/ /*对走进胖东来hover时,出现下拉列表*/ .main-nav-r>ul>.indl:hover .indl-list{ display: block; } .indl-list{ position: absolute; top: 50px; left: 0; z-index: 100; min-width: 160px; background-color: #fff; border: 1px solid rgba(0,0,0,.15); display: none; } /*主导航栏文化内容*/ /*对文化hover时,可以出现下拉的列表*/ .nav-culture:hover .culture{ display: block; } .culture{ position: absolute; z-index: 100; top: 50px; left: 0; min-width: 160px; background-color: #fff; border: 1px solid rgba(0,0,0,.15); display: none; } /*主导航栏管理内容*/ /*对管理hover时,可以出现下拉的列表*/ .nav-manage:hover .manage{ display: block; } .manage{ position: absolute; z-index: 100; top: 50px; left: 0; min-width: 190px; background-color: #fff; border: 1px solid rgba(0,0,0,.15); display: none; } /*主导航栏服务内容*/ /*对服务hover时,可以出现下拉的列表*/ .nav-service:hover .service-list{ display: block; } .service-list{ position: absolute; z-index: 100; top: 50px; left: 0; min-width: 180px; background-color: #fff; border: 1px solid rgba(0,0,0,.15); display: none; } /*主导航栏视频-分享-系统内容*/ /*对视频-分享-系统hover时,可以出现下拉的列表*/ .nav-video:hover .video-list, .nav-share:hover .share, .nav-system:hover .system { display: block; } .video-list,.share,.system{ position: absolute; z-index: 100; top: 50px; left: 0; min-width: 160px; background-color: #fff; border: 1px solid rgba(0,0,0,.15); display: none; } /********************走进胖东来结束*************************/ /*主要大图*/ .main-pic{ position: relative; padding: 0 70px; } .main-pic>img{ width: 100%; } .main-pic-note{ position: absolute; left: 22%; top: 40%; color: #fff; } .main-pic-note a{ color: #fff; } .main-pic-note>p:nth-child(1){ font-size: 30px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } .main-pic-note>p:nth-child(1)>a{ display: inline-block; width: 24px; height: 24px; background: url(../img/icons_1_24.png) 0 -1612px; margin-left: 15px; } /*主要大图结束*/ /*搜索部分*/ .search{ background-color: #64b3ee; padding: 40px 35px 41px 39px; } .search-form{ text-align: center; } .search-form>input{ width: 358px; padding: 6px 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; } .search-form>button{ padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; margin-left: -8px; text-shadow: 0 1px 0 #fff; border-color: #ccc; border: 1px solid transparent; cursor: pointer; } .search-form>button:hover{ background-color: #ccc; } /*搜索部分结束*/ /* 营业时间总览表*/ .main-table{ margin-top: 40px; line-height: 34px; font-size: 16px; } .main-table-img>img{ margin-bottom: 36px; margin-left: auto; margin-right: auto; display:table-cell; } .table-bordered>thead>tr>td{ font-weight: bold; } .table-bordered tr td{ text-align: center; } /*邮箱开始*/ .mail{ background-color: #f0f0f0; margin: 70px 0px 0px 0px; padding: 27px 0px 20px 0px; text-align: center; font-size: 16px; color: #494949; } .address{ border: 1px solid rgba(195, 195, 195, 1); margin: 24px 0px 0px 0px; width: 34%; margin-left: auto; margin-right: auto; padding: 12px 0px 14px 0px; font-size: 21px; } .mail-con>p:last-child{ margin: 10px 0; } .footer-top{ background-color: #71bbf0; color: #fff; text-align: center; padding: 30px 0px 36px 0px; line-height: 51px; font-size: 20px; } .footer-top button{ padding: 9px 30px; font-size: 17px; border-radius: 4px; cursor: pointer; vertical-align: middle; background-color: #e0e0e0; border: 1px solid silver; } .footer-bottom{ background-color: #5098cb; line-height: 59px; text-align: center; color: rgba(255, 255, 255, 0.89); padding: 30px 0; } .footer-bottom a{ color: #fff; } .footer-bottom p{ height: 30px; }