.banner { position: relative; } .banner img { width: 100%; } .banner .text { position: absolute; width: 100%; top: 46%; color: #fff; } .banner .text h2 { text-align: center; font-size: 2.3rem; font-weight: bold; letter-spacing: 1px; } .banner .text p { text-align: center; font-size: 1.2rem; letter-spacing: 1px; margin-top: 0.6rem; } .sub-nav { height: 4rem; border-bottom: 1px solid #ddd; overflow: hidden; position: relative; top: 0; background: #fff; width: 100%; border-top: 1px solid #ddd; z-index: 100; } .sub-nav .content .left { float: left; } .sub-nav .content .left h6 { line-height: 4rem; font-size: 1.3rem; font-weight: bold; } .sub-nav .content .left h6 span { font-size: 1rem; color: #9f223d; margin-left: 1rem; position: relative; top: -0.1rem; } .sub-nav .content .right { float: right; } .sub-nav .content .right > ul li { float: left; width: 4.6rem; height: 4rem; text-align: center; position: relative; } .sub-nav .content .right > ul li a { line-height: 4rem; font-size: 0.8rem; display: block; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 2rem; } .sub-nav .content .right > ul li:before { content: ''; width: 0; height: 3px; background: #9f223d; position: absolute; bottom: 0; left: 0; } .sub-nav .content .right > ul li.active:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li.active a { color: #9f223d; } .sub-nav .content .right > ul li:hover:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li:hover a { color: #9f223d; } .company-ban .top { position: relative; } .company-ban .top > img { width: 100%; } .company-ban .top .con { position: absolute; width: 100%; top: 10%; left: 0; } .company-ban .bottom { padding: 3.5rem 0 4rem; } .company-ban .bottom .left { float: left; width: 31.2%; } .company-ban .bottom .left h2 { font-size: 1.6rem; font-weight: bold; margin-bottom: 0.6rem; } .company-ban .bottom .left h3 { font-size: 0.8rem; } .company-ban .bottom .right { float: right; width: 68.8%; } .company-ban .bottom .right > ul li { font-size: 0.8rem; text-align: justify; padding-left: 2rem; position: relative; line-height: 1.8; } .company-ban .bottom .right > ul li:not(:first-child) { margin-top: 1.5rem; } .company-ban .bottom .right > ul li:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c0a36f; position: absolute; top: 10px; left: 0; } .banner-product { position: relative; } .banner-product img { width: 100%; } .banner-product .text { width: 100%; position: absolute; left: 0; top: 30%; color: #fff; } .banner-product .text .con .middle h2 { font-size: 1.6rem; font-weight: bold; } .banner-product .text .con .middle p { font-size: 0.9rem; margin-top: 0.6rem; } .banner-product .text .con .middle .btn { margin-top: 3rem; } .banner-product .text .con .middle .btn > ul li { float: left; } .banner-product .text .con .middle .btn > ul li.more { width: 8rem; height: 2.5rem; border-radius: 26px; border: 1px solid #e5e5e5; text-align: center; cursor: pointer; } .banner-product .text .con .middle .btn > ul li.more a { color: #fff; font-size: 0.8rem; line-height: 2.5rem; display: block; } .banner-product .text .con .middle .btn > ul li.more span { font-size: 0.8rem; line-height: 2.5rem; } .banner-product .text .con .middle .btn > ul li.more:hover { background: #9f223d; border: none; } .banner-product .text .con .middle .btn > ul li.show { margin-left: 1rem; } .banner-product .text .con .middle .btn > ul li:last-child a { line-height: 2.5rem; color: #fff; text-decoration: underline; font-size: 0.8rem; } .banner-product .text .con .middle.right { float: right; } .paper { background: url(../img/product/paper_bg.jpg) no-repeat; background-size: cover; padding: 3.5rem 0; } .paper p { font-size: 1.8rem; color: #fff; text-align: center; font-weight: bold; letter-spacing: 1px; } .paper p a { display: inline-block; width: 10rem; height: 3rem; border-radius: 30px; border: 1px solid #fff; text-align: center; line-height: 3rem; font-size: 0.8rem; color: #fff; margin-left: 2rem; } .paper p a:hover { border: 1px solid #7a1d2f; background: #7a1d2f; } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } } @media screen and (max-width: 768px) { .banner .text { top: 30%; } .banner .text h2 { font-size: 18px; } .banner .text p { font-size: 13px; margin-top: 0.2rem; } .sub-nav .content .left { display: none; } .sub-nav .content .right { width: 100%; } .sub-nav .content .right > ul li { width: 20%; } .sub-nav .content .right > ul li a { font-size: 12px; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 0; } .company-ban .top .con .logo img { width: 30%; } .company-ban .bottom { padding: 1.5rem 10px 3rem; } .company-ban .bottom .left { width: 100%; } .company-ban .bottom .left h2 { font-size: 16px; } .company-ban .bottom .left h3 { font-size: 14px; } .company-ban .bottom .right { width: 100%; margin-top: 1rem; } .company-ban .bottom .right > ul li { font-size: 13px; padding-left: 1.2rem; } .company-ban .bottom .right > ul li:before { top: 7px; } .banner-product { height: 220px; overflow: hidden; } .banner-product .dark-mask { display: block; } .banner-product img { width: auto; height: 100%; margin-left: -36%; } .banner-product .text .con .middle { padding-left: 10px; } .banner-product .text .con .middle h2 { font-size: 20px; } .banner-product .text .con .middle p { font-size: 13px; } .banner-product .text .con .middle.right { float: left; } .banner-product .text .con .middle .btn > ul li.more { height: 34px; } .banner-product .text .con .middle .btn > ul li.more a { font-size: 14px; line-height: 34px; } .banner-product .text .con .middle .btn > ul li.more span { font-size: 14px; line-height: 34px; } .banner-product .text .con .middle .btn > ul li:last-child a { line-height: 34px; font-size: 14px; } .paper { padding: 2.5rem 0; } .paper p { font-size: 16px; } .paper p a { margin-top: 1.5rem; font-size: 14px; margin-left: 0; display: block; margin: 18px auto 0; } } /*# sourceMappingURL=fund_case.css.map */