@charset "utf-8";
@mixin H1 {
    font-family: $font-family-H;
    font-size: 34px;
    line-height: 1.8;
}

@mixin H2 {
    font-family: $font-family-H;
    font-size: 24px;
    line-height: 1.8;
}

@mixin H3 {
    font-family: $font-family-H;
    font-size: 20px;
    line-height: 1.8;
}

@mixin H4 {
    font-family: $font-family-H;
    font-size: 16px;
    line-height: 1.9;
}

@mixin H5 {
    font-family: $font-family-H;
    font-size: 14px;
    line-height: 1.7;
}

@mixin A1 {
    font-family: $font-family-H;
    font-size: 14px;
    line-height: 1.4;
}


/*$A2-Blod {
  font-family: PingFangSC-Semibold;
  font-size: 12px;
  line-height: 1.7;
}*/

@mixin A2 {
    font-family: $font-family-H;
    font-size: 12px;
    line-height: 1.7;
}

.base-search-component {
    // overflow: hidden;
    .base-search_is-ie{
        input{
            line-height: 15px !important;
        }
    }
    input::-ms-clear{display:none;}
    margin: 10px 0;
    .search-disabled {
        background-color: #f0f0f0;
    }
    .sys-icon-close{
        cursor: pointer;
        text-decoration: none;
    }
    .base-search-input {
        &:hover{
            border-color: #96d0fa;
        }
        input{
            height: 22px;
        }
        width: 100%;
        /*height: 39px;*/
        // border-bottom: 1px solid #E4EBF0;
        border:1px solid #e4ebf0;
        border-radius:5px;
        position: relative;
        &:after {
            display: block;
            position: absolute;
            content: "";
            left: 50%;
            top: 33px;
            width: 0;
            height: 2px;
            background-color: #1b85d6;
            transition: left ease-in-out .15s, width ease-in-out .15s;
            -ms-transition: left ease-in-out .15s, width ease-in-out .15s;
        }
        .base-search-input-default {
            font-size: 12px;
            line-height: 20px;
            top: -1px;
            left: 0;
            // left: 10px;
            // transform: translate(-50%, -50%);
            // -ms-transform:translate(-50%, -50%);
            // -moz-transform:translate(-50%, -50%);
            // -webkit-transform:translate(-50%, -50%);
            // -o-transform:translate(-50%, -50%);
            pointer-events: none;
            position: absolute;
            .base-search-input-icon {
                color: #8f9ca6;
                margin-right: 3px;
                font-size: 11px;
                display: inline-block;
                line-height: 20px;
                // padding:5px 0;
                vertical-align: top;
                border-radius: 5px;
                background: #FFF;
                margin-left: 1px;
                margin-top: 2px;
                padding: 3px 2px 3px 10px;
                // transform: translateY(2px);
                // -ms-transform:translate(2px);
                // -moz-transform:translate(2px);
                // -webkit-transform:translate(2px);
                // -o-transform:translate(2px);

            }
            .base-search-input-placeholder {
                font-family: $font-family-H;
                padding: 5px 0;
                display: inline-block;
                color: #c3cbd1;
            }
        }
        input {
            font-family: $font-family-H;
            font-size: 14px;
            line-height: 24px;
            padding: 2px 0;
            display: block;
            width: calc(100% - 2px);
            color: $M1;
            text-indent: 25px;
            border: 1px solid transparent;
            outline: none;
            border-radius: 5px;
        }
    }
    .base-search-disabled {
        background-color: #f0f0f0;
        cursor: no-drop;
    }
    .base-search-input-active {
        border: 1px solid #1687d9 !important;
        box-shadow:0 0 2px 1px #96d0fa;
        input{ 
            background:#ffffff;
            border-radius:5px;
        }
        // &:after {
        //     width: 100%;
        //     left: 0;
        //     transition: left $Spring .35s, width $Spring .35s;
        //     -ms-transition:left $Spring .35s, width $Spring .35s;
        //     -moz-transition:left $Spring .35s, width $Spring .35s;
        //     -o-transition:left $Spring .35s, width $Spring .35s;
        //     -webkit-transition:left $Spring .35s, width $Spring .35s;
        // }
        div.base-search-input-default {
            // left: 5px !important;
            // transform: translate(0, -50%);
            // -ms-transform: translate(0, -50%);
            // -moz-transform: translate(0, -50%);
            // -o-transform: translate(0, -50%);
            // -webkit-transform: translate(0, -50%);
            // transition: left $Spring .35s;
            // -ms-transition: left $Spring .35s;
            // -moz-transition: left $Spring .35s;
            // -o-transition: left $Spring .35s;
            // -webkit-transition: left $Spring .35s;
            .base-search-input-icon {
                color: $C3;
            }
            .sys-icon-sousuo {
                &:before{
                    color: $C3
                }
            }
        }
    }
    .sys-icon-close {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 5px;
        font-size: 14px;
        top: 7px;
        &:before {
            color: #acb7bf;
        }
        &:hover {
            &:before {
                color: #cc2929;
            }
        }
    }
}

.search-icon-box {
    width: 100%;
    height: 100%;
    .common-link {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #66757f;
        -webkit-transition: color .3s cubic-bezier(0.25, .1, .25, 1);
        -moz-transition: color .3s cubic-bezier(0.25, .1, .25, 1);
        -ms-transition: color .3s cubic-bezier(0.25, .1, .25, 1);
        -o-transition: color .3s cubic-bezier(0.25, .1, .25, 1);
        transition: color .3s cubic-bezier(0.25, .1, .25, 1);
        text-align: center;
        line-height: 40px!important;
    }
    .list-wrapper {
        width: 340px;
        height: auto;
        max-height: 612px;
        background-color: #fff;
        position: absolute;
        z-index: 1200;
        top: 43px;
        right: 10px;
        overflow: hidden;
        border-radius: 3px;
        -webkit-transform: translate3d(0, 0, 0) scale(0);
        -moz-transform: translate3d(0, 0, 0) scale(0);
        -o-transform: translate3d(0, 0, 0) scale(0);
        transform: translate3d(0, 0, 0) scale(0);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        -o-perspective: 1000;
        perspective: 1000;
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;
        overflow: hidden\9;
        border: 1px solid #e4ebf0;
        display: none\9;
    }
    .list-wrapper.list-open {
        box-shadow: 1px 3px 11px rgba(0, 0, 0, .2);
        -webkit-transition: box-shadow .3s linear .4s;
        -moz-transition: box-shadow .3s linear .4s;
        -ms-transition: box-shadow .3s linear .4s;
        -o-transition: box-shadow .3s linear .4s;
        transition: box-shadow .3s linear .4s;
        -webkit-animation: popShow .3s cubic-bezier(0.66, 1.65, .23, .87) forwards;
        -moz-animation: popShow .3s cubic-bezier(0.66, 1.65, .23, .87) forwards;
        -ms-animation: popShow .3s cubic-bezier(0.66, 1.65, .23, .87) forwards;
        -o-animation: popShow .3s cubic-bezier(0.66, 1.65, .23, .87) forwards;
        animation: popShow .3s cubic-bezier(0.66, 1.65, .23, .87) forwards;
        display: block\9;
    }
    .list-wrapper.list-close {
        display: none\9;
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transition: opacity .2s cubic-bezier(0.25, .1, .25, 1);
        -moz-transition: opacity .2s cubic-bezier(0.25, .1, .25, 1);
        -ms-transition: opacity .2s cubic-bezier(0.25, .1, .25, 1);
        -o-transition: opacity .2s cubic-bezier(0.25, .1, .25, 1);
        transition: opacity .2s cubic-bezier(0.25, .1, .25, 1);
        -webkit-animation: popHide .3s cubic-bezier(0.25, .1, .25, 1) forwards;
        -moz-animation: popHide .3s cubic-bezier(0.25, .1, .25, 1) forwards;
        -ms-animation: popHide .3s cubic-bezier(0.25, .1, .25, 1) forwards;
        -o-animation: popHide .3s cubic-bezier(0.25, .1, .25, 1) forwards;
        animation: popHide .3s cubic-bezier(0.25, .1, .25, 1) forwards;
    }
    @-webkit-keyframes popShow {
        from {
            -webkit-transform: scale(0)
        }
        to {
            -webkit-transform: scale(1)
        }
    }
    @-moz-keyframes popShow {
        from {
            -moz-transform: scale(0)
        }
        to {
            -moz-transform: scale(1)
        }
    }
    @-ms-keyframes popShow {
        from {
            -ms-transform: scale(0)
        }
        to {
            -ms-transform: scale(1)
        }
    }
    @-o-keyframes popShow {
        from {
            -o-transform: scale(0)
        }
        to {
            -o-transform: scale(1)
        }
    }
    @keyframes popShow {
        from {
            transform: scale(0)
        }
        to {
            transform: scale(1)
        }
    }
    @-webkit-keyframes popHide {
        from {
            -webkit-transform: scale(1)
        }
        to {
            -webkit-transform: scale(0)
        }
    }
    @-moz-keyframes popHide {
        from {
            -moz-transform: scale(1)
        }
        to {
            -moz-transform: scale(0)
        }
    }
    @-ms-keyframes popHide {
        from {
            -ms-transform: scale(1)
        }
        to {
            -ms-transform: scale(0)
        }
    }
    @-o-keyframes popHide {
        from {
            -o-transform: scale(1)
        }
        to {
            -o-transform: scale(0)
        }
    }
    @keyframes popHide {
        from {
            transform: scale(1)
        }
        to {
            transform: scale(0)
        }
    }
    .search-icon-box .form-input {
        height: 27px;
        width: 310px;
        margin: 20px 15px;
        border-bottom: 1px solid #e4ebf0;
        position: relative;
    }
    .search-icon-box .form-input-active:after {
        width: 100%;
        left: 0;
        -webkit-transition: left cubic-bezier(0.66, 1.65, .23, .87) .35s, width cubic-bezier(0.66, 1.65, .23, .87) .35s;
        -moz-transition: left cubic-bezier(0.66, 1.65, .23, .87) .35s, width cubic-bezier(0.66, 1.65, .23, .87) .35s;
        -ms-transition: left cubic-bezier(0.66, 1.65, .23, .87) .35s, width cubic-bezier(0.66, 1.65, .23, .87) .35s;
        -o-transition: left cubic-bezier(0.66, 1.65, .23, .87) .35s, width cubic-bezier(0.66, 1.65, .23, .87) .35s;
        transition: left cubic-bezier(0.66, 1.65, .23, .87) .35s, width cubic-bezier(0.66, 1.65, .23, .87) .35s;
    }
    .search-icon-box .form-input:after {
        display: block;
        position: absolute;
        content: "";
        left: 50%;
        top: 26px;
        width: 0;
        height: 2px;
        background-color: #1b85d6;
        -webkit-transition: left cubic-bezier(0.66, 1.65, .23, .87) .15s, width cubic-bezier(0.66, 1.65, .23, .87) .15s;
        -moz-transition: left cubic-bezier(0.66, 1.65, .23, .87) .15s, width cubic-bezier(0.66, 1.65, .23, .87) .15s;
        -ms-transition: left cubic-bezier(0.66, 1.65, .23, .87) .15s, width cubic-bezier(0.66, 1.65, .23, .87) .15s;
        -o-transition: left cubic-bezier(0.66, 1.65, .23, .87) .15s, width cubic-bezier(0.66, 1.65, .23, .87) .15s;
        transition: left cubic-bezier(0.66, 1.65, .23, .87) .15s, width cubic-bezier(0.66, 1.65, .23, .87) .15s;
    }
    .search-icon-box .form-input input {
        display: block;
        width: 100%;
        height: 20px;
        margin: auto;
        line-height: 20px;
        border: 0;
        outline: 0;
        font-size: 14px;
        color: #36434d;
        font-family: $font-family-H;
    }
}