/* KV 底色
#banner{
  background-color: #aaaaaa;
}

/*用來裁剪banner使它看起來像是有下斜角
.wrapper.spotlight.style1:before{
    background-color: #aaaaaa;
}*/


/*第一段*/


.wrapper.spotlight.style1{
    background-color: #f4777b;
}

.wrapper.spotlight.style1:before{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23f4777b%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #f4777b, 0 1px 0 0 #f4777b;
}

.wrapper.spotlight.style1:after{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23f4777b%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #f4777b, 0 1px 0 0 #f4777b;
}


/*第二段*/


.wrapper.spotlight.style2{
    background-color: #75001d;
}

.wrapper.spotlight.style2:before{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2375001d%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #75001d, 0 1px 0 0 #75001d;
}

.wrapper.spotlight.style2:after{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2375001d%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #75001d, 0 1px 0 0 #75001d;
}


/*第三段*/


.wrapper.spotlight.style3{
    background-color: #cc0033;
}

.wrapper.spotlight.style3:before{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23cc0033%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #cc0033, 0 1px 0 0 #cc0033;
}

.wrapper.spotlight.style3:after{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23cc0033%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #cc0033, 0 1px 0 0 #cc0033;
}


/*第四段*/


.wrapper.alt.style1{
    background-color: #75001d;
}

.wrapper.alt.style1:before{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2375001d%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #75001d, 0 1px 0 0 #75001d;
}

.wrapper.alt.style1:after{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2375001d%3B' /%3E%3C/svg%3E");

    box-shadow: inset 0 -2px 0 0 #75001d, 0 1px 0 0 #75001d;
}