.elementor-1165 .elementor-element.elementor-element-012b4cf > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-1165 .elementor-element.elementor-element-012b4cf:not(.elementor-motion-effects-element-type-background), .elementor-1165 .elementor-element.elementor-element-012b4cf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6EDF0;}.elementor-1165 .elementor-element.elementor-element-012b4cf > .elementor-container{max-width:1240px;}.elementor-1165 .elementor-element.elementor-element-012b4cf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:20px 0px 20px 0px;}.elementor-1165 .elementor-element.elementor-element-012b4cf > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1165 .elementor-element.elementor-element-50fdc2e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1165 .elementor-element.elementor-element-3959f26{--display:flex;--justify-content:center;}.elementor-1165 .elementor-element.elementor-element-7471be3{--spacer-size:15px;}.elementor-1165 .elementor-element.elementor-element-94b88bb .elementor-heading-title{font-size:25px;}.elementor-1165 .elementor-element.elementor-element-1ac5bdf{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1165 .elementor-element.elementor-element-8a487d1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1165 .elementor-element.elementor-element-3649a4f{--display:flex;--justify-content:center;}.elementor-1165 .elementor-element.elementor-element-3d0d058{--spacer-size:15px;}.elementor-1165 .elementor-element.elementor-element-d43ff7e .elementor-heading-title{font-size:25px;}.elementor-1165 .elementor-element.elementor-element-294fc93{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1165 .elementor-element.elementor-element-a352853{--divider-border-style:dotted;--divider-color:#000;--divider-border-width:1px;}.elementor-1165 .elementor-element.elementor-element-a352853 .elementor-divider-separator{width:100%;}.elementor-1165 .elementor-element.elementor-element-a352853 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1165 .elementor-element.elementor-element-0e7b4c7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1165 .elementor-element.elementor-element-6fec658{--display:flex;--justify-content:center;}.elementor-1165 .elementor-element.elementor-element-eb6cf16 .hfe-site-logo-container, .elementor-1165 .elementor-element.elementor-element-eb6cf16 .hfe-caption-width figcaption{text-align:left;}.elementor-1165 .elementor-element.elementor-element-eb6cf16 .widget-image-caption{margin-top:0px;margin-bottom:0px;}.elementor-1165 .elementor-element.elementor-element-eb6cf16 .hfe-site-logo-container .hfe-site-logo-img{border-style:none;}.elementor-1165 .elementor-element.elementor-element-fe34885{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:56px 56px;--row-gap:56px;--column-gap:56px;}.elementor-1165 .elementor-element.elementor-element-0f6c5d7{--display:flex;}.elementor-1165 .elementor-element.elementor-element-2f72708 .elementor-menu-toggle{margin:0 auto;}.elementor-1165 .elementor-element.elementor-element-2f72708 .elementor-nav-menu--main .elementor-item{padding-top:5px;padding-bottom:5px;}.elementor-1165 .elementor-element.elementor-element-f52fd7a{--display:flex;}.elementor-1165 .elementor-element.elementor-element-af82d62 .elementor-menu-toggle{margin:0 auto;}.elementor-1165 .elementor-element.elementor-element-af82d62 .elementor-nav-menu--main .elementor-item{padding-top:5px;padding-bottom:5px;}.elementor-1165 .elementor-element.elementor-element-42508d0{--display:flex;}.elementor-1165 .elementor-element.elementor-element-6cc54ff .elementor-menu-toggle{margin:0 auto;}.elementor-1165 .elementor-element.elementor-element-6cc54ff .elementor-nav-menu--main .elementor-item{padding-top:5px;padding-bottom:5px;}.elementor-1165 .elementor-element.elementor-element-680ab6f{--display:flex;--justify-content:center;}.elementor-1165 .elementor-element.elementor-element-ce5d43d{--grid-template-columns:repeat(0, auto);--icon-size:15px;--grid-column-gap:0px;--grid-row-gap:0px;}.elementor-1165 .elementor-element.elementor-element-ce5d43d .elementor-widget-container{text-align:center;}.elementor-1165 .elementor-element.elementor-element-a02bba9 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-1165 .elementor-element.elementor-element-a02bba9 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-1165 .elementor-element.elementor-element-a02bba9{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-1165 .elementor-element.elementor-element-a02bba9 .elementor-icon-list-text{transition:color 0.3s;}.elementor-1165 .elementor-element.elementor-element-d96a9c7{--divider-border-style:dotted;--divider-color:#000;--divider-border-width:1px;}.elementor-1165 .elementor-element.elementor-element-d96a9c7 .elementor-divider-separator{width:100%;}.elementor-1165 .elementor-element.elementor-element-d96a9c7 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1165 .elementor-element.elementor-element-cc45d63:not(.elementor-motion-effects-element-type-background), .elementor-1165 .elementor-element.elementor-element-cc45d63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6EDF0;}.elementor-1165 .elementor-element.elementor-element-cc45d63{border-style:solid;border-width:1px 0px 0px 0px;border-color:rgba(122,122,122,0.13);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 0px 30px 0px;}.elementor-1165 .elementor-element.elementor-element-cc45d63 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1165 .elementor-element.elementor-element-063b7fa .hfe-copyright-wrapper{text-align:left;}.elementor-1165 .elementor-element.elementor-element-216ef7d .hfe-copyright-wrapper{text-align:right;}@media(min-width:768px){.elementor-1165 .elementor-element.elementor-element-6fec658{--width:15%;}.elementor-1165 .elementor-element.elementor-element-0f6c5d7{--width:50%;}.elementor-1165 .elementor-element.elementor-element-f52fd7a{--width:100%;}.elementor-1165 .elementor-element.elementor-element-42508d0{--width:100%;}}@media(max-width:1024px){.elementor-1165 .elementor-element.elementor-element-012b4cf{padding:0px 0px 0px 0px;}.elementor-1165 .elementor-element.elementor-element-8a51de1 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-1165 .elementor-element.elementor-element-50fdc2e{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-1165 .elementor-element.elementor-element-3959f26{--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1165 .elementor-element.elementor-element-7471be3{--spacer-size:0px;}.elementor-1165 .elementor-element.elementor-element-1ac5bdf{--justify-content:center;}.elementor-1165 .elementor-element.elementor-element-8a487d1{--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-1165 .elementor-element.elementor-element-3649a4f{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}}@media(max-width:767px){.elementor-1165 .elementor-element.elementor-element-012b4cf{padding:50px 10px 10px 10px;}.elementor-1165 .elementor-element.elementor-element-50fdc2e{--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}.elementor-1165 .elementor-element.elementor-element-94b88bb{text-align:center;}.elementor-1165 .elementor-element.elementor-element-1ac5bdf{--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-1165 .elementor-element.elementor-element-8a487d1{--padding-top:70px;--padding-bottom:70px;--padding-left:70px;--padding-right:70px;}.elementor-1165 .elementor-element.elementor-element-d43ff7e{text-align:center;}.elementor-1165 .elementor-element.elementor-element-eb6cf16 .hfe-site-logo-container, .elementor-1165 .elementor-element.elementor-element-eb6cf16 .hfe-caption-width figcaption{text-align:center;}.elementor-1165 .elementor-element.elementor-element-063b7fa .hfe-copyright-wrapper{text-align:center;}.elementor-1165 .elementor-element.elementor-element-216ef7d .hfe-copyright-wrapper{text-align:center;}}/* Start custom CSS for html, class: .elementor-element-a564c05 *//* 搜索表单基础样式 - 可自定义 */
.search-container {
    display: flex;
    width: 100%;
}

.search-input {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
    outline: none;
    background: white;
}

.search-btn {
    padding: 12px 24px;
    background: #000;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}

/* 超大屏幕 (1200px以上) - 修改这里的数值 */
@media (min-width: 1200px) {
    .search-input { width: 72%; flex: none; }
    .search-btn { width: 28%; flex: none; }
}

/* 电脑端 (992px-1199px) - 修改这里的数值 */
@media (min-width: 992px) and (max-width: 1199px) {
    .search-input { width: 72%; flex: none; }
    .search-btn { width: 28%; flex: none; }
}

/* 平板端 (768px-991px) - 修改这里的数值 */
@media (min-width: 768px) and (max-width: 991px) {
    .search-input { width: 55%; flex: none; }
    .search-btn { width: 45%; flex: none; }
}

/* 手机端 (576px-767px) - 修改这里的数值 */
@media (min-width: 576px) and (max-width: 767px) {
    .search-container { flex-direction: row; }
    .search-input { width: 70%; flex: none; }
    .search-btn { width: 30%; flex: none; }
}

/* 小手机端 (575px以下) - 垂直布局 */
@media (max-width: 575px) {
    .search-container { flex-direction: column; }
    .search-input { 
        width: 100%; 
        border-radius: 4px;
        border-right: 1px solid #ddd;
        margin-bottom: 8px;
    }
    .search-btn { 
        width: 100%; 
        border-radius: 4px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1ac5bdf */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }
        
        body {
            background: #f5f5f5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .search-form {
            display: flex;
            width: 100%;
            max-width: 800px;
        }
        
        .search-input {
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-right: none;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
            outline: none;
        }
        
        .search-button {
            padding: 12px 24px;
            background: #000;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            font-size: 16px;
            cursor: pointer;
            white-space: nowrap;
        }
        
        /* 超大屏幕 (1200px以上) */
        @media (min-width: 1200px) {
            .search-input {
                width: 70%;
                flex: none;
            }
            .search-button {
                width: 28%;
                flex: none;
            }
        }
        
        /* 电脑端 (992px - 1199px) */
        @media (min-width: 992px) and (max-width: 1199px) {
            .search-input {
                width: 70%;
                flex: none;
            }
            .search-button {
                width: 45%;
                flex: none;
            }
        }
        
        /* 平板端 (768px - 991px) */
        @media (min-width: 768px) and (max-width: 991px) {
            .search-input {
                width: 70%;
                flex: none;
            }
            .search-button {
                width: 45%;
                flex: none;
            }
        }
        
        /* 手机端 (576px - 767px) */
        @media (min-width: 576px) and (max-width: 767px) {
            .search-form {
                flex-direction: row;
            }
            .search-input {
                width: 70%;
                flex: none;
            }
            .search-button {
                width: 45%;
                flex: none;
            }
        }
        
        /* 小手机端 (575px及以下) */
        @media (max-width: 575px) {
            .search-form {
                flex-direction: column;
            }
            .search-input {
                width: 100%;
                border-radius: 4px;
                border-right: 1px solid #ddd;
                margin-bottom: 8px;
            }
            .search-button {
                width: 100%;
                border-radius: 4px;
            }
        }
    </style>
</head>
<body>
    <form class="search-form">
        <input type="text" class="search-input" placeholder="Type to start searching...">
        <button type="submit" class="search-button">Search Product</button>
    </form>
</body>
</html>/* End custom CSS */