
.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%}



    
    

}















