.search_btn{float:right;position:relative;padding-left: 1.25rem;}
.search_btn img{ margin:-3px 0 0 0; cursor:pointer;}


input,button,textarea {background: none; outline: none;border: none;-webkit-appearance:none; border-radius:0;}
input:focus {border: none;}

input::-webkit-input-placeholder{ color:#999;}
input::-moz-placeholder{ /* mozilla firefox 19+ */ color:#999;}
input:-moz-placeholder{ /* mozilla firefox 4 to 18 */ color:#999;}
input:-ms-input-placeholder{ /* internet explorer 10-11 */ color:#999;}
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}

.search-dialog-box{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 12rem;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transition: .6s;}
.search-dialog-box:before{content:"";position:absolute;top:0;height:0;background: #9e2121;transition: .6s;left: 0;right: 0;z-index: 1;}
.search-dialog-box.on:before{ height:100%;}
.search-dialog-box .bubbles-bg{
    opacity: 0;
    visibility: hidden;
    display: none;}
.search-dialog-box .search-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    margin: 0;
    background: rgba(0,0,0,.7);
    background-size: cover;
    background-repeat: no-repeat;
    /* z-index: 1; */
    transform-origin: center center;
    transition: height .8s cubic-bezier(.77,0,.175,1);}
.search-dialog-box .wrap-inner{
    transform:translateY(100%);
    transition: .6s;}
.header-right .bubbles-bg{
    opacity: 0;
    visibility: hidden;
    transition: all .5s .8s;}
.search-dialog-box .bubbles-bg .bubble{
    position: absolute;}
.search-dialog-box .bubbles-bg .bubble .circle{
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;}
.search-dialog-box .bubbles-bg .bubble1{
    width:6%;
    padding-top: 6%;
    left: 26.875%;
    top: -6.67%;}
.search-dialog-box .bubbles-bg .bubble1 .circle{
    border:1px solid #fff;}
.search-dialog-box .bubbles-bg .bubble2{
    width:12px;
    padding-top: 12px;
    left: 13.54%;
    top: 18%;}
.search-dialog-box .bubbles-bg .bubble2 .circle{
    background-color: #ff495f;}
.search-dialog-box .bubbles-bg .bubble3{
    width:36px;
    padding-top: 36px;
    left: 8.854%;
    top: 30.55%;}
.search-dialog-box .bubbles-bg .bubble3 .circle{
    background-color: #fff;}
.search-dialog-box .bubbles-bg .bubble4{
    width:56.875%;
    padding-top: 56.875%;
    left: -28.6458%;
    top: 51.85%;}
.search-dialog-box .bubbles-bg .bubble4 .circle{
    background: -webkit-linear-gradient(45deg, rgba(255,255,255,0),rgba(255,255,255,.05) 100%);
    background: -ms-linear-gradient(45deg, rgba(255,255,255,0),rgba(255,255,255,.05) 100%);
    background: linear-gradient(45deg, rgba(255,255,255,0),rgba(255,255,255,.05) 100%);}
.search-dialog-box .bubbles-bg .bubble5{
    width:54px;
    padding-top: 54px;
    left: 26.3%;
    top: 70.83%;}
.search-dialog-box .bubbles-bg .bubble5 .circle{
    background-color: #fff;
    opacity: .1;}
.search-dialog-box .bubbles-bg .bubble6{
    width:56.875%;
    padding-top: 56.875%;
    left: 73.4375%;
    top: -52.77%;}
.search-dialog-box .bubbles-bg .bubble6 .circle{
    background: -webkit-linear-gradient(135deg, rgba(255,255,255,.05),rgba(255,255,255,.1) 100%);
    background: -ms-linear-gradient(135deg, rgba(255,255,255,.05),rgba(255,255,255,.1) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,.05),rgba(255,255,255,.1) 100%);}
.search-dialog-box .bubbles-bg .bubble7{
    width:2rem;
    padding-top: 2rem;
    left: 60.9375%;
    top: 18.5%;}
.search-dialog-box .bubbles-bg .bubble7 .circle{
    background-color: #ff495f;}
.search-dialog-box .bubbles-bg .bubble8{
    width:1.35rem;
    padding-top: 1.35rem;
    left: 95.83%;
    top: 70.83%;}
.search-dialog-box .bubbles-bg .bubble8 .circle{
    border:1px solid #fff;}
.search-dialog-box .bubbles-bg .bubble9{
    width:16px;
    padding-top: 16px;
    left: 76.5625%;
    top: 96.296%;}
.search-dialog-box .bubbles-bg .bubble9 .circle{
    background-color: #fff;}
.search-dialog-box .bubbles-bg .bubble10{
    width:56.875%;
    padding-top: 56.875%;
    left: 71.354%;
    top:87%;}
.search-dialog-box .bubbles-bg .bubble10 .circle{
    background: -webkit-linear-gradient(135deg, rgba(255,255,255,.05),rgba(255,255,255,.3) 100%);
    background: -ms-linear-gradient(135deg, rgba(255,255,255,.05),rgba(255,255,255,.3) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,.05),rgba(255,255,255,.3) 100%);}
.search-dialog-box .bubbles-bg .bubble{
    animation:spin 8s infinite linear;
    transform-origin: 50% 45%;}
.search-dialog-box .bubbles-bg .bubble:nth-child(2n){
    animation:spin2 8s infinite linear;}
.search-dialog-box .bubbles-bg .bubble .circle{
    animation:spin-reverse 8s infinite linear;}
.search-dialog-box .bubbles-bg .bubble:nth-child(2n) .circle{
    animation:spin-reverse2 8s infinite linear;}
.search-dialog-box .bubbles-bg .sm-bubble{
    transform-origin: 30% 30px;}
.search-dialog{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2;}
.search-dialog .search-tit{
    font-size: 2.75rem;
    line-height: 3.5rem;
    color: #fff;
    text-align: center;
    overflow: hidden;
    display: none;}
.search-dialog .search-inner{
    overflow: hidden;
    margin-top: 0;}
.search-dialog .search-input{
    width: 50rem;
    margin: 0 auto;
    padding: 0 0.5rem 0 1.5rem;
    background-color: rgba(255,255,255,.1);
    box-sizing: border-box;
    transition: all .3s;
    max-width: 94%;}
.search-dialog .search-input input[type=text]{
    float: left;
    height: 4.5rem;
    width: calc(100% - 3.5rem);
    background-color: transparent;
    font-size: 1.25rem;
    line-height: .5rem;
    color: #fff;
    transition: all .3s;}
.search-dialog .search-input input[type=text]::-webkit-input-placeholder{
    color:rgba(255,255,255,0.5);}  
.search-dialog .search-input input[type=text]:-moz-placeholder{
    color:rgba(255,255,255,0.5);}  
.search-dialog .search-input input[type=text]::-moz-placeholder{
    color:rgba(255,255,255,0.5);}  
.search-dialog .search-input input[type=text]:-ms-input-placeholder {
    color:rgba(255,255,255,0.5);} 
.search-dialog .search-input input[type=submit],
.search-dialog .search-input .clear-btn{
    float: right;
    height: 4.5rem;
    width: 3.5rem;}
.search-dialog .search-input input[type=submit]{
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
    background-image: url(images/search-btn.svg);}
.search-dialog .search-input .clear-btn{
    background-color: rgba(0,0,0,.2);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(images/close-btn.svg);
    background-size: 3.5rem;
    border-radius: 100%;
    margin-right: 1rem;
    display: none;}
.search-dialog .search-input.on{
    background-color: #fff;}

.search-dialog .search-input.on input[type=submit]{}

.search-dialog .hot-search{
    font-size: 0;
    width:19.5rem;
    margin:.6rem auto 0;
    box-sizing: border-box;
    padding:0 .6rem;
    overflow: hidden;}
.search-dialog .hot-search .hot-tit,
.search-dialog .hot-search .hot-link{
    display: inline-block;
    *display: inline;
    zoom:1;
    vertical-align: top;}
.search-dialog .hot-search .hot-tit{
    font-size: .375rem;
    line-height: .5rem;
    color: #fff;
    font-weight: bold;
    padding-left: .6rem;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: .5rem;}
.search-dialog .hot-link{
    margin-left: 1rem;}
.search-dialog .hot-link a{
    display: inline-block;
    *display: inline;
    zoom:1;
    font-size: .375rem;
    line-height: .5rem;
    margin-right: .75rem;
    color:#fff;
    padding-bottom: 5px;
    position: relative;}

.search-dialog .hot-link a:before{
    content: "";
    position: absolute;
    left:0%;
    bottom:0;
    width:100%;
    height: 2px;
    background-color: #fff;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .3s;}
.search-dialog-box .bottom-box{
    position: absolute;
    left: 0;
    bottom:5.1%;
    width:100%;}
.search-dialog-box .bottom-box .share-box{
    overflow: hidden;}
.search-dialog-box .bottom-box .copy{
    font-size: .35rem;
    line-height:.5rem;
    color: #fff;
    font-family: "gilroy-regular";
    margin-top: .5rem;
    overflow: hidden;}
.header-right.is-open .bubbles-bg{
    visibility: visible;
    opacity: 1;}
.header-right.is-open .search-btn .con-box{
    display:none;}
.header-right.is-open .close-btn{
    display:block;}
.header-right.is-open .item .search-bg{
    transform:scale(1);}
.search-dialog-box.on{
    opacity: 1;
    visibility: visible;}
.search-dialog-box.on .search-bg{height: 100vh;}

.search-dialog-box.on .bubbles-bg{opacity: 1;visibility: visible;}
.search-dialog-box.on .wrap-inner{ transform:translateY(0);}

.pub-close {
    position: absolute;
    width: 3rem;
    height: 3rem;
    z-index: 10;
    right: 1.5rem;
    top: 1.35rem;
    background-color: rgba(255,255,255,.1);
    border-radius: 100%;}
.pub-close .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #1c5ab7;
    transform: scale(0);
    border-radius: 100%;
    transition: transform .3s;}
.pub-close i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 0.75rem;
    background-repeat: no-repeat;
    background-image: url(images/close-btn.svg);
    transition:.6s
;}
.pub-close i:hover{ transform:rotate(180deg);}

@keyframes spin{
    to{transform: rotate(1turn);}
}
@keyframes spin2{
    to{transform: rotate(-1turn);}
}
@keyframes spin-reverse{
    from{
        transform:rotate(1turn);}
}
@keyframes spin-reverse2{
    from{
        transform:rotate(-1turn);}
}