#obtn .so{ float:right; position:relative; z-index:6; height: 45px; margin: 20px 0 20px 20px; padding-right: 20px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
#obtn .so:after{position: absolute; content: ''; width:0px; height:30px; right: 0; top:50%; margin-top: -15px; background: #dddddd;}
#obtn .so:before{position: absolute; content: ''; width:0; height:1px; background: #dfdfdf; right: 20px; bottom: 0;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
#obtn .so .Search{ float:left; width:0; height:35px; background:#C01; background:none; border:0; line-height:22px; padding:7px 0; overflow:hidden; color:#C0C0C0; font-size:16px; margin-top: 5px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
#obtn .so .sear_sub{ float:left; width:24px; height:24px; background:url(../img/Search.png) center no-repeat; margin: 11px 0 10px 0;border:0px;}
#obtn .so.on .Search,
#obtn .so:hover .Search{ width:180px;}
#obtn .so.on:before,
#obtn .so:hover:before{ width:180px;}
#obtn .so ::-webkit-input-placeholder{color:#999;}
#obtn .so :-moz-placeholder{color:#999;}
#obtn .so ::-moz-placeholder{color:#999;}
#obtn .so :-ms-input-placeholder{color:#999;}


@media screen and (max-width:1230px){
    
}
@media screen and (max-width:1700px){
    #obtn .so{margin: 20px 0 20px 20px;padding-right: 20px;}
    #obtn .so:before{right:40px;}
    #obtn .so.on .Search,
    #obtn .so:hover .Search{ width:180px;}
    #obtn .so.on:before,
    #obtn .so:hover:before{ width:180px;}

}
@media screen and (max-width:1569px){
    #obtn .so{margin: 20px 0 20px 20px;padding-right: 20px;}
    #obtn .so .Search{font-size: 14px;}
    #obtn .so:before{right:20px;}
    #obtn .so.on .Search,
    #obtn .so:hover .Search{ width:100px;}
    #obtn .so.on:before,
    #obtn .so:hover:before{ width:125px;}
}
@media screen and (max-width:1229px){
    #obtn .so{height: 41px;margin: 12px 0 12px 15px;padding-right: 15px;}
    #obtn .so .sear_sub{width: 20px; height: 20px;background: url(../img/top2.png) center no-repeat; background-size: cover; position: relative; z-index: 3;}
    #obtn .so:before{right:15px;}
    #obtn .so:after{height: 26px;margin-top: -13px;}
    #obtn .so .Search{position: absolute; right:5px; z-index: 1;}
    #obtn .so.on .Search,
    #obtn .so:hover .Search{ width:160px; background: #f5f5f5; text-indent: 12px;}
    #obtn .so.on:before,
    #obtn .so:hover:before{ width:0;}
}
@media screen and (max-width:991px ){
#obtn .so .sear_sub{ float:left; width:24px; height:24px; background:url(../img/Search.png) center no-repeat; margin: 11px 0 10px 0;border:0px;}
#obtn .so.on .Search,
#obtn .so:hover .Search{ width:180px;}
#obtn .so.on:before,
#obtn .so:hover:before{ width:170px;}
#obtn .so ::-webkit-input-placeholder{color:#999;}
#obtn .so :-moz-placeholder{color:#999;}
#obtn .so ::-moz-placeholder{color:#999;}
#obtn .so :-ms-input-placeholder{color:#999;}
}