.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; } .advantage-one { position: relative; } .advantage-one img { width: 100%; } .advantage-one .con { position: absolute; top: 9rem; left: 0; width: 100%; color: #fff; } .advantage-one .con .text h2 { font-size: 1.8rem; font-weight: bold; font-style: italic; padding-left: 2.8rem; position: relative; } .advantage-one .con .text h2:before { content: ''; width: 2rem; height: 2rem; background: url(../img/fund/advantage/one_03.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 6px; } .advantage-one .con .text p { width: 44%; font-size: 0.8rem; margin-top: 1rem; line-height: 1.8; } .advantage-one .bottom { padding: 5rem 0; } .advantage-one .bottom .left { float: left; width: 56%; } .advantage-one .bottom .left > div { float: left; width: 20rem; height: 20rem; border-radius: 50%; background: #c0a36f; text-align: center; color: #fff; } .advantage-one .bottom .left > div:last-child { margin-left: -2.5rem; background: rgba(24, 33, 63, 0.9); } .advantage-one .bottom .left > div h2 { font-size: 1.3rem; font-weight: bold; padding-top: 3.5rem; margin-bottom: 1rem; } .advantage-one .bottom .left > div p { font-size: 0.7rem; } .advantage-one .bottom .right { float: right; width: 38%; padding-top: 6%; } .advantage-one .bottom .right .text h2 { font-size: 1.8rem; font-weight: bold; font-style: italic; padding-left: 2.8rem; position: relative; } .advantage-one .bottom .right .text h2:before { content: ''; width: 2rem; height: 2rem; background: url(../img/fund/advantage/two_03.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 6px; } .advantage-one .bottom .right .text p { font-size: 0.8rem; margin-top: 1rem; text-align: justify; line-height: 1.8; } .advantage-two { position: relative; } .advantage-two .tu { position: relative; width: 100%; height: 25rem; overflow: hidden; } .advantage-two .tu .tu-top-con { width: 100%; position: absolute; left: -73%; top: 0; z-index: 9; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .advantage-two .tu .tu-top-con img { width: 100%; } .advantage-two .tu .tu-top-con .con { position: absolute; top: 5rem; left: 40%; width: 30%; color: #fff; opacity: 0; } .advantage-two .tu .tu-top-con .con .text h2 { font-size: 1.8rem; font-weight: bold; font-style: italic; padding-left: 2.8rem; position: relative; } .advantage-two .tu .tu-top-con .con .text h2:before { content: ''; width: 2rem; height: 2rem; background: url(../img/fund/advantage/three_03.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 6px; } .advantage-two .tu .tu-top-con .con .text h3 { font-size: 1.8rem; font-style: italic; margin-top: 1rem; } .advantage-two .tu .tu-top-con .con .text p { width: 100%; font-size: 0.8rem; margin-top: 1rem; line-height: 1.8; } .advantage-two .tu .tu-top-con.active { z-index: 10; left: -23%; } .advantage-two .tu .tu-top-con.active img { width: 100%; } .advantage-two .tu .tu-top-con.active .con { opacity: 1; } .advantage-two .tu .tu-bottom-con { width: 100%; position: absolute; left: 67%; top: 0; z-index: 9; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .advantage-two .tu .tu-bottom-con img { width: 100%; } .advantage-two .tu .tu-bottom-con .con { position: absolute; top: 5rem; left: 35%; width: 30%; color: #fff; opacity: 0; } .advantage-two .tu .tu-bottom-con .con .text h2 { font-size: 1.8rem; font-weight: bold; font-style: italic; padding-left: 2.8rem; position: relative; } .advantage-two .tu .tu-bottom-con .con .text h2:before { content: ''; width: 2rem; height: 2rem; background: url(../img/fund/advantage/three_03.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 6px; } .advantage-two .tu .tu-bottom-con .con .text h3 { font-size: 1.8rem; font-style: italic; margin-top: 1rem; } .advantage-two .tu .tu-bottom-con .con .text p { width: 100%; font-size: 0.8rem; margin-top: 1rem; } .advantage-two .tu .tu-bottom-con.active { z-index: 10; left: 20%; } .advantage-two .tu .tu-bottom-con.active img { width: 100%; } .advantage-two .tu .tu-bottom-con.active .con { opacity: 1; } .advantage-list .bottom > ul > li .left { float: left; width: 56%; } .advantage-list .bottom > ul > li .left img { width: 100%; } .advantage-list .bottom > ul > li .right { float: right; width: 38%; padding-top: 10%; } .advantage-list .bottom > ul > li .right h2 { font-size: 1.8rem; color: #c0a36f; font-style: italic; padding-bottom: 0.5rem; } .advantage-list .bottom > ul > li .right > .ul p { font-size: 0.8rem; margin-top: 1.5rem; text-align: justify; padding-left: 1.2rem; position: relative; line-height: 1.8; } .advantage-list .bottom > ul > li .right > .ul p:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c0a36f; position: absolute; top: 10px; left: 0; } .advantage-list .bottom > ul > li:nth-child(2) .left { float: right; width: 38%; padding-top: 3%; } .advantage-list .bottom > ul > li:nth-child(2) .right { float: left; width: 56%; padding-top: 0; } .advantage-con { background: url(../img/fund/advantage/banner_03.png) no-repeat; background-size: cover; padding: 9rem 0 12rem; } .advantage-con .con p { width: 80%; margin: 0 auto; font-size: 0.8rem; color: #fff; margin-top: 1rem; text-align: center; line-height: 1.8; } .advantage-special { padding: 5rem 0 0; background: url(../img/fund/advantage/advantage_bg.png) no-repeat; background-size: cover; } .advantage-special .con .left { float: left; width: 34%; } .advantage-special .con .left h2 { font-size: 1.8rem; font-weight: bold; font-style: italic; padding-left: 2.8rem; position: relative; } .advantage-special .con .left h2:before { content: ''; width: 2rem; height: 2rem; background: url(../img/fund/advantage/four_03.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 6px; } .advantage-special .con .right { float: right; width: 60%; } .advantage-special .con .right > ul > li .title { float: left; width: 24%; } .advantage-special .con .right > ul > li .title h2 { width: 7.5rem; height: 7.5rem; border-radius: 50%; border: 2px solid #18213f; text-align: center; line-height: 7.5rem; background: #fff; font-size: 1.2rem; font-weight: bold; color: #18213f; position: relative; left: -3.75rem; } .advantage-special .con .right > ul > li .title h2:before { content: ''; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #18213f; position: absolute; bottom: -0.6rem; left: 3rem; } .advantage-special .con .right > ul > li .list { float: right; width: 76%; position: relative; top: -1rem; } .advantage-special .con .right > ul > li .list > .ul { padding-bottom: 6rem; } .advantage-special .con .right > ul > li .list > .ul p { font-size: 0.8rem; margin-top: 1.5rem; padding-left: 2rem; position: relative; text-align: justify; line-height: 1.8; } .advantage-special .con .right > ul > li .list > .ul p:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c0a36f; position: absolute; top: 10px; left: 0; } .advantage-special .con .right > ul > li:not(:last-child) { border-left: 1px solid #18213f; } .advantage-special .con .right > ul > li:last-child .title h2:before { width: 0; height: 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.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: 1366px) { .advantage-one .bottom .left{ width: 64%; } .advantage-one .bottom .right{ width: 34%; } .advantage-one .bottom .left > div { width: 20rem; height: 20rem; } .advantage-one .bottom .left > div h2 { padding-top: 2.5rem; } .advantage-two .tu .tu-top-con .con { top: 5rem; } .advantage-two .tu .tu-bottom-con .con { top: 5rem; } } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .advantage-one .bottom .left { width: 100%; left: 50%; position: relative; margin-left: -19rem; } .advantage-one .bottom .right { width: 100%; } .advantage-one .bottom .left > div:last-child{ margin-left: -1.5rem; } .advantage-one .con { top: 5rem; } .advantage-two .tu { height: 21rem; } .advantage-two .tu .tu-top-con .con { top: 3rem; } .advantage-two .tu .tu-bottom-con .con { top: 3rem; } } @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; } .advantage-one .con { position: relative; top: 1.5rem; } .advantage-one .con .text h2 { font-size: 20px; color: #333; } .advantage-one .con .text h2:before { top: 3px; } .advantage-one .con .text p { width: 100%; font-size: 13px; color: #333; } .advantage-one .bottom { padding: 2rem 10px; } .advantage-one .bottom .left { left: auto; margin-left: 0; } .advantage-one .bottom .left > div { width: 25rem; height: 25rem; float: none; margin: 2rem auto; } .advantage-one .bottom .left > div h2 { font-size: 16px; padding-top: 3.5rem; } .advantage-one .bottom .left > div p { font-size: 13px; } .advantage-one .bottom .left > div:last-child { margin-left: 0; margin: 1rem auto; } .advantage-one .bottom .right { width: 100%; } .advantage-one .bottom .right .text h2 { font-size: 20px; } .advantage-one .bottom .right .text h2:before { top: 3px; } .advantage-one .bottom .right .text p { font-size: 13px; } .advantage-two .tu { height: 30rem; } .advantage-two .tu .tu-top-con .con { position: relative; top: 0; margin-top: 2rem; width: 90%; left: 30%; } .advantage-two .tu .tu-top-con .con .text { color: #333; } .advantage-two .tu .tu-top-con .con .text h2 { font-size: 20px; } .advantage-two .tu .tu-top-con .con .text h2:before { top: 3px; } .advantage-two .tu .tu-top-con .con .text h3 { font-size: 16px; } .advantage-two .tu .tu-top-con .con .text p { font-size: 13px; width: 100%; } .advantage-two .tu .tu-bottom-con .con { position: relative; top: 0; margin-top: 2rem; width: 90%; left: -15%; } .advantage-two .tu .tu-bottom-con .con .text { color: #333; } .advantage-two .tu .tu-bottom-con .con .text .right h2 { font-size: 20px; } .advantage-two .tu .tu-bottom-con .con .text .right h2:before { top: 3px; } .advantage-two .tu .tu-bottom-con .con .text .right h3 { font-size: 16px; } .advantage-two .tu .tu-bottom-con .con .text .right p { font-size: 13px; width: 100%; } .advantage-list .bottom > ul > li .left { width: 100%; float: none; } .advantage-list .bottom > ul > li .right { width: 100%; float: none; padding-top: 2%; } .advantage-list .bottom > ul > li .right h2 { font-size: 16px; } .advantage-list .bottom > ul > li .right > .ul p { font-size: 13px; margin-top: 1rem; } .advantage-list .bottom > ul > li .right > .ul p:before { top: 7px; } .advantage-list .bottom > ul > li:nth-child(2) .left { width: 100%; float: none; } .advantage-list .bottom > ul > li:nth-child(2) .right { width: 100%; float: none; margin-top: 2rem; } .advantage-list .bottom > ul > li:nth-child(3) .right { margin-top: 2rem; margin-bottom: 4rem; } .advantage-con { padding: 3rem 0 7rem; } .advantage-con .con p { width: 100%; font-size: 13px; text-align: justify; } .advantage-special { padding: 2rem 0 0; background: none; } .advantage-special .con .left { width: 100%; } .advantage-special .con .left h2 { font-size: 20px; } .advantage-special .con .left h2:before { top: 3px; } .advantage-special .con .right { width: 90%; margin-top: 2rem; } .advantage-special .con .right > ul > li .title { width: 14%; } .advantage-special .con .right > ul > li .title h2 { font-size: 16px; width: 5rem; height: 5rem; line-height: 5rem; left: -2.65rem; } .advantage-special .con .right > ul > li .title h2:before { width: 0.8rem; height: 0.8rem; left: 2rem; bottom: -0.4rem; } .advantage-special .con .right > ul > li .list { width: 86%; } .advantage-special .con .right > ul > li .list > .ul p { font-size: 13px; width: 96%; } .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_advantage.css.map */