.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; } .active-ban { padding: 6rem 0; background: url(../img/news/active/active_ban.jpg) no-repeat; background-size: cover; } .active-ban .con .text { background: #fff; width: 34%; padding: 2rem 3rem 2rem 2rem; } .active-ban .con .text h2 { font-size: 1.6rem; font-weight: bold; } .active-ban .con .text .time { margin-top: 0.2rem; } .active-ban .con .text .time span { font-size: 0.8rem; color: #999; margin-right: 0.4rem; } .active-ban .con .text p { font-size: 0.8rem; margin-top: 1rem; text-align: justify; } .active-ban .con .text .btn { margin: 2.2rem 0 0; } .active-ban .con .text .btn a { display: inline-block; width: 7.9rem; height: 2.5rem; background: #95a2a9; border-radius: 26px; color: #fff; border: none; font-size: 0.8rem; text-align: center; line-height: 2.5rem; } .active-ban .con .text .btn a:hover { background: #9f223d; } .active-ban .con .text .btn a:first-child { margin-right: 1rem; } .active-con { background: -ms-linear-gradient(top, #fff 60%, #edeef0); /* IE 10 */ background: -moz-linear-gradient(top, #fff 60%, #edeef0); /*鐏嫄*/ background: -webkit-linear-gradient(top, #fff 60%, #edeef0); /*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(top, #fff 60%, #edeef0); background: linear-gradient(top, #fff 60%, #edeef0); } .active-con .active-wrapper { text-align: center; padding: 3.5rem 0 2rem; } .active-con .active-wrapper > ul { display: inline-block; } .active-con .active-wrapper > ul li { float: left; width: 7.9rem; height: 2.5rem; border-radius: 26px; background: #95a2a9; color: #fff; font-size: 0.8rem; text-align: center; line-height: 2.5rem; cursor: pointer; } .active-con .active-wrapper > ul li a{ color:#fff; } .active-con .active-wrapper > ul li:hover { background: #9f223d; } .active-con .active-wrapper > ul li.active { background: #9f223d; } .active-con .active-wrapper > ul li:first-child { margin-right: 1.5rem; } .active-con .con-list > ul li { width: 31.6%; float: left; margin-top: 1rem; } .active-con .con-list > ul li .top { height: 0; padding-bottom: 56%; overflow: hidden; } .active-con .con-list > ul li .top img { width: 100%; } .active-con .con-list > ul li .bottom { padding-bottom: 2.5rem; } .active-con .con-list > ul li .bottom h3 { font-size: 1rem; font-style: italic; margin-top: 1rem; } .active-con .con-list > ul li .bottom h2 { font-size: 1.3rem; font-weight: bold; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 1.5em; margin: 0.5rem 0 1rem; } .active-con .con-list > ul li .bottom .more { font-size: 0.8rem; color: #9f223d; line-height: 1rem; margin-bottom: 1rem; } .active-con .con-list > ul li .bottom .more .btn { width: 1rem; height: 1rem; border-radius: 50%; background: #9f223d; text-align: center; display: inline-block; margin-right: 0.4rem; } .active-con .con-list > ul li .bottom .more .btn span { color: #fff; font-size: 0.6rem; position: relative; top: -2px; left: 1px; } .active-con .con-list > ul li .bottom span { font-size: 0.8rem; color: #999; } .active-con .con-list > ul li:not(:nth-child(3n)) { margin-right: 2.6%; } .active-con .con-list > ul li:hover .top img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .active-con .con-list > ul li:hover .bottom .more { color: #7a1d2f; } .active-con .con-list > ul li:hover .bottom .more .btn { background: #7a1d2f; } .page-list { padding: 7% 0 8% 0; } .page-list ul { margin: 0 auto; text-align: center; font-size: 0; } .page-list ul li { width: 2.6rem; height: 2.6rem; line-height: 2.6rem; background-color: #fff; border: solid 1px #eaeaea; display: inline-block; font-size: 1rem; } .page-list ul li:not(:last-child) { margin-right: 1rem; } .page-list ul li a { color: #666; } .page-list ul li.pre-btn, .page-list ul li.next-btn { background-color: #f3f3f3; border: 1px solid #eaeaea; } .page-list ul li.pre-btn .iconfont, .page-list ul li.next-btn .iconfont { font-size: 1rem; } .page-list ul li.page-num.active { background-color: #9f223d; } .page-list ul li.page-num.active a { color: #fff; } .page-list ul li:hover { background-color: #9f223d; } .page-list ul li:hover a { color: #fff; } .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:last-child a { line-height: 2.5rem; color: #fff; text-decoration: underline; font-size: 0.8rem; margin-left: 2rem; } .banner-product .text .con .middle.right { float: right; } .sign-up { position: fixed; width: 100%; height: 100%; top: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.4); display: none; } .sign-up .table { width: 70%; height: 88%; background: #fff; position: absolute; top: 6%; left: 15%; overflow: hidden; } .sign-up .table .left { width: 56%; height: 100%; position: absolute; left: 0; top: 0; background: url(../img/form_img.jpg) no-repeat; background-size: cover; } .sign-up .table .left .logo { position: absolute; top: 8%; left: 8%; } .sign-up .table .left .text { position: absolute; bottom: 8%; left: 8%; color: #fff; } .sign-up .table .left .text h4 { font-size: 1rem; } .sign-up .table .left .text h2 { font-size: 2.2rem; font-weight: bold; letter-spacing: 1px; position: relative; top: -0.4rem; } .sign-up .table .left .text h3 { font-size: 1.1rem; letter-spacing: 1px; } .sign-up .table .right { width: 44%; height: 100%; float: right; padding: 2%; } .sign-up .table .right h2 { font-size: 1.7rem; font-weight: bold; } .sign-up .table .right h2 span { color: #9f223d; } .sign-up .table .right h4 { font-size: 16px; margin-bottom: 1rem; } .sign-up .table .right form { height: 90%; } .sign-up .table .right form > ul { height: 80%; } .sign-up .table .right form > ul li { width: 100%; height: 16%; padding-bottom: 3%; float: left; } .sign-up .table .right form > ul li input { width: 100%; height: 100%; border: none; background: #f3f3f5; padding-left: 1rem; color: #999; font-size: 0.8rem; } .sign-up .table .right form > ul li.list-half { width: 42%; } .sign-up .table .right form > ul li.list-right { width: 54%; margin-left: 4%; } .sign-up .table .right form > ul li:last-child { height: 36%; } .sign-up .table .right form > ul li:last-child textarea { width: 100%; height: 100%; border: none; background: #f3f3f5; padding-top: 1rem; padding-left: 1rem; color: #999; font-size: 0.8rem; } .sign-up .table .right form .button { width: 10rem; height: 3rem; border-radius: 30px; background: #9f223d; color: #fff; font-size: 0.8rem; line-height: 3rem; text-align: center; border: none; margin-top: 0.8rem; cursor: pointer; } .sign-up .table .right form .button:hover { background: #8b0002; } .sign-up .table .close { position: absolute; right: 1rem; top: 1rem; color: #999; font-size: 0.9rem; cursor: pointer; } @media screen and (max-width: 1366px) { .active-ban .con .text { width: 37%; } .active-con .con-list > ul li .bottom .more .btn span { top: 0; } .sign-up .table .right form { height: 86%; } } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .active-ban .con .text { width: 40%; } .banner-product .text { top: 24%; } .active-con .con-list > ul li .bottom h2 { font-size: 1.2rem; } .active-con .con-list > ul li .bottom h3 { font-size: 0.9rem; } .sign-up .table .left { width: 46%; } .sign-up .table .left .text h2 { font-size: 1.8rem; } .sign-up .table .right { width: 54%; } } @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; } .active-ban { padding: 2rem 0; } .active-ban .con .text { width: 90%; margin-left: 5%; } .active-ban .con .text h2 { font-size: 16px; } .active-ban .con .text .time span { font-size: 12px; } .active-ban .con .text p { font-size: 13px; } .active-ban .con .text .btn a { font-size: 14px; } .active-con .active-wrapper { padding: 2.5rem 0 0; } .active-con .active-wrapper > ul li { font-size: 14px; } .active-con .con-list > ul li { width: 48.5%; } .active-con .con-list > ul li:not(:nth-child(3n)) { margin-right: 0; } .active-con .con-list > ul li:nth-child(odd) { margin-right: 3%; } .active-con .con-list > ul li .bottom h3 { font-size: 12px; } .active-con .con-list > ul li .bottom h2 { font-size: 14px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; } .active-con .con-list > ul li .bottom .more { font-size: 14px; } .active-con .con-list > ul li .bottom .more .btn { width: 14px; height: 14px; } .active-con .con-list > ul li .bottom .more .btn span { left: 0; line-height: 14px; } .active-con .con-list > ul li .bottom span { font-size: 12px; } .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; } .sign-up .table { width: 90%; height: 80%; top: 6%; left: 5%; overflow: auto; } .sign-up .table .left { display: none; } .sign-up .table .left .text h2 { font-size: 1.8rem; } .sign-up .table .right { width: 100%; padding: 5%; overflow: auto; } .sign-up .table .right h2 { font-size: 16px; } .sign-up .table .right h4 { font-size: 13px; } .sign-up .table .right form { height: 100%; } .sign-up .table .right form > ul { height: 90%; } .sign-up .table .right form > ul li { height: 10.6%; } .sign-up .table .right form > ul li.list-half { width: 100%; } .sign-up .table .right form > ul li.list-right { width: 100%; margin-left: 0; } } /*# sourceMappingURL=info_active.css.map */