.product { background-color: #fff; width: 12rem; margin: 0 auto; min-height: 6.62rem; }
    .product .d1 { padding: 0.85rem 1.3rem 0 1.3rem; }
    .product .d1 > .p1 { line-height: .4rem; font-size: .18rem; color: #293139; text-align: center; width: 4.5rem; margin: 0 auto; border-radius: .96rem; height: .4rem; border: 0.01rem solid #fdd702; overflow: hidden; }
    .product .d1 > .p1 .s1 { display: inline-block; width: 50%; line-height: .4rem; cursor: pointer; }
    .product .d1 > .p1 .s1:hover, .product .d1 > .p1 .s1.selected { background-color: #fdd702; }
    .product .d1 .d2 { padding-top: .74rem; }
    .product .d1 .d2 .d3 { margin-bottom: .27rem; }
    .product .d1 .d2 .d3 .p1 { height: .52rem; line-height: .52rem; background-color: #ffe971; color: #333; padding-left: .58rem; cursor: pointer; }
    .product .d1 .d2 .d3 .p1 .s1 { float: right; cursor: pointer; margin-right: .22rem; }
    .product .d1 .d2 .d3 .p1.selected .s1 { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); }

    .product .d1 .d2 .d3 .a1 { display: block; height: .52rem; line-height: .52rem; font-size: .14rem; color: #555; background-color:#98d2ff; }
    .product .d1 .d2 .d3 .a1:nth-of-type(2n+1) { background-color: #fff; }

    .product .d1 .d2 .d3 .a1:hover { background-color: #98d2ff; }
    .product .d1 .d2 .d3 .a1 .s1 { width: 3.24rem; padding-left: .58rem; display: inline-block; }
    .product > .d1 > .d3 { padding-top: .74rem; }
    .product > .d1 > .d3 .a1 { display: block; height: .52rem; line-height: .52rem; font-size: .14rem; color: #555; background-color: #fff; }
    .product > .d1 > .d3 .a1:nth-of-type(2n+1) { background-color: #98d2ff; }
    .product > .d1 > .d3 .a1:hover { background-color: #98d2ff; }
    .product > .d1 > .d3 .a1 .s1 { width: 3.24rem; padding-left: .58rem; display: inline-block; }
    .product > .d1 > .d3 .page { margin-top: .6rem; }