/* ���岼�� */ body{ /*font:14px "宋体",Arial,Helvetica,sans-serif;*/ /*font:14px 方正兰亭黑_gbk;*/ font-family: '思源宋体 CN Medium'; /*这里是说明调用来的字体名字*/ src: url('../../../../data/font/SourceHanSerifCN-Medium.otf'); /*这里是字体文件路径*/ color:#A1A1A1; margin:0; padding:0; /* background-image:linear-gradient(to top,#282828 0,#101010 100%); */ min-width: 1280px; overflow-x: hidden; /*background: red;*/ } ul,li,p,h1,h2,h3,h4,h5,h6,dl,dd{ margin:0; padding:0; list-style:none; } .lf{float:left;} .rt{float:right;} .clear{clear:both;} img{ /*width:1920px;*/ /*height:568px;*/ vertical-align:bottom; } a{ color:#9A9A96; text-decoration:none; } a:hover{ color:#D9D9D9; text-decoration:none; } /*���岼��*/ /*header����*/ .header{ width: 100%; /*height: 36px;*/ /*line-height: 36px;*/ height: 39px; line-height: 39px; background: #666FE8; color: #fff; } .header_left{ margin-left: 8%; /*font-size: 12px;*/ font-size: 16px; } .header_right{ margin-right: 8%; /*font-size: 18px;*/ font-size: 16px; } .header_nav{ width: 100%; /*height: 80px;*/ height: 128px; /*line-height: 80px;*/ /*background: red;*/ } .header_image{ /*width: 94px;*/ /*height: 50px;*/ width: 150px; height: 80px; /*line-height: 80px;*/ /*background: red;*/ margin-left: 8%; margin-top: 24px; } .header_image img{ /*width: 94px;*/ /*height: 50px;*/ width: 150px; height: 80px; line-height: 80px; } .header_list{ margin-right: 8%; margin-top: 24px; /*background: red;*/ } .header_list li{ float: left; line-height: 80px; margin-left: 50px; } .header_list .main{ margin-right: 30px; } .header_list li a{ /*font-size: 18px;*/ font-size: 22px; color: #67676f; } .header_list li a:hover{ color: #666FE8; } .header_search{ position: relative; } .header_search input{ width: 100px; height: 26px; border: 2px solid #666FE8; border-radius: 8px; outline: none; padding-left: 5px; } .header_search b{ display: block; width: 18px; height: 18px; border-radius: 50%; background: url("../image/search.png") no-repeat; position: absolute; top: 31px; left: 80%; cursor: pointer; background-size: 100%; } /*�ֲ�ͼƬ*/ /*.nav_content{*/ /*width: 100%;*/ /*height: 340px;*/ /*/!*background: red;*!/*/ /*}*/ /*.nav_carousel img{*/ /*width: 100%;*/ /*height: 340px;*/ /*}*/ .slideShow{ position: relative; width: 100%; /*height: 722px;*/ /*height: 544px;*/ height: auto; /*border: 1px solid #666;*/ /*overflow: hidden;*/ } .slideShow ul{ /*width: 2000px;*/ width: 400%; /*height: 544px;*/ position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/ /*background: green;*/ } .slideShow ul li{ float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/ width: 25%; } .slideShow img{ width: 100%; /*height: 544px;*/ } .slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/ width: 100%; height: 30px; position: absolute; top: 90%; /*left: 45%;*/ /*background: red;*/ display: flex; justify-content: space-between; box-sizing: border-box; margin-top: -10px; } .showNav>div{ width: 190px; height: 30px; /*background: green;*/ margin: 0 auto; text-align: center; } .slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; margin-left: 12px; color: #fff; border: 1px solid #fff; box-sizing: border-box; } .slideShow .showNav span:hover{ background: #666fe8; } .slideShow .showNav .active{ background: #666fe8; } .slideShow{ width: 100%; max-height: 100%; /*height: auto;*/ overflow: hidden; } /*����ͼƬ*/ .title_picture{ width: 100%; /*height:798px;*/ height:auto; /*border: 1px solid #aaa;*/ /*background: yellow;*/ font-family: '思源宋体 CN Medium'; /*这里是说明调用来的字体名字*/ src: url('../../../../data/font/SourceHanSerifCN-Medium.otf'); /*这里是字体文件路径*/ } .title{ width: 100%; height: 140px; margin-top: 100px; } .title p{ /*width: 20%;*/ width: 100%; height: 30px; line-height: 30px; margin: 0 auto; text-align: center; font-size: 30px; color: #464646; font-weight: 500; } /*ͼƬ���еı��*/ .picture{ width: 100%; height: 544px; position: relative; background: url("../image/homeImg/business_overview_background.png") no-repeat; /*background-size: 100%;*/ background-position: center center; background-size: 100%; } .picture>img{ width: 100%; height: 544px; /*position: absolute;*/ } .picture_word{ /*width: 960px;*/ width: 100%; height: 340px; position: absolute; top: 20%; } .picture_word>div{ width: 960px; margin: 0 auto; } .picture_overview{ width: 480px; height: 340px; /*background: yellow;*/ float: left; } .picture_overview p:not(:first-child){ text-indent:2em; } .overview{ background: #fff; } .overview p{ width: 90%; /*height: 20px;*/ line-height: 20px; /*background: yellow;*/ color: #8a8a8a; font-size: 12px; margin: 0 auto; /*letter-spacing: 1px;*/ } .overview p:first-child{ text-align:center; /*background: yellow;*/ color: #4e4e4e; font-size: 16px; font-weight: bold; margin: 10px auto 0; } .picture_overview p:nth-child(4){ word-break:break-all; } .picture_overview img{ width: 480px; height: 340px; } .picture_contact{ width: 240px; height: 170px; /*background: hotpink;*/ float: left; } .picture_contact img{ width: 240px; height: 170px; } /*��˾����*/ .course_time div{ width: 50px; height: 40px; /*background: red;*/ float: left; margin-right: 15%; position: relative; } .course_time div li:first-child{ width: 10px; height: 10px; border-radius: 50%; background: #525252; position: absolute; z-index: 5; cursor: pointer; top: -2px; } .course_time div:first-child li:first-child{ width: 14px; height: 14px; background: #666fe8; } .course_time div li:nth-child(2){ width: 20px; height: 20px; border-radius: 50%; background: #B2B7F3; position: absolute; top: -5px; left: -3px; z-index: 2; display: none; } .course_time div:first-child li:nth-child(2){ display: block; } .course_time div:first-child li:nth-child(3){ color: #666FE8; } .course_time div li:last-child{ font-size: 16px; color: #4e4e4e; position: absolute; top: 15px; left: -20px; font-weight: bold; } .course_details{ width: 80%; /*height: 356px;*/ height: auto; margin-left: 10%; margin-top: 80px; /*background: greenyellow;*/ /*display: none;*/ box-sizing:border-box; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 120px; } /*自主生产 配套齐全*/ .container{ width: 100%; /*width: 1200px;*/ height: auto; /*background: red;*/ margin: 100px auto 120px; } .container_box{ width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 18px; font-weight: bold; } .container_nav{ width: 70%; height: 60px; line-height: 60px; /*background: green;*/ /*margin-top: 20px;*/ margin: 20px auto 60px; display: flex; justify-content: space-around; } .container_nav a{ display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; text-decoration: none; border-radius: 50%; float: left; /*margin-top: 10px;*/ margin: 10px 0; } .selected{ color: #fff; background: #858CED; } .container_img{ width: 100%; height: 544px; /*background: orange;*/ border: 1px solid transparent; box-sizing: border-box; margin-bottom: 10px; display: none; background: url(../image/homeImg/company_color_background.png) no-repeat; background-size: 100%; background-position: center; } .img_box img{ width: 100%; max-width: 100%; max-height: 100%; } .img_box{ /*width: 80%;*/ width: 1200px; height: 400px; margin: 72px auto; /*background: hotpink;*/ position: relative; display: flex; justify-content: space-between; } .img_box div{ width: 220px; height: 300px; /*background: chartreuse;*/ float: left; } .i_center{ margin-top: 50px; } .i_last{ margin-top: 100px; } .img_box .l_img{ width: 220px; height: 400px; /*background: red;*/ align-items: center; } .img_box .c_img{ width: 500px; height: 300px; /*background: indigo;*/ margin-top: 50px; display: flex; justify-content: space-between; } .img_box .r_img{ width: 220px; height: 400px; /*background: red;*/ } .l_img div{ width: 100%; height: 130px; /*background: darkolivegreen;*/ margin-bottom: 5px; } .r_img div{ width: 100%; height: 130px; /*background: darkolivegreen;*/ margin-bottom: 5px; } .c_img div{ width: 240px; height: 300px; } .img_box .z_lf{ width: 300px; height: 400px; /*background: blue;*/ } .img_box .z_center{ width: 340px; height: 400px; /*background: cadetblue;*/ } .img_box .z_rt{ width: 200px; height: 400px; /*background: fuchsia;*/ } .img_box .z_top{ width: 100%; height: 190px; display: flex; justify-content: space-between; } .z_top div{ width: 160px; height: 190px; /*background: red;*/ } .img_box .z_bottom{ width: 100%; height: 190px; /*background: royalblue;*/ margin-top: 20px; } .z_rt div{ width: 100%; height: 190px; /*background: red;*/ margin-bottom: 20px; } .active{ display: block; } .img_box .j_lf{ width: 340px; height: 400px; /*background: cadetblue;*/ } .img_box .j_top{ width: 100%; height: 190px; /*background: red;*/ display: flex; justify-content: space-between; } .img_box .j_bottom{ width: 100%; height: 190px; /*background: red;*/ margin-top: 20px; } .j_top div{ width: 160px; height: 190px; /*background: black;*/ } .img_box .j_center{ width: 260px; height: 260px; /*background: darkcyan;*/ margin-top: 70px; } .img_box .j_rt{ width: 340px; height: 400px; /*background: green;*/ } .j_rt div{ width: 340px; height: 190px; margin-bottom: 20px; /*background: royalblue;*/ } .img_box .w_lf{ width: 300px; height: 400px; /*background: saddlebrown;*/ } .img_box .w_rt{ width: 300px; height: 400px; /*background: saddlebrown;*/ } .img_box .w_center{ width: 340px; height: 400px; /*background: teal;*/ } .w_center div{ width: 340px; height: 190px; margin-bottom: 20px; /*background: red;*/ } .news{ width: 100%; height: 40px; /*background: yellow;*/ margin: 100px auto 120px; font-family: '思源宋体 CN Medium'; /*这里是说明调用来的字体名字*/ src: url('../../../../data/font/SourceHanSerifCN-Medium.otf'); /*这里是字体文件路径*/ } .news p{ line-height: 40px; text-align: center; font-size: 30px; color: #464646; } /*独一无二的公司色彩*/ .color{ width: 100%; height: 40px; margin: 120px auto 80px; font-family: '思源宋体 CN Medium'; /*这里是说明调用来的字体名字*/ src: url('../../../../data/font/SourceHanSerifCN-Medium.otf'); /*这里是字体文件路径*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .color p{ line-height: 40px; text-align: center; font-size: 30px; color: #464646; } .company_color{ width: 100%; /*height: 554px;*/ height: 620px; border: 1px solid transparent; background: url("../image/homeImg/company_color_background.png") no-repeat; background-size: 100% 620px; } .company_image{ /*width: 80%;*/ width: 1000px; height: 460px; /*background: red;*/ margin: 120px auto; position: relative; } .company_image div img{ width: 100%; height: 100%; border: 1px solid #fff; } .color_top{ width: 100%; /*height: 40%;*/ height: 180px; /*background: red;*/ position: relative; border: 0!important; margin-bottom: 30px; } .color_bottom{ width: 100%; /*height: 40%;*/ height: 180px; /*background: yellow;*/ position: relative; border: 0!important; z-index: 2; } .color_bottom div:last-child.p1 { width: 40%; height: 100%; /* background: #f0ad4e; */ /* border: 0; */ border: 1px solid #fff; /*border-right: 3px solid #fff;*/ } .color_bottom div:last-child .p2 { width: 55%; height: 100%; /*background: olivedrab;*/ border: 0!important; border-bottom-left-radius: 110px; border-top-left-radius: 110px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .color_bottom div div.p2 img{ border-bottom-left-radius: 110px; border-top-left-radius: 110px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .color_top div:first-child{ width: 400px; height: 100%; } .t_circle{ width: 180px; height: 180px; border-radius: 50%; position: absolute; left: 41%; top:30%; z-index: 5; } .color_top div:last-child{ /*width: 40%;*/ /*height: 100%;*/ width: 400px; height: 180px; /*background: fuchsia;*/ /*border: 1px solid #fff;*/ border-bottom-left-radius: 110px; border-top-left-radius: 110px; } .color_bottom div:first-child{ width: 40%; height: 100%; /*background: yellow;*/ /*border: 1px solid #fff;*/ border-bottom-right-radius: 110px; border-top-right-radius: 110px; } .color_bottom div:first-child img{ border-bottom-right-radius: 110px; border-top-right-radius: 110px; } .color_bottom div:last-child{ width: 40%; height: 100%; /*background: fuchsia;*/ /*border: 1px solid #fff;*/ } .color_top div:first-child .p1{ width: 40%; height: 100%; /*background: #f0ad4e;*/ /*border: 0;*/ border: 1px solid #fff; } .color_top div img{ width: 100%; /*height: 182px;*/ } .color_top div:first-child .p2{ width: 55%; height: 100%; /*background: olivedrab;*/ border: 0; border-bottom-right-radius: 110px; border-top-right-radius: 110px; } .color_top div:first-child .p2 img{ border: 2px solid #fff; /*border-top: 1px solid #fff;*/ /*border-bottom: 1px solid #fff;*/ border-bottom-right-radius: 110px; border-top-right-radius: 110px; } .color_top div:last-child .p4{ border: 2px solid #fff; /*border-top: 2px solid #fff;*/ /*border-bottom: 2px solid #fff;*/ border-bottom-left-radius: 110px; border-top-left-radius: 110px; } .color_top .t_circle img{ width: 100%; /*height: 272px;*/ height: 100%; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; } .color_bottom div:first-child .p5{ width: 40%; height: 100%; /*background: #f0ad4e;*/ /*border: 0;*/ border: 1px solid #fff; border-right: 3px solid #fff; } .color_bottom div img{ width: 100%; /*height: 182px;*/ } .color_bottom div:first-child .p6{ width: 55%; height: 100%; /*background: olivedrab;*/ border: 0; } .color_bottom div:first-child .p6 img{ border: 2px solid #fff; /*border-top: 2px solid #fff;*/ /*border-bottom: 2px solid #fff;*/ border-bottom-left-radius: 110px; border-top-left-radius: 110px; } .color_bottom .t_circle img{ width: 100%; /*height: 273px;*/ height: 100%; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; } .color_bottom div:last-child .p8{ border: 2px solid #fff; /*border-top: 2px solid #fff;*/ /*border-bottom: 2px solid #fff;*/ border-bottom-right-radius: 110px; border-top-right-radius: 110px; } /*���õĹ�˾Ը��*/ .company_vision{ width: 100%; height:850px; border: 1px solid transparent; /*background: darkcyan;*/ font-family: '思源宋体 CN Medium'; /*这里是说明调用来的字体名字*/ src: url('../../../../data/font/SourceHanSerifCN-Medium.otf'); /*这里是字体文件路径*/ } .vision{ width: 100%; height: 544px; margin-top: 115px; /*background: red;*/ } .vision p{ width: 100%; height: 30px; line-height: 30px; margin: 0 auto; text-align: center; font-size: 30px; color: #464646; font-weight: 500; } .vision_details{ width: 80%; height: 400px; margin-left: 10%; margin-top: 80px; /*background: greenyellow;*/ } .vision_lf{ width: 60%; height: 53px; /*background: saddlebrown;*/ } .vision_lf p{ width: 100%; font-size: 20px; color: #464646; text-align: left; } .vision_rt{ width: 40%; height: 356px; } .vision_rt>img{ /*width: 100%;*/ /*height: 529px;*/ width: 496px; height: 360px; margin-top: 4%; border-radius: 50%; } .vision_circle{ width: 100%; height: 266px; /*background: skyblue;*/ margin-top: 50px; position: relative; } .vision_circle>div:first-child{ width: 80%; height: 65%; /*background: red;*/ margin: 13% auto 0; position: relative; } .comfortable{ width: 100px; height: 100px; /*background: red;*/ position: absolute; /*top: 10%;*/ /*left: 13%;*/ } .comfortable b{ display: block; width: 100px; height: 100px; border-radius: 50%; background: #FDE4F0; box-shadow: 0 5px 0 rgba(99,99,99,0.1); } .comfortable span{ display: block; width: 80px; height: 80px; border-radius: 50%; background: #FB6DB3; position: absolute; top: 13%; left: 10%; /*box-shadow: 0 0 0 3px rgba(255,80,0,.2);*/ } .comfortable p{ width: 70px; font-size: 18px; position: absolute; top: 38%; left: 13%; color: #fff; /*font-weight: bold;*/ text-align: center; } .fine{ width: 100px; height: 100px; /*background: indianred;*/ position: absolute; /*top: 42%;*/ /*left: 29%;*/ top: 78px; left: 70px; } .fine b{ display: block; width: 100px; height: 100px; border-radius: 50%; background: #B2B7F3; box-shadow: 0 5px 0 rgba(99,99,99,0.1); } .fine span{ display: block; width: 80px; height: 80px; border-radius: 50%; background: #666FE8; position: absolute; top: 10%; left: 10%; /*box-shadow: 0 0 0 3px rgba(255,80,0,.2);*/ } .fine p{ width: 70px; font-size: 18px; position: absolute; top: 38%; left: 13%; color: #fff; /*font-weight: bold;*/ text-align: center; } .happy{ width: 100px; height: 100px; /*background: aqua;*/ position: absolute; /*top: 10%;*/ /*left: 45%;*/ top: 0; left: 140px; } .happy b{ display: block; width: 100px; height: 100px; border-radius: 50%; background: #FDE4F0; box-shadow: 0 5px 0 rgba(99,99,99,0.1); } .happy span{ display: block; width: 80px; height: 80px; border-radius: 50%; background: #FB6DB3; position: absolute; top: 10%; left: 10%; } .happy p{ width: 70px; font-size: 18px; position: absolute; top: 38%; left: 13%; color: #fff; /*font-weight: bold;*/ text-align: center; } .exquisite{ width: 100px; height: 100px; /*background: brown;*/ position: absolute; /*top: 40%;*/ /*left: 62%;*/ top: 82px; left: 205px; } .exquisite b{ display: block; width: 100px; height: 100px; border-radius: 50%; background: #B2B7F3; box-shadow: 0 5px 0 rgba(99,99,99,0.1); } .exquisite span{ display: block; width: 80px; height: 80px; border-radius: 50%; background: #666FE8; position: absolute; top: 10%; left: 10%; /*box-shadow: 0 0 0 3px rgba(255,80,0,.2);*/ } .exquisite p{ width: 70px; font-size: 18px; position: absolute; top: 38%; left: 13%; color: #fff; /*font-weight: bold;*/ text-align: center; } .vision_foot{ position: absolute; top: 84%; left: 0; } .vision_foot span{ color: #8a8a8a; font-size: 14px; letter-spacing:4px; padding-top: 5px; } /*ҳ��*/ footer{ width: 100%; height: 275px; border: 1px solid #353744; background: #353744; color: #fff; } .footer{ width: 80%; height: 220px; /*background: red;*/ margin: 3% auto 0; } .footer_title>p{ width: 100%; height: 30px; font-size: 18px; text-align: center; } .footer_title p:last-child span{ display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #fff; border-radius: 50%; margin-left: 15px; cursor: pointer; } .footer_title p:last-child span:hover{ background: #5E97F5; border-color: #5E97F5; } .footer_top{ margin-top: 40px; width: 100%; } .footer_top li{ width: 25%; float: left; } .footer_bottom{ width: 100%; margin-top: 20px; } .footer_bottom li{ width: 25%; float: left; } .footer_bottom li:last-child{ /*width: 40%;*/ width: auto; } .copyright{ width: 100%; height: 30px; line-height:30px; text-align:center; margin-top: 20px; } #chn{ background: #5E97F5; } /*@media (max-width: 1280px) {*/ /*.picture{*/ /*width: 100%;*/ /*height: 321px;*/ /*}*/ /*}*/