update
This commit is contained in:
toom1996
48
src/styles/template_2/banner.css
Normal file
48
src/styles/template_2/banner.css
Normal file
@ -0,0 +1,48 @@
|
||||
.v4.h06-in-page-banner .banner-item{position:relative;margin-bottom:80px}
|
||||
.v4.h06-in-page-banner .banner-block{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:736px;background-color:#ddd;padding:3vw 5.3vw 80px;margin-bottom:16px}
|
||||
.v4.h06-in-page-banner .banner-block__in{width:58%;display:flex;display:-webkit-flex;flex-direction:column;justify-content:center}
|
||||
.v4.h06-in-page-banner .banner-block__heading{letter-spacing:1px;line-height:1.09;margin-bottom:20px;font-size:64px;max-height:146px;overflow:hidden}
|
||||
.v4.h06-in-page-banner .banner-block__text{margin-bottom:40px;font-weight:700;font-size:18px;max-height:50px;overflow:hidden}
|
||||
@media only screen and (min-width:1920px){.v4.h06-in-page-banner .banner-block__text{font-size:24px;line-height:1.2;max-height:58px}
|
||||
}
|
||||
@media only screen and (min-width:1200px) and (max-width:1600px){.v4.h06-in-page-banner .banner-block__text{margin-bottom:20px}
|
||||
}
|
||||
.v4.h06-in-page-banner .banner-block--centered{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
|
||||
.v4.h06-in-page-banner .banner-block--centered .banner-block__in{text-align:center}
|
||||
.v4.h06-in-page-banner .banner-block--right{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
|
||||
.v4.h06-in-page-banner .banner-block--dark-theme{color:#fff}
|
||||
.v4.h06-in-page-banner .banner-block--dark-theme .banner-block__heading,.v4.h06-in-page-banner .banner-block--dark-theme .banner-block__text{color:#fff}
|
||||
.v4.h06-in-page-banner .banner-block--dark-theme .banner-block__btn{background-color:#fff;color:#000;border-color:#fff}
|
||||
.v4.h06-in-page-banner .banner-item__text{font-size:12px;font-weight:400;line-height:1.6;color:#000;max-width:880px;display:none}
|
||||
.v4.h06-in-page-banner .banner-block--image{background-position:center center;background-repeat:no-repeat;background-size:cover}
|
||||
@media only screen and (max-width:1199.98px){.huawei-v4 .v4.h06-in-page-banner:last-of-type{margin-bottom:0}
|
||||
.huawei-v4 .v4.h06-in-page-banner:last-of-type .banner-item{margin-bottom:0}
|
||||
.v4.h06-in-page-banner{margin-bottom:40px}
|
||||
.v4.h06-in-page-banner .banner-block--right{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
|
||||
.v4.h06-in-page-banner .container{padding:0}
|
||||
.v4.h06-in-page-banner .banner-item__text{padding:0 20px}
|
||||
.v4.h06-in-page-banner .banner-item{margin-bottom:64px}
|
||||
.v4.h06-in-page-banner .banner-block{padding:40px 20px;height:640px}
|
||||
.v4.h06-in-page-banner .banner-block__in{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
|
||||
.v4.h06-in-page-banner .banner-block__heading{font-size:48px;margin-bottom:20px;max-height:110px}
|
||||
.v4.h06-in-page-banner .banner-block__text{margin-bottom:28px}
|
||||
.v4.h06-in-page-banner .banner-block__btns{margin-bottom:10px}
|
||||
.v4.h06-in-page-banner .banner-block__in{justify-content:flex-start;max-width:860px;width:auto}
|
||||
}
|
||||
@media only screen and (width:1600px){.v4.h06-in-page-banner .banner-block{height:690px}
|
||||
}
|
||||
@media only screen and (min-width:1200px) and (max-width:1599.98px){.v4.h06-in-page-banner .banner-block__heading{font-size:48px;max-height:110px}
|
||||
.v4.h06-in-page-banner .banner-block{height:45vw}
|
||||
}
|
||||
@media only screen and (min-width:922px) and (max-width:1199.98px){.v4.h06-in-page-banner .banner-block{height:840px}
|
||||
}
|
||||
@media only screen and (min-width:768px) and (max-width:921px){.v4.h06-in-page-banner .banner-block{height:740px}
|
||||
.v4.h06-in-page-banner .banner-block__heading{font-size:30px;max-height:66px}
|
||||
.v4.h06-in-page-banner .banner-block__text{font-size:16px;max-height:50px}
|
||||
}
|
||||
@media only screen and (max-width:767px){.v4.h06-in-page-banner .banner-block{height:640px}
|
||||
}
|
||||
@media only screen and (max-width:767.98px){.v4.h06-in-page-banner .banner-block__heading{font-size:30px;max-height:66px;margin-bottom:10px}
|
||||
.v4.h06-in-page-banner .banner-block__text{font-size:14px;max-height:72px;margin-bottom:12px}
|
||||
.v4.h06-in-page-banner .banner-block__in{max-width:100%}
|
||||
}
|
||||
10135
src/styles/template_2/common-v4-nav-v2.css
Normal file
10135
src/styles/template_2/common-v4-nav-v2.css
Normal file
File diff suppressed because it is too large
Load Diff
255
src/styles/template_2/nav.css
Normal file
255
src/styles/template_2/nav.css
Normal file
@ -0,0 +1,255 @@
|
||||
#news-second-navigation-v4 {
|
||||
position: relative;
|
||||
top: 0;
|
||||
z-index: 150;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
#news-second-navigation-v4.stuck {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
@supports(position:-webkit-sticky) {
|
||||
#news-second-navigation-v4 {
|
||||
position: -webkit-sticky
|
||||
}
|
||||
}
|
||||
|
||||
@supports(position:sticky) {
|
||||
#news-second-navigation-v4 {
|
||||
position: sticky
|
||||
}
|
||||
}
|
||||
|
||||
@supports(-webkit-backdrop-filter:blur(0)) {
|
||||
#news-second-navigation-v4 {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px)
|
||||
}
|
||||
}
|
||||
|
||||
@supports(backdrop-filter:blur(0)) {
|
||||
#news-second-navigation-v4 {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: saturate(180%) blur(20px)
|
||||
}
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs-wrap {
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link-container {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item {
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item::before {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -16px;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link_item:first-child::before {
|
||||
content: none
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link {
|
||||
color: #7f7f7f
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link:hover,
|
||||
.v4.n06-news-second-navigation .product-tabs__link:hover {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-link__active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__heading {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
position: relative;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__title {
|
||||
margin-top: 3px;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
overflow-x: auto
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-container {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: 30px
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links {
|
||||
margin-top: 2px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-item {
|
||||
padding: 0 16px
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link {
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
padding: 0 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.5;
|
||||
letter-spacing: .3px;
|
||||
text-align: center;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link.product-tabs__link--active {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
letter-spacing: -0.2px;
|
||||
cursor: default;
|
||||
border-bottom: 2px solid #000
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link {
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1200px) {
|
||||
.no-touch .v4.n06-news-second-navigation .product-tabs__link:hover {
|
||||
color: #000
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:991.98px) {
|
||||
.v4.n06-news-second-navigation .product-tabs__heading {
|
||||
position: unset;
|
||||
padding: 28px 0 0 0
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__title {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-container {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 30px 15% 10px;
|
||||
display: block
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__links-item {
|
||||
padding: 0;
|
||||
padding-right: 19px;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .product-tabs__link {
|
||||
padding-bottom: 0;
|
||||
text-align: left
|
||||
}
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
display: none;
|
||||
transition: transform .7s;
|
||||
transition: -webkit-transform .7s
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn.open {
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn::before {
|
||||
margin-left: -5px;
|
||||
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(45deg)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn::after {
|
||||
margin-left: 4px;
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
|
||||
transform: translate(-50%, -50%) rotate(-45deg)
|
||||
}
|
||||
|
||||
.v4.n06-news-second-navigation .drop-btn::after,
|
||||
.v4.n06-news-second-navigation .drop-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #afafaf;
|
||||
-webkit-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
display: block
|
||||
}
|
||||
|
||||
@media only screen and (max-width:991.98px) {
|
||||
.v4.n06-news-second-navigation .drop-btn {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
718
src/styles/template_2/style.css
Normal file
718
src/styles/template_2/style.css
Normal file
@ -0,0 +1,718 @@
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* background: var(--background-light); */
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.line {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddddd;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.app-read-container {
|
||||
letter-spacing: calc(-.037em + .526px);
|
||||
--navheight: value;
|
||||
--sc4height: value;
|
||||
}
|
||||
|
||||
.app-read-container img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.app-read-container video{
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-read-container a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-read-container .show-pc {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.app-read-container .show-mob {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .app-read-show-ie{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-read-container picture {
|
||||
width: 100%;
|
||||
}
|
||||
.app-read-container .blur-up {
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
-webkit-transition: -webkit-filter 400ms;
|
||||
transition: -webkit-filter 400ms;
|
||||
transition: filter 400ms;
|
||||
transition: filter 400ms, -webkit-filter 400ms;
|
||||
}
|
||||
.app-read-container .blur-up.lazyloaded {
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
.app-read-container .lazyload:not([src]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .read-title {
|
||||
color: #000;
|
||||
font-size: 2.5vw;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
|
||||
}
|
||||
|
||||
.app-read-container .read-text {
|
||||
color: #767676;
|
||||
font-size: 1.25vw;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin-top: 1.6666666vw;
|
||||
}
|
||||
|
||||
.app-read-container .sc3-voice-container,
|
||||
.app-read-container .app-read-sc5,
|
||||
.app-read-container .app-read-sc6,
|
||||
.app-read-container .app-read-sc7,
|
||||
.app-read-container .app-read-sc8
|
||||
{
|
||||
width: 83.333333vw;
|
||||
margin: 0 auto;
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
|
||||
/* kv */
|
||||
.app-read-container .app-read-sc1-kv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 7.8645833vw;
|
||||
padding-left: 14.01041667vw;
|
||||
padding-bottom: 5.20833333vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text {
|
||||
margin-top: 4.302083333vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text img {
|
||||
width: 10.625vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-title {
|
||||
width: 34.5vw;
|
||||
color: #000;
|
||||
font-size: 4.1666666vw;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
margin-top: 1.145833333vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-text {
|
||||
width: 34vw;
|
||||
font-size: 1.25vw;
|
||||
font-weight: 500;
|
||||
color: #767676;
|
||||
line-height: 1.6;
|
||||
margin-top: 0.52083333vw;
|
||||
}
|
||||
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-img {
|
||||
width: 40.67708333vw;
|
||||
margin-left: 9.0625vw;
|
||||
}
|
||||
|
||||
|
||||
/* sc2 */
|
||||
.app-read-container .app-read-sc2 {
|
||||
background-color: #f5f5f7;
|
||||
padding-top: 8.0208333vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .text-box {
|
||||
width: 47.354167vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc2 .read-text {
|
||||
text-align: left;
|
||||
margin-left: 1.111111vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-box {
|
||||
margin-top: 3.52083333vw;
|
||||
overflow: hidden;
|
||||
padding-left: 0.83333333vw;
|
||||
padding-bottom: 1.71875vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-warpping {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-silde {
|
||||
width: 13.85416667vw;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-read-sc2 .book-name {
|
||||
font-size: 1.14583333vw;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
@keyframes breath{
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes breath{
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* sc5 */
|
||||
.app-read-sc5 .sc5-animation-box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 7.2916666vw;
|
||||
padding-left: 15.625vw;
|
||||
padding-bottom: 6.927083vw;
|
||||
}
|
||||
.app-read-sc5 .sc5-bg-img{
|
||||
width : 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-book-container{
|
||||
width: 27.44791667vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-read-sc5 .read-subtitle{
|
||||
font-size: 1.875vw;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.09375vw;
|
||||
}
|
||||
.app-read-sc5 .app-read-not-ie{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-yy-img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 32vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .text-box {
|
||||
width: 27.041666vw;
|
||||
margin-left: 6.6666667vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* sc6 */
|
||||
.app-read-sc6 .sc6-animation-container {
|
||||
position: relative;
|
||||
width:100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
padding: 9.6354167vw 0 8.07291667vw;
|
||||
padding-left: 7.39583333vw;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
|
||||
.app-read-sc6 .sc6-img-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-read-sc6 .sc6-animation-box {
|
||||
width: 31.9791667vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-left: 13.0729167vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc6 .text-box {
|
||||
position: relative;
|
||||
width: 22.5vw;
|
||||
margin-top: 1.9vw;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* sc7 */
|
||||
.app-read-container .app-read-sc7 {
|
||||
padding-top: 4.32291667vw;
|
||||
}
|
||||
|
||||
.app-read-sc7 .text-box {
|
||||
width: 40.6770833vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc7 .sc7-img-box {
|
||||
width: 75.46875vw;
|
||||
margin-top: 3.02083333vw;
|
||||
margin-left: 6.5625vw;
|
||||
}
|
||||
|
||||
|
||||
/* sc8 */
|
||||
.app-read-container .app-read-sc8 {
|
||||
position: relative;
|
||||
margin-top: -3.28125vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .sc8-content-wrapper {
|
||||
position: absolute;
|
||||
padding-left: 4.6875vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
-webkit-transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.app-read-sc8 .text-box {
|
||||
width: 25.41666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-title {
|
||||
color: #fff;
|
||||
line-height: 1.6;
|
||||
margin-top: 9.375vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container {
|
||||
margin-left: 15.83333vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper1 {
|
||||
width: 37.5vw;
|
||||
height: 36.0416667vw;
|
||||
background-color: #414344;
|
||||
opacity: 0.34;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 4.47916667vw 4.84375vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-item {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container .icon-center {
|
||||
padding: 2.65625vw 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-item img {
|
||||
width: 4.21875vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-desc {
|
||||
font-size: 1.25vw;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin-top: 1.145833333vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-ps{
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
color: #737171;
|
||||
margin-top: 0.520833vw;
|
||||
text-align: right;
|
||||
padding-right: 5.208333vw;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px){
|
||||
.app-read-sc8 .read-ps{
|
||||
font-size: 0.625vw;
|
||||
}
|
||||
}
|
||||
/* mob */
|
||||
@media screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
|
||||
(max-width: 1023px) {
|
||||
.app-read-container {
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
.app-read-container .show-pc{
|
||||
display: none;
|
||||
}
|
||||
.app-read-container .show-mob{
|
||||
display: block;
|
||||
}
|
||||
.app-read-container .read-title {
|
||||
font-size: 4.44444445vw;
|
||||
}
|
||||
|
||||
.app-read-container .read-text {
|
||||
font-size: 3.3333333vw;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-container .sc3-voice-container,
|
||||
.app-read-container .app-read-sc5,
|
||||
.app-read-container .app-read-sc6,
|
||||
.app-read-container .app-read-sc7,
|
||||
.app-read-container .app-read-sc8 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* kv */
|
||||
.app-read-container .app-read-sc1-kv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding-top: 13.19444444vw;
|
||||
padding-left: 7.6388889vw;
|
||||
padding-bottom: 6.38888889vw;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-text img {
|
||||
width: 18.3333333vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-title {
|
||||
width: 83.333333vw;
|
||||
font-size: 5.83333333vw;
|
||||
margin-top: 3vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .mkt-text {
|
||||
width: 82.333333vw;
|
||||
font-size: 3.3333333vw;
|
||||
margin-top: 5.5555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc1-kv .sc1-mkt-img {
|
||||
width: 90.41666667vw;
|
||||
margin-top: 6.80555556vw;
|
||||
margin-left: 3.47222222vw;
|
||||
}
|
||||
|
||||
/* sc2 */
|
||||
.app-read-container .app-read-sc2 {
|
||||
padding-top: 16.666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .text-box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc2 .read-text {
|
||||
width: 84.0277778vw;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-box {
|
||||
margin-top: 10.34722222vw;
|
||||
padding-left: 0;
|
||||
padding-bottom: 7.361111111vw;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-warpping {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-read-sc2 .sc2-swiper-silde {
|
||||
width: 20.69444444vw;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-read-sc2 .book-name {
|
||||
font-size: 3.3333333vw;
|
||||
}
|
||||
|
||||
/* sc5 */
|
||||
.app-read-sc5 .sc5-animation-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding-top: 8.75vw;
|
||||
padding-bottom: 18.3333333vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .text-box {
|
||||
width: 90.52777778vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.app-read-sc5 .read-subtitle{
|
||||
font-size: 3.33333333vw;
|
||||
}
|
||||
.app-read-sc5 .read-title{
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .read-text {
|
||||
width: 53.9444444vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.5555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-book-container {
|
||||
width: 48.19444444vw;
|
||||
height: 59.72222222vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 16.666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc5 .sc5-yy-img{
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
/* sc6 */
|
||||
.app-read-sc6 .sc6-animation-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding-top: 16.666667vw;
|
||||
padding-bottom: 19.1666667vw
|
||||
}
|
||||
|
||||
.app-read-sc6 .text-box {
|
||||
width: 78.6111111vw;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.app-read-sc6 .read-text {
|
||||
width: 70.972222vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc6 .sc6-animation-box {
|
||||
width: 57.6388889vw;
|
||||
margin-top: 6.25vw;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* sc7 */
|
||||
.app-read-container .app-read-sc7 {
|
||||
padding-top: 16.666667vw;
|
||||
}
|
||||
|
||||
.app-read-sc7 .text-box {
|
||||
width: 71.25vw;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-read-sc7 .read-text {
|
||||
width: 47.0833333vw;
|
||||
margin: 0 auto;
|
||||
margin-top: 5.55555556vw;
|
||||
}
|
||||
|
||||
.app-read-sc7 .sc7-img-box {
|
||||
width: 91.3888889vw;
|
||||
margin-top: 6.1111111vw;
|
||||
margin-left: 8.19444444vw;
|
||||
}
|
||||
|
||||
/* sc8 */
|
||||
.app-read-container .app-read-sc8 {
|
||||
position: relative;
|
||||
margin-top: 2.5vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .sc8-content-wrapper {
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .text-box {
|
||||
width: 34.7222222vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-title {
|
||||
margin-top: 13.75vw;
|
||||
font-size: 3.33333333vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container {
|
||||
margin-left: 13.333333vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper1 {
|
||||
width: 46.9444444vw;
|
||||
height: 45.138889vw;
|
||||
background-color: #414344;
|
||||
opacity: 0.34;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 5.5555556vw 5.97222222vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-warpper2>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-container .icon-center {
|
||||
padding: 3.33333333vw 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-read-sc8 .icon-item img {
|
||||
width: 5.1388888vw;
|
||||
}
|
||||
.app-read-sc8 .icon-desc{
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.app-read-sc8 .read-ps{
|
||||
margin-top: 1.388889vw;
|
||||
font-size: 3.3333333vw;
|
||||
padding-right: 2.7777778vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* zdp */
|
||||
@media screen and (min-device-aspect-ratio:10/13) and (max-device-aspect-ratio:127/100){
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ie */
|
||||
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
|
||||
.app-read-container .app-read-not-ie{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-read-container .app-read-show-ie{
|
||||
display: block;
|
||||
}
|
||||
.app-read-sc5 .app-read-show-ie{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-read-sc6 .sc6-animation-container{
|
||||
padding-top: 8.4vw;
|
||||
}
|
||||
.app-read-sc6 .text-box{
|
||||
width: 23.5vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user