.SalesComparisonBox {
    width: calc((100% - 20px)/2);

    .SalesComparisonContent {
        width: 100%;
        height: 182px;
        background: linear-gradient(180deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
        padding: 18px 20px;
        box-sizing: border-box;

        .SalesComparison {
            width: 100%;
            height: 146px;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .defaultCylinder {
                width: 43px;
                height: 89px;
                background-image: url('../../../../assets//image/cylinderBg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: relative;
                z-index: 1;

                .cylinderTop {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 43px;
                    height: 8px;
                    background-image: url('../../../../assets//image/cylinderTop.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    transform: translateY(-50%);
                    z-index: 2;
                }

                .cylinderBottom {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 43px;
                    height: 8px;
                    background-image: url('../../../../assets//image/cylinderTop.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    transform: translateY(50%);
                    z-index: 2;
                }

                .cylinderHave {
                    position: absolute;
                    bottom: 4px;
                    left: 0;
                    width: 43px;
                    background-color: #FF9500;
                    transform: translateY(50%);
                    z-index: 3;
                }

                .cylinderOnline {
                    position: absolute;
                    left: 0;
                    width: 43px;
                    height: 8px;
                    background-image: url('../../../../assets//image/onlineTop.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    z-index: 4;
                }

                .cylinderOnlineBottom {
                    position: absolute;
                    left: 0;
                    bottom: -6px;
                    width: 43px;
                    height: 8px;
                    background-image: url('../../../../assets//image/onlineHaveBottom.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    z-index: 4;
                }
            }
        }
    }
}