/*搜索 主要 就能找到改颜色的地方*/ :root { --spacing: 20px; --spacing-0: 0px; --spacing-0-5: calc(var(--spacing)*0.5); --spacing-0-7: calc(var(--spacing)*0.7); --spacing-1: var(--spacing); --spacing-1-2: calc(var(--spacing)*1.2); --spacing-1-5: calc(var(--spacing)*1.5); --spacing-1-75: calc(var(--spacing)*1.75); --spacing-1-9: calc(var(--spacing)*1.9); --spacing-2: calc(var(--spacing)*2); --spacing-2-25: calc(var(--spacing)*2.25); --spacing-2-5: calc(var(--spacing)*2.5); --spacing-2-75: calc(var(--spacing)*2.75); --spacing-3: calc(var(--spacing)*3); --spacing-3-25: calc(var(--spacing)*3.25); --spacing-3-5: calc(var(--spacing)*3.5); --spacing-3-75: calc(var(--spacing)*3.75); --spacing-4: calc(var(--spacing)*4); --spacing-4-5: calc(var(--spacing)*4.5); --spacing-5: calc(var(--spacing)*5); --spacing-5-5: calc(var(--spacing)*5.5); --spacing-5-75: calc(var(--spacing)*5.75); --spacing-6: calc(var(--spacing)*6); --spacing-6-2: calc(var(--spacing)*6.2); --spacing-6-5: calc(var(--spacing)*6.5); --spacing-6-75: calc(var(--spacing)*6.75); --spacing-7: calc(var(--spacing)*7); --spacing-7-5: calc(var(--spacing)*7.5); --spacing-8: calc(var(--spacing)*8); --spacing-8-5: calc(var(--spacing)*8.5); --spacing-9: calc(var(--spacing)*9); --spacing-9-5: calc(var(--spacing)*9.5); --spacing-10: calc(var(--spacing)*10); --spacing-10-5: calc(var(--spacing)*10.5); --spacing-11: calc(var(--spacing)*11); --spacing-12: calc(var(--spacing)*12); --spacing-12-5: calc(var(--spacing)*12.5); --spacing-13: calc(var(--spacing)*13); --spacing-14: calc(var(--spacing)*14); --spacing-14-25: calc(var(--spacing)*14.25); --spacing-15: calc(var(--spacing)*15); --spacing-16: calc(var(--spacing)*16); --spacing-18: calc(var(--spacing)*18); --spacing-19: calc(var(--spacing)*19); --spacing-20: calc(var(--spacing)*20); --col: calc(25vw - var(--spacing-3)/4) } @media (min-aspect-ratio: 13/9),only screen and (min-width:568px) { :root { --col:calc(16.66667vw - var(--spacing-5)/6) } } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { :root { --spacing:40px; --col: calc(10vw - var(--spacing-3)/10) } } @media only screen and (min-width: 980px) { :root { --spacing:40px; --col: calc(10vw - var(--spacing-4)/10) } } @media screen and (min-width: 980px) and (max-width:1200px) { :root { --spacing:calc(40px + 10*(100vw - 980px)/220) } } @media screen and (min-width: 1200px) and (max-width:1440px) { :root { --spacing:calc(50px + 10*(100vw - 1200px)/240) } } @media screen and (min-width: 1440px) and (max-width:1920px) { :root { --spacing:calc(60px + 20*(100vw - 1440px)/480) } } @media only screen and (min-width: 1920px) and (min-height:600px) { :root { --spacing:80px; --col: 160px } } .animation--deco-in,.animation--deco-in>.deco-title__text,.animation--deco-in>img,.animation--deco-in>picture,.animation--fade-in,.animation--fade-in-slow,.animation--fade-out,.animation--fade-out-slow,.animation--height,.animation--popover-bottom-in,.animation--popover-bottom-in .popover__content,.animation--popover-bottom-in .popover__image,.animation--popover-bottom-in .popover__shadow,.animation--popover-bottom-in:before,.animation--popover-bottom-out,.animation--popover-bottom-out .popover__content,.animation--popover-bottom-out .popover__image,.animation--popover-bottom-out .popover__shadow,.animation--popover-bottom-out:before,.animation--popover-in,.animation--popover-in .popover__content,.animation--popover-in .popover__image,.animation--popover-in .popover__shadow,.animation--popover-in:before,.animation--popover-out,.animation--popover-out .popover__content,.animation--popover-out .popover__image,.animation--popover-out .popover__shadow,.animation--popover-out:before,.animation--popover-slide-in,.animation--popover-slide-out,.animation--step-in,.animation--step-out,.btn,.btn--marker .btn__content .icon,.btn--marker .btn__content span,.btn.btn--accent-static .icon,.btn.btn--accent-text .icon,.btn.btn--accent .icon,.btn.btn--decor svg circle,.btn.icon,.btn .icon.icon-dropdown,.btn:after,.btn:before,.card--header .card__content--light,.favourite .icon.icon-favourite,.favourite .icon.icon-favourite-full,.header,.header--sticky+.header__scroll,.header--sticky+.header__scroll .row,.header__popover.popover--triangle .card--header.card--hover:before,.icon,.link-hover .char,.logo .logo-hover,.video-embed__button,.video-embed__mute,.video-embed__pause,.video-embed__play,.video-embed__progress-bar__hover:after,.video-embed__progress-bar__inner,a,button,input[type=submit] { transition-duration: .4s; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .animation--card-in.card--hover.is-active .card__hover,.animation--card-in.card--hover.is-active .card__hover:before,.animation--card-in .card__animation,.animation--card-in .card__background,.animation--card-in .card__background:before,.animation--card-in .card__background__image,.animation--card-in .card__content,.btn--outline.animation--button-in.is-active>svg rect:last-child,.btn--outline.animation--button-in>svg rect:first-child,.btn--outline.animation--button-text-in.is-active>svg rect:last-child,.btn--outline.animation--button-text-in>svg rect:first-child,.btn--outline>svg rect,.card__background,.card__background:before,.card__background__image,.card__hover,.card__hover-image,.card__hover:before,.card__hover__content,.page-top__title { transition-duration: 1.3s; transition-timing-function: cubic-bezier(.74,0,.24,.99) } .overlay { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .btn--extended-area:after,.link--extended-area:after { display: block; position: absolute; top: -15px; right: -15px; bottom: -15px; left: -15px } .btn-container { cursor: pointer; outline: none } .btn-container.is-disabled,.btn-container:disabled { cursor: default } .btn.icon { display: inline-flex; transition-property: all } .btn .icon.icon-dropdown { transition-property: transform } .btn.is-active .icon.icon-dropdown { transform: rotate(180deg); transform-origin: 50% 45% } .btn--extended-area,.link--extended-area { position: relative } .btn--extended-area:after,.link--extended-area:after { content: "" } .btn--full { width: 100% } .btn.btn--link.btn--full>.btn__content { justify-content: space-between } .btn--fill { flex-grow: 1 } .btn { will-change: transform } .btn:after,.btn:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition-property: transform,background-color,border-color,box-shadow } .btn:before { z-index: 1 } .btn:after { pointer-events: none } .btn { overflow: hidden } .btn:before { transform: translateY(101%) } .has-hover .btn-container:active:hover .btn:before,.has-hover .btn-container:hover .btn:before,.has-hover .btn:active:hover:before,.has-hover .btn:hover:before { transform: translateY(0) } .btn--square { will-change: transform; overflow: visible } .btn--square:before { transform: scale(0) } .has-hover .btn--square:active:hover:before,.has-hover .btn--square:hover:before,.has-hover .btn-container:active:hover .btn--square:before,.has-hover .btn-container:hover .btn--square:before { transform: scale(1.03333) } .btn--square.btn--rect { overflow: hidden } .btn--square.btn--rect:before { transform: translateY(101%) } .has-hover .btn--square.btn--rect:active:hover:before,.has-hover .btn--square.btn--rect:hover:before,.has-hover .btn-container:active:hover .btn--square.btn--rect:before,.has-hover .btn-container:hover .btn--square.btn--rect:before { transform: translateY(0) } .btn--outline:after,.btn--outline:before { display: none } .btn--outline>svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transform: translateX(.25px) } .btn--outline>svg rect { fill: none; stroke-width: 1.25; width: calc(100% - 2px); height: calc(100% - 1px); stroke-dasharray: 321%; stroke-dashoffset: 642%; transition-property: stroke-dashoffset,transform; transform-origin: 50% 50%; will-change: stroke-dashoffset,transform } .btn--outline>svg rect+rect { stroke-dashoffset: 321% } .btn--outline.btn--square>svg rect { width: calc(100% - 2px); height: calc(100% - 2px); transform: rotate(-90deg) } .has-hover:hover .btn--outline>svg rect, .has-hover:hover .btn-container .btn--outline>svg rect { stroke-dashoffset: 321% } .has-hover:hover .btn--outline>svg rect+rect, .has-hover:hover .btn-container .btn--outline>svg rect+rect { stroke-dashoffset: 0% } .has-hover:hover .btn--outline.btn--square>svg rect, .has-hover:hover .btn-container .btn--outline.btn--square>svg rect { transform: rotate(0deg) } .has-hover .btn--outline:active:hover>svg rect,.has-hover .btn-container:active:hover .btn--outline>svg rect { stroke-dashoffset: 321% } .has-hover .btn--outline:active:hover>svg rect+rect,.has-hover .btn-container:active:hover .btn--outline>svg rect+rect { stroke-dashoffset: 0% } .has-hover .btn--outline:active:hover.btn--square>svg rect,.has-hover .btn-container:active:hover .btn--outline.btn--square>svg rect { transform: rotate(0deg) } .btn--outline.is-active>svg rect,.btn-container.is-active .btn--outline>svg rect { stroke-dashoffset: 321% } .btn--outline.is-active>svg rect+rect,.btn-container.is-active .btn--outline>svg rect+rect { stroke-dashoffset: 0% } .btn--outline.is-active.btn--square>svg rect,.btn-container.is-active .btn--outline.btn--square>svg rect { transform: rotate(0deg) } .has-hover .btn--outline--static:hover>svg rect,.has-hover .btn-container:hover .btn--outline--static>svg rect { stroke-dashoffset: 642% } .has-hover .btn--outline--static:hover>svg rect+rect,.has-hover .btn-container:hover .btn--outline--static>svg rect+rect { stroke-dashoffset: 321% } .has-hover .btn--outline--static:hover.btn--square>svg rect,.has-hover .btn-container:hover .btn--outline--static.btn--square>svg rect { transform: rotate(-90deg) } .has-hover .btn--outline--static:active:hover>svg rect,.has-hover .btn-container:active:hover .btn--outline--static>svg rect { stroke-dashoffset: 642% } .has-hover .btn--outline--static:active:hover>svg rect+rect,.has-hover .btn-container:active:hover .btn--outline--static>svg rect+rect { stroke-dashoffset: 321% } .has-hover .btn--outline--static:active:hover.btn--square>svg rect,.has-hover .btn-container:active:hover .btn--outline--static.btn--square>svg rect { transform: rotate(-90deg) } .btn--outline--static.is-active>svg rect,.btn-container.is-active .btn--outline--static>svg rect { stroke-dashoffset: 321% } .btn--outline--static.is-active>svg rect+rect,.btn-container.is-active .btn--outline--static>svg rect+rect { stroke-dashoffset: 0% } .btn--outline--static.is-active.btn--square>svg rect,.btn-container.is-active .btn--outline--static.btn--square>svg rect { transform: rotate(0deg) } .has-hover .btn--outline--static.is-active:hover>svg rect,.has-hover .btn-container.is-active:hover .btn--outline--static>svg rect { stroke-dashoffset: 321% } .has-hover .btn--outline--static.is-active:hover>svg rect+rect,.has-hover .btn-container.is-active:hover .btn--outline--static>svg rect+rect { stroke-dashoffset: 0% } .has-hover .btn--outline--static.is-active:hover.btn--square>svg rect,.has-hover .btn-container.is-active:hover .btn--outline--static.btn--square>svg rect { transform: rotate(0deg) } .btn--outline:after,.btn--outline:before,.btn--outline _:-ms-lang(x):after,.btn--outline _:-ms-lang(x):before { display: block; border: 1px solid; border-radius: 100px; transform: none; -ms-transition-property: opacity; transition-property: opacity } .btn--outline:before,.btn--outline _:-ms-lang(x):before { opacity: 0 } .btn--outline>svg,.btn--outline _:-ms-lang(x)>svg { display: none } .btn--outline>svg.btn__progress,.btn--outline _:-ms-lang(x)>svg.btn__progress { display: block } .has-hover .btn--outline:hover:before,.has-hover .btn--outline _:-ms-lang(x):hover:before,.has-hover .btn-container:hover .btn--outline:before,.has-hover .btn-container:hover .btn--outline _:-ms-lang(x):before { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .has-hover .btn--outline:hover:after,.has-hover .btn--outline _:-ms-lang(x):hover:after,.has-hover .btn-container:hover .btn--outline:after,.has-hover .btn-container:hover .btn--outline _:-ms-lang(x):after { opacity: 0; transform: none; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .has-hover .btn--outline:active:hover:before,.has-hover .btn--outline _:-ms-lang(x):active:hover:before,.has-hover .btn-container:active:hover .btn--outline:before,.has-hover .btn-container:active:hover .btn--outline _:-ms-lang(x):before { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .has-hover .btn--outline:active:hover:after,.has-hover .btn--outline _:-ms-lang(x):active:hover:after,.has-hover .btn-container:active:hover .btn--outline:after,.has-hover .btn-container:active:hover .btn--outline _:-ms-lang(x):after { opacity: 0; transform: none; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .btn--outline.is-active:before,.btn--outline _:-ms-lang(x).is-active:before,.btn-container.is-active .btn--outline:before,.btn-container.is-active .btn--outline _:-ms-lang(x):before { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .btn--outline.is-active:after,.btn--outline _:-ms-lang(x).is-active:after,.btn-container.is-active .btn--outline:after,.btn-container.is-active .btn--outline _:-ms-lang(x):after { opacity: 0; transform: none; transition-timing-function: cubic-bezier(.25,.74,.22,.99) } .btn--marker .btn__content .icon,.btn--marker .btn__content span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition-property: opacity } .btn--marker .btn__content span { opacity: 1; visibility: visible } @media only screen and (min-width: 1200px) and (min-height:500px) { .btn--marker .btn__content span { font-size:1.6rem; line-height: 1.5625em; letter-spacing: .1em } } .btn--marker .btn__content .icon { opacity: 0; visibility: hidden } @media only screen and (min-width: 1200px) and (min-height:500px) { .btn--marker.btn--xxs-static .btn__content span { font-size:1.2rem; line-height: 1.66667em; letter-spacing: .1em } } .btn--marker { transition-duration: .2s } .btn--marker.is-active .btn__content span,.btn--marker:hover:active .btn__content span,.has-hover .btn--marker:hover .btn__content span { opacity: 0; visibility: hidden } .btn--marker.is-active .btn__content .icon,.btn--marker:hover:active .btn__content .icon,.has-hover .btn--marker:hover .btn__content .icon,.has-hover .plan--map .btn--marker:hover .btn__content span,.plan--map .btn--marker.is-active .btn__content span,.plan--map .btn--marker:hover:active .btn__content span { opacity: 1; visibility: visible } .has-hover .plan--map .btn--marker:hover .btn__content .icon,.plan--map .btn--marker.is-active .btn__content .icon,.plan--map .btn--marker:hover:active .btn__content .icon { opacity: 0; visibility: hidden } .btn { height: var(--spacing); padding: 0 calc(var(--spacing)*50/60); font-size: 1rem } .btn,.btn.btn--square:before,.btn:after { border-radius: calc(var(--spacing)/2) } .btn.btn--outline>svg rect { rx: calc(var(--spacing)/2); ry: calc(var(--spacing)/2) } .btn>.btn__content { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: var(--spacing) } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn { font-size:1.2rem } } .btn.btn--square { width: var(--spacing); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn.btn--square { padding-left:0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--filter-number { height: 6rem; font-size: 1.6rem } .btn--filter-number,.btn--filter-number.btn--square:before,.btn--filter-number:after { border-radius: 3rem } .btn--filter-number.btn--outline>svg rect { rx: 3rem; ry: 3rem } .btn--filter-number>.btn__content { height: 6rem } @media only screen and (min-width: 980px) { .btn--filter-number { height:var(--spacing-1-5); font-size: 2.1rem; font-weight: 300 } .btn--filter-number,.btn--filter-number.btn--square:before,.btn--filter-number:after { border-radius: calc(var(--spacing-1-5)/2) } .btn--filter-number.btn--outline>svg rect { rx: calc(var(--spacing-1-5)/2); ry: calc(var(--spacing-1-5)/2) } .btn--filter-number>.btn__content { height: var(--spacing-1-5) } } .btn--filter-number.btn--square { width: 6rem; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 980px) { .btn--filter-number.btn--square { width:var(--spacing-1-5); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--small-static { height: 32px; font-size: 1.2rem } .btn--small-static,.btn--small-static.btn--square:before,.btn--small-static:after { border-radius: 16px } .btn--small-static.btn--outline>svg rect { rx: 16px; ry: 16px } .btn--small-static>.btn__content { height: 32px } .btn--small-static.btn--square { width: 32px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } .btn--tiny-static { height: 18px; font-size: 1rem } .btn--tiny-static>.btn__content { height: 18px } @media only screen and (min-width: 1200px) and (min-height:500px) { .btn--tiny-static { font-size:1.2rem } } .btn--tiny-static.btn--square { width: 18px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 1200px) and (min-height:500px) { .btn--tiny-static.btn--square { padding-left:0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--icon { height: 22px } .btn--icon .icon { width: 100%; height: 100% } .btn--icon>.btn__content { height: 22px } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--icon,.btn--icon>.btn__content { height:26px } } @media only screen and (min-width: 980px) { .btn--icon,.btn--icon>.btn__content { height:32px } } .btn--icon.btn--square { width: 22px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--icon.btn--square { width:26px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 980px) { .btn--icon.btn--square { width:32px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--check.btn--square { width:var(--spacing); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--check.btn--square { width:60px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--filter-small { height: var(--spacing-1-5) } .btn--filter-small,.btn--filter-small.btn--square:before,.btn--filter-small:after { border-radius: calc(var(--spacing)/1.25) } .btn--filter-small.btn--outline>svg rect { rx: calc(var(--spacing)/1.25); ry: calc(var(--spacing)/1.25) } .btn--filter-small>.btn__content { height: var(--spacing-1-5) } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--filter-small { height:26px } .btn--filter-small,.btn--filter-small.btn--square:before,.btn--filter-small:after { border-radius: 13px } .btn--filter-small.btn--outline>svg rect { rx: 13px; ry: 13px } .btn--filter-small>.btn__content { height: 26px } } @media only screen and (min-width: 980px) { .btn--filter-small { height:32px } .btn--filter-small,.btn--filter-small.btn--square:before,.btn--filter-small:after { border-radius: 16px } .btn--filter-small.btn--outline>svg rect { rx: 16px; ry: 16px } .btn--filter-small>.btn__content { height: 32px } } .btn--filter-small.btn--square { width: var(--spacing-1-5); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--filter-small.btn--square { width:26px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 980px) { .btn--filter-small.btn--square { width:32px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--sm-more { height: var(--spacing-2); font-size: 1rem; padding: 0 var(--spacing-1) } .btn--sm-more,.btn--sm-more.btn--square:before,.btn--sm-more:after { border-radius: var(--spacing-1) } .btn--sm-more.btn--outline>svg rect { rx: var(--spacing-1); ry: var(--spacing-1) } .btn--sm-more>.btn__content { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: var(--spacing-2) } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--sm-more { height:var(--spacing); font-size: 1.2rem; padding: 0 calc(var(--spacing)*50/60) } .btn--sm-more,.btn--sm-more.btn--square:before,.btn--sm-more:after { border-radius: calc(var(--spacing)/2) } .btn--sm-more.btn--outline>svg rect { rx: calc(var(--spacing)/2); ry: calc(var(--spacing)/2) } .btn--sm-more>.btn__content { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: var(--spacing) } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--lg.btn--square { width:120px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--close { height: var(--spacing-3) } .btn--close,.btn--close.btn--square:before,.btn--close:after { border-radius: var(--spacing-1-5) } .btn--close.btn--outline>svg rect { rx: var(--spacing-1-5); ry: var(--spacing-1-5) } .btn--close>.btn__content { height: var(--spacing-3) } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--close { height:var(--spacing-1-5) } .btn--close,.btn--close.btn--square:before,.btn--close:after { border-radius: calc(var(--spacing-1-5)/2) } .btn--close.btn--outline>svg rect { rx: calc(var(--spacing-1-5)/2); ry: calc(var(--spacing-1-5)/2) } .btn--close>.btn__content { height: var(--spacing-1-5) } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--submit { height:120px } .btn--submit,.btn--submit.btn--square:before,.btn--submit:after { border-radius: 60px } .btn--submit.btn--outline>svg rect { rx: 60px; ry: 60px } .btn--submit>.btn__content { height: 120px } } .btn--submit.btn--square { width: var(--spacing-4); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--submit.btn--square { width:var(--spacing-2); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--submit.btn--square { width:120px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--xl { height:var(--spacing-3) } .btn--xl,.btn--xl.btn--square:before,.btn--xl:after { border-radius: var(--spacing-1-5) } .btn--xl.btn--outline>svg rect { rx: var(--spacing-2); ry: var(--spacing-2) } .btn--xl>.btn__content { height: var(--spacing-3) } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--xl { height:180px } .btn--xl,.btn--xl.btn--square:before,.btn--xl:after { border-radius: 90px } .btn--xl.btn--outline>svg rect { rx: 90px; ry: 90px } .btn--xl>.btn__content { height: 180px } } .btn--xl.btn--square { width: var(--spacing-4); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--xl.btn--square { width:var(--spacing-3); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--xl.btn--square { width:180px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--xl-news { height: calc(var(--spacing)*6.5) } .btn--xl-news,.btn--xl-news.btn--square:before,.btn--xl-news:after { border-radius: calc(var(--spacing)*3.25) } .btn--xl-news.btn--outline>svg rect { rx: calc(var(--spacing)*3.25); ry: calc(var(--spacing)*3.25) } .btn--xl-news>.btn__content { height: calc(var(--spacing)*6.5) } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--xl-news { height:calc(var(--spacing)*140/40) } .btn--xl-news,.btn--xl-news.btn--square:before,.btn--xl-news:after { border-radius: calc(var(--spacing-3-5)*70/40) } .btn--xl-news.btn--outline>svg rect { rx: calc(var(--spacing-3-5)*70/40); ry: calc(var(--spacing-3-5)*70/40) } .btn--xl-news>.btn__content { height: calc(var(--spacing)*140/40) } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--xl-news { height:200px } .btn--xl-news,.btn--xl-news.btn--square:before,.btn--xl-news:after { border-radius: 100px } .btn--xl-news.btn--outline>svg rect { rx: 100px; ry: 100px } .btn--xl-news>.btn__content { height: 200px } } .btn--xl-news.btn--square { width: calc(var(--spacing)*6.5); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--xl-news.btn--square { width:calc(var(--spacing)*140/40); padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } @media only screen and (min-width: 1440px) and (min-height:600px) { .btn--xl-news.btn--square { width:200px; padding-left: 0; padding-right: 0; flex-grow: 0; flex-shrink: 0 } } .btn--xl-landing { height: var(--spacing-2) } .btn--xl-landing,.btn--xl-landing.btn--square:before,.btn--xl-landing:after { border-radius: var(--spacing) } .btn--xl-landing.btn--outline>svg rect { rx: var(--spacing); ry: var(--spacing) } .btn--xl-landing>.btn__content { height: var(--spacing-2) } @media only screen and (min-width: 568px) and (max-aspect-ratio:13/9),only screen and (min-width:666px) and (min-height:416px),only screen and (min-width:980px) { .btn--xl-landing { height:calc(var(--spacing)*60/40) } .btn--xl-landing,.btn--xl-landing.btn--square:before,.btn--xl-landing:after { border-radius: calc(var(--spacing)*30/40) } .btn--xl-landing.btn--outline>svg rect { rx: calc(var(--spacing)*30/40); ry: calc(var(--spacing)*30/40) } .btn--xl-landing>.btn__content { height: calc(var(--spacing)*60/40) } } @media only screen and (min-width: 980px) { .btn--xl-landing { height:var(--spacing-3) } .btn--xl-landing,.btn--xl-landing.btn--square:before,.btn--xl-landing:after { border-radius: var(--spacing-1-5) } .btn--xl-landing.btn--outline>svg rect { rx: var(--spacing-1-5); ry: var(--spacing-1-5) } .btn--xl-landing>.btn__content { height: var(--spacing-3) } } .btn--rect,.btn--rect.btn--square:before,.btn--rect:after { border-radius: 0 } .btn--rect.btn--outline>svg rect { rx: 0; ry: 0 } .btn--modal { height: var(--spacing-4) } .btn--modal,.btn--modal.btn--square:before,.btn--modal:after { border-radius: calc(var(--spacing-4)/2) } .btn--modal.btn--outline>svg rect { rx: calc(var(--spacing-4)/2); ry: calc(var(--spacing-4)/2) } /*主要改这个 默认颜色*/ .btn.btn--outline .btn-container.is-disabled>svg rect,.btn.btn--outline.is-disabled>svg rect,.btn.btn--outline:disabled>svg rect,.btn.btn--outline>svg rect { stroke: #e5e5e5 } /*主要改这个 鼠标移上去颜色*/ .btn.btn--outline .btn-container.is-disabled>svg rect+rect,.btn.btn--outline.is-disabled>svg rect+rect,.btn.btn--outline:disabled>svg rect+rect,.btn.btn--outline>svg rect+rect { stroke: #e60012 } .btn.btn--outline .btn-container.is-disabled:before,.btn.btn--outline.is-disabled:before,.btn.btn--outline:before,.btn.btn--outline:disabled:before { border-color: #e60012 } .btn--outline.animation--button-in,.btn--outline.animation--button-text-in { transition-duration: 1.3s; pointer-events: none } .btn--outline.animation--button-in.is-active>svg rect:last-child,.btn--outline.animation--button-in>svg rect:first-child,.btn--outline.animation--button-text-in.is-active>svg rect:last-child,.btn--outline.animation--button-text-in>svg rect:first-child { transition-property: stroke-dashoffset,transform; transform-origin: 50% 50%; will-change: stroke-dashoffset,transform } .btn--outline.animation--button-in.is-active>svg rect:first-child,.btn--outline.animation--button-text-in.is-active>svg rect:first-child { transition: none } .btn--outline.animation--button-in.is-active>svg rect:last-child,.btn--outline.animation--button-text-in.is-active>svg rect:last-child { transform: rotate(-90deg) } .btn--outline.animation--button-in .btn__content,.btn--outline.animation--button-text-in .btn__content { transition: opacity .8s cubic-bezier(.29,.73,.45,1); transition-delay: .5s } .btn--outline.animation--button-in .icon,.btn--outline.animation--button-text-in .icon { transition: transform .8s cubic-bezier(.29,.73,.45,1); transition-delay: .5s } .btn--outline.animation--button-text-in { transition-duration: 1.6s } .btn--outline.animation--button-text-in .btn__content,.btn--outline.animation--button-text-in .icon { transition-delay: .8s } .btn--outline.animation--button-text-in .btn__content { transition-property: opacity,transform; will-change: opacity,transform } .btn--outline.animation--button-in--inactive>svg rect:first-child,.btn--outline.animation--button-text-in--inactive>svg rect:first-child { stroke-dashoffset: 963% } .btn--outline.animation--button-in--inactive.is-active>svg rect:first-child,.btn--outline.animation--button-in--inactive.is-active>svg rect:last-child,.btn--outline.animation--button-text-in--inactive.is-active>svg rect:first-child,.btn--outline.animation--button-text-in--inactive.is-active>svg rect:last-child { stroke-dashoffset: 321% } .btn--outline.animation--button-in--inactive .btn__content,.btn--outline.animation--button-text-in--inactive .btn__content { opacity: 0 } .btn--outline.animation--button-in--inactive .icon-btn-arrow-down,.btn--outline.animation--button-text-in--inactive .icon-btn-arrow-down { transform: translateY(-40px) } .btn--outline.animation--button-in--inactive .icon-btn-arrow-left,.btn--outline.animation--button-text-in--inactive .icon-btn-arrow-left { transform: translateX(40px) } .btn--outline.animation--button-in--inactive .icon-btn-arrow-right,.btn--outline.animation--button-text-in--inactive .icon-btn-arrow-right { transform: translateX(-40px) } .btn--outline.animation--button-text-in--inactive .btn__content { opacity: 0; transform: translateY(40px) } .btn--outline.animation--button-in--active.is-active>svg rect:last-child,.btn--outline.animation--button-in--active>svg rect:first-child,.btn--outline.animation--button-text-in--active.is-active>svg rect:last-child,.btn--outline.animation--button-text-in--active>svg rect:first-child { transform: rotate(90deg) } .btn--outline.animation--button-in--active.is-active>svg rect:first-child,.btn--outline.animation--button-text-in--active.is-active>svg rect:first-child { transform: rotate(0deg) }<!--耗时1734245609.5259秒-->