.main-title-content { width: 100%; height: 100%; background: rgba(0, 0, 0, .4); color: #fff; box-sizing: border-box; padding: 9rem 23rem; } h1 { font-size: 4.38rem; font-weight: 600; } h3 { font-size: 1.63rem; letter-spacing: 0.2rem; font-weight: 400; margin-top: 2.5rem; } .introduction-item { width: 100%; background: #fff; box-sizing: border-box; padding: 7rem 23rem; } .introitem-title { display: flex; align-items: center; font-size: 2rem; color: #333; margin-bottom: 3rem; } .title-text { font-weight: 700; } .introitem-title img { margin-right: 0.75rem; } .introitem-content { display: flex; justify-content: space-between; } .introitem-left { width: 20rem; color: #666666; /* margin-right: 5rem; */ } .num-item { width: 100%; padding: 3rem 0; background: #FAFAFA; text-align: center; } .num-text { font-size: 3.38rem; font-weight: 500; color: rgba(7, 163, 89, 1); margin-bottom: 0.5rem; display: flex; justify-content: center; } .counter { font-size: 3.38rem; font-weight: 500; color: rgba(7, 163, 89, 1); margin-bottom: 0.5rem; display: flex; justify-content: center; } .num-text > div { position: relative; } .num-text .unit { position: absolute; right: -20px; top: 0rem; font-size: 0.88rem; color: rgba(102, 102, 102, 1); } .qmimg-box { display: flex; flex-direction: row-reverse; } p { font-size: 1rem; font-weight: 400; letter-spacing: 0rem; line-height: 2; color: rgba(102, 102, 102, 1); text-align: justify; margin-bottom: 2rem; } .introitem-right { width: 50rem; position: relative; } .have-littlegreen::after { content: ''; width: 1.56rem; height: 0.25rem; background: #07A359; position: absolute; bottom: 0; left: 0; } .introitem-left .img-box { width: 100%; height: 28rem; overflow: hidden; } .introitem-left .img-box > img { width: 100%; } .dsz-intro { width: 100%; padding: 1.25rem; box-sizing: border-box; background: #07A359; color: #fff; } .dsz-intro > div { margin-bottom: 0.5rem; } .dsz-intro > div:last-child { margin-bottom: 0; } p span { color: #333333; background: rgba(7, 163, 89, 0.1); font-weight: 600; } .signature > img { height: 5rem; } .signature { display: flex; justify-content: end; } .letter { background: #FFF9F4; width: 100%; box-sizing: border-box; padding: 1rem; } .letter-border { width: 100%; border: 0.13rem solid rgba(222, 191, 149, 0.65); box-sizing: border-box; padding: 0.5rem; } .letter-content { width: 100%; box-sizing: border-box; padding: 5rem 21rem; border: 0.06rem solid rgba(222, 191, 149, 0.65); color: #333; } .letter-content h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 3rem; } .letter-content p { color: #333; } .member { width: 100%; box-sizing: border-box; } .member-item { background: #FAFAFA; width: 100%; padding: 1rem 2rem; box-sizing: border-box; display: flex; justify-content: space-between; margin-bottom: 2rem; } .memberimg-box { width: 17.5rem; height: 13.13rem; overflow: hidden; } .memberimg-box > img { width: 110%; position: relative; left: -5%; top: -8%; } .member-info { width: 50rem;; } .member-name { color: #07A359; font-size: 1.75rem; margin-bottom: 0.75rem; } .member-name > span { font-size: 0.88rem; color: #333; } .menber-text { font-size: 1rem; line-height: 2; color: rgba(102, 102, 102, 1); text-align: justify; } .more-member-box { width: 100%; display: flex; justify-content: end; } .more-menber { padding: 0.75rem 2rem; background: #07A359; color: #fff; font-size: 1.5rem; display: block; text-decoration: none !important; } .chairman-letter-div { background: url('../../images/about/speech-bg.jpg') no-repeat center/100% 100%; width: 100%; } .chairman-letter { width: 100%; box-sizing: border-box; padding: 7rem 23rem; } .img-text-box { justify-content: space-between; } .chairman-letter-imgbox { float: left; /*height: 33rem;*/ width: 20rem; margin-right: 2rem; background-color: #fff; } .chairman-letter-imgbox > img { width: 100%; } .img-intro-box { width: 100%; box-sizing: border-box; padding: 0 0.25rem 0.25rem 0.25rem; } .img-intro-box-border { width: 100%; height: 100%; box-sizing: border-box; padding: 1rem; background: url('../../images/about/culture-item-bg.png') no-repeat center center; background-size: 100% 100%; } .chairman-letter-textbox { width: 70rem; margin-left: 1rem; } .img-intro-box-border > p { color: rgba(102, 102, 102, 1); line-height: 2; margin: 0; font-size: 0.88rem; } .chairman-letter-textbox > h4 { margin-bottom: 2rem; } .goods-box { width: 100%; /* display: flex; */ flex-wrap: wrap; /* justify-content: space-between; */ display: grid; grid-template-columns: repeat(4, 1fr); } .goods-item { width: 95%; margin-top: 2.5rem; } .goodsimg-box { width: 100%; height: 18.75rem; background: rgba(242, 242, 242, 1); overflow: hidden; } .goodsimg { width: 100%; height: 18.75rem; display: flex; align-items: center; margin-bottom: 1rem; cursor: pointer; } .goodsimg:hover { transform: scale(1.1); transition: all 0.5s; } .intro-img { image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ } .goods-title { margin-bottom: 1rem; font-size: 1rem; font-weight: 600; color: rgba(51, 51, 51, 1); } .goods-info { font-size: 1rem; line-height: 1.2; color: rgba(102, 102, 102, 1); } .goodsinfo-box { background: rgba(250, 250, 250, 1); color: rgba(102, 102, 102, 1); } .goodsinfo-box { padding: 1.8rem 1rem; } .introitem-tips { font-size: 1rem; font-weight: 400; letter-spacing: 0rem; line-height: 2.13rem; color: rgba(0, 0, 0, 1); } .tabs { display: flex; } .active-tab { line-height: 40px; width: 124px; height: 40px; text-align: center; border-radius: 100px; background: rgba(7, 163, 89, 1); color: #fff; } .tab { line-height: 40px; width: 124px; height: 40px; text-align: center; border-radius: 100px; /* background: rgba(7, 163, 89, 1); color: #fff; */ } .video-box { display: flex; justify-content: center; margin-top: 2rem; position: relative; } .video-box .play { position: absolute; top: 45%; left: 48%; width: 5rem; height: 5rem; z-index: 99; } .video-box video { width: 100%; } .introduction-item .tabs > div { cursor: pointer; } @media screen and (max-width: 1023px) { .introduction-item { padding: 7rem 10rem; } .introitem-right { padding-left: 4rem; width: 100%; position: relative; } .introitem-left { width: 28rem; } .letter-content { padding: 5rem 10rem; } .memberimg-box { flex-shrink: 0; } .member-info { width: 100%; padding-left: 3rem; } .introitem-content { display: block; } .introitem-left { width: 100%; } .num-text { font-size: 22px; } .introitem-left { width: 100%; display: flex; } .introitem-right { padding-left: 0; } .dsz-item { display: block; } .introitem-left .img-box { width: 100%; height: 85rem; } .signature > img { height: 18rem; } .member-item { display: block; } .memberimg-box { width: 100%; height: 80rem; margin-bottom: 15px; } .member-info { padding-left: 0; } .member-name > span { line-height: 2; } .img-text-box { display: block; } .chairman-letter-imgbox { display: flex; width: 100%; margin-bottom: 2rem; height: 100%; } .chairman-letter-imgbox > img { height: auto; width: 170px; } .img-intro-box { padding: 4px; width: auto; } .img-intro-box-border { padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: url('../../images/about/culture-item-bg.png') no-repeat center center; } .chairman-letter-textbox { width: 100%; } .chairman-letter { padding: 7rem 10rem; } .goodsimg { height: auto; } .goodsimg-box { /*height: 28.31rem;*/ } .goodsinfo-box { padding: 20px; } } @media screen and (max-width: 750px) { .chairman-letter-div { background: url('../../images/about/m-speech-bg.png') no-repeat center/100% 100%; width: 100%; } .num-text .unit{ font-size: 12px; } .counter { font-size: 24px !important; } .active-tab{ font-size: 12px; } .tab{ font-size: 12px; } .introitem-tips { font-size: 14px; font-weight: 400; line-height: 20px; color: rgba(0, 0, 0, 1); } .chairman-letter-imgbox { display: block; height: 100%; } .img-intro-box-border { background: url('../../images/about/culture-item-bg.png') no-repeat center center; } .img-intro-box-border > p { color: rgba(102, 102, 102, 1); line-height: 2; margin: 0; font-size: 14px; } .chairman-letter-imgbox > img { width: 100%; height: auto; margin-bottom: 2rem; } .goods-box { grid-template-columns: repeat(2, 1fr); } .introitem-title{ margin-top: 10rem; } .introitem-title img { margin-right: 8px; } .goodsimg { max-height: 120rem; } .goodsimg-box { overflow: hidden; height: 58.31rem; } .introitem-title, h4 { font-size: 16px; } .num-text span, .num-title, p, .goods-title, .goods-info { font-size: 12px; } .qmimg-box{ margin-bottom: 10rem; } .qmimg-box img{ width: 30%; text-align: right; } } @media screen and (min-width: 1921px) { .introduction-item, .chairman-letter { max-width: 1920px; margin: 0 auto; } }