:root{
	--primary: #6b431e;
  --primary-active: hsla(29,56%,27%,0.6);
	--light-primary: #965e29;
	--light-primary-active: hsla(29,57%,37%,0.6);
  --red: #97040c;
  --red-active: hsla(356.73,94.84%,30.39%,0.6);

  --page-bg: #f9f5f1;


	--white: #fff;
	--white-active: hsla(0,0%,100%,0.6);
	--white-0: rgba(255,255,255,0);
	--c0: hsla(0,0%,0%,1);
	--c0-active: hsla(0,0%,0%,0.6);
	--c3: hsla(0,0%,20%,1);
	--c3-active: hsla(0,0%,20%,0.6);
	--c6: hsla(0,0%,40%,1);
	--c6-active: hsla(0,0%,40%,0.6);
	--c8: hsla(0,0%,53%,1);
	--c8-active: hsla(0,0%,53%,0.6);
	--c9: hsla(0,0%,60%,1);
	--c9-active: hsla(0,0%,60%,0.6);
	--bg-active: rgba(0,0,0,0.05);
	--bd: 0.02rem solid #eee;
	--p: 0 0.24rem;
}

*{margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);}
html{font-size: 13.33333vmin; font-family: "Helvetica Neue", Helvetica, STHeiTi, "Microsoft YaHei", Arial, sans-serif;
}
/* @media screen and (min-width: 540px) {html{font-size: 72px}} */
/* 40px/7.5px => 5.33333vw => 17.28 => 0.6em */
body{margin: 0 auto; min-width:320px; line-height: 1.5; font-size: 0.24em; color:#666; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%!important; -ms-text-size-adjust: 100%!important; text-size-adjust: 100%!important;
}
html, body{scroll-behavior: smooth;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display: block;}
audio, canvas, progress, video{display: inline-block; vertical-align: baseline;}
audio:not([controls]){display: none; height: 0;}
[hidden], template{display: none;}
svg:not(:root){overflow: hidden;}
mark{background: #ff0; color: #000;}
small{font-size: 80%;}
sub, sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup{top: -0.5em;}
sub{bottom: -0.25em;}

table{border-collapse:collapse;}
ul{ list-style:none;}
img{border: 0; max-width: 100%;}
a img{vertical-align: bottom;}
a{text-decoration: none; color: currentColor; background-color: transparent; -webkit-tap-highlight-color: transparent;}
a:visited{color: currentColor;}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0; text-decoration:none;}
h1,h2,h3,h4,h5{font-weight: normal; font-size: 1.2em;}
[v-cloak]{display: none;}

::-webkit-scrollbar{display: none;}

.fl{float: left}
.fr{float: right}
.al{text-align: left;}
.ac{text-align: center;}
.ar{text-align: right;}
.hide{display: none}
.overhide{overflow: hidden;}

.clear, .clr{display: block; clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden;}
.clearfix2::before,.clearfix2::after{content:""; display: table;}
.clearfix2::after{clear: both;}
.clearfix2, .clearfix{*zoom:1;}
.clearfix:after{display: block; content: ""; clear: both; height: 0; visibility: hidden;}


.whbg{background-color: #fff;}

.mask{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.5); opacity: 0; visibility: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}

.block-img{display: block; width: 100%;}
.pos-r-cover--image,
.pos-a-cover--image{display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.pos-r-cover--image{position: relative;}
.pos-a-cover--image{position: absolute; top: 0; left: 0;}
.text-hide{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hide-el{position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0;}
.nodata{display: block; text-align: center; padding: 0 0.24rem; font-size: 0.13rem; color: #ccc;}

.wbox, .wpbox{margin-bottom: 0.16rem; background-color: #fff; overflow: hidden;}
.wpbox{padding: 0 0.24rem;}

.d-flex, .wb, .flex-row{display: -webkit-box; display: flex;}
.wbc{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;}
.align-center{-webkit-box-align: center; align-items: center;}
.flex-1, .wbw, .flex-main{-webkit-box-flex: 1; flex: 1; min-width: 0;}
.wbw, .flex-main{display: block;}
.flex-side{margin-left: 0.2rem; position: relative; display: block; -webkit-box-flex: 1; flex: 1; min-width: 0; text-align: right;}
.self-top{-webkit-align-self: flex-start; align-self: flex-start;}
.self-center{-webkit-align-self: center; align-self: center;}
.self-end{-webkit-align-self: flex-end; align-self: flex-end;}


ins, .ins{text-decoration: none;}
ins + del{margin-left: 0.1rem;}


::-webkit-input-placeholder{color: #bbb;}
:focus::-webkit-input-placeholder{color: #999;}
::-moz-placeholder{color: #bbb;}
:-ms-input-placeholder{color: #bbb;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none!important; margin: 0;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}
input[type="number"]{appearance: none; -moz-appearance: none; -webkit-appearance: none;}



/*距离*/
.mt0, .my0, .m0{margin-top: 0!important;}.m0,.mb0,.my0{margin-bottom:0!important}.m0,.mx0,.ml0{margin-left:0!important}.m0,.mx0,.mr0{margin-right:0!important}.m10,.mt10,.my10{margin-top:0.1rem!important}.m10,.mb10,.my10{margin-bottom:0.1rem!important}.m10,.mx10,.ml10{margin-left:0.1rem!important}.m10,.mx10,.mr10{margin-right:0.1rem!important}.m20,.mt20,.my20{margin-top:0.2rem!important}.m20,.mb20,.my20{margin-bottom:0.2rem!important}.m20,.mx20,.ml20{margin-left:0.2rem!important}.m20,.mx20,.mr20{margin-right:0.2rem!important}.m30,.mt30,.my30{margin-top:0.3rem!important}.m30,.mb30,.my30{margin-bottom:0.3rem!important}.m30,.mx30,.ml30{margin-left:0.3rem!important}.m30,.mx30,.mr30{margin-right:0.3rem!important}.m40,.mt40,.my40{margin-top:0.4rem!important}.m40,.mb40,.my40{margin-bottom:0.4rem!important}.m40,.mx40,.ml40{margin-left:0.4rem!important}.m40,.mx40,.mr40{margin-right:0.4rem!important}.p0,.pt0,.py0{padding-top:0!important}.p0,.pb0,.py0{padding-bottom:0!important}.p0,.px0,.pl0{padding-left:0!important}.p0,.px0,.pr0{padding-right:0!important}.p10,.pt10,.py10{padding-top:0.1rem!important}.p10,.pb10,.py10{padding-bottom:0.1rem!important}.p10,.px10,.pl10{padding-left:0.1rem!important}.p10,.px10,.pr10{padding-right:0.1rem!important}.p20,.pt20,.py20{padding-top:0.2rem!important}.p20,.pb20,.py20{padding-bottom:0.2rem!important}.p20,.px20,.pl20{padding-left:0.2rem!important}.p20,.px20,.pr20{padding-right:0.2rem!important}.p30,.pt30,.py30{padding-top:0.3rem!important}.p30,.pb30,.py30{padding-bottom:0.3rem!important}.p30,.px30,.pl30{padding-left:0.3rem!important}.p30,.px30,.pr30{padding-right:0.3rem!important}.p40,.pt40,.py40{padding-top:0.4rem!important}.p40,.pb40,.py40{padding-bottom:0.4rem!important}.p40,.px40,.pl40{padding-left:0.4rem!important}.p40,.px40,.pr40{padding-right:0.4rem!important}.m25,.mt25,.my25{margin-top:0.25rem!important}.m25,.mb25,.my25{margin-bottom:0.25rem!important}.m25,.mx25,.ml25{margin-left:0.25rem!important}.m25,.mx25,.mr25{margin-right:0.25rem!important}.p25,.pt25,.py25{padding-top:0.25rem!important}.p25,.pb25,.py25{padding-bottom:0.25rem!important}.p25,.px25,.pl25{padding-left:0.25rem!important}.p25,.px25,.pr25{padding-right:0.25rem!important}

/*-------------------------结束公用样式--------------------------*/
body{background-color: var(--page-bg);}


.back-caret,
.link-caret,
.select-caret{position: relative; display: inline-block; width: 0.75em; height: 1em; font-size: 0.4rem; color: var(--c3); vertical-align: top; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.select-caret::before{position: absolute; top: 50%; left: 50%; display: block; content: "";  -webkit-box-sizing: border-box; box-sizing: border-box; border-style: solid; border-color: currentColor;}
.select-caret:not(.solid)::before{margin: -0.24em 0 0 -0.18em; width: 0.32em; height: 0.32em; border-width: 0.04rem 0.04rem 0 0; -webkit-transform: rotate(135deg) skew(5deg); transform: rotate(135deg) skew(5deg);}
.solid.select-caret::before{margin: -0.1em 0 0 -0.2em; width: 0.4em; height: 0.4em; border: 0.2em solid rgba(0,0,0,0); border-top-color: currentColor;}
.white.select-caret:not(.solid)::before{border-color: var(--white);}
.solid.white.select-caret::before{border-top-color: var(--white);}
.solid.blue.select-caret::before{border-top-color: var(--blue);}
.solid.c6.select-caret::before{border-top-color: var(--c6);}

.sm.link-caret::before{position: absolute; top: 50%; left: 50%; margin: -0.16em 0 0 -0.16em;  border-width: 0.02rem 0.02rem 0 0; display: block; content: ""; width: 0.32em; height: 0.32em; -webkit-box-sizing: border-box; box-sizing: border-box; border-style: solid; border-color: currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.red.link-caret{color: var(--red);}

.back-caret::before,
.back-caret::after,
.link-caret:not(.sm)::before,
.link-caret:not(.sm)::after{position: absolute; top: 50%; display: block; content: ""; width: 56%; height: 0.04rem; line-height: 0; background-color: currentColor; border-radius: 0.02rem; -webkit-transform-origin: 0 50%; transform-origin: 0 50%;}
.back-caret::before,
.back-caret::after{left: 20%;}
.link-caret:not(.sm)::before,
.link-caret:not(.sm)::after{left: 80%;}
.back-caret::before{margin-top: -0.025rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.back-caret::after{margin-top: -0.04rem; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.link-caret:not(.sm)::before{margin-top: -0.025rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
.link-caret:not(.sm)::after{margin-top: -0.04rem; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.md.back-caret,
.md.link-caret{font-size: 0.5rem;}


[class*="btn"]:not(.disabled):active [class*="ico"],
[class*="button"]:not(.disabled):active [class*="ico"],
[class*="btn"]:not(.disabled):active [class*="caret"],
[class*="button"]:not(.disabled):active [class*="caret"]{opacity: 0.6;}





.mico{display: inline-block; width: 1em; height: 1em; background-repeat: no-repeat; background-position-x: 0; vertical-align: -0.15em;}



.mico{margin-right: 0.1rem; font-size: var(--mico-size); background-image: var(--mico-image); background-size: var(--mico-bgsize);}
.white-coupon.mico{background-position-y: 0;}





/*--全局顶部--*/
.gn-header{
  --gn-height: 0.9rem;
  position: relative; z-index: 13; width: 100%; height: var(--gn-height); line-height: 0.4rem; font-size: 0.24rem; color: var(--c0); background-color: var(--white);
}
.transparent.gn-header{background-color: var(--white-0);}
.gn-header--main{padding-left: 20%; padding-right: 20%; position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; height: var(--gn-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gn-header--title{font-size: 0.3rem;}
.gn-header--l,
.gn-header--r{position: absolute; z-index: 3; top: 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; height: var(--gn-height);}
.gn-header--l{left: 0;}
.gn-header--r{right: 0;}
.gn-header-flex{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;}
.gn-header-flex .gn-header--main{padding-left: 0; padding-right: 0; -webkit-box-flex: 1; flex: 1; min-width: 0;}
.gn-header-flex .gn-header--main:first-child{padding-left: 0.25rem;}
.gn-header-flex .gn-header--main:last-child{padding-right: 0.25rem;}
.gn-header-flex .gn-header--l,
.gn-header-flex .gn-header--r{position: static; left: auto; right: auto; top: auto; bottom: auto;}

.gn-header--button{position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 1px 0.2rem; min-width: 0.8rem; height: var(--gn-height); font-size: 0.24rem; color: currentColor;}
.gn-header--button:active{background-color: var(--bg-active);}

.hico{display: inline-block; width: 1em; height: 1em; font-size: var(--hico-size); background-image: var(--hico-image); background-size: var(--hico-bgsize); background-repeat: no-repeat; background-position-x: 0;}
.hasdec.headbtn .hico{margin: 0 auto; display: block;}
.gn-header--button .back-caret{color: currentColor;}
.gn-header--button .back-caret::before,
.gn-header--button .back-caret::after{width: 76%;}















.common-app,
.check-app{display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; min-height: 100vh;}
.common-app{background-color: #ebcfb3; background-image: url(../images/common/page-bg/1.jpg); background-position: 50% 0; background-repeat: no-repeat; background-size: 100% auto;}
.common-app-container,
.check-app-container{-webkit-box-flex: 1; flex: 1; min-width: 0; min-height: 0;}


.radius-banner{position: relative; display: block; padding-bottom: 46.9%;}
.radius-banner--photo{position: absolute; top: -100%; left: -50%; width: 200%; height: 200%; border-radius: 50%; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); overflow: hidden;}
.radius-banner--photo-image{position: absolute; bottom: 0; left: 25%; display: block; width: 50%; height: 50%;}

.c-enter-buttons{margin: 1rem auto 0.2rem; display: block; width: 5.2rem;}
.c-enter-button{margin-top: 0.5rem; margin-bottom: 0.5rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; width: 100%; height: 1rem; line-height: 1; font-size: 0.4rem; color: var(--primary); background-color: #daaa7b; background-image: -webkit-linear-gradient(90deg, #daaa7b, #f2cea8); background-image: linear-gradient(0deg, #daaa7b, #f2cea8); border: 0.02rem solid var(--white); box-shadow: 0 0.07rem 0.1rem rgba(0,0,0,0.13); border-radius: 0.2rem; outline: 0; -webkit-appearance: none; appearance: none;}
.c-enter-button:visited{color: var(--white);}
.c-enter-button:active{box-shadow: 0 0.07rem 0.1rem rgba(0,0,0,0.2) inset, 0 0.07rem 0.2rem rgba(0,0,0,0.3); -webkit-transform: perspective(10rem) translateZ(-0.2rem); transform: perspective(10rem) translateZ(-0.2rem);}


.follow-qrcode{margin: 0.25rem; text-align: center; font-size: 0.34rem; color: var(--primary);}
.follow-qrcode--photo{margin: 0 auto 0.2rem; position: relative; display: block; width: 2.6rem; height: 2.6rem; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); overflow: hidden;}
.follow-qrcode--photo-image{position: relative; display: block; width: 100%; height: 100%;}
.follow-qrcode--title{line-height: 0.6rem; font-size: 0.44rem;}
.follow-qrcode--text{line-height: 0.4rem;}

.footer{display: block; text-align: center; padding: 0.25rem; padding-bottom: calc(0.25rem + constant(safe-area-inset-bottom)); padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)); line-height: 0.4rem; font-size: 0.24rem; color: var(--white); background-color: var(--light-primary);}
.footer-link, .footer-link:visited{color: var(--white);}
.footer-link:active{color: var(--white-active);}


.introbn{margin-top: 0.2rem; margin-bottom: 0.2rem; position: relative; text-align: center;}
.introbn-logo--image{margin-left: auto; margin-right: auto; display: block; height: 1.6rem;}
.introbn-action{position: absolute; z-index: 3; bottom: 0; right: 0; color: var(--red)}
.introbn-action--button{display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 0.3rem; line-height: 1.2; font-size: 0.24rem; color: var(--red);}
.introbn-action--button:active{color: var(--red-active);}

.s-imagebn{margin-top: 0.2rem; margin-bottom: 0.2rem; position: relative; display: block; border-radius: 0.2rem; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); overflow: hidden; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
.s-imagebn:active{box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.2); -webkit-transform: perspective(10rem) rotateX(5deg); transform: perspective(10rem) rotateX(5deg);}
.s-imagebn--image{position: relative; display: block; width: 100%;}

.show-checksamples{margin-top: 0.25rem; margin-bottom: 0.25rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.show-checksamples--item{margin-top: 0.1rem; display: block; text-align: center; padding-left: 0.1rem; padding-right: 0.1rem; width: 2.7rem;}
.show-checksamples--photo{margin: 0 auto; position: relative; display: block; width: 2.1rem; height: 2.35rem; border-radius: 0.2rem; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); overflow: hidden; box-shadow: 0 0 0.13rem rgba(4,0,0,0.17);}
.show-checksamples--name{margin-top: 0.1rem; display: block; text-align: center; height: 0.3rem; line-height: 0.3rem; font-size: 0.24rem; color: var(--c0); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.checkform-wrap{margin: 0.4rem auto; display: block; width: 6rem; max-width: 100%; text-align: center;}
.checkform--item{margin-bottom: 0.2rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;}
.checkform--group{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-flex: 1; flex: 1; min-width: 0; padding: 0.1px 0.4rem; height: 0.7rem; background-color: var(--white); border-radius: 0.35rem;}
.checkform--group-dd{-webkit-box-flex: 1; flex: 1; min-width: 0;}
.checkform--group-input{text-align: center; width: 100%; height: 0.4rem; line-height: 0.4rem; font-size: 0.3rem; color: var(--c0); background-color: var(--white-0); border: none; border-radius: 0; outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none;}
.checkform--group-input::-webkit-input-placeholder{font-size: 0.26rem;}
.checkform--group-input::-moz-placeholder{font-size: 0.26rem;}
.checkform--group-input:-ms-input-placeholder{font-size: 0.26rem;}
.checkform--action{margin-top: 0.3rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center;}


.sku-detail--list{margin-top: 0.3rem; margin-bottom: 0.3rem;}
.sku-detail--item{margin-top: 0.1rem; margin-bottom: 0.1rem; display: -webkit-box; display: flex; line-height: 1.5; font-size: 0.3rem; color: var(--c0);}
.sku-detail--item>.dt{margin-right: 5px; min-width: 5em; color: var(--c9);}
.c-result-modal--goods{margin: 0.2rem auto; position: relative; display: block; width: 2rem; height: 2rem;}
.fake.c-result-modal--goods{-webkit-filter: grayscale(100); filter: grayscale(100);}
.c-result-modal--goods-photo{position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); overflow: hidden;}
.c-result-modal--goods-text{position: absolute; z-index: 2; top: 0.04rem; right: -0.2rem; display: block; text-align: center; padding: 0.1rem 0.1px; width: 0.4rem; line-height: 0.3rem; font-size: 0.24rem; color: var(--white); font-weight: 600; background-color: var(--red); border-radius: 0.08rem;}
.fake.c-result-modal--goods .c-result-modal--goods-text{background-color: var(--c6);}
.c-result-modal--text{margin-top: 0.2rem; margin-bottom: 0.2rem; text-align: center; line-height: 1.5; font-size: 0.3rem; color: var(--red); white-space: pre-wrap;}
.c-result-modal--action{margin-top: 0.3rem; margin-bottom: 0.3rem; text-align: center;}


.artdp-body{padding-left: 0.2rem; padding-right: 0.2rem; line-height: 1.8; font-size: 0.26rem; color: var(--c0);}
.artdp-body .sec{margin-bottom: 0.2rem;}

/*cpop*/
.cpop{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; display: none;}
.show.cpop{display: block; z-index: 100;}
.cpop .mask{opacity: 1; visibility: visible;}

.c-result-modal--container{position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 5; display: block; text-align: center; padding: 0.2rem 0.7rem; width: 6rem; max-width: 90%; color: var(--c3); background-color: var(--white); border-radius: 0.2rem; -webkit-animation: cpopSlideDown ease .3s forwards; animation: cpopSlideDown ease .3s forwards;}
.show.cpop .c-result-modal--container{-webkit-animation: cpopSlideUp ease 0.3s forwards; animation: cpopSlideUp ease 0.3s forwards;}
@-webkit-keyframes cpopSlideUp{
  from{-webkit-transform:translate3d(-50%, 100%, 0); transform:translate3d(-50%, 100%, 0);}
  to{-webkit-transform:translate3d(-50%, -50%, 0); transform:translate3d(-50%, -50%, 0);}
}
@keyframes cpopSlideUp{
  from{-webkit-transform:translate3d(-50%, 100%, 0); transform:translate3d(-50%, 100%, 0);}
  to{-webkit-transform:translate3d(-50%, -50%, 0); transform:translate3d(-50%, -50%, 0);}
}
@-webkit-keyframes cpopSlideDown{
  from{-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0);}
  to{-webkit-transform:translate3d(-50%, 100%, 0);transform:translate3d(-50%, 100%, 0);}
}
@keyframes cpopSlideDown{
  from{-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0);}
  to{-webkit-transform:translate3d(-50%, 100%, 0);transform:translate3d(-50%, 100%, 0);}
}

/*end cpop*/




/* button */

.large-m-button,
.middle-l-button{-webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; line-height: 1.1; border-radius: 0.06rem; border: none; outline: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }

.large-m-button{display: -webkit-box; display: flex;}
.middle-l-button{display: -webkit-inline-flex; display: inline-flex;}


.large-m-button{padding: 1px 0.2rem; min-width: 50%; height: 0.9rem; font-size: 0.34rem;}
.radius.large-m-button{padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 0.45rem;}
.middle-l-button{padding: 1px 0.2rem; min-width: 2.4rem; height: 0.8rem; font-size: 0.34rem;}
.radius.middle-l-button{padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.4rem;}


.primary-button:not(.plain){color: var(--primary); background-color: #daaa7b; background-image: -webkit-linear-gradient(90deg, #daaa7b, #f2cea8); background-image: linear-gradient(0deg, #daaa7b, #f2cea8); border: 0.02rem solid var(--white); box-shadow: 0 0.07rem 0.1rem rgba(0,0,0,0.13);}
.primary-button:not(.plain):active{box-shadow: 0 0.07rem 0.1rem rgba(0,0,0,0.2) inset, 0 0.07rem 0.2rem rgba(0,0,0,0.3); -webkit-transform: perspective(10rem) translateZ(-0.2rem); transform: perspective(10rem) translateZ(-0.2rem);}



.plain.red-button{color: var(--red); background-color: var(--white-0); border: 0.02rem solid var(--red);}
.plain.red-button:not(:disabled):active{color: var(--red-active); background-color: var(--bg-active);}


/*color*/
.red-color{color: var(--red);}
.red-color:active{color: var(--red-active);}