.header { background-color: #fff; color: #000; position: fixed; top: 0; padding: 0.17rem 1.85rem; box-shadow: 0px 8px 10px -12px #333; width: 100vw; max-width: 100vw; } .header .header-module a { color: #949494; } .header .header-module .top-same { color: #949494; } .header .header-module .menu-parent .hover-block { background-color: rgba(0, 0, 0, 0.48); } .header .header-module .menu-parent .hover-block a { color: #fff; } body { background-color: #fff; } .body { margin-top: 1.3rem; position: relative; background: #fff; min-width: 1366px; } .body .module-first { padding: 0 3.5rem 1.5rem 1.7rem; margin: 0 auto; position: relative; display: flex; padding-top: 1rem; overflow: hidden; } .body .module-first .flavor { color: #666; } .body .module-first .flavor a { color: #666; } .body .module-first .bean { position: absolute; top: -0.3rem; right: -0.5rem; width: 1.63rem; } .body .module-first .next-product { position: absolute; top: 2.8rem; right: -0.6rem; width: 1.63rem; } .body .module-first .next-product a{ display: inline-block; width: 100%; height: 100%; } .body .next-product-btn{ position: absolute; top: 50%; right: 25%; transform-origin: center; transform: translate(-50%, -50%); text-align: center; color: #666; } .body .module-first .left { width: 61%; } .body .module-first .left .main-pic { font-size: 0; width: 100%; min-height: 5.67rem; } .body .module-first .left .main-pic img{ width: 100%; } .body .module-first .left .small-pic { margin-top: 0.1rem; display: flex; /* justify-content: space-between; */ width: 100%; height: 1rem; overflow-y: hidden; } .body .module-first .left .small-pic img { font-size: 0; margin-right: 0.21rem; width: calc(100% / 5 - 0.18rem); cursor: pointer; } .body .module-first .left .small-pic img:last-child { margin-right: 0; } .body .module-first .right { margin-left: 0.75rem; width: 39%; } .body .module-first .right .flavor { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #666666; padding-top: 0.17rem; } .body .module-first .right .name { margin-top: 0.2rem; font-size: 0.4rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.46rem; color: #333333; } .body .module-first .right .english { margin-top: 0.1rem; font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #666666; } .body .module-first .right .net-content { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.46rem; color: #333333; } .body .module-first .right .accordion_label { box-sizing: border-box; margin: 0; padding: 0; border: 0; font-weight: normal; vertical-align: baseline; background: transparent; letter-spacing: 2px; text-transform: uppercase; color: #000; cursor: pointer; font-size: 18px; line-height: 42px; } .body .module-first .right .tab_panel { font-size: 0.14rem; color: #000; margin: 0; padding: 0; list-style: none; text-decoration: none; } .body .module-first .right .tab_panel .tab_content { list-style: none; outline: none; box-sizing: border-box; margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } .body .module-first .right .tab_panel .tab_content p { list-style: none; outline: none; box-sizing: border-box; margin: 0; padding: 0; border: 0; font-weight: normal; vertical-align: baseline; background: transparent; font-size: 0.12rem; line-height: 0.2rem; position: relative; color: #666; margin-top: 0; } .body .module-first .right .tab_panel .tab_content .item_label { list-style: none; outline: none; box-sizing: border-box; margin: 0; padding: 0; border: 0; font-weight: normal; vertical-align: baseline; background: transparent; letter-spacing: 0.02rem; text-transform: uppercase; padding-top: 0.12rem; color: #000; font-size: 18px; line-height: 42px; position: relative; } .body .module-first .right .tab_panel .tab_content .size_guide { margin: 0; font-weight: normal; vertical-align: baseline; position: relative; display: inline-block; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.11rem; font-family: inherit; color: inherit; line-height: normal; } .body .module-first .right .tab_panel .tab_content .size_guide::after { transition: all 0.15s linear; content: ' '; position: absolute; width: 100%; left: 0; bottom: -1px; opacity: 1; border-bottom: 1px solid; color: inherit; transform: translate3d(0, 0, 0); } .body .module-first .right .tab_panel .tab_content .tab_sub { margin-top: 0.12rem; } .body .module-first .right .tab_panel .tab_content .tab_sub ul li { list-style: disc; line-height: 0.24rem; outline: none; box-sizing: border-box; margin: 0; padding: 0; border: 0; font-size: 0.12rem; font-weight: normal; vertical-align: baseline; background: transparent; position: relative; color: #666; margin-left: 0.15rem; } .body .module-second { margin: 0 auto; margin: 0 4.3rem; } .body .module-second .line { border-top: 1px solid #E0E0E0; border-bottom: 1px solid #e0e0e0; } .body .module-second .line:last-child { margin-bottom: 0.8rem; } .body .module-second .line .title { padding-top: 0.25rem; padding-bottom: 0.28rem; font-size: 0.28rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.37rem; color: #000000; display: flex; justify-content: space-between; } .body .module-second .line .title .close, .body .module-second .line .title .open { cursor: pointer; } .body .module-second .line .box .summary { display: flex; justify-content: space-between; } .body .module-second .line .box .summary .left-title { font-size: 0.22rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.29rem; color: #333333; } .body .module-second .line .box .summary .right-decribe { width: 75.3%; font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #4C4C4C; border-bottom: 1px solid #E0E0E0; padding-bottom: 0.27rem; } .body .module-second .line .box .summary .none { border-bottom: none; } .body .module-second .line .box .advantage { padding-top: 0.27rem; } .body .module-second .line .box .advantage p { padding-bottom: 0.1rem; } .body .module-list { margin-top: 0.8rem; } .body .module-list .header-title { text-align: center; width: 100%; } .body .module-list .header-title .title { font-size: 0.4rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.46rem; color: #1CB0F7; } .body .module-list .header-title span { display: block; width: 0.41rem; height: 0.07rem; background: #1CB0F7; margin: 0 auto; margin-top: 0.3rem; margin-bottom: 0.3rem; } .body .module-list .pro-list { margin: 0 auto; margin: 0 1.54rem; width: calc(100% - 3.08rem); display: flex; margin-bottom: 1.5rem; } .body .module-list .pro-list .item { /* border: 1px solid #D9D9D9; */ width: calc(100% / 3 - 0.8rem); padding: 0.15rem 0.4rem 0.65rem; padding-top: 0.8rem; display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .body .module-list .pro-list .item:hover { transition: all 0.3s ease-in-out; box-shadow: 10px 10px 20px rgba(61, 135, 185, 0.28); background-color: rgba(255, 255, 255, 0.7); border-radius: 1rem; } .body .module-list .pro-list .item img { width: 80%; margin: 0 auto; z-index: 23; } .body .module-list .pro-list .item p { text-align: center; margin-top: 0.09rem; font-size: 0.18rem; font-family: Microsoft YaHei; font-weight: bold; line-height: 0.46rem; color: #7B7B7B; } .body .module-list .pro-list .item .title-bar { padding-left: 10%; padding-right: 10%; text-align: left; } .body .module-list .pro-list .item .txt { padding-left: 10%; padding-right: 10%; text-align: left; } .body .module-list .pro-list .item p:last-child { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.28rem; color: #CFCFCF; } @media screen and (max-width: 768px) { .header { padding: 0.13rem 0.25rem; } .header .logo { width: 2.57rem; } .header .header-module .menu-parent .hover-block { background-color: #f0f0f0; } .header .header-module .menu-parent .hover-block a { color: #666; } .body { min-width: auto !important; margin-top: 0; padding-top: 0.55rem; } .body .module-first { padding: 0.2rem 0.25rem; display: flex; flex-direction: column; } .body .module-first .bean { display: none !important; } .body .module-first .left { width: 100%; font-size: 0; } .body .module-first .left .main-pic { min-height: auto; } .body .module-first .left .small-pic { padding-top: 0; margin-top: .2rem; cursor: pointer; } .body .module-first .left .small-pic img { margin: 0; width: calc(100% / 5); box-sizing: border-box; border-right: 1px solid #fff; cursor: pointer; } .body .module-first .right { margin: 0; width: 100%; } .body .module-first .right .name { font-size: 0.32rem; } .body .module-second { width: calc(100% - 0.5rem); padding: 0.2rem 0.25rem; margin: 0; } .body .module-second .line:last-child { margin-bottom: 0.4rem; } .body .module-second .line .title { font-size: 0.32rem; } .body .module-second .line .box .summary .left-title { font-size: 0.2rem; } .body .module-list .header-title .title { font-size: 0.3rem; line-height: 0.36rem; margin-bottom: 0; } .body .module-list .header-title span { margin-top: 0.15rem; } .body .module-list .pro-list { display: flex; flex-direction: column; text-align: center; width: 100%; box-sizing: border-box; margin: 0; } .body .module-list .pro-list .item { width: 100%; box-sizing: border-box; border: none; margin-bottom: 0.3rem; height: auto; padding-top: 0; padding-bottom: 0; } .body .module-list .pro-list .item img { width: 100%; } .body .module-list .pro-list .item .title-bar { padding-right: 0; padding-left: 0; margin-top: 0.25rem; line-height: inherit; } .body .module-list .pro-list .item .txt { padding-right: 0; padding-left: 0; margin-top: 0.18rem; } .next-product { display: none; } }