.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{/*padding-bottom: 21%;*/    position: relative;}

.title .chs{font-size:2rem;font-weight: bold;line-height: 2.2rem;}
.title .eng{font-size:1.2rem;font-weight: bold;line-height: 1.8rem;    margin-bottom: 1rem;}
.logo-container{
  font-size: 18px;font-weight: bold;padding: 12px 0 12px 56px;
  background-repeat: no-repeat;background-position: left center;background-size: auto 70%;
}
.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 }


/*节水技术*/
.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}

/*可能公用的*/

.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;}
}