.ThemeActivities{ background: url('../images/acti/bg.jpg') no-repeat; background-size: 100% 100%; /* background-size: cover; */ position: relative; top: 0; font-family: "Helvetica Neue", Helvetica, sans-serif; padding-bottom: 12rem; } .ThemeActivities .head{ width: 100%; padding-top: 5rem; } .ThemeActivities .head .zcdiv{ background:linear-gradient(0deg,rgba(255,139,48,1),rgba(253,69,0,1)); border-radius:12px; color:#fff; width: 95%; margin: 0 auto; padding: 6px 0; position: relative; } .ThemeActivities .head .zcdiv li{ width: 70px; display: inline-block; text-align: center; } .ThemeActivities .head .t-ctn { display: inline-block; width: calc(100% - 130px); overflow-x: auto; position: relative; } .ThemeActivities .head .t-ctn .s-ctn { white-space: nowrap; font-size: 0; min-width: 100%; display: inline-flex; align-items: center; } .ThemeActivities .head .t-ctn .s-ctn li { font-size: 14px; box-sizing: border-box; white-space: normal; word-wrap: break-word; word-break: break-all; overflow: hidden; display: inline-block; } .ThemeActivities .head .t-ctn .s-ctn div{ display: inline-block; } .ThemeActivities .head .t-ctn .s-ctn div img{ width: 5px; } .ThemeActivities .head .guize{ position: absolute; right: 6px; top: 6px; width:45px!important; background:rgba(251,235,219,1); box-shadow:-2px 0px 9px 1px rgba(187,56,0,0.3); border-radius:8px; padding: 3px 0; font-size: 12px; color:#FD520A; } .ThemeActivities .firstDiv{ width: 95%; margin: 0 auto; background: #fff; margin-top: 21rem; border-radius: 4px; padding:1rem; box-sizing: border-box; position: relative; padding-top: 3rem; } .ThemeActivities .firstDiv .scdImg{ position: absolute; /* bottom: 0; */ left: -3%; width: 8rem; z-index: 200; } .ThemeActivities .xsmsHead{ text-align: center; position: absolute; top: -3rem; } .ThemeActivities .xsms{ display: flex; align-items: center; justify-content: space-between; } .ThemeActivities .itemDiv{ display: inline-block; width: 49%; } .ThemeActivities .itemDiv .imgdiv{ position: relative; height: 12rem; } .ThemeActivities .itemDiv .imgdiv img{ width: 100%; max-height: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; } .ThemeActivities .itemDiv .imgdiv .ms{ position: absolute; bottom: 0; background: #FE4300; color:#fff; padding: 2px 6px; border-top-right-radius: 12px; font-size: 1.2rem; } .ThemeActivities .itemDiv .contentDiv{ background:#FFF1C2; padding: 6px; box-sizing: border-box; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .ThemeActivities .itemDiv .contentDiv .ljqg{ font-size:1rem; float: right; background: #FDBD01; /* margin-top: -0.3rem; */ padding: 0.2rem 0.4rem; border-radius: 0.5rem; } .ThemeActivities .zkDiv{ width: 95%; margin: 0 auto; background: #fff; margin-top: 4rem; border-radius: 4px; padding:1rem; box-sizing: border-box; position: relative; padding: 3rem 0; } .ThemeActivities .zkDiv .sale{ position: absolute; top: 0; right: 0.5rem; } .ThemeActivities .zkDiv .zkItem:after { clear: both; content: '.'; display: block; height: 0; overflow: hidden; } .ThemeActivities .zkDiv .zkItem{ height: 10rem; margin-top: 1rem; padding: 0 1rem; box-sizing: border-box; } .ThemeActivities .zkDiv .zkItem>div{ float: left; height: 100%; } .ThemeActivities .zkDiv .zkItem .div1{ width: 50%; } .ThemeActivities .zkDiv .zkItem .div1 img{ width: 100%; height: 100%; } .ThemeActivities .zkDiv .zkItem .div2{ width: 40%; background: #F1E1AE; padding-left: 0.5rem; box-sizing: border-box; } .ThemeActivities .zkDiv .zkItem .div3{ height: 100%; width: 10%; background: #FEBF00; text-align: center; } .ThemeActivities .zkDiv .zkItem .ljqg{ background: #FEBF00; padding: 0.4rem 0.3rem; border-radius: 4px; } .ThemeActivities .zkDiv .zkItem .div3 .ckgd{ display: inline-block; width: 1rem; margin-top: 2rem; } .ThemeActivities .zkDiv .sxcdImg{ position: absolute; bottom: -2rem; right: -3%; width: 8rem; z-index: 200; }