﻿@media(min-width: 1113px) {
    h1 {
        margin-left: 20px
    }
}

@media(max-width: 1600px) {
    .comingSoon {
        font-size: 1.875rem;
        letter-spacing: .09375rem;
        line-height: 2.8125rem
    }
}

@media(max-width: 1366px) {
    .comingSoon {
        font-size: 1.75rem;
        letter-spacing: .0875rem;
        line-height: 2.625rem
    }

    .a2Space {
        top: 0;
        padding-top: 0;
    }

    .topX {
        margin-top: 0;
    }

    .tSpce {
        top: 0;
        margin-top: 0;
    }

    .tRight {
        position: relative
    }

    .width1072 {
        justify-content: center
    }
}

@media(max-width: 1024px) {
    .comingSoon {
        font-size: 1.625rem;
        letter-spacing: .08125rem;
        line-height: 2.4375rem
    }
}


    @media (max-width: 767.98px) {
        .tSpce {
            top: 0;
        }

        .titT {
            font-size: 1.5rem;
            height: 190px;
        }

        .tLeft {
            position: relative;
        }

        .tRight span img {
            margin-right: -1.5rem;
        }

        .topX {
            margin-top: 0;
        }

        .a1Space2 {
            top: 100px;
        }
    }

    @media (max-width: 767.98px) {
        .a1Space {
            width: calc(100% - 100px);
        }



        .a4Space {
            margin-top: 90px;
        }

        .a1Btn img {
            margin-top: -5px;
        }

        .a1Banner img {
            margin-bottom: -5px;
        }
    }

    @media (max-width: 575.98px) {
        .a1Space {
            width: calc(100% - 20px);
        }

        .a4Space {
            margin-top: 70px;
        }
    }

    @media (max-width: 767.98px) {
        .a1Space {
            flex-direction: column;
        }

        .a1Banner {
            width: 100%;
        }

        .a1BtnBox {
            width: 100%;
            flex-direction: row;
        }

        .a1Btn {
            width: calc(100% / 3);
        }
    }

    @media (min-width: 1420px) {
        .bgMountain {
            bottom: -80%;
        }

        .bgMountain2 {
            bottom: -100%;
        }
    }

    @media (min-width: 2688px) {
        .bgMountain {
            bottom: -120%;
        }

        .bgMountain2 {
            bottom: -140%;
        }
    }

    @media (max-width: 767.98px) {
        .bgMountain {
            bottom: -40%;
        }

        .bgMountain2 {
            bottom: -60%;
        }

        .topt {
            display: none;
        }
    }

    @media (max-width: 575.98px) {
        .ttopBar {
            position: relative;
            left: -48px;
        }
    }

    @media only screen and (min-width: 300px) and (max-width: 350px) {
        .ifmoiveX {
            height: 109px !important;
        }
    }

    @media only screen and (min-width: 351px) and (max-width: 400px) {
        .ifmoiveX {
            height: 147px !important;
        }
    }

    @media(max-width: 420px) {
        .comingSoon {
            font-size: 1.5rem;
            letter-spacing: .075rem;
            line-height: 2.25rem
        }
    }

    @media only screen and (min-width: 401px) and (max-width: 450px) {
        .ifmoiveX {
            height: 185px !important;
        }
    }

    @media only screen and (min-width: 451px) and (max-width: 500px) {
        .ifmoiveX {
            height: 222px !important;
        }
    }

    @media only screen and (min-width: 501px) and (max-width: 575px) {
        .ifmoiveX {
            height: 260px !important;
        }
    }

    @media only screen and (min-width: 576px) and (max-width: 600px) {
        .ifmoiveX {
            height: 176px !important;
        }
    }

    @media only screen and (min-width: 601px) and (max-width: 650px) {
        .ifmoiveX {
            height: 213px !important;
        }
    }

    @media only screen and (min-width: 651px) and (max-width: 700px) {
        .ifmoiveX {
            height: 250px !important;
        }
    }

    @media only screen and (min-width: 701px) and (max-width: 767px) {
        .ifmoiveX {
            height: 288px !important;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 800px) {
        .ifmoiveX {
            height: 220px !important;
        }
    }

    @media only screen and (min-width: 801px) and (max-width: 850px) {
        .ifmoiveX {
            height: 258px !important;
        }
    }

    @media only screen and (min-width: 851px) and (max-width: 900px) {
        .ifmoiveX {
            height: 295px !important;
        }
    }

    @media only screen and (min-width: 901px) and (max-width: 950px) {
        .ifmoiveX {
            height: 333px !important;
        }
    }

    @media only screen and (min-width: 951px) and (max-width: 1000px) {
        .ifmoiveX {
            height: 370px !important;
        }
    }

    @media only screen and (min-width: 1001px) and (max-width: 1050px) {
        .ifmoiveX {
            height: 408px !important;
        }
    }

    @media only screen and (min-width: 1051px) and (max-width: 1100px) {
        .ifmoiveX {
            height: 408px !important;
        }
    }

    @media only screen and (min-width: 1101px) and (max-width: 1150px) {
        .ifmoiveX {
            height: 408px !important;
        }
    }

    @media only screen and (min-width: 1151px) and (max-width: 1180px) {
        .ifmoiveX {
            height: 445px !important;
        }
    }

    @media only screen and (min-width: 1181px) {
        .ifmoiveX {
            height: 445px !important;
        }
    }

    @media screen and (max-width:1113px) {
        body {
            background: #fff url(../img/bgBanner.jpg) 0 0/contain no-repeat !important;
        }

        h1 a.logo {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 229px;
            height: 58px;
            display: block;
            z-index: 5;
        }

        .banner_wrap {
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .circle1 {
            width: 95vw;
        }

        .banner_btn {
            width: 100vw;
            overflow: hidden;
        }

        .taiwan_sdg1 {
            left: 28%;
            top: 28.5%;
        }

        .banner_btn {
            width: 100vw;
            overflow: hidden;
        }

            .banner_btn img {
                width: 110vw;
                margin-left: -5vw;
            }

        .circle1 svg {
            width: 100%;
            overflow: hidden;
            height: auto;
        }

        .site .box ul {
            width: calc(100% / 2 - 20px);
        }

        .gobal {
            flex-wrap: wrap;
        }

            .gobal a {
                width: 50%;
                flex-direction: column;
                align-items: center;
            }

        .numberb {
            margin-left: 0;
        }

        header {
            min-height: 100px;
            width: 100%;
            margin: 0;
        }

            header.on {
                background-color: transparent;
                border-bottom: none;
                border-top: none;
            }

        .marqee {
            margin-top: 97px;
        }

            .marqee.hide {
                margin-top: 70px;
            }

        .banner {
            padding-top: 30px;
        }

        header.on .rainbow,
        header.on hr {
            display: none;
        }

        .submenu {
            display: block;
            overflow-y: scroll;
            width: 100%;
        }

            .submenu li > .hasChild {
                opacity: 1;
            }

            .submenu li {
                width: 100%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: auto;
                flex-flow: unset;
                flex-direction: column;
                z-index: unset;
                overflow: hidden;
            }

                .submenu li.nsdnmenu > .hasChild ul {
                    width: 100%;
                    flex-wrap: wrap
                }

                .submenu li.nsdnmenu > .hasChild {
                    display: none;
                    position: relative;
                    top: unset;
                    transition: unset;
                    padding-top: 0;
                }

                .submenu li > .hasChild.on {
                    position: relative;
                    display: block;
                    transition: all 0.3s;
                }

                .submenu li.nsdnmenu:hover > .hasChild,
                .submenu li.nsdnmenu:focus-within .hasChild {
                    width: 100%;
                    padding: 20px;
                    background-color: #eee;
                }

                .submenu li > .hasChild > .width1340 {
                    flex-direction: column;
                }

                .submenu li .hasChild li {
                    padding: 0;
                }

                .submenu li > .hasChild li a {
                    border: none;
                }

                .submenu li.nsdnmenu span:after {
                    transform: rotate(135deg);
                    transition: all 0.3s;
                }

                .submenu li.nsdnmenu > .hasChild ul li {
                    flex-direction: column;
                    width: 100%;
                }

                .submenu li.nsdnmenu > .hasChild ul {
                    width: 100%;
                }

                .submenu li.nsdnmenu.widthauto > .hasChild ul {
                    width: 100%;
                }

                .submenu li.nsdnmenu.on span:after {
                    transform: rotate(-45deg);
                    border-bottom: none;
                    border-left: none;
                    margin-bottom: -5px;
                    transition: all 0.3s;
                }

                .submenu li span,
                .submenu li span {
                    height: auto;
                    width: 100%;
                    display: flex;
                    padding: 20px 0;
                    justify-content: center;
                    border-bottom: #ccc 1px solid;
                }

                .submenu li a {
                    flex-grow: unset;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    text-align: center;
                }

        .inside1 {
            width: 95%;
        }

            .inside1 ul {
                justify-content: center;
            }

                .inside1 ul li {
                    margin: 0 10px;
                }

        .inside_banner3 {
            margin-top: 70px;
        }

        .about_bg {
            padding-top: 0;
        }

        .submenu li.search a {
            display: none
        }

        .submenu li.search {
            border-bottom: none;
            background-color: #eee
        }

            .submenu li.search .hasChild {
                display: block;
                position: relative;
                background: #fff;
                background-color: #eee;
                padding: 20px 0;
            }
        /*mobile�詨鱓*/
        #mobile_menu_labIcon {
            display: block;
            position: fixed;
            right: 12px;
            top: 20px;
            margin-top: 5px;
            z-index: 1000;
        }

        #menu_mobile {
            width: 100%;
            height: auto;
            margin: 0 auto;
            font-size: 1em;
            position: relative;
            display: block;
        }

        .hamburger {
            cursor: pointer;
            display: block;
        }

        .hamburger2 {
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: block;
        }

            .hamburger2 .line {
                width: 30px;
                height: 3px;
                background-color: #d09623;
                display: block;
                margin: 4px auto;
                -webkit-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
                border-radius: 50px;
            }

            .hamburger2:hover {
                cursor: pointer;
            }

        .hamburger .line {
            width: 30px;
            height: 3px;
            background-color: #000;
            display: block;
            margin: 4px auto;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border-radius: 50px;
        }

        .hamburger:hover {
            cursor: pointer;
        }

        #hamburger-1.is-active .line:nth-child(2) {
            opacity: 0;
        }

        #hamburger-1.is-active .line:nth-child(1) {
            transform: translateY(3px) rotate(45deg);
        }

        #hamburger-1.is-active .line:nth-child(3) {
            transform: translateY(-11px) rotate(-45deg);
        }

        .portfolio-filter.isotope-filter.pull-center {
            width: calc(100% - 80px);
            height: 100%;
            position: fixed;
            left: calc(-100% + 80px);
            top: 0;
            z-index: 9999;
            background: #fff;
            margin-bottom: 0;
            margin-top: 0;
            transition: 0.3s;
        }

        .btn.SearchBtn {
            position: absolute;
            right: 10px;
        }

        .portfolio-filter.isotope-filter.pull-center.on {
            left: 0;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
        }

        .new_flex {
            flex-direction: column;
        }

        .pt_news_data,
        .audiovisual,
        .Country,
        .Country2 {
            width: 100%;
        }

        .frame {
            display: block;
        }

        .ADyears_b {
            flex-direction: column
        }

        .ADyears,
        .addimg {
            width: 100%;
            margin-right: 0;
        }

        .local_bg,
        .icon-search {
            display: none
        }

        .about_bg .width1340 {
            flex-direction: column;
        }

        .AboutClub {
            width: 100%;
        }

        .about_bg img {
            width: 90%;
            margin: 40px auto;
        }
    }


@media (max-width: 1000px) {
    .col-sm-6.col-md-3.middle {
        width: 100%;
        max-width: 100%;
        flex: unset;
    }
}


@media(min-width: 768px) and (max-width: 768px) {
    .col-sm-6.col-md-3.middle {
        max-width: 100%;
        flex: unset;
    }
}
