body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, input, select, button, textarea, table, th, td {
    margin: 0;
    padding: 0;
}
html,body{
	margin:0;
	padding:0;
}
body {
    position: relative;
    font: 12px "Microsoft Yahei", "Arial", sans-serif;
	width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#contmainmain{
    background-size: 100%;
    margin: 0rem;
    width: 100%;
    height: 100%;
    font-family: "微软雅黑";
    font-size: 0.16rem;
    overflow: hidden;
}

ul, ol {
    list-style: none;
}

img {
    border: none;
    vertical-align:top;
}

a {
    outline: none;
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}

input {
    outline: none;
}

button {
    cursor: pointer;
}

.block {
    display: block;
}

.none {
    display: none;
}

.r {
    position: relative;
}

.a {
    position: absolute;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

/*字体大小*/
.f-siz14 {
    font-size: 14px;
}

.f-siz16 {
    font-size: 16px;
}

.f-siz18 {
    font-size: 18px;
}

.f-siz20 {
    font-size: 20px;
}

.f-siz22 {
    font-size: 22px;
}

.f-siz24 {
    font-size: 24px;
}

.f-siz26 {
    font-size: 26px;
}

.f-siz28 {
    font-size: 28px;
}

.f-siz30 {
    font-size: 30px;
}

.bor-none {
    border: none !important;
}

.common{
	
}
#common-debox {
    width: 100%;
    position: relative;
    margin: 10px auto;
	font-size:0.3rem;
	overflow-x:hidden;
}
#common-debox img{
    max-width:8rem;
}
.common-boxwhite {
    background-color: #ffffff;
}

.common-boxcontent {
    margin: 0.2rem 0.2rem 0;
    border-radius: 0.02rem;
    padding: 0.03rem;
    box-shadow: 0 0 0.02rem rgb(0 0 0 / 50%);
}
.common-box{
	border-radius: 0.1rem;
    border: 0.04rem dashed rgba(0, 0, 0, 0.3);
}
.common-box .common-title-red {
    padding: 0.15rem;
    background-color: rgb(216 12 7);
    border-radius: 0.1rem 0.1rem 0.1rem 0;
    color: #ffffff;
    margin: 0rem;
	width:24%;
}

.common-box .common-Detail {
	margin:0.2rem;
    padding: 0.1rem;
	overflow-x:hidden;
}
.common-list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.common-list dl {
    float: left;
    width: 31.33%;
    padding: 0.05rem;
    text-align: center;
    background: #fff;
    border-radius: 0.05rem;
    color: #000;
}
.common-box-imgdt{
	overflow: hidden;
}

.common-box-imgdt img{
	width: 80%;
	margin:0.1rem 0.05rem;
}

.form li {
    margin: 0.2rem 0;
}

input.txt, input.btn, .a-btn {
    width: 100%;
    outline: none;
    font-size: 0.2rem;
    background: #fff;
    border: 0.01rem solid #fd4c4c;
    height: 0.6rem;
    color: #fd4c4c;
    padding: 0 2%
}

input.btn, .a-btn {
    padding: 0;
    background: #fd4c4c;
    color: #fff;
    font-size: 0.36rem
}

.a-btn {
    display: block;
    margin: 0.3rem auto 0;
    line-height: 0.5rem;
    height: 0.6rem;
}

.w-btn {
    font-size: 0.6rem;
    font-weight: 100;
    color: #fd4c4c;
    position: absolute;
    right: 5px;
    top: -10px;
}


#time {
    font-size: 0.3rem;
    font-family: Arial, Helvetica, sans-serif;
}


input.txt {
    font-size: 0.2rem;
    height: 0.6rem;
    width: 100%;
    border: 0;
    background: #eee;
    outline: none;
    padding: 0 3%;
}

input.f-btn {
    border: 0;
    font-size: 0.3rem;
    width: 100%;
    height: 0.6rem;
    border-radius: 0.03rem;
    background: #ffbe04;
    color: #fff;
    outline: none;
}

.mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 998;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
}

.opwin {
    width: 80%;
    top: 15%;
    text-align: center;
    position: absolute;
    background: #fff;
    border-radius: 0.1rem;
	left:10%;
    z-index: 999;
    display: none;
}

.opwin div {
    padding: 0.5rem;
}

.opwin h1 {
    text-align: center;
    font-size: 0.48rem;
    margin-bottom: 0.2rem;
}

.opwin h3 {
    font-weight: bold;
    font-size: 0.48rem;
    margin-top: 0.2rem;
	color:red;
	padding: 0 1rem;
}

.resultprize1{
	background: url(../image/prizemsg1.png) no-repeat top center;
}
.resultprize2{
	background: url(../image/prizemsg2.png) no-repeat top center;
}
#opwincont .opwin .result {
    width: 30vw;                 /* 宽屏下约为屏宽30% */
    max-width: 10rem;            /* 上限约600px */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
}
.result {
    position: fixed;
	max-height:70%;
	width:96%;
	left:2%;
	background-color:rgba(255,255,255,0);
}
.result .resulttx{
	background: url(../image/1.png) no-repeat top center;
	background-size: 100%;
	height:100%;
	padding:0;
}
.result .resultbg{
	background-size: 100%;
	height:100%;
	padding:0 0 0.2rem 0;
}

.result .resultcnt{
	max-height:85%;
	padding:62% 0 0 0;
}
.result .resultbtn{
	padding:0;
}

.result p {
    text-align: center;
}

.result p img {
    width: 60%
}

.result h1 {
    font-weight: 100;
    font-size: 0.5rem;
    margin-bottom: 0.2rem;
}
.result ul img {
	max-width: 3.6rem;
	max-height: 5rem;
	margin: 0 auto;
}

.rotary ul li {
	margin-left: -0.6rem;
	border-left: 0.6rem solid transparent;
	border-right: 0.6rem solid transparent;
	border-top: 2.5rem solid red;
	transform-origin: 0.6rem 2.5rem;
	-webkit-transform-origin: 0.6rem 2.5rem;
	-moz-transform-origin: 0.6rem 2.5rem;
	-o-transform-origin: 0.6rem 2.5rem;
}

.selected {
	display: block;
}

#tr2 {
	display: none;
}

#tr4 {
	display: none;
}

#result ul {
	display: none
}


.ewm-win {
	text-align: center;
	top: 20%;
}

.ewm-win img {
	max-width: 100%;
	margin: 0 auto;
}

.ad {
	width: 100%;
	margin-bottom: 0.2rem;
}

.ad img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.tab-nav span {
	width: 25%
}
		
.load {
    position: fixed;
    width: 1rem;
    height: 1rem;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    z-index: 999;
    left: 50%;
    top: 50%;
    background: url(../image/r.gif) no-repeat center rgba(0, 0, 0, 0.5);
    background-size: 80%;
    border-radius: 0.05rem;
    display: none;
}

.showpeople{
	height: 0.6rem;
    font-size: 0.3rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    width: 6.2rem;
    border-radius: 0.3rem;
    margin: 0.3rem auto;
}
.common-alpha{
	background:rgba(0,0,0,0.1);
	border-radius: 0.4rem;
}
.core-w{
	overflow:hidden;
}

.common-scroll li{
	margin-top:0.05rem;
	border-bottom: 1px dashed hsla(0deg 2% 23% / 65%);
}

.common-scroll-img{
	float:left;
}
.common-scroll-cont{
	float:left;
	width:80%;
	margin:0.08rem 0.3rem;
}
.common-scroll-cont-up{
	width:100%;
}
.common-scroll-cont-lt{
	width:50%;
	float:left;
}
.common-scroll-cont-rg{
	width:50%;
	float:right;
}
.common-scroll-cont-dn{
	width:100%;
	color: rgb(212 17 39);;
	
}
/* 头像固定为小尺寸（web 字号下 ≈36px），不再把中奖记录内容往下挤 */
.common-scroll-img img {
	width:0.6rem; height:0.6rem;
}
/* 每条记录改用 flex，头像在左、文字在右**同一行垂直居中* */
.common-scroll li {
	display:flex; align-items:center; 
} 
/* 取消原 float，改由 flex 横向排列*/
.common-scroll li .common-scroll-img .common-scroll-cont { 
	float:none; 
} 
/* 文字区占满头像右侧剩余宽度*/
.common-scroll-cont { 
	flex:1 1 auto; width:auto; margin-left:0.3rem; 
}
.shownone{
	display:none;
}
.showblock{
	display:block;
}
.ovflhidden{
	overflow:hidden;
}
.fr{
	color:red;
}
.fr2{
	color:#ba1212
}
.fb{
	color:blue;
}
.wp100{
	width:100%;
}
.wp60{
	width:60%;
}
.wp48{
	width:48%;
}

/* ===== 桌面(web)版三栏布局：奖品列表 | 转盘 | 中奖公告+活动说明 (宽度≥1100px 生效，手机/平板竖屏 980px 布局不变) ===== */
@media (min-width: 1100px) {
	/* ① 容器：锁定为整屏高度，禁止页面上下滚动 */
	#contmainmain {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* 左列 | 中列(转盘) | 右列，两侧1fr对称 → 转盘恒居中 */
		grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);    /* 顶部栏 | 右上(中奖公告) | 右下(活动说明) */
		gap: 0.8rem;
		align-items: start;
		justify-items: center;
		height: 100vh;   /* 固定为视口高度 → 页面不出现滚动条 */
		overflow: hidden;
		padding: 0.6rem 1.2rem;
	}
	/* ② 顶部操作栏横跨整行 */
	#headcont { grid-column: 1 / -1; grid-row: 1; }
	/* ③ 中间转盘：跨右侧两行、占满可用高度，始终水平居中 */
	#codex {
		grid-column: 2;
		grid-row: 2 / span 2;
		align-self: center;
		justify-self: center;
	}
	/* 转盘整体(含扇形/指针/装饰框)等比放大：直径 = 视口高度82%，且不超过屏宽40%，保证两侧栏有空间 */
	#codex .core-w {
		zoom: calc(min(0.82 * 100vh, 40vw) / 8.4rem);
	}
	/* ④ 左列：奖品列表(第2个模块)，跨右侧两行高度；【本次改动】列表本体固定高度并自动滚动(见下方规则)，此处只定位网格位置 */
	#common-debox { display: contents; }
	#common-debox > .common-boxcontent:nth-child(2) {
		grid-column: 1;
		grid-row: 2 / span 2;
		min-width: 0;
		width: 100%;
		margin: 0.2rem;
	}
	/* 【本次改动】奖品列表本体：固定高度 = 视口高度62%（可按需调整），内容超出时自动出现竖向滚动条；“奖品列表：”标题固定在其上方不滚动 */
	#common-debox > .common-boxcontent:nth-child(2) .common-list.prize {
		height: calc(0.62 * 100vh);
		overflow-y: auto;
	}
	/* ⑤ 右列上方：中奖公告(第1个模块)；【本次改动】加 overflow-y:auto 兜底，防止屏幕较矮时内容被裁切(内容放得下时不出现滚动条) */
	#common-debox > .common-boxcontent:nth-child(1) {
		grid-column: 3;
		grid-row: 2;
		min-width: 0;
		width: 100%;
		margin: 0.2rem;
		overflow-y: auto;
	}
	/* ⑥ 右列下方：活动说明(第3个模块)；【本次改动】同上，加 overflow-y:auto 兜底防裁切 */
	#common-debox > .common-boxcontent:nth-child(3) {
		grid-column: 3;
		grid-row: 3;
		min-width: 0;
		width: 100%;
		margin: 0.2rem;
		overflow-y: auto;
	}
	/* ⑦ 【本次改动】三个侧栏模块(奖品列表/中奖公告/活动说明)的字体与奖品图片整体等比缩小(zoom:0.75，可按需调整)；模块若被隐藏(display:none)，所在列自动留空，转盘仍居中 */
	#common-debox > .common-boxcontent:nth-child(1),
	#common-debox > .common-boxcontent:nth-child(2),
	#common-debox > .common-boxcontent:nth-child(3) { zoom: 0.75; }
	/* 【本次改动】奖品列表(左)与中奖公告(右上)两个模块：保持同一个固定下移量并继续加大(translateY:2.6rem，web字号60px≈156px)，两者再往下调一点，且顶部起点完全一致；如需整体上下微调改此值即可 */
	#common-debox > .common-boxcontent:nth-child(2),
	#common-debox > .common-boxcontent:nth-child(1) { transform: translateY(0rem); }
	/* 同时隐藏移动端遗留的 <br> */
	#common-debox br { display: none; }
	/* ⑧ 弹窗层横跨整行 */

	
	/* ⑧ 弹窗层横跨整行 */
	#opwincont { grid-column: 1 / -1; }
	/* 【本次改动】web 版中奖提示弹窗(.opwin.result，抽奖结果提示层)兼容宽屏：调宽弹窗并确保整体不溢出视口。
	   1) 宽度=视口高60%(1920x911屏≈547px，上限12rem≈720px)，top 10% 上移，水平居中；
	   2) 背景图区(.resulttx) max-height:66%，图片高度不超出视口；
	   3) 内容区(.resultcnt) 背景占位 padding-top 60%→30%(web，既让顶部星星装饰不被内容压住，又避免占位过大把按钮挤出视口)并 max-height:60%+超高内部滚动；
	   4) 奖品图(.resultcnt ul img，抽奖后JS填充的竖图) max-height:16% 高度受限，防止把"领取奖品"按钮挤出视口。
	   手机版(<1100px)不生效，保持原样 width:96% */
	#opwincont .opwin.result { width:60vh; max-width:12rem; left:50%; top:4vh;
    transform:translateX(-50%); max-height:80vh; }   /* 弹窗上限放宽，容纳下移内容 */
	#opwincont .opwin.result .resulttx { max-height:80vh; }  /* 背景区同步放宽 */
	#opwincont .opwin.result .resultcnt { padding-top:50%; max-height:60vh; overflow-y:auto; }
	#opwincont .opwin.result .resultcnt ul img {
		height: 24vh;               /* 只调整高度(约97px) */
		width: 42%;                 /* 宽度保持约138px(原竖图宽度)，不再按比例缩小 */
		object-fit: cover;          /* 按宽高裁切填充，不拉伸变形 */
		margin-top: 10vh;           /* 图片整体下移(约88px)，避开顶部"幸运大抽奖"/飘带装饰 */
	}

}