.section{ font-size: 16px; } .sec0{ position: relative; } .sec0 .swiper-slide .inner{ position: absolute; left: 0; right: 0; top: 26.5%; color: #fff; } .sec0 .num{ font-size: 1.25em; margin-bottom: 4.88%; } .sec0 .num b{ font-size: 2.8em; } .sec0 .num span{ opacity: 0.5; } .sec0 h3{ font-size: 4em; text-shadow: 0px 0.046875em 0.15625em rgba(0, 0, 0, 0.08); } .sec0 .swiper-pagination{ bottom: 9%; left: 0; right: 0; -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: center; -webkit-flex-direction: row; display: flex; align-items: center; justify-content: center; flex-direction: row; width: 1366px; } .sec0 .swiper-pagination .line{ width: 30%; height: 1px; background-color: #fff; opacity: 0.3; } .sec0 .swiper-pagination .line:last-child{ display: none; } .sec0 .swiper-pagination .swiper-pagination-bullet{ -webkit-flex-shrink: 0; flex-shrink: 0; width: 0.625em; height: 0.625em; background-color: #fff; position: relative; text-shadow: 0px 0.125em 0.4375em rgba(0, 0, 0, 0.27); cursor: pointer; opacity: 1; vertical-align: middle; margin: 0 0.5em; } .sec0 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: transparent; width: 1em; height: 1em; border-radius: 50%; border: 0.125em solid #fff; margin: 0 0.3125em; } .sec0 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{ content: ""; border-radius: 50%; border: 0.0625em solid #fff; width: 166.7%; height: 166.7%; display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); opacity: 0.2; } .sec0 .swiper-pagination .swiper-pagination-bullet b{ font-size: 0.875em; color: #fff; text-shadow: 0px 0.143em 0.5em rgba(0, 0, 0, 0.27); position: absolute; left: 50%; bottom: 360%; display: block; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; font-weight: normal; } .sec0 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active b{ bottom: 310%; } .sec1{ padding: 7.865% 0 8.125%; } .sec1 .inner > .flex-box{ -webkit-display: flex; -webkit-align-items: flex-end; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin-bottom: 3.78%;/*65*/ } .sec1 h1{ 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; } .sec1 h1 b{ display: block; margin-bottom: 0.75em; } .sec1 h1 b:last-child{ margin-bottom: 0; } .sec1 .btn-box .btn{ border-radius: 50%; border: 1px solid #0c67ba; width: 2.875em; height: 2.875em; vertical-align: middle; -webkit-display: inline-flex; -webkit-align-items: center; -webkit-justify-content: center; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .sec1 .btn-box .btn.swiper-next{ -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-left: 1em; } .sec1 .btn-box img{ width: 52.3%; background-repeat: no-repeat; background-image: url(../images/index_sec1_btn_bg.png); background-position: center bottom; background-size: auto 200%; } .sec1 .swiper-container{ cursor: url("../images/index_sec1_cursor.png"),auto; } .sec1 .swiper-slide{ width: 23.55%; color: #333; cursor: inherit; } .sec1 .swiper-slide .flex-box{ position: absolute; left: 0; top: 0; width: 100%; -webkit-display: flex; -webkit-align-items: flex-start; -webkit-justify-content: space-between; -webkit-flex-direction: row; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; padding: 19% 8.64%; background: linear-gradient(to bottom, rgba(248,250,251,1) 60%, rgba(248,250,251,0)); } .sec1 .swiper-slide .flex-box::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #f8fafb; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .sec1 .swiper-slide .text-box{ position: relative; z-index: 1; } .sec1 .swiper-slide h3{ font-size: 4.375em; color: #f8fafb; font-weight: bold; text-shadow: -1px 1px 0 #cee0f0, 1px 1px 0 #cee0f0, 1px -1px 0 #cee0f0,-1px -1px 0 #cee0f0; position: absolute; left: 0; top: -0.57em; z-index: -1; } .sec1 .swiper-slide h5{ font-size: 1.5em; color: inherit; margin-bottom: 0.5em; } .sec1 .swiper-slide p{ font-size: inherit; color: inherit; font-weight: lighter; line-height: 1.625; min-height: 3.25em; text-transform: uppercase; } .sec1 .swiper-slide .icon-box{ height: 3.125em; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; } .sec1 .swiper-slide .icon-box img{ -webkit-transition: opacity 0.5s; transition: opacity 0.5s; width: auto; height: 100%; } .sec1 .swiper-slide .icon-box .black{ opacity: 1; } .sec1 .swiper-slide .icon-box .blue{ opacity: 0; } .sec1 .swiper-slide .icon-box .blue{ position: absolute; left: 0; top: 0; } .sec2{ background-color: #f7f9fc; padding: 6% 0 6.77%; position: relative; } .sec2 .inner{ position: relative; z-index: 1; } .sec2 .text-box{ opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; } .sec2 .text-box.actived{ opacity: 1; } .sec2 .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; margin-bottom: 3.26%;/*56px*/ } .sec2 .text-box p{ font-size: 1.25em; color: #333; line-height: 1.5; margin-bottom: 0.872%;/*15px*/ } .sec2 .text-box p:last-child{ margin-bottom: 0; } .sec2 ul{ margin-top: 11.57%;/*199px*/ -webkit-display: flex; -webkit-align-items: stretch; -webkit-justify-content: flex-start; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: stretch; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; } .sec2 li{ width: 19.186%;/*330px*/ background-color: #fff; padding: 2.6% 0 3.1% 4%;/*45 0 53 70px*/ margin-right: 0.35%;/*6px*/ -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; } .sec2 li:nth-child(1){ -webkit-transition-delay: 0.25s,0.25s; transition-delay: 0.25s,0.25s; } .sec2 li:nth-child(2){ -webkit-transition-delay: 0.5s,0.5s; transition-delay: 0.5s,0.5s; } .sec2 li:nth-child(3){ -webkit-transition-delay: 0.75s,0.75s; transition-delay: 0.75s,0.75s; margin-right: 0; } .sec2 ul.actived li{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .sec2 li img{ width: auto; height: 3em;/*48px*/ margin-bottom: 12%;/*42px*/ } .sec2 li h5{ font-size: 1.125em; color: #0c67ba; margin-bottom: 5%;/*22px*/ } .sec2 li h5 b.odometer{ font-size: 2.22em; font-weight: bold; vertical-align: baseline; line-height: 1; } .sec2 li h5 i{ font-style: normal; vertical-align: baseline; } .sec2 li p{ font-size: inherit; color: #333333; } .sec2 .img{ position: absolute; left: 100%; top: 0; width: auto; height: 100%; opacity: 0; -webkit-transition: opacity 1s 0.25s,left 1s 0.25s; transition: opacity 1s 0.25s,left 1s 0.25s; } .sec2 .img.actived{ left: 50%; opacity: 1; } .sec3{ padding: 7.76% 0;/*149 0*/ } .sec3 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; margin-bottom: 4.65%;/*80px*/ } .sec3 ul{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin-bottom: 10%; } .sec3 li{ text-align: center; cursor: pointer; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; -webkit-transition-property: transform,opacity; -webkit-transition-duration: 1s,1s; transition-property: transform,opacity; transition-duration: 1s,1s; } .sec3 ul.actived li{ -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .sec3 li:nth-child(2){ -webkit-transition-delay: 0.25s,0.25s; transition-delay: 0.25s,0.25s; } .sec3 li:nth-child(3){ -webkit-transition-delay: 0.5s,0.5s; transition-delay: 0.5s,0.5s; } .sec3 li:nth-child(4){ -webkit-transition-delay: 0.75s,0.75s; transition-delay: 0.75s,0.75s; } .sec3 li .icon-box{ width: 7.25em; height: 7.25em; margin: 0 auto 1.875em; border: 0.1875em solid #0c67ba; border-radius: 50%; overflow: hidden; -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; } .sec3 li .icon-box.icon1 img{ width: 42.73%;/*47/110*/ background-image: url(../images/index_sec3_icon1_bg.png); } .sec3 li .icon-box.icon2 img{ width: 40%;/*44/110*/ background-image: url(../images/index_sec3_icon2_bg.png); } .sec3 li .icon-box.icon3 img{ width: 47.27%;/*52/110*/ background-image: url(../images/index_sec3_icon3_bg.png); } .sec3 li .icon-box.icon4 img{ width: 41.82%;/*46/110*/ background-image: url(../images/index_sec3_icon4_bg.png); } .sec3 li .icon-box img{ background-repeat: no-repeat; background-size: auto 200%; background-position: center top; } .sec3 li h5{ font-size: 1.5em; color: #333; font-weight: normal; } .sec3 li p{ font-size: 1em; color: #999; text-transform: uppercase; margin-top: 1.375em; } .sec3 .flex-box{ -webkit-display: flex; -webkit-align-items: stretch; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: stretch; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec3 .data{ width: 45%; } .sec3 .data h4{ font-size: 2.625em; color: #333; } .sec3 .data h5{ font-size: 1.5em; color: #0c67ba; margin: 1.25em 0 2.2em;/*30 0 52*/ } .sec3 .data table{ width: 90%; } .sec3 .data td{ color: #333; width: 50%; white-space: nowrap; } .sec3 .data td:last-child{ width: auto; } .sec3 .data td.red{ color: #fc0404; } .sec3 .data td.green{ color: #7ec251; } .sec3 .data td b{ font-size: 1.375em; color: #333; font-weight: 500; } .sec3 .data td span{ font-size: 2.125em; font-weight: 500; line-height: 1.6; } .sec3 .data td i{ font-size: 1.125em; font-style: normal; } .sec3 .line{ border-right: 1px dashed #999; position: relative; } .sec3 .line img{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); width: 3.8125em; } .sec3 .table{ width: 45%; position: relative; } .sec3 .table img{ width: auto; height: 150%; position: absolute; left: 50%; top: -25%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sec4{ background-color: #f7f9fc; padding: 6.15% 0 5.57%/*118 0 107*/ } .sec4 .flex-box{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin-bottom: 4.65%;/*80*/ } .sec4 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; } .sec4 .tab-controls{ display: inline-block; vertical-align: middle; font-size: 1.125em; } .sec4 .tab-controls a{ font-size: inherit; color: #333333; -webkit-transition: color 0.5s; transition: color 0.5s; vertical-align: middle; } .sec4 .tab-controls a.company.active{ color: #0c67ba; } .sec4 .tab-controls a.party.active{ color: #e11d1d; } .sec4 .tab-controls .line{ display: inline-block; vertical-align: middle; width: 1px; height: 0.67em; margin: 0 1.11em; background-color: rgba(0,0,0,0.1); } .sec4 .more{ width: 1.67em; margin-left: 2em; vertical-align: middle; background-repeat: no-repeat; background-image: url(../images/index_sec4_btn_bg.png); background-size: auto 200%; background-position: center bottom; } .sec4 .swiper-container{ display: none; cursor: url("../images/index_sec1_cursor.png"),auto; } .sec4 .swiper-container.active{ display: block; } .sec4 .swiper-slide{ width: 27.9%; -webkit-transition: background-color 0.5s; transition: background-color 0.5s; height: auto; cursor: inherit; } .sec4 .text-box{ padding: 8.75% 0 10%;/*42 0 48*/ -webkit-transition: padding 0.5s; transition: padding 0.5s; } .sec4 .swiper-slide .time{ font-size: 1.125em; color: #999; -webkit-transition: color 0.5s; transition: color 0.5s; } .sec4 .swiper-slide h5{ font-size: 1.5em; color: #333; -webkit-transition: color 0.5s; transition: color 0.5s; line-height: 1.5; max-height: 3em; margin: 1em 0 0.75em;/*24 0 18*/ } .sec4 .swiper-slide p{ font-size: inherit; color: #999; -webkit-transition: color 0.5s; transition: color 0.5s; line-height: 1.5; max-height: 3em; } @media only screen and (min-width:1024px){ .sec1 .btn-box .btn:hover{ background-color: #0c67ba } .sec1 .btn-box .btn:hover img{ background-position: center top; } .sec1 .swiper-slide:hover{ color: #0c67ba; } .sec1 .swiper-slide:hover .flex-box::before{ opacity: 0; } .sec1 .swiper-slide:hover .icon-box .blue{ opacity: 1; } .sec1 .swiper-slide:hover .icon-box .black{ opacity: 0; } .sec3 li:hover .icon-box{ background-color: #0c67ba; } .sec3 li:hover .icon-box img{ background-position: center bottom; } .sec3 li:hover h5{ color: #0c67ba; } .sec4 .tab-controls a.company:hover{ color: #0c67ba; } .sec4 .tab-controls a.party:hover{ color: #e11d1d; } .sec4 .more:hover{ background-position: center top; } .sec4 .swiper-container.company .swiper-slide:hover{ background-color: #0c67ba; } .sec4 .swiper-container.party .swiper-slide:hover{ background-color: #e11d1d; } .sec4 .swiper-slide:hover .text-box{ padding: 8.75% 8.75% 10%;/*42 42 48*/ } .sec4 .swiper-slide:hover .time,.sec4 .swiper-slide:hover h5,.sec4 .swiper-slide:hover p{ color: #fff; } } @media only screen and (max-width:1500px){ .sec2 .img.actived{ left: 55%; } .sec3 .table img{ height: 125%; top: -12.5%; } } @media only screen and (max-width:1366px){ .section{ font-size: 14px; } .sec2 li{ padding: 2.6% 0 3.1% 2.6%; } } @media only screen and (max-width:1160px){ .sec2 .img.actived{ left: 60%; } .sec2 li{ padding: 2.6% 0 3.1% 1.75%; } } @media only screen and (max-width:1100px){ .sec3 .table img{ height: 110%; top: -5%; } } @media only screen and (max-width:1060px){ .sec2 .img.actived{ left: 62%; } .sec2 li{ padding: 2.6% 0 3.1% 1.25%; } } @media only screen and (max-width:1024px){ .section{ font-size: 0.625rem; } .sec0 .swiper-slide{ font-size: 0.8em; } .sec0 h3{ line-height: 1.5; } .sec0 .swiper-slide .inner{ top: 14%; } .sec1{ padding: 10% 0; } .sec1 .inner > .flex-box{ margin-bottom: 5%; } .sec1 h1 b{ display: inline; margin-bottom: 0; line-height: 1.25; } .sec1 .swiper-slide{ width: 46%; } .sec2{ padding: 10% 0 0; } .sec2 .text-box h3{ margin-bottom: 5%;/*56px*/ line-height: 1.25; } .sec2 ul{ margin-top: 10%;/*199px*/ font-size: 0.875em; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; } .sec2 li{ width: auto;/*330px*/ padding: 2.6% 0 3.1% 2%;/*45 0 53 70px*/ background-color: transparent; } .sec2 li img{ margin-bottom: 0.875em;/*42px*/ } .sec2 li h5{ margin-bottom: 0.5em; } .sec2 .img{ position: static; width: 100%; height: auto; margin-top: 10%; } .sec3{ padding: 10% 0;/*149 0 110*/ } .sec3 h3{ margin-bottom: 8%;/*80px*/ } .sec3 ul{ margin-bottom: 5%;/*125px*/ } .sec3 li{ width: 50%; margin-bottom: 8%; } .sec3 li .icon-box{ width: 6em; height: 6em; margin: 0 auto 1.5em; } .sec3 .flex-box{ -webkit-display: block; display: block; } .sec3 .data h4{ font-size: 2.5em; } .sec3 .data h5{ margin: 1.25em 0 1.5em;/*30 0 52*/ } .sec3 .data{ width: 100%; } .sec3 .data table{ width: 100%; } .sec3 .line{ border-top: 1px dashed #999; border-right: 0 none; margin: 12% 0; } .sec3 .table{ width: 100%; } .sec3 .table img{ -webkit-transform: translateX(0); transform: translateX(0); width: 100%; height: auto; position: static; } .sec4{ padding: 10% 0/*118 0 107*/ } .sec4 .tab-controls{ font-size: 1.25em; } .sec4 .flex-box{ margin-bottom: 8%;/*80*/ } .sec4 .swiper-slide{ width: 60%; } }