.flex { display: flex; } .flex-center { display: flex; justify-content: center; } .page-box { width: 36px; height: 36px; border: 1px solid rgba(204, 204, 204, 1); display: flex; justify-content: center; align-items: center; cursor: not-allowed; } .page-box-active { cursor: pointer; } .page-num { width: 46px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .active-color { color: #07A359; } .page-box .icon { width: 14px; height: 14px; } .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; font-weight: bold; } .introitem-title img { margin-right: 0.75rem; } .item-box { width: 100%; box-sizing: border-box; padding: 7rem 23rem; max-width: 1920px; margin: 0 auto; } .stock { display: flex; justify-content: space-between; } .stockname { font-size: 1.25rem; color: rgba(51, 51, 51, 1); margin-bottom: 0.75rem; } .stockinfo-red { color: red; } .stockinfo-green { color: green; } .stockaddnum { font-size: 1.25rem; margin-left: 1.5rem; font-weight: 600; } .stocknownum { font-size: 2.5rem; font-weight: 600; } .stocknowunit { font-size: 1.25rem; } .stock-right { display: flex; } .stock-item { width: 12rem; text-align: center; color: rgba(51, 51, 51, 1); border-left: 1px solid rgba(235, 235, 235, 1); } .stock-item:first-child { border: none; } .stockitem-num { font-size: 1.25rem; margin-top: 2rem; } .stocktap { display: flex; margin-top: 2rem; } .tapitem { margin-right: 2rem; font-size: 1.25rem; color: rgba(102, 102, 102, 1); position: relative; } .activetap { color: rgba(51, 51, 51, 1); font-weight: bold; position: relative; } .activetap::before { content: ''; width: 100%; height: 2px; position: absolute; bottom: -0.5rem; left: 0; background: rgba(7, 163, 89, 1); } .timetap-item { width: 3rem; height: 1.5rem; background: rgba(242, 242, 242, 1); line-height: 1.5; text-align: center; color: rgba(102, 102, 102, 1); margin-right: 0.75rem; } .time-tap { display: flex; margin-top: 2rem; } .active-timetap { color: rgba(7, 163, 89, 1); background: rgba(7, 163, 89, 0.1); } img.stockimg { width: 100%; margin: 1rem 0 8rem; } .post { width: 100%; padding: 2rem; box-sizing: border-box; display: flex; background: rgba(250, 250, 250, 1); margin-bottom: 2rem; } img.post-img { width: 7.5rem; height: 7.5rem; flex: 0 0 auto; } .post-content { width: 100%; margin-left: 4rem; } h4 { font-size: 1.13rem; color: rgba(51, 51, 51, 1); margin-bottom: 0.75rem; } .post p { font-size: 1rem; color: rgba(102, 102, 102, 1); margin-bottom: 2rem; } .post-time { display: flex; justify-content: flex-end; padding-top: 0.625rem; } .posttime { font-size: 1.13rem; color: rgba(153, 153, 153, 1); padding-top: 1rem; } .postmore { font-size: 1.13rem; color: rgba(102, 102, 102, 1); display: flex; align-items: center; text-decoration: none; } .postmore:hover { color: #07A359; } .show-more span{ color: #07A359 !important; } .postmore>img { width: 1.1rem; } .bg-title { width: 100%; height: 31.25rem; background: url('../../images/investor/easy.png') no-repeat center center/100%; } .black-box { width: 100%; height: 100%; line-height: 31.25rem; text-align: center; color: #fff; font-size: 7.5rem; font-weight: bold; background: rgba(0, 0, 0, 0.6); } .contact-content { width: 100%; padding: 3rem 5rem; box-sizing: border-box; background: #FAFAFA; margin-top: 2rem; } .customer-contact { display: flex; } .customer-contact-item { width: 50%; } .customer-contact-item-title { font-size: 1.25rem; font-weight: 600; color: rgba(7, 163, 89, 1); margin-bottom: 0.75rem; } .customer-contact-item-text { font-size: 1rem; line-height: 2; color: rgba(102, 102, 102, 1); text-align: justify; margin-bottom: 0.5rem; } .customer-contact-item-tel { line-height: 2; background: #07A359; color: #fff; box-sizing: border-box; padding: 0 1rem; margin-top: 1.75rem; display: inline-block; } .customer-contact-right { padding-left: 2rem; box-sizing: border-box; } .periodic { width: 100%; /*display: flex;*/ justify-content: space-between; position: relative; } .periodicitem { border-radius: 0.38rem; background: rgba(255, 255, 255, 1); box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(0, 0, 0, 0.05); box-sizing: border-box; padding: 1.5rem; width: 33.3%; flex-shrink: 0; } .periodicitem:hover { background: rgba(7, 163, 89, 1); color: #fff; } .periodicitem:hover .periodictime { color: #fff; } .periodicitem:hover .periodictitle { color: #fff; } .periodicitem:hover .right-icon1 { display: block; } .periodicitem:hover .right-icon { display: none; } .right-icon { display: block; } .right-icon1 { display: none; } .nomal-img {} .active-img { display: none; } .periodicitem:hover p { color: #fff; } .periodicitem>a { text-decoration: none; } .periodictitle { font-size: 1.13rem; font-weight: 700; color: rgba(7, 163, 89, 1); margin-bottom: 0.75rem; } .periodic p { font-size: 1rem; line-height: 2; color: rgba(102, 102, 102, 1); } .periodictime { font-size: 1rem; line-height: 2; color: rgba(7, 163, 89, 1); text-align: right; display: flex; justify-content: flex-end; } .top-8 { margin-top: 7.5rem; } .honor-icon-left { position: absolute; top: 50%; left: -6rem; width: 3rem; height: 3rem; transform: translate(0, -50%); transition: all 0.3s ease; cursor: pointer; transition: all 0.3s ease; } .honor-icon-left img, .honor-icon-right img { width: 100%; height: 100%; transition: all 0.3s ease; } .honor-icon-right { position: absolute; top: 50%; right: -6rem; width: 3rem; height: 3rem; transform: translate(0, -50%); cursor: pointer; transition: all 0.3s ease; } .honor-icon-left:hover .nomal-img, .honor-icon-right:hover .nomal-img { display: none; } .honor-icon-left:hover .active-img, .honor-icon-right:hover .active-img { display: block; } ::-webkit-scrollbar { width: 0px; /* for vertical scrollbars */ height: 0px; /* for horizontal scrollbars */ } ::-moz-scrollbar { width: 0px; height: 0px; } .active { color: #ffffff !important; background-color: rgba(7, 163, 89, 1); } .contact-investor { margin-top: 8rem; display: flex; justify-content: space-between; } .contact-investor img { width: 100%; height: 100%; } .investor-img-box { position: relative; width: 36.56rem; height: 24.39rem; overflow: hidden } .btn-box{ display: none; } .right-tips-txt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: center; } .right-tips-txt .btn-more{ padding: 10px 30px; border-radius: 50px; color: #fff; /* border: 2px solid #fff; */ font-weight: 600; background-color: rgba(7, 163, 89, 1); } a{text-decoration:none} .left-tips { position: absolute; bottom: 3rem; right: 3rem; color: #ffffff; font-size: 2.2rem; font-weight: 700; } .investor-img-box:hover .btn-box{ animation-duration: .3s; animation-timing-function: linear; /* animation-name: slide-top; -moz-animation-name: slide-top; -webkit-animation-name: slide-top; -ms-animation-name: slide-top; */ -webkit-animation-duration: .3s; -moz-animation-direction: .3s; -ms-animation-duration: .3s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; } .investor-img-box:hover .btn-box{ display: block; } .investor-img-box:hover img{ transform: scale(1.1); transition: all 0.5s; } .left-tips-txt { font-size: 1rem; padding-top: 10px; font-weight: 500; display: none; } .right-tips { position: absolute; bottom: 3rem; right: 3rem; color: #ffffff; font-size: 2.2rem; font-weight: 700; } .investor-img-box:hover .right-tips{ animation-duration: .3s; animation-timing-function: linear; animation-name: slidein; /* -moz-animation-name: slide-top; -webkit-animation-name: slide-top; -ms-animation-name: slide-top; */ -webkit-animation-duration: .3s; -moz-animation-direction: .3s; -ms-animation-duration: .3s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; } .investor-img-box:hover .right-tips .right-tips-txt { display: block; } /* @keyframes slide-top { 0% { transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(); } 100% { transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } } */ /* .right-icon { width: 0.73rem !important; height: 0.73rem !important; } */ .periodic-box { display: flex; width: 100%; } @media screen and (min-width: 1024px) { @keyframes scaleDraw { 0% { transform: scale(1); -moz-transform: scale(1); -webkit-transform:scale(1); -ms-transform:scale(1) ; } 50% { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform:scale(1.1); -ms-transform:scale(1.1) ; } 100% { transform: scale(1); -moz-transform: scale(1); -webkit-transform:scale(1); -ms-transform:scale(1) ; } } } @media screen and (max-width: 1023px) { .item-box { padding: 7rem 10rem; } .periodicitem { width: 31.5rem; } } @media screen and (max-width: 750px) { .contact-investor{ display:block } .investor-img-box{ width: 100%; height: 100%; } .periodic-box { display: block; width: 100%; } .btn-more{ font-size:12px } .customer-contact { display: block; } .customer-contact-item { width: 100%; padding: 0; margin-bottom: 10px; } .periodicitem { width: 100%; } .periodic { display: block; } .honor-icon-left, .honor-icon-right { display: none; } .stock { display: block; } .stock-item { width: 25%; } .stock-left { text-align: center; margin-bottom: 15px; } .timetap-item { height: auto; width: 16%; } .time-tap, .stocktap { margin-top: 10px; } .postmore>img { width: 12px; } img.post-img { width: 13.5rem; height: 13.5rem; flex: 0 0 auto; } .stocknownum { font-size: 28px; } .introitem-title, .periodictitle, .left-tips, .right-tips { font-size: 16px; } .stockname, .stocknowunit, .stockaddnum, .stockitem-num, h4 { font-size: 14px !important; } .stockitem-top, .post p, .posttime, .postmore, .periodic p, .periodictime { font-size: 12px; } .customer-contact-item-title { margin-bottom: 8px; } .customer-contact-item-tel { padding: 5px 12px; } .contact-title, .customer-contact-item-text, .customer-contact-item-tel, .formbox, .submit { font-size: 12px; } .customer-contact-item-title { font-size: 16px; } .contact-investor img { width: 100% !important; height: auto !important; } }