/*Body*/ body{ font-family: DINPro,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif; line-height: 1.5; color: #666; } img, picture { display: block; max-width: 100%; height: auto; } .ts-hover-show { display: none; } .ts-wechat--xs .ts-hover-show { position: absolute; top: 32px; left: 0; opacity: 0; width: 112px; padding: .5rem; } .ts-wechat--xs .ts-hover-show img { margin: 0 auto; } .ts-wechat--xs:hover .ts-hover-show { display: block; color: #666; -webkit-animation: fadeIn .3s ease forwards; animation: fadeIn .3s ease forwards; } .rc-max-width--xl { max-width: 1400px; } .rc-max-width--xl { max-width: 1400px; margin: 0 auto; } .rc-full-width { width: 100%; } .rc-content-block__wrapper, .rc-max-width--lg, .rc-max-width--md, .rc-max-width--sm, .rc-max-width--xl, .rc-max-width--xxl { margin-left: auto!important; margin-right: auto!important; } .rc-main { padding:0 1.25rem; box-sizing:border-box; margin:0 auto; } .ts-remove { text-decoration: line-through; } .rc-icon.ts-wechat--xs:after { width: 24px; background-image: unset; mask: url("../image/wechat.svg") no-repeat center center; -webkit-mask: url("../image/wechat.svg") no-repeat center center; background-color: #666; } .rc-icon--xs.rc-pin--xs.rc-pin--xs:after, .rc-icon.rc-pin--xs.rc-pin--xs:after { background-position: 81.82% 57.14%; } .rc-icon--xs.rc-search--xs.rc-search--xs:after, .rc-icon.rc-search--xs.rc-search--xs:after { background-position: 81.82% 85.71%; } .rc-icon--xs.rc-menu--xs.rc-menu--xs:after, .rc-icon.rc-menu--xs.rc-menu--xs:after { background-position: 72.73% 0; } .ts-product-list{ li{ img{ width: 320px; height:auto; object-fit: contain; display: flex; margin: 0 auto; } } .active{ color: #E2001A; cursor: pointer; } .unactive{ color:#999999; cursor: pointer; } } .rc-age{ display: flex; h2{ color:#333333; } ol{ display: flex; align-items: center; flex-wrap: nowrap; text-align: center; width: 86%; } li{ flex-shrink: 0; } } .rc-mubu{ height: 100%; background: #333333; opacity: 0.6; position: absolute; bottom: 0; width: 100%; z-index: 8; } .ts-scrollable{ overflow-y:hidden; overflow-x:auto; white-space: nowrap; &::-webkit-scrollbar{ display:none; } } .online{ width:100%; background:#d7d7d7; margin-top:1.5rem; height:.06rem; &.bold{ height:.32rem; background:#f6f6f6; } } /*Body end*/ /* 头部 */ header.rc-header .rc-header__nav ul { margin: 0; padding: 0; } .rc-header { width: 100%; position: fixed; top: 0; left: 0; z-index: 59; -webkit-box-shadow: 0 2px 4px #f1f1f1; box-shadow: 0 2px 4px #f1f1f1; } header.rc-header button { background-color: transparent; } .rc-header__right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .rc-header__nav { background-color: #fff; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; z-index: 59; background: #fff; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease,-webkit-transform .2s ease; } header.rc-header .rc-header__nav ul { margin: 0; padding: 0; } .rc-header__nav--primary { height: 4.167rem; } .rc-header__center { align-self: center; justify-content: center; } .rc-list, .rc-wysiwyg ol, .rc-wysiwyg ul { font-size: 1em; margin: 0; list-style-position: outside; } .rc-list--inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rc-list--inline .list__item, .rc-list--inline .rc-list__item { display: inline-block; } .rc-list__item, .rc-wysiwyg ol>li, .rc-wysiwyg ul>li { line-height: 1.5; position: relative; } .rc-list__item:last-child, .rc-wysiwyg ol>li:last-child, .rc-wysiwyg ul>li:last-child { margin-bottom: 0; } .rc-list--inline[role=menubar], .rc-list--inline[role=tablist] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .rc-list__item, .rc-wysiwyg ol>li, .rc-wysiwyg ul>li { line-height: 1.5; position: relative; } .rc-list--align { padding: 0; margin-left: 0; list-style-position: outside; } .rc-list--blank { list-style-type: none; } .rc-header__brand { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; padding: 16px; height: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; display: inline-block; } .rc-btn--icon, .rc-btn--icon--xs, .rc-input__submit--search { overflow: visible; width: auto; } .rc-btn--icon { background-color: transparent; color: #666; border-color: transparent; } [role=menubar] .rc-btn { margin-left: 0; margin-right: 8px; } header.rc-header .rc-header__nav ul { margin: 0; padding: 0; } header.rc-header .rc-header__nav a.rc-header__brand { padding: 15px 0 0; } h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-top: 0; } .rc-screen-reader-text, .screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute!important; height: 1px; width: 1px; overflow: hidden; } .rc-top{ position: relative; } .rc-icon.ts-weibo--xs:after { width: 24px; background-image: unset; mask: url("../image/weibo.svg") no-repeat center center; -webkit-mask: url("../image/weibo.svg") no-repeat center center; background-color: #666; } .rc-icon[class*="--xs"]:after { width: 24px; } .rc-icon.iconography:after, .rc-icon.rc-iconography:after { background-image: url("../image/royal-canin.sprite--iconography.svg?v=8-10-0"); } .rc-icon[class*="--xs"].iconography:after, .rc-icon[class*="--xs"].rc-iconography:after { background-image: url("../image/royal-canin.sprite--iconography--xs.svg?v=8-10-0"); width: 24px; } .rc-btn--action:after, .rc-btn--icon--xs:after, .rc-btn--icon:after, .rc-center-align, .rc-input__submit--micro:after, .rc-input__submit--search:after, .rc-modal__logo, .rc-page-header .rc-logo-wrapper { position: absolute!important; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .rc-alert .alert__close:after, .rc-alert .rc-alert__close:after, .rc-breadcrumb__list-item:after, .rc-btn--action:after, .rc-btn--icon--xs:after, .rc-btn--icon:after, .rc-btn--icon:hover:after, .rc-btn--one:after, .rc-btn--sm:not(.rc-tab):not(.tab):after, .rc-btn--two:after, .rc-checklist-row__label:after, .rc-icon.interactive:hover:after, .rc-input--error.input:after, .rc-input--error.rc-input:after, .rc-input--success.input:after, .rc-input--success.rc-input:after, .rc-input--warning.input:after, .rc-input--warning.rc-input:after, .rc-input__checkbox:checked+.input__label--inline:after, .rc-input__checkbox:checked+.rc-input__label--inline:after, .rc-input__submit--micro:after, .rc-input__submit--search:after, .rc-list__header[aria-haspopup=true]:after, .rc-navigation--next:after, .rc-navigation--prev:after, .rc-navigation--vertical__list-item>a.active:after, .rc-navigation--vertical__list-item>a.rc-active:after, .rc-navigation--vertical__list-item>a:hover:after, .rc-response--affirmative:after, .rc-response--negative:after, .rc-select .choices:after, .rc-select:not(.rc-select-processed):after, .rc-styled-link--external:after, .rc-styled-link--new-window:after { content: ""; display: inline-block; background-repeat: no-repeat; width: 32px; height: 32px; overflow: hidden; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .rc-btn, .rc-input__submit { display: inline-block; position: relative; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; line-height: inherit; font-size: inherit; text-align: center; overflow: hidden; padding: 6px 1.5rem; border: 2px solid transparent; border-radius: 999px; text-decoration: none; cursor: pointer; -webkit-transition: all .2s ease; transition: all .2s ease; font-weight: 300; font-family: RC TYPE,Roboto,Avenir,Helvetica,Arial,sans-serif; width: auto; } .rc-alert .alert__close, .rc-alert .rc-alert__close, .rc-btn--icon, .rc-btn--icon--xs, .rc-input__submit--search { border-radius: 0; padding: 0; } .rc-icon { vertical-align: middle; } .rc-btn--icon:after, .rc-icon.interactive { -webkit-transition: background-image .2s ease; transition: background-image .2s ease; } .rc-btn--icon-label, .rc-btn--icon-tab { border-radius: 0; overflow: visible; text-align: left; padding-left: 40px; padding-right: 24px; } .rc-btn--icon-label:after, .rc-btn--icon-tab:after { position: absolute!important; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .rc-btn--icon-label:after, .rc-btn--icon-tab:after { left: 24px; } .rc-icon:after { content: ""; display: inline-block; background-repeat: no-repeat; width: 32px; height: 32px; overflow: hidden; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: relative; } .rc-list__header { display: block; position: relative; padding: 1rem .5rem; width: 100%; border-radius: 0; text-align: left; background-color: #fff; font-weight: 500; text-transform: uppercase; } .rc-list__header, .rc-list__header--content, .rc-list__link--content, .rc-styled-link, .rc-styled-link--cta, .rc-styled-link--external, .rc-styled-link--new-window, .rc-wysiwyg a { background-color: transparent; border: none; user-select: none; text-decoration: none; cursor: pointer; } .rc-list__header, .rc-list__header--content, .rc-list__link, .rc-list__link--content, .rc-styled-link, .rc-styled-link--cta, .rc-styled-link--external, .rc-styled-link--new-window, .rc-wysiwyg a { color: #444; position: relative; -webkit-transition: color .2s ease-in,border-color .2s ease-in; transition: color .2s ease-in,border-color .2s ease-in; } .rc-header__nav--secondary .rc-list__header { color: #444; } header.rc-header .rc-header__nav a.rc-list__header { text-decoration: none; } .rc-header__nav--secondary { position: relative; z-index: 58; overflow-y: hidden; height: 2.5rem; max-height: 2.5rem; -webkit-box-shadow: 0 2px 4px #f1f1f1; box-shadow: 0 2px 4px #f1f1f1; } .rc-container { height: 100%; max-width: 1400px; background-color: #fff; margin: auto; } .layout-container, .rc-layout-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 100%; flex-basis: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; z-index: 1; margin-left: auto; margin-right: auto; } .rc-margin--none { margin: 0!important; } header .rc-header__nav--secondary .rc-container .submenu { position: fixed; top: 120px; left: 0; display: flex; background-color: #fff; overflow: hidden; height: 0; width: 100%; box-shadow: 0px 2px 12px #ddd; opacity: .7; -webkit-transition: height .2s ease,opacity .2s ease; transition: height .2s ease,opacity .2s ease; } header .rc-header__nav--secondary .rc-container:hover .submenu { height: 28rem; opacity: 1; border-top: 2px solid #e2001a; } .rc-list__item.list__item--group, .rc-list__item.rc-list__item--group { break-inside: avoid; page-break-inside: avoid; } header .rc-header__nav--secondary .submenu .ts-head-img { width: 14.6vw; height: 6.3vw; object-fit: cover; box-shadow: 0px 2px 4px rgba(0,0,0,.08); } header .rc-header__nav--secondary .submenu .rc-list__header { font-weight: bold; } header.rc-header .rc-header__nav a.rc-list__header { text-decoration: none; } header.rc-header .rc-header__nav ul { margin: 0; padding: 0; } .rc-list__item, .rc-wysiwyg ol>li, .rc-wysiwyg ul>li { line-height: 1.5; position: relative; } .rc-list__link { display: block; text-align: left; font-weight: 300; width: 100%; background-color: transparent; user-select: none; text-decoration: none; cursor: pointer; padding: .25rem 0; border-bottom: none; } .rc-fixright{ width: 3.75rem; height: auto; position: fixed; right: 0; top: 30%; ul{ width: 60px; height: 181px; box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); background-color: white; display: flex; flex-direction: column; li{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0.18rem; } li:last-child{ margin-bottom: 0.2rem; } } img{ width: 1.875rem; height: auto; display: block; } span{ font-size: 0.12rem; color: #666666; } .tuntop{ width: 100%; height: 60px; background: #FFFFFF; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); opacity: 1; display: block; color: #666666; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 8px; img{ width: 0.22rem; height: 0.22rem; display: block; } } } /* 手机端 */ @media screen and (max-width: 768px) { html { font-size:100px; } .rc-md-up { display: none!important; } .rc-main{ width:100%; } .rc-top{ margin-top: 74px; } .rc-list__header { background: none; padding: .5rem 0; border-bottom: none; } .rc-home-header{ width: 100%; .rc-main { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; height: 70px; background-color: #fff; .rc-center{ display: none; } } .c-left img{ width: 19px; height: 14px; display: block; } .c-right img{ width: 97px; height: 35px; display: block; } .rc-search img{ width: 19px; height: 19px; display: block; } &.fixed{ position:fixed; top: 0; left: 0; z-index:3; } } .rc-age{ h2{ font-size: 16px; margin-right:.1rem; } ol{ font-size: 12px; } li{ width: .64rem; height: 26px; line-height: 26px; border-radius: 100px; margin-left: 9px; } } .ts-scrollable{ .active{ border: 2px solid #E2001A; } .unactive{ border: 2px solid #d7d7d7; } } } /* pc端 */ @media screen and (min-width: 769px) { html { font-size:16px; } .rc-top{ margin-top: 124px; } .ts-list--four-column { -webkit-column-count: 4; column-count: 4; } .rc-list__header{ background: none; padding: .5rem 0; border-bottom: none; } .rc-padding--sm { padding: 2rem; } .rc-margin-bottom--xs { margin-bottom: .5rem; } .rc-header { -webkit-box-shadow: none; box-shadow: none; } .rc-header__logo { width: 120px; } .rc-header__nav--primary { height: 80px; } .rc-list--inline .list__item, .rc-list--inline .rc-list__item { margin-right: 32px; } .rc-btn--action, .rc-btn--icon, .rc-btn--icon--xs, .rc-input__submit--micro, .rc-input__submit--search { min-width: 48px; height: 48px; } .rc-md-down { display: none!important; } .ts-list--four-column, .ts-list--four-column .list, .ts-list--four-column .rc-list { page-break-inside: avoid; break-inside: avoid; } .rc-main { width:100%; max-width:1400px; } .rc-list--inline:not([role=tablist]):not([role=menubar]) { -ms-flex-wrap: wrap; flex-wrap: wrap; } .layout-container, .rc-layout-container { margin-left: -1rem; margin-right: -1rem; } .rc-fixright{ width:5.5rem; background: #FFFFFF; box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16); border-radius: .25rem; display: flex; flex-direction: column; align-items: center; ul{ width:100%; height: 100%; li{ margin-top: .5rem; height:4.125rem; img{ width:22px; height:auto; } } } } .rc-home-header{ height:120px ; .rc-main { width: 100%; margin: 0 auto; // position: fixed; top: 0; background: white; display: flex; justify-content: space-between; align-items: center; flex-direction: column; height: 120px; ul { display: flex; align-items: center; margin-bottom: 20px; li { margin-right: 25px; color: #666666; cursor: pointer; font-size: 16px; } } } .c-left{ display: none; } .rc-search{ display: none; } .c-left img { width: 19px; height: 14px; display: block; } .c-right img{ width: 120px; height: 45px; display: block; } } .ts-scrollable{ .rc-age{ h2 { font-size: 20px; color: #333333; } li { margin-left: 40px; width: 100px; height: 40px; line-height: 40px; font-size: 18px; } } } } @media (max-width: 960px) { .rc-lg-up { display: none!important; } } @media (min-width: 1024px) { .rc-xl-down { display: none!important; } }