@import url("https://www.digiwin.com/tw/dsc/css/bootstrap4.0_M.css");
@import url("https://www.digiwin.com/tw/dsc/css/swiper-bundle.min.css");
@import url("https://www.digiwin.com/tw/dsc/css/animate-3.7.2.css");

.wow {
    animation-fill-mode: both;
}
.fadeInUpSmall {
    animation-name: fadeInUpSmall;
}
@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInDownSmall {
    animation-name: fadeInDownSmall;
}
@keyframes fadeInDownSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInLeftSmall {
    animation-name: fadeInLeftSmall;
}
@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInRightSmall {
    animation-name: fadeInRightSmall;
}
@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInTopLeftSmall {
    animation-name: fadeInTopLeftSmall;
}
@keyframes fadeInTopLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, -10%, 0);
        transform: translate3d(-10%, -10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInTopRightSmall {
    animation-name: fadeInTopRightSmall;
}
@keyframes fadeInTopRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(10%, -10%, 0);
        transform: translate3d(10%, -10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInBottomLeftSmall {
    animation-name: fadeInBottomLeftSmall;
}
@keyframes fadeInBottomLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10%, 10%, 0);
        transform: translate3d(-10%, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInBottomRightSmall {
    animation-name: fadeInBottomRightSmall;
}
@keyframes fadeInBottomRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(10%, 10%, 0);
        transform: translate3d(10%, 10%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.bounceInSmall {
    animation-name: bounceInSmall;
}
@keyframes bounceInSmall {
    from,
    10%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
    40% {
        transform: scale3d(1.04, 1.04, 1.04);
    }
    60% {
        transform: scale3d(1, 1, 1);
    }
    80% {
        opacity: 1;
        transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
@keyframes arr-flash {
    0%,
    80%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}
html {
    font-size: 10px;
}
.cs_wrap {
    font-family: "微軟正黑體";
    font-size: 1em;
}
a {
    text-decoration: none;
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
    .cs_wrap {
        font-size: 0.85em;
    }
}
.cs1{
    background: url("../images/CFV/c1_bg.png") no-repeat center !important;
    background-size: cover !important;
}
.cs1 .content{
    width: 100% !important;
    align-items: flex-start !important;
    padding: 7rem 2rem 0!important;
}
.cs1 .cs1_brmb{
    display: none;
}
.cs1 h1 {
    text-align: left !important;

}
.cs1 h2{
    color: #fff600 !important;
}
.cs1 a{
    max-width:25em !important;
    height: 6em !important;
}
.cs1 a::after{
    display: none !important;
}
.cs2 {
    display: flex;
    align-items: center;
}
.cs2 .content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 7.7rem 0;
}
.cs2 h1 {
    font-size: 4em;
    color: #000;
    text-align: center;
    margin: 0 0 4rem;
}
.cs2 h1 span {
    color: #0da78f;
}
.cs2 h2 {
    font-size: 2.2em;
    color: #000;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 7.7rem;
}
.cs2 .cs2_boxs {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
}
.cs2 .cs2_boxs .cs2_box {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs2 .cs2_boxs .cs2_box .cs2_boxt {
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.cs2 .cs2_boxs .cs2_box h3 {
    background: #0d9767;
    font-size: 1.8em;
    color: #fff;
    padding: 4px 15px;
    border-radius: 12px;
    margin: 0 0 5px;
}
.cs2 .cs2_boxs .cs2_box h4 {
    font-size: 3em;
    color: #0d9767;
    margin: 3rem 0;
    font-weight: bold;
    font-family: "Microsoft YaHei";
}
.cs2 .cs2_boxs .cs2_box p {
    font-size: 1.8em;
    color: #000;
    line-height: 1.5;
}
.cs3 {
    background: #ebfdff;
}
.cs3 .content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 11.1rem 0 13rem;
}
.cs3 h1 {
    font-size: 4em;
    color: #000;
    text-align: center;
    margin: 0 0 4rem;
}
.cs3 h1 br {
    display: none;
}
.cs3 h1 span {
    color: #0da78f;
}
.cs3 h2 {
    font-size: 2.2em;
    color: #000;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 7.7rem;
}

.cs3 .cs3_plans {
    display: flex;
    justify-content: space-between;
}
.cs3 .cs3_plan1 {
    color: #498afe;
}
.cs3 .cs3_plan2 {
    color: #52b6e2;
}
.cs3 .cs3_plan3 {
    color: #5bc3b9;
}
.cs3 .cs3_plan4 {
    color: #4ad4b3;
}
.cs3 .cs3_plan5 {
    color: #0d9767;
}
.cs3 .cs3_plan {
    width: 100%;
    max-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs3 .cs3_plan h2 {
    font-size: 3em;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    margin: 2.1rem 0;
    text-align: center;
    line-height: 1.2;
}
.cs3 .cs3_plan p {
    font-size: 1.8em;
    line-height: 1.3;
    color: #000;
}
.cs3 .cs3_plantriangles {
    padding: 5rem 0 0;
}
.cs3 .cs3_plantriangles .cs3_plantriangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 20px;
}
.cs3_plantriangle1 {
    border-color: transparent transparent transparent #498afe;
}
.cs3_plantriangle2 {
    border-color: transparent transparent transparent #52b6e2;
}
.cs3_plantriangle3 {
    border-color: transparent transparent transparent #5bc3b9;
}
.cs3_plantriangle4 {
    border-color: transparent transparent transparent #4ad4b3;
}
.cs3 a {
    width: 100%;
    max-width: 40em;
    height: 7em;
    background: #ffaa3d;
    border-radius: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 9.5rem auto 2.5rem;
    position: relative;
}
.cs3 a p {
    font-size: 2.2em;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.3rem;
}
.cs3 a::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width:  6.5px 0 6.5px 13px;
    border-color: transparent transparent transparent #fff;
    margin: 0 0 0 1.5em;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0,-50%);
}
.cs3 a:hover {
    background: #ff703d;
}
.cs4 .content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10.5rem 0 12rem;
}
.cs4 h1 {
    font-size: 4em;
    color: #000;
    text-align: center;
    margin: 0 0 10rem;
}
.cs4 h1 span {
    color: #0da78f;
}
.cs4_feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.cs4 .cs4_feature .cs4_boxs {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 400px;
}
.cs4 .cs4_feature .cs4_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cs4_boxb1 h2 {
    border: 1px solid #498afe;
    color: #498afe;
    position: relative;
}

.cs4_boxb2 h2 {
    border: 1px solid #52b6e2;
    color: #52b6e2;
}
.cs4_boxb3 h2 {
    border: 1px solid #5bc3b9;
    color: #5bc3b9;
}
.cs4_boxb4 h2 {
    border: 1px solid #4ad4b3;
    color: #4ad4b3;
}
.cs4_boxb5 h2 {
    border: 1px solid #0d9767;
    color: #0d9767;
}
.cs4 .cs4_boxb {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs4 .cs4_boxb h2 {
    width: 100%;
    max-width: 40rem;
    display: flex;
    align-items: center;
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2;
    border-radius: 4.25rem;
    padding: 0.4rem 3.5rem 0.4rem 0.3rem;
    margin: 0 0 1.2rem;
}
.cs4 .cs4_boxb h2 span {
    margin: 0 0 0 1.8rem;
}
.cs4 .cs4_boxb p {
    width: 100%;
    max-width: 370px;
    font-size: 1.6rem;
    color: #000;
    line-height: 1.5;
}
.cs5{
    background: #ebfdff;
}
.cs5 .content{
    max-width: 120rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 11rem 0;
}
.cs5 h1{
    font-size: 4rem;
    margin: 0 0 4rem;
}
.cs5 h2{
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.3;
    margin: 0 0 10rem;
}
.cs5 a {
    width: 100%;
    max-width: 40em;
    height: 7em;
    background: #ffaa3d;
    border-radius: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 9.5rem auto 2.5rem;
    position: relative;
}
.cs5 a p {
    font-size: 2.2em;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.3rem;
}
.cs5 a::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width:  6.5px 0 6.5px 13px;
    border-color: transparent transparent transparent #fff;
    margin: 0 0 0 1.5em;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0,-50%);
}
.cs5 a:hover {
    background: #ff703d;
}
.cs5_swipers{
    display: none;
}
.cs5 h1 br{
    display: none;
}
.c5_imgspc{
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.cs5_a{
    width: 100%;
    padding: 0 2rem;

}
@media screen and (max-width: 1024px) {
    .cs1{
        background: url("../images/CFV/c1_bgmb.png") no-repeat center !important;
    }
    .cs1 .cs1_brmb{
        display: block;
    }
    .cs1 .content{
        align-items: center !important;
    }
    .cs1 h1{
        text-align: center !important;
    }
    .cs1 a{
        height: 5rem !important;
        position: relative;
        max-width: 28rem !important;
    }
    .cs1 a p{
        font-size: 1.6rem !important;
    }
    .cs1 a::after {
        display: block !important;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width:  6.5px 0 6.5px 13px !important;
        border-color: transparent transparent transparent #fff;
        margin: 0 0 0 1.5em;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translate(0,-50%);
    }
    .cs2 h1 {
        font-size: 2.8rem;
    }
    .cs2 h2 {
        font-size: 1.8rem;
    }
    .cs2 .content {
        padding: 7.8rem 2rem 6rem;
    }
    .cs2 .cs2_boxs {
        flex-wrap: wrap;
    }
    .cs2 .cs2_boxs .cs2_box {
        margin: 0 0 6rem;
    }
    .cs2 .cs2_boxs .cs2_box h3 {
        font-size: 1.8rem;
    }
    .cs2 .cs2_boxs .cs2_box h4 {
        font-size: 2.2rem;
    }
    .cs2 .cs2_boxs .cs2_box p {
        font-size: 1.8rem;
    }

    .cs3 h1 {
        font-size: 2.8rem;
        margin: 0 0 5.3rem;
        line-height: 1.3;
    }
    .cs3 .cs3_plan img {
        width: 120px;
    }
    /* .cs3 a {
        max-width: 28rem;
        height: 5rem;
    }
    .cs3 a p {
        font-size: 2.8rem;
        margin: 0;
    }
    .cs3 a::after {
        border-width: 10px 0 10px 20px;
        margin: 0 0 0 0.8rem;
    } */
    
    .cs4 .cs4_img {
        display: none;
    }
    .cs4 .cs4_feature .cs4_boxs {
        flex-direction: column;
        height: auto;
    }
    .cs4 .content {
        padding: 7.5rem 2rem;
    }
    .cs4 h1 {
        font-size: 2.8rem;
        margin: 0 0 5rem;
        line-height: 1.3;
    }
    .cs4 .cs4_boxb img {
        width: 6.5rem;
    }
    .cs4 .cs4_boxb h2 {
        max-width: 768px;
        font-size: 2rem;
        padding: 0.4rem 1rem 0.4rem 0.3rem;
    }
    .cs4 .cs4_boxb p {
        max-width: 700px;
    }
    .cs4 .cs4_boxb {
        width: 100%;
        margin: 0 0 2rem;
    }
    .cs4 .cs4_boxb h2 span {
        margin: 0 0 0 1rem;
    }
    .cs5_pcimg{
        /* display: none; */
    }
    .c5_imgspc{
        display: none;
    }
    .cs5 h1{
        font-size: 2.8rem;
        line-height: 1.2;
        text-align: center;
        margin: 0 0 4.5rem;
    }
    .cs5 h1 br{
        display: block;
    }
    .cs5 h2{
        font-size: 1.8rem;
        line-height: 1.3;
        text-align: center;
        max-width: 320px;
        margin: 0 0 3rem;
    }
    .cs5 h2 br{
        display: none;
    }
    .cs5 a{
        margin: 4.5rem auto 2.5rem;
    }
    .cs5 .content{
        padding: 7rem 0 ;
    }
    .cs5_swipers {
        display: block;
        width: 100%;
        max-width: 1024px;
        /* background: url("../images/c3_bgmb.png") no-repeat center bottom 30%; */
    }

    .cs5_swipers .swiper-container {
        width: 100%;
        margin: 0;
    }

    .cs5_swipers .swiper-container .swiper-wrapper {
        width: 100%;
        padding: 0 0 0 35px;
    }

    .cs5_swipers .swiper-container .swiper-wrapper .swiper-slide {
        width: calc(1220px + (1400 - 1220) * ((100vw - 360px) / (1024 - 360)));
        padding: 0 60px 0 0;
        /* width: calc(1000px + (1754 - 1000) * ((100vw - 360px) / (1024 - 360))); */
        /* width: 1248px; */
        /* width: 1754px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .cs5_swipers .swiper-container .swiper-wrapper .swiper-slide img {
        margin: 0 0 8px;
    }

    .cs5_swipers .swiper-container .swiper-wrapper .swiper-slide .swiper-title {
        margin: 0 0 15px;
    }

    .cs5_swipers
        .swiper-container
        .swiper-wrapper
        .swiper-slide
        .swiper-title
        h3 {
        font-size: 24px;
        font-weight: bold;
        color: #040000;
        line-height: 1;
        text-align: center;
    }

    .cs5_swipers
        .swiper-container
        .swiper-wrapper
        .swiper-slide
        .swiper-title
        span {
        display: block;
        width: 100%;
        max-width: 108px;
        height: 13px;
        border-radius: 10px;
        background: rgba(216, 66, 87, 0.46);
        margin: -10px 0 0;
    }

    .cs5_swipers .swiper-container .swiper-wrapper .swiper-slide p {
        font-size: 13px;
        color: #040000;
        line-height: 1.5;
        text-align: justify;
    }

    .cs5_swipers .swiper-container .swiper-wrapper .swiper-slide::after {
        content: url("../../images/index/c5_slidearr.png");
        display: block;
        width: 62px;
        height: 11px;
        position: absolute;
        top: 10%;
        left: 90%;
    }

    .cs5_swipers
        .swiper-container
        .swiper-wrapper
        .swiper-slide:last-child::after {
        content: initial;
    }

    .cs5_swipers .swiper-container .swiper-scrollbar {
        margin-top: 2em;
        height: 16px;
        border-radius: 0;
        background: #bbcced;
        position: relative;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        border-radius: 8px;
    }

    .cs5_swipers .swiper-container .swiper-scrollbar-drag {
        border-radius: 0;
        background: #4ad4b3;
        height: 10px;
        border-radius: 5px;
    }

    .cs5_swipers .swiper-container .scroll-hint {
        text-align: center;
        color: #4ad4b3;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        font-size: 1.8em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cs5_swipers .swiper-container .scroll-hint img {
        width: 1.7rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .cs5_swipers .swiper-container .scroll-hint .arr-right {
        animation: scroll-arr-act 2s infinite both;
    }

    .cs5_swipers .swiper-container .scroll-hint .arr-left {
        transform: scale(-1);
        animation: scroll-arr-left 2s infinite both;
    }

    @keyframes scroll-arr-act {
        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateX(0);
        }
        40% {
            transform: translateX(-6px);
        }
        60% {
            transform: translateX(2px);
        }
    }

    @keyframes scroll-arr-left {
        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateX(0) scale(-1);
        }
        40% {
            transform: translateX(2px) scale(-1);
        }
        60% {
            transform: translateX(-6px) scale(-1);
        }
    }
    .cs5_swipers .cs5_plantit {
        width: 100%;
        max-width: 360px;
        height: 42px;
        background: #0d9767;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        font-size: 2.2rem;
        font-weight: bold;
        color: #fff;
        letter-spacing: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 50%;
        bottom: 59px;
        transform: translate(-50%, -50%);
        z-index: 99;
    }
}
@media screen and (max-width: 768px) {
    .cs3 h1 br {
        display: block;
    }
    .cs3 .content {
        padding: 6.8rem 2rem 5.8rem;
    }
    .cs3 .cs3_plans {
        flex-direction: column;
        align-items: center;
    }
    .cs3 .cs3_plan {
        flex-direction: row;
        max-width: initial;
    }
    .cs3 .cs3_plan h2 {
        font-size: 2.2rem;
        text-align: left;
        margin: 4rem 0 1rem;
    }
    .cs3 .cs3_plan img {
        width: 6.8rem;
        margin: 0 1rem 0 0;
    }
    .cs3 .cs3_plantriangles {
        padding: 0;
    }
    .cs3 .cs3_plantriangles .cs3_plantriangle {
        display: none;
    }
}




.table-wrap{
	
	
}

.act-table th ,.act-table td {

    font-size: 1.6em;padding: .7em 1em;line-height: 1.5;vertical-align: middle;
    

}

.act-table th{
    background: #3caa7c;color: #fff;white-space: nowrap;font-weight: bold;
    border-bottom: 1px dashed #5a5b5b;
}
.act-table td{background: #fff;border-bottom: 1px dashed #979e97;
    border-left: 3px solid #fff;
}


.act-table .td-1{background: #d6e1d4;}
.act-table .td-2{background: #d1f4cb;}

.act-table .th-top{border-bottom: 2px solid #fff;padding: 0.5em 1em;
    position: relative;
}

.act-table .icon-like{position: absolute;top: -.4em;}

.act-table h3{
    font-size: 110%;font-weight: bold;margin-bottom: 0;text-align: center;
}
.act-table .text-green{color:#04613a ;}
.act-table .text-red{color:#ee0000;}

 .act-table ol{list-style: disc;padding-left: 1.2em;}

@media screen and (max-width: 768px) {


.table-wrap{
    
    max-width: 100vw;overflow-x: scroll;
}

.table-wrap .act-table{min-width: 180vw;}


.act-table th ,.act-table td {

    font-size: 1.3em;padding: .5em .8em;line-height: 1.2;
    

}




}
:root {
  --deep-green: oklch(48.14% 0.0831 211.76);
}
img{
  max-width: 100%;
  height: auto;
}
.path-card-wrapper:not(:last-child){
  margin-bottom: 4rem;
}
.path-card{
  background-color: var(--deep-green);
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  /* box-shadow: 0 0 0 1px #ebfdff; */
  transition: transform .4s ease;
}
@media (min-width: 768px) {
  .path-card-wrapper:not(:last-child){
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .path-card:hover{
    transform: scale(1.1);
    transition: transform .4s ease;
  }
}

.path-title{
  font-size: 24px;
  position: relative;
  margin-top: -38px;
  padding-bottom: 1.5rem;
}
.text-white{
  color: #fff;
}
.w-100{
  width: 100%;
}
.h-100{
  height: 100%;
}

.container-fluid {
  --gap-width: 12px;
  width: 100%;
  padding: 0 var(--gap-width);
  margin: 0 auto;
  line-height: 1.414;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gap-width) * -1);
}

[class^="col-"] {
  padding: 0 var(--gap-width);
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
.p-1{
  padding: .5rem;
}
.p-2{
  padding: .75rem;
}
.p-3{
  padding: 1rem;
}
.p-4{
  padding: 1.5rem;
}
.p-5{
  padding: 2rem;
}
.pt-1{
  padding-top: .5rem;
}
.pt-2{
  padding-top: .75rem;
}
.pt-3{
  padding-top: 1rem;
}
.pt-4{
  padding-top: 1.5rem;
}
.pt-5{
  padding-top: 2rem;
}
.pb-1{
  padding-bottom: .5rem;
}
.pb-2{
  padding-bottom: .75rem;
}
.pb-3{
  padding-bottom: 1rem;
}
.pb-4{
  padding-bottom: 1.5rem;
}
.pb-5{
  padding-bottom: 2rem;
}
.pl-1{
  padding-left: .5rem;
}
.pl-2{
  padding-left: .75rem;
}
.pl-3{
  padding-left: 1rem;
}
.pl-4{
  padding-left: 1.5rem;
}
.pl-5{
  padding-left: 2rem;
}
.pr-1{
  padding-right: .5rem;
}
.pr-2{
  padding-right: .75rem;
}
.pr-3{
  padding-right: 1rem;
}
.pr-4{
  padding-right: 1.5rem;
}
.pr-5{
  padding-right: 2rem;
}
.m-1{
  margin: .5rem;
}
.m-2{
  margin: .75rem;
}
.m-3{
  margin: 1rem;
}
.m-4{
  margin: 1.5rem;
}
.m-5{
  margin: 2rem;
}
.mt-1{
  margin-top: .5rem;
}
.mt-2{
  margin-top: .75rem;
}
.mt-3{
  margin-top: 1rem;
}
.mt-4{
  margin-top: 1.5rem;
}
.mt-5{
  margin-top: 2rem;
}
.mb-1{
  margin-bottom: .5rem;
}
.mb-2{
  margin-bottom: .75rem;
}
.mb-3{
  margin-bottom: 1rem;
}
.mb-4{
  margin-bottom: 1.5rem;
}
.mb-5{
  margin-bottom: 2rem;
}
.ml-1{
  margin-left: .5rem;
}
.ml-2{
  margin-left: .75rem;
}
.ml-3{
  margin-left: 1rem;
}
.ml-4{
  margin-left: 1.5rem;
}
.ml-5{
  margin-left: 2rem;
}
.mr-1{
  margin-right: .5rem;
}
.mr-2{
  margin-right: .75rem;
}
.mr-3{
  margin-right: 1rem;
}
.mr-4{
  margin-right: 1.5rem;
}
.mr-5{
  margin-right: 2rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.text-center{
  text-align: center!important;
}
.text-left{
  text-align: left!important;
}
.justify-content-center{
  justify-content: center!important;
}
.align-items-center{
  align-items: center!important;
}