@media (max-width: 769px) {
    * {
        box-sizing:border-box;
    }
    .main {
        width:100%;
    }
    .main-content {
        width:100%;
        float:initial;
        padding:10px;
    }
    img {
        max-width: 100%;
        height: initial !important;
    }
    .header1_top {
        display:none;
    }
    #header1 {
        text-align: center;
        background-image: url('/images/home/Header/Header.png');
        background-color:#bfd0a6;
        background-position: right top; /* 靠右居中 */
        background-size: 190% auto;
        height:206px;
    }
    .logo {
        position: absolute;
        margin-top: 5px;
        width: 110px;
        bottom: 2px;
        top: initial;
        left: 50%;
        margin-left: -55px;
    }
    .header1_search {
        float:initial;
    }
    #header1 a.header1_cart {
        margin: 10px 10px 0 0;
        right: 2px;
        left:initial;
        width:135px;
        top:initial;
        bottom: 15px;
    }
    #header1 .header1_search {
        margin: 10px 20px 0 0;
    }
    .header1_right {
        margin-bottom:5px;
    }
    .header1_search img {
        width:80%;
    }
    #header1 .header1_bar {
        position: initial;
        display: none;
    }
    .leftcontainer {
        display:none;
        float:initial;
        padding-right:25px;
    }
    .homebanner {
        width:100%;
    }
    .header1_search input {
        height:25px;
        width:170px;
    }
    .brandbox {
        width: 100%;
        box-sizing: border-box;
    }
    .gate-operator .grid {
        grid-template-columns: 1fr;
    }

    .gate-operator .span-2 {
        grid-column: span 1;
    }
    .imgcir {
        width: 90px;
    }
    .imgcira {
        width:90px;
        margin-left:-45px;
        margin-top:-40px;
    }
    .homebanner1 {
        width:100%;
    }
    .footer-links {
    }
    .footer-links a {
        white-space: nowrap;
    }
    .footer1_copy {
        float:none;
        padding:5px 10px;
    }
    .copyright {
        float: none;
        padding: 5px 10px;
    }
    .footer_time, .footer1_bottom {
        height: auto;
    }
    .certifications {
        gap: 10px;
        padding: 10px 0 10px;
    }
    .titlebar {
        width: 100%;
        display: block;
    }
    .titlebar-left {
        margin-bottom:10px;
    }
    .titlebar-nav {
        line-height:20px;
    }
    .pro-item {
        display: flex;
        flex-direction: column; /* 改为上下结构 */
    }
    .main-content > table {
        width:initial;
    }
    .contentblock {
        margin-right: 0;
    }
    /* 上半部分（图片 + 按钮）左右排列 */
    .pro-item .listproimg-td {
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }

        .pro-item .pro-item-actions {
            display: inline-block;
            vertical-align: top;
            text-align: right;
            line-height:28px;
        }

        /* 包个容器：上面两块左右排列 */
        .pro-item .listproimg-td,
        .pro-item .pro-item-actions {
            display: inline-block;
            height:auto;
        }

        /* 下半部分（描述）整行显示 */
        .pro-item .pro-item-desc {
            width: 100%;
            padding:0 10px;
            margin-top: 0px;
        }
    .prolistwrap {
        width:100%;
    }
    .pro-item-desc table {
        max-width:100%;
        width:100%;
    }
    .accu_content, .accu_header {
        width: 100%;
        margin:0;
    }
    .qty-input {
        height:23px;
    }
    .qa-container {
        width:100%;
    }
        .qa-container .qa-rep {
            width: 25%;
            margin-right: 0;
        }
    .qa-container .qa-detail {
        width:75%;
        padding-left:15px;
    }
    .list-actions {
        width:130px;
    }
    .pro-list-tb td.pro-img-td {
        height:auto;
        width:85px;
    }
    .pro-list-tb td.pro-info-td {
        width:auto;
        padding-left:0;
    }
    .prod-info {
        flex-direction: column;
    }

        .prod-info .prod-img,
        .prod-info .prod-rinfo {
            flex: 0 0 100%;
            width: 100%;
        }
    .desccontent table {
        width: 100% !important; /* 强制让表格宽度自适应 */
        max-width: 100% !important; /* 防止超出容器 */
        border-collapse: collapse;
        table-layout: auto;
    }
    .reviews .leftblock {
        width:100%; 
    }
    .rating-review-header {
        width:22%;
    }
    .rating-right {
        width:77%;
        margin-left:0;
        padding-left:20px;
    }
    .desccontent {
        padding:0 8px;
    }
    .mobile-menu-btn {
        display: block;
        position: absolute;
        bottom: 25px;
        left: 10px;
    }
    .leftcontainer {
        width:100%;
    }
    .leftnavads {
        display:none;
    }
    .leftflex {
        display: flex;
        justify-content: space-between
    }
    .lineheightm18, .gatePartList {
        line-height: 24px;
    }
    .product-manuals ul li {
        padding:4px 0;
    }
    .width770, .wid500 {
        width: 100%;
    }
    .page-content-container {
        width:100%;
    }
    .tdactions img {
        display:none;
    }
    .pro-list-tb {
        width:100%;
    }
    .tdactions {
        width:90px;
        line-height:30px;
    }
    .aboutusbg {
        flex-direction:column;
    }
    .aboutustxt {
        width:100%;
    }
    .design-your-gate-box {
        width:100%;
    }
    .width500, ul.design-your-gates-tabs {
        width: 100%;
    }
    .pro-item .pro-item-actions {
        text-align: center;
        margin-top: 10px;
        width: 80%;
    }

        .pro-item-actions > span {
            display: block;
            text-align: center;
            font-size: 18px;
        }

        .pro-item-actions > div {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100% !important;
        }
            .pro-item-actions > div div {
                margin-right:10px;
            }


            .pro-item-actions a.linkbutton2 {
                flex: 1;
                text-align: left;
            }

        .pro-item-actions a.linkbutton1 {
            flex: 1;
            text-align: left;
        }
    .estate-swing .estate-swing-desc {
        width:100%;
        height:auto;
        overflow:initial;
    }
    .estate-swing .estate-swing-banners {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .estate-swing .estate-swing-banners img {
        margin: 0 auto;
    }
    .img100 {
        max-width:100%;
    }
    .accessoriesvideo {
        width:100%;
        height:300px;
    }
    .apollologo #tabbox {
        width:100%;
    }
    .apollologo .tabs {
        height:initial;

    }
        .apollologo .tabs:after {
            content:'';
            display:block;
            clear:both;
        }
    .apollo-box, .apollo-box-more {
        height:initial;
        width:initial;
    }
    .warranty {
        padding-left:0;
    }
    .col_2_border {
        width:100%;
        display:block;
        border-right:none;
    }
    .mobiletb {
        width:100%;
        overflow-x:scroll;
    }
    .packagediv {
        width: 100%;
    }
    .eventrepeat {
        width:100%;
    }
    .desccontent div {
        max-width: 100% !important;
        height: initial !important;
        width: initial !important;
    }
        .desccontent div.glossary-pop {
            width: 225px !important;
            max-width:initial !important;
        }
        .desccontent iframe {
            width: initial !important;
            max-width: 100%;
        }
    #chatBeaconBtn {
        right: 10px;
        bottom: 10px;
    }
    #backtop {
        right: 20px;
    }
    #chatBeaconBtn {
        right: 20px !important;
        bottom: 20px !important;
        width:50px !important;
    }
        #chatBeaconBtn img {
            width:50px !important;
        }
    .gatedesignvideo {
        width: 100%;
        height: 250px;
    }
    .gate-option {
        width: 50%;
        margin: 10px auto;
    }

    .shipping-time {
        font-size: 16px;
        margin-bottom: 5px;
        left: 0;
        width: 100%;
    }

    .gatequotenew .row3 .start-icon {
        width: 92px;
        top: 32px !important;
    }
    .gatequotenew .row3 {
        padding-bottom:20px;
    }
    #flyout li span {
        width:100%;
    }
    #flyout {
        position:initial;
        width:100%;
    }
    ul#flyout li {
        width: 100%;
        position: relative;
        z-index:initial;
    }
    #flyout #flyoutLi2_ul, #flyout #flyoutLi3_ul, #flyout #flyoutLi4_ul, #flyout #flyoutLi5_ul, #flyout #flyoutLi6_ul, #flyout #flyoutLi1_ul {
        left: 0;
        top: 0;
        width: 100%;
        height:initial;
    }
    #flyoutLi5_ul .intomore {
        width:150px;
    }
     li.sub-title2 {
        margin-bottom:8px !important;
    }
    #flyoutLi6_ul .menu-accessories-img {
        width:170px;
    }
    #flyoutLi4_ul .intomore {
        width:180px;
    }
    #flyoutLi3_ul > li > em:first-child, #flyoutLi3_ul > li > em:last-child {
        width:46%;
    }
    #flyout #flyoutLi3_ul {
        background: url(images/Why_Choose_Our_Gates-_Opener_Accessories_Menu_Ad_PNG.png) #fff right bottom no-repeat;
        background-size: 70% auto;
    }
    #flyout #flyoutLi2_ul {
        background: url(images/Why-Choose-Our-Gates-Menu-Ad.png) #fff right top no-repeat;
        background-size: 70%;
    }
    #flyout #flyoutLi1_ul {
        background-size: 100% auto;
    }
    .titlebar-nav a {
        width: 40%;
        display: inline-block;
    }
    .quicklinks {
        padding-left:0px;
    }
        .quicklinks li {
            list-style:none;
            width:48%;
            margin:4px 0;
            white-space:nowrap;
            overflow:hidden;
        }
        .quicklinks li:nth-child(even) {
            float: right;
        }
    .mobileclear {
        clear:both;
    }
    .pro-livechat {
        float:initial;
        width: 100%;
        padding-right:0;
        margin-top:15px;
    }
    span#included, span#anthony {
        font-size: 13px !important;
    }
    .gate-gallery-list, .gate-gallery .gate-gallery-example {
        width: 100%;
    }
    .gate-gallery-list table {
        width: 100%;
        table-layout: fixed;
    }
    .gate-gallery-list td {
        vertical-align: top;
    }
    .gate-gallery-list div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .gate-gallery-list div img {
        width: 100%;
        height: 105px !important;
        object-fit: contain;
        background: #fff;
    }
    .gate-gallery-list center {
        display: block;
        min-height: 42px;
        line-height: 1.2;
    }
    .gate-gallery .gate-gallery-example .example-img {
        width:100%;
    }
    #Footer_dst6Articles tr td {
        width: 50% !important;
    }
   
    .apollologo .tabs {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

        .apollologo .tabs li a {
            min-height: 120px;
            padding: 10px 6px;
            font-size: 14px;
        }

            .apollologo .tabs li a img {
                max-width: 72px;
                max-height: 72px;
            }
    .testimonialtxt {
        max-width:100%;
    }
    .qa-text {
        display:none;
    }
    .qa-description {
        width: 100% !important;
        height: initial !important;
    }
    .cusinstaltitle {
        width:100%;
    }
    .div_top .div_top_left, .div_horizontal {
        width: 100%;
    }
    .desccontent table[background*="DESCRIPTIONS"] tr td:last-child {
        display: none;
    }

    .desccontent table:has(td[style*="width: 33%"] ul),
    .desccontent table:has(td[style*="width: 33%"] ul) tbody,
    .desccontent table:has(td[style*="width: 33%"] ul) tr,
    .desccontent table:has(td[style*="width: 33%"] ul) td {
        display: block;
        width: 100% !important;
    }

        .desccontent table:has(td[style*="width: 33%"] ul) td {
            border-right: none !important;
            border: 1px solid #ddd !important;
            border-radius: 8px;
            margin-bottom: 12px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
        }
    .desccontent iframe, .note-video-clip {
        max-width: 100%;
    }
    .gc-responsive-block {
        display: block !important;
        padding: 0 12px !important;
        box-sizing: border-box;
    }

        .gc-responsive-block > div {
            width: 100% !important;
            max-width: 100% !important;
            flex: none !important;
        }

            .gc-responsive-block > div + div {
                margin-top: 22px !important;
            }

    .gc-note-box img {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
    }
    .gc-rust-gallery {
        display: block !important;
    }

        .gc-rust-gallery > div:first-child {
            margin-bottom: 12px;
        }

        .gc-rust-gallery img {
            max-width: 100% !important;
            height: auto !important;
        }

        .gc-rust-gallery div[style*="grid-template-columns"] {
            grid-template-columns: repeat(2,1fr) !important;
        }
    .desccontent .blocktable {
        display:block;
    }
    .desccontent .blocktable td{
        display: block;
        width: 100% !important;
    }
    .leftcontactus {
        width:100%;
    }
    .shoppingcart-grid {
        display: block;
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
    }
    .shoppingcart-grid tbody {
        display: block;
        width: 100%;
    }
    .shoppingcart-grid tr {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 10px;
        border: 1px solid #cfcfcf;
        background: #fff !important;
    }
    .shoppingcart-grid tr:first-child {
        display: none;
    }
    .shoppingcart-grid td {
        display: block;
        width: 100% !important;
        padding: 4px 0 !important;
        border: 0 !important;
        text-align: left !important;
        background: transparent !important;
    }
    .shoppingcart-grid td:nth-child(1) {
        text-align: center !important;
        padding-bottom: 8px !important;
    }
    .shoppingcart-grid .product_image {
        width: 84px;
        max-height: 84px;
        object-fit: contain;
        margin: 0 auto;
    }
    .shoppingcart-grid td:nth-child(2) {
        font-weight: bold;
        line-height: 1.35;
        padding-bottom: 10px !important;
    }
    .shoppingcart-grid td:nth-child(n+3) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 30px;
        border-top: 1px solid #ececec !important;
    }
    .shoppingcart-grid td:nth-child(n+3):before {
        color: #555;
        font-weight: bold;
        white-space: nowrap;
    }
    .shoppingcart-grid td:nth-child(3):before {
        content: "Quantity";
    }
    .shoppingcart-grid td:nth-child(4):before {
        content: "Price";
    }
    .shoppingcart-grid td:nth-child(5):before {
        content: "Subtotal";
    }
    .shoppingcart-grid td:nth-child(6):before {
        content: "Remove";
    }
    .shoppingcart-grid td:nth-child(n+4) {
        text-align: right !important;
    }
    .shoppingcart-grid input[type="text"] {
        max-width: 56px;
        text-align: center;
    }
    .shoppingcart-grid center {
        display: inline-block;
    }
    .shoppingcart-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 10px;
        margin-top: 8px;
        text-align: center;
    }
    .shoppingcart-actions:after {
        display: none;
    }
    .shoppingcart-actions a,
    .shoppingcart-actions .checkoutbutton1,
    .shoppingcart-actions .continuebtn,
    .shoppingcart-actions .updatebtn {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }
    .shoppingcart-actions a {
        display: inline-flex;
        align-items: center;
    }
    .shoppingcart-actions a img {
        display: block;
    }
    .shoppingcart-actions .continuebtn {
        order: 1;
    }
    .shoppingcart-actions a#email_quote {
        order: 2;
    }
    .shoppingcart-actions .updatebtn {
        order: 3;
    }
    .shoppingcart-actions .checkoutbutton1 {
        order: 4;
    }
    .page-title {
        width:100%;
    }
    .pagecontent {
        width:100%;
    }
    .div_top_right {
        text-align:center;
        width:100%;
    }
    .homebanner .swiper-button-prev, .homebanner .swiper-button-next, .homebanner .autocontroller {
        display: none;
    }
    .solar-intro {
        padding:0 10px 10px 10px;
    }
    #divEmail p {
        width:100% !important;
    }
}

@media (max-width: 768px) {
    .leftcontainer .belowm1 {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: flex-start;
    }

    .leftcontainer .belowm1 .leftcontactus {
        flex: 0 0 100%;
        width: 100%;
    }

    .leftcontainer .belowm1 .customservice,
    .leftcontainer .belowm1 .technicalservice,
    .leftcontainer .belowm1 .GateManufacuring,
    .leftcontainer .belowm1 .youtubeinfo {
        flex: 1 1 calc(25% - 5px);
        width: auto;
        min-width: 0;
        aspect-ratio: 187 / 103;
        height: auto;
        background-size: 100% 100%;
    }

    .leftcontainer .belowm1 .youtubeinfo img {
        display: block;
        width: 100%;
        height: auto !important;
    }
    .leftlivechat {
        width:100%;
    }
        .leftlivechat .livechat-top {
            width: 100%;
            background-color: #43512e;
        }
        .leftcontainer .testimonials-inline {
            width: 100%;
        }

    .table-design-gates {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 10px;
    }

    .table-design-gates .design-gate-item {
        padding-top: 20px;
        font-size:13px;
    }

    .table-design-gates .design-gate-item img {
        width: 100%;
        max-width: 240px;
    }

    .table-design-gates .design-gate-promo {
        grid-column: 1 / -1;
        padding-top: 20px;
    }
    .unavailable-bg {
        display: none;
    }
}
@media (max-width: 431px) {
    #header1 {
        height:142px;
    }
    .logo {
        left:80px;
        margin-left:0;
    }
    #header1 .header1_search {
        margin: 5px 5px 0 0;
    }
    .header1_search input {
        height: 20px;
        width: 150px;
    }
    .leftcontainer {
    padding-right:10px;
    }

    .leftcontainer .belowm1 .customservice,
    .leftcontainer .belowm1 .technicalservice,
    .leftcontainer .belowm1 .GateManufacuring,
    .leftcontainer .belowm1 .youtubeinfo {
        flex-basis: calc(50% - 3px);
    }
}
/* -------------------------------------------------------------------
 * 3. 中型设备 (Medium Devices)
 * 例如：普通平板
 * 屏幕宽度 >= 768px 时应用
 * ------------------------------------------------------------------- */
@media (min-width: 768px) {
    body {
    }

    .container {
        max-width: 720px;
    }

    /* 在平板上，元素可以并排显示 */
    .column {
        float: left;
        width: 50%;
    }
   
   
}

/* -------------------------------------------------------------------
 * 4. 大型设备 (Large Devices)
 * 例如：桌面电脑
 * 屏幕宽度 >= 992px 时应用
 * ------------------------------------------------------------------- */
@media (min-width: 992px) {
    body {
    }

    .container {
    }
}

/* -------------------------------------------------------------------
 * 5. 超大型设备 (Extra Large Devices)
 * 例如：大尺寸桌面显示器
 * 屏幕宽度 >= 1200px 时应用
 * ------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .container {
    }
}