body, html { font-family: PingFang SC锛汒 } /* 鍏叡澶 */ .header { height: 79px; /* background: -webkit-linear-gradient( 263deg, rgba(7, 24, 63, 1) 0%, rgba(30, 38, 86, 1) 24%, rgba(8, 29, 54, 1) 100% ); background: -o-linear-gradient( 263deg, rgba(7, 24, 63, 1) 0%, rgba(30, 38, 86, 1) 24%, rgba(8, 29, 54, 1) 100% ); background: -moz-linear-gradient( 263deg, rgba(7, 24, 63, 1) 0%, rgba(30, 38, 86, 1) 24%, rgba(8, 29, 54, 1) 100% ); background: linear-gradient( 263deg, rgba(7, 24, 63, 1) 0%, rgba(30, 38, 86, 1) 24%, rgba(8, 29, 54, 1) 100% ); */ background-color: #101e48; position: fixed; z-index: 100000; left: 0; width: 100%; top: 0; } .header-bg { height: 79px; } .header .clearfloat { width: 1200px; margin: 0 auto; font-size: 14px; line-height: 79px; } .header .logo { width: 131px; margin-top: 30px; } .header .link-list { height: 79px; } .header .link-list .item { float: left; min-width: 80px; margin-right: 10px; height: 100%; } /* .header .link-list .item:hover .link{ border-bottom: 4px solid #EE5051; } */ .header .link-list .item:last-child { margin-right: 0; } .header .link-list .item .link { display: inline-block; width: 100%; height: 80px; color: #ffffff; line-height: 79px; text-align: center; } .header .link-list .item.active { border-bottom: 3px solid #ee5051; } .header .lang-select { margin-left: 30px; width: 98px; height: 28px; background: rgba(68, 78, 129, 1); border-radius: 14px; margin-top: 25px; line-height: 25px; font-size: 12px; color: #9fa2a7; text-align: center; } .header .lang-select .lang-img { width: 18px; margin-right: 6px; } .header .lang-select .more { width: 6px; margin-left: 6px; } /* 鍏叡灏 */ .footer { width: 100%; background: #081d36; color: #ffffff; } .footer .clearfloat { width: 1200px; margin: 0 auto; height: 216px; } .footer .clearfloat > div { width: 50%; } .footer .clearfloat .shortcut { padding-top: 37px; } .footer .clearfloat .shortcut .title { font-size: 18px; margin-bottom: 32px; } .footer .clearfloat .shortcut .links { } .footer .clearfloat .shortcut .links .item { float: left; min-width: 86px; border-right: 1px solid #fff; height: 20px; margin-right: 20px; padding-right: 20px; } .footer .clearfloat .shortcut .links .item a { color: #fff; } .footer .clearfloat .shortcut .links .item:last-child { border-right: 0; margin-right: 0; } .footer .clearfloat .contact { padding-top: 37px; } .footer .clearfloat .contact .title { font-size: 18px; margin-bottom: 31px; } .footer .clearfloat .contact .ways { font-size: 14px; } .footer .clearfloat .contact .ways .way { margin-bottom: 19px; } .footer .clearfloat .contact .ways .way:last-child { margin-bottom: 0; } .footer .foot { border-top: 1px solid #6d6d6d; text-align: center; padding: 13px 0; font-size: 12px; } .footer .foot p { margin-bottom: 5px; } .footer .foot p a { color: rgba(255, 255, 255, 1); } /* 棣栭〉 */ .home .banner { width: 100%; min-width: 1200px; height: auto; } .home .banner .banner-item { width: 100%; position: absolute; left: 0; top: 0; transition: all 0.5s; } .home .banner .banner-item:first-child { z-index: 10; } .home .banner .banner-item:not(:first-child) { /* display: none; */ z-index: 1; } .home .banner .banner-item .banner-img { position: relative; } /* .home .banner .banner-item .banner-img::after{ content: ''; display: block; width: 100%; left: 0; top: 0; bottom: 0; background-image: url('../images/jzzwt.png'); background-repeat: no-repeat; background-size: cover; } */ .home .banner a .slogan { position: absolute; left: 18%; top: 26%; color: #fff; z-index: 1; } .home .banner a .slogan h1 { font-size: 40px; margin-bottom: 20px; } .home .banner a .slogan h2 { font-size: 30px; font-weight: 200; } .home .banner a .slogan h6 { font-size: 30px; font-weight: 100; margin-top: 20px; } .home .about-hy { width: 100%; background-image: url("../images/home_bg.png"); background-repeat: no-repeat; background-size: cover; } .home .about-hy .mg { width: 1200px; margin: 0 auto; padding-top: 90px; } .home .about-hy .mg h1 { color: #252b3a; font-size: 36px; margin-bottom: 30px; text-align: center; } .home .about-hy .mg p.detail { text-align: center; font-size: 14px; color: #666a75; line-height: 22px; margin-bottom: 18px; } .home .about-hy .mg .toabout { font-size: 14px; text-align: center; margin-bottom: 62px; } .home .about-hy .mg .toabout a { color: #ee5051; display: inline-block; } .home .about-hy .mg .toabout a .more { width: 12px; } .home .about-hy .mg .dimension { } .home .about-hy .mg .dimension .item { float: left; width: 250px; height: 300px; text-align: center; cursor: pointer; margin-right: 65px; } .home .about-hy .mg .dimension .item:last-child { margin-right: 0; } .home .about-hy .mg .dimension .item .img-wrapper { width: 140px; position: relative; margin-bottom: 16px; background-image: url("../images/home_icon_cloud_a.svg"); background-repeat: no-repeat; background-size: cover; margin: 0 auto; height: 95px; margin-bottom: 16px; margin-top: 110px; } .home .about-hy .mg .dimension .item:hover .tip { color: #ee5051; } .home .about-hy .mg .dimension .item .img-wrapper .p-img1 { position: absolute; width: 65px; z-index: 9; bottom: 45px; left: 50%; transform: translateX(-50%); transition: bottom 1s; } .home .about-hy .mg .dimension .item .img-wrapper .p-img2 { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; width: 75px; z-index: 10; } .home .about-hy .mg .dimension .item:hover .img-wrapper .p-img1 { /* bottom: 90px; */ animation: bounce 1s ease 0.01s; } .home .about-hy .mg .dimension .item:hover .img-wrapper .p-img2 { animation: bounce 1s ease; } @keyframes bounce { 0% { bottom: 36px; } 16% { bottom: 65px; } 33% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 50% { bottom: 125px; transform: translateX(-50%) scaleY(1); } 66% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 83% { bottom: 65px; transform: translateX(-50%) scaleY(1); } 100% { bottom: 36px; transform: translateX(-50%) scaleY(1); } } @-moz-keyframes bounce /* Firefox */ { 0% { bottom: 36px; } 16% { bottom: 65px; } 33% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 50% { bottom: 125px; transform: translateX(-50%) scaleY(1); } 66% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 83% { bottom: 65px; transform: translateX(-50%) scaleY(1); } 100% { bottom: 36px; transform: translateX(-50%) scaleY(1); } } @-webkit-keyframes bounce /* Safari 鍜 Chrome */ { 0% { bottom: 36px; } 16% { bottom: 65px; } 33% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 50% { bottom: 125px; transform: translateX(-50%) scaleY(1); } 66% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 83% { bottom: 65px; transform: translateX(-50%) scaleY(1); } 100% { bottom: 36px; transform: translateX(-50%) scaleY(1); } } @-o-keyframes bounce /* Opera */ { 0% { bottom: 36px; } 16% { bottom: 65px; } 33% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 50% { bottom: 125px; transform: translateX(-50%) scaleY(1); } 66% { bottom: 36px; transform: translateX(-50%) scaleY(0.9); } 83% { bottom: 65px; transform: translateX(-50%) scaleY(1); } 100% { bottom: 36px; transform: translateX(-50%) scaleY(1); } } .home .about-hy .mg .dimension .item .tip { color: #252b3a; } .home .news-hy { width: 1200px; margin: 0 auto; } .home .news-hy .b-title { color: #081d36; font-size: 36px; padding-top: 55px; text-align: center; margin-bottom: 41px; } .home .news-hy .clearfloat { } .home .news-hy .clearfloat > div { width: 47%; } .home .news-hy .clearfloat > div .hot-news { margin-bottom: 40px; } .home .news-hy .clearfloat > div .hot-news .link { display: block; width: 100%; height: 100%; } .home .news-hy .clearfloat > div .hot-news .link .left { width: 200px; height: 200px; /* margin-right: 31px; */ } .home .news-hy .clearfloat > div .hot-news .link .right { width: 332px; } .home .news-hy .clearfloat > div .hot-news .link .right .title { font-weight: 600; color: #081d36; margin-bottom: 18px; line-height: 24px; font-size: 18px; } .home .news-hy .clearfloat > div .hot-news .link .right .con { font-size: 14px; color: #666666; margin-bottom: 20px; line-height: 20px; } .home .news-hy .clearfloat > div .hot-news .link .right .time { font-size: 12px; color: #949494; } .home .news-hy .clearfloat > div .more-news { } .home .news-hy .clearfloat > div .more-news .news-item { margin-bottom: 16px; } .home .news-hy .clearfloat > div .more-news .news-item:last-child { margin-bottom: 0; } .home .news-hy .clearfloat > div .more-news .news-item .link { display: block; width: 100%; color: #666a75; line-height: 24px; } .home .news-hy .clearfloat > div .more-news .news-item .link .spot { display: inline-block; margin-right: 12px; width: 8px; height: 8px; border-radius: 50%; background-color: #d8d8d8; margin-top: 7px; } .home .news-hy .clearfloat > div .more-news .news-item .time { color: #949494; font-size: 12px; } .home .news-hy .tomorenews { text-align: center; margin-top: 60px; margin-bottom: 60px; } .home .news-hy .tomorenews a { display: inline-block; width: 132px; height: 50px; line-height: 46px; border-radius: 25px; border: 1px solid rgba(37, 43, 58, 1); text-align: center; color: #252b3a; } .home .news-hy .tomorenews a:hover { border-color: #ee5051; color: #ee5051; } .home .news-hy .tomorenews a .more { width: 20px; margin-right: 8px; } .home .service { background-color: #081d36; padding-bottom: 129px; } .home .service .mg { width: 1200px; margin: 0 auto; color: #fff; } .home .service .mg .l-title { text-align: center; font-size: 36px; padding-top: 78px; margin-bottom: 10px; } .home .service .mg .m-title { text-align: center; font-size: 14px; margin-bottom: 80px; } .home .service .mg .map { height: 392px; background-image: url("../images/home_map_bg.png"); background-repeat: no-repeat; background-size: cover; position: relative; } .home .service .mg .map .country { position: absolute; cursor: pointer; } .home .service .mg .map .country .city { display: none; margin-left: 50px; background-color: #ee5051; color: #fff; width: 134px; padding: 16px; border-radius: 4px; position: absolute; font-size: 12px; line-height: 16px; left: 50px; top: 10px; z-index: 100; } .home .service .mg .map .country .city::after { content: ""; display: block; position: absolute; width: 30px; height: 1px; background: #ee5051; top: 45px; left: -30px; } .home .service .mg .map .china .city::before { content: ""; display: block; position: absolute; width: 36px; height: 1px; background: #ee5051; left: -66px; top: 45px; transform: rotateZ(67deg); transform-origin: right center; } .home .service .mg .map .india .city::before { content: ""; display: block; position: absolute; width: 40px; height: 1px; background: #ee5051; left: -70px; top: 45px; transform: rotateZ(61deg); transform-origin: right center; } .home .service .mg .map .malaysia .city::before { content: ""; display: block; position: absolute; width: 36px; height: 1px; background: #ee5051; left: -48px; top: 45px; transform: rotateZ(67deg); transform-origin: right center; } .home .service .mg .map .malaysia .city::after { left: -12px; } .home .service .mg .map .country .city span { font-size: 14px; } .home .service .mg .map .country .name { font-size: 14px; color: #fff; /* margin-right: 10px; */ line-height: 20px; margin-right: -10px; } .home .service .mg .map .country .loca { /* width: 10px; height: 10px; border-radius: 50%; */ /* background: #EE5051; */ /* margin-top: 14px; */ position: relative; width: 50px; height: 50px; margin-top: -5px; } .home .service .mg .map .country .loca span { display: inline-block; position: absolute; left: 0; top: 0; border-radius: 50%; box-sizing: border-box; border: 2px solid #ee5051; width: 100%; height: 100%; } .home .service .mg .map .country .loca .quan1 { opacity: 0.2; margin: 0%; width: 100%; height: 100%; animation: 1.5s infinite animation7_quan1 ease; -webkit-animation: 1.5s infinite animation7_quan1 ease; } .home .service .mg .map .country .loca .quan2 { opacity: 0.5; margin: 13%; width: 74%; height: 74%; animation: 1.5s infinite animation7_quan2 ease; -webkit-animation: 1.5s infinite animation7_quan2 ease; } .home .service .mg .map .country .loca .quan3 { opacity: 1; margin: 28%; width: 44%; height: 44%; animation: 1.5s infinite animation7_quan3 ease; -webkit-animation: 1.5s infinite animation7_quan3 ease; } .home .service .mg .map .country .loca .quan4 { background: #ee5051; margin: 42%; width: 16%; height: 16%; box-shadow: 0 0 30px rgba(255, 255, 255, 0.83); animation: 1.5s infinite animation7_quan4 ease-out; -webkit-animation: 1.5s infinite animation7_quan4 ease-out; } /* .home .service .mg .map .country .loca::after{ content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: #EE5051; } */ @keyframes animation7_quan1 { 0% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; } 60% { opacity: 0.2; } 80% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @-webkit-keyframes animation7_quan1 { 0% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; } 60% { opacity: 0.2; } 80% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @keyframes animation7_quan2 { 0% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; } 40% { opacity: 0.5; } 80% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @-webkit-keyframes animation7_quan2 { 0% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; } 40% { opacity: 0.5; } 80% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @keyframes animation7_quan3 { 0% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; } 20% { opacity: 1; } 80% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @-webkit-keyframes animation7_quan3 { 0% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; } 20% { opacity: 1; } 80% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @keyframes animation7_quan4 { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); } 30% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } } @-webkit-keyframes animation7_quan4 { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); } 30% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } } .home .service .mg .map .country.china { right: 316px; top: 87px; } .home .service .mg .map .country.india { right: 436px; top: 127px; } .home .service .mg .map .country.malaysia { right: 326px; top: 188px; } .home .service .mg .map .country:hover .city { display: block; } /* .home .service .mg .map .country:hover ~ .country { display: none; } */ .home .service .mg .map .country:hover .loca::after { transition: all 1s ease; transform: scale(10); opacity: 0; } .home .territory { width: 100%; background-image: url("../images/home_bg.png"); background-repeat: no-repeat; background-size: cover; } .home .territory .mg { width: 1200px; margin: 0 auto; padding-bottom: 111px; } .home .territory .mg .l-title { color: #333333; font-size: 24px; padding-top: 100px; margin-bottom: 12px; text-align: center; } .home .territory .mg .m-title { color: #333333; font-size: 14px; margin-bottom: 50px; text-align: center; } .home .territory .mg .territory-list { width: 100%; } .home .territory .mg .territory-list .item { position: relative; float: left; width: 284px; margin-right: 20px; height: 431px; color: #fff; overflow: hidden; } .home .territory .mg .territory-list .item .bg-img { width: 100%; height: 100%; transition: all 0.5s; } .home .territory .mg .territory-list .item:hover .bg-img { transform: scale(1.2); } .home .territory .mg .territory-list .item:last-child { margin-right: 0; } .home .territory .mg .territory-list .item .name { position: absolute; left: 24px; top: 28px; font-size: 18px; } .home .territory .mg .territory-list .item .tip { position: absolute; left: 24px; top: 61px; font-size: 15px; } .home .territory .mg .territory-list .item .icon { position: absolute; left: 24px; top: 101px; font-size: 15px; } /* 鍏充簬 */ .about { } .about .banner { position: relative; } .about .banner .slogan { text-align: center; font-size: 48px; color: #112142; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .tabs { width: 100%; height: 60px; line-height: 60px; background-color: #edeff3; } .tabs .tab-list { width: 540px; margin: 0 auto; } .tabs .tab-list .item { float: left; width: 180px; text-align: center; height: 60px; } .tabs .tab-list .item a { /* z-index: 100; */ display: inline-block; width: 100%; height: 100%; font-size: 15px; color: #252b3a; } .tabs .tab-list .item.active a { border-bottom: 3px solid #ee5051; } .about .con { background: #f7f7f7; } .about .con .con-item { width: 1200px; margin: 0 auto; display: none; } .about .con .synopsis { padding-top: 109px; padding-bottom: 110px; } .about .con .synopsis .left { width: 668px; color: #666666; } .about .con .synopsis .left .p1 { color: #666666; line-height: 28px; margin-bottom: 80px; } .about .con .synopsis .left .p2 { line-height: 28px; } .about .con .synopsis .right img { width: 421px; margin-bottom: 18px; } .about .con .synopsis .right img:last-child { margin-bottom: 0; } .about .con .experience { } .about .con .experience > .title { padding-top: 127px; font-size: 36px; color: #252b3a; text-align: center; margin-bottom: 60px; } .about .con .experience .exp { padding: 250px 0; padding-bottom: 350px; } .about .con .experience .exp .start { float: left; width: 64px; height: 64px; background: #ee5051; text-align: center; line-height: 64px; color: #fff; margin-right: 11px; border-radius: 50%; margin-top: -32px; font-size: 14px; } .about .con .experience .exp .future { float: right; width: 64px; height: 64px; background: #ee5051; text-align: center; line-height: 64px; color: #fff; margin-left: 11px; border-radius: 50%; margin-top: -32px; font-size: 14px; } .about .con .experience .exp .time-horizontal { border-top: 1px solid #d0d0d0; width: 1050px; float: left; /* white-space: nowrap; */ /* overflow: hidden; */ } .about .con .experience .exp .time-horizontal li { float: left; position: relative; text-align: center; /* width: 14.28%; */ width: 11%; /* height: 100%; */ padding-top: 20px; font-size: 14px; /* white-space: normal; */ } .about .con .experience .exp .time-horizontal li .event { position: absolute; top: 60px; padding: 14px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); font-size: 14px; width: 202px; left: -22px; } .about .con .experience .exp .time-horizontal li .time { display: inherit; margin-top: -60px; } .about .con .experience .exp .time-horizontal li .time + .event { top: -215px; } .about .con .experience .exp .time-horizontal li .event::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); top: -5px; width: 10px; height: 10px; background-color: #fff; } .about .con .experience .exp .time-horizontal li .time + .event::before { top: unset; bottom: -5px; } .about .con .experience .exp .time-horizontal li .event .title { color: #252b3a; margin-bottom: 15px; font-size: 14px; text-align: left; } .about .con .experience .exp .time-horizontal li .event .detail { color: #666666; text-align: left; line-height: 28px; word-break: break-all; } .about .con .experience .exp .time-horizontal li b:before { content: ""; position: absolute; top: -5px; left: 48%; width: 9px; height: 9px; /* border: 2px solid #4c4c4c; */ border-radius: 50%; background: #ee5051; transition: all 0.3s linear; } .about .con .experience .exp .time-horizontal li:hover { color: #ee5051; } .about .con .experience .exp .time-horizontal li:hover b:before { box-shadow: 0px 0px 4px 3px rgba(238, 80, 81, 0.2); transform: scale(1.5); } .about .con .experience .exp .time-horizontal li:hover .event { background: #ee5051; } .about .con .experience .exp .time-horizontal li:hover .event::before { background-color: #ee5051; } .about .con .experience .exp .time-horizontal li:hover .event .title { color: #fff; } .about .con .experience .exp .time-horizontal li:hover .event .detail { color: #fff; } .about .con .contact { padding-top: 109px; padding-bottom: 163px; } .about .con .contact .title { color: #252b3a; font-size: 36px; text-align: center; margin-bottom: 30px; } .about .con .contact .tip { color: #666666; line-height: 28px; margin-bottom: 14px; text-align: center; } .about .con .contact .thanks { color: #252b3a; font-size: 28px; text-align: center; margin-bottom: 81px; } .about .con .contact .clearfloat { width: 1060px; margin: 0 auto; } .about .con .contact .clearfloat .card { width: 514px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .about .con .contact .clearfloat .card.left .top { height: 294px; text-align: center; background-image: url("../images/ljhy_lxwm_swhz_normal.png"); background-repeat: no-repeat; background-size: cover; transition: all 1s; } .about .con .contact .clearfloat .card.left:hover .top { background-image: url("../images/ljhy_lxwm_swhz_hover.png"); } .about .con .contact .clearfloat .card.right .top { height: 294px; text-align: center; background-image: url("../images/ljhy_lxwm_job_normal.png"); background-repeat: no-repeat; background-size: cover; transition: all 1s; } .about .con .contact .clearfloat .card.right:hover .top { background-image: url("../images/ljhy_lxwm_job_hover.png"); } .about .con .contact .clearfloat .card .top .icon { width: 62px; padding-top: 90px; margin-bottom: 25px; } .about .con .contact .clearfloat .card .top p { color: #fff; font-size: 36px; } .about .con .contact .clearfloat .card .bottom { width: 100%; height: 130px; background: #fff; padding: 25px 104px; font-size: 18px; color: #252b3a; } .about .con .contact .clearfloat .card .bottom .item { margin-bottom: 20px; } .about .con .contact .clearfloat .card .bottom .item .icon { margin-right: 10px; } .about .con .contact .clearfloat .card .bottom .item:last-child { margin-bottom: 0; } /* 鏂伴椈 */ .news { background-color: #f7f7f7; } .news .banner { width: 100%; } .news .banner img { width: 100%; } .news .con { } .news .con .news-list { width: 1200px; margin: 0 auto; display: none; padding-top: 120px; padding-bottom: 155px; } .news .con .news-list .item { width: 1200px; padding-top: 44px; border-bottom: 1px solid #aaaaaa; padding-bottom: 16px; } .news .con .news-list .item .link { display: block; width: 100%; height: 100%; } .news .con .news-list .item .link .left { width: 515px; } .news .con .news-list .item .link .left .title { font-size: 22px; color: #112142; margin-bottom: 20px; } .news .con .news-list .item .link .left .detail { color: #666666; font-size: 14px; margin-bottom: 19px; line-height: 24px; } .news .con .news-list .item .link .left .time { color: #666666; font-size: 14px; } .news .con .news-list .item .link .right { width: 195px; height: 125px; } /* 鏂颁慨鏀规柊闂婚〉闈 */ .detail_con_box { width: 1200px; margin: 0 auto; padding: 20px 0; box-sizing: border-box; } .detail_con { height: 180px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; } .detail_con_lf { width: 820px; height: 100px; } .detail_con_lf h3 { height: 24px; font-size: 22px; font-weight: 500; color: rgba(17, 33, 66, 1); line-height: 24px; } .detail_con_lf p { height: 48px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; text-overflow: ellipsis; margin: 20px 0; } .detail_con_lf span { display: block; height: 16px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 16px; } .detail_con_rt { width: 195px; height: 125px; } .detail_con_rt img { width: 100%; height: 100%; } /* 鍔犲叆鍜屾偊 */ .join { } .join .banner { position: relative; } .join .banner .slogan { text-align: center; font-size: 48px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .join .con { } .join .con .con-item { width: 1200px; margin: 0 auto; padding-top: 120px; } .join .con .benefits .title { color: #252b3a; font-size: 36px; text-align: center; margin-bottom: 30px; } .join .con .benefits .sub-title { color: #666666; line-height: 28px; margin-bottom: 42px; text-align: center; } .join .con .benefits .env-show { width: 100%; margin-bottom: 84px; } .join .con .benefits .env-show .item { float: left; width: 270px; border-radius: 6px; overflow: hidden; margin-right: 40px; margin-bottom: 83px; } .join .con .benefits .env-show .item img { width: 270px; height: auto; } .join .con .benefits .env-show .item:nth-child(4n) { margin-right: 0; } .join .con .benefits .benefits-show { padding-bottom: 154px; } .join .con .benefits .benefits-show .item { width: 300px; text-align: center; height: 240px; float: left; } .join .con .benefits .benefits-show .item .icon { padding-top: 32px; margin-bottom: 16px; width: 88px; } .join .con .benefits .benefits-show .item .name { font-size: 14px; color: #252b3a; font-weight: 500; margin-bottom: 8px; } .join .con .benefits .benefits-show .item .detail { color: #666666; font-size: 14px; line-height: 20px; } .join .con .employ { padding-top: 85px; padding-bottom: 111px; } .join .con .employ .item { margin-bottom: 20px; color: #666666; } /* 鍔犲叆鍜屾偊 鏂板tab鏍忓垏鎹㈡煡鐪嬫嫑鑱樿亴浣峴tart */ .join .con .employ .tabs_line { float: left; width: 215px; margin-right: 28px; } .join .con .employ .tabs_line .tabs_list_custom { width: 80px; height: 250px; text-align: right; font-size: 16px; margin: 0; } .join .con .employ .tabs_line .tabs_list_custom .item_custom { width: 125px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 500; color: #666666; cursor: pointer; /* margin: 0 0 5px!important; */ } .join .con .employ ul { float: left; border-left: 1px solid #dddddd; padding-left: 58px; padding-bottom: 30px; } .join .con .employ .tabs_line .tabs_list_custom .active { position: relative; color: red; } .join .con .employ .tabs_line .tabs_list_custom .active::after { content: ""; display: block; width: 2px; height: 16px; background-color: #ee5051; position: absolute; top: 12px; left: 25px; } .join .con .employ .tabs_line .tabs_list_custom .show { display: block; } /* 鍔犲叆鍜屾偊 鏂板tab鏍忓垏鎹㈡煡鐪嬫嫑鑱樿亴浣峞nd */ .join .con .employ .item:last-child { margin-bottom: 0; } .join .con .employ .item .position { font-size: 20px; height: 50px; line-height: 50px; margin-bottom: 10px; } .join .con .employ .item .duty { font-size: 16px; height: 30px; line-height: 30px; } .join .con .employ .item .duty-c { font-size: 14px; line-height: 24px; padding: 10px 0; } /* 杞挱鍥句笂灏忕櫧鐐 */ .swiper-pagination-bullets { /* bottom: 30px !important; */ position: absolute; top: 50%; right: 0px; margin-left: 96vw; } .swiper-pagination-bullet { display: block; /* width:8px; height:8px; background:rgba(255,255,255,1); opacity:0.5; transition: all 0.5s; */ width: 8px; height: 8px; background: rgba(216, 216, 216, 1); margin: 5px !important; /* position: absolute; top: 0; right: 5px; */ } .swiper-pagination-bullet-active { display: block; /* width: 42px; background: rgba(255, 255, 255, 1); border-radius: 4px; opacity: 1; */ width: 8px; height: 8px; background: rgba(238, 80, 81, 1); /* transition: all 0.5s; */ } /* 鏂伴椈璇︽儏 */ .news > .detail { width: 1200px; margin: 0 auto; padding-top: 100px; text-align: center; padding-bottom: 111px; } .news > .detail .title { height: 50px; font-size: 36px; color: #252b3a; line-height: 50px; margin-bottom: 12px; } .news > .detail .time { color: #666666; margin-bottom: 40px; } .news > .detail .content { text-align: left; color: #666666; line-height: 28px; } /* 鏂颁笟鍔′綋绯讳唬鐮 */ /* .business { position: relative; } */ .tianjia { display: none; } .xianshi { display: block; } .system_box { z-index: 10000; width: 100%; height: 468px; } .system_con { width: 1200px; margin: 0 auto; display: flex; /* position: absolute; */ background-color: #fff; box-shadow: 0px 2px 10px 0px rgba(149, 149, 149, 0.2); } .system_con_lf { width: 185px; height: 468px; box-sizing: border-box; padding-top: 62px; font-size: 16px; font-weight: 500; background-color: #526bd0; } .system_con_lf li { width: 185px; height: 50px; line-height: 50px; color: #ffffff; text-align: center; cursor: pointer; } .system_con_lf li a { color: #ffffff; } /* .system_con_lf a:hover { display: block; width: 185px; height: 50px; line-height: 50px; color: #526bd0; text-align: center; background-color: #ffffff; } */ .system_con_lf li.Active { display: block; width: 185px; height: 50px; line-height: 50px; color: #526bd0; text-align: center; background-color: #ffffff; } .system_con_lf li.Active a { color: #526bd0; } .xhqy_tabs_contentItem .p { width: 850px; padding-top: 40px; box-sizing: border-box; /* height: 77px; */ font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #a5a5ae; line-height: 24px; margin-bottom: 36px; } .xhqy_Functions { margin-top: -37px; } .xhqy_Functions_square { margin-left: 8px; display: inline-block; width: 11px; height: 11px; background: #666666; transform: rotate(45deg); transform-origin: 0 0; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin: 0 0; -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin: 0 0; -webkit-transform: rotate(45deg); /* Safari Opera and Chrome */ -webkit-transform-origin: 0 0; } .xhqy_Functions_text { height: 20px; line-height: 20px; margin-left: -2px; color: #333333; font-size: 14px; font-family: PingFangSC-Medium; font-weight: 500; } .xhqy_Functions_p { color: #a5a5ae; font-size: 14px; margin-top: -56px; } .xhqy_tabs_contentItem .xhqy_btn { display: flex; justify-content: center; align-items: center; width: 128px; height: 40px; line-height: 40px; font-size: 14px; color: #526bd0; text-align: center; border-radius: 23px; border: 1px solid rgba(82, 107, 208, 1); } .xhqy_tabs_contentItem .xhqy_btn a { color: #526bd0; } .xhqy_tabs_contentItem .xhqy_btn div { width: 14px; /* height: 10px; */ margin-left: 5px; /* background-color: pink; */ } .xhqy_tabs_contentItem .xhqy_btn div img { width: 100%; height: 100%; } /* .system_con_lf a:nth-child(1):hover { color: #526bd0; } .system_con_lf a:nth-child(2):hover { color: #526bd0; } */ /* .system_con_lf a:visited { color: rgba(37, 43, 58, 1); } */ .system_con_center { height: 395px; width: 1px; background-color: #e5e5e5; margin-left: 25px; } .system_con_rt { padding: 20px 0 20px 40px; box-sizing: border-box; } .tabs_contentItem .hy_scheme { width: 906px; height: 40px; font-size: 14px; font-family: -apple-system; font-weight: 400; color: rgba(165, 165, 174, 1); line-height: 40px; border-bottom: 0.5px solid #e5e5e5; display: flex; align-items: center; } .tabs_contentItem .hy_scheme .hy_scheme_img { width: 18px; /* height: 14px; */ margin-right: 8px; } .tabs_contentItem .hy_scheme .hy_scheme_img img { width: 100%; height: 100%; } .tabsItems_rt { display: inline-block; margin-right: 50px; } .tabsItems_lf { position: relative; top: 22px; display: inline-block; margin-right: 50px; } .tabsItems_rt { position: relative; top: 24px; } .tabsItems_lf_text { display: block; /* margin: 10px 0; */ margin-bottom: 30px; } .tabsItems_lf_NOmargin { display: block; /* margin: 10px 0; */ margin-bottom: 8px; } /* .tabsItems_lf_text:first-child a{ margin-bottom: 28px; } */ .tabsItems_lf_text a:hover { color: #526bd0; } .tabsItems_lf_btn a:hover { width: 108px; height: 29px; border: 1px solid rgba(82, 107, 208, 1); color: #526bd0; } .tabsItems_lf_text:visited { color: rgba(102, 102, 102, 1); } .tabsItems_lf_text a { display: block; height: 36px; font-size: 14px; font-weight: 600; color: #333333; line-height: 36px; font-family: -apple-system; } .tabsItems_lf_text p { display: block; height: 17px; font-size: 12px; font-weight: 400; color: rgba(118, 119, 140, 1); line-height: 17px; margin-top: -7px; } .tabsItems_lf_btn { width: 373px; display: flex; justify-content: space-between; margin-bottom: 30px; } .tabsItems_lf_btn a { display: block; width: 108px; height: 29px; line-height: 26px; text-align: center; border: 1px solid #d5d5d5; color: #76778c; font-size: 13px; font-weight: 400; } .tabsItems_lf_btn a.active { border: 1px solid rgba(82, 107, 208, 1); color: rgba(82, 107, 208, 1); } #huoqu { /* display: block; */ position: fixed; left: 0px; /* width: 2000px; */ /* position: absolute; */ margin-top: -1px; } /* 鏄熷拰鏉冪泭杩愯惀鍟?閾惰 */ .xhqy_banner_box { height: 688px; background: url("../images/xhqy_bg.png") no-repeat; background-size: cover; } .xhqy_banner { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; } .xhqy_banner_lf { padding-top: 96px; width: 520px; box-sizing: border-box; } /* .banner_lf_text { margin-bottom: 20px; } */ .banner_lf_text h4 { width: 112px; height: 40px; font-size: 24px; font-weight: 500; color: rgba(37, 43, 58, 1); line-height: 40px; margin-bottom: 16px; } .banner_lf_text p { width: 513px; height: 118px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 23px; } .banner_lf_picBox { display: flex; justify-content: space-around; width: 66px; margin-left: 220px; margin-top: -24px; } .banner_lf_pic { width: 66px; margin-right: 60px; } .lf_pic_img1 { width: 56px; height: 56px; margin: 2px auto; background: url("../images/xhqy_icon_a.svg") no-repeat; background-size: cover; } .lf_pic_img2 { width: 56px; height: 56px; margin: 2px auto; background: url("../images/xhqy_icon_b.svg") no-repeat; background-size: cover; } .lf_pic_img3 { width: 56px; height: 56px; margin: 2px auto; background: url("../images/xhqy_icon_c.svg") no-repeat; background-size: cover; } .lf_pic_img4 { width: 56px; height: 56px; margin: 2px auto; background: url("../images/xhqy_icon_d.svg") no-repeat; background-size: cover; } /* .lf_pic_img img { width: 100%; height: 100%; } */ .lf_pic_text { width: 70px; height: 17px; line-height: 17px; font-size: 12px; font-weight: 400; color: rgba(102, 102, 102, 1); text-align: center; } .xhqy_banner_rt { width: 460px; margin-right: 20px; position: absolute; left: 645px; top: 106px; } .xhqy_banner_rt img { width: 100%; height: 100%; } .join_box { height: 859px; } .joinCase { width: 1200px; margin: 0 auto; } .joinCase_top { height: 130px; display: flex; justify-content: center; align-items: center; } .joinCase_top_pic { width: 50px; } .joinCase_top_pic img { width: 100%; height: 100%; } .joinCase_top_text { /* width: 150px; */ margin: 0 30px; height: 40px; font-size: 28px; font-weight: 400; color: rgba(57, 62, 100, 1); line-height: 40px; text-align: center; } .joinCase_tab { display: flex; justify-content: center; align-items: center; border-bottom: 2px solid #e5e5e5; } .joinCase_tab li { /* width: 150px; */ height: 36px; font-size: 18px; font-weight: 500; color: rgba(102, 102, 102, 1); line-height: 31px; text-align: center; cursor: pointer; margin-bottom: -2px; z-index: 10; } .joinCase_tab_act { /* width: 72px; */ height: 25px; font-size: 18px; font-weight: 500; color: #526bd0 !important; line-height: 25px; border-bottom: 2px solid #526bd0; } .joinCase_tab_show { display: none; } .joinCase_operator, .joinCase_bank { display: flex; justify-content: space-between; position: relative; } .joinCase_operator_lf { float: left; width: 500px; box-sizing: border-box; position: absolute; left: 12px; top: 130px; } .joinCase_operator_lf p { width: 481px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; margin-bottom: 30px; } .joinCase_operator_lf h6 { width: 104px; height: 37px; font-size: 24px; font-weight: 500; color: rgba(57, 62, 100, 1); line-height: 37px; } .joinCase_operator_img { display: flex; align-items: center; } .operator_img1 { width: 155px; height: 46px; background: url("../images/xhqy_icon_yzf.svg") no-repeat; margin-right: 80px; background-size: cover; margin-top: 28px; } /* .operator_img1 img { width: 100%; height: 100%; } */ .operator_img2 { width: 167px; /* height: 65px; */ background-size: cover; margin-top: 28px; } .operator_img2 img { width: 100%; height: 100%; } .joinCase_box { height: 740px; } .joinCase_operator_rt { float: right; padding-top: 30px; box-sizing: border-box; width: 900px; position: absolute; left: 420px; top: 26px; } .joinCase_operator_rt img { display: inline-block; width: 100%; height: 100%; } /* 鍜屾偊浜 浜戞湇鍔 */ .hyy_banner_box { height: 645px; background: url("../images/xhqy_bg.png") no-repeat; background-size: cover; } .hyy_banner { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; } .hyy_banner_lf { padding-top: 159px; box-sizing: border-box; width: 520px; } .hyy_banner_lf h5 { width: 271px; height: 40px; font-size: 28px; font-weight: 500; color: rgba(37, 43, 58, 1); line-height: 40px; } .hyy_banner_lf p { width: 499px; height: 252px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; margin-top: 28px; } .hyy_banner_lf p span { display: block; } .hyy_banner_lf p .span1 { margin-bottom: 50px; } .hyy_banner_rt { width: 900px; position: absolute; top: 87px; left: 456px; } .hyy_banner_rt img { width: 100%; height: 100%; } .basicsService_BOX { height: 951px; } .basicsService { width: 1200px; margin: 0 auto; } .basicsService_con { /* height: 280px; */ display: flex; justify-content: space-between; } .basicsService_con_lf { width: 550px; } .basicsService_con_lf h5 { width: 203px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; } .basicsService_con_lf p { width: 550px; height: 32px; font-size: 16px; font-weight: 500; color: rgba(102, 102, 102, 1); line-height: 32px; } .basicsService_con_lf h6 { width: 550px; height: 130px; font-size: 14px; font-weight: 300; color: #666; line-height: 22px; } .basicsService_con_lf h6 span { font-size: 14px; font-weight: 500; color: #666; } /* 钃濊壊鑳屾櫙 */ .lan_bg { height: 30px; background-image: linear-gradient(to top, #f1f6ff, #ffffff); } .lan_bg_father { position: relative; top: 10px; } .lan_bg_other { height: 50px; position: relative; z-index: -1; left: 0px; bottom: 30px; } .scheme_Box { height: 793px; background: url("../images/all_bg_two.png") no-repeat; background-size: cover; } .scheme { width: 1200px; margin: 0 auto; } .scheme_con { margin-top: 20px; display: flex; justify-content: space-between; } .scheme_con_you .h5 { display: block; width: 203px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; } .scheme_con_you .p { display: block; margin-top: 12px; width: 326px; height: 48px; font-size: 14px; font-weight: 300; color: #666; line-height: 24px; } .scheme_con_zuo:hover, .scheme_con_you:hover { width: 384px; height: 175px; background: rgba(255, 255, 255, 1); box-shadow: 0px 4px 16px 0px rgba(149, 149, 149, 0.5); } .scheme_con_zuo, .scheme_con_you { display: block; padding: 30px; box-sizing: border-box; width: 384px; height: 175px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(149, 149, 149, 0.2); cursor: pointer; } .scheme_con_zuo h5, .scheme_con_you h5 { width: 203px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; } .scheme_con_zuo p, .scheme_con_you p { margin-top: 10px; width: 326px; height: 48px; font-size: 14px; font-weight: 300; color: #666; line-height: 24px; } .scheme_z_btn { margin-top: 4px; display: inline-block; width: 230px; display: flex; justify-content: space-between; } .scheme_z_btn a { display: block; width: 70px; height: 26px; border: 1px solid rgba(213, 213, 213, 1); font-size: 13px; font-weight: 400; color: rgba(118, 119, 140, 1); line-height: 26px; text-align: center; } .scheme_z_btn a:hover { border: 1px solid rgba(82, 107, 208, 1); color: #526bd0 !important; } .scheme_z_btn a:visited { font-size: 13px; font-weight: 400; color: rgba(118, 119, 140, 1); text-decoration: none; } .scheme_banner { width: 1198px; height: 156px; background: url("../images/banner_b.png") no-repeat cover; } .client_Box { /* height: 527px; */ margin-bottom: 50px; } .client { width: 1200px; margin: 0 auto; } .client_con { height: 162px; display: flex; justify-content: space-between; } .client_con_img1 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_a.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img2 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_b.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img3 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_c.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img4 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_d.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img5 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_e.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img6 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_f.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img7 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_g.svg") no-repeat; background-size: cover; margin: 8px; } .client_con_img8 { width: 300px; /* height: 162px; */ background: url("../images/xhqy_logo_h.svg") no-repeat; background-size: cover; margin: 8px; } /* .client_con_img img { width: 100%; height: 100%; } */ /* 鏅烘収鍥尯瑙e喅鏂规 */ .zh_garden_banner { height: 440px; /* background: url('../images/') no-repeat; */ background-color: pink; /* background-size: cover; */ } .zh_garden_con { width: 1200px; margin: 0 auto; } .zh_garden_con h5 { padding-top: 113px; box-sizing: border-box; width: 400px; height: 50px; font-size: 40px; font-weight: 500; color: rgba(51, 51, 51, 1); line-height: 50px; } .zh_garden_con p { padding-top: 65px; box-sizing: border-box; width: 520px; height: 88px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 22px; } .garden_business_box { height: 520px; background: url("../images/all_bg_one.png") no-repeat; background-size: cover; } .garden_business_con { width: 1200px; margin: 0 auto; } .business_need_tp { display: flex; justify-content: space-between; } .business_need_tp div { padding-left: 30px; padding-top: 34px; padding-right: 28px; box-sizing: border-box; width: 587px; height: 140px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(149, 149, 149, 0.2); } .business_need_tp div h6 { /* width: 223px; */ height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; } .business_need_tp div p { /* width: 326px; */ height: 28px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; } .garden_function_box { /* height: 978px; */ background: url("../images/all_bg_two.png") no-repeat; background-size: cover; } .garden_function_con { width: 1200px; margin: 0 auto; } .garden_function_top { display: flex; justify-content: space-between; } .garden_function_toplf { width: 670px; } .function_toplf_num { margin-bottom: 10px; } .function_toplf_num div { display: flex; align-items: center; } .function_toplf_num div .span_texts { margin-top: 5px; color: #666666; font-size: 15px; /* font-weight: 500; */ } .function_toplf_num div .span_text { margin-top: 5px; color: #666666; font-size: 15px; font-weight: 450; /* font-family:PingFangSC-Medium; */ font-family: PingFangSC-Medium, sans-serif; /* font-family: PingFangSC-Semibold, sans-serif; */ } .function_toplf_num div .span_square { margin-left: 8px; margin-right: 3px; display: inline-block; width: 11px; height: 11px; background: rgba(102, 102, 102, 1); transform: rotate(45deg); transform-origin: 0 0; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin: 0 0; -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin: 0 0; -webkit-transform: rotate(45deg); /* Safari Opera and Chrome */ -webkit-transform-origin: 0 0; } .function_toplf_num div .span_yuan { width: 6px; height: 6px; background: rgba(102, 102, 102, 1); border-radius: 50%; margin-top: 6px; margin-right: 3px; } .function_toplf_num p { height: 24xp; line-height: 24px; margin-top: 8px; color: #666666; font-size: 14px; /* font-weight: 400; */ /* font-family: PingFangSC-Medium, sans-serif; */ } .garden_function_toprt { width: 472px; /* background-color: #526bd0; */ } .garden_function_toprt img { width: 100%; height: 100%; } .garden_function_icon { display: flex; justify-content: space-between; align-items: center; margin-top: 60px; } .function_icon { width: 322px; } .function_icon .function_icon_svg1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/power_icon_c.svg") no-repeat; background-size: cover; } .function_icon h5 { height: 26px; line-height: 26px; text-align: center; color: #526bd0; font-size: 20px; } .function_icon p { height: 26px; line-height: 20px; color: #666666; font-size: 13px; text-align: center; } .garden_apply_box { height: 390px; } .garden_apply_con { width: 1200px; margin: 0 auto; } .apply_con_pic { display: flex; justify-content: center; } .apply_con_pic div { width: 290px; height: 232px; /* background-color: pink; */ position: relative; } .apply_con_pic div p { height: 28px; font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .garden_practice_box { height: 416px; } .garden_practice_con { width: 1200px; margin: 0 auto; } .garden_practice { height: 201px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 12px 0px rgba(149, 149, 149, 0.25); padding: 39px 64px 0 61px; box-sizing: border-box; } .garden_practice h5 { width: 247px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(57, 62, 100, 1); line-height: 28px; margin-bottom: 9px; } .garden_practice p { /* height: 75px; */ font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; } /* 鏅烘収闆跺敭鏈嶅姟瑙e喅鏂规 */ .retail_practice { height: 201px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 12px 0px rgba(149, 149, 149, 0.25); padding: 0 64px 0 78px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; } .retail_practice_lf { width: 152px; height: 201px; background-color: skyblue; } /* .retail_practice_lf img{ width: 100%; height: 100%; } */ .retail_practice_rt { width: 861px; } .retail_practice_rt h5 { height: 28px; font-size: 20px; font-weight: 500; color: rgba(57, 62, 100, 1); line-height: 28px; margin-bottom: 9px; } .retail_practice_rt p { height: 75px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; } /* 鏅烘収宸ヤ笟鏈嶅姟瑙e喅鏂规 */ .industrial_need { display: flex; justify-content: space-between; } .industrial_need div { width: 387px; height: 223px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(149, 149, 149, 0.2); padding: 34px 24px 0 30px; box-sizing: border-box; } .industrial_need div h5 { margin-bottom: 14px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; } .industrial_need div p { height: 104px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; } /* 鏅烘収浜ら€氭湇鍔¤В鍐虫柟妗 */ .traffic_function { } .traffic_function_gj { position: relative; } /* 鏅烘収鍔犳补鏈嶅姟瑙e喅鏂规 */ .refuel_href { display: flex; justify-content: center; align-items: center; height: 60px; background-color: rgba(16, 29, 72, 0.59); /* position: absolute; */ margin-top: 170px; } .refuel_href li { height: 60px; line-height: 60px; display: block; font-weight: 100; color: rgba(255, 255, 255, 1); font-size: 15px; } .refuel_href li a { color: rgba(255, 255, 255, 1); font-size: 15px; } /* .refuel_href li:hover { border-bottom: 3px solid #ee5051; } */ .linkList_active { border-bottom: 3px solid #ee5051; font-weight: 400 !important; /* height: 10px; */ } .joinCase_tab_Act { width: 75px; font-size: 18px; font-weight: 500; color: #526bd0 !important; line-height: 25px; border-bottom: 2px solid #526bd0; } /* 鏅烘収鐭垮北鏈嶅姟瑙e喅鏂规 */ .mine_needs { display: flex; } .mine_needs div { padding: 34px 24px 0 30px; box-sizing: border-box; width: 387px; height: 277px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(149, 149, 149, 0.2); } .mine_needs div h6 { width: 223px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; margin-bottom: 14px; } .mine_needs div p { width: 333px; height: 147px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; } /* 鏅烘収鐢电綉鏈嶅姟瑙e喅鏂规 */ .power_needs_con { display: flex; } .power_needs_con div { padding: 34px 28px 0 30px; box-sizing: border-box; width: 587px; height: 190px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 10px 0px rgba(149, 149, 149, 0.2); } .power_needs_con div h5 { width: 295px; height: 28px; font-size: 20px; font-weight: 500; color: rgba(82, 107, 208, 1); line-height: 28px; margin-bottom: 14px; } .power_needs_con div p { width: 529px; height: 48px; font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 24px; } .retail_practice_lf_hrwj { /* margin: 0 auto 20px; */ width: 152px; height: 60px; background: url("../images/retail_icon_logo.svg") no-repeat; /* background-size: cover; */ } .function_icon_fin1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/finance_icon_a.svg") no-repeat; background-size: cover; } .function_icon_fin2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/finance_icon_b.svg") no-repeat; background-size: cover; } .function_icon_fin3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/finance_icon_c.svg") no-repeat; background-size: cover; } .retail_practice_zsyh { /* margin: 0 auto; */ width: 116px; height: 95px; background: url("../images/finance_icon_logo.svg") no-repeat; /* background-size: cover; */ } .garden_function_toprt { display: flex; } .function_toprt_pica { width: 286px; background: url("../images/finance_pic_a.png") no-repeat; background-size: cover; margin-right: 18px; } .function_toprt_picb { width: 286px; background: url("../images/finance_pic_b.png") no-repeat; background-size: cover; } .function_toprt_gya { width: 286px; background: url("../images/finance_pic_b.png") no-repeat; background-size: cover; } .function_toprt_gyb { width: 286px; background: url("../images/finance_pic_b.png") no-repeat; background-size: cover; } .function_icon_gd { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/industry_icon_a.svg") no-repeat; background-size: cover; } .function_icon_yy { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/industry_icon_b.svg") no-repeat; background-size: cover; } .function_icon_dw { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/industry_icon_c.svg") no-repeat; background-size: cover; } .garden_bnr { /* height: 440px; */ background: url("../images/technology_pic_banner@2x.png") no-repeat; background-size: 100% 100%; } .garden_function_yq { width: 472px; background: url("../images/technology_pic_a.png") no-repeat; background-size: cover; } .garden_apply_img1 { /* width:290px; */ background: url("../images/technology_pic_b.png") no-repeat; background-size: cover; } .garden_apply_img2 { /* width:290px; */ background: url("../images/technology_pic_c.png") no-repeat; background-size: cover; } .garden_apply_img3 { /* width:290px; */ background: url("../images/technology_pic_d.png") no-repeat; background-size: cover; } .garden_apply_img4 { /* width:290px; */ background: url("../images/technology_pic_e.png") no-repeat; background-size: cover; } .retail_bnr { background: url("../images/retail_pic_banner.png") no-repeat; background-size: 100% 100%; } .garden_function_ls { width: 587px; background: url("../images/retail_pic_a.png") no-repeat; background-size: cover; } .garden_apply_ls1 { /* width:290px; */ background: url("../images/retail_pic_b.png") no-repeat; background-size: cover; } .garden_apply_ls2 { /* width:290px; */ background: url("../images/retail_pic_c.png") no-repeat; background-size: cover; } .garden_apply_ls3 { /* width:290px; */ background: url("../images/retail_pic_d.png") no-repeat; background-size: cover; } .garden_apply_ls4 { /* width:290px; */ background: url("../images/retail_pic_e.png") no-repeat; background-size: cover; } .financial_bnr { background: url("../images/finance_pic_banner.png") no-repeat; background-size: 100% 100%; } .garden_apply_jr1 { width: 388px !important; background: url("../images/finance_pic_c.png") no-repeat; background-size: cover; } .garden_apply_jr2 { width: 388px !important; background: url("../images/finance_pic_d.png") no-repeat; background-size: cover; } .garden_apply_jr3 { width: 388px !important; background: url("../images/finance_pic_e.png") no-repeat; background-size: cover; } .industrial_bnr { background: url("../images/industry_pic_banner.png") no-repeat; background-size: 100% 100%; } .function_icon_yq1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/technology_icon_a.svg") no-repeat; background-size: cover; } .function_icon_yq2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/technology_icon_b.svg") no-repeat; background-size: cover; } .function_icon_yq3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/technology_icon_c.svg") no-repeat; background-size: cover; } .garden_function_gy { width: 590px; background: url("../images/industry_pic_a.png") no-repeat; background-size: cover; } .function_icon_gy1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/industry_icon_a.svg") no-repeat; background-size: cover; } .function_icon_gy2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/industry_icon_b.svg") no-repeat; background-size: cover; } .function_icon_gy3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/industry_icon_c.svg") no-repeat; background-size: cover; } .garden_apply_gy1 { width: 290px !important; background: url("../images/industry_pic_b.png") no-repeat; background-size: cover; } .garden_apply_gy2 { width: 290px !important; background: url("../images/industry_pic_c.png") no-repeat; background-size: cover; } .garden_apply_gy3 { width: 290px !important; background: url("../images/industry_pic_d.png") no-repeat; background-size: cover; } .garden_apply_gy4 { width: 290px !important; background: url("../images/industry_pic_e.png") no-repeat; background-size: cover; } .EC_bnr { background: url("../images/electronic_pic_banner.png") no-repeat; background-size: 100% 100%; } .garden_function_EC { width: 532px; background: url("../images/electronic_pic_a.png") no-repeat; background-size: cover; } .function_icon_EC1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/electronic_icon_a.svg") no-repeat; background-size: cover; } .function_icon_EC2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/electronic_icon_b.svg") no-repeat; background-size: cover; } .function_icon_EC3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/electronic_icon_c.svg") no-repeat; background-size: cover; } .garden_apply_EC1 { width: 607px !important; background: url("../images/electronic_pic_b.png") no-repeat; background-size: cover; } .work_bnr { background: url("../images/shaqiu_pic_banner.png") no-repeat; background-size: 100% 100%; } .garden_function_bgong { width: 583px; background: url("../images/shaqiu_pic_a.png") no-repeat; background-size: cover; } .function_icon_sq1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/shaqiu_icon_a.svg") no-repeat; background-size: cover; } .function_icon_sq2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/shaqiu_icon_b.svg") no-repeat; background-size: cover; } .function_icon_sq3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/shaqiu_icon_c.svg") no-repeat; background-size: cover; } .garden_apply_qy1 { width: 408px !important; background: url("../images/shaqiu_pic_b.png") no-repeat; background-size: cover; } .garden_apply_qy2 { width: 408px !important; background: url("../images/shaqiu_pic_c.png") no-repeat; background-size: cover; } .garden_apply_qy3 { width: 408px !important; background: url("../images/shaqiu_pic_d.png") no-repeat; background-size: cover; } .retail_practice_lf_hylg { width: 177px; height: 26px; margin: 0 auto; background: url("../images/shaqiu_icon_logo.svg") no-repeat; } .gj_bnr { background: url("../images/ditie_banner.png") no-repeat; background-size: 100% 100%; } .traffic_bnr { background: url("../images/gongjiao_banner.png") no-repeat; background-size: 100% 100%; } .function_toprt_gja { width: 286px; background: url("../images/traffic_pic_a.png") no-repeat; background-size: contain; margin-right: 18px; } .function_toprt_gjb { width: 286px; background: url("../images/traffic_pic_b.png") no-repeat; background-size: contain; } .function_icon_gj1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/traffic_icon_d.svg") no-repeat; background-size: cover; } .function_icon_gj2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/traffic_icon_b.svg") no-repeat; background-size: cover; } .function_icon_gj3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/traffic_icon_c.svg") no-repeat; background-size: cover; } .function_toprt_dta { margin-top: 5px; width: 286px; background: url("../images/traffic_pic_e.png") no-repeat; background-size: contain; margin-right: 18px; } .function_toprt_dtb { margin-top: 5px; width: 286px; background: url("../images/traffic_icon_f.png") no-repeat; background-size: contain; margin-right: 18px; } .function_icon_dt1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/traffic_icon_a.svg") no-repeat; background-size: cover; } .function_icon_dt2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/traffic_icon_e.svg") no-repeat; background-size: cover; } .function_icon_dt3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/traffic_icon_f.svg") no-repeat; background-size: cover; } .garden_apply_jt1 { width: 587px !important; background: url("../images/traffic_pic_c.png") no-repeat; background-size: cover; } .garden_apply_jt2 { width: 587px !important; background: url("../images/traffic_pic_d.png") no-repeat; background-size: cover; } .retail_practice_lf_bjgj { width: 135px; height: 79px; background: url("../images/traffic_icon_logo.svg") no-repeat; background-size: contain; } .refuel_bnr { background: url("../images/energy_pic_banner.png") no-repeat; background-size: 100% 100%; } .function_toprt_jy1 { width: 286px; background: url("../images/energy_pic_a.png") no-repeat; background-size: cover; margin-right: 18px; } .function_toprt_jy2 { width: 286px; background: url("../images/energy_pic_b.png") no-repeat; background-size: cover; } .garden_apply_jy1 { width: 388px !important; background: url("../images/energy_pic_c.png") no-repeat; background-size: cover; } .garden_apply_jy2 { width: 388px !important; background: url("../images/energy_pic_d.png") no-repeat; background-size: cover; } .garden_apply_jy3 { width: 388px !important; background: url("../images/energy_pic_e.png") no-repeat; background-size: cover; } .mine_bnr { background: url("../images/mine_pic_banner.png") no-repeat; background-size: 100% 100%; } .garden_function_ks { width: 490px; background: url("../images/mine_pic_a.png") no-repeat; background-size: cover; } .function_icon_ks1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/mine_icon_a.svg") no-repeat; background-size: cover; } .function_icon_ks2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/mine_icon_b.svg") no-repeat; background-size: cover; } .function_icon_ks3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/mine_icon_c.svg") no-repeat; background-size: cover; } .garden_apply_ks1 { width: 587px !important; height: 282px !important; background: url("../images/mine_pic_b.png") no-repeat; background-size: cover; } .garden_apply_ks2 { width: 587px !important; height: 282px !important; background: url("../images/mine_pic_c.png") no-repeat; background-size: cover; } .power_bnr { background: url("../images/power_banner.png") no-repeat; background-size: 100% 100%; } .garden_function_dw { width: 475px; background: url("../images/power_pic_a.png") no-repeat; background-size: cover; } .function_icon_dw1 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/power_icon_a.svg") no-repeat; background-size: cover; } .function_icon_dw2 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/power_icon_b.svg") no-repeat; background-size: cover; } .function_icon_dw3 { margin: 0 auto 20px; width: 110px; height: 128px; background: url("../images/power_icon_c.svg") no-repeat; background-size: cover; } .garden_apply_dw1 { width: 587px !important; height: 282px !important; background: url("../images/power_pic_b.png") no-repeat; background-size: cover; } .garden_apply_dw2 { width: 587px !important; height: 282px !important; background: url("../images/power_pic_c.png") no-repeat; background-size: cover; } .shape-ele { width: 100%; height: 14px; } .shape-ele img { width: 100%; height: 100%; } .equipment-tabs-wrap { display: flex; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin: 14px auto 29px; } .equipment-tab-item { padding: 7px 22px; line-height: 19px; font-family: PingFangSC-Regular; font-size: 16px; color: #4b5154; cursor: pointer; } .equipmentActive { background: #526bd0; font-family: PingFangSC-Regular; color: #fff; } /* 鎵嬮鐞 */ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; } .desktop-wrapper { /* height: 294px; */ /* display: flex; justify-content: center; */ overflow: hidden; } .info-wrapper_flex { display: flex; } .info-wrapper_rt { width: 394px; background-color: #fff; } .desktop-wrapper .options { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; width: 100%; height: 400px; } .desktop-wrapper .options .option { position: relative; overflow: hidden; min-width: 80px; background-size: 750px auto; background-repeat: no-repeat; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); color: #fff; } .desktop-wrapper .options .option.active { flex-grow: 10000; -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; } .desktop-wrapper .options .option.active > div { z-index: 1; } .desktop-wrapper .options .option.active > div .info-wrapper { z-index: 999; } .desktop-wrapper .options .option.active > div .info-wrapper .title { font-size: 1.953rem; text-transform: uppercase; line-height: 1; opacity: 1; position: relative; margin: 0 0 0.5rem; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .desktop-wrapper .options .option.active > div .info-wrapper .subtitle { color: white; font-size: 0.9rem; letter-spacing: 0.035rem; line-height: 1.125; margin: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .desktop-wrapper .options .option.active > div .info-wrapper .description { left: 0px; opacity: 1; margin-top: 1.5rem; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; } .desktop-wrapper .options .option.active > div .info-wrapper .description p { line-height: 1.5; margin-bottom: 1.5rem; } .desktop-wrapper .options .option.active > div .info-wrapper .ext-link { text-decoration: none; width: 6rem; color: #e9ecef; text-shadow: 1px 2px 4px rgba(33, 37, 41, 0.5); box-shadow: 2px 2px 4px rgba(33, 37, 41, 0.3); background: rgba(255, 255, 255, 0.1); padding: 0.35rem 0.75rem; position: relative; overflow: hidden; transition: all 0.2s linear 0s; } .desktop-wrapper .options .option.active > div .info-wrapper .ext-link:after { position: absolute; transition: 0.3s; content: ""; width: 0; left: 0; bottom: 0; height: 0.15rem; background: rgba(255, 255, 255, 0.2); } .desktop-wrapper .options .option.active > div .info-wrapper .ext-link:hover { text-shadow: none; box-shadow: 3px 3px 8px rgba(33, 37, 41, 0.6); background: rgba(255, 255, 255, 0.15); color: #fff; } .desktop-wrapper .options .option.active > div .info-wrapper .ext-link:hover:after { left: 0; width: 100%; } .desktop-wrapper .options .option.active > div:before { content: ""; position: absolute; height: 100%; width: 101%; top: 0; left: 0; z-index: 1; background: -moz-linear-gradient( top, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0) 100% ); /* FF3.6-15 */ background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0) 100% ); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient( to bottom, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0) 100% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .desktop-wrapper .options .option.active > div .icon-wrapper { display: flex; align-items: flex-start; align-content: baseline; } .desktop-wrapper .options .option.active > div .icon-wrapper .category-text { opacity: 1; display: initial; -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .desktop-wrapper .options .option.active > div .icon-wrapper .category-icon:before { opacity: 1; } .desktop-wrapper .options .option:not(.active) { flex-grow: 1; filter: grayscale(70%); } .desktop-wrapper .options .option:not(.active):hover { filter: grayscale(0%); } .desktop-wrapper .options .option:not(.active):hover > div:before { background: rgba(2, 24, 31, 0.5); } .desktop-wrapper .options .option:not(.active) > div .title, .desktop-wrapper .options .option:not(.active) > div .subtitle, .desktop-wrapper .options .option:not(.active) > div .description { opacity: 0; } .desktop-wrapper .options .option:not(.active) > div .icon-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-end; flex-direction: column; align-items: center; padding-bottom: 1rem; } .desktop-wrapper .options .option:not(.active) > div .icon-wrapper .category-icon:before { opacity: 0.5; } .desktop-wrapper .options .option:not(.active) > div:before { background: rgba(52, 58, 64, 0.6); content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .desktop-wrapper .options .option > div { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; position: absolute; top: 0; left: 0; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .desktop-wrapper .options .option > div .icon-wrapper .category-text { line-height: 40px; padding-left: 0.75rem; opacity: 0; display: none; } .desktop-wrapper .options .option > div .icon-wrapper .category-icon { display: flex; align-items: flex-start; width: 40px; height: 40px; border-radius: 100%; position: relative; box-shadow: 0 2px 9px rgba(33, 37, 41, 0.4); } .desktop-wrapper .options .option > div .icon-wrapper .category-icon:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; -webkit-mask-image: url(../images/sports_biotech_icon.svg); mask-image: url(../images/sports_biotech_icon.svg); background-color: #fff; height: 20px; width: 21px; } .desktop-wrapper .options .option > div .icon-wrapper.sb .category-icon { background-color: #0dafe0; } .desktop-wrapper .options .option > div .icon-wrapper.ce .category-icon { background-color: #f2501f; } .options > :nth-child(1) { background-color: #515272; background-image: url("../images/playr.jpg"); background-position: center center; background-size: cover; } .options > :nth-child(2) { background-color: #6c3f31; background-image: url("../images/encased.jpg"); background-position: center center; background-size: cover; } .options > :nth-child(3) { background-color: #323119; background-image: url("../images/orthomovement.jpg"); background-position: center center; background-size: cover; } .options > :nth-child(4) { background-color: #5d92cb; background-image: url("../images/spyslide.jpg"); background-position: center center; background-size: cover; } .options > :nth-child(5) { background: #e9ecef; background-image: url("../images/tapedesign.jpg"); background-position: center center; background-size: cover; } .options > :nth-child(6) { background-color: #112a3b; background-image: url("../images/bolleraven.jpg"); background-position: center center; background-size: cover; } .mobile-wrapper { height: initial; max-width: 320px; margin: 0 auto; } .mobile-wrapper .options { position: relative; height: auto; max-width: none !important; flex-basis: 100% !important; } .mobile-wrapper .options .option { position: relative; overflow: hidden; background-size: auto 120%; background-position: center; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); color: #fff; } .mobile-wrapper .options .option > div { z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; padding: 2rem 1rem 1rem; top: 0; left: 0; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .mobile-wrapper .options .option > div .info-wrapper { z-index: 999; } .mobile-wrapper .options .option > div .info-wrapper .title { font-size: 1.5rem; text-shadow: 1px 2px 4px rgba(33, 37, 41, 0.5); text-transform: uppercase; line-height: 1; opacity: 1; position: relative; margin: 0 0 0.5rem; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .mobile-wrapper .options .option > div .info-wrapper .subtitle { color: white; font-size: 0.8rem; letter-spacing: 0.06rem; line-height: 1.125; margin: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .mobile-wrapper .options .option > div .info-wrapper .description { left: 0px; opacity: 1; margin-top: 1.5rem; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; } .mobile-wrapper .options .option > div .info-wrapper .description p { line-height: 1.5; margin-bottom: 1.5rem; } .mobile-wrapper .options .option > div .info-wrapper .ext-link { text-decoration: none; width: 6rem; color: #e9ecef; text-shadow: 1px 2px 4px rgba(33, 37, 41, 0.5); box-shadow: 2px 2px 4px rgba(33, 37, 41, 0.3); background: rgba(255, 255, 255, 0.1); padding: 0.35rem 0.75rem; position: relative; overflow: hidden; transition: all 0.2s linear 0s; } .mobile-wrapper .options .option > div .info-wrapper .ext-link:after { position: absolute; transition: 0.3s; content: ""; width: 0; left: 0; bottom: 0; height: 0.15rem; background: rgba(255, 255, 255, 0.2); } .mobile-wrapper .options .option > div .info-wrapper .ext-link:hover { text-shadow: none; box-shadow: 3px 3px 8px rgba(33, 37, 41, 0.6); background: rgba(255, 255, 255, 0.15); color: #fff; } .mobile-wrapper .options .option > div .info-wrapper .ext-link:hover:after { left: 0; width: 100%; } .mobile-wrapper .options .option > div .icon-wrapper { width: 100%; display: flex; align-items: center; padding: 2rem 0 0; z-index: 999; opacity: 0.8; } .mobile-wrapper .options .option > div .icon-wrapper .category-text { line-height: 40px; padding-left: 0.75rem; } .mobile-wrapper .options .option > div .icon-wrapper .category-icon { display: flex; align-items: flex-start; width: 32px; height: 32px; border-radius: 100%; position: relative; box-shadow: 0 2px 9px rgba(33, 37, 41, 0.4); } .mobile-wrapper .options .option > div .icon-wrapper .category-icon:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; -webkit-mask-image: url(../images/sports_biotech_icon.svg); mask-image: url(../images/sports_biotech_icon.svg); background-color: #fff; height: 16px; width: 16px; } .mobile-wrapper .options .option > div .icon-wrapper.sb .category-icon { background-color: #0dafe0; } .mobile-wrapper .options .option > div .icon-wrapper.ce .category-icon { background-color: #f2501f; } .mobile-wrapper .options .option > div:before { content: ""; position: absolute; height: 100%; width: 101%; top: 0; left: 0; z-index: 1; background: rgba(52, 58, 64, 0.7); -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .container .row h4:first-of-type { text-align: center; margin: 0 auto; padding-bottom: 1rem; } /* 鎵嬫寚鏀句笂鍘绘樉绀 */ .product_card_container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cards { width: 220px; height: 190px; text-align: center; padding-top: 37px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; margin-right: 20px; margin-top: 20px; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .card_icon1 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_a.png") no-repeat; background-size: cover; } .card_icon2 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_b.png") no-repeat; background-size: cover; } .card_icon3 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_c.png") no-repeat; background-size: cover; } .card_icon4 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_d.png") no-repeat; background-size: cover; } .card_icon5 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_e.png") no-repeat; background-size: cover; } .card_icon6 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_f.png") no-repeat; background-size: cover; } .card_icon7 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_g.png") no-repeat; background-size: cover; } .card_icon8 { position: relative; width: 280px; height: 330px; /* background-color: #0dafe0; */ background: url("../images/ditie_sjfa_pic_h.png") no-repeat; background-size: cover; } .card_text { position: absolute; left: 26px; bottom: 26px; font-size: 24px; font-family: PingFangSC-Medium; font-weight: 500; color: #fff; } .hover_card { padding: 20px 0 0 17px; box-sizing: border-box; width: 280px; height: 330px; position: absolute; display: none; top: 0; left: 0; z-index: 1; background-color: #526bd0; padding: 32px 25px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left; } .hover_card_con { font-size: 13px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: 22px; } .hover_card_text { position: absolute; left: 26px; bottom: 26px; font-size: 24px; font-family: PingFangSC-Medium; font-weight: 500; color: #fff; } .cloud { height: 923px; background: url('../images/ditie_iconpic_bg_b.png') no-repeat; background-size: cover; /* margin-bottom: 10px; */ } .cloud_conbox { width: 1160px; height: 251px; position: relative; } .cloud_item { /* display: none; */ } .cloud_item img{ width: 100%; height: 100%; } .cloud_itemAcitve { display: none; height: 251px; position: absolute; top: -90px; left: 0; } .cloud_itemAcitve img{ width: 100%; height: 100%; } .strengths-wrappers { /* margin-bottom: 118px; */ background: url("../images/ditie_iconpic_bg_a.png") no-repeat; background-size: cover; }