.HL_header { position: fixed; left: 0; top: 0; right: 0; background: transparent; //background: #000; transition: all .4s; transform: translateY(0); width: 100%; height: 75px; z-index: 99; &:hover{ // border-bottom: 2px solid hsla(0,0%,100%,.05); background: #fff; .nav_container{ .nav_bar{ ul{ li{ position: relative; >a{ color: #444; &.on{ &:after{ display: none; } } } &:hover{ .nav_son{ display: block; } } } } } } } &.fixed_nav{ background-color:#fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); .nav_container{ .nav_bar{ ul{ li{ >a{ color: #444; &.on{ &:after{ bottom: 0px; } } } } } } } } .nav_container { padding: 0 80px; width: 100%; box-sizing: border-box; .nav_logo { width: 227px; height: 65px; margin-top: 20px; float: left; // background: url(../img/LOGO.png) no-repeat; // background-size: 70%; overflow: hidden; img{ width: 70%; } } .nav_bar { float: right; ul { li { position: relative; display: inline-block; font-size: 15px; line-height: 75px; padding: 0px 25px; >a { display: block; font-family: "Microsoft YaHei","微软雅黑"; line-height: 75px; color: #fff; font-size: 14px; transition: all .3s; font-weight: 700; &:before { content:''; height:4px; background-color:#e1c68b; width:100%; position:absolute; left:0; bottom:0px; transform:scaleX(0); transition:.3s; z-index: 9; } &:hover:before { transform:scaleX(1); } &.on{ position: relative; &::after{ content: ''; position: absolute; z-index: 9; width:100%; height: 4px; left: 0px; right: 0px; bottom: 15px; background-color: #e1c68b; } } } .nav_son{ display:none; position: absolute; content: ''; top: 75px; left: 10px; width: 400px; height: 45px; line-height: 45px; font-size: 0px; overflow: hidden; z-index: -1; .lists{ display: inline-block; background-color: #212121; border-radius: 4px; span{ display: inline-block; vertical-align: top; a{ margin: 0 15px; line-height: 45px; font-size: 14px; color: rgba(255, 255, 255, 0.5); &:hover{ color: #967e40; } } } } } } } } } } .HL_banner { width: 100%; // background-color: #000; // max-width: 1920px; // margin: 0 auto; // background-image: url(../img/hero-1-bg-img.png); // padding: 200px 0 0px; // background-position: center center; // background-size: cover; // background-repeat: no-repeat; // background-size: cover; background-size:100%; .fullSlide { width: 100%; height: 530px; position: relative; .bd { margin: 0 auto; position: relative; z-index: 0; overflow: hidden; ul { width: 100% !important; li { width: 100% !important; height: 530px; overflow: hidden; text-align: center; background-position: top center; background-repeat: no-repeat; background-size: 100% 100%; // a { // display: block; // height: 410px; // } } } } .prev, .next { display: block; position: absolute; z-index: 1; top: 50%; margin-top: -30px; left: 5%; z-index: 1; width: 30px; height: 80px; // height: 86px; background: url(../img/slider-arrow.png) no-repeat center; background-size: 100%; cursor: pointer; filter: alpha(opacity=50); opacity: 0.5; display: none; } .next { left: auto; right: 5%; transform:rotate(180deg); -webkit-transform:rotate(180deg); } } } // ==== 公共======= .HL_wrap{ position: relative; width: 1200px; margin: 0 auto; } .title_cn{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 20px; font-weight: 400; margin-bottom: 8px; margin-top: 10px; } .title_en{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 40px; font-weight: 700; color: rgba(33, 33, 33, 0.1); } // 分页 .dux-page { font-size: 12px; text-align: center; margin-bottom: 20px; margin-top: 30px; } .dux-page a { background: #fff; margin: 0px 8px; padding: 5px 10px; border: 1px solid #ccc; color: #A0A0A0; } .dux-page .active-page { background: #c8a86b; color: #fff; margin: 0px 8px; padding: 5px 10px; border: 1px solid #c8a86b; } // ==== 公共======= .HL_project_wrap{ background-color: #f2f8fc; padding: 50px 0px; overflow:hidden; clear:both; &::after{ content: ''; clear: both; } .projectTab{ margin-top: 25px; background-color: #212121; border-radius: 4px 4px 0px 0px; li{ position: relative; height: 80px; padding:0 20px; display:flex; overflow: hidden; &::before{ content: ''; width: auto; height: 1px; position: absolute; bottom: 0px; left: 0px; right: 0px; background: url(../img/pro_line.jpg) no-repeat; background-size: 100%; } &:last-child{ &::before{ background: none; } } &.on,&:hover{ background-color: #ebdfc4; box-shadow: 0 0 10px rgba(235, 223, 196,0.5); em{ color:#653f2c; } .title{ h2{ color:#653f2c; } span{ color:#653f2c; } } } a{ display: flex; em{ display: inline-block; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 50px; font-style:normal; line-height:1.5; color:rgba(235, 223, 196,0.5); } .title{ padding: 12px 0px 0px 20px; flex: 1; display: inline-block; h2{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 16px; font-weight: 700; color:rgba(235, 223, 196,0.5); margin-bottom: 5px; } span{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 12px; line-height: 18px; display: inline-block; color:rgba(235, 223, 196,0.5); overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:2; //显示的行 } } } } } .more{ background-color: #ebdfc4; line-height: 60px; height: 60px; text-align: center; font-size: 16px; border-radius:0px 0px 4px 4px; em{ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-style:normal; font-size: 18px; color: #212121; padding:0px 10px; line-height: 10px; display: inline-block; } } .hd{ width: 26%; float: left; } .bd{ width: 74%; float: right; // background:rgba(235, 223, 196,0.5); padding-left: 5%; box-sizing: border-box; li{ position: relative; width:100%; height:490px; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 4px; img{ width: 100%; min-height: 490px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } } .HL_News_wrap{ margin:40px 0 50px 0; .title_wrap{ margin-bottom: 25px; display: flex; .wrap_l{ flex: 1; } .wrap_r{ width: 100px; position: relative; text-align: right; span{ position: absolute; right: 0px; bottom: 0px; font-size: 14px; font-weight: 400; } } } // .list_wrap{ // height: 360px; // .swiper-slide{ // margin-right: 30px; // border: 1px solid #e1e1e1; // padding: 2px; // border-radius: 4px; // &:hover{ // background-color: #ebdfc4; // box-shadow: 0 0 10px rgba(235, 223, 196,0.6); // } // .img_box{ // width: 100%; // height: 200px; // overflow: hidden; // border-radius: 4px 4px 0 0; // img{ // width: 100%; // height: 200px; // } // } // .text_box{ // padding:5px 15px; // .title{ // font-size: 15px; // font-family: "Microsoft YaHei","微软雅黑"; // margin: 14px 0px; // color: #212121; // font-weight: 700; // } // p{ // font-size: 13px; // font-family: "Microsoft YaHei","微软雅黑"; // margin: 14px 0px; // color: rgba(33, 33, 33, 0.6); // overflow: hidden; // text-overflow: ellipsis; // display:-webkit-box; //作为弹性伸缩盒子模型显示。 // -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 // -webkit-line-clamp:2; //显示的行 // } // .time{ // display: flex; // font-size: 12px; // span{ // flex: 1; // } // em{ // font-style: normal; // } // } // } // } // } .swiper-container-box{ width: 100%; overflow: hidden; .swiper-slide{ margin:0 10px; border: 1px solid #e1e1e1; padding: 2px; border-radius: 4px; overflow: hidden; height: 360px; &:hover{ // background-color: #ebdfc4; box-shadow: 0 0 10px rgba(235, 223, 196,0.6); .img_box{ img{ // transform: scale(1.1); } } } .img_box{ position: relative; width: 100%; height: 200px; overflow: hidden; border-radius: 4px 4px 0 0; img{ min-width: 100%; height: 200px; transition: all 500ms ease 0s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .text_box{ padding:5px 15px; .title{ font-size: 14px; font-family: "Microsoft YaHei","微软雅黑"; margin: 14px 0px; color: #212121; font-weight: 700; } p{ font-size: 12px; font-family: "Microsoft YaHei","微软雅黑"; margin: 14px 0px; color: rgba(33, 33, 33, 0.6); overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:2; //显示的行 } .time{ display: flex; font-size: 12px; span{ flex: 1; } em{ font-style: normal; } } } } } } .HL_footer_wrap{ border-top: 2px solid #e1c68b; height: 345px; background: url(../img/footer_bg.png) no-repeat top center #000; .inlineBlock{ vertical-align: top; display: inline-block; } .footer_msg{ .msg_log{ margin-top: 50px; margin-bottom: 40px; width: 200px; height: 50px; img{ width: 100%; } } ul{ li{ line-height: 30px; margin-bottom: 30px; color: rgba(255, 255, 255, 0.75); a{ color: rgba(255, 255, 255, 0.85); } em{ display: inline-block; margin-right: 30px; vertical-align:middle; } .address{ width: 16px; height: 23px; background: url(../img/定位.png); } .TEL{ width: 19px; height: 19px; background: url(../img/电话.png); } .email{ width: 21px; height: 14px; background: url(../img/邮箱.png); } } } } .footer_nav{ position: relative; margin:0 70px; &::before{ position: absolute; left: -35px; content: ''; width: 4px; height: 330px; background: url(../img/footer_line.png) no-repeat; } &::after{ position: absolute; content: ''; right: -35px; width: 4px; height: 330px; background: url(../img/footer_line.png) no-repeat; } dl{ display: inline-block; margin:80px 30px 0px 30px; vertical-align: top; dt{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 18px; font-weight: 500; margin-bottom: 30px; color: rgba(255, 255, 255, 1); } dd{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 14px; color: rgba(255, 255, 255, 1); margin-bottom: 15px; text-align: left; a{ color: rgba(255, 255, 255,1); } } } } .footer_QRcode{ float:right; .QRcode_wrap{ margin-top: 85px; width: 130px; img{ width: 100%; } span{ display: block; font-family: "Microsoft YaHei","微软雅黑"; font-size: 14px; color: #fff; text-align: center; margin-top: 20px; } } } .footer_text{ height: 50px; line-height: 50px; background-color: #ebdfc4; font-size: 14px; color: #653f2c; text-align:center ; } } .HL_head_nav{ height: 70px; line-height: 70px; border-bottom: 2px solid #e3e3e3; margin-bottom: 100px; .navigation{ li{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 14px; display: inline-block; a{ color: #212121; } &::after{ content: ">"; } &:last-child{ &::after{ display: none; } } } } .nav{ position: relative; &:hover{ li.on::after{ display: none; } } li{ position: relative; display: inline-block; font-family: "Microsoft YaHei","微软雅黑"; font-size: 14px; margin: 0 15px; a{ color: #212121; &:before { content:''; height:4px; background-color:#e1c68b; width:100%; position:absolute; left:0; bottom:-2px; transform:scaleX(0); transition:.3s; } &:hover:before { transform:scaleX(1); } } &.on{ position: relative; &::after{ content: ''; position: absolute; z-index: 9; width:100%; height: 4px; left: 0px; right: 0px; bottom: -2px; background-color: #e1c68b; } } } // .line{ // position: absolute; // z-index: 9; // width: 50px; // height: 4px; // bottom: -2px; // margin: 0 15px; // background-color: #e1c68b; // } } } .HL_head_banner{ height: 340px; background-repeat: no-repeat; background-position:center center; .HL_wrap{ height: 100%; } .banner_title{ position:absolute; left: 0px; bottom: 5px; z-index: 9; padding-left: 40px; h2{ font-size: 24px; color: #fff; margin-bottom: 2px; } span{ font-size: 12px; color: #fff; } &::before{ position: absolute; top: -10px; left: 0px; content: ''; width: 20px; height: 80px; background-color: #e1c68b; } } } .HL_title{ text-align: center; margin-bottom: 50px; h2{ font-size: 36px; font-family: "Microsoft YaHei","微软雅黑"; margin-bottom: 40px; color: #514f4f; font-weight: 400; font-style: initial; em{ font-style: normal; color:#e1c68b; } } span{ position: relative; font-size: 30px; color: #514f4f; &::before{ content: ''; position: absolute; top: 24px; left: -150px; width: 120px; border-bottom: 1px solid rgba(0, 0, 0, 0.75); } &::after{ content: ''; position: absolute; top: 24px; right: -150px; width: 120px; border-bottom: 1px solid rgba(0, 0, 0, 0.75); } } } .content_wrap{ font-size: 0px; position: relative; &::after{ content: ''; display: block; clear: both; visibility: hidden; } .content_l{ position: absolute; width: 25%; margin-right: 5%; background-color: #ebdfc4; border-radius: 4px 4px 0 0; height: 100%; } .content_r{ float: right; width: 70%; } } .fl{ float: left; } .fr{ float:right; } // ========================= 关于我们 ======================================= .HL_about_wrap{ .content_l{ padding-top: 50px; padding-left: 2.5%; box-sizing: border-box; h3{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 18px; color: #514f4f; font-weight: 700; margin-bottom: 20px; } span{ display: inline-block; font-family: "Microsoft YaHei","微软雅黑"; font-size: 27px; color: #514f4f; margin-bottom: 10px; } p{ font-family: "Microsoft YaHei","微软雅黑"; font-size: 28px; font-weight: 700; color: #514f4f; } } .content_r{ margin: 40px 0px 100px 0px; p{ font-size: 14px; margin-bottom: 15px; text-indent: 2em; } } } // ============ 发展历程 ================= .history_wrap{ background: url(../img/map_bg.png) no-repeat center top; } .history_conter{ width: 100%; padding: 50px 0; ul{ position: relative; &:after { content: ""; clear:both; display: block; } li{ // clear: both; // padding: 20px 0; // overflow: hidden; &:after { content: ""; clear:both; display: block; } &:nth-child(2n-1){ .case{ clear: both; float: left; width: 50%; border-right: 2px solid #e1c68b; padding-right: 50px; padding-bottom: 20px; padding-top: 20px; box-sizing: border-box; margin-left: 2px; position: relative; &::before{ content: ''; position: absolute; top: -7px; right: -8px; width: 15px; height: 15px; background-color: #e1c68b; border-radius: 50%; } h2{ text-align: right; } p{ text-align: right; } } } &:nth-child(2n){ .case{ position: relative; clear: both; float: right; width: 50%; padding-left: 50px; border-left: 2px solid #967e40; box-sizing: border-box; padding-bottom: 20px; padding-top: 20px; &::before{ content: ''; position: absolute; top: -12px; left: -12.5px; width: 25px; height: 25px; background-color: #967e40; border-radius: 50%; } &::after{ content: ''; position: absolute; top: -7px; left: -8px; width: 15px; height: 15px; background-color: #e1c68b; border-radius: 50%; } h2{ text-align: left; } } } h2{ font-size: 30px; color: #514f4f; margin-bottom: 10px; } p{ font-size: 14px; color: #514f4f; } } } } // ============== 产品服务 =================== .project_wrap{ .Product_item{ width: 100%; ul{ font-size: 0px; margin-bottom: 200px; li{ position: relative; width: 23%; display: inline-block; // margin-bottom: 2%; margin: 0 1% 1%; overflow: hidden; // >img{ // width: 100%; // } // &:nth-child(4n-1){ // margin: 0 2% 2%; // } &::after{ content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.30); z-index: 2; } &:hover{ cursor: pointer; &::after{ display: none; } .item_title{ bottom: 0px; } } .item_img{ position: relative; width: 100%; height: 480px; overflow: hidden; img{ min-width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .item_title{ position: absolute; width: 100%; height: 20%; bottom: -20%; background: #ebdfc4; text-align: center; z-index: 3; transition:all .2s ease-in-out ; h2{ cursor: pointer; margin-top: 6%; display: inline-block; font-size: 24px; padding: 10px 20px; background-color: #f5efe2; border-radius: 45px; } span{ display: block; margin-top: 2%; } } } } } } // ============== 地产项目 =================== .project_item_wrap{ .Product_item{ position: relative; width: 1400px; margin: 0 auto; background: url(../img/project/project_item_bg.jpg); background-size: 100%; border-radius: 2px; margin-bottom: 100px; ul{ font-size: 0px; padding: 0 100px; li{ position: relative; width: 32%; display: inline-block; margin-top: 2%; padding: 15px; overflow: hidden; background-color: #fff; box-sizing: border-box; border-radius: 2px; // .img{ // width: 100%; // } &:nth-child(3n-1){ margin-left:2%; margin-right: 2%; } &::after{ content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.05); z-index: 2; } &:hover{ cursor: pointer; background-color: #ebdfc4; &::after{ display: none; } .item_title{ bottom: 0px; } } .item_img{ position: relative; width: 100%; height: 210px; overflow: hidden; img{ min-width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .item_title{ padding:15px; background-color: #fff; text-align: left; z-index: 3; transition:all .2s ease-in-out ; h2{ margin-top: 5px; display: inline-block; font-size: 18px; } span{ display: block; margin-top: 2%; } } } } .m-page{ position: absolute; left: 0px; right: 0px; width: 100%; bottom: -80px; .first-page,.last-page{ display: none; } } } } // =================== 项目详情 =============================== .project_details_wrap{ width: 100%; overflow: hidden; .details_introduce{ font-size: 0px; background:url(../img/project/project_bg.jpg) no-repeat #d9dee2; padding: 70px 0; border-radius: 4px; overflow: hidden; .introduce_l{ width: 30%; display: inline-block; text-align: center; position: relative; &::after{ content: ''; position: absolute; background: url(../img/project/project_line.png) no-repeat center center; background-size: 100%; width: 1px; height: 100%; top: 0px; right: 0px; } .introduce_logo{ display: inline-block; img{ max-width: 260px; max-height: 100px; } } .introduce_content{ em{ display: inline-block; width: 54px; height: 54px; margin-bottom: 8px; } .location{ margin-top: 40px; em{ background-image: url(../img/project/introduce_adress.png); } p{ font-size: 16px; color: #514f4f; } } .Tel{ margin-top: 20px; em{ background-image: url(../img/project/introduce_tel.png); } p{ font-family:Helvetica, sans-serif; font-size: 35px; color: #514f4f; } } } } .introduce_r{ width: 70%; display: inline-block; vertical-align: top; padding: 0 50px; box-sizing: border-box; overflow: auto; max-height: 424px; h2{ font-size: 20px; color: #552e20; margin-bottom: 30px; } p{ font-size: 14px; color: #514f4f; margin-bottom: 20px; } } } .details_item_wrap{ margin-top: 100px; display: inline-block; width: 100%; position: relative; background: #f8f8f8; .details_item_title{ font-size: 32px; color: #514f4f; text-align: center; margin: 100px 0 50px 0; } ul{ text-align: center; font-size: 0px; li{ position: relative; display: inline-block; vertical-align: top; text-align: center; padding: 50px 1.2%; &::after{ position: absolute; content: ''; top: 0px; left: 0px; right: 0px; width: 100%; height: 0px; border: 1px solid #000; } &:first-child{ &::after{ left: 50%; } &::before{ position: absolute; content: ''; top: 0px; left: 50%; width: 0px; height: 30px; border: 1px solid #000; } } &:last-child{ &::after{ left: auto; right: 50%; } &::before{ position: absolute; content: ''; top: 0px; left: 50%; width: 0px; height: 30px; border: 1px solid #000; } } .content{ display: flex; width: 100px; height: 100px; margin-bottom: 20px; background-color: #e1c68b; border:20px solid #ebdfc4; border-radius: 50%; align-items: center; justify-content: space-between; .txt{ flex: 1; } h2{ font-size: 15px; color: #514f4f; } span{ display: inline-block; font-size: 12px; padding-top: 3px; color: #514f4f; } } } } } .details_mating_wrap{ background: #f8f8f8; padding: 100px 0; .HL_wrap{ width: 1000px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; } .details_item_news_wrap{ display: flex; align-items: center; justify-content: space-between; } .mating_title{ display: inline-block; width: 20px; font-size: 20px; font-weight: 700; line-height:1.5; text-align: center; color: #514f4f; padding:30px 10px; border-radius: 45px; background-color: #ebdfc4; margin-right: 50px; } .mating_title2{ font-size: 20px; font-weight: 700; line-height:1.5; text-align: center; color: #514f4f; margin-bottom: 20px; } .mating_item{ display: inline-block; margin: 0 50px; li{ font-size: 14px; font-weight: 700; line-height:1.5; text-align: center; color: #514f4f; padding:10px 20px; border-radius: 45px; background-color: #ebdfc4; margin-bottom: 10px; } } .mating_line{ flex: 1; width: 100%; border-top:1px solid #000; } .mating_img{ max-width: 550px; margin-left: 50px; img{ width: 100%; } video{ width: 100%; } } } .details_img_wrap{ width: 1200px; position: relative; margin: 0 auto 30px auto; .prev,.next{ cursor: pointer; position: absolute; content: ''; top: 50%; margin-top: -25px; left: -70px; width: 50px; height: 50px; border-radius: 50%; background: url(../img/slider-arrow.png) no-repeat 20px center #e1c68b; background-size: 20%; z-index: 9; } .next{ left: auto; right: -70px; transform:rotate(180deg); -webkit-transform:rotate(180deg); } .swiper-container { height: 180px; } .swiper-slide { text-align: center; font-size: 18px; /* 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: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: 300ms; transform: scale(0.8); .img_wrap{ position: relative; width: 100%; height: 100%; overflow: hidden; border: 4px; box-shadow: 0 8px 20px #ddd; cursor: pointer; img{ width: 100%; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } .swiper-slide-active,.swiper-slide-duplicate-active{ transform: scale(1); border: 6px solid #e1c68b ; box-sizing: border-box; } } .details_title_wrap{ margin: 100px 0 50px 0; text-align: center; .icon{ display: inline-block; width: 41px; height: 48px; background-image: url(../img/project/project_title.png); } .text{ vertical-align: top; display: inline-block; margin-left: 15px; h2{ font-size: 22px; } p{ font-size: 10px; } } } .details_details{ padding-bottom: 50px; img{ max-width: 100%; } } .details_big_img_wrap{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9999; .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: rgba(0, 0, 0, 0.8); /* 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: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; max-width: 100%; max-height: 100%; object-fit: cover; } .bigImgBOX_del{ cursor: pointer; position: absolute; top: 5%; right: 5%; font-size: 20px; z-index: 999; color: #d2d2d2; } } } // ===================== 新闻中心 =========================== .news_list_wrap{ .news_hot_wrap{ width: 100%; font-size: 0; background-color: #e1e1e1; border-radius: 4px; overflow: hidden; .news_l{ display: inline-block; width: 40%; vertical-align: top; position: relative; height: 360px; overflow: hidden; .line1,.line2{ position: absolute; top:0; right: 0; width: 15px; height: 45%; background-color: #e1e1e1; z-index: 9px; &::after{ content: ''; position: absolute; left: 0; bottom: -15px; width: 0; height: 0; border-top: 15px solid #e1e1e1; bottom: 15px solid transparent;; border-right: 15px solid transparent; border-left: 15px solid transparent; } } .line2{ top:auto; bottom: 0; &::after{ top:-30px; bottom: auto; border-bottom: 15px solid #e1e1e1; border-top: 15px solid transparent; border-right: 15px solid transparent; border-left: 15px solid transparent; } } img{ width: 100%; min-height: 360px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .news_r{ display: inline-block; width: 60%; height: 100%; padding-top: 3%; padding-left: 2%; padding-right: 2%; vertical-align: top; box-sizing: border-box; .title{ font-size: 22px; font-weight: 500; } span{ display: inline-block; font-size: 14px; margin: 10px 0; color:rgba(0, 0, 0, 0.3) } p{ font-size: 15px; line-height: 2; min-height: 80px; } .more{ display: inline-block; font-size: 14px; border: 1px solid #666; padding: 8px 20px; margin-top: 20px; border-radius: 2px; font-weight: 700; color: #666; cursor: pointer; } } } } .news_list_list{ margin: 50px 0; .list_news{ display: flex; padding: 30px 0; border-bottom: 1px solid #d3d3d3; align-items: center; justify-content: space-between; vertical-align: top; .news_time{ text-align: center; margin-right: 5%; .time_D{ display: block; font-size: 44px; line-height: 1; color: #514f4f; margin-bottom: 20px; } .time_YM{ padding: 10px 10px; font-size: 20px; color: #9d9d9d; border-top: 1px solid #9d9d9d; } } .news_title{ vertical-align: top; flex: 1; h2{ font-size: 18px; font-weight: 700; color: #212121; margin-bottom: 20px; cursor: pointer; } p{ font-size: 14px; color: #514f4f; cursor: pointer; } span{ // margin-top: 20px; float: right; } } .news_img{ position: relative; vertical-align: top; margin-left: 5%; width: 280px; height: 150px; overflow: hidden; img{ border-radius: 4px; width: 100%; min-height: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } } // ================= 新闻中心详细 =============================== .news_content_wrap{ font-size: 0; .content_l{ display: inline-block; vertical-align: top; width: 72%; padding-right: 4%; box-sizing: border-box; .title{ span{ display: inline-block; font-size: 25px; color: #e1c68b; margin-bottom: 20px; font-weight: 700; } h2{ font-size: 28px; color: #212121; margin-bottom: 30px; line-height: 1.5; } } .content_txt{ font-size: 12px; img{ max-width:100%; } } } .content_r{ display: inline-block; vertical-align: top; width: 28%; } } .about_img{ img{ width: 100%; } } .about_msg_r{ background: url(../img/about/about_4.jpg) no-repeat; background-size: 100%; padding: 35px; box-sizing: border-box; border-radius: 2px; ul{ li{ display: flex; height: 40px; margin-bottom: 30px; em{ display: inline-block; vertical-align: top; width: 37px; height: 37px; margin-right: 25px; } span{ flex: 1; display: inline-block; font-size: 14px; line-height: 1.5; } .address{ background: url(../img/address.png); background-size: 100%; } .TEL{ background: url(../img/tel.png); background-size: 100%; } .email{ background: url(../img/email.png); background-size: 100%; } } } } .news_more_box{ margin:30px 0; .title{ font-size: 20px; color: #514f4f; text-align: center; margin-bottom: 20px; } li{ padding: 15px; background: #f8f8f8; border-radius: 4px; margin-bottom: 20px; h2{ cursor: pointer; font-size: 14px; color: #585858; font-weight: 700; margin-bottom: 5px; } p{ cursor: pointer; font-size: 10px; color: #514f4f; } } } .join_title{ position: relative; margin-top: 70px; text-align: center; font-size: 36px; color: #514f4f; padding-bottom: 30px; &::after{ position: absolute; content: ''; bottom: 0px; left: 50%; margin-left: -40px; width: 80px; border-bottom: 1px solid #808080; } } .search_join_wrap{ font-size: 0px; text-align: center; margin: 50px 0; input{ border: 1px solid #dcdcdc; border-right:none; width: 440px; height: 45px; line-height: 45px; padding: 0 20px; box-sizing: border-box; } button{ border: none; width: 110px; height: 45px; color: #fff; background-color: #e1c68b; } } .join_list_wrap{ width: 80%; margin: 0 auto; overflow: hidden; clear: both; min-height: 300px; margin-bottom: 50px; ul{ font-size: 0px; li{ width: 49%; display: inline-block; box-sizing:border-box; background-color: #ffffff; margin-bottom: 20px; &:nth-child(2n-1){ margin-right: 1%; } &:nth-child(2n){ margin-left: 1%; } .join_list_box{ display: flex; padding: 18px; } em{ display: inline-block; font-size: 8px; font-style: normal; background-color: #e1c68b; color: #fff; padding: 2px 6px; } .list_title{ padding: 0 20px; flex: 1; font-size: 20px; color: #353a42; } .list_post{ font-size: 14px; color: #353a42; } .list_wage{ min-width: 90px; font-size: 18px; color: #e1c68b; text-align: right; } } } } .h50{ height: 50px; } .rucruit_content_wrap{ font-size: 12px; padding:60px 30px; background-color: #fafafa; .title_wrap{ display: flex; em{ display: inline-block; font-size: 20px; font-style: normal; background-color: #e1c68b; color: #fff; padding: 2px 6px; } .title{ padding: 0 20px; flex: 1; font-size: 30px; color: #353a42; } .title_r{ font-size: 32px; color: #e1c68b; padding-left: 45px; font-weight: 700; } } .flex_wrap{ display: flex; margin: 20px 0; .require{ flex: 1; font-size: 16px; } .welfare{ font-size: 0px; li{ display: inline-block; background-color: #353a42; font-size: 14px; color: #fff; padding:2px 8px; margin: 0 2px; border-radius: 2px; } } } .job_description{ overflow: hidden; margin-top: 100px; margin-bottom: 45px; h2{ position: relative; font-size: 18px; color: #353a42; &::after{ position: absolute; content: ''; left: 100px; top: 50%; width: 100%; border-bottom: 1px solid #d5d5d5; } } } .job_description_conter{ h2{ margin: 20px 0; font-style: 16px; font-weight: 700; } p{ font-size: 14px; line-height: 2; } } } .contactus_wrap{ width: 100%; padding: 50px 0; position: relative; img{ width: 100%; } .contactus_cont{ position: absolute; top: 15%; left: 0px; z-index: 9; width: 100%; font-size: 0px; ul{ display: flex; } li{ flex: 1; text-align: center; vertical-align: top; padding: 5%; box-sizing: border-box; color: #353a42; font-size: 18px; line-height: 1.8; em{ display:block; width: 120px; height: 120px; margin: 5% auto; } .address{ background: url(../img/contactus/address.png) center center; } .TEL{ background: url(../img/contactus/TEL.png) center center; } .email{ background: url(../img/contactus/email.png) center center; } } } // height: 1100px; // background: url(../img/contactus/bg.jpg) no-repeat center center; } .news_list_PDF{ font-size: 0px; position: relative; .list_news{ padding: 15px 0; h2.PDF_title{ font-size: 14px; line-height: 40px; margin-bottom: 0px; } .PDF{ display: inline-block; vertical-align: top; width: 35px; height: 35px; font-size: 0px; background: url(../img/pdf-ic.png) center center; background-size: 100%; border-radius: 50%; margin:0 10px; } } .news_list_PDF_l{ display: inline-block; width: 72%; vertical-align: top; padding-right: 30px; box-sizing: border-box; } .news_list_PDF_r{ width: 28%; display: inline-block; vertical-align: top; } } .moblie_nav_bar{ display: none; position: fixed; left: 0; right: 0; bottom: 0; background: #000; border-top: 1px solid #c8a86b; z-index: 99; ul{ display: flex; li{ position: relative; line-height: 45px; height: 45px; flex: 1; text-align: center; a{ display: block; width: 100%; height: 100%; color: #fff; i{ float: left; } } span{ display: inline-block; height: 100%; color: #fff; i{ float: left; margin-right: 5px; &.icon-mulu{ margin-top: 1px; } } } .nav_bar_son{ display: none; width: 100%; background: #000; position: absolute; bottom: 55px; &:before { color: #000; border: 8px solid; border-radius: 3px; content: ""; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); -webkit-transform: translateX(-50%) rotate(45deg); bottom: -6px; } span{ display: block; padding: 0 5px; a{ border-bottom: 1px solid rgba(255, 255, 255, .2); } &:last-child{ a{ border-bottom: none; } } &.on{ a{ color: #c8a86b; } } } } } } } @media screen and (max-width: 1440px) { .HL_header{ min-width:1200px ; } .HL_banner{ .fullSlide{ height: 430px; .bd{ ul{ li{ height: 430px; } } } } } } @media screen and (max-width: 767px) { .HL_wrap{ width: 100%; // overflow: hidden; >p{ >img{ width: 100%; } } } .HL_header{ height: 45px; // display: none; .nav_container{ padding: 0px 15px; .nav_logo{ width: 200px; margin-top: 10px; // background:url(../img/footer_logo.png) no-repeat; // background-size: 50%; img{ width: 50%; } } .nav_bar{ display: none; } } &.HL_header.fixed_nav{ background: rgb(0, 0, 0); border-bottom: 2px solid rgb(200, 168, 107); } } .moblie_nav_bar{ display: block; } .HL_banner{ .fullSlide{ height: 180px; .bd ul li{ height: 180px; background-size: 150%; } .prev, .next { width: 30px; height: 30px; background-size: 50%; } } } .title_cn{ font-size: 16px; } .title_en{ font-size: 12px; } .HL_project_wrap{ padding: 0 15px; .projectTab{ margin-top: 10px; border-radius: 4px; overflow: hidden; } .hd{ width: 100%; box-sizing:border-box; ul{ display: flex; } li{ flex: 1; padding:0 10px; height: auto; &::before{ display: none; } a{ display: inline; em{ text-align: center; font-size: 14px; display: block; margin-bottom: 5px; } .title{ padding: 0; h2{ text-align: center; font-size: 14px; } span{ display: none; } } } } .more{ display: none; } } .bd{ width: 100%; padding: 15px 0; li{ height: 210px; img{ min-height:auto; } } } } .HL_News_wrap{ padding:0 15px; margin-top: 15px; .title_wrap{ margin-bottom: 10px; .wrap_r{ span{ bottom: 8px; } } } .list_wrap{ li{ width: 100%; } } .swiper-container-box{ .swiper-wrapper{ display: block; .swiper-slide{ margin: 0px 0px 20px 0px; box-sizing: border-box; } } } } .HL_footer_wrap{ display: none; .footer_msg{ padding: 0 15px; .msg_log{ margin: 20px auto 20px auto; } ul{ li{ margin-bottom: 8px; em{ margin-right: 10px; } } } } .footer_nav{ display: none; } .footer_QRcode{ display: none; } } //============= 公用部分 ================ .m_foote_wrap{ height: 45px; } .m_banner{ height: 100px !important; background-size: 160% !important; } .HL_head_banner{ height: 180px; background-size: 270%; .banner_title{ padding-left: 30px; &:before{ top: -5px; left: 15px; bottom: 5px; width: 8px; height: 60px; } h2{ font-size: 16px; margin-bottom: -3px; } span{ font-size: 9px; } } } .HL_head_nav{ height: 45px; line-height: 45px; margin-bottom: 0px; .navigation{ display: none; } .fr{ float: none; } .nav{ text-align: center; ul{ display: inline-block; } } } .HL_title{ margin: 30px 0; h2{ font-size: 25px; margin-bottom: 10px; } span{ font-size: 20px; &:before{ top: 15px; left: -75px; width: 50px; } &:after{ top: 15px; right: -75px;; width: 50px; } } } .project_item_wrap .Product_item .m-page{ height: 100px; bottom: -100px; } .dux-page{ .first-page, .num-page, .last-page{ display: none; } a{ padding: 10px 15px; } margin-bottom: 150px; } //============ 关于我们 ================ .HL_about_wrap{ .content_wrap{ .content_l{ display: none; } .content_r{ width: 100%; padding: 0px 15px 80px 15px; box-sizing: border-box; margin: 0; } } } // ============ 大事记 =========== .history_conter{ padding:20px 15px; box-sizing: border-box; ul{ li{ h2{ font-size: 24px; } p{ font-size: 12px; } &:nth-child(2n-1){ .case{ padding-right: 20px; } } &:nth-child(2n){ .case{ padding-left: 20px; } } } } } // =============== 新闻列表 ============ .news_list_wrap{ .news_hot_wrap{ padding: 15px; box-sizing: border-box; .news_l{ width: 30%; height: 100px; //margin-right: 8px; img{ min-height: auto; } .line1,.line2{ display: none; } } .news_r{ padding-top:0; padding-left: 8px; padding-right: 0px; width: 70%; box-sizing: border-box; .title{ font-size: 15px; font-weight: 700; overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 } span{ font-size: 12px; display: block; text-align: left; margin: 0; } p{ font-size: 12px; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:2; //显示的行 min-height:auto; } .more{ display: none; } } } } .news_list_list{ margin: 15px 0; .list_news{ padding: 10px; .news_time{ display: none; .time_D{ font-size: 15px; font-weight: 700;; } .time_YM{ font-size: 14px; padding: 8px 0px; } } .news_title{ h2{ font-size: 14px; line-height: 1; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:2; //显示的行 margin-bottom: 5px; cursor: pointer; &.PDF_title{ line-height: 25px; } } .PDF{ width: 25px; height: 25px; } p{ cursor: pointer; font-size: 12px; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:2; //显示的行 } span{ display: none; } } .news_img{ width: 120px; height: 110px; img{ min-height: 80px; // height: 80px; } } } } .news_list_PDF{ .news_list_PDF_l{ width: 100%; padding-right: 0; } .news_list_PDF_r{ display: none; } } //================== 新闻内页 ================== .news_content_wrap{ .content_l{ width: 100%; padding: 15px; .title{ span{ display: none; } h2{ font-size: 25px; line-height: 1.5; } } } .content_r{ width: 100%; box-sizing: border-box; .about_img{ display: none; } } } .about_msg_r{ margin: 0 15px; } .project_wrap{ .Product_item{ ul{ li{ width: 90%; display: block; margin: 0 auto 10px auto; &:nth-child(3n-1){ margin: auto; } .item_title{ bottom: 0; } } } } } // ================== 地产项目 ============================ .project_item_wrap{ .Product_item{ width: 100%; background-size: 200%; min-height: 300px; ul{ padding: 15px; li{ width: 100%; display:block; &:nth-child(3n-1){ margin-left: 0; margin-right:0; } } } } } // ===================== 地产详情 ============================== .project_details_wrap{ .details_introduce{ padding: 30px 0; .introduce_l{ width: 100%; .introduce_logo{ display: block; img{ max-width: 140px; max-height: 80px; } } .introduce_content{ display: inline-block; width: 50%; overflow: hidden; em{ margin-bottom: -8px } .Tel{ margin-top:8px; p{ font-size: 12px; } } .location{ margin-top:8px; p{ font-size: 12px; } } } } .introduce_r{ width: 100%; padding: 15px; max-height:none; overflow: initial; p{ margin-bottom: 5px; } } } .details_item_wrap{ margin-top: 15px; .details_item_title{ margin-top: 30px; } ul{ li{ padding: 1.2%; &::before{ display: none; } &::after{ display: none; } .content{ width: 90px; height: 90px; border: 8px solid #ebdfc4; h2{ font-size: 12px; line-height: 1.2; } } } } } .details_mating_wrap{ padding: 30px 0; .HL_wrap{ padding:0; width: 100%; display: block; } .mating_title{ width: 100%; background-color:#f8f8f8; padding: 10px 10px; box-sizing: border-box; } .mating_item{ width: 100%; display: block; box-sizing: border-box; margin: 0; ul{ text-align: center; } li{ font-size: 12px; display: inline-block; margin: 5px 5px 0px 5px; padding: 5px 10px; border-radius: 4px; } } .mating_line{ display: none; } .mating_img{ max-width: 95%; text-align: center; padding-top: 10px; margin: 0 auto; } .details_item_news_wrap{ display: inline; } } .details_title_wrap{ margin: 30px 0 15px 0; } .details_details{ padding: 15px; } .details_img_wrap{ width: 100%; .swiper-container{ height: 80px; .swiper-slide{ .img_wrap{ img{ min-height: auto; } } } } } } .project_details_wrap .details_big_img_wrap .swiper-slide{ background:rgba(0, 0, 0, 1); } //====================== 加入 ========================== .join_title{ margin-top: 30px; font-size: 25px; } .search_join_wrap{ input{ width: 50%; text-indent: 0; // background: transparent; // border: 0 none; resize:none; outline:none; /*清除选中效果的默认蓝色边框 */ -webkit-appearance:none; /*清除浏览器默认的样式 */ line-height: normal; //光标问题 } input::-webkit-input-placeholder { /* WebKit browsers */ line-height: 0.44rem; //placeholder } input:focus { color: #8b8791; } } .join_list_wrap{ width: 95%; ul{ li{ width: 100%; margin-bottom: 8px; padding-bottom: 8px; &:nth-child(2n-1){ margin-right: 0; } &:nth-child(2n){ margin-left: 0; } em{ float: left; } .join_list_box{ display: block; .list_title{ padding-left: 8px; font-size:18px; display: inline-block; width: 80%; line-height: 28px; margin-bottom: 8px; &::after{ content: ''; display: block; width: 100%; height: 4px; } } .list_post{ float: left; font-size: 14px; } .list_wage{ float: right; } } } } } .m_rucruit_nav{ display: none; } .rucruit_content{ .content_l{ padding: 0; .rucruit_content_wrap{ .title_wrap{ display: block; em{ float: left; font-size: 12px; } .title{ font-size: 26px; display: inline-block; width: 80%; padding: 0 10px; line-height: 28px; } .title_r{ float: right; font-size: 25px; line-height: 30px; } } .flex_wrap{ display: block; margin-top: 45px; .require{ margin-bottom: 8px; } } } } .job_description{ margin-top: 30px; } } .contactus_wrap{ background: #e1e1e1; img{ display: none; } .contactus_cont{ position: relative; ul{ display: block; li{ font-size: 14px; } } } } }