.bootstrap {
    /*
    margin-left: 15px;
    margin-right: 15px;
    */

    margin-left: 0px;
    margin-right: 0px;

    padding: 0;

    font-weight: 700;
    text-shadow: 1px 3px 6px rgba(0, 0, 0, .15);
}

.bootstrap: before, .bootstrap: after {
    content: " ";
    display: table;
}
.bootstrap: after {
    clear: both;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;

    margin-top: 0px;
    margin-bottom: 0px;

    /*
    margin-top: -2px;
    margin-bottom: -2px;
    */
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}

.col-xs-1 {
    width: 8.33333%;
}
.col-xs-2 {
    width: 16.66667%;
}
.col-xs-3 {
    width: 25%;
}
.col-xs-4 {
    width: 33.33333%;
}
.col-xs-5 {
    width: 41.66667%;
}
.col-xs-6 {
    width: 50%;
}
.col-xs-7 {
    width: 58.33333%;
}
.col-xs-8 {
    width: 66.66667%;
}
.col-xs-9 {
    width: 75%;
}
.col-xs-10 {
    width: 83.33333%;
}
.col-xs-11 {
    width: 91.66667%;
}
.col-xs-12 {
    width: 100%;
}

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-1 {
        width: 8.33333%;
    }
    .col-sm-2 {
        width: 16.66667%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.33333%;
    }
    .col-sm-5 {
        width: 41.66667%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33333%;
    }
    .col-sm-8 {
        width: 66.66667%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-10 {
        width: 83.33333%;
    }
    .col-sm-11 {
        width: 91.66667%;
    }
    .col-sm-12 {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }

    .col-md-1 {
        width: 8.33333%;
    }
    .col-md-2 {
        width: 16.66667%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33333%;
    }
    .col-md-5 {
        width: 41.66667%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33333%;
    }
    .col-md-8 {
        width: 66.66667%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.33333%;
    }
    .col-md-11 {
        width: 91.66667%;
    }
    .col-md-12 {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }

    .col-lg-1 {
        width: 8.33333%;
    }
    .col-lg-2 {
        width: 16.66667%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33333%;
    }
    .col-lg-5 {
        width: 41.66667%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33333%;
    }
    .col-lg-8 {
        width: 66.66667%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.33333%;
    }
    .col-lg-11 {
        width: 91.66667%;
    }
    .col-lg-12 {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .bootstrap {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/* Block */
.bootstrap > div.imgs.a {
    background-image: url(imgs/a.jpg);
}
.bootstrap > div.imgs.b {
    background-image: url(imgs/b.jpg);
}
.bootstrap > div.imgs.c {
    background-image: url(imgs/c.jpg);
}
.bootstrap > div.imgs.d {
    background-image: url(imgs/d.jpg);
}
.bootstrap > div.imgs.e {
    background-image: url(imgs/e.jpg);
}
.bootstrap > div.imgs.f {
    background-image: url(imgs/f.jpg);
}
.bootstrap > div.imgs.g {
    background-image: url(imgs/g.jpg);
}
.bootstrap > div.imgs.h {
    background-image: url(imgs/h.jpg);
}
.bootstrap > div.imgs.i {
    background-image: url(imgs/i.jpg);
}

.bootstrap > div.imgs:hover {
    transition: all .5s;
}

.bootstrap > div > div {
    width: 100vw;
    height: 45vh;
    display: table-cell;
    vertical-align: middle;
    padding: 0vh 2.5vw;
}

.bootstrap > div > div:hover {
    background-color: rgba(0, 0, 0, .35);
    transition: all 1s;
}
.bootstrap > div > div.transparents:hover {
    background-color: transparent;
    transition: all 1s;
}

.bootstrap > div > div:hover .scale {
    -ms-transform: scale(.96);
    -moz-transform: scale(.96);
    -webkit-transform: scale(.96);
    -o-transform: scale(.96);
}

.bootstrap > div > div.color:hover {
    background-color: rgba(0, 0, 0, .35);
}
.bootstrap > div > div.color:hover h1.theme {
    background: url(https://outcall-massage.czo.com.tw/images/massage/consulting_massages.gif);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bootstrap > div > div.bottom {
    height: 75px;
}

.bootstrap > div > div.transparent,
.bootstrap > div > div.transparent:hover {
    background-color: rgba(0, 0, 0, .35);
}

.sbk {
    background-color: #fff;
}
.bh {
    clear: both;
}

.sbk.x12 {
    padding: 12px;
}
.sbk.bx {
    padding: 48px 12px 48px 12px;
}
.sbk.bm, .sbk.bmx {
    padding: 0px 12px 12px 12px;
}
.sbk.bms {
    padding: 0px 12px 0px 12px;
}
.sbk.md {
    padding: 12px 0px 12px 0px;
}

.position {
    top: 40vh;
    left: 2.5vw;
    z-index: 1;
    position: fixed;
}
.position span {
    font-size: 10vh;
    line-height: 10vh;
    padding: 0 16px;
    color: rgba(255, 255, 255, .95);
    background: linear-gradient(45deg, rgba(250, 0, 162, .45), rgba(102, 31, 224, .75));
}

@media screen and (max-width: 991px) {
    .sbk.bmx {
        padding: 0px 0px 12px 0px;
    }
    .sbk.md {
        padding: 0px 12px 0px 12px;
    }
}

@media screen and (max-width: 767px) {
    .bootstrap {
        margin-left: 0px;
        margin-right: 0px;
    }
    .bootstrap > div > div {
        height: calc(50vh - 37.5px);
    }
    .bootstrap > div > div.bottom {
        height: 60px;
    }

    .position {
        top: calc(50vh - 65px);
    }
    .position span {
        font-size: 55px;
        line-height: 55px;
    }
}

@media screen and (max-width: 500px) {
    .bootstrap > div > div.banner {
        height: calc(100vh - 24px);
    }
}

@media screen and (max-width: 499px) {
    .bootstrap > div > div {
        height: calc(50vh - 32.5px);
    }
    .bootstrap > div > div.bottom {
        height: 60px;
    }

    .position {
        top: calc(50vh - 55px);
    }
    .position span {
        font-size: 45px;
        line-height: 45px;
    }
}