/*
#header-top{height:40px; font-size:16px;margin:0 auto;text-align:center;font-size:14px;background:#eee;}
.headernav-top{display: inline-block;width:100%;position:relative;text-align:left;padding-top:15px;float:left;padding:0px;white-space:nowrap;height:40px;overflow:hidden;}

.headernav-top ul{float:left;position:absolute;padding-left: 20px;width:100%;line-height: 40px;}
.headernav-top li{float:left;margin-left:10px;color:#222;}
.headernav-top ul li.title a:link{color:#444;text-decoration:none;}
.headernav-top ul li.title a:visited{color:#444;text-decoration:none;}
.headernav-top ul li.title a:hover,a:active{color:#000;text-decoration:none;}

.headernav-top .title{letter-spacing:1px;color:#000;}
.select-submenu img:hover
{
  transform: scale(1.03);
  opacity: 1;  
}

.select-submenu img
{
  opacity: .99;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}

#header{height:90px;margin:0 auto;text-align:center;color:#000;font-size:12px;background:#222;}
.headernav{display: inline-block;width:100%;position:relative;text-align:left;margin-top:15px;float:left;padding:0px;white-space:nowrap;height:65px;overflow:hidden;}
.headernav ul{cursor:pointer;float:left;position:relative;left:5%;width:16%;padding-top: 10px;}
.headernav li{float:left;margin-left:10px;}
.headernav .icon{}
.headernav .title{letter-spacing:1px;color:#fff;font-size:16px;}
.headernav .title a:link,a:visited{color:#fff;text-decoration:none;}
.headernav .title a:hover,a:active{color:#fff;text-decoration:none;}
.headernav span.note{letter-spacing:1px;color:#eee; font-size:13px;line-height: 35px;}

.header-link img:hover{  

  transform: scale(1.05);
  opacity: 1;  
}

.header-link img{

  opacity: 1;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease
}

#header-nav-item .selected:hover{
  transform: scale(1);
  font-size:17px;
  opacity: 1;
}

#header-nav-item .selected{
  opacity: 1;
  font-size:16px;
  color:#fff;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.select-submenu dl a:hover{
  transform: scale(1.01);
  font-size:17px;
}

.select-submenu dl a{ 
  font-size:16px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

*/

/** 头部logo及主item */
body{background: #fff;}
#diy-header{position:fixed;z-index:1;width:100%;background: #fff;z-index: 99999999999;}
.diy-header{display: block;border:  max-height: 100px;top:0;
     -moz-box-shadow:0 0 5px #06c;
     -webkit-box-shadow:0 0 5px #06c;
     box-shadow:0 0 5px #06c;
}

.lb-clearfix:after, .lb-clearfix:before {
    content: " ";
    display: table;
}

.diy-nav{position: relative;}
.diy-nav,.diy-nav .full{background: none;}
.diy-nav-alpha{background:rgba(235,235,235,0.8);}
.diy-nav a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.diy-nav a, .diy-nav a:focus, .diy-nav a:visited {
    color: #003180;
}

.diy-nav-panel-wrapper a, .diy-nav-panel-wrapper a:visited {
    color: #ddd;
}

.diy-nav-panel-wrapper h4 a,.diy-nav-panel-wrapper h3 a,.diy-nav-panel-wrapper h3 a:visited, .diy-nav-panel-wrapper h4 a:visited{
    color:#fff;
}

.diy-nav-panel-wrapper h4 a:hover,.diy-nav-panel-wrapper h3 a:hover, .diy-nav-panel-wrapper h4 a:hover{
    color:#b5b5b5;
}

#products-website a,#products-website a:visited {
  color: #ddd;
}
#products-website a:hover,.diy-nav-panel-link a:hover{

  color: #b5b5b5;
}

.diy-nav-panel-link span {
    display: block;
    font-weight: 400;
}

.diy-nav-panel-wrapper span {
    color: #b5b5b5;
    font-size:0.85rem;
}

.diy-nav-header{overflow: hidden;position: relative;max-height:100px;min-height: 68px;padding: 0 40px 0 30px;background-color: #fff;color: #003180;line-height: 1.6rem;background:none;}
.diy-nav-logo{
    margin: 0px;
    color:#fff;
    font-family:DiyMedium;
    z-index:10;max-width:300px;font-size:1.6rem;font-weight: 600;}
.diy-nav-menu
{
  position: relative;
  float: left;
  max-width: 100%;
  margin-top: 1.25rem;
  /*margin-bottom: -9px;*/
}

.diy-nav-item{
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    font-size: 15px;
    transition: opacity .2s ease-in-out;
    margin-top:22px;
}

.diy-nav-item .item{border-radius: 2px;border-bottom: solid 4px #fff;}
/*.diy-nav-item .item:hover{border-radius:2px;border-bottom: solid 4px #0177FD;}*/
.diy-nav-item .active .item{border-radius:2px;border-bottom: solid 4px #0177FD;}

.diy-nav-panel-link .active{
  color:#0177FD;
}
.diy-nav-item .active a,.diy-nav-group a.active{
  color:#0177FD;
  transition: opacity .2s ease-in-out;
}

.diy-nav-item dl{
  position: relative; 
  flex-direction: column;justify-content: center; 
  left: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;font-size: 0;margin: 0 2.5px 0 2.5px;padding: 14px 10px 0 0;list-style-type: none;
  white-space: nowrap;transition: left .2s ease-in-out;
  font-size: 1rem;
  color:#fff;
}

/** logo **/
.devdiy-logo{width:260px;height:60px;padding:0 0px 12px 0px;margin:0px;object-fit:contain;}
/** 搜索 **/
.search-icon{width:18px;height:18px;}
/** 语言icon */
.lang-icon{ width:18px;height:18px;}

.diy-nav-item dl:first-child{
  margin-left:0px;
}

.diy-nav-item a{
    display: inline-block;
    margin: 0 15px 22px 15px;
    padding-bottom:7px;
    white-space: nowrap;    
}

.diy-nav-item a:hover{
    display: inline-block;
    margin: 0 15px 22px 15px;
    padding-bottom:7px;
    white-space: nowrap;    
}

/** mobile start */
.diy-mobile-nav-item{
    display: -ms-flexbox;
    display: block;
    position: relative;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    font-size: 15px;
    transition: opacity .2s ease-in-out;
    margin-top:22px;
}

.diy-mobile-nav-item .item{border-radius: 2px;border-bottom: solid 4px #fff;}
/*.diy-nav-item .item:hover{border-radius:2px;border-bottom: solid 4px #0177FD;}*/
.diy-mobile-nav-item .active .item{border-radius:2px;border-bottom: solid 4px #0177FD;}

.diy-mobile-nav-panel-link .active{
  color:#0177FD;
}
.diy-mobile-nav-item .active a,.diy-nav-group a.active{
  color:#0177FD;
  transition: opacity .2s ease-in-out;
}

.diy-mobile-nav-item dl{
  position: relative; 
  flex-direction: column;justify-content: center; 
  left: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;font-size: 0;margin: 0 2.5px 0 2.5px;padding: 14px 10px 0 0;list-style-type: none;
  white-space: nowrap;transition: left .2s ease-in-out;
  font-size: 1rem;
  color:#fff;
}

.diy-mobile-nav-item dl:first-child{
  margin-left:0px;
}

.diy-mobile-nav-item a{
    display: inline-block;
    margin: 0 15px 22px 15px;
    padding-bottom:7px;
    white-space: nowrap;    
}

.diy-mobile-nav-item a:hover{
    display: inline-block;
    margin: 0 15px 22px 15px;
    padding-bottom:7px;
    white-space: nowrap;    
}
/** mobile end */

/** 右侧item */
.diy-nav-group
{   
    position: absolute;
    float: right;
    right:40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align:center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 35px;
    margin: 17px 0 -10px 0;
    font-size:0.875rem;
}

.diy-nav-group>a{
  padding: 0px 0.875rem 0px 0.875rem;
}

/** 用户**/
.diy-nav-user{text-align: center;line-height:2rem;margin-top:1.05rem;}
/** 登录*/
.diy-nav-login {margin-right:0.875rem;padding:0 0.6rem 0 0.6rem;}

/** 注册 */
.diy-nav-reg{width:133px;height:2rem;background: #EC7211;border:solid 1px #E76D0C;border-radius: 3px;box-shadow: 0px 1px 3px rgba(0,0,0,0.5);}
.diy-nav-reg a span{display: block;font-family:DiyMedium;color:#fff;}


/** 移动端 **/
.diy-nav-mobile{display: none;}
.diy-nav-mobile a, .diy-nav-mobile a:focus, .diy-nav-mobile a:visited {    
    
    color:rgb(0, 49, 128); 
}
.diy-mobile-nav-item .active a{color:#0177FD;}
.diy-mobile-lang img{width:1.125rem;height: 0.75rem;}
.diy-mobile-lang li{width:100%;height:1rem;}
.diy-mobile-lang img{width:1.125rem;height: 0.75rem;margin-top:0.3rem;margin-right:0.3rem;}

.diy-nav-mobile-header{overflow: hidden;position: relative;max-height:50px;min-height:50px;padding: 0 20px 0 20px;background:#0E2244;color: #333;line-height: 1.6rem;}

.diy-nav-mobile-logo{
    margin:0px;
    z-index:99999999999;
    height:45px;
    padding:0px 3px;
}

/** 移动端右侧 */
.diy-nav-mobile-group{
    position: fixed;
    display: none;
    right:20px;
    top: 15px;
    cursor: pointer;
}
.diy-nav-mobile-group span:first-child {
    margin-top: 0;
}
.diy-nav-mobile-group span {
    background: #fff;
    display: block;
    width: 25px;
    height: 3px;
    margin-top: 5px;
    transition: all 0.3s;
}

.diy-nav-panel-active{
  opacity: 1;
  z-index: 99999999999999999999;
  padding-bottom: 40px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
}

.diy-nav-panel-wrapper-item{
  position: absolute;
  bottom: 100%;
  top: 0px;
  height: auto;
  z-index:0;
  display: block;  
  min-height: 450px;  
  background-color: #232f3e;
  border-top: 1px solid #141a22;
  color: #ddd;
  font-size: 15px;
  opacity: 1;
  left: 30px;
  right: 40px;
}

/** 顶部面板 */
.diy-nav-panel-wrapper
{
    background: hsla(0,0%,100%,.5);
    padding: 0 40px;
    position: absolute;    
    display: none;
    top: 105px;
    min-height: 450px;
    left: 0;
    right: 0;
    bottom: 0;
    opacity:0;
}

.diy-page-with-optin .diy-nav-panel-exits {
    top: 114px;
}

.diy-nav-panel-exits {
    background: hsla(0,0%,100%,.5);
    padding: 0 40px;
    position: absolute;
    z-index: 99999999999999999999;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

/** 滚动条*/
 /*顶部/底部图标颜色scrollbar-arrow-color: #000;*/
     /*滚动条颜色 scrollbar-face-color: #333;*/
    /*scrollbar-shadow-color: #999;滚动条阴影颜色 width:5px;*/ 

/** 面板数据 **/
.diy-nav-sidebar-menu{   
  -ms-flex: 0 0 260px;
    flex: 0 0 260px;
    padding: 30px 0;
    border-right: 1px solid #141a22;
    font-size: 15px;
    position: relative;
    overflow: auto;
    transition: opacity .2s ease-in-out;
    transition-delay: .1s;
    height: 100%;
}

.diy-nav-sidebar-menu .active{
  opacity: 1;   
}

.diy-nav-sidebar-menu .diy-nav-panel-link {
    margin-bottom: 0;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    transition-delay: .1s;
}

.diy-nav-panel-header{
  margin-bottom: 10px;
  display: block;
}
.diy-nav-panel-header, .diy-nav-txt-large {
    font-size: 1rem;
}

.diy-nav-sidebar-menu a{
  color:#ddd;
}

.diy-nav-panel-link {
    margin-bottom: 20px;
}

.diy-nav-sidebar-menu a.active {
    color: #f8991d;
    opacity:0;
    text-decoration: none;
    transition: opacity .2s ease-in-out;
    transition-delay: .1s;
}

.diy-nav a.lb-active, .diy-nav a.diy-active, .diy-nav a:active {
    color: #f8991d;
    text-decoration: none;
}

.diy-nav-sidebar-panel {
    /*visibility: hidden;*/
    display: -ms-flexbox;
    display: flex;
}

.diy-nav-panel,.diy-nav-sidebar-panel {
    position: absolute;
    right: 50%;
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    max-width: 1200px;
    width: calc(100% - 80px);
    height: 100%;
}

/** 顶部布局横屏3列 */
.diy-nav-panel,.diy-nav-sidebar-panel-full {
  /*
    position: absolute;
    right: 0%;
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    
    width: 100%;
    height: 100%;
  */
  position: absolute;
  right: 50%;
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  max-width: 1200px;
  width: calc(100% - 80px);
  height: 100%;
}

.diy-nav-panel-grid-wrap figure {
    display: block;    
    max-width: 33.33%;
}


h3.diy-txt-20{font-size:1.25rem;line-height:1.5; margin-block-start:0rem;margin-block-end:0rem;}


h4.diy-txt-14{
    display: block;
    font-size: 0.875rem;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h4.diy-txt-18{
  font-size: 1.125rem;
  line-height: 30px;
  margin-bottom: 5px;
}

h4 a:link{ color: #ffffff; }

.diy-nav-svg img, .diy-nav-svg svg {
    height: 100%;
    width: 100%;
}
.diy-nav-svg img, .diy-nav-svg svg {
    max-width: 100%;
}

.diy-nav-panel-wrapper:not(.diy-nav-transitioned)
{
  transition: opacity .1s,bottom .1s;
}

#diy-nav-panel-products,#diy-nav-panel-solution,#diy-nav-panel-service,
#diy-nav-panel-application,#diy-nav-panel-plugin,#diy-nav-panel-themes,#diy-nav-panel-app-market,
#diy-nav-panel-support,#diy-nav-panel-developer,#diy-nav-panel-more-information
{
  opacity:0;
  transition: opacity .2s ease-in-out;
  transition-delay: .1s;
}

/** 导航面板内容 **/



.diy-nav-sidebar-panel .diy-nav-panel-content {    
    padding: 0 10px 0 30px;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    transition-delay: .1s;
}
.diy-nav-panel-content .diy-active
{
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

/** 面板详细内容1*/
.diy-nav-sidebar-panel .diy-nav-panel-content.diy-active {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.diy-nav-resource-media-title {
    font-size: 14px;
    color: #b5b5b5;
    border-bottom: 1px solid #474f59;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
.diy-nav a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


.diy-nav-col-2 {
    -ms-flex: 1 1 398px;
    flex: 1 1 398px;
}
/** 面板详细内容2*/
.diy-nav-col-2
{    -ms-flex: 1 1 398px;
    flex: 1 1 398px;
}
.diy-nav-col-1, .diy-nav-col-2 {
    padding: 30px 15px;
    overflow: auto;
}

.diy-nav-resources {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/*
.diy-nav-panel-link:hover{
  color:#ddd;
}
*/

/** 右侧示例*/
.diy-nav-resources-item {
    margin-bottom: 15px;
    padding: 5px 15px;
    width: 100%;
    font-size: 13px;
    border: 1px solid #474f59;
    border-top: 4px solid #FF8C00;
}

/** 右侧示例*/
.marketing {
    border-top: 4px solid #19998b;
}

/** 
 显示导航
 */
.diy-nav-panel-wrapper .active{
  z-index: 99999999999999;
  display: block;  
}

/** 服务 */
.diy-nav-panel-grid-wrap{
  margin: 30px 0;
}

.devdiy button, .devdiy fieldset, .devdiy input, .devdiy label, .devdiy select, .devdiy textarea {color: inherit;font: inherit;margin: 0;}
.diy-margin-zreo{margin:0;}
.diy-margin-20{margin-top:20px;}
.diy-border-top-4px{border-top: 4px solid #474f59;}
.diy-nav-txt-small {font-size:0.8125rem;}
.diy-overflow-auto{overflow: auto;}
.diy-txt-white {color:#ffffff;}
.diy-txt-gray {color:#b5b5b5;}
.diy-txt-bold {font-weight:bold;}
.diy-txt-20{font-size: 1.25rem;margin-bottom: 30px;}
.diy-txt-18{font-size: 1.125rem;margin-bottom: 30px;}
.diy-txt-14{font-size: 0.875rem;margin-bottom: 30px;}
.diy-padding-lr10{padding:0 10px;}
.diy-nav-sidebar-panel-full .diy-txt{color: #B5B5BB;font-size: 13px;margin-bottom: 30px;}

h3.diy-margin-20{margin-top:30px;}

/** 搜索 */
.diy-nav-icon-group{
    background-color: #232f3e;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    color: #ddd;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.diy-nav-icon-group>i {
    cursor: pointer;
}
.diy-nav-angle-right-icon {
    height: 100%;
    width: 22px;
    left: -6px;
}
/**diy-nav-double-row */
.diy-nav-panel-search.diy-transition-in .diy-nav-search-field {
    -ms-transform: scaleX(1);
    transform: scaleX(1);    
    left: 0;
    right: 0;
}


.diy-nav-search-icon {
    background-position: 0 10px;
    background-image: url(data:image/svg+xml;base64,ICAgIDxzdmcgYWx0PSJzZWFyY2giIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4IiAgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9InZlY3Rvci1lZmZlY3Q6IG5vbi1zY2FsaW5nLXN0cm9rZTsgc3Ryb2tlOiAjZmZmZmZmOyBzdHJva2Utd2lkdGg6IDJweDsgZmlsbDogbm9uZTsiPgogICAgICA8Y2lyY2xlIGN4PSI3IiBjeT0iNyIgcj0iNSIvPgogICAgICA8bGluZSB4MT0iMTUiIHkxPSIxNSIgeDI9IjEwLjUiIHkyPSIxMC41Ii8+CiAgICA8L3N2Zz4K);
    background-repeat: no-repeat;
    height: 100%;
    width: 18px;
    cursor: pointer;
    background-size: 18px 18px;
}

.diy-nav-search-icon:hover {    
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhbHQ9InNlYXJjaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTggMTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJ2ZWN0b3ItZWZmZWN0OiBub24tc2NhbGluZy1zdHJva2U7IHN0cm9rZTogI0ZGOEMwMDsgc3Ryb2tlLXdpZHRoOiAycHg7IGZpbGw6IG5vbmU7Ij4KICAgICAgPGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjUiPjwvY2lyY2xlPgogICAgICA8bGluZSB4MT0iMTUiIHkxPSIxNSIgeDI9IjEwLjUiIHkyPSIxMC41Ij48L2xpbmU+CiAgICA8L3N2Zz4=);    
}

.diy-nav-panel-search .diy-nav-close-icon {
    margin-top:0px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhbHQ9ImNsb3NlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9InZlY3Rvci1lZmZlY3Q6IG5vbi1zY2FsaW5nLXN0cm9rZTsgc3Ryb2tlOiAjZWVlZWVlOyBzdHJva2Utd2lkdGg6IDJweDsgZmlsbDogbm9uZTsiPjxsaW5lIHgxPSIyIiB5MT0iMiIgeDI9IjE0IiB5Mj0iMTQiLz48bGluZSB4MT0iMTQiIHkxPSIyIiB4Mj0iMiIgeTI9IjE0Ii8+PC9zdmc+DQo=);
    background-repeat: no-repeat;
    cursor: pointer;
    height: 18px;
    width: 18px;
    right: 0px;
    position:absolute;
}

/* 搜索框 */
.diy-nav-panel-search {
    display: none;
    position: fixed;
    right:0;
    bottom: 7px;
    left: 0;
    height: 60px;
    top:42px;

    background-color: #232f3e;
    text-align: left;
    transition: opacity .2s ease-out;
}
form {
    display: block;
    margin-top: 0em;
}
.diy-nav-panel-search {
    width: 624px;
    left: 25%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

input[type="text" i] {
    padding: 1px 2px;
    border: none;
    color:#333;
}

input {
    -webkit-writing-mode: horizontal-tb !important;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    margin: 0em;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}

[class^=diy-nav] .twitter-typeahead input {
    position: absolute!important;
}
.diy-nav .diy-typeahead .twitter-typeahead input {
    top: 0;
    left: 0;
    margin: none;
    width:600px;
    font-size: 14px;
}

.diy-nav-search-field {
    position: absolute;
    left: 50%;
    right: 50%;
    -ms-transform: scaleX(1);
    transform: scaleX(1);    
}

input.diy-nav-search-field {
    direction: ltr;
    padding: 5px;
    color: #333;
    background: #fff;
    border: 1px solid #eaeded;
    border-radius: 0;
}

.input[type="search"]{
      background-color: white;
    font-family: inherit;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    color: rgba(0,0,0,0.75);
    display: block;
    font-size: 14px;
    margin: 0 0 12px 0;
    padding: 6px;
    height: 32px;
    width: 100%;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
    -webkit-transition: all .15s linear;
    transition: all .15s linear;
}
/** 查询 */
.diy-search{display:inline;text-align:center;background:#fff;height:120px;max-width:40%;padding-top:19.5px;padding-bottom:20px;height:60px;}
.diy-search-input{height:60px;background: #fff;text-indent:10px; max-width:40%;width:100%;min-width:200px;font-size: 1.25rem;font-weight: 500;margin:0px;}
.diy-search-button{background: #0177FD;max-width:150px; max-height:60px;padding:20px 30px;margin:0px;cursor: pointer;}
/*
.diy-search-input {
    -webkit-writing-mode: horizontal-tb !important;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    margin: 0em;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}
*/

/** 面板关闭 */
.diy-nav-panel-transitioned .diy-nav-panel-wrapper .diy-nav-close-icon {
    opacity: 1;
}

.diy-nav-panel-wrapper .diy-nav-close-icon {
    margin-top: 6px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhbHQ9ImNsb3NlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9InZlY3Rvci1lZmZlY3Q6IG5vbi1zY2FsaW5nLXN0cm9rZTsgc3Ryb2tlOiAjZWVlZWVlOyBzdHJva2Utd2lkdGg6IDJweDsgZmlsbDogbm9uZTsiPjxsaW5lIHgxPSIyIiB5MT0iMiIgeDI9IjE0IiB5Mj0iMTQiLz48bGluZSB4MT0iMTQiIHkxPSIyIiB4Mj0iMiIgeTI9IjE0Ii8+PC9zdmc+DQo=);
    background-repeat: no-repeat;
    cursor: pointer;
    height: 50px;
    width: 50px;
    background-size: 18px,18px;
    background-position: 10px 16px;
    position: absolute;
    opacity: 1;
    z-index: 6004;
    right: 0;
    font-size: 23px;
    transition: opacity .2s ease-in-out;
}

/** 产品 */
#diy-nav-panel-products
{

}
/** 解决方案 */
#diy-nav-panel-solution
{
}

/**服务 */
#diy-nav-panel-service
{

}
/** 行业应用 */
#diy-nav-panel-application
{

}
/** 插件 */
#diy-nav-panel-plugin
{

}
/** 主题 */
#diy-nav-panel-themes
{

}
/** 应用市场 */
#diy-nav-panel-app-market
{

}
/** 客户支持 */
#diy-nav-panel-support
{

}
/** 开发者 */
#diy-nav-panel-developer
{

}
/** 更多信息 */
#diy-nav-panel-more-information
{

}