body { background-color: #f9f9f9; } .part-title { width: 100%; display: flex; align-items: flex-end; padding: 20px auto; } .part-title h2 { font-weight: bold; line-height: 42px; font-size: 38px; color: #B3906A; } .part-title h4 { margin-left: 19px; line-height: 32px; font-size: 26px; color: #B3906A; font-weight: 300; } .part-title .line { position: relative; top: -15px; display: block; margin-left: 20px; flex: 1; height: 1px; background-color: #e5e5e5; } .part-one { margin-top: 36px; } .part-one .my-container .base-title { text-align: center; font-weight: bold; font-size: 24px; line-height: 32px; color: #333; } .part-one .my-container .content-box { width: 100%; margin-top: 47px; overflow: hidden; } .part-one .my-container .content-box > h4 { display: none; margin: 40px 0; font-weight: bold; text-align: center; font-size: 18px; line-height: 32px; color: #333; } .part-one .my-container .content-box > h4.show { display: block; } .part-one .my-container .content-box > h5 { display: none; font-weight: bold; font-size: 16px; line-height: 32px; color: #333; } .part-one .my-container .content-box > h5.show { display: block; } .part-one .my-container .content-box > p { display: none; font-size: 16px; line-height: 32px; color: #666; } .part-one .my-container .content-box > p.show { display: block; } .part-one .my-container .look-more-btn { display: flex; align-items: center; justify-content: space-around; width: 100px; margin: 0 auto; margin-top: 60px; cursor: pointer; } .part-one .my-container .look-more-btn h5 { font-size: 16px ; line-height: 32px; color: #C49E62; } .part-one .my-container .look-more-btn .arrow { width: 14px; height: 8px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(/static/cn/images/about/rules_lookmore_arrow.png); } .part-two { margin-top: 120px; } .part-two .my-container .top-img { width: 195px; margin: 0 auto; } .part-two .my-container .top-img img { display: block; width: 100%; } .part-two .my-container .swiper-container { margin-top: 60px; } .part-two .my-container .swiper-container .swiper-slide .pic-img { width: 100%; } .part-two .my-container .swiper-container .swiper-slide .pic-img img { display: block; width: 100%; } .part-two .my-container .swiper-container .swiper-slide .text-main { padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; } .part-two .my-container .swiper-container .swiper-slide .text-main h4 { font-size: 18px; line-height: 20px; color: #333; } .part-two .my-container .swiper-container .swiper-slide .text-main span { padding: 0 12px; font-size: 18px; line-height: 20px; color: #333; } .part-two .my-container .swiper-container .swiper-slide .text-main h5 { font-size: 18px; line-height: 20px; color: #C49E62; } .part-three { margin-top: 115px; padding-bottom: 115px; } .part-three .my-container .title { text-align: center; font-weight: bold; font-size: 24px; line-height: 32px; color: #333; } .part-three .my-container table { margin-top: 39px; width: 100%; border: 1px solid #D2D2D2; border-collapse: collapse; } .part-three .my-container table thead tr { background-color: #C49E62; } .part-three .my-container table thead tr th { padding-left: 20px; font-weight: bold; font-size: 20px; line-height: 50px; color: #fff; height: 64px; } .part-three .my-container table thead tr th:first-child { padding-left: 50px; } .part-three .my-container table thead tr > th:first-child { width: 370px; } .part-three .my-container table thead tr > th:nth-child(3n) { width: 300px; } .part-three .my-container table tbody tr td { padding: 10px 15px; font-size: 16px; line-height: 30px; color: #333; } .part-three .my-container table tbody tr td .text { display: flex; } .part-three .my-container table tbody tr td .text h4 { text-align: center; width: 30px; padding-right: 15px; font-size: 16px; line-height: 30px; color: #333; } .part-three .my-container table tbody tr td .text p { flex: 1; font-size: 16px; line-height: 30px; color: #333; } .part-three .my-container table tbody tr:nth-child(2n-1) { background-color: #f9f9fc; } @media only screen and (max-width: 600px) { .part-title { width: 100%; display: flex; align-items: flex-end; padding: 20px auto; } .part-title h2 { font-weight: bold; line-height: 0.42rem; font-size: 0.38rem; color: #b3906a; } .part-title h4 { margin-left: 0.19rem; line-height: 0.32rem; font-size: 0.26rem; color: #b3906a; font-weight: 300; } .part-title .line { position: relative; top: -0.1rem; display: block; margin-left: 0.2rem; flex: 1; height: 1px; background-color: #e5e5e5; } .title-crumbs-top { display: none; } .part-one { margin-top: 0.72rem; } .part-one .my-container .base-title { text-align: center; font-weight: bold; font-size: 0.28rem; line-height: 0.32rem; color: #333; } .part-one .my-container .content-box { width: 100%; margin-top: 0; overflow: hidden; } .part-one .my-container .content-box > h4 { margin: 0.5rem 0; font-weight: bold; text-align: center; font-size: 0.26rem; line-height: 0.32rem; color: #333; } .part-one .my-container .content-box > h5 { font-weight: bold; font-size: 0.24rem; line-height: 0.4rem; color: #333; } .part-one .my-container .content-box > p { font-size: 0.24rem; line-height: 0.4rem; color: #666; } .part-one .my-container .look-more-btn { display: flex; align-items: center; justify-content: space-around; width: 1.4rem; margin: 0 auto; margin-top: 0.49rem; cursor: pointer; } .part-one .my-container .look-more-btn h5 { font-size: 0.24rem; line-height: 0.32rem; color: #C49E62; } .part-one .my-container .look-more-btn .arrow { width: 0.18rem; height: 0.1rem; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(/static/cn/images/about/rules_lookmore_arrow.png); } .part-two { margin-top: 0.82rem; } .part-two .my-container { padding: 0; } .part-two .my-container .top-img { width: 1.85rem; margin: 0 auto; } .part-two .my-container .top-img img { display: block; width: 100%; } .part-two .my-container .swiper-container { margin-top: 0.24rem; padding-left: 0.68rem; padding-right: 0.68rem; } .part-two .my-container .swiper-container .swiper-slide .pic-img { width: 100%; } .part-two .my-container .swiper-container .swiper-slide .pic-img img { display: block; width: 100%; } .part-two .my-container .swiper-container .swiper-slide .text-main { padding-top: 0.28rem; width: 100%; display: flex; align-items: center; justify-content: center; } .part-two .my-container .swiper-container .swiper-slide .text-main h4 { font-size: 0.24rem; line-height: 0.32rem; color: #333; } .part-two .my-container .swiper-container .swiper-slide .text-main span { padding: 0 0.15rem; font-size: 0.24rem; line-height: 0.32rem; color: #333; } .part-two .my-container .swiper-container .swiper-slide .text-main h5 { font-size: 0.24rem; line-height: 0.32rem; color: #C49E62; } .part-three { margin-top: 1rem; padding-bottom: 1rem; } .part-three .my-container .title { text-align: center; font-weight: bold; font-size: 0.28rem; line-height: 0.32rem; color: #333; } .part-three .my-container table { margin-top: 0.32rem; width: 100%; border: 1px solid #D2D2D2; border-collapse: collapse; } .part-three .my-container table thead tr { background-color: #C49E62; } .part-three .my-container table thead tr th { padding-left: 0.2rem; font-weight: bold; font-size: 0.16rem; line-height: 0.5rem; color: #fff; height: 0.64rem; } .part-three .my-container table thead tr th:first-child { padding-left: 0.2rem; } .part-three .my-container table thead tr > th:first-child { width: auto; } .part-three .my-container table thead tr > th:nth-child(3n) { width: auto; } .part-three .my-container table tbody tr td { padding: 0.1rem 0.2rem; font-size: 0.12rem; line-height: 0.3rem; color: #333; } .part-three .my-container table tbody tr td .text { display: flex; } .part-three .my-container table tbody tr td .text h4 { width: 0.26rem; padding-right: 0.1rem; font-size: 0.12rem; line-height: 0.3rem; color: #333; } .part-three .my-container table tbody tr td .text p { flex: 1; font-size: 0.12rem; line-height: 0.3rem; color: #333; } }