/*骞虫澘*/ .product03-page .sec2.prd5 .text-box .text-text{ text-align: right; position: absolute; left: 58.5%; top: 35%; width: 33%; height: 100%; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product03-page .sec2.prd5.active .text-box .text-text{ opacity: 1; } .product03-page .sec2.prd5 .text-box .text-text p{ position:relative; font-size: 1.4rem; line-height: 3rem; color: rgba(1,1,1,0.5); font-family: "syht light"; font-family: "氓戮庐猫陆炉茅鈥衡€γ┞烩€?\0; left:unset; top:unset; width:100%; height:unset; } .product03-page .sec3.prd2-page .text-box .text-text{ width:23%; top:43%; left:14%; } .product03-page .sec3.active.prd2-page .text-box .text-text p{ opacity:1; } .product03-page .sec3.prd2-page .text-box .text-text p{ left:11%; transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product03-page .sec3.prd2-page .text-box h3{ left:0; top:26%; } .product03-page .sec3.prd2-page .img1{ top:-15%; left:unset; right:8%; } .product03-page .sec2.prd2-page .img1{ left:10%; width:33%; bottom:-25%; height:unset; } .product03-page .sec2.prd2-page .text-box h3{ left:unset; right:9.5%; top:10%; } .product03-page .sec2.prd2-page .text-one { position: absolute; top: 23%; right: 10%; width: 44%; } .product03-page .sec2.prd2-page .text-box p{ position: relative; text-align:right; right:unset; left:unset; width:unset; } /*骞虫澘*/ /*鏂版櫤鑳界┛鎴?/ .product03-page .sec4.prd5 .img2{ top:17%; right:11%; width:40%; left:unset; } .product03-page .sec4.prd5 .img1{ height:120%; } .product03-page .sec4.prd5 .text-box{ top:27%; width:27%; left:12%; text-align:left; } .product03-page .sec4.prd5{ padding-top:40%; position: relative; } .product03-page .sec4.prd5 .img1{ position: absolute; top:0; } .product03-page .sec3.active.prd5 #img2 { opacity:1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec3.prd5 #img2{ position: absolute; top:60%; left:10%; width:51%; z-index:2; transform: translateY(20px); -webkit-transform: translateY(20px); transition: all 1s; -webkit-transition: all 1s; opacity: 0; } .product03-page .sec3.prd5 .img1{ top:-49%; width:43%; } .product03-page .sec3.prd5 { background-color: unset; padding-top:45%; } .product03-page .sec2.prd5{ background-color: #e7e7e7 } .product03-page .sec3.prd5 .text-box h3{ top:10%; left:11%; width:50%; } .product03-page .sec3.prd5 .text-box .text-text{ top:22%; left:12%; width:38%; } .product03-page .sec2.prd5{ padding-top:38%; } .product03-page .sec2.prd5 .text-box h3{ right:9%; width:20%; left:unset; } .product03-page .sec2.prd5 .text-box #p2{ top:55%; width:33%; left:53%; } .product03-page .sec2.prd5 .text-box #p1{ width:33%; left:53%; } .product03-page .sec2.prd5 .img1{ top:5%; left:0; width:83%; height: unset; } /*鏂版櫤鑳界┛鎴?/ /*鏂癆RVR*/ .product03-page .sec4.active .img2 { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec4 .img2{ position: absolute; top:14%; left:11%; width:49%; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product03-page .sec3 .text-box h3{ position:absolute; left:4%; top:35%; width:50%; height:5.6%; font-size: 3rem; color: rgba(2,2,2,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 36px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product03-page .sec3.active .text-33box .text-text{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec3 .text-box .text-text{ text-align: left; position:absolute; left:11%; top:50%; width:55%; height:16.12%; margin-bottom: 19%; opacity: 1; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product03-page .sec3 .text-box .text-text p{ font-size: 1.4rem; color: rgba(1,1,1,0.4); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product03-page .sec3 .img1{ position:absolute; left:62%; top:-10%; width:40%; /*height:74.87%;*/ opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition: all 1s; -webkit-transition: all 1s; } .product03-page .sec2{ position: relative; text-align: center; padding-top:40%; /*overflow: hidden;*/ } .product03-page .sec2 .img1{ z-index:2; position:absolute; left:6%; /*top:8%;*/ bottom:-30%; width:50%; /*height:108%;*/ transform: translateY(20px); -webkit-transform: translateY(20px); transition: all 1s; -webkit-transition: all 1s; opacity: 0; } .product03-page .sec2 .text-box h3{ position:absolute; left:69%; top:26%; width:40%; height:5.6%; font-size: 3rem; color: rgba(2,2,2,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 30px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product03-page .sec2 .text-box p{ text-align: right; position:absolute; left:58.5%; top:38%; width:30%; height:11.75%; font-size: 1.4rem; line-height: 3rem; color: rgba(1,1,1,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } /*鏂癆RVR*/ /*鏂版櫤鑳芥墜鏈?/ .product01-page .text-box h3{ font-size:3rem!important; /*color: rgba(0,0,0,0.6);*/ font-family: "syht light"!important; font-family: "寰蒋闆呴粦"\0!important; font-weight: lighter!important; color:black!important; } .product01-page .text-box p{ line-height:2.5rem!important; font-size:1.4rem!important; /*color: rgba(0,0,0,0.6);*/ font-family: "syht light"!important; font-family: "寰蒋闆呴粦"\0!important; font-weight: lighter!important; color:rgba(1,1,1,0.5)!important; } .product01-page .sec2 .text-box .text-tit{ position: absolute; /*top:457px;*/ /*left:860px;*/ top:57.12%; left:44.79%; font-size:3rem; line-height: 36px; } .product01-page .sec2 .text-box .text-text{ text-align: center; position: absolute; /*top:594px;*/ /*left:525px;*/ top:70%; left:27.34%; width:50%; } .product01-page .sec2 .text-box .text-text p{ font-size:1.4rem; line-height:2.5rem; } .product01-page .sec3 .text-box .text-tit{ position: absolute; /*top:457px;*/ /*left:860px;*/ top:23.75%; left:11.71%; font-size:3rem; line-height: 36px; } .product01-page .sec3 .text-box .text-text{ text-align: center; position: absolute; /*top:594px;*/ /*left:525px;*/ top:37%; left:11.61%; } .product01-page .sec3 .text-box .text-text p{ text-align: left!important; font-size:1.4rem; line-height:2.5rem!important; } .product01-page .sec4 .img-bg #img05 { position:absolute; /*top:24%;*/ bottom:0; left:8%; width:22%; /*height:76%;*/ transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec4 .img-bg #img06 { position:absolute; /*top:13%;*/ bottom:0; left:24%; width:22%; /*height:87%;*/ transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec4 .all-imgbox { position:absolute; top:55%; left:52%; } .product01-page .sec5{ position:relative; padding-top:47%; } .product01-page .sec5 .text-box p{ opacity:0; position:static; -webkit-transition: all 1s 1s } .product01-page .sec5 .text-tit h3{ position:absolute; top:28%; left:12%; width:50%; opacity:0; -webkit-transition: all 1s 1s } .product01-page .sec5 .text-tit h3{ position:absolute; font-size:3rem; /*color: rgba(0,0,0,0.6);*/ font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; color:black; /*color:rgba(2,2,2,0.5);*/ } .product01-page .sec5 .text-text{ position: absolute; top:43%; left:12%; width:46%; } .product01-page .sec5 .img6 { height:100%; position: absolute; top:0; } .product01-page .sec5 .img8 { position: absolute; left: 68%; top: 21%; width: 21%; /*height: 73.37%;*/ transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec5.active .text-box h3, .product01-page .sec5.active .text-box p{ opacity: 1; -webkit-transform:translateY(0px); } .product01-page .sec4.active .img-bg #img06, .product01-page .sec4.active .img-bg #img05, .product01-page .sec5.active .img8, .product01-page .sec2.active [class*='img']{ opacity: 1; } /*鏂版櫤鑳芥墜鏈?/ /*鏂版苯杞︾數瀛?/ .product06-page .tit h3{ font-size: 60px; color: #c3000f; font-weight: lighter; margin-bottom: 5rem; font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; } .product06-page .tit p{ font-size: 24px; color: #444; font-family: "egbt"; } .product06-page .sec6.old_sec6{ text-align: center; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; /*background-image: url(/bundles/frontend/images/index_sec6_bg1.jpg);*/ padding-top: 50px; } .product06-page .sec6 .bg{ width: 100%; } .product06-page .sec6 .tit{ margin-bottom: 26px; opacity: 0; transition: all 1s; } .product06-page .sec6.active .tit{ opacity: 1; } .product06-page .sec6 .text{ font-size: 20px; color: #666; line-height: 32px; font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; margin: 0 auto; width: 1080px; max-width: 100%; opacity: 0; transition: all 1s 1s; display: block; } .product06-page .sec6.active .text{ opacity: 1; } .product06-page .sec6 .zizhizhengshu{ position: absolute; left:12%; top:25%; width:20vw; } .product06-page .sec6 .z-text{ line-height: 32px; margin: 0 auto; position: absolute; left:11%; top:53vw; width:25vw; } .product06-page .sec6 .z-text2{ line-height: 32px; margin: 0 auto; position: absolute; bottom:3%; width:100vw; padding:0 30px; } .product06-page .sec6 .z-text p{ font-size: inherit; line-height: inherit; font-family: SourceHanSansCN-Light; font-weight: normal; font-stretch: normal; text-align: left; color: #000000; } .product06-page .sec6 .z-text2 p{ font-size:26px; line-height: inherit; font-family: SourceHanSansCN-Regular; font-stretch: normal; font-weight: normal; color: #000000; } /*鏂版苯杞︾數瀛?/ #main{ overflow: hidden; } #main .sec1{ text-align: center; padding: 50px 0 25px; } #main .sec1 h3{ font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-size: 54px; color: #c3000f; margin-bottom: 15px; font-weight: normal; line-height: 54px\9; padding-top: 14px\9; height: 54px\9; overflow: hidden\9; } .ie11 #main .sec1 h3{ line-height: 54px; padding-top: 14px; height: 54px; overflow: hidden; } #main .sec1 p{ font-size: 24px; color: #444; font-family: "egbt"; } /*鏅鸿兘鎵嬫満*/ .product01-page .sec2{ position: relative; padding-top: 40%; padding-bottom: 7.5%; } .product01-page .sec2 .img1{ position: absolute; /*top:60px;*/ /*right: 16.25%;*/ /*width: 45%;*/ /*height:61%;*/ /*width:747px;*/ /*height:596px;*/ top:7.5%; width:38.9%; /*height:74.5%;*/ left:0; transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec2 .img2{ position: absolute; /*right: 181px;*/ /*top: 0;*/ /*width: 897px;*/ /*height:332px;*/ right: 9.42%; top: 0; width: 46.71%; /*height:41.5%;*/ transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec2 .img3{ position: absolute; right: 0; /*width: 625px;*/ /*height:453px;*/ /*top:1943px;*/ width: 32.55%; /*height:56.62%;*/ top:24.25%; transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } @keyframes leftright{ 0% { transform: translateX(0px); } 33% { transform: translateX(10px); } 66% { transform: translateX(-10px); } 100% { transform: translateX(0px); } } @-webkit-keyframes leftright{ 0% { -webkit-transform: translateX(0px); } 33% { -webkit-transform: translateX(10px); } 66% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0px); } } .product01-page .sec2 .text-box{ padding-left: 7.4%; } .product01-page .sec2 .text-box h3{ /*font-size: 60px;*/ /*margin-bottom: 35px;*/ color: rgba(0,0,0,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product01-page .sec2 .text-box p{ /*font-size: 24px;*/ line-height: 64px; color: rgba(2,2,2,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product01-page .sec2 .text-box h3:hover,.product01-page .sec2 .text-box p:hover{ color: #c3000f; } .product01-page .sec2.active .text-box h3,.product01-page .sec2.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product01-page .sec3{ position: relative; padding-top: 37.5%; padding-bottom: 8.5%; background-color: #f5f5f5; } .product01-page .sec3 .img1{ position: absolute; top: 23.33%; right: 9.74%; width: 13.96%; transition: all 1s; -webkit-transition: all 1s; opacity: 0; } .product01-page .sec3 .img2{ position: absolute; right: 23.22%; top: 0; width: 11.98%; transition: all 1s 0.5s; -webkit-transition: all 1s 0.5s; opacity: 0; } .product01-page .sec3 .img3{ position: absolute; top: 21.39%; right: 32.08%; width: 8.54%; transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec3 .img4{ position: absolute; top: 0; right: 43.23%; width: 21.51%; transition: all 1s 1.5s; -webkit-transition: all 1s 1.5s; opacity: 0; } .product01-page .sec3 .img5{ position: absolute; top: 0; left: 0; width: 33.23%; transition: all 1s 2s; -webkit-transition: all 1s 2s; opacity: 0; } .product01-page .sec3 .img6{ position: absolute; bottom: 12.25%; /*left: 21.82%;*/ /*width: 14.375%;*/ /*height:238px;*/ right:0; width:92.03%; /*height:29.75%;*/ transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; } .product01-page .sec3.active .img1,.product01-page .sec3.active .img2,.product01-page .sec3.active .img3,.product01-page .sec3.active .img4,.product01-page .sec3.active .img5,.product01-page .sec3.active .img6{ opacity: 1; } .product01-page .sec3 .img1:hover,.product01-page .sec3 .img2:hover,.product01-page .sec3 .img3:hover,.product01-page .sec3 .img4:hover,.product01-page .sec3 .img5:hover,.product01-page .sec3 .img6:hover{ animation: leftright 0.6s; -webkit-animation: leftright 0.6s; } .product01-page .sec3 .text-box{ padding-right: 6.25%; } .product01-page .sec3 .text-box h3{ font-size: 60px; margin-bottom: 35px; color: rgba(0,0,0,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; text-align: right; } .product01-page .sec3 .text-box p{ text-align: right; font-size: 24px; line-height: 64px; color: rgba(2,2,2,0.4); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product01-page .sec3 .text-box h3:hover,.product01-page .sec3 .text-box p:hover{ color: #c3000f; } .product01-page .sec3.active .text-box h3,.product01-page .sec3.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product01-page .sec4{ position:relative; padding-top: 35%; padding-bottom: 7%; } /*.product01-page .sec4 .text-box{*/ /* text-align: center;*/ /* margin-bottom: 8%;*/ /*}*/ .product01-page .sec4 .text-box h3{ position:absolute; top:15%; left:57%; font-size: 3rem; color: rgba(0,0,0,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0s,0s,0s; } .product01-page .sec4 .text-box p{ width:38%; line-height: 2.5rem; position:absolute; top:31%; left:55%; font-size: 1.4rem; text-align:right; color: rgba(2,2,2,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product01-page .sec4 .text-box h3:hover,.product01-page .sec4 .text-box p:hover{ color: #c3000f; } .product01-page .sec4.active .text-box h3,.product01-page .sec4.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product01-page .sec4 .img-box{ transition: all 1s 1s; -webkit-transition: all 1s 1s; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); text-align: center; margin-bottom: 4%; } .product01-page .sec4 .img-box.last-child{ margin-bottom: 0; } .product01-page .sec4.active .img-box{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); margin-bottom: 3rem; } .product01-page .sec4 .img-box img{ width: 15.625%; } .product01-page .sec4 .img-box img.two{ margin: 0 8.5%; } /*骞虫澘鐢佃剳*/ .product02-page .sec2{ text-align: center; padding: 5% 0; } .product02-page .sec2 .text-box{ margin-bottom: 6%; } .product02-page .sec2 .text-box h3{ font-size: 40px; margin-bottom: 70px; color: rgba(4,4,4,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0s,0s,0s; } .product02-page .sec2 .text-box p{ font-size: 24px; color: rgba(4,4,4,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product02-page .sec2 .text-box h3:hover,.product02-page .sec2 .text-box p:hover{ color: #c3000f; } .product02-page .sec2.active .text-box h3,.product02-page .sec2.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec2 .img-box{ position: relative; width: 62.5%; margin: 0 auto; } .product02-page .sec2 .img-box img{ width: 100%; } .product02-page .sec2 .img-box .img{ opacity: 0; } .product02-page .sec2 .img-box .img1,.product02-page .sec2 .img-box .img2,.product02-page .sec2 .img-box .img3,.product02-page .sec2 .img-box .img4,.product02-page .sec2 .img-box .img5,.product02-page .sec2 .img-box .img6{ position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.5s; } .product02-page .sec2.active .img-box .img1{ transition-delay: 1s; opacity: 1; } .product02-page .sec2.active .img-box .img2{ transition-delay: 2s; opacity: 1; } .product02-page .sec2.active .img-box .img3{ transition-delay: 3s; opacity: 1; } .product02-page .sec2.active .img-box .img4{ transition-delay: 4s; opacity: 1; } .product02-page .sec2.active .img-box .img5{ transition-delay: 5s; opacity: 1; } .product02-page .sec2.active .img-box .img6{ transition-delay: 6s; opacity: 1; } .product02-page .sec3{ background-color: #e7e7e7; position: relative; text-align: right; padding-bottom: 4.6875%; } .product02-page .sec3 .text-box{ position: absolute; right: 9.48%; bottom: 18.06%; text-align: left; } .product02-page .sec3 .text-box h3{ font-size: 60px; color: rgba(3,3,3,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 7%; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product02-page .sec3 .text-box p{ font-size: 24px; color: rgba(1,1,1,0.4); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; line-height: 2.5833; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product02-page .sec3.active .text-box h3,.product02-page .sec3.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec3 .text-box h3:hover,.product02-page .sec3 .text-box p:hover{ color: #c3000f; } .product02-page .sec3 .img1{ width: 91.67%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; transform: translateY(20px); -webkit-transform: translateY(20px); } .product02-page .sec3.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec3 .img1:hover{ animation: leftright 0.6s; -webkit-animation: leftright 0.6s; } .product02-page .sec4{ position: relative; text-align: center; margin-bottom: -4.5%; padding-top: 3.5%; } .product02-page .sec4 .text-box{ display: inline-block; vertical-align: middle; margin-right: 8%; text-align: left; } .product02-page .sec4 .text-box h3{ font-size: 60px; color: rgba(1,1,1,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 10%; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product02-page .sec4 .text-box p{ font-size: 24px; color: rgba(0,0,0,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; line-height: 2.5833; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product02-page .sec4.active .text-box h3,.product02-page .sec4.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec4 .text-box h3:hover,.product02-page .sec4 .text-box p:hover{ color: #c3000f; } .product02-page .sec4 .img1{ vertical-align: middle; width: 49.84%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; transform: translateY(20px); -webkit-transform: translateY(20px); position: relative; z-index: 1; } .product02-page .sec4.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec4 .img1:hover{ animation: leftright 0.6s; -webkit-animation: leftright 0.6s; } .product02-page .sec5{ position: relative; text-align: center; padding-top: 8.5%; background-repeat: no-repeat; background-image: url(/bundles/frontend/images/product02_sec5_bg.png); background-size: 100% 100%; background-position: center top; } .product02-page .sec5 .ext-box{ margin-bottom: 75px; } .product02-page .sec5 .text-box h3{ font-size: 60px; color: rgba(1,1,1,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 55px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0s,0s,0s; } .product02-page .sec5 .text-box p{ font-size: 24px; color: rgba(0,0,0,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product02-page .sec5.active .text-box h3,.product02-page .sec5.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec5 .text-box h3:hover,.product02-page .sec5 .text-box p:hover{ color: #c3000f; } .product02-page .sec5 .img1{ width: 100%; opacity: 0; transition: all 1s 1s; -webkit-transition: all 1s 1s; transform: translateY(20px); -webkit-transform: translateY(20px); } .product02-page .sec5.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec5 a{ position: relative; display: block; } .product02-page .sec5 a .cover{ position: absolute; left: 30.8%; top: 3.5%; width: 39%; height: 66%; background-color: #fff; opacity: 0; transition: all 0.1s; -webkit-transition: all 0.1s; } .product02-page .sec5 a .cover.snap{ opacity: 0.5; } .product02-page .sec6{ position: relative; text-align: center; } .product02-page .sec6 .text-box{ display: inline-block; vertical-align: middle; margin-right: 11%; text-align: left; margin-top: 15%; } .product02-page .sec6 .text-box h3{ font-size: 60px; color: rgba(1,1,1,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 40px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product02-page .sec6 .text-box p{ font-size: 24px; line-height: 2.5; color: rgba(0,0,0,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product02-page .sec6.active .text-box h3,.product02-page .sec6.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec6 .text-box h3:hover,.product02-page .sec6 .text-box p:hover{ color: #c3000f; } .product02-page .sec6 .img-box{ display: inline-block; vertical-align: middle; width: 44.9%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; transform: translateY(20px); -webkit-transform: translateY(20px); position: relative; } .product02-page .sec6.active .img-box{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product02-page .sec6 .img-box .bg{ width: 100%; } .product02-page .sec6 .img-box .img1{ position: absolute; width: 11%; left: 0%; top: 26%; opacity: 0; } .product02-page .sec6 .img-box .img2{ position: absolute; width: 11%; right: 0%; top: 23.4%; opacity: 0; } .product02-page .sec6 .img-box .img3{ position: absolute; width: 11%; left: 0%; bottom: 8.8%; opacity: 0; } .product02-page .sec6 .img-box .img4{ position: absolute; width: 11%; right: 0%; bottom: 16.2%; opacity: 0; } .product02-page .sec6.active .img-box .img1,.product02-page .sec6.active .img-box .img2,.product02-page .sec6.active .img-box .img3,.product02-page .sec6.active .img-box .img4{ transition: all 1s; -webkit-transition: all 1s; opacity: 1; } .product02-page .sec6.active .img-box .img1{ transition-delay: 1s; left: 7.4%; } .product02-page .sec6.active .img-box .img2{ transition-delay: 1.5s; right: 11.2%; } .product02-page .sec6.active .img-box .img3{ transition-delay: 2s; left: 10.4%; } .product02-page .sec6.active .img-box .img4{ transition-delay: 2.5s; right: 11.5%; } /*vr*/ .product03-page .sec2 .bg{ width: 54.6875%; position: absolute; left: 3.02%; top: 0; transition: all 1s 0.5s; -webkit-transition: all 1s 0.5s; opacity: 0; } .product03-page .sec2.active .bg{ opacity: 1; } .product03-page .sec2 .text-box{ display: inline-block; vertical-align: bottom; text-align: left; padding-bottom: 7.5%; } .product03-page .sec2 .text-box h3:hover,.product03-page .sec2 .text-box p:hover{ color: #c3000f; } .product03-page .sec2.active .text-box h3,.product03-page .sec2.active .text-box p,.product03-page .sec3.active .text-box p,.product03-page .sec4.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec2.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec3{ text-align: center; font-size: 0; background-color: #e7e7e7; padding-top: 40%; position: relative; } .product03-page .sec3.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec3 .img1:hover{ animation: leftright 0.6s; -webkit-animation: leftright 0.6s; } .product03-page .sec3 .text-box{ vertical-align: top; display: inline-block; } .product03-page .sec3 .text-box ul{ opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1.5s,1.5s,0s; font-size: 0; text-align: left; } .product03-page .sec3 .text-box h3:hover,.product03-page .sec3 .text-box p:hover,.product03-page .sec3 .text-box ul li:hover{ color: #c3000f; } .product03-page .sec3.active .text-box h3,.product03-page .sec3.active .text-box p,.product03-page .sec3.active .text-box ul{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec3 .text-box ul li{ font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; font-size: 24px; color: rgba(0,0,0,0.5); display: inline-block; vertical-align: top; margin-bottom: 70px; width: 33%; text-align: center; } .product03-page .sec3 .text-box ul li div{ border: 2px solid #bbb; border-radius: 50%; width: 104px; line-height: 100px; height: 104px; margin: 0 auto 14px; } .product03-page .sec3 .text-box ul li div img{ vertical-align: middle; width: 62.5%; } /*.product03-page .sec3 .text-box ul li:hover div img{ transition: all 1s; -webkit-transition: all 1s; transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }*/ .product03-page .sec4{ /*padding-top: 7%;*/ /*padding-bottom: 4%;*/ position: relative; } .product03-page .sec4 .img1{ width:100%; /*width: 57.97%;*/ /*position: absolute;*/ /*right: 0;*/ /*top: -14%;*/ /*opacity: 0;*/ /*transform: translateY(20px);*/ /*-webkit-transform: translateY(20px);*/ /*transition: all 1s;*/ /*-webkit-transition: all 1s;*/ } .product03-page .sec4.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } /*.product03-page .sec4 .img1:hover{*/ /* animation: leftright 0.6s;*/ /* -webkit-animation: leftright 0.6s;*/ /*}*/ .product03-page .sec4 .text-box{ position: absolute; top:22%; right:7%; width:28%; text-align:left; } .product03-page .sec4 .text-box h3{ font-size: 3rem; color: rgba(4,4,4,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 3rem; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product03-page .sec4 .text-box p{ line-height: 3rem; font-size: 1.4rem; color: rgba(1,1,1,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product03-page .sec4 .text-box p:nth-child(1){ margin-top:15%; } .product03-page .sec4 ul{ opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1.5s,1.5s,0s; font-size: 0; text-align: center; } .product03-page .sec4 .text-box h3:hover,.product03-page .sec4 .text-box p:hover,.product03-page .sec4 ul li:hover{ color: #c3000f; } .product03-page .sec4.active .text-box h3,.product03-page .sec4.active .text-box p,.product03-page .sec4.active ul{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product03-page .sec4 ul li{ font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; font-size: 24px; color: rgba(0,0,0,0.5); display: inline-block; vertical-align: top; margin: 0 55px; } .product03-page .sec4 ul li div{ border: 2px solid #bbb; border-radius: 50%; width: 104px; line-height: 100px; height: 104px; margin: 0 auto 14px; } .product03-page .sec4 ul li div img{ vertical-align: middle; width: 63.46%; } /*.product03-page .sec4 ul li:hover div img{ transition: all 1s; -webkit-transition: all 1s; transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }*/ /*杞﹁浇绯荤粺*/ .product04-page .sec2{ text-align: center; padding-top: 3.5%; padding-bottom: 3.8%; } .product04-page .sec2 .text-box{ margin-bottom: 2%; } .product04-page .sec2 .text-box h3{ font-size: 40px; color: rgba(4,4,4,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 65px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0s,0s,0s; } .product04-page .sec2 .text-box p{ font-size: 24px; margin-bottom: 72px; color: rgba(4,4,4,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product04-page .sec2 .text-box ul{ opacity: 0; transition: all 1s 1s; -webkit-transition: all 1s 1s; transform: translateY(20px); -webkit-transform: translateY(20px); font-size: 0; } .product04-page .sec2.active .text-box ul{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec2 .text-box ul li{ width: 104px; height: 104px; line-height: 100px; display: inline-block; vertical-align: top; border: 2px solid rgba(0,0,0,0.5); border-radius: 50%; } .product04-page .sec2 .text-box ul li.two{ margin: 0 6%; } .product04-page .sec2 .text-box ul li img{ vertical-align: middle; width: 63.46%; } .product04-page .sec2 .text-box h3:hover,.product04-page .sec2 .text-box p:hover{ color: #c3000f; } .product04-page .sec2.active .text-box h3,.product04-page .sec2.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec2 .img1{ width: 78.23%; transform: translateY(20px); -webkit-transform: translateY(20px); transition: all 1s 1.5s; -webkit-transition: all 1s 1.5s; opacity: 0; } .product04-page .sec2 .img1:hover{ animation: leftright 0.6s; -webkit-animation: leftright 0.6s; } .product04-page .sec2.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec3{ background-repeat: no-repeat; background-size: 100% 100%; background-image: url(/bundles/frontend/images/product04_sec3_bg.jpg); padding-top: 14%; padding-bottom: 10.2%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; } .product04-page .sec3.active{ opacity: 1; } .product04-page .sec3 .text-box{ padding-left: 4.6875%; display: inline-block; margin-bottom: 13.5%; } .product04-page .sec3 .text-box h3{ font-size: 60px; color: rgba(4,4,4,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 65px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product04-page .sec3 .text-box p{ font-size: 24px; line-height: 2.5833; color: rgba(1,1,1,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product04-page .sec3 .text-box h3:hover,.product04-page .sec3 .text-box p:hover{ color: #c3000f; } .product04-page .sec3.active .text-box h3,.product04-page .sec3.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec3 ul{ font-size: 0; text-align: center; opacity: 0; transition: all 1s 1.5s; -webkit-transition: all 1s 1.5s; } .product04-page .sec3.active ul{ opacity: 1; } .product04-page .sec3 ul li{ width: 104px; height: 104px; line-height: 100px; display: inline-block; vertical-align: top; margin: 0 55px; border: 2px solid rgba(0,0,0,0.5); border-radius: 50%; } .product04-page .sec3 ul li img{ vertical-align: middle; width: 67.3%; } /*.product04-page .sec3 ul li:hover img{ transition: all 1s; -webkit-transition: all 1s; transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }*/ .product04-page .sec4{ background-repeat: no-repeat; background-size: 100% 100%; background-image: url(/bundles/frontend/images/product04_sec4_bg.jpg); padding-top: 5%; padding-bottom: 3%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; text-align: right; padding-right: 7.29%; } .product04-page .sec4.active{ opacity: 1; } .product04-page .sec4 .img1{ width: 20.1%; margin-bottom: 4%; transform: translateY(20px); -webkit-transform: translateY(20px); opacity: 0; transition: all 1s 0.5s; -webkit-transition: all 1s 0.5s; } .product04-page .sec4.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec4 .text-box h3{ font-size: 60px; color: rgba(1,1,1,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 30px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product04-page .sec4 .text-box p{ font-size: 24px; line-height: 2.5833; color: rgba(0,0,0,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1.5s,1.5s,0s; } .product04-page .sec4 .text-box h3:hover,.product04-page .sec4 .text-box p:hover{ color: #c3000f; } .product04-page .sec4.active .text-box h3,.product04-page .sec4.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec5{ position: relative; } .product04-page .sec5 .img1{ width: 100%; transform: translateY(20px); -webkit-transform: translateY(20px); opacity: 0; transition: all 1s; -webkit-transition: all 1s; } .product04-page .sec5.active .img1{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product04-page .sec5 .text-box{ text-align: center; position: absolute; left: 0; bottom: 15%; width: 100%; } .product04-page .sec5 .text-box h3{ font-size: 60px; color: rgba(1,1,1,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 70px; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product04-page .sec5 .text-box p{ font-size: 24px; color: rgba(0,0,0,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product04-page .sec5 .text-box h3:hover,.product04-page .sec5 .text-box p:hover{ color: #c3000f; } .product04-page .sec5.active .text-box h3,.product04-page .sec5.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } /*鏅鸿兘绌挎埓鍙婂叾浠?/ .product05-page .sec2{ position: relative; padding-top: 35%; padding-bottom: 5%; background-color: #e7e7e7; } .product05-page .sec2 .img1{ width: 25.8%; position: absolute; top: 0; left: 14%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; animation: updown 2s linear infinite alternate; -webkit-animation: updown 2s linear infinite alternate; transform: translateY(20px); -webkit-transform: translateY(20px); } .product05-page .sec2 .img2{ width: 56%; position: absolute; right: 4%; bottom: -5%; opacity: 0; transition: all 1s; -webkit-transition: all 1s; animation: updown 3s linear infinite alternate; -webkit-animation: updown 3s linear infinite alternate; transform: translateY(10px); -webkit-transform: translateY(10px); z-index: 1; } @keyframes updown{ 0% { transform: translateY(20px); } 100% { transform: translateY(-20px); } } @-webkit-keyframes updown{ 0% { -webkit-transform: translateY(20px); } 100% { -webkit-transform: translateY(-20px); } } .product05-page .sec2.active .img1,.product05-page .sec2.active .img2{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product05-page .sec2 .text-box{ padding-left: 7.29%; } .product05-page .sec2 .text-box h3{ font-size: 60px; color: rgba(4,4,4,0.6); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 2%; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product05-page .sec2 .text-box p{ font-size: 24px; line-height: 2.5833; color: rgba(2,2,2,0.4); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; width: 33%; } .product05-page .sec2 .text-box h3:hover,.product05-page .sec2 .text-box p:hover{ color: #c3000f; } .product05-page .sec2.active .text-box h3,.product05-page .sec2.active .text-box p{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product05-page .sec3{ position: relative; opacity: 0; transition: all 1s; -webkit-transition: all 1s; transform: translateY(20px); -webkit-transform: translateY(20px); } .product05-page .sec3.active{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product05-page .sec3 .bg{ width: 100%; } .product05-page .sec3 .text-box{ position: absolute; right: 4.6875%; top: 8%; text-align: right; width: 42%; } .product05-page .sec3 .text-box h3{ font-size: 60px; color: rgba(253,253,253,0.7); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 7%; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; } .product05-page .sec3 .text-box p{ font-size: 24px; line-height: 2.5833; color: rgba(254,253,253,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1.5s,1.5s,0s; } .product05-page .sec3 .text-box h3:hover,.product05-page .sec3 .text-box p:hover{ color: #c3000f; } .product05-page .sec3.active .text-box h3,.product05-page .sec3.active .text-box p,.product05-page .sec3.active .img-box{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product05-page .sec3 .img-box{ width: 20.1%; position: absolute; left: 7.29%; top: 14%; overflow: hidden; opacity: 0; transition: all 1s 0.5s; -webkit-transition: all 1s 0.5s; transform: translateY(20px); -webkit-transform: translateY(20px); } .product05-page .sec3 .img-box .img1{ width: 100%; } .product05-page .sec3 .img-box .img2{ width: 70.98%; position: absolute; left: 50%; top: 25%; margin-left: -35.49%; animation: round 5s linear infinite; -webkit-animation: round 5s linear infinite; } @keyframes round{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes round{ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .product05-page .sec4{ padding-top: 6.5%; text-align: center; } .product05-page .sec4 .text-box{ margin-bottom: 5%; } .product05-page .sec4 .text-box h3{ font-size: 60px; color: rgba(1,1,1,0.8); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; margin-bottom: 1.5%; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 0.5s,0.5s,0s; } .product05-page .sec4 .text-box p{ font-size: 24px; line-height: 2.5833; color: rgba(0,0,0,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition-property: transform,opacity,color; transition-duration: 1s,1s,1s; transition-delay: 1s,1s,0s; width: 69%; margin: 0 auto; } .product05-page .sec4 .text-box h3:hover,.product05-page .sec4 .text-box p:hover{ color: #c3000f; } .product05-page .sec4.active .text-box h3,.product05-page .sec4.active .text-box p,.product05-page .sec4.active .img-box li{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .product05-page .sec4 .img-box{ font-size: 0; overflow: hidden; } .product05-page .sec4 .img-box li{ width: 22%; display: inline-block; vertical-align: top; margin-left: -5%; margin-top: 9%; position: relative; opacity: 0; transition: all 1s; -webkit-transition: all 1s; transform: translateY(20px); -webkit-transform: translateY(20px); } .product05-page .sec4.active .img-box li.one{ transition-delay: 3s; } .product05-page .sec4.active .img-box li.two{ transition-delay: 2s; } .product05-page .sec4.active .img-box li.three{ transition-delay: 1.5s; } .product05-page .sec4.active .img-box li.four{ transition-delay: 2.5s; } .product05-page .sec4.active .img-box li.five{ transition-delay: 3.5s; } .product05-page .sec4 .img-box li:first-child{ margin-left: 0; } .product05-page .sec4 .img-box li.active{ margin-top: 0; z-index: 3; } .product05-page .sec4 .img-box li.sub-active{ margin-top: 5.5%; z-index: 2; } .product05-page .sec4 .img-box li div{ margin-bottom: 11%; font-size: 24px; color: rgba(0,0,0,0.5); font-family: "syht light"; font-family: "寰蒋闆呴粦"\0; font-weight: lighter; } .product05-page .sec4 .img-box li img{ width: 100%; box-shadow: 0 8px 18px rgba(0,0,0,0.25); } @media only screen and (max-width:1600px){ /*.product03-page .sec3 .text-box p{*/ /* margin-bottom: 8%;*/ /*}*/ .product05-page .sec2 .text-box h3,.product05-page .sec3 .text-box h3,.product05-page .sec4 .text-box h3{ font-size: 56px; } .product05-page .sec2 .text-box p,.product05-page .sec3 .text-box p,.product05-page .sec4 .text-box p{ font-size: 22px; } } @media only screen and (max-width:1366px){ /*鏂版苯杞︾數瀛?/ .product06-page .sec6 .text{ font-size: 18px; } /*鏂版苯杞︾數瀛?/ .product01-page .sec2 .text-box h3,.product01-page .sec3 .text-box h3,.product01-page .sec4 .text-box h3{ font-size: 38px; margin-bottom: 25px; } /*.product01-page .sec2 .text-box p,.product01-page .sec3 .text-box p,.product01-page .sec4 .text-box p{*/ /* font-size: 16px;*/ /* line-height: 30px;*/ /*}*/ .product01-page .sec4 .img-box img{ width: 10%; } .product01-page .sec4 .text-box h3{ margin-bottom: 35px; } .product01-page .sec4 .text-box{ margin-bottom: 5%; } .product02-page .sec2 .text-box h3,.product02-page .sec3 .text-box h3,.product02-page .sec4 .text-box h3,.product02-page .sec5 .text-box h3,.product02-page .sec6 .text-box h3{ margin-bottom: 25px; font-size: 38px; } .product02-page .sec2 .text-box p,.product02-page .sec3 .text-box p,.product02-page .sec4 .text-box p,.product02-page .sec5 .text-box p,.product02-page .sec6 .text-box p{ font-size: 16px; line-height: 30px; } .product02-page .sec4 .text-box{ margin-right: 4%; } /*.product03-page .sec2 .text-box h3,.product03-page .sec3 .text-box h3,.product03-page .sec4 .text-box h3{*/ /* font-size: 38px;*/ /*}*/ /*.product03-page .sec2 .text-box p,.product03-page .sec3 .text-box p,.product03-page .sec4 .text-box p{*/ /* font-size: 16px;*/ /* line-height: 30px;*/ /*}*/ .product03-page .sec2 .img1{ width: 41%; } .product03-page .sec3 .text-box ul li{ font-size: 16px; margin-bottom: 35px; width: 31%; } .product03-page .sec3 .text-box ul li div,.product03-page .sec4 ul li div{ width: 60px; height: 60px; line-height: 56px; } .product03-page .sec4 ul li{ font-size: 16px; } .product04-page .sec3 .text-box h3,.product04-page .sec4 .text-box h3,.product04-page .sec5 .text-box h3{ font-size: 38px; } .product04-page .sec2 .text-box p,.product04-page .sec3 .text-box p,.product04-page .sec4 .text-box p,.product04-page .sec5 .text-box p{ font-size: 16px; line-height: 30px; } .product04-page .sec2 .text-box h3,.product04-page .sec2 .text-box p{ margin-bottom: 35px; } .product04-page .sec2 .text-box ul li,.product04-page .sec3 ul li{ width: 80px; height: 80px; line-height: 76px; } .product04-page .sec3 .text-box{ margin-bottom: 5.5%; } .product04-page .sec5 .text-box h3{ margin-bottom: 20px; } .product05-page .sec2 .text-box h3,.product05-page .sec3 .text-box h3,.product05-page .sec4 .text-box h3{ font-size: 38px; } .product05-page .sec2 .text-box p,.product05-page .sec3 .text-box p,.product05-page .sec4 .text-box p{ font-size: 16px; line-height: 30px; } .product05-page .sec2 .text-box p{ width: 34%; } .product05-page .sec3 .text-box{ width: 45%; } } @media only screen and (max-width:1280px){ .product05-page .sec2 .text-box h3,.product05-page .sec3 .text-box h3,.product05-page .sec4 .text-box h3{ font-size: 36px; } .product05-page .sec2 .text-box p,.product05-page .sec3 .text-box p,.product05-page .sec4 .text-box p{ font-size: 18px; } } @media only screen and (max-width:1024px){ .product06-page .sec6 .z-text{ width:25vw!important; } .product06-page .sec6 .z-text2{ width:100vw!important; font-size:2rem; } .product06-page .sec6 .z-text2 p{ font-size:2rem; padding-left: 20px; padding-right: 20px; } .product03-page .sec2 .text-box h3{ left:68%; } .product03-page .sec2.prd5 .text-box h3{ top:30%; } .product03-page .sec4.prd5 .img2{ top:30%; } .product03-page .sec4.prd5{ padding-top:50%; } .product03-page .sec3.prd5{ padding-top:55%; } .product03-page .sec2.prd5{ padding-top:35%; } .product03-page .sec2.prd2-page{ padding-top:40%; } .product03-page .sec2{ padding-top:25%; } .product03-page .sec2.prd2-page .text-box h3{ right:6%; } .product03-page .sec3.prd2-page .text-box .text-text{ top:39%; } .product03-page .sec2.prd2-page .text-box h3{ top:5%; } .product03-page .sec2.prd2-page .text-one{ top:15%; } .product01-page .sec4 .img-box img{ width:20%; } .product01-page .sec3 .text-box .text-tit{ top:15%; } .product01-page .sec3 .text-box .text-text{ top:28%; width:80%; } .product03-page .sec2.prd5 .text-box .text-text{ top:38%; } .product06-page .tit h3{ font-size:54px; } .product01-page .text-box p{ font-size:1.7rem!important; } /*鏂版苯杞︾數瀛?/ .product06-page .sec6{ padding-top: 40px; } .product06-page .sec6 .tit{ margin-bottom: 16px; } .product06-page .sec6 .text{ font-size: 1.3rem; line-height: 20px; width: 90.4%; } /*鏂版苯杞︾數瀛?/ .product02-page .sec2 .text-box h3,.product02-page .sec3 .text-box h3,.product02-page .sec4 .text-box h3,.product02-page .sec5 .text-box h3,.product02-page .sec6 .text-box h3{ font-size: 46px; } .product02-page .sec2 .text-box p,.product02-page .sec3 .text-box p,.product02-page .sec4 .text-box p,.product02-page .sec5 .text-box p,.product02-page .sec6 .text-box p{ font-size: 16px; } .product02-page .sec4 .text-box{ margin-right: 2%; } .product02-page .sec6 .text-box{ margin-right: 2%; } .product03-page .sec2 .text-box{ padding-bottom: 11.5%; } /*.product03-page .sec2 .text-box h3,.product03-page .sec3 .text-box h3,.product03-page .sec4 .text-box h3{*/ /* font-size: 32px;*/ /*}*/ .product03-page .sec2 .text-box p,.product03-page .sec3 .text-box p,.product03-page .sec4 .text-box p{ font-size: 14px; } .product03-page .sec3 .text-box ul li{ font-size: 14px; } .product03-page .sec3 .text-box ul li div,.product03-page .sec4 ul li div{ width: 40px; height: 40px; line-height: 36px; } .product03-page .sec4 ul li{ font-size: 14px; } .product04-page .sec2 .text-box h3,.product04-page .sec2 .text-box p{ margin-bottom: 20px; } .product04-page .sec2 .text-box ul li,.product04-page .sec3 ul li{ width: 60px; height: 60px; line-height: 56px; } .product05-page .sec2 .text-box h3,.product05-page .sec3 .text-box h3,.product05-page .sec4 .text-box h3{ font-size: 30px; } .product05-page .sec2 .text-box p,.product05-page .sec3 .text-box p,.product05-page .sec4 .text-box p{ font-size: 14px; } } @media only screen and (max-width:768px){ .product03-page .sec4.prd5{ padding-top:60%; } .product03-page .sec3.prd5{ padding-top:65%; } .product03-page .sec2.prd5 .text-box .text-text p{ left:-20%; top:-5%; } .product03-page .sec2.prd5 .text-box h3{ right:15%; top:20%; } .product03-page .sec3.prd2-page{ padding-top:50%; } .product03-page .sec3.prd2-page .img1{ top:-7%; } .product03-page .sec4 .img2{ top:24%; } .product03-page .sec4{ padding-top:15%; } .product03-page .sec3{ padding-top:70% } .product03-page .sec2 .text-box p{ left:55%; width:35%; } .product03-page .sec2.prd2-page .img1{ bottom:10%; } .product03-page .sec2.prd2-page{ padding-top:60% } .product03-page .sec2.prd2-page .text-one{ top:12%; } .product01-page .sec3{ padding-top:45%; } .product01-page .sec2 .text-box .text-tit{ top:50%; left:40%; } .product01-page .sec2 .text-box .text-text{ top:65%; left:15%; width:70%; } .product01-page .sec2{ padding-top:50%; } .product03-page .sec2.prd5 .text-box .text-text{ top:32%; width:35%; } .product03-page .sec2.prd5 .text-box .text-text p{ font-size:12px; } .product03-page .sec3.prd5 .text-box h3{ top:10%; left:6%; } .product03-page .sec3.active.prd2-page .text-box .text-text{ top:50% } .product06-page .tit h3{ font-size:54px; } .product03-page .sec4 .text-box h3{ margin-bottom:3rem; } .product03-page .sec2.prd5 .text-box #p1{ width:42%; line-height:3rem; left:47%; } .product03-page .sec4.prd5 .text-box{ top:20%; } .product03-page .sec3 .text-box h3{ top:30%; } .product03-page .sec3.prd2-page .text-box h3{ top:35%; } .product03-page .sec3 .text-box .text-text p{ font-size:12px; } .product03-page .sec3.active .text-box .text-text{ top:40%; width:45%; } .product03-page .sec3.prd5.active .text-box .text-text{ top:20%; left:8%; } .product03-page .sec2 .text-box p{ top:38%; } .product03-page .sec2.prd2-page .text-box h3{ top:2%; } /*鏂版苯杞︾數瀛?/ .product06-page .sec6 .z-text{ width:36vw!important; left:3%; top:unset; bottom:9%; } .product06-page .sec6 .zizhizhengshu{ top:43%!important; left:7%; } .product06-page .sec6 .z-text2{ width:100vw!important; font-size:2rem; bottom:2%; } .product06-page .sec6 .z-text2 p{ font-size:1.5rem; padding:0; } .product06-page .sec6{ padding-top: 20px; } .product06-page .sec6 .text{ width: 92%; } .product06-page .sec6 .bg{ margin-bottom:20px; } /*鏂版苯杞︾數瀛?/ #main .sec1{ padding: 25px 0; } .product01-page .sec4 .text-box{ width: 90%; margin: 0 auto 35px; } .product01-page .sec4 .text-box p br{ display: none; } .product01-page .sec2 .text-box{ padding-left: 2.4%; } /*.product02-page .sec2 .text-box h3,.product02-page .sec3 .text-box h3,.product02-page .sec4 .text-box h3,.product02-page .sec5 .text-box h3,.product02-page .sec6 .text-box h3{*/ /* font-size: 36px;*/ /*}*/ .product02-page .sec2 .text-box p,.product02-page .sec3 .text-box p,.product02-page .sec4 .text-box p,.product02-page .sec5 .text-box p,.product02-page .sec6 .text-box p{ font-size: 14px; line-height: 34px; } .product02-page .sec2 .text-box p{ padding: 0 7%; } .product02-page .sec4 .text-box{ margin-right: 0%; } /*.product03-page .sec2 .text-box h3,.product03-page .sec3 .text-box h3,.product03-page .sec4 .text-box h3{*/ /* font-size: 28px;*/ /* margin-bottom: 15px;*/ /*}*/ .product03-page .sec2 .text-box p,.product03-page .sec3 .text-box p,.product03-page .sec4 .text-box p{ font-size: 12px; line-height: 3rem; } .product03-page .sec3 .text-box ul li{ margin-bottom: 15px; font-size: 12px; } .product03-page .sec4 .img1{ top: -6%; } .product03-page .sec4 ul li{ margin: 0 25px; font-size: 12px; } .product04-page .sec2 .text-box h3,.product04-page .sec3 .text-box h3,.product04-page .sec4 .text-box h3,.product04-page .sec5 .text-box h3{ font-size: 34px; } .product04-page .sec2 .text-box p, .product04-page .sec3 .text-box p, .product04-page .sec4 .text-box p, .product04-page .sec5 .text-box p{ font-size: 14px; } .product04-page .sec5 .text-box p{ padding: 0 10%; } .product04-page .sec5 .text-box{ bottom: 9%; } .product05-page .sec2 .text-box{ padding-left: 3.29%; } .product05-page .sec3 .text-box{ width: 54%; } .product05-page .sec3 .text-box h3{ margin-bottom: 5%; } } @media only screen and (max-width:767px){ .product06-page .sec6 .z-text2{ width:44%!important; } .product06-page .sec6 .bg{ margin-bottom: 0; } .product06-page .sec6 #ss{ margin-top:40px!important; } .product03-page .sec3.prd5.active .text-box .text-text{ top:12%; } .product03-page .sec4.prd5 .img1{ width:unset!important; height:100%!important; } .product01-page .sec5 .img6{ width:unset; height:100%; } .product03-page .sec3.prd5 #img2{ top:70% } .product03-page .sec3.prd5 .text-box .text-text p{ width:120%; } .product03-page .sec2.prd2-page .text-box h3{ right:9%; } .product03-page .sec3.prd2-page{ padding-top:65%; } .product03-page .sec4 .img2{ top:26%; left:7%; } .product03-page .sec4 .text-box{ top:10%; } .product03-page .sec4{ padding-top:35% } .product03-page .sec3 .img1{ top:10%; } .product03-page .sec2 .text-box h3{ top:30%; left:58%; } .product03-page .sec2 .text-box p{ top:38%; } .product03-page .sec2.prd2-page{ padding-top:70%; } .product01-page .sec5 .img8{ width:25%; top:25%; } .product01-page .sec5{ padding-top:80%; } .product01-page .sec5 .text-text{ width:51%; } .product01-page .sec4 .img-box img{ width:20%; } .product01-page .sec4{ padding-top:60%; } .product03-page .sec4.prd5 .img2{ top:30%; } .product03-page .sec4.prd5{ padding-top:70%; } .product03-page .sec2.prd5{ padding-top:60%; } .product03-page .sec2.prd5 .text-box .text-text p{ left:unset; top:2%; right:30%; font-size:1.3rem; line-height: 1.6; } .product03-page .sec2.prd5 .text-box .text-text{ top:16%; width:40%; } .product03-page .sec2.prd5 .img1{ top:25%; } .product03-page .sec2 .img1{ bottom:-10%; } .product03-page .sec3.prd2-page .img1{ top:10%; } .product03-page .sec2{ padding-top:45%; } .product03-page .sec2.prd2-page .img1{ bottom:10%; } .product03-page .sec2.prd2-page .text-box p{ font-size:1.3rem; } .product06-page .tit h3{ font-size:2.4rem; } .product03-page .sec2.prd5 .text-box h3{ top:16%; width:25%; } .product03-page .sec3.active.prd2-page .text-box .text-text{ top:33%; left:12%; } .product03-page .sec3.prd5 .text-box h3{ top:10%; left:5%; width:60%; } .product03-page .sec4.prd5 .text-box{ width:30%; top:10%; } .product03-page .sec3.prd5{ padding-top:65%; } /*.product03-page .sec2.prd5 .text-box #p1 {*/ /* width: 42%;*/ /* line-height: 1.6;*/ /* left: 49%;*/ /* top: 33%;*/ /*}*/ .product03-page .sec3.prd2-page .text-box h3{ top:30%; } .product01-page .sec5 .text-tit h3{ top:10%; } .product03-page .sec3 .img1{ left:47%; } .product03-page .sec4 .text-box h3{ margin-bottom:2rem; } .product03-page .sec4 .text-box p{ width:unset; } .product03-page .sec3.prd5-page .text-box h3{ top:40%; } .product03-page .sec3 .text-box h3{ top:15%; } .product03-page .sec3{ padding-top:70%; } .product03-page .sec3 .text-box .text-text p{ line-height:1.6!important } .product03-page .sec2 .text-box p{ width: 40%; /* right: 20%; */ left: unset; right: 10%; top:42%; font-size:1.3rem; } /*鎵嬫満閫傞厤*/ .product03-page .sec3 .text-box .text-text p{ font-size:1.3rem; } .product03-page .sec3.active .text-box .text-text{ top:18%; width:45%; left:10%; } .product03-page .sec3.prd2-page .text-box .text-text{ width:35%; } .product03-page .sec3.prd2-page .text-box .text-text p{ line-height:1.6!important; } .product03-page .sec3.active .text-box .text-text{ line-height:1.6; } .product03-page .sec2.prd2-page .text-box h3{ top:0; width:40%; } .product03-page .sec2.prd2-page .text-one{ right:9%; width:48%; top:9%; } .product01-page .sec5 .text-tit{ top:21%; } .product01-page .sec5 .text-text{ top:20%; } .product01-page .sec4 .text-box p{ top:25%; width:80%; left:10%; text-align: center; } .product01-page .sec4 .all-imgbox{ top:60%; } .product01-page .sec4 .text-box h3{ top:15%; left:32%; } .product01-page .sec2 .text-box .text-tit{ left:38%; } .product01-page .text-box h3{ font-size:1.8rem!important } .product01-page .text-box p{ font-size:1.3rem!important; } .product01-page .sec3 .text-box .text-tit{ top:13%; } .product01-page .sec3 .text-box .text-text{ top:26%; left:-7%; width:unset; } .product01-page .sec3{ height:350px; } .product01-page .sec2{ padding-top:80% } .product01-page .sec2 .text-box .text-tit{ top:35%; } .product01-page .sec2 .text-box .text-text{ top:50%; left:10%; width:80%; } .product01-page .text-box h3{ font-size:1.6rem!important; } .product01-page .sec2 .text-box p{ font-size:1.3rem!important; } /*鎵嬫満閫傞厤*/ /*鏂版苯杞︾數瀛?/ .product06-page .sec6 .text{ width: 90.4%; } /*鏂版苯杞︾數瀛?/ #main .sec1{ padding: 20px 0; } #main .sec1 h3{ font-size: 2.4rem; margin-bottom: 5px; } #main .sec1 p{ font-size: 1rem; } .product01-page .sec2 .text-box h3,.product01-page .sec3 .text-box h3,.product01-page .sec4 .text-box h3{ font-size: 2.2rem; margin-bottom: 10px; } .product01-page .sec2 .text-box p,.product01-page .sec3 .text-box p,.product01-page .sec4 .text-box p{ font-size: 1rem; line-height: 20px; } .product01-page .sec2 .text-box p br,.product01-page .sec3 .text-box p br,.product01-page .sec4 .text-box p br{ display: none; } .product01-page .sec2 .text-box p{ width: 100%; } .product01-page .sec3 .text-box p{ width: 65%; display: inline-block; } .product01-page .sec4 .text-box h3{ margin-bottom: 20px; } .product01-page .sec2 .text-box{ padding-left: 0; } .product01-page .sec3 .text-box{ padding-right: 0; text-align: right; } .product02-page .sec2 .text-box h3,.product02-page .sec3 .text-box h3,.product02-page .sec4 .text-box h3,.product02-page .sec5 .text-box h3,.product02-page .sec6 .text-box h3{ margin-bottom: 15px; font-size: 1.8rem; } .product02-page .sec3 .text-box h3{ text-align: right; } .product02-page .sec2 .text-box p, .product02-page .sec3 .text-box p, .product02-page .sec4 .text-box p, .product02-page .sec5 .text-box p, .product02-page .sec6 .text-box p{ line-height: 24px; font-size: 1.1rem; } .product02-page .sec3 .text-box{ right: 0; } .product02-page .sec3 .text-box p{ text-align: right; } .product02-page .sec4 .text-box{ width: 46%; text-align: left; } .product02-page .sec4 .text-box p br{ display: none; } .product02-page .sec5 .text-box{ margin-bottom: 35px; } .product02-page .sec5 .text-box p{ padding: 0 10%; } .product02-page .sec6 .text-box{ text-align: center; } .product03-page .sec2 .text-box{ text-align: center; } .product03-page .sec2 .text-box h3,.product03-page .sec3 .text-box h3,.product03-page .sec4 .text-box h3{ font-size: 1.6rem; } .product03-page .sec2 .text-box p,.product03-page .sec3 .text-box p,.product03-page .sec4 .text-box p{ font-size: 1.3rem; line-height: 1.6; } .product03-page .sec2 .text-box p br,.product03-page .sec3 .text-box p br,.product03-page .sec4 .text-box p br{ display: none; } /*.product03-page .sec2 .text-box p{*/ /* padding: 0 10%;*/ /*}*/ /*.product03-page .sec3 .text-box p{*/ /* padding: 0 10%;*/ /*}*/ /*.product03-page .sec4 .text-box p{*/ /* width: 65%;*/ /*}*/ .product03-page .sec3 .text-box ul li,.product03-page .sec4 ul li{ font-size: 1rem; } /*.product03-page .sec4 .img1{*/ /* width: 46%;*/ /*}*/ .product03-page .sec2 .img1{ margin-left: 0; } .product03-page .sec3 .img1{ margin-left: 8%; } .product03-page .sec3 .text-box ul li{ width: 20%; } .product03-page .sec4 ul li{ margin: 0; width: 20%; } .product04-page .sec2 .text-box h3,.product04-page .sec3 .text-box h3,.product04-page .sec4 .text-box h3,.product04-page .sec5 .text-box h3{ margin-bottom: 15px; font-size: 2rem; } .product04-page .sec2 .text-box p,.product04-page .sec3 .text-box p,.product04-page .sec4 .text-box p,.product04-page .sec5 .text-box p{ font-size: 1.2rem; line-height: 1.5; } .product04-page .sec2 .text-box p{ padding: 0 10%; margin-bottom: 15px; } .product04-page .sec2 .text-box ul li,.product04-page .sec3 ul li{ width: 50px; height: 50px; line-height: 46px; } .product04-page .sec3 ul li{ margin: 0 20px; } .product04-page .sec4 p br{ display: none; } .product04-page .sec5 .text-box{ bottom: 0%; } .product05-page .sec2 .text-box p{ width: 60%; } .product05-page .sec2 .text-box h3,.product05-page .sec3 .text-box h3,.product05-page .sec4 .text-box h3{ font-size: 1.6rem; } .product05-page .sec2 .text-box p,.product05-page .sec3 .text-box p,.product05-page .sec4 .text-box p,.product05-page .sec4 .img-box li div{ font-size: 1rem; } .product05-page .sec2 .text-box p, .product05-page .sec3 .text-box p, .product05-page .sec4 .text-box p{ line-height: 18px; } .product05-page .sec3 .text-box{ width: 60%; } } @media only screen and (max-width:420px){ .product02-page .sec3{ text-align: left; } .product02-page .sec3 .text-box{ width: 51%; } .product02-page .sec3 .img1{ width: 89%; } .product02-page .sec3 .text-box p br{ display: none; } .product04-page .sec3{ padding-top: 10%; padding-bottom: 4%; } .product04-page .sec3 .text-box h3{ padding-bottom: 52px; } .product04-page .sec3 .text-box{ margin-bottom: 2%; } .product05-page .sec2 .img2{ width: 39%; right: 0; bottom: 4%; animation: updown1 3s linear infinite alternate; -webkit-animation: updown1 3s linear infinite alternate; transform: translateY(20x); -webkit-transform: translateY(20px); z-index: 1; } @keyframes updown1{ 0% { transform: translateY(20px); } 100% { transform: translateY(0px); } } @-webkit-keyframes updown1{ 0% { -webkit-transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); } } } @media only screen and (max-width:320px){ .product01-page .sec5 .text-tit h3{ top:8%; } .product01-page .sec3 .text-box .text-tit{ top:8%; } .product01-page .sec3 .text-box .text-text{ top:20%; width:110%; } .product01-page .sec2{ padding-top:85%; } .product03-page .sec2.prd5 .text-box .text-text{ top:16%; width:45%!important; left:52%; } .product01-page .sec4{ padding-top:60%; } .product01-page .sec4 .all-imgbox{ top:60%; left:50%; } .product01-page .sec5{ padding-top:100%; } .product01-page .sec5 .text-text{ top:16%; width:50%; } } @media only screen and (max-width:360px) and (min-width:340px) { .product03-page .sec3 .text-box h3{ left:5%; } .product03-page .sec2.prd2-page{ padding-top:80%; } .product03-page .sec2.prd2-page .text-box h3{ width:45%; } } @media only screen and (max-width:340px) and (min-width:320px) { .product03-page .sec4.prd5{ padding-top:85%; } .product03-page .sec4.prd5 .text-box h3{ margin-left:30%; } .product03-page .sec4.prd5 .img2{ top:68%; left:30%; } .product03-page .sec4.prd5 .text-box{ top:20%; width:80%; } .product03-page .sec3.prd5 #img2{ top:83%; } .product03-page .sec3.prd5 .text-box h3{ left:-5%; width:80%; } .product03-page .sec2.prd5 .text-box .text-text p{ right:11%; } .product03-page .sec2.prd5 .text-box h3{ width:40%; right:4%; top:17%; } .product03-page .sec3 .img1{ top:30%; } .product03-page .sec4 .text-box{ top:7%; width:30%; } .product03-page .sec4{ padding-top:40%; } .product03-page .sec3.active .text-box .text-text{ top:14%; } .product03-page .sec3{ padding-top:90%; } .product03-page .sec3 .text-box h3{ width:50%; left:8%; top:11%; } .product03-page .sec2 .text-box h3{ width:30%; left:61%; } .product03-page .sec3.active.prd2-page .text-box .text-text{ top:16%; } .product03-page .sec3.prd2-page .text-box h3{ top:15%; width:53%; } .product03-page .sec3.prd2-page{ padding-top:70%; } .product03-page .sec2.prd2-page .text-box h3{ right:13px; } .product03-page .sec2.prd2-page{ padding-top:90%; } .product03-page .sec2.prd2-page .text-box h3{ width:55%; } .product03-page .sec2.prd2-page .text-one{ top:7%; } } @media only screen and (max-width:414px) and (min-width:411px) { .product03-page .sec4.prd5{ padding-top:60%; } .product03-page .sec3.prd5 .text-box h3{ left:2%; } .product03-page .sec3.prd5{ padding-top:55%; } .product03-page .sec2.prd5{ padding-top:50%; } .product03-page .sec4{ padding-top:25%; } .product03-page .sec2.prd2-page{ padding-top:50%; } /*.product03-page .sec2.prd5 .text-box .text-text{*/ /* padding-top:65%;*/ /*}*/ .product01-page .sec2 .text-box .text-text{ top:55%; } .product01-page .sec2 .text-box .text-tit{ top:40%; } .product01-page .sec5{ padding-top:70%; } } @media only screen and (max-width:376px) { .product03-page .sec2.prd5 .text-box .text-text{ width:38%; } } @media only screen and (max-width:361px) { .product03-page .sec2.prd5 .text-box .text-text{ width:40%; } }