@media (min-width: 768px) {
    .swiper-container {

        width: 100%;
        height: 80vh;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #433aff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .banner1 {
        background: url("/word/img/banner1.png");
        background-size: 100% 100%;
    }

    .banner-btn {
        font-size: 0.26rem;
        width: 2rem;
        height: .5rem;
        line-height: .5rem;
        color: white;
        border: white 1.2px solid;
        margin-left: -50%;
        margin-top: 10%;
    }

    .awy_banner-btn {
        position: absolute;
        font-size: 0.26rem;
        width: 2rem;
        height: .5rem;
        line-height: .5rem;
        color: white;
        border: #1E9FFF 1.2px solid;
        left: 50%;
        top:80%;
        transform: translate(-50%) ;
        background: #1E9FFF;
        cursor: pointer;
    }
    .awy_banner-btn:hover {
        position: absolute;
        background: white;
        font-size: 0.26rem;
        width: 2rem;
        height: .5rem;
        line-height: .5rem;
        border: #115283 1.2px solid;
        left: 50%;
        top:80%;
        transform: translate(-50%) ;
        cursor: pointer;
        background: #115283;

    }
    .banner-btn:hover {
        background: white;
        font-size: 0.26rem;
        width: 2rem;
        height: .5rem;
        line-height: .5rem;
        color: #0bbbee;
        border: white 1.2px solid;
        margin-left: -50%;
        margin-top: 10%;
        cursor: pointer;
    }

    #banner2 {
        margin-top: 15%;
    }

    .banner2 {
        background: url("/word/img/banner2.png");
        background-size: 100% 100%;
    }
    .banner3 {
        background: url("/word/img/banner3.jpg");
        background-size: 100% 100%;
    }
    .banner4 {
        background: url("/word/img/banner4.png");
        background-size: 100% 100%;
    }

    .awy_banner {
        background: url("/word/img/awy_banner.png");
        background-size: 100% 100%;
    }

    .awy_banner2 {
        background: url("/word/img/AWY/awy_banner.jpg");
        background-size: 100% 120%;
    }

    .swiper-pagination-bullet {
        width: 18px;
        height: 18px;
    }

    .swiper-pagination-bullet-active-next {
        background: #ffffff;
        opacity: .6;
    }

    .swiper-pagination-bullet-active-prev {
        background: #ffffff;
        opacity: .6;
    }

    .swiper-pagination-bullet-active {
        background: #0bbbee;
    }

    .home ul li a {
        color: #ffffff;
    }

    .home ul li a:hover {
        color: #000000;
    }

    .home ul li ul li a {
        color: #000000;
    }

    .home #try {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        top: 12px;
        right: 2%;
        height: 0.45rem;
        line-height: 0.45rem;
        width: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: color 0.25s;
        background: none;
        border: 0;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 2px #ffffff;
        vertical-align: middle;
    }

    .home #try::before, #try::after {
        box-sizing: inherit;
        content: '';
        position: absolute;
        border: 3px solid transparent;
        width: 0%;
        height: 0%;
    }

    .home #try::before {
        top: 0;
        left: 0;
    }

    .home #try::after {
        bottom: 0;
        right: 0;
    }

    .home #try:hover {
        color: #000000;
        animation: imgAnimation 0.6s forwards;
        animation-delay: 0.6s;
    }

    .home #try:hover::before, #try:hover::after {
        width: 100%;
        height: 100%;
    }

    .home #try:hover::before {
        border-top-color: #000000;
        border-right-color: #000000;
        transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
    }

    .home #try:hover::after {
        border-bottom-color: #000000;
        border-left-color: #000000;
        transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s;
    }

    .index-banner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .home #phonenumber {
        color: white;

    }
}


@media (max-width: 768px) {
    .swiper-container {
        width: 100%;
        height: 58vh;
        margin-top: 2.5rem;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #433aff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .banner1 {
        background: url("/word/img/banner1-mobile.png");
        background-size: 100% 100%;
    }

    .banner-btn {
        visibility: hidden;
    }

    .banner2 {
        background: url("/word/img/banner2-mobile.png");
        background-size: 100% 100%;
    }
    .banner3 {
        background: url("/word/img/banner3-mobile.jpg");
        background-size: 100% 100%;
    }
    .banner4 {
        background: url("/word/img/banner4-mobile.png");
        background-size: 100% 100%;
    }

    .awy_banner2 {
        background: url("/word/img/AWY/awy_banner.jpg");
        background-size: 100% 120%;
    }

    .awy_banner-btn {
        position: absolute;
        font-size: 1rem;
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        color: white;
        border: #1E9FFF 1.2px solid;
        left: 50%;
        top:80%;
        transform: translate(-50%) ;
        background: #1E9FFF;
    }
    .awy_banner {
        background: url("/word/img/awy_banner_mobile.png");
        background-size: 100% 100%;
    }

    .swiper-pagination-bullet {
        width: 13px;
        height: 13px;
    }

    .swiper-pagination-bullet-active-next {
        background: #ffffff;
        opacity: .6;
    }

    .swiper-pagination-bullet-active-prev {
        background: #ffffff;
        opacity: .6;
    }

    .swiper-pagination-bullet-active {
        background: #0bbbee;
    }


    .hide {
        display: none;
        visibility: hidden;

    }

}