body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  margin:0;padding:0; -webkit-user-select: none;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
body{line-height:1;}
.clear:after{content:" ";clear:both;height:0;visibility:hidden;display:block;}
i{font-style:normal;}
:focus{outline:0;}
img{vertical-align:top;}
a{-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-user-select:none;}
.hh{display:block;text-indent:-999em;overflow:hidden;}
.hide{width:0;height:0;overflow:hidden;display:none;}
.p-r{position:relative;}
.p-a{position:absolute;}
html{font-size:100px;}
body{font:.24rem/1.75 -apple-system,"source","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:0.24rem;position:relative;}
html,body{width:100%;}
.bg,.pop{background-size:100% auto;background-position:top center;background-repeat:no-repeat;}
.bgc{background-size:100% auto;background-position:center center;background-repeat:no-repeat;}
.t{text-indent:-9999em;overflow:hidden;font-size: 0; display: block;}
input[type=tel]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {appearance: none;-webkit-appearance: none;}
.filter{filter:grayscale(100%);-webkit-filter:grayscale(100%);}
.full-img img, .full-img {display:block;}
.full-img img{width:100%;}
.text-bold{font-weight:bold;}
.text-normal{font-weight:normal;}
.text-underline {text-decoration: underline;}
.text-no-underline {text-decoration: none;}
.text-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.w-1{width: 100%;}
.t-c{text-align:center;}
.t-l{text-align:left;}
.t-r{text-align:right;}
.f-l{float:left;}
.f-r{float:right;}
.flex{display:flex;display:-webkit-flex;}
.flex-1{flex:1;-webkit-flex:1;}
.flex-center {display: flex;display:-webkit-flex;align-items: center;justify-content: center;-webkit-justify-content:center;}
.flex-align-center {display: flex;display:-webkit-flex;align-items: center;}
.flex-justify-center {display: flex;display:-webkit-flex;justify-content: center;-webkit-justify-content:center;}
.flex-justify-between {display: flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content:space-between;}
.btn-hv{transition:.1s all;-webkit-transition:.1s all;}
.btn-hv:active{transform:scale(.95);-webkit-transform:scale(.95);}
.btn-disabled{ filter: grayscale(100%); -webkit-filter: grayscale(100%);}


/*--- 部分公用样式 ---*/
.content-page-one .content-1 .time,
.content-page-two .content-1 .time{
  width: 4.32rem;
  height: 0.16rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/time_line.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 1rem;
}
.content-page-one .content-1 .time .time-text,
.content-page-two .content-1 .time .time_text{
  font-size: 0.2rem;
  color: #354a81;
  font-weight: bold;
  position: absolute;
  top: -0.09rem;
}
.content-page-one .content-1 .name,
.content-page-two .content-1 .name {
  width: 2.51rem;
  height: 0.4rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/info_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 0.24rem;
  color: #e5e5e5;
  font-weight: bold;
  position: absolute;
}
.content-page-one .content-1 .name{
  bottom: 0.95rem;
}
.content-page-two .content-1 .name {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper {
  width: 7.5rem;
  height: 18.37rem;
  position: relative;
  overflow-x: hidden;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/bg.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-page-one {
  padding-top: 7rem;
}
.content-page-one .content-1,
.content-page-one .content-2 {
  width: 7.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-page-one .content-1 {
  height: 7.05rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/content1.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0.5rem;
}
.content-page-one .content-1 .tips {
  width: 6rem;
  font-size: 0.2rem;
  color: #354a81;
  font-weight: bold;
  position: absolute;
  bottom: -0.1rem;
}
.content-page-one .content-1 .tips > span {
  color: #36d720;
}
.content-page-one .content-2 {
  width: 6.22rem;
  height: 1.69rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/prize_box.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto .2rem;
}
.content-page-one .content-2 .item-info,
.content-page-one .content-2 .no-data {
  height: 1.08rem;
  width: 6.1rem;
  padding-top: 0.45rem;
  color: #a05d46;
  font-size: 0.2rem;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content-page-one .content-2 .item-info {
  justify-content: space-between;
}
.content-page-one .content-2 .item-info .item-info-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: .3rem;
}
.content-page-one .content-2 .item-info .item-info-left > img {
  width: 0.93rem;
  height: 0.93rem;
  margin-right: 0.15rem;
}
.content-page-one .content-2 .item-info .item-info-right{
  padding-right: .3rem;
}
.content-page-one .content-2 .no-data {
  justify-content: center;
}
.content-page-one .bottom-info {
  width: 100%;
  font-size: 0.2rem;
  font-weight: bold;
  color: #5562c5;
  text-align: center;
}
/*----- page two style -----*/
.wrapper.isOpen{
  height: 28.78rem;
  background-image: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/open-bg.jpg);
}
.content-page-two {
  padding-top: 7rem;
  display: none;
}
.content-page-two .content-1,
.content-page-two .content-2,
.content-page-two .content-3 {
  width: 7.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-page-two .content-1 {
  height: 7.05rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/open-content1.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 1.4rem;
}
.content-page-two .content-1 .btn-open {
  position: absolute;
  bottom: -0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-page-two .content-1 .btn-open img {
  width: 3.86rem;
  height: 1.08rem;
}
.content-page-two .content-1 .btn-open .open-text {
  color: #5546ad;
}
.content-page-two .content-2 {
  height: 5.1rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/open-content2.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 1.55rem;
}
.content-page-two .content-2 .content-info {
  font-size: 0.24rem;
  color: #5546ad;
  font-weight: bold;
  position: absolute;
  bottom: -0.5rem;
}
.content-page-two .content-2 .content-info > span {
  color: #ffd963;
}
.content-page-two .content-3 {
  height: 4.87rem;
  background: url(//game.gtimg.cn/images/coc/cp/a20250723celebrationBox/open-content3.png) no-repeat;
  background-size: 100% 100%;
}

.wrapper.isOpen .content-page-one{
  display: none;
}
.wrapper.isOpen .content-page-two{
  display: block;
}