/*閫氱敤*/ /*----------------------------------------------------------------*/ .swiper-slide img { display: block; width: 100%; } .sample-bottom-swiper .swiper-slide{ width: 150px !important; } .sample-bottom-swiper .swiper-slide img{ aspect-ratio: 150/102; object-fit: contain; width: 150px; } .pc-common-pagination { position: absolute; left: 50%; transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); } .pc-common-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: #c9caca; margin: 0 4px; opacity: 1; } .pc-common-pagination .swiper-pagination-bullet-active { background: #004898; } /*.pc-common-prev:hover, .pc-common-next:hover { } */ .m-common-pagination { margin-top: 0 !important; position: absolute; left: 50%; transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); } .m-common-pagination .swiper-pagination-bullet { width: 7px; height: 7px; background: #c9caca; margin: 0 4px; opacity: 1; } .m-common-pagination .swiper-pagination-bullet-active { background: #004898; } .m-common-next, .m-common-prev { width: 36px; height: 36px; background-image: none; text-align: center; background-color: rgba(255, 255, 255, .65); } .m-common-next { right: 0; } .m-common-next .icon--8::before, .m-common-prev .icon---::before { font-size: 30px; line-height: 36px; color: #333; } .m-common-prev { left: 0; } .t3-header { background-color: transparent; } .t3-mainnav { background-color: transparent; } .t3-mainbody { margin-top: 0; } .navbar-default { border-bottom: none; } .smaller .t3-header { background-color: #FFF; } .smaller .t3-mainnav .t3-navbar { background-color: #FFF; } .common-mask { top: 114px !important; } .video-js .vjs-big-play-button { /*width: 120px; height: 120px;*/ } @media only screen and (max-width: 1024px) { .t3-mainbody { margin-top: 0; } .navbar-default { border-bottom: none; background-color: #FFF; } .off-canvas-toggle { border-bottom: none !important; } .sample-bottom-swiper .swiper-slide{ width: 74px !important; } .sample-bottom-swiper .swiper-slide img{ aspect-ratio: 150/102; object-fit: contain; width: 74px; } } /*----------------------------------------------------------------*/ /*鍥剧墖鏀惧ぇ*/ /*-----------------------------------------------------------------*/ /*鍥剧墖鏀惧ぇ*/ .mask-layer-container{ width: 80%; display: flex; display: -webkit-flex; align-items: flex-start; -webkit-align-items: flex-start; } .mask-layer-container .sample-item { margin-bottom: 0; } .mask-left{ flex: 1; -ms-flex: 1; -webkit-flex: 1; max-width: 48%; padding-bottom: 50px; margin-right: 4%; } .mask-right{ flex: 1; -ms-flex: 1; -webkit-flex: 1; } .mask-left .swiper-wrapper { cursor: default; } .mask-left .sample-bottom-swiper { margin-top: 16px; } .mask-left .sample-bottom-swiper .swiper-slide.swiper-slide-thumb-active::after { content: ''; display: block; width: 100%; height: 4px; background-color: #00ffff; margin-top: 4px; } .mask-left .sample-bottom-swiper .swiper-slide:not(.swiper-slide-thumb-active)::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .35); cursor: pointer; } .mask-right{ color: #FFFFFF; font-size: 24px; padding-bottom: 50px; position: relative; } .mask-layer-container.no-mask-right { display: block; } .mask-layer-container.no-mask-right .mask-right{ display: none; } .mask-layer-container.no-mask-right .mask-left { width: 100%; max-width: 100%; margin-right: 0; padding-bottom: 24px; padding-top: 0; } .sample-name{ font-size: 36px; line-height: 48px; margin-bottom: 24px; font-weight: 600; } .sample-item{ line-height: 36px; cursor: pointer; font-size: 18px; font-weight: 600; } .sample-mores{ margin-left: -16px; margin-top: 24px; } .sample-more, .sample-more:hover, .sample-more:visited, .sample-more:link{ display: inline-block; margin-left: 16px; width: 132px; height: 42px; color: #FFFFFF; background: #004898 !important; text-align: center; line-height: 42px; border-radius: 30px; font-size: 18px; cursor: pointer; } .sample-info{ display: flex; display: -ms-flexbox; display: -webkit-flex; } .sample-title{ text-align: right; flex-shrink: 0; -webkit-flex-shrink: 0; } .sample-content{ margin-left: 15px; } .sample-top-swiper .swiper-slide.swiper-slide-active, .sample-bottom-swiper .swiper-slide{ background: linear-gradient(103deg, #DDD 0%, #F5F5F5 100%); } @media only screen and (max-width: 1599px) { .mask-layer-container { width: 75%; } .mask-right { font-size: 22px; } .sample-name { font-size: 28px; margin-bottom: 45px; } .sample-item { line-height: 34px; } } @media only screen and (max-width: 1299px) { .mask-right { font-size: 20px; } .sample-name { font-size: 26px; margin-bottom: 40px; } .sample-item { line-height: 32px; } } @media only screen and (max-width: 1024px) { .mask-layer-container { display: block; width: 100%; padding: 0 15px; top: 135px; left: 50%; transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); padding-bottom: 40px; } .mask-left { width: 100%; max-width: 100%; margin-right: 0; padding-bottom: 24px; padding-top: 0; } .mask-right { padding-top: 0; padding-bottom: 0; } .mask-prev, .mask-next { display: none; } .sample-name { font-size: 20px; line-height: 34px; margin-bottom: 12px; } .mask-layer-container .sample-item { font-size: 14px; line-height: 24px; } .sample-more, .sample-more:hover, .sample-more:visited, .sample-more:link { width: 114px; height: 36px; line-height: 36px; font-size: 14px; margin-top: 24px; } } /*-----------------------------------------------------------*/ /*棣栭〉椤堕儴杞挱*/ /*-----------------------------------------------------*/ .home-swiper_pc { position: relative; width: 100%; } .home-swiper_m { display: none; } .home-main-swiper a.swiper-slide { display: block; } .home-main-swiper a.swiper-slide video { width: 100%; } .home-main-desc-swiper { width: 1020px; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); padding-top: 40px; padding-bottom: 20px; } .home-main-desc-swiper .swiper-slide { padding: 0 40px; box-sizing: border-box; } .big-title { font-family: "闃块噷宸村反鏅儬浣 Bold"; font-size: 46px; color: #FFFFFF; text-align: center; margin-bottom: 40px; } .big-title.only-title { font-size: 42px; } .small-title { font-family: "闃块噷宸村反鏅儬浣 Regular"; font-size: 28px; color: #FFFFFF; text-align: center; margin-bottom: 24px; } .home-main-desc-swiper .home-main-swiper-pagination { bottom: 16px; } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet { width: 120px; height: 2px; background-color: rgba(255, 255, 255, .2); margin: 0 4px; border-radius: 0; opacity: 1 } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet-active .line-filled { width: 0; height: 100%; background: #FFF; } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active .line-filled { animation: lineFilled 5s linear; -moz-animation: lineFilled 5s linear; /* Firefox */ -webkit-animation: lineFilled 5s linear; /* Safari 氓鈥櫯 Chrome */ -o-animation: lineFilled 5s linear; } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active .line-filled { animation: lineFilled 6.3s linear; -moz-animation: lineFilled 6.3s linear; /* Firefox */ -webkit-animation: lineFilled 6.3s linear; /* Safari 氓鈥櫯 Chrome */ -o-animation: lineFilled 6.3s linear; } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active .line-filled { animation: lineFilled 8.9s linear; -moz-animation: lineFilled 8.9s linear; /* Firefox */ -webkit-animation: lineFilled 8.9s linear; /* Safari 氓鈥櫯 Chrome */ -o-animation: lineFilled 8.9s linear; } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active .line-filled { animation: lineFilled 7s linear; -moz-animation: lineFilled 7s linear; /* Firefox */ -webkit-animation: lineFilled 7s linear; /* Safari 氓鈥櫯 Chrome */ -o-animation: lineFilled 7s linear; } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet:nth-child(5).swiper-pagination-bullet-active .line-filled { animation: lineFilled 7s linear; -moz-animation: lineFilled 7s linear; /* Firefox */ -webkit-animation: lineFilled 7s linear; /* Safari 鍜 Chrome */ -o-animation: lineFilled 7s linear; } @keyframes lineFilled { from {width: 0;} to {width: 100%;} } @-moz-keyframes lineFilled { from {width: 0;} to {width: 100%;} } @-webkit-keyframes lineFilled { from {width: 0;} to {width: 100%;} } @-o-keyframes lineFilled { from {width: 0;} to {width: 100%;} } .home-main-desc-swiper .home-main-swiper-pagination .swiper-pagination-bullet-active { height: 4px; } @media only screen and (min-width: 1700px) { .home-main-desc-swiper { bottom: 80px; } } @media only screen and (max-width: 1599px) { .home-main-desc-swiper { width: 920px; padding-top: 26px; } /*.home-main-desc-swiper .swiper-slide { padding: 0 120px; }*/ .home-main-desc-swiper .big-title { font-size: 30px; line-height: 40px; margin-bottom: 26px; } .home-main-desc-swiper .small-title { font-size: 20px; line-height: 24px; } } @media only screen and (max-width: 1024px) { .home-swiper_pc { display: none; } .home-swiper_m { position: relative; display: block; } .home-main-desc-swiper_m { width: calc(100% - 30px); position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); padding-top: 20px; padding-bottom: 15px; } .home-main-desc-swiper_m .swiper-slide { display: block; padding: 0 26px; box-sizing: border-box; } .home-main-swiper_m .swiper-slide { display: block; } .home-main-swiper_m .swiper-slide figure { width: 100%; } .home-main-swiper_m .swiper-slide figure img { display: block; width: 100%; } .big-title { font-size: 26px; margin-bottom: 20px; line-height: 1.3; } .small-title { font-size: 18px; margin-bottom: 12px; line-height: 1.5; } .m-home-main-swiper-next, .m-home-main-swiper-prev { height: 26px; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-top: 0; } .m-home-main-swiper-pagination .swiper-pagination-bullet { width: 41px; height: 1px; background-color: #FFFFFF; margin: 0 4px; border-radius: 0; opacity: 0.5; } .m-home-main-swiper-pagination .swiper-pagination-bullet-active { width: 40px; height: 2px; opacity: 1; } } @media only screen and (max-width: 450px) { .big-title { font-size: 20px; } .small-title { font-size: 14px; } .m-home-main-swiper-pagination .swiper-pagination-bullet { width: 21px; } .m-home-main-swiper-pagination .swiper-pagination-bullet-active { width: 20px; } } /*-----------------------------------------------------*/ /*鍏叡鏍峰紡*/ /*-----------------------------------------------------*/ .part-title{ font-size: 50px; font-weight: 700; line-height: 72px; letter-spacing: 10px; text-align: center; color: #21333F; font-family: "闃块噷宸村反鏅儬浣 Bold"; } .part-title::after{ content: ''; display: block; margin-top: 16px; width: 60px; height: 4px; opacity: 0px; background-color: #005BAC; margin-left: auto; margin-right: auto; } .bg-F6F6F6{ background: #F6F6F6; } @media only screen and (max-width: 1024px) { .part-title{ font-size: 24px; line-height: 42px; letter-spacing: 5px; } .part-title::after{ margin-top: 8px; width: 30px; height: 2px; opacity: 0px; } } /*-----------------------------------------------------*/ /*浠h〃鏍峰搧*/ /*-----------------------------------------------------*/ .samples-part { background-color: #F6F6F6; } .samples-swiper_m { display: none; } .samples-content { position: relative; } .swiper-button-prev, .swiper-button-next { margin-top: 0; top: 50%; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .samples-content:hover .sample-prev { left: 17px; opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; } .samples-content:hover .sample-next { right: 17px; opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; } .samples-content:hover .sample-prev:hover, .samples-content:hover .sample-next:hover { opacity: 0.9; } .sample-item-desc { width: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 100%); padding-top: 18px ; z-index: 9; font-size: 24px; font-weight: 700; line-height: 42px; text-align: center; color: #FFFFFF; } .sample-item { overflow: hidden; position: relative; font-family: "Helvetica LT Pro","闃块噷宸村反鏅儬浣 Regular"; background-color: #000000; } .sample-item .sample-item-img img { transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; } .sample-item:hover .sample-item-img img { transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .samples-part .sample-item::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://file.jingdiao.com/website/jingdiao/cn/images/home/machine-mask.png); background-repeat: no-repeat; background-size: cover; } @media only screen and (max-width: 1599px) { } @media only screen and (max-width: 1399px) { .samples-content:hover .sample-prev { left: 7px; } .samples-content:hover .sample-next { right: 7px; } } @media only screen and (max-width: 1299px) { .samples-content:hover .sample-prev { left: 47px; } .samples-content:hover .sample-next { right: 47px; } } @media only screen and (max-width: 1024px) { .samples-swiper_m { display: block; } .samples-swiper { display: none; } .samples-pagination { display: none; } .samples-part { padding: 0; padding-top: 24px; padding-bottom: 40px; } .samples-swiper_m .swiper-slide { padding: 0 15px; box-sizing: border-box; } .samples-swiper_m .m-common-next, .samples-swiper_m .m-common-prev { margin-top: -20px; } .samples-swiper_m .swiper-slide .m-sample-front { position: relative; } .sample-item-desc { padding-top: 12px; font-size: 16px; line-height: 28px; } } /*-----------------------------------------------------*/ /*鎺ㄨ崘淇℃伅*/ /*-----------------------------------------------------*/ .recommend-content-top{ display: grid; grid-template-columns: 70% 30%; grid-template-rows: max-content ; justify-items: center; align-items: stretch; grid-gap: 16px; padding-right: 16px; } .recommend-content-top .recommend-item{ background: url(https://file.jingdiao.com/website/jingdiao/cn/images/home/recommend-bg-1.svg); background-position: center; background-size: cover; } .recommend-content-top .recommend-item:first-child{ aspect-ratio: 1019/400; } .recommend-content-top .recommend-item:last-child{ aspect-ratio: 428/400; } .recommend-content-top .recommend-item img{ position:absolute; left: 50%; top:50%; transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); height: 75%; } .recommend-content-bottom{ display: grid; grid-template-columns: 50% 50%; grid-template-rows: max-content; justify-items: center; align-items: stretch; grid-gap: 16px; padding-right: 16px; margin-top: 18px; } .recommend-content-bottom .recommend-item{ aspect-ratio: 16/9; } .imgOrVideo { position: relative; } .imgOrVideo .under-img .play-btn{ position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-image: url('../video-js/play2.png'); background-size: cover; background-repeat: no-repeat; z-index: 2; } .imgOrVideo .bottom-video { position: absolute; top: 0; left: 0; width: 100%; z-index: 5; } .recommend-item{ position: relative; width: 100%; cursor: pointer; overflow: hidden; } .recommend-item .recommend-item-content{ position:absolute; left: 0px; bottom: 0px; width: 100%; color: #FFFFFF; padding: 24px; z-index: 3; } .recommend-item::after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: linear-gradient(180deg, rgba(0, 42, 79, 0) 60.5%, rgba(0, 32, 55, 0.8) 100%); z-index: 2; } .recommend-item::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background:none; z-index: 1; } .recommend-item:hover::before{ background: linear-gradient(180deg, rgba(0, 42, 79, 0) 0%, rgba(0, 32, 55, 0.4) 100%); } .recommend-item .recommend-item-content div:nth-child(1){ font-size: 18px; font-weight: 400; line-height: 36px; text-align: left; } .recommend-item .recommend-item-content div:nth-child(2){ font-size: 24px; font-weight: 700; line-height: 36px; text-align: left; font-family: "闃块噷宸村反鏅儬浣 Bold"; } .recommend-item .recommend-item-content div:nth-child(3){ font-size: 18px; font-weight: 400; line-height: 36px; text-align: left; white-space: nowrap; /* 闃叉鎹㈣ */ overflow: hidden; /* 闅愯棌婧㈠嚭閮ㄥ垎 */ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙疯〃绀鸿鐪佺暐鐨勫唴瀹 */ } .recommend-item img{ transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; } .recommend-content-top .recommend-item:hover img{ transform: translate(-50%, -50%) scale(1.05); -o-transform: translate(-50%, -50%) scale(1.05); -ms-transform: translate(-50%, -50%) scale(1.05); -moz-transform: translate(-50%, -50%) scale(1.05); -webkit-transform: translate(-50%, -50%) scale(1.05); } .recommend-content-bottom .recommend-item:hover img{ transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); } @media only screen and (max-width: 1024px) { .recommend-content-top, .recommend-content-bottom{ grid-template-columns: 100%; grid-gap: 18px; padding-right: 0px; } .recommend-content-top .recommend-item:first-child, .recommend-content-top .recommend-item:last-child{ aspect-ratio: 16/9; } .recommend-item .recommend-item-content div:nth-child(1), .recommend-item .recommend-item-content div:nth-child(2), .recommend-item .recommend-item-content div:nth-child(3){ font-size: 14px; line-height: 24px; } .recommend-area{ padding-top: 24px; padding-bottom: 40px; } } /*-----------------------------------------------------*/ /*浜у搧涓庢妧鏈?/ /*-----------------------------------------------------*/ .technology-part { background-color: #F6F6F6; } .technology-part .title { font-family: "闃块噷宸村反鏅儬浣 Bold"; font-size: 50px; line-height: 1; color: #000000; text-align: center; } .technology-part .desc { text-align: center; font-size: 18px; color: #333; } .technology-swiper { padding: 0 80px; } .p2Ctn .swiper-slide { display: block; padding-bottom: 16px; } .p2Ctn .swiper-slide:last-child { margin-right: 0 !important; } .p2Ctn .swiper-slide .swiper-slide-wrapper { position: relative; } .p2Ctn .swiper-slide .swiper-slide-wrapper::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-image: url('https://file.jingdiao.com/website/jingdiao/cn/images/home/technology-mask.png'); background-repeat: no-repeat; background-size: cover; } .p2Ctn .swiper-slide .technology-img { overflow: hidden; } .p2Ctn .swiper-slide .technology-img img { transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; } .p2Ctn .swiper-slide:hover .technology-img img { transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .p2Ctn .swiper-slide .technology-info { position: absolute; width: 100%; bottom: 40px; left: 0; text-align: center; z-index: 9; } .p2Ctn .swiper-slide .technology-info .technology-title { font-family: "Univers LT Pro 47 Lt Cn","闃块噷宸村反鏅儬浣 Bold"; font-size: 40px; color: #FFFFFF; } .p2Ctn .swiper-slide .technology-info .technology-more { display: block; margin-top: 24px; } .p2Ctn .swiper-slide .technology-info .technology-more span { display: inline-block; font-family: "闃块噷宸村反鏅儬浣 Medium"; font-size: 18px; color: #FFFFFF; } .p2Ctn .swiper-slide .technology-info .technology-more span.icon--6 { font-size: 14px; margin-left: 20px; } .p2Ctn .swiper-slide .technology-info .technology-more span.icon--6::before { color: #FFF; font-weight: bold; } .p2Ctn .swiper-slide .technology-info .technology-more:hover span.icon--6 { animation: bounceNew 0.4s; -o-animation: bounceNew 0.4s; -ms-animation: bounceNew 0.4s; -moz-animation: bounceNew 0.4s; -webkit-animation: bounceNew 0.4s; } .p2Ctn .swiper-slide::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 8px; background-color: #004898; transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; } .p2Ctn .swiper-slide:hover::after { /*left: 0;*/ width: 100%; } .technology-swiper:hover .technology-prev { left: 17px; opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; } .technology-swiper:hover .technology-next { right: 17px; opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; } .technology-swiper:hover .technology-prev:hover, .technology-swiper:hover .technology-next:hover { opacity: 0.9; } .technology-swiper_m { display: none; } @media only screen and (max-width: 1919px) { .p2Ctn .swiper-slide .technology-info .technology-title { font-size: 36px; } } @media only screen and (max-width: 1599px) { .technology-part .title { font-size: 40px; } .p2Ctn .swiper-slide .technology-info .technology-title { font-size: 30px; line-height: 1.3; } } @media only screen and (max-width: 1024px) { .technology-swiper_m { display: block; } .technology-swiper { display: none; } .p2Ctn { display: none; } .technology-part { padding-top: 40px; padding-bottom: 40px; } .technology-part .title { padding: 0 15px; font-size: 28px; margin-bottom: 12px; } .technology-part .desc { padding: 0 15px; font-size: 16px; line-height: 1.5; margin-bottom: 24px; } .technology-swiper_m .swiper-slide { position: relative; width: 69.3%; } .technology-swiper_m .swiper-slide a::before { position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; background-image: url(https://file.jingdiao.com/website/jingdiao/cn/images/home/technology-mask.png); /* background-color: #000; */ background-size: cover; } .technology-swiper_m .swiper-info { position: absolute; bottom: 8px; width: 100%; } .technology-swiper_m .swiper-item-title { padding-bottom: 12px; font-family: "Univers LT Pro 47 Lt Cn","闃块噷宸村反鏅儬浣 Bold"; font-size: 20px; color: #fff; text-align: center; } .technology-swiper_m .m-technology-more { font-size: 16px; color: #fff; text-align: center; margin-bottom: 16px; } .technology-swiper_m .m-technology-more span.icon--6::before { display: inline-block; color: #FFF; margin-left: 10px; font-size: 12px; } .technology-swiper_m .swiper-slide.swiper-slide-prev, .technology-swiper_m .swiper-slide.swiper-slide-next { bottom: -50px; } .technology-swiper_m .swiper-slide a { position: relative; display: block; } .technology-swiper_m .swiper-slide.swiper-slide-active::after { content: ''; display: block; width: 100%; height: 4px; background-color: #004898; margin-top: 2px; } } @media only screen and (max-width: 450px) { .technology-part .title { font-size: 24px; } .technology-part .desc { font-size: 14px; } .technology-swiper_m .swiper-item-title { font-size: 18px; } .technology-swiper_m .m-technology-more { font-size: 14px; } .technology-swiper_m .swiper-slide.swiper-slide-prev, .technology-swiper_m .swiper-slide.swiper-slide-next { bottom: -15px; } } /*-----------------------------------------------------*/ /*鏈€鏂拌祫璁?/ /*-----------------------------------------------------*/ .news-part .p1Ctn { display: flex; display: -ms-flexbox; display: -webkit-flex; } .news-part .p1Ctn .p1Item { flex: 1; -ms-flex: 1; -webkit-flex: 1; max-width: calc((100% - 30px) / 3); margin-right: 15px; background-color: #F6F6F6; } .news-part .p1Ctn .p1Item:last-child { margin-right: 0; } .news-part .p1Ctn .p1Item .item-img { display: block; overflow: hidden; position: relative; } .news-part .p1Ctn .p1Item img { display: block; width: 100%; transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; aspect-ratio: 576/324; object-fit: cover; } .news-part .p1Ctn .p1Item:hover img { transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .news-part .item-title { display: inline-block; font-size: 28px; font-weight: 700; line-height: 28px; text-align: left; color: #FFFFFF; padding: 16px 24px; position: absolute; top: 0px; left: 0px; background-color: #00000099; } .news-part .itemText { text-align: left; padding: 0px 24px 24px 24px; } .news-part .itemText .news-item-list li{ padding-left: 30px; position: relative; padding-top: 24px; } .news-part .itemText .news-item-list li:first-child{ padding-bottom: 14px; border-bottom: 1px solid #DCDCDC; } .news-part .itemText .news-item-list li:nth-child(2){ padding-top: 14px; } .news-part .itemText .news-item-list li::before{ content: '+'; position: absolute; left: 0px; font-size: 20px; font-weight: 400; line-height: 34px; text-align: center; } .news-part .itemText .news-item-list li:first-child::before { content: '+'; position: absolute; left: 0px; font-size: 24px; font-weight: 700; line-height: 42px; text-align: center; } .news-part .itemText .news-item-list li .news-item-title { font-size: 20px; font-weight: 400; line-height: 34px; text-align: left; color: #000000; } .news-part .itemText .news-item-list li:first-child .news-item-title { font-size: 24px; font-weight: 700; line-height: 42px; text-align: left; } .news-part .itemText .news-item-list li .news-item-desc { font-size: 18px; font-weight: 400; line-height: 36px; text-align: left; color: #4B4B4B; } .news-part .itemText .news-item-list li:hover .news-item-title , .news-part .itemText .news-item-list li:hover .news-item-desc, .news-part .itemText .news-item-list li:hover::before{ color: #004898; } @media only screen and (max-width: 1024px) { .news-part { padding-top: 40px; padding-bottom: 40px; } .news-part .item-title { font-size: 18px; font-weight: 700; line-height: 30px; } .news-part .itemText { padding: 0px 12px 12px 12px; } .news-part .itemText .news-item-list li{ padding-left: 30px; position: relative; padding-top: 12px; } .news-part .itemText .news-item-list li:first-child{ padding-bottom: 6px; } .news-part .itemText .news-item-list li:nth-child(2){ padding-top: 6px; } .news-part .itemText .news-item-list li::before{ font-size: 14px; line-height: 24px; } .news-part .itemText .news-item-list li:first-child::before { font-size: 16px; line-height: 28px; } .news-part .itemText .news-item-list li .news-item-title { font-size: 14px; line-height: 24px; } .news-part .itemText .news-item-list li:first-child .news-item-title { font-size: 16px; line-height: 28px; } .news-part .itemText .news-item-list li .news-item-desc { font-size: 14px; line-height: 24px; } .news-part .p1Ctn { display: block; } .news-part .p1Ctn .p1Item { display: block; width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 16px; background-color: #F6F6F6; } .news-part .p1Ctn .p1Item:last-child { margin-bottom: 0; } } /*-----------------------------------------------------*/ /*蹇€熶簡瑙g簿闆?/ /*-----------------------------------------------------*/ .quick-area { position: relative; padding-bottom: 31.771%; background-image: url('https://file.jingdiao.com/website/jingdiao/cn/images/home/quick-big.jpg'); background-repeat: no-repeat; background-size: cover; } .quick-content { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; -webkit-align-items: center; box-sizing: border-box; } .quick-left, .quick-right { flex: 1; -ms-flex: 1; -webkit-flex: 1; } .quick-left { margin-right: 4%; overflow: hidden; } .quick-right { text-align: center; } .quick-area .title { font-family: "闃块噷宸村反鏅儬浣 Bold"; font-size: 50px; line-height: 1; color: #FFFFFF; } .quick-area p { font-size: 24px; color: #FFFFFF; line-height: 1.75; text-align: left; } .quick-area .buttonBox-container a { margin: 0 auto; background-color: #FFF; color: #004898; } .quick-area .video-js .vjs-big-play-button { width: 120px; height: 120px; } .quick-left .vjs-poster{ transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; } .quick-left:hover .vjs-poster{ transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); } @media only screen and (max-width: 1599px) { .quick-area .title { font-size: 40px; } .quick-area p { font-size: 20px; } .quick-area .video-js .vjs-big-play-button { width: 100px; height: 100px; } } @media only screen and (max-width: 1399px) { .quick-area .title { font-size: 36px; } .quick-area p { font-size: 18px; line-height: 1.5; } } @media only screen and (max-width: 1099px) { .quick-area p { font-size: 16px; line-height: 1.75; } } @media only screen and (max-width: 1024px) { .quick-area { padding-top: 40px; padding-bottom: 40px; position: static; background-position: center; } .quick-content { position: static; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; top: 0; transform: translateY(0); } .quick-left, .quick-right { min-width: 100%; } .quick-left { margin-right: 0; order: 1; -ms-flex-order: 1; -webkit-order: 1; } .quick-area .title { padding: 0 15px; font-size: 24px; margin-bottom: 16px; } .quick-area p { font-size: 16px; line-height: 1.7; } .quick-area .buttonBox-container { margin-top: 16px; } .quick-area .buttonBox-container a { width: 169px; } .quick-left { margin-top: 16px; } .quick-area .video-js .vjs-big-play-button { width: 50px; height: 50px; } } @media only screen and (max-width: 450px) { .quick-area .title { font-size: 20px; } .quick-area p { font-size: 14px; } } /*-----------------------------------------------------*/ /*瀵艰埅鏍?/ .t3-mainnav { top: 48px; } .dropdown-menu { top: 117px; } .nav > li > .separator { padding: 24px 44px; } /*.language-switch { background: transparent; }*/ .noborder{ border-bottom: none; } #app.active { background: transparent; } .navbar-nav > li { margin-right: 0; } .smaller .navbar-nav > li { margin-right: 16px; } .smaller .navbar-nav > li:last-child { margin-right: 0; } .whiteback{ background: #FFFFFF; } @media only screen and (max-width: 1599px) { .dropdown-menu { top: 115px; } .nav > li > .separator { padding: 24px 40px; } } @media only screen and (max-width: 1400px) { .nav > li > .separator { padding: 24px 38px; } } @media only screen and (max-width: 1350px) { .nav > li > .separator { padding: 24px 33px; } } @media only screen and (max-width: 1230px) { .nav > li > .separator { padding: 24px 28px; } } @media only screen and (max-width: 1130px) { .dropdown-menu { top: 109px; } .nav > li > .separator { padding: 22px 26px; } } @media only screen and (max-width: 1024px) { .t3-mainnav { top: 0; } } /*姣涚幓鐠?/ /*.t3-header{ height: 48px; } .smaller .t3-header { height: 62px; }.dropdown-menu { background: transparent; overflow: hidden; } .dropdown-menu::before { content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; -webkit-filter:blur(10px); filter:blur(10px); -ms-filter: blur(10px); background: rgba(255,255,255,0.8); width: 100%; height: 100%; } .smaller .dropdown-menu { background: #FFFFFF; } .smaller .dropdown-menu::before { display: none; } #t3-mainnav, #t3-header{ overflow: hidden; } #t3-mainnav:after, #t3-header:after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; background: rgba(255,255,255,0.8); -webkit-filter:blur(20px); filter:blur(20px); -ms-filter: blur(20px); width: 100%; height: 100%; }*/