.options { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width:1200px; width: calc(100% - 100px); height:695px; margin:60px auto; } @media screen and (max-width: 718px) { .options { min-width: 520px; } .options .option:nth-child(5) { display: none; } } @media screen and (max-width: 638px) { .options { min-width: 440px; } .options .option:nth-child(4) { display: none; } } @media screen and (max-width: 558px) { .options { min-width: 360px; } } @media screen and (max-width: 478px) { .options { min-width:360px; } } .options .option { position: relative; overflow: hidden; min-width: 60px; background: var(--optionBackground, var(--defaultBackground, #E6E9ED)); background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .options .option:nth-child(1) { --defaultBackground: #ED5565; } .options .option:nth-child(2) { --defaultBackground: #FC6E51; } .options .option:nth-child(3) { --defaultBackground: #FFCE54; } .options .option:nth-child(4) { --defaultBackground: #2ECC71; } .options .option:nth-child(5) { --defaultBackground: #5D9CEC; } .options .option:nth-child(6) { --defaultBackground: #AC92EC; } .options .option.active { flex-grow: 10000; background:#ec6c00 !important; -webkit-transform: scale(1); transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; /*&:active { transform:scale(0.9); }*/ } .options .option.active .shadow { box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black; } .options .option.active .label { bottom: 20px; left: 20px; } .options .option:not(.active) { flex-grow: 1; margin: 70px auto; } .options .option:not(.active) .shadow { bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black; } .options .option:not(.active) .label { top:0; font-family:"微软雅黑"; left:0; } .options .option .shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .options .option .label { display: block; position: absolute; right: 0px; top: 0; text-align: center; } .options .option .label .icon { display:block; text-align: center; font-size: .6rem; width:100%; color:#c5c4c4; margin:5rem 0 0; } .options .option .label .icon em{ background:url(/static/image/icozz.png) no-repeat center top; width:52px; height:52px; margin:0 auto; display:block} .options .option .label .icon p{ width:100%; overflow:hidden; margin:15% auto; display:block} .options .active .label .icon{ display:none} .options .option .label .info{ display:none} .options .active .label .info{ display:block; font-family:"微软雅黑"; font-size:.5rem;line-height:1rem; font-weight:normal} @media screen and (max-width:1680px) { .options_bg{ background-size:100% 460px;} .options{ height:600px;max-width:1100px;} .options .option.active {max-width:460px;} } @media screen and (max-width:1366px) { .options_bg{ background-size:100% 360px;} .options{ height:500px;max-width:1000px;} .options .option.active {max-width:420px;} } @media screen and (max-width:767px) { .options{ margin:30px auto} .options .option.active .label{ left:0; width:90%} .options .active .label .info h4{ line-height:.8rem} .ul_one{ width:90%} .ul_one li{ width:100%;} .ul_one li.li_sanzz em{ right:10%} .ul_one li.li_sanzz span{ text-align:left} .options .active .label .info{ font-size:.3rem; width:100%; line-height:.6rem;white-space:normal} .options .active .label .info p{ width:100%} .options .option .label .icon{margin:2.6rem 0 0;} .options .option .label .icon p{ font-size:.33rem;writing-mode: vertical-lr; text-align:center; margin:25%; width:50%} .options .option .label .icon em{ width:35px; height:35px; background-size:100%} }