/*============================================BANNER====================================*/


#container {
    margin-top: 50px;
    margin-bottom: 20px;
    overflow-x: hidden;

}

.flex-direction-nav a {
    top: 50%;
}

.flexslider li {
    cursor: pointer;
}

.flexslider {
    /*         height: 832px;
 */
}

.flexslider .slides>li {
    height: 400px;
    padding-top: 70px;
}

.flexslider .slides>li,
.flexslider {
    width: 100%;
    font-family: "Microsoft JhengHei", DFKai-SB, sans-serif;
}

.slides h2 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 0 10px;
    /*     padding-top: 50px;
 */
    margin-bottom: 0px;
    margin-top: 0;
    line-height: 1;
}

.slides a.bt {
    background-color: #4c90c7;
    color: white;
    border-radius: 5px;
    font-size: 20px;
    padding: 15px 40px;
    text-decoration: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -80px;
    box-shadow: #b0b0b0 0 1px 2px 1px
}

.slides a.bt:hover {
    background-color: #5badef;
}

.slides p {
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 16px;
    text-align: center;
    padding: 0 20px;
}

.text_white {
    color: #ffffff;
}

.text_MCloud {
    color: #956daf;
}

.text_M2k {
    color: #f39800;
}

.text_Mo {
    color: #a64c2b;
}

.text_Mb {
    color: #0066a6
}

.text_Mg {
    color: #c9242b;
}

.text_Aep {
    color: #8cc63f;
}

.text_Oes {
    color: #aac040;
}

.text_Mm {
    color: #6c63a6;
}

.text_OS {
    color: #e99411;
}

.banner_MCloud {
    background:url("../images/bMac.png") no-repeat;
}

.banner_M2k {
    background: #FFFFFF url("../images/bM2k.jpg") no-repeat;
}
.banner_MM {
    background: #84ccc9 url("../images/bMM.png") no-repeat;
}

.banner_Mo {
    background: #ffffff url("../images/bMo.jpg") no-repeat;
}

.banner_Mb {
    background: #ffffff url("../images/bMb.jpg") no-repeat;
}

.banner_Mg {
    background: url("../images/bMg.jpg") no-repeat;
}

.banner_Ss {
    background: #ffffff url("../images/bSs.jpg") no-repeat;
}

.banner_Oes {
    background: #ffffff url("../images/bOes.jpg") no-repeat;
}

.banner_Mm {
    background: #7f9bc1 url("../images/bMm.jpg") no-repeat;
}

.banner_OS {
    background:#000000 url("../images/bOS.jpg") no-repeat left bottom;
}

.banner_MCloud::before {
    background: url("../images/mcloud_tag.png") no-repeat;
}

.banner_M2k::before {
    background: url("../images/m2k_tag.png") no-repeat;
}

.banner_Mo::before {
    background: url("../images/mo_tag.png") no-repeat;
}

.banner_Mg::before {
    background: url("../images/mg_tag.png") no-repeat;
}

.banner_Ss::before {
    background: url("../images/aep_tag.png") no-repeat;
}

.banner_Mb::before {
    background: url("../images/mb_tag.png") no-repeat;
}

.banner_Mm::before {
    background: url("../images/mm_tag.png") no-repeat;
}

.banner_OS::before {
    background: url("../images/osecure_tag.png") no-repeat;
    z-index: 99;
}

.banner_OS::after {
    background: url("../images/O365_bg.svg") no-repeat right top;
    height: 100%;
    width: 70%;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

.banner_MCloud::before,
.banner_M2k::before,
.banner_Mo::before,
.banner_Mg::before,
.banner_Ss::before,
.banner_Mb::before,
.banner_Mm::before,
.banner_OS::before,
.banner_MM::before  {
    content: "";
    position: absolute;
    -webkit-background-size: 80%;
    background-size: 80%;
    width: 306px;
    height: 78px;
    left: 0;
    top: 0;
}
.banner_MCloud,
.banner_M2k,
.banner_Mo,
.banner_Mb,
.banner_Mg,
.banner_Ss,
.banner_Oes,
.banner_Mm,
.banner_OS,
.banner_MM {
    background-position: center center;
    background-size: 100%;
    position: relative;
}


.flex-control-paging li a {
    width: 115px;
    height: 134px;
    padding: 15px 3px;
    padding-bottom: 0;
    opacity: 0.4;
    cursor: pointer;

    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.flex-control-paging li:first-child a {
    background: url("../images/os_icon.png") no-repeat center center;
}
.flex-control-paging li:nth-child(2) a {
    background: url("../images/owp_icon.png") no-repeat center center;
}
.flex-control-paging li:nth-child(3) a {
    background: url("../images/mcloud_icon.png") no-repeat center center;
}

.flex-control-paging li:nth-child(4) a {
    background: url("../images/m2k_icon.png") no-repeat center center;
}
.flex-control-paging li:nth-child(5) a {
    background: url("../images/mm_icon.png") no-repeat center center;
}
.flex-control-paging li:nth-child(6) a {
    background: url("../images/mo_icon.png") no-repeat center center;
}

.flex-control-paging li:nth-child(7) a {
    background: url("../images/mb_icon.png") no-repeat center center;
}

.flex-control-paging li:nth-child(8) a {
    background: url("../images/mg_icon.png") no-repeat center center;
}

.flex-control-paging li:nth-child(9) a {
    background: url("../images/ss_icon.png") no-repeat center center;
}


/* .flex-control-paging li:nth-child(7) a{
    background: url("../images/oes_icon.png") no-repeat center center;
} */



/*ANIMATE*/


@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}


@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.flex-active-slide>h2 {}

.flex-active-slide>p {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@media(min-width: 480px) {
    .flex-direction-nav a {
        top: 50%;
    }

    .flexslider {
        /*         height: 688px;
 */
    }

    .flexslider .slides>li {
        height: 350px;
    }
}

@media(min-width: 640px) {
    #container {
        margin-top: 55px;
    }

    .flexslider {
        /*         height: 688px;
 */
    }

    .flexslider .slides>li {
        height: 400px;
        -webkit-background-size: 100%;
        background-size: 100%;
        padding-top: 70px;
    }

    .slides h2 {
        font-size: 32px;
        padding: 0 10px;
        /*         padding-top: 50px;
 */
        margin-bottom: 0px;
    }

    .slides p {
        margin-top: 0;
        font-size: 24px;
        padding: 0 20px;
    }

    .slides a.bt {
        padding-top: 0;
        padding-bottom: 0;

    }
    .banner_MCloud{
        background-position: center bottom;
    }    

}

@media(min-width: 768px) {
    #container {
        margin-top: 114px;
    }

    .unslider-nav li {
        padding: 20px 5px;
        padding-bottom: 0;
    }

    .flex-direction-nav a {
        top: 50%;
    }


    .flexslider {
        /*         height: 788px;
 */
        padding-top: 58px;
    }

    .flexslider .slides>li {
        height: 500px;
    }

    .banner_MCloud,
    .banner_M2k,
    .banner_Mo,
    .banner_Mb,
    .banner_Mg,
    .banner_Ss,
    .banner_Oes,
    .banner_Mm,
    .banner_OS {
        background-size: auto;
    }

    .slides h2 {
        font-size: 30px;
        /*         padding-top: 80px;
 */
        margin-bottom: 0px;
    }

    .slides p {
        font-size: 30px;
        margin-top: 0;
        padding: 0 20px;
    }
}

@media only screen and (min-width: 1024px) {
    #container {
        margin-top: 62px;
    }

    .flexslider {
        /*         height: 644px;
 */
        padding-top: 0px;

    }

    .flexslider .slides>li {
        height: 600px;
        -webkit-background-size: inherit;
        background-size: inherit;

    }

    .banner_MCloud::before,
    .banner_M2k::before,
    .banner_Mo::before,
    .banner_Mg::before,
    .banner_Ss::before,
    .banner_Mb::before,
    .banner_Mm::before,
    .banner_OS::before {

        top: 58px;
    }

    .banner_MCloud,
    .banner_M2k,
    .banner_Mo,
    .banner_Mb,
    .banner_Mg,
    .banner_Ss,
    .banner_Oes,
    .banner_Mm,
    .banner_OS {
        background-size: auto;
    }


    .banner_OS::after {
        width: 100%;
    }


    .flex-active-slide>h2 {
        font-size: 36px;
        /*         padding-top: 70px;
 */
        margin-bottom: 0px;
    }

    .slides p {
        font-size: 30px;
        margin-top: 0;
    }

}

@media(min-width: 1366px) {




    .flexslider {
        /*         height: 748px;
 */
        padding-top: 0px;

    }
}

@media only screen and (min-width: 1680px) {
    #container {
        margin-top: 62px;
    }

    .flex-direction-nav a {
        top: 50%;
    }

    .flexslider {
        /*         height: 748px;
 */

    }
    .flex-active-slide>h2 {
        font-size: 46px;

    }

    .slides p {
        font-size: 36px;
    }





    .flexslider .slides>li {
        height: 604px;
        padding-top: 60px;
    }

    .flex-active-slide {
        padding-top: 40px;
    }

    .banner_MCloud::before,
    .banner_M2k::before,
    .banner_Mo::before,
    .banner_Mg::before,
    .banner_Ss::before,
    .banner_Mb::before,
    .banner_Mm::before,
    .banner_OS::before {
        -webkit-background-size: 100%;
        background-size: 100%;
        top: 0;

    }

}