.select-coupon-page { margin-top: pxToRem(30px); margin-bottom: pxToRem(30px); #new-coupon { margin-bottom: pxToRem(30px); padding-left: pxToRem(30px); padding-right: pxToRem(30px); input { padding: 0 pxToRem(12px); width: pxToRem(384px); height: pxToRem(80px); border: 1px solid #b0b0b0; border-radius: .1rem; outline: 0; } .submit { margin-left: pxToRem(30px); width: pxToRem(130px); height: pxToRem(80px); color: #fff; background: #b0b0b0; border-radius: .1rem; border: none; outline: 0; } } .coupon-list { .employ-main:first-child { margin-top: 0; } .employ-main:last-child { margin-bottom: 0; } } %line { content: ''; position: absolute; top: 50%; border-top: 1px solid #b0b0b0; width: pxToRem(120px); height: 0; } .not-avaliable-coupon-line { position: relative; margin-top: pxToRem(30px); margin-bottom: pxToRem(30px); font-size: pxToRem(14px); line-height: 2; color: #b0b0b0; text-align: center; &:before { @extend %line; left: pxToRem(60px); } &:after { @extend %line; right: pxToRem(60px); } } .not-avaliable { -webkit-filter: grayscale(100%); } }