/*css*/
@media screen and (min-width: 981px){
  #wrapper #header{position: static; height: auto;background:none; border:none; width: 100%;}
  #wrapper #header:after{display: none;}
  #wrapper #header:before{content: ""; position: fixed; left: 0; top:0;width: 100%;height:0; padding: 9% 0 0; z-index: 989;background-color: rgba(0,0,0,.7); transition:background .25s linear;margin-top: 0; transition: margin .3s linear; }
  #wrapper #header:hover:before{z-index: 998;}
  #wrapper #header .header_con{position: fixed; z-index: 999; left: 0; top:0; padding: 5% 0 4%;height: 0; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0% ,rgba(0, 0, 0, 0.1) 40% ,rgba(0,0,0,0) 100%);margin-top: 0; transition: margin .3s linear; }
  #wrapper #header.black .header_con,#wrapper #header.black:before{margin-top: -5%;}
  #wrapper #header .header_con:after{content: ""; height: 0; display: block; clear: both; visibility: hidden;}
  #wrapper #header .logo{ width: 107px; height: 20px; margin: -10px 0 0; top:2.578125vw;}
  #wrapper #header a.i_want{position: absolute; right: 0; top:0; margin: 7% 0 0; width: 5.75vw;}
  #wrapper #header .mobile-menu{width: 100%; margin: 0; padding: 0 3%;border-top: 1px solid rgba(255,255,255,.1); }
  #wrapper #header .lang{height: auto; line-height: 1.75vw;margin:1.5% 0 0;}
  #wrapper #header .lang a{height: 1.75vw; line-height: 1.75vw;}
  #wrapper #header .search{margin: 1.5% 1rem 0 0; background: rgba(255,255,255,.2);height: 2vw; border:none !important}
  #wrapper #header .search .ind-submit{height: 2vw; line-height: 2vw; width: 3em; text-align: center;}
  #wrapper #header .search .ind-text{width: 9.5em !important;height: 2vw; line-height: 2vw; padding: 0 0 0 .5em;}
  /* #wrapper #header .search input.ind-text::-webkit-input-placeholder{font-size:10px;width:40px;overflow: hidden;text-overflow: ellipsis;} */
  #wrapper #header .header_nav{width: auto !important; float: none;}
  #wrapper #header .header_nav{margin: 0 0 0 -.75rem;}
  #wrapper #header .header_nav .h_cb li{ height: 4vw; padding:0 .4rem;}
  #wrapper #header .header_nav .h_cb li a.tit{line-height: 4vw; position: relative;}
  #wrapper #header .header_nav .h_cb li a.current:after{ content: ""; width: 2em; height: 2px; background: #21a8df; position: absolute; left: 0; top:1px; display: block;}
  #wrapper #header .header_nav .h_cb li .sub_menu{border-top: 1px solid rgba(255,255,255,.1);}

  #wrapper .subkv{ z-index: 990; height: 0; padding: 52.1875% 0 0;}
  #wrapper .subkv .kv_tit_box{top:40%;left: 7%;}
  #wrapper .subkv .wapkv{display: none;}

  #wrapper .page_pos{ background: none; border: none; position: relative; z-index: 991;padding:10vw 0 3em; top:calc(-10vw - 6.75em); height:calc(10vw + 6.75em); margin-bottom:calc(-10vw - 6.75em); overflow: hidden;}
  #wrapper .page_pos .w1600{ width: 86% !important;}
  #wrapper .page_pos .columnswitch{width: 100%; display: table; display: flex;background: rgba(33,168,224,.3);}
  #wrapper .page_pos .columnswitch a{display: table-cell; float: none; padding: 14px 0; border:none; color: #FFF; background: rgba(0,0,0,.5); flex: 1; font-size: 1em; line-height: 1.75em; border: none !important; position: relative;opacity: 1;}
  #wrapper .page_pos .columnswitch a span.arrow{display: none !important;}
  #wrapper .page_pos .breadcrumb{display: none;}
  #wrapper .page_pos .columnswitch a.active{ font-size: 1.25em; line-height: 1.4em;background: rgba(0,0,0,.2); color: #28a7e1;}
  #wrapper .page_pos .columnswitch a.active:after{content: ""; position: absolute; left: 0; right: 0; bottom:0; height: 2px;background: rgba(33,168,224,1);}
  #wrapper .page_nav a{margin: 0 4%;}

  #index #wrapper .block_tit {padding: 4% 0 calc(2.34375rem - 4%);}
  #index #block2 .product_top{min-height: 250px;}
}
#wrapper .subkv{position: relative;}
#wrapper .subkv .kv_tit_box{z-index: 3;}
#wrapper .subkv .wapkv{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: no-repeat center center; background-size: cover;}
#wrapper .page_nav{overflow: auto; white-space: nowrap;}
a .iconimg::before{content: ""; display: inline-block; width: 1em; height: 1em; overflow: hidden; background-size: 100%; background-repeat: no-repeat; background-position: center top; vertical-align: middle; position: relative;}
a.active .iconimg::before,a:hover .iconimg::before{background-position: center bottom;}
#wrapper .page_nav a .iconimg::before{top:-.125em;}

/* a .iconimg.imgicon-qiche::before{background-image: url(../images/site202110add/imgicon-qiche.png);}
a .iconimg.imgicon-startandstop::before{background-image: url(../images/site202110add/imgicon-startandstop.png);}
a .iconimg.imgicon-motorcycle::before{background-image: url(../images/site202110add/imgicon-motorcycle.png);}
a .iconimg.imgicon-industrialpower::before{background-image: url(../images/site202110add/imgicon-industrialpower.png);}
a .iconimg.imgicon-energystorage::before{background-image: url(../images/site202110add/imgicon-energystorage.png);} */
a .iconimg.imgicon-ess-cell::before{background-image: url(../images/site202110add/11-01.png);}
a .iconimg.imgicon-residential::before{background-image: url(../images/site202110add/11-02.png);}
a .iconimg.imgicon-telecom::before{background-image: url(../images/site202110add/11-03.png);}
a .iconimg.imgicon-c-i-ess::before{background-image: url(../images/site202110add/11-04.png);}
a .iconimg.imgicon-energystorage::before{background-image: url(../images/site202110add/imgicon-energystorage.png);}

a .iconimg.imgicon-power-cell::before{background-image: url(../images/site202110add/12-01.png);}
a .iconimg.imgicon-automotive::before{background-image: url(../images/site202110add/12-02.png);}
a .iconimg.imgicon-e-motorcycle::before{background-image: url(../images/site202110add/12-03.png);}
a .iconimg.imgicon-LAV::before{background-image: url(../images/site202110add/12-04.png);}
a .iconimg.imgicon-demo::before{background-image: url(../images/site202110add/imgicon-energystorage.png);}


.product_section{position: relative; overflow: hidden;}
.product_section img{width: 100%; vertical-align: top;}
.product_section .img{width: 100%;position: relative;}
.product_section .img .bg{position:absolute; left: 0; top:0; z-index: 1;}
.product_section .img .main{position:relative;  z-index: 2;opacity: 0;transition: opacity 2s ease-out .25s;}
.product_section .img .before{position:absolute; left: 0; top:0; z-index: 3;}
.product_section.txtcenter .txt,.product_section.txtcenter .txtbig{position:absolute ; width: 100%; z-index: 5; left: 0; padding: 5%; text-align: center; z-index: 5; }
.product_section.txtwhite .txt,.product_section.txtwhite .txtbig{color: #FFF;}
.product_section.txtleft .txt,.product_section.txtleft .txtbig{position:absolute ; width: 42%; left: 7%; z-index: 5;  top:50%; text-align: left; transform: translateY(-50%);}
.product_section.txtright .txt,.product_section.txtright .txtbig{position:absolute ; width: 42%;right: 7%; z-index: 5; top:40%; text-align: left; transform: translateY(-50%);}
.product_section.txtright .txt{right: 2%;}
.product_section.txtright .txtbig{text-align: right;}
.product_section.show .img .main{opacity: 1;}
.product_section .txt h3,.product_section .txtbig h3{font-size: 1.9875vw; line-height: 1.5em; font-weight: bold;margin-bottom: .75vw; position: relative; }
.product_section .txt p,.product_section .txt div{font-size: .83333333vw; text-align: justify;position: relative;}
.product_section.txtcenter .txt p,.product_section.txtcenter .txt div{text-align: center;}
.product_section .txtbig h4{font-size: 1.8vw;line-height: 1.5em; font-weight: bold;position: relative;}
.product_section.txtcenter .txt h3,.product_section.txtcenter .txtbig h3{top:5vh;opacity: 0;  transition: all .5s ease-in .75s;}
.product_section.txtcenter .txt p,.product_section.txtcenter .txt div,.product_section.txtcenter .txtbig h4{top:5vh;opacity: 0;  transition: all .5s ease-in 1.25s;}
.product_section.txtleft .txt h3,.product_section.txtleft .txtbig h3{left:-5vw;opacity: 0;  transition: all .5s ease-in .75s;}
.product_section.txtleft .txt p,.product_section.txtleft .txt div,.product_section.txtleft .txtbig h4{left:-5vw;opacity: 0;  transition: all .5s ease-in 1.25s;}
.product_section.txtright .txt h3,.product_section.txtright .txtbig h3{left: 5vw;opacity: 0;  transition: all .5s ease-in .75s;}
.product_section.txtright .txt p,.product_section.txtright .txt div,.product_section.txtright .txtbig h4{left: 5vw;opacity: 0;  transition: all .5s ease-in 1.25s;}
.product_section.show .txt h3,.product_section.show .txtbig h3,.product_section.show .txt p,.product_section.show .txtbig h4,.product_section.show .txt div{left: 0 !important;top:0 !important; opacity: 1 !important;}

.wap{display: none;}
#index #block2 .product_top .swiper-container .swiper-slide a{margin: 0 4%;width:auto}
@media screen and (max-width: 980px){
  .pc{display: none;}
  .wap{display: block;}
  #wrapper .page_nav.no4 a{margin: 0 4%;}
  #wrapper .page_nav.no5 a{margin: 0 1%;}
  .product_section .txt h3{font-size: 4.4vw;}
  .product_section .txt p{font-size: 2vw;}
  .product_section .txtbig h3{font-size: 4.4vw;}
  .product_section .txtbig h4{font-size: 4vw;}

  #index #block2 .product_top .swiper-container .swiper-slide a{margin: 0 calc(10% - 30px);}
}
@media screen and (max-width: 480px){
  /* .product_section.txtcenter > img,.product_section.txtcenter .img{margin: 0 -7.5%; width: 115%;}
  .product_section.txtleft > img,.product_section.txtleft .img{margin: 0 -10% 0 -5%; width: 115%;}
  .product_section.txtright > img,.product_section.txtright .img{margin: 0 -5% 0 -10%; width: 115%;} */
  .product_main_section .til{margin: 0 -20%; transform: scale(.8);}
  .product_section.txtcenter .txt{transform: scale(.8); left: -12.5%; width: 125%;}
  .product_section.txtleft .txt,.product_section.txtleft .txtbig{width: 52.5%;transform: scale(.8) translateY(-62.5%); transform-origin:left center; }
  .product_section.txtright .txt,.product_section.txtright .txtbig{width: 52.5%;transform: scale(.8) translateY(-62.5%);transform-origin:right center; }
}


#index .box_index{
  width: auto;
}