*{
	margin: 0;
	padding: 0;    
}

em {
	font-style: normal;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
	vertical-align: top;
}

input{
	outline: none;
}

body {
	font-size: 14px;
	font-family: "微软雅黑";
	background: white;
}



.fl {
	float: left;
}
i{font-style:normal;}
.fr {
	float: right;
}
h1,h2,h3,h4,h5,h6{font-weight:normal;padding:0;margin:0;}
.clear {
	clear: both;width:100%;
}
.fadeIn {
	animation: fadeIn .5s ease-out forwards;
}
.fadeOut {
	animation: fadeOut .5s ease-out forwards;
}
/* 淡入 */
@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* 淡出 */
@-webkit-keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
@-o-keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
@-moz-keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
#wrapper {
	position: relative;
	width: 100%;	
	background: inherit;	
}
.wrap {
	width: 100%;
	margin: 0 auto;    
    max-width:1680px;
    padding:0 40px;
    box-sizing:border-box;
}


.header{width:100%;height:75px;margin:0 auto;background-color: #fff;transition-duration: 1s;padding:10px 0;position:fixed;top:0;left:0;z-index: 99;}
.header .logo {padding: 0px; transition-duration: .5s; transition-property: background;transition-timing-function:ease;width: 145px; height: 145px; position: absolute; top: 0; left:50px; overflow: hidden; border-radius: 0 0 22px 0; box-shadow: 0 0 30px rgba(0,0,0,0.2);box-sizing:border-box;background-image:url(../image/logo.png);background-color:#fff;background-repeat:no-repeat;background-size:100% auto;}
.header .logo a{width:100%;display:block;height:100%;}

.header.on{box-shadow: 0 0 10px #ddd;margin:0;background:rgba(255,255,255,1);height:55px;}
.header.on .logo{width:160px;height:55px;background-color:transparent;box-shadow:none;background-image:url(../image/logo2.png);top:10px;border-radius:0;}
.header.on .nav .nav__item a{line-height:55px;}
.header.on .openSearch,.header.on .lang{margin-top:7px;}

.header .nav__trigger{display:none;}

.header .center{width:70%;float:right;max-width:650px;min-width:400px;}
.header .topsearch{width:20%;float:right;height:43px;background:#f6f6f6;border-radius:25px;padding:0 10px 0 18px;box-sizing:border-box;margin-top:10px;transition-duration: 1s;}
.header .topsearch .input{width:80%;float:left;line-height:43px;font-size:14px;color:#999;border:none;background:none;}
.header .topsearch .button{font-family:iconfont;font-size:16px;color:#333;width:20%;float:right;height:43px;text-align:center;border:none;background:none;cursor:pointer;}
.header .nav{width:100%;transition-duration: 1s;float:right;padding-right:2%;}
.header .nav ul{display:block;width:100%;transition-duration: 1s;}
.header .nav .wrap{position:relative;}
.header .nav .nav__item{float:left;padding:0 25px;}
.header .nav .nav__item i{font-family:iconfont;position:absolute;right:0px;top:20px;font-size:12px;color:#999;z-index:99;}
.header .nav .nav__item a{display:block;width:100%;height:100%;line-height:75px;text-align:center;font-size:20px;color:#555;transition: all 0.5s;font-family:"Comic Sans ms";}
.header .nav .nav__item a:hover{font-weight:bold;}
.header .nav .nav__item ul{position:absolute;display:none;background:#9cca55;border-radius:5px;width:120px;box-shadow: 0 13px 35px 0 rgb(43 50 54 / 20%);font-family: "OPPOSans-M";top:75%;padding:10px 0;}
.header .nav .nav__item ul li{width:100%;color:#fff;float:none;height:40px;line-height:40px;}
.header .nav .nav__item ul li a{line-height:35px;font-size:15px;color:#fff;}
.header .nav .nav__item ul li a::after{display:none;}
.header .nav .nav__item ul li a:hover{font-weight:normal;}
.header .nav .nav__item:hover ul{display:block;}
.header .right{width:auto;float:right;padding-right:20px;}
.header .openSearch,.lang{transition-duration: .5s; width:45px;height:45px;float:left;font-family:iconfont;font-size:18px;color:#333;text-align:center;cursor:pointer;background: radial-gradient(circle, #fff 40%, #eee);border-radius:50%;line-height:45px;margin:15px 10px 0 0;}
.header .openSearch:hover,.header .lang:hover{background:#cf0010;color:#fff;}
.header .openSearch{background:#8fc320;color:#fff;}
.header .lang{font-size:16px;font-family: "OPPOSans-R";}
.navlogo{display:none;}
@media screen and (max-width:820px)
{
    .navlogo{width:300px;background:#f9f9f7;display:block;text-align:center;padding:15px 0;}
    .navlogo img{width:40%;}
    .header *{transition-duration:0;}
    .wrap{padding:0 30px;}
    .headwrap{width:100%;height:13rem;background:#fff;}
    #wrapper{min-width: 300px;transition-duration:initial;}
    .header{height:60px;padding:0 0 10px 0;box-shadow: 0 0 10px #ddd;}
    .header .center{width:auto;padding-right:0;position:absolute;right:0;top:0;}
    .header .wrap{width:100%;}
    .header .logo{transition-duration:initial;width:22rem;max-width:160px;background-color:transparent;box-shadow:none;background-image:url(../image/logo2.png);top:12px;left:20px;}
    .header .openSearch,.lang{width:35px;height:35px;line-height:35px;font-size:14px;margin-top:15px;margin-right:7px;}
    .header .lang{font-size:13px;}
    .header.on{background:#fff;height:60px;}
    .header.on .logo{width:22rem;top:12px;}
    .header.on .openSearch,.header.on .lang{margin-top:15px;}

    .header .right{position:absolute;right:30px;top:0;}
    .header .tel{display:none;}    
    .header .nav__trigger {
    display:block;
    float: right;
    position: relative;
    width: 30px;
    height: auto;
    text-align:center;
    box-sizing:border-box;
    /*background: -webkit-linear-gradient(left top, #ffb63c , #ffa205);
    background: linear-gradient(to bottom right, #ffb63c , #ffa205);*/
    display:block;
    margin:10px 10px 0 0;    
    transition-duration:0.5s
    }
    .header .nav {
  position: fixed;
  z-index: 999;
  opacity: 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
          
    transform: translateX(-100%);
    width: 100%;
    height: 100vh;
    top:0;left:0;
    }
   .nav--active .nav {
      opacity: 1;
      background:rgba(0,0,0,0.6);
      -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    min-height:30rem;
    }
    .header .nav .nav__list {
        padding: 0;
        margin: 0 0 0 0;
        width: 300px;
        height: 100%;
        background: #fff;
        /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
    }
    .header .nav .nav__item {
        list-style-type: none;
        text-align: left;
        font-size: 0.7rem;        
        width: 100%;
        border-top: 1px solid #f3f3f3;
        padding:0;
    }
    .header .nav .nav__item li{
        width:50%;float:left;box-sizing:border-box;
        text-align:center;height:1.5rem;font-size:0.65rem;
        margin-bottom:4px;
    }
    .header .nav .nav__item a::after{display:none;}
    .header .nav .nav__item li a{color:#fff;display:block;width:100%;line-height:1.5rem;font-weight:normal;font-size:0.7rem;}
        .header .nav .nav__item a {
            line-height: 45px;
            font-size: 16px;
            text-transform: uppercase;
            text-decoration: none;
            color: #333;
            opacity: 1;
            -webkit-transition: opacity 300ms ease-in-out;
            transition: opacity 300ms ease-in-out;
            text-align: left;
            text-indent: 20px;
        }
    .header.on .nav .nav__item a{line-height:45px;}
    .header .nav .nav__link span{
         font-family:iconfont;
         font-weight:normal;
         margin-right:10px;
         font-size:0.8rem;
    }
    .nav--active .nav__link {
      opacity: 1;
    }
    .nav--active .nav {
      -webkit-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
      -webkit-transform: translateX(0);
              transform: translateX(0);
          
    }
    .nav--active .nav__icon {
      background: rgba(0, 0, 0, 0);
    }
    .nav--active .nav__icon:before {
      margin-top: 0;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              background:#fff;
    }
    .nav--active .nav__icon:after {
      margin-top: 0;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
              background:#fff;
    }
    .header .nav .nav__item ul {
        display: block;
        position: relative;
        width: 100%;background:none;box-shadow:none;padding:0 0 0 20px;box-sizing:border-box;
    }
        .header .nav .nav__item ul li a {
            font-size: 16px;
            color: #333;
            font-family: 'OPPOSans-R';
            line-height:45px;
        }
        .header .nav .nav__item ul li {
            width: 50%;
            float: left;
            height:auto;
        }
        /* Default navigation icon */
        .nav__trigger {
            display: block;
            position: absolute;
            z-index: 1000;
        }
    .nav--active .nav__trigger {
      opacity: 0.8;
    }
    .nav__icon {
      display: inline-block;
      position: relative;
      width: 20px;
      height: 2px;
      background-color: #666;
      -webkit-transition-property: background-color, -webkit-transform;
      transition-property: background-color, -webkit-transform;
      transition-property: background-color, transform;
      transition-property: background-color, transform, -webkit-transform;
      -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
              top:8px;
              
    }
    .nav__icon:before,
    .nav__icon:after {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      position: absolute;
      background: #666;
      -webkit-transition-property: margin, -webkit-transform;
      transition-property: margin, -webkit-transform;
      transition-property: margin, transform;
      transition-property: margin, transform, -webkit-transform;
      -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
              
    }
    .nav__icon:before {
      margin-top: -8px;
    }
    .nav__icon:after {
      margin-top: 8px;
    }   
}

#footer {
    font-family: "OPPOSans-R";
    height: auto;
    background-color: #7cbe16;
    color: white;
    position: relative
}

#to-top {
    width: 39px;
    height: 39px;
    background: url(../image/to-top.png) no-repeat center center;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -20px;
    cursor: pointer;
}

#footer-top {
    height: auto;
    padding: 54px 0 38px 0;
    border-bottom: 1px solid #9cca55;
    font-size: 14px;
    line-height: 22px;
}

#address {
    width: 50%;
    box-sizing: border-box;
    padding-right: 30px;
    border-right: 1px solid #9cca55;
}

    #address p {       
        background: url(../image/address1.png) no-repeat left 6px;
        overflow: hidden;
        padding-left: 48px;
        font-size:15px;
    }

        #address p:nth-of-type(2) {
            background-position:left bottom;
            margin-top: 13px;
        }

#code {
    padding: 0 50px 0 134px;
    background: url(../image/code.png) top left no-repeat;
    width: 28%;
    border-right: 1px solid #9cca55;
    height: 120px;
    box-sizing: border-box;
    margin-top:20px;
}

    #code p {
        margin-bottom: 18px;
    }

#footer-nav {
    width: 50%;
    padding-left: 2%;
    box-sizing:border-box;
}

#footer-list {
}

    #footer-list li {
        float: left;
        width: 25%;
        text-align: center;
        font-size: 18px;
        font-family: "OPPOSans-M";
    }

        #footer-list li ul {
            padding-top: 14px;
        }

            #footer-list li ul li {
                float: initial;
                font-size: 14px;
                line-height: 24px;
                width: 100%;
                font-family: "OPPOSans-R";
            }

                #footer-list li ul li a {
                    color: white;
                }

                    #footer-list li ul li a:hover {
                        text-decoration: underline;
                    }

#footer-bottom {
    height: auto;
    line-height: 24px;
    text-align: center;
    padding:10px 0;
}

    #footer-bottom a {
        color: white;
    }

        #footer-bottom a:hover {
            color: orange;
        }

        #footer-bottom a:nth-of-type(1) {
            margin: 0 28px;
        }

        #footer-bottom a:nth-of-type(2) {
            margin-right: 8px;
        }

        #footer-bottom a:nth-of-type(3) {
            margin-left: 4px;
        }
@media screen and (max-width:820px){
    #address{width:50%;}
    #code{width:50%;padding-right:0;border:0;}
    #footer-nav{width:50%;padding:0px 0 0 0;}   
}
@media screen and (max-width:512px)
{    
    .header{padding:0;}
     #address{width:100%;padding:0;border:0;}
     #code{width:100%;}
    #footer-list li{font-size:16px;}
    .wrap{padding:0 20px;}
    #footer-nav{width:100%;padding-top:20px;margin-top:20px;border-top:1px solid #9cca55; }
}









/*new right*/
.demo-icon{
  font-family:'iconfont';
  font-style:normal;
  font-weight:normal;
  speak:none;
  display:inline-block;
  text-decoration:inherit;
  text-align:center;
  font-variant:normal;
  text-transform:none;
  font-size:20px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:24px;
  color:#999; 
}
.cndns-right{position:fixed;right:5px;bottom:20%;margin-top:-100px;z-index:100}
.cndns-right-meau{position:relative;}
.cndns-right-btn{width:55px;height:55px;text-align:center;display:block;margin-bottom:6px;position:relative;background:rgba(50,50,50,0.5);box-shadow: 0 0 10px 0 rgba(20,34,67,.1);line-height:55px;border-radius:50%;}
.cndns-right-btn span{color:#fff;font-size:20px;line-height:55px;}
.cndns-right-btn sup{display:block;min-width:24px;height:24px;text-align:center;line-height:24px;color:#fff;border-radius: 50%;background-color:#cc9900;position:absolute;left:-12px;top:-12px;}
.cndns-right-btn p{color:#1765ba;font-size:14px;line-height:18px;padding-top:5px;display:none;}
.cndns-right-meau:hover{background:#269c46;color:#fff;border-radius:50%;}

.meau-car .cndns-right-btn {border-color:#1765ba;margin-bottom:20px;}
.meau-car.cndns-right-meau:hover .cndns-right-btn{background-color:#269c46}
.meau-car.cndns-right-meau:hover .cndns-right-btn span{color:#fff;display:block;}
.meau-car .cndns-right-btn span{color:#1765ba;}
.meau-sev .cndns-right-btn p{color:#fff}
.meau-top .cndns-right-btn i{display:block;color:#fff}
.meau-top.cndns-right-meau:hover .cndns-right-btn{background-color:#269c46}
.meau-top.cndns-right-meau:hover .cndns-right-btn span{display:block;color:#fff} 
.meau-top.cndns-right-meau:hover .cndns-right-btn i{color:#fff;}
.cndns-right-box{position:absolute;top:-15px;right:48px;padding-right:25px;display:none;}
.cndns-right-box .box-border{padding:30px 20px;background-color:#fff;-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);box-shadow: 0 3px 8px rgba(0,0,0,.15);position:relative}
.cndns-right-box .box-border .arrow-right{display:block;width:13px;height:16px;background:url(/en/images/arrow.png) no-repeat;position:absolute;right:-13px;top:26px;}
.cndns-right-box .box-border .sev-t span{font-size:42px;float:left;display:block;line-height:56px;margin-right:20px;color:#d3d3d3}
.cndns-right-box .box-border .sev-t p{float:left;color:#333;font-size:20px;line-height:28px;font-family: "MONTSERRAT-REGULAR",'Microsoft YaHei';}
.cndns-right-box .box-border .sev-t p i{display:block;font-size:14px;color:#aaa;}
.cndns-right-box .box-border .sev-b{padding-top:15px;margin-top:15px;border-top:1px solid #e4e4e4}
.cndns-right-box .box-border .sev-b h4{color:#666;font-size:14px;font-weight:normal;padding-bottom:15px;}
.cndns-right-box .box-border .sev-b li{float:left;width:33.33333%}
.cndns-right-box .box-border .sev-b li a{display:inline-block;color:#999;font-size:13px;padding-left:43px;line-height:36px;}
.cndns-right-box .box-border .sev-b li a:hover{color:#333}
.cndns-right-box .box-border .qrcode img{width:70%;}
.meau-sev .cndns-right-box .box-border{width:230px;}
.meau-contact .cndns-right-box .box-border{width:230px;}
.cndns-right-meau:hover .cndns-right-box{display:block}
.meau-code .cndns-right-box{top:inherit;bottom:-35px;}
.meau-code .cndns-right-box .box-border{width:156px;text-align:center;border-top:1px solid #ccc;}
.meau-code .cndns-right-box .box-border i{display:block;color:#f66e06;font-size:16px;line-height:16px;}
.meau-code .cndns-right-box .box-border .arrow-right{top:inherit;bottom:50px;}
.cndns-right-btn:hover{background:#edad27;color:#fff;border-radius:50%;}
.cndns-right-btn:hover .demo-icon{color:#fff;}
.meau-zs .cndns-right-btn{background-color:#1765ba;color:#fff;margin-top:80px;border-color:#1765ba}
.meau-zs .cndns-right-btn span{color:#fff}
.meau-zs .cndns-right-btn p{color:#fff}
.sev-t h6{color:#333;font-size:14px;line-height:40px;}

@media screen and (max-width:820px){
    .cndns-right{top:90%;margin-top:0;right:4rem;}
    .meau-sev{display:none;}
    .meau-contact{display:none;}

}

/*弹出分类*/

.searchbox{width:90%;background:#fff;color:#fff;height:auto;height:8rem;margin:0 5%;position:absolute;top:8vh;overflow:hidden;border-radius:0.5rem}
.searchbox .input{width:75%;float:left;background:#fff;border:none;font-size:2.8rem;color:#999;text-indent:2rem;line-height:8rem;}
.searchbox .button{width:25%;float:left;background:none;color:#fff;text-align:center;line-height:8rem;border:none;font-family:iconfont;font-size:2.8rem;background:#cf0010;}

 .cd-section {
      padding: 2em;
      margin-top: 5em;
      text-align: center;
    }

    .cd-bouncy-nav-trigger {
  
    }
    .cd-bouncy-nav li .info a:hover{background:none;}
    .no-touch .cd-bouncy-nav-trigger:hover {
      background: #e0a36f;
    }

    .cd-bouncy-nav-modal {
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(36, 35, 37, 0.95);
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
      -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
      transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
    }
    .cd-bouncy-nav-modal.fade-in {
      visibility: visible;
      opacity: 1;
      -webkit-transition: opacity 0.1s 0s, visibility 0s 0s;
      -moz-transition: opacity 0.1s 0s, visibility 0s 0s;
      transition: opacity 0.1s 0s, visibility 0s 0s;
    }
    .cd-bouncy-nav-modal .cd-close {
      display: block;
      position: fixed;
      top: 20px;
      right: 5%;
      width: 44px;
      height: 44px;
      /* image replacement */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      background: url("/en/images/cd-icon-close.svg") no-repeat center center;
      -webkit-transform: scale(0) translateZ(0);
      -moz-transform: scale(0) translateZ(0);
      -ms-transform: scale(0) translateZ(0);
      -o-transform: scale(0) translateZ(0);
      transform: scale(0) translateZ(0);
      -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s;
      -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s;
      transition: transform 0.3s 0s, visibility 0s 0.3s;
    }
    .cd-bouncy-nav-modal.fade-in .cd-close {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: -webkit-transform 0.3s 0s, visibility 0.3s 0s;
      -moz-transition: -moz-transform 0.3s 0s, visibility 0.3s 0s;
      transition: transform 0.3s 0s, visibility 0.3s 0s;
      z-index:99;
    }


    .cd-bouncy-nav {
      position: absolute;
      left: 50%;
      top: 55vh;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 90%;
    }
    .cd-bouncy-nav li {
  width: 25%;
  float: left;
  padding:0 0.3rem;
  box-sizing:border-box;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateY(100vh);
  -moz-transform: translateY(100vh);
  -ms-transform: translateY(100vh);
  -o-transform: translateY(100vh);
  transform: translateY(100vh);
  text-align: center;
}
.cd-bouncy-nav li img{width:100%;border-radius:50%;}

.is-visible .cd-bouncy-nav li {
  /* used to assign a tranlsateY value when the animation is over */
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.fade-in .cd-bouncy-nav li {
  -webkit-animation: cd-move-in 0.4s;
  -moz-animation: cd-move-in 0.4s;
  animation: cd-move-in 0.4s;
}
.fade-out .cd-bouncy-nav li {
  -webkit-animation: cd-move-out 0.4s;
  -moz-animation: cd-move-out 0.4s;
  animation: cd-move-out 0.4s;
}
.fade-in .cd-bouncy-nav li, .fade-out .cd-bouncy-nav li {
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(3), .fade-out .cd-bouncy-nav li:nth-of-type(3) {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(6), .fade-out .cd-bouncy-nav li:nth-of-type(6) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}


/*@media only screen and (min-width: 768px) {
  .cd-bouncy-nav {
    max-width: 450px;
  }*/
.cd-bouncy-nav
{
  columns: 1; 
  column-gap: 10px;
  height:80%;
  background:none;padding:0;
}
    .cd-bouncy-nav li {
        width: 100%;
        height: auto;
        float: left;
        background: rgba(255,255,255,0.2);
        border-radius: 0.1rem;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 5px;
        break-inside: avoid;
        font-family: "Comic Sans ms";
    }
.cd-bouncy-nav li .info{width:100%;text-align:left;height:auto;color:#fff;}
.cd-bouncy-nav li .info h1{font-size:16px;line-height:20px;text-indent:0px;font-weight:bold;padding-bottom:2px;color:#fff;}
.cd-bouncy-nav li .info img{width:60px;float:left;position:initial;}
.cd-bouncy-nav li a{color:#fff;}
.cd-bouncy-nav li .list{width:100%;}
.cd-bouncy-nav li .list a{color:#fff;float:left;display:block;font-size:15px;text-align:left;line-height:28px;width:100%;box-sizing:border-box;}

      .fade-in .cd-bouncy-nav li:nth-of-type(1), .fade-out .cd-bouncy-nav li:nth-of-type(1) {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        animation-delay: 0.1s;
      }
      .fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        animation-delay: 0s;
      }
      .fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;
      }
      .fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) {
        -webkit-animation-delay: 0.25s;
        -moz-animation-delay: 0.25s;
        animation-delay: 0.25s;
      }
 
    


@media only screen and (min-width: 1170px) {
  .cd-bouncy-nav-modal .cd-close {
    top: 60px;
  }
}
@-webkit-keyframes cd-move-in {
      0% {
        -webkit-transform: translateY(100vh);
      }
      65% {
        -webkit-transform: translateY(-1.5vh);
      }
      100% {
        -webkit-transform: translateY(0vh);
      }
    }
    @-moz-keyframes cd-move-in {
      0% {
        -moz-transform: translateY(100vh);
      }
      65% {
        -moz-transform: translateY(-1.5vh);
      }
      100% {
        -moz-transform: translateY(0vh);
      }
    }
    @keyframes cd-move-in {
      0% {
        -webkit-transform: translateY(100vh);
        -moz-transform: translateY(100vh);
        -ms-transform: translateY(100vh);
        -o-transform: translateY(100vh);
        transform: translateY(100vh);
      }
      65% {
        -webkit-transform: translateY(-1.5vh);
        -moz-transform: translateY(-1.5vh);
        -ms-transform: translateY(-1.5vh);
        -o-transform: translateY(-1.5vh);
        transform: translateY(-1.5vh);
      }
      100% {
        -webkit-transform: translateY(0vh);
        -moz-transform: translateY(0vh);
        -ms-transform: translateY(0vh);
        -o-transform: translateY(0vh);
        transform: translateY(0vh);
      }
    }
    @-webkit-keyframes cd-move-out {
      0% {
        -webkit-transform: translateY(0vh);
      }
      100% {
        -webkit-transform: translateY(-100vh);
      }
    }
    @-moz-keyframes cd-move-out {
      0% {
        -moz-transform: translateY(0vh);
      }
      100% {
        -moz-transform: translateY(-100vh);
      }
    }
    @keyframes cd-move-out {
      0% {
        -webkit-transform: translateY(0vh);
        -moz-transform: translateY(0vh);
        -ms-transform: translateY(0vh);
        -o-transform: translateY(0vh);
        transform: translateY(0vh);
      }
      100% {
        -webkit-transform: translateY(-100vh);
        -moz-transform: translateY(-100vh);
        -ms-transform: translateY(-100vh);
        -o-transform: translateY(-100vh);
        transform: translateY(-100vh);
      }
    }

@media screen and (min-width: 820px) {
    .goods-list-bar{width:800px;margin:0 auto;}
    .searchbox{width:800px;height:50px;margin:0;}
    .searchbox .input{width:80%;font-size:16px;text-indent:2rem;line-height:50px;}
    .searchbox .button{width:20%;line-height:50px;border:none;font-size:16px;}
    .cd-bouncy-nav
    {
      columns: 2; 
      column-gap: 10px;
      height:80%;
      background:none;padding:0;
      width:800px;
    }
        .cd-bouncy-nav li {
            width: 100%;
            height: auto;
            float: left;
            background: rgba(255,255,255,0.2);
            border-radius: 0.1rem;
            box-sizing: border-box;
            padding: 10px;
            margin-bottom: 10px;
            break-inside: avoid;
            
        }
      .cd-bouncy-nav li .info{width:100%;text-align:left;height:auto;color:#fff;}
    .cd-bouncy-nav li .info h1{font-size:18px;line-height:30px;text-indent:0px;font-weight:bold;padding-bottom:10px;color:#fff;}
    .cd-bouncy-nav li .info img{width:6rem;float:left;position:initial;}
    .cd-bouncy-nav li a{color:#fff;}
    .cd-bouncy-nav li .list{width:100%;}
    .cd-bouncy-nav li .list a{color:#fff;float:left;display:block;font-size:16px;text-align:left;line-height:30px;padding:0;width:50%;box-sizing:border-box;}

  }
@media screen and (max-width: 512px) {
    .cd-bouncy-nav {
        columns: 2;
        column-gap: 10px;

    }


}