.section{ font-size: 16px; } .sec1{ position: relative; } .sec1 .inner{ position: relative; } .sec1 .text-box{ padding-top: 15.7%; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; width: 65.3%; } .sec1 .text-box.actived{ opacity: 1; } .sec1 .text-box h3{ background-image: -webkit-linear-gradient(left, #003f86, #0b83d0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #003f86; display: inline-block; font-size: 3em; line-height: 1.25; margin-bottom: 4.36%;/*41px*/ } .sec1 .text-box p{ font-size: 1.125em; color: #333; line-height: 1.78; text-indent: 2em; max-width: 45em; text-align: justify; } .sec1 ul{ width: 65.3%; margin-top: 13.125%;/*189px*/ -webkit-display: flex; -webkit-align-items: flex-start; -webkit-justify-content: flex-start; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; position: relative; padding:3.82% 0 ;/*55*/ } .sec1 ul::after{ content: ""; position: absolute; left: -100%; top: 0; width: 300%; height: 100%; background-color: #0c67ba; } .sec1 li{ -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; -webkit-transition-property: opacity,transform; -webkit-transition-duration: 1s,1s; transition-property: opacity,transform; transition-duration: 1s,1s; position: relative; z-index: 2; width: 33%; } .sec1 li:nth-child(1){ -webkit-transition-delay: 0.25s,0.25s; transition-delay: 0.25s,0.25s; } .sec1 li:nth-child(2){ -webkit-transition-delay: 0.5s,0.5s; transition-delay: 0.5s,0.5s; } .sec1 li:nth-child(3){ -webkit-transition-delay: 0.75s,0.75s; transition-delay: 0.75s,0.75s; margin-right: 0; } .sec1 ul.actived li{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .sec1 li img{ width: auto; height: 2.25em;/*36px*/ margin-bottom: 1.75em;/*28px*/ } .sec1 li h5{ font-size: inherit; color: #fff; margin-bottom: 0.5em; } .sec1 li h5 b{ font-size: 2em; font-weight: bold; vertical-align: baseline !important; } .sec1 li p{ font-size: 0.875em; color: #fff; } .sec1 .img{ position: absolute; left: 100%; bottom: 0; z-index: 1; width: 51.389%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: transform 1.5s; transition: transform 1.5s; } .sec1 .img.actived{ left: 65.3%; -webkit-transform: scale(1); transform: scale(1); } .sec2{ padding: 9.11% 0 8.65%;/*175 0 166*/ } .sec2 .inner{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: flex-start; -webkit-flex-direction: row-reverse; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: flex-start; flex-direction: row-reverse; flex-wrap: wrap; } .sec2 .img-box{ width: 36.111%; -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); opacity: 0; -webkit-transition: transform 1s,opacity 1s; transition: transform 1s,opacity 1s; } .sec2 .img-box.actived{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .sec2 .text-box{ width: 63.889%; color: #333; padding: 0 8.61%; -webkit-transform: translate3d(50%,0,0); transform: translate3d(50%,0,0); opacity: 0; -webkit-transition: transform 1s,opacity 1s; transition: transform 1s,opacity 1s; } .sec2 .text-box.actived{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .sec2 .text-box h3{ font-size: 3em; color: inherit; } .sec2 .text-box h5{ font-size: 1.375em; color: inherit; line-height: 1.5; margin: 4.2% 0 5.2%;/*28 0 35*/ } .sec2 .text-box p{ text-indent: 2em; text-align: justify; font-size: 1.125em; color: inherit; line-height: 1.78; } .sec3{ background-color: #f8f8f8; padding: 8.1% 0 8.59375%;/*155 0 165*/ } .sec3 .inner{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: flex-start; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; } .sec3 .img-box{ width: 36.111%; -webkit-transform: translate3d(50%,0,0); transform: translate3d(50%,0,0); opacity: 0; -webkit-transition: transform 1s,opacity 1s; transition: transform 1s,opacity 1s; } .sec3 .img-box.actived{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .sec3 .text-box{ width: 63.889%; color: #333; padding: 0 10.7%; -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); opacity: 0; -webkit-transition: transform 1s,opacity 1s; transition: transform 1s,opacity 1s; } .sec3 .text-box.actived{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .sec3 .text-box h3{ font-size: 3em; color: inherit; margin-bottom: 7.68%;/*47*/ } .sec3 .text-box p{ text-indent: 2em; text-align: justify; font-size: 1.125em; color: inherit; line-height: 1.78; } .sec3 .text-box ul{ margin-top: 18.137%;/*111*/ -webkit-display: flex; -webkit-align-items: flex-start; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec3 .text-box h4{ font-size: 1em; color: #0c67ba; margin-bottom: 1.5em; } .sec3 .text-box h4 b{ font-size: 2em; font-weight: 600; vertical-align: baseline !important; } .sec3 .text-box h5{ font-size: 0.875em; color: inherit; font-weight: normal; } .sec4{ position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(../images/intro_sec4_bg_web.jpg); padding: 6.77% 0;/*130 0*/ } .sec4::before{ content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 50%; background-color: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .sec4 .inner{ text-align: right; position: relative; } .sec4 .text-box{ color: #333; text-align: justify; width: 50%; margin-left: 50%; padding-left: 8%;/*116*/ } .sec4 h3{ font-size: 3em; color: inherit; margin-bottom: 9.75%;/*59*/ -webkit-transition: opacity 1s; transition: opacity 1s; opacity: 0; } .sec4 .text-box.actived h3{ opacity: 1; } .sec4 p{ font-size: 1.125em; color: inherit; line-height: 1.78; text-indent: 2em; margin-bottom: 0.56em; -webkit-transition: opacity 1s 0.5s; transition: opacity 1s 0.5s; opacity: 0; } .sec4 .text-box.actived p{ opacity: 1; } .sec4 p:last-child{ margin-bottom: 0; } .sec5{ text-align: center; padding: 9.0625% 0 10%;/*174 0 193*/ color: #333; } .sec5 h3{ font-size: 3em; color: inherit; margin-bottom: 7.29%;/*105*/ -webkit-transition: opacity 1s; transition: opacity 1s; opacity: 0; } .sec5.actived h3{ opacity: 1; } .sec5 li{ display: inline-block; vertical-align: top; width: 400px; max-width: 33.333%; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); -webkit-transition-property: opacity,transform; -webkit-transition-duration: 1s,1s; transition-property: opacity,transform; transition-duration: 1s,1s; } .sec5 li:nth-child(1){ -webkit-transition-delay: 0.5s,0.5s; transition-delay: 0.5s,0.5s; } .sec5 li:nth-child(2){ -webkit-transition-delay: 0.75s,0.75s; transition-delay: 0.75s,0.75s; } .sec5 li:nth-child(3){ -webkit-transition-delay: 1s,1s; transition-delay: 1s,1s; } .sec5.actived li{ opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .sec5 li img{ width: 29%; margin-bottom: 8.75%; } .sec5 p{ font-size: 1.25em; color: inherit; line-height: 1.8; } @media only screen and (max-width:1366px){ .section{ font-size: 14px; } } @media only screen and (max-width:1200px){ .section{ font-size: 12px; } } @media only screen and (max-width:1024px){ .section{ font-size: 0.625rem; } .sec1 .text-box{ padding-top: 10%; width: 100%; } .sec1 ul{ width: 100%; margin-top: 5%;/*189px*/ padding:8% 0;/*55*/ -webkit-justify-content: space-between; justify-content: space-between; } .sec1 li{ width: auto; } .sec1 .img{ position: static; width: 100%; margin-top: 5%; } .sec2{ padding: 10% 0;/*175 0 166*/ } .sec2 .inner{ -webkit-display: block; display: block; } .sec2 .img-box{ width: 80%; margin: 0 auto; } .sec2 .text-box{ width: 100%; padding: 0; margin-bottom: 5%; } .sec3{ padding: 10% 0;/*155 0 165*/ } .sec3 .inner{ -webkit-display: block; display: block; } .sec3 .img-box{ width: 80%; margin: 0 auto; } .sec3 .text-box{ width: 100%; padding: 0; } .sec3 .text-box ul{ margin-top: 10%;/*111*/ margin-bottom: 10%; } .sec4{ background-image: url(../images/intro_sec4_bg_mobile.jpg); padding: 10% 0 100%;/*130 0*/ } .sec4::before{ height: 50%; width: 100%; -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); } .sec4 .text-box{ width: 100%; margin-left: 0; padding-left: 0;/*116*/ } .sec4 h3{ margin-bottom: 5%;/*59*/ } .sec5{ padding: 15% 0;/*174 0 193*/ } .sec5 h3{ margin-bottom: 10%;/*105*/ line-height: 1.25; } .sec5 li{ max-width: 30%; margin-right: 5%; } .sec5 li:nth-child(3){ margin-right: 0; } .sec5 li img{ width: 40%; } }