/* 竞争优势 */ /* 竞争优势menu */ .head-image-box { min-height: 439px; } .advantages-menu-wrapper { width: 100%; background-color: #fff; display: inline-block; } .advantages-sfixed { position: fixed; top: 0px; left: 0px; z-index: 10; background-color: #fff; } .advantages-menu { margin: 20px 0 0 0; padding: 0; height: 44px; line-height: 44px; border-bottom: 1px #E5E5E5 solid; width: 1190px; display: inline-block; font-size: 0px; /* 设置父元素的 font-size 为 0,消除空白符 */ } .advantages-menu ul { padding: 0; margin: 0; list-style: none; } .advantages-menu .flex-item { height: 44px; line-height: 44px; color: #191919; font-size: 16px; text-align: center; display: inline-block; margin-right: 122px; } .advantages-menu .flex-item:last-child { margin-right: 0; } .advantages-menu .flex-item a { display: block; text-decoration: none; color: #191919; height: 41px; } /* 点击变色 */ .advantages-menu .flex-item>a:hover, .advantages-menu .flex-item>a:focus { color: #1B1C80; border-bottom: 3px #1B1C80 solid !important; } /* 区域优势 */ .main-wrapper { max-width: 1440px; min-width: 1190px; width: 100%; display: inline-block; text-align: center; margin: 0 auto 100px; } .main-wrapper .section { max-width: 1440px; min-width: 1190px; text-align: center; padding-bottom: 100px; overflow: hidden; } .main-wrapper .content { margin-top: 100px; overflow: hidden; } /* 菜单栏滚动到顶部时，改变section1 */ .main-wrapper .content-list-top { margin-top: 64px; } .section .content .item-title, .section .content .item-details { text-align: left; color: #333; letter-spacing: 0; text-align: justify; } /* li 标题 */ .section .item-title { font-size: 29px; font-weight: 500; line-height: 45px; } /* li content */ .section .item-details { margin-top: 20px; font-size: 15px; line-height: 40px; letter-spacing: 0; text-align: justify; } /* li img */ .section .item-img { width: 100%; position: absolute; left: 0; } .section .item-img-title { text-align: center; font-size: 17px; line-height: 27px; margin: 4px 0 24px; } /* li content */ .section .item-details { flex-grow: 1; } /* .section.item1 */ .section.item1 .content { margin-top: 86px; width: 1190px; padding: 0 calc((100% - 1190px)/2); } .section.item1 .content .item-left { float: left; width: 600px; margin-right: 100px; } .section.item1 .content .item-right { float: right; width: 490px; position: relative; overflow: hidden; padding-bottom: 39%; } /* .section.item2 */ .section.item2 .content { padding: 0 calc((100% - 1190px)/2); } .section.item2 .content .item-left { float: left; width: 490px; position: relative; overflow: hidden; padding-bottom: 39%; } .section.item2 .item-left-img, .section.item4 .item-left-img, .section.item6 .item-left-img { display: none; } .section.item2 .content .item-right { float: right; width: 600px; display: block; position: relative; overflow: hidden; padding-bottom: 33%; } .section.item2 .content .item-right .item-title { margin-top: 80px; } .section.item2 .content .item-right .item-details { margin-bottom: 80px; } /* .section.item3 */ .section.item3 .content { padding: 0 calc((100% - 1190px)/2); } .section.item3 .item-left { float: left; width: 452px; margin-right: 100px; } .section.item3 .item-right { float: right; width: 630px; position: relative; overflow: hidden; padding-bottom: 39%; } /* .section.item4 */ .section.item4 .content { padding-right: calc((100% - 1190px)/2); } .section.item4 .item-right { float: left; width: 600px; margin-left: 100px; } .section.item4 .item-left { float: left; min-width: 490px; max-width: 615px; position: relative; overflow: hidden; padding-bottom: 34%; width: calc(100% - 700px - (100% - 1190px)/2); } /* .section.item5 */ .section.item5 .content { padding-left: calc((100% - 1190px)/2); } .section.item5 .item-left { float: left; width: 494px; margin-right: 100px; } .section.item5 .item-left .item-title { /* margin-top: 152px; */ margin-top: 15%; } .section.item5 .item-right { float: right; min-width: 596px; max-width: 721px; width: calc(100% - 594px - (100% - 1190px)/2); position: relative; overflow: hidden; padding-bottom: 38%; } /* .section.item6 */ .section.item6 .content { padding: 0 calc((100% - 1190px)/2); } .section.item6 .item-left { float: left; width: 490px; position: relative; overflow: hidden; padding-bottom: 51%; } .section.item6 .item-right { float: right; width: 600px; display: block; position: relative; overflow: hidden; padding-bottom: 34%; } .section.item6 .item-right .item-details { margin-bottom: 80px; } /* .section.item7 */ .section.item7 { padding-left: calc((100% - 1190px)/2); position: relative; overflow: hidden; } .section.item7 .item-left { float: left; width: 410px; position: absolute; bottom: 100px; } .section.item7 .item-right { float: right; min-width: 680px; max-width: 804px; width: calc(100% - 510px - (100% - 1190px)/2); position: relative; overflow: hidden; padding-bottom: 38%; } /* 图片淡入 */ /* .item-img { transition: opacity 1.2s; transition-delay: 1.2s; opacity: 0; } */ /* .section-img2 { opacity: 1; transition: opacity 2s ease 0s; } */ .section .item-title { transform: translate3d(0, 60px, 0); transition: opacity 1250ms ease 50ms, transform 1250ms cubic-bezier(0.22, 0.61, 0.36, 1) 50ms; opacity: 0; } .section .item-details { transform: translate3d(0, 60px, 0); transition: opacity 1250ms ease 100ms, transform 1250ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms; opacity: 0; } .section .section-title2 { transform: translate3d(0, 0, 0); transition: opacity 1250ms ease 50ms, transform 1250ms cubic-bezier(0.22, 0.61, 0.36, 1) 50ms; opacity: 1; } .section .section-details2 { transform: translate3d(0, 0, 0); transition: opacity 1250ms ease 100ms, transform 1250ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms; opacity: 1; }<!--0.00012302398681641-->