.modal
{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;

    display: none; 

    width: 100%;
    height: 100%;
}
.modal .modal-bg
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: .8;
    background: #000;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
}
.modal .modal-inner
{
    position: absolute;
    z-index: 1; 
    top: 50%;
    left: 50%;

    width: 100%;
    max-width: 1024px;
    height: 100%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-inner
    {
        width: 90%;
    }
}
.modal #player
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 90%;
    padding-top: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal #player
    {
        min-width: 0;
        padding-top: 50%;
    }
}
.modal #player .video-js
{
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.modal #player video
{
    position: absolute;
    top: 0;
    right: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.modal .modal-close
{
    position: absolute;
    z-index: 10;
    top: -70px;
    right: 0;

    width: 50px;
    height: 50px;

    cursor: pointer;
    -webkit-transition: all .5s ease;
            transition: all .5s ease; 
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-close
    {
        top: -50px;
        right: 0;

        width: 40px;
        height: 40px;
    }
}
.modal .modal-close:hover
{
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}
.modal .modal-close:before
{
    position: absolute;
    top: 25px;
    right: 0;

    width: 100%;
    height: 2px;

    content: '';

    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-close:before
    {
        top: 20px;
    }
}
.modal .modal-close:after
{
    position: absolute;
    top: 0;
    left: 25px;

    width: 2px;
    height: 100%;

    content: '';

    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-close:after
    {
        left: 20px;
    }
}

.content .pc,.kv.pc{display: block !important}
.content .sp,.kv.sp{display: none !important}

 
.kv{      
  position: relative; 
} 
.kv .link{position: absolute; width: 100%; height: 100%;}
.kv .title{text-shadow: 1px 1px 2px black;}
.kv .title.black{ 
    text-shadow: none;
}
.title .chs{font-size:48px;font-weight: bold;line-height: 3.8rem;}
.title .eng{font-size:1.2rem;font-weight: bold;line-height: 1.8rem;    margin-bottom: 1rem;}

.logo-container{
  font-size: 24px;padding-left: 56px;font-weight: bold;
  background-repeat: no-repeat;background-position: left center;background-size: auto 70%;
}

.logo-container-single-language{padding: 12px 0 14px 56px;padding-left:0;height: 68px;}
.logo{}
.content {margin-bottom: 46px;}
.content h3{font-weight: bold;margin-bottom: 0px;  margin-top: 50px;}
.content .p{    margin-bottom: 14px;} 
.line:after{content: "";display: block; height: 1px;background-color: #d2d2d2 }

@media screen and (min-width: 0) and (max-width: 640px){
    .logo-container { 
/*        align-items: flex-start;*/
    }
    .logo-container-single-language{
        padding-top: 0;
    }
}

/*节水技术*/
.template-3-text{width:60%;float: left;}
.template-3-picture{float: right;}
.template-3-text-2{clear:both;padding-top: 3rem;}
.template-3-text-2 p{    margin-bottom: 10px;}
.template-3-text-2 .template-3-picture-2{     float: left;   margin-right: 2rem;margin-bottom:20px;}

/*纤雨技术*/ 
.template-2-list{font-size:0}
.template-2-item{vertical-align: top;width: calc((100% - 40px)/3);margin-right: 20px;display: inline-block;font-size:1rem}
.template-2-item:nth-of-type(3n){margin-right: 0;}
.template-2-item img{display: block;    margin-bottom: 15px;}

/*智洁技术*/ 
.template-5-list{font-size:0}
.template-5-item{vertical-align: top;width: calc((100% - 20px)/2);margin-right: 20px;display: inline-block;font-size:1rem}
.template-5-item:nth-of-type(2n){margin-right: 0;}
.template-5-item img{display: block;    margin-bottom: 15px;}
.template-5-picture-container img{width: auto;}

/*智净技术*/ 
.template-4-list{font-size:0}
.template-4-item{vertical-align: top;width: calc((100% - 60px)/4);margin-right: 20px;display: inline-block;font-size:1rem}
.template-4-item:nth-of-type(4n){margin-right: 0;}
.template-4-item img{display: block;    margin-bottom: 15px;}

/*雨温技术*/ 
.template-1-picture-container{margin-bottom:20px;     margin-top: 20px;  font-size: 0;}
.template-1-picture-container img{width: calc(100%/2 - 20px);margin-right: 20px;}
.template-1-picture-container img:nth-of-type(2){margin-right: 0px;}

.template-1-technology{background-color: #fff; border: 1px solid #000;}
.template-1-technology h4{text-align: center;padding-top: 8px; padding-bottom: 8px;border-bottom: 1px solid #000}
.template-1-technology .text,
.template-1-technology .picture{display: inline-block;vertical-align: middle;}
.template-1-technology .text{margin-left: 46px;width: 460px;}
.template-1-technology .text img{display:block}
.template-1-technology .text span{display: block;margin-top: 32px;color: #666;font-size: 14px;}
.template-1-technology .picture{margin: 18px 20px 18px 0;    max-width: 38%;}
.template-1-technology .picture img{display: block}

/*雨跃技术*/
.template-5-technology{
    background-color: transparent;border: none;
}
.template-5-technology h4{
    text-align: left;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: none;
}
.template-5-technology .text, .template-5-technology .picture{
    display: inline-block;
    vertical-align: middle;
}
.template-5-technology .picture {
    margin: 18px 20px 18px 0;
    max-width: 22%;    text-align: center;
}
.template-5-technology .picture img {
    display: block;
}

@media screen and (min-width: 0) and (max-width: 640px){
    .template-5-technology .picture { 
        max-width: 44%;
    }
}
/*便圈底部电解水除菌技术
.left-right{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
    margin-top: 58px;
}
.left-right .text{
    margin-right: 26px;
}
.left-right .text .title{
    margin-top: 0;
    margin-bottom: 25px;
}
.left-right .pic{
    width: 49%;
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .left-right{
        flex-direction: column;
    }
    .left-right .text{
        margin-right: auto;
    }
    .left-right .pic {
        width: auto;
        margin-top: 24px;
    }
    
}
.text-container .pic-text-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px auto;
}
.text-container .pic-text-container .pic{
    width:49.6%;
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .text-container .pic-text-container{
        flex-direction: column;
    }
    .text-container .pic-text-container .pic{
        width:100%;margin-top:10px
    }
}
.benefit-width.benefit-width-new-ewater{
    margin-top: 40px;font-size: 16px;
}
.benefit-width.benefit-width-new-ewater .benefit-subts{
    /*text-align: center;font-size: 1.8rem;*/
}

.benefit-width.benefit-width-new-ewater .ttl-icon{
    position: relative;/*top: -8px;*/
}
.benefit-width.benefit-width-new-ewater .benefit-video {
    font-size: 0;
}
.benefit-width.benefit-width-new-ewater .benefit-video video{
    /*width:100%*/
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .benefit-width.benefit-width-new-ewater .benefit-video video {
        width: 100%;
    }
}
.benefit-width.benefit-width-new-ewater .benefit-col2{
    margin-top: 40px;   margin-bottom:40px;
}
.benefit-width.benefit-width-new-ewater .benefit-col2 .video-text{ 
    /*margin-top: 20px; */   font-size: 1.2rem;font-size: 1rem;width: 100%;
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .benefit-width.benefit-width-new-ewater .benefit-col2 .video-text{ 
         font-size: 1rem;
    }
}
.benefit-width.benefit-width-new-ewater .benefit-col2 .video-text:nth-of-type(1){
    margin-top: 0px;
}

.benefit-width.benefit-width-new-ewater .box2{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: flex-start;
}

@media screen and (min-width: 0) and (max-width: 640px){
    .benefit-width.benefit-width-new-ewater .box2{
        justify-content: space-between;    overflow: hidden;
    }
}
.benefit-width.benefit-width-new-ewater .box2 dl{
    width: 150px;
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .benefit-width.benefit-width-new-ewater .box2 dl{
         width: 13.33333vw;
    }
}

.benefit-width.benefit-width-new-ewater .box2 dt,
.benefit-width.benefit-width-new-ewater .box2 figcaption{
    /*font-size: 1.4rem;font-size: 22px;*/
}

@media screen and (min-width: 0) and (max-width: 640px) {
    .benefit-width.benefit-width-new-ewater .box2 dt,
    .benefit-width.benefit-width-new-ewater .box2 figcaption{
        font-size: 12px;
        position: relative;
        width: 200px;
        left: 50%;
        transform: translateX(-50%);
    }
}
.benefit-width.benefit-width-new-ewater .box2 dl dt{
    /*height: 4.3rem;height: 69px;*/line-height: 1.4;font-weight: 400;  
    position: relative; width: 130%;
    left: 50%; transform: translateX(-50%);
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .benefit-width.benefit-width-new-ewater .box2 dl dt{
        height: 1.8rem;height: 30px;line-height: 1.2;
    }
}
.benefit-width.benefit-width-new-ewater .box2 .arrow{
    margin-top: 3.95904vw;
    width: 3.41297vw;
    /*height: 9.82935vw;*/
    position: relative;
    margin-top: 83px;
    width: 60px; 
}
@media screen and (min-width: 0) and (max-width: 640px) {
    .benefit-width.benefit-width-new-ewater .box2 .arrow{
        width: 4vw;margin-top:8.4%;margin-top: 41px;
    }
}
.benefit-width.benefit-width-new-ewater .box2 .arrow:after, 
.benefit-width.benefit-width-new-ewater .box2 .arrow:before{
    content: "";
    position: absolute;
    top: 61%;right: 0;
}
.benefit-width.benefit-width-new-ewater .box2 .arrow:after{
    margin-top: -0.75085vw;
    margin-right: 0.13652vw;
    width: 1.50171vw;
    height: 1.50171vw;
    border-right: 0.20478vw solid #13449d;
    border-top: 0.20478vw solid #13449d;
    transform: rotate(45deg);
}
.benefit-width.benefit-width-new-ewater .box2 .arrow:before{
    width: 100%;height: 0.20478vw;background-color: #13449d;
}




.benefit-width.benefit-width-new-ewater .benefit-col2{ 
    width: 85%;
    margin: 60px auto 40px;margin: 60px auto 40px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;align-items: flex-start;
}
@media screen and (min-width: 0) and (max-width: 640px){
    .benefit-width.benefit-width-new-ewater .benefit-col2 {
            display: block;
            margin: 60px auto 40px; 
            margin-top: 25px;     width: 100%;
    } 
}

.benefit-width.benefit-width-new-ewater .benefit-col2 .col2-box {
    width: calc(50% - 30px);
    margin-right: 60px;
}
.benefit-width.benefit-width-new-ewater .benefit-col2 .col2-box:nth-child(even) {
    margin-right: 0;
}
@media screen and (min-width: 0) and (max-width: 640px){

    .benefit-width.benefit-width-new-ewater .benefit-col2 .col2-box
    {
            width: auto;
            margin-top: 20px;
            margin-right: 0;
    }
}


/*清洁水雾淋浴技术*/
.mist-spa-1 {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    margin-top: 50px;
}
.mist-spa-1 .text h3{
    margin-top:0;
}
h3.mist-spa-2{
    margin-top: 0;
}
.mist-spa-3{
    display: flex;
    padding: 50px 90px;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.mist-spa-3 .picture{
    width: 30%;
}
.mist-spa-3 .arrow{ 
    width: 20px;
}
.mist-spa-4{
    align-items: flex-start;
    margin-top: 50px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.mist-spa-4 .picture{
    width: 34%;
}


/*可能公用的*/

.smaller{color: #666666;    font-size: 0.75rem;}

.video-container{font-size: 0;margin-bottom: 10px}
.video-container h3{font-weight: bold;font-size:1rem;margin-bottom: 26px;}
.video-container a{line-height: 2.8;margin-bottom: 14px;text-align: center;font-size:1rem;display: inline-block; margin-right: 20px}
.video-container a:nth-of-type(3n){margin-right: 0;}
.video-container a:hover{text-decoration: none;color: #262626}
.video-container a img{display: block}


.product-container{font-size: 0;margin-bottom: 10px;}
.product-container h3{font-weight: bold;font-size:1rem;margin-bottom: 26px;}
.product-container a{line-height: 1.8;margin-bottom: 14px;text-align: left;font-size:1rem;display: inline-block; margin-right: 20px;  vertical-align: top;  max-width: 240px;}
.product-container a:nth-of-type(4n){margin-right: 0;}
.product-container a:hover{text-decoration: none;/*color: #262626*/}
.product-container a img{display: block; margin-bottom: 20px;}
.product-container a .model{font-size: 12px;display: inline-block;width:100%;vertical-align: top;white-space: nowrap;overflow: hidden;}
.product-container a .name{display: inline-block;width:100%;margin-top:-6px;vertical-align: top;}


@media screen and (max-width:640px) {  
  .content .pc,.kv.pc{display: none !important}
  .content .sp,.kv.sp{display: block !important}
  .kv{padding-bottom: 66%;}
  .logo{  margin-bottom: 0px;}
  .content h3{;margin-bottom: 12px;}
  .content .logo{    margin-left: -20px;}
  
  .template-5-picture-container img{width: 100%;}
  .template-5-item{width: 100%;margin-bottom: 20px;margin-right: 0px;}
  .template-5-item:last-of-type{margin-bottom: 0px;}
  
  .template-4-item{width: calc((100% - 40px)/2);margin-bottom: 20px;}
  .template-4-item:nth-of-type(2n){margin-right: 0;}

  .template-3-text-container{}
  .template-3-text{width:100%;    float: none;}
  .template-3-picture{float: none;width: 75%;    display: block;    margin: auto;}
  .template-3-text-2{    text-align: left;}
  .template-3-text-2 .template-3-picture-2{margin-bottom: 1rem;float:none;width: 50%;}
   
  .template-2-item{width: calc((100% - 20px)/2);margin-bottom: 1rem;}
  .template-2-item:nth-of-type(3n){margin-right: 20px;}
  .template-2-item:nth-of-type(2n){margin-right: 0px;}
   
  .template-1-picture-container img{width: calc(100%/2 - 10px);}
  .template-1-technology{    text-align: center;}
  .template-1-technology h4{border-bottom: 1px solid #d2d2d2;}
  .template-1-technology .text{margin-left: 12px; margin-right: 12px;width: auto;    text-align: left;margin-top: 16px;}
  .template-1-technology .picture{margin: 18px 7px 18px 0; width: 40%;}
  .template-1-technology .picture-1{max-width:inherit; width:100%}

  /*可能公用的*/
  .content p img{width:100%}
  .video-container a,.product-container a{    width: calc(100%/2 - 10px);}
  .video-container a:nth-of-type(2n),.product-container a:nth-of-type(2n){margin-right: 0;}
}