.link.main { height: 100%; overflow: auto; position: relative; background: #fff; } .header-bg { width: 100%; height: 520px; background: url('../images/link_investors/linkinvestors.png'); background-size: cover; background-position: center center; text-align: center; position: relative; padding-top: 260px; } .link-title { font-size: 58px; font-weight: normal; font-stretch: normal; line-height: 58px; letter-spacing: 0px; color: #ffffff; } .link-en { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 58px; letter-spacing: 1px; color: #ffffff; } .link-en span { width: 5px; height: 5px; background-color: #ffffff; border-radius: 50%; vertical-align: middle; display: inline-block; margin: 0 20px 0 19px; } .stock { width: 1170px; height: 250px; background-color: #171b25; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; position: absolute; bottom: -125px; left: 50%; transform: translateX(-50%); padding: 49px 57px; } .stock-name { display: inline-block; width: 72px; height: 24px; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #ffffff; opacity: 0.8; } .stock-num { display: inline-block; margin-left: 5px; height: 18px; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 22px; letter-spacing: 0px; color: #ffffff; opacity: 0.8; } .stock-left { float: left; } .price { font-size: 60px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #e62b1e; } .status { margin-left: 18px; margin-right: 18px; } .unit { display: inline-block; width: 39px; height: 15px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 22px; letter-spacing: 0px; color: #e62b1e; } .link-des { height: 15px; font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 22px; letter-spacing: 0px; color: #cccccc; opacity: 0.6; margin-top: 16px; } .link-subtitle { position: absolute; left: 41%; top: 23%; text-align: left; } .link-subtitle > div { display: inline-block; margin-right: 50px; } .link-subtitle-name { font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #ffffff; } .link-subtitle-num { font-size: 30px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #ffffff; opacity: 0.4; margin-top: 36px; } .link-report { padding-top: 125px; padding-bottom: 125px; width: 1170px; margin: 0 auto; overflow: hidden; } .report-left { width: 770px; float: left; margin-top: 40px; } .report-left > div { height: 200px; width: 100%; border: solid 1px #e5e5e5; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 45px 0 45px 31px; } .report-left > div > div:nth-child(1) { display: inline-block; width: 171px; border-right: solid 1px #e5e5e5; vertical-align: top; } .report-left > div > div:nth-child(2) { display: inline-block; height: 100%; margin-left: 30px; } .report-left > div > div:nth-child(1) > p { text-align: center; } .report-left > div > div:nth-child(1) > p:nth-child(1) { font-size: 72px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #f08200; } .report-left > div > div:nth-child(1) > p:nth-child(2) { font-size: 14px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #f08200; margin-top: 12px; margin-bottom: 12px; } .report-left > div > div:nth-child(1) > p:nth-child(3) { font-size: 24px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #f08200; } .report-left > div > div:nth-child(2) > p:nth-child(1) { font-size: 36px; font-weight: bold; font-stretch: normal; letter-spacing: 0px; color: #252525; max-width: 530px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .report-left > div > div:nth-child(2) > p:nth-child(2) { font-size: 14px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #5f6366; margin-top: 21px; margin-bottom: 24px; } .report-left > div > div:nth-child(2) > p:nth-child(3) { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 2px; color: #f08200; position: relative; cursor: pointer; } .report-left > div > div:nth-child(2) > p:nth-child(3):after { content: ''; background: url('../images/link_investors/arrowright.png'); width: 21px; height: 16px; position: absolute; top: 8px; margin-left: 10px; } .report-right { width: 370px; height: 320px; float: right; margin-top: 40px; background: url('../images/link_investors/finance-bg.png'); padding: 51px 40px; } .report-right > div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .report-right > div:nth-child(1) { font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 16px; letter-spacing: 1px; color: #ffffff; } .report-right > div:nth-child(2) { font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 1px; color: #ffffff; margin: 9px 0 24px 0; } .report-right > div:nth-child(n+3) { font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 25px; letter-spacing: 1px; color: #fefefe; } @media (max-width: 960px) { .header-bg { /* padding-top: 30%; */ padding-top: 200px; height: 400px; } .link-title{ font-size: 40px; } .stock { width: 80%; } .link-subtitle { display: none; } .link-report { width: 100%; } .report-left { width: 96%; margin-left: 2%; } .report-right { display: none; } .report-left > div > div:nth-child(2) { width: 240px; } .report-left > div > div:nth-child(2) > p:nth-child(1) { font-size: 16px; } .report-left > div > div:nth-child(2) > p:nth-child(2) { font-size: 12px; } .report-left > div > div:nth-child(2) > p:nth-child(3) { font-size: 12px; } .report-left > div > div:nth-child(2) > p:nth-child(3):after { content: ''; background: url(../images/link_investors/arrowright.png); width: 16px; height: 16px; position: absolute; top: 9px; margin-left: 10px; background-size: contain; background-repeat: no-repeat; } } @media (max-width: 500px) { .link-title{ line-height: 50px; } .header-bg { /* padding-top: 30%; */ padding-top: 100px; height: 270px; } .stock { padding: 20px; height: 200px; } .link-en{line-height: 30px;} .price { font-size: 30px; } .link-title { font-size: 20px; } .link-en { font-size: 12px; } .report-left > div > div:nth-child(1) > p:nth-child(1) { font-size: 18px; } .report-left > div > div:nth-child(1) { width: 86px; } .report-left > div > div:nth-child(2) { width: 150px; } .number { display: none; } }