/* MENU */
@media screen and (max-width: 1050px) {
    .menuList {width: calc(100% - 450px)}    
} 
@media screen and (max-width: 950px) {
    .menuList {width: calc(100% - 400px)}    
    .logo, .phone {width: 160px; font-size: 14px; padding: 0px 5px;}    
}
@media screen and (max-width: 900px) {
    .menuList {width: calc(100% - 400px)} 
    .menuList a {font-size: 14px;}    
}
@media screen and (max-width: 820px) {
    .menuList a:hover:after, .menuList .activeMenu:after { opacity: 0; display: none; }
    .c-hamburger {display: block;}
    .menuList {  width: 100%; }  
    .menuList a {opacity: 0; visibility: hidden; display: block; text-align: center; line-height: 30px; }  
    .MenuList a:first-child { padding-top: 55px; }
    .phone {width: 180px; font-size: 16px; padding: 0px 5px;}     
    .logo {width: 160px;}
    .showMenuList {         
        overflow: hidden;                        
        transform: translate3d(0px, -42px, 0px);
        margin-bottom: -35px;
        height: 250px;
    } 
    .showMenuList a {   
        visibility: visible;
        opacity: 1;   
    } 
    .showMenuList a:first-child:before {
        display: block;
        content: " ";
        background: #e2e2e2;
        height: 1px;
        margin-bottom: 10px;
        
        -webkit-transition: opacity .0s ease;
        -moz-transition: opacity .0s ease;
        -o-transition: opacity .0s ease;
        transition: opacity .0s ease;  
    }
}
@media screen and (max-width: 470px) {  
    .logo, .phone {width: 160px; font-size: 14px; padding: 0px 5px;}
} 
@media screen and (max-width: 410px) {  
    .logo {width: 170px; font-size: 12px; padding: 0px 5px;}
    .logo img {
        margin: 2px 0px 0px;
    }
    .phone {
        display: none;
    }
    .c-hamburger {
        left: auto;
        right: 20px;
    }
}
@media screen and (max-width: 910px) { 
    .bannerTitle {
        font-size: 30px;  
    }
} 
@media screen and (max-width: 780px) { 
    .banner {
        height: 350px;
    }
    .banner img {
        top: -150px;    
    }
    .bannerTitle {
        top: -30px;
        font-size: 20px;
        width: 90%;   
        margin: 56px auto 0px;
        left: 0;
        right: 0; 
        
        border-bottom: 2px solid #fff;
        padding-bottom: 20px;
        -webkit-box-shadow: 0px 5px 2px -4px rgba(0,0,0,0.75); 
        -moz-box-shadow: 0px 5px 2px -4px rgba(0,0,0,0.75); 
        box-shadow: 0px 5px 2px -4px rgba(0,0,0,0.75);        
               
    }
    .banner ul {
        width: 80%;
        text-align: center;
        top: 140px;  
        font-size: 18px;  
    }
    .banner ul li {
        padding: 10px 0px;
    }
    
    .banner p {top: 60px; width: 350px;}
    .banner p span {
        display: block;
        width: 100%;
        margin: 20px 0px !important; 
    }
    .banner p:before, .banner p:after {
        font-size: 250px;
        line-height: 220px;
        font-weight: normal;
    }
    .banner p span b {
        font-size: 34px;
        line-height: 28px;
    }
    .banner p span:first-child {
        margin-top: 44px !important;
    }
    .banner p:before {
        left: -6px;
    }
} 
@media screen and (max-width: 470px) {
    .banner p {top: 60px; width: 250px;}
    .banner p:before, .banner p:after {
        font-size: 180px;
        line-height: 250px;
    }
    
    .banner ul li {
        padding: 5px 0px;        
    }
} 
@media screen and (max-width: 600px) {
    .h1 {
        font-size: 40px;
        line-height: 15px;
    }
    .h1 div {
        line-height: 50px;
        font-size: 30px;
    }
}
@media screen and (max-width: 600px) {
    .h1 {
        margin: 60px 0px;
    }    
}
@media screen and (max-width: 700px) {     
    .serviceLayer a {    
        font-size: 14px; 
        font-weight: normal; 
        padding-top: 23px;  
    }                                          
    .serviceLayer a:last-child {
        line-height: 37px;
    }  
    .serviceLayer a:first-child {
        padding-left: 10px;
    }
}
@media screen and (max-width: 470px) {     
    .service { 
        height: 164px;
        position: relative;
    }
    .service:after {  
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto; 
        width: 10px;
        height: 10px;
        background: #fff;    
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;             
        -webkit-box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 45px 0px rgba(255,255,255,0.8);
    }
    .serviceLayer a {  
        height: 82px;
        width: 50% !important;
        background: none;
        -webkit-box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.2);
        box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.2);
        padding-left: 3px !important;
    } 
    .serviceLayer a:nth-child(1) {       
        -webkit-box-shadow: 1px 0px 4px 0px rgba(0,0,0,0.25); 
        -moz-box-shadow: 1px 0px 4px 0px rgba(0,0,0,0.25); 
        box-shadow: 1px 0px 4px 0px rgba(0,0,0,0.25);    
    }  
    .serviceLayer a:nth-child(2) {       
        -webkit-box-shadow: 2px 1px 4px 0px rgba(0,0,0,0.25);  
        -moz-box-shadow: 2px 1px 4px 0px rgba(0,0,0,0.25);  
        box-shadow: 2px 1px 4px 0px rgba(0,0,0,0.25);  
    }  
    .serviceLayer a:nth-child(3) {       
        -webkit-box-shadow: inset -1px 2px 4px 0px rgba(0,0,0,0.25);
        -moz-box-shadow: inset -1px 2px 4px 0px rgba(0,0,0,0.25);
        box-shadow: inset -1px 2px 4px 0px rgba(0,0,0,0.25);
    }   
    .serviceLayer a:nth-child(4) {       
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;  
    }        
                                           

}

@media screen and (max-width: 1150px) {     
    .serviceBriefText {
        padding: 0px;
    }
}  

@media screen and (max-width: 670px) {  
    .serviceBriefImg {  
        margin: auto;
        width: 100%;
        text-align: center;   
        margin: 20px 0px;
    }
    .serviceBrief {
        margin: 0px auto 40px;
    }
    .serviceBriefText {
        padding-top: 30px; 
        margin: auto;
        width: 100%;
        line-height: 20px;        
    }
    .serviceMobDel {
        margin: 10px 0px;
        background: #00aee0;
        height: 1px;
        display: block;
    }
}
@media screen and (max-width: 880px) {
    .priceInfoText {
        line-height: 16px;
    }    
}
@media screen and (max-width: 800px) {
    .price {
        margin-bottom: 320px;
    }
    .priceInfoText {     
        
    }
    .priceInfo {
        width: 90%;
        top: 480px;
        left: 0px;
        right: 0px;
        margin: 0px auto;
        height: auto;
        bottom: auto;
        padding: 30px 30px; 
    } 
    .priceList {
        right: 0;
        left: 0;
        top: 50%;
        margin: 0px auto;   
    }   
    
    .priceInfoText p {  
        margin: 10px 0px;    
    }
}


@media screen and (min-width: 800px) {
    .price {
        margin-bottom: 0px !important;
    }   
}

@media screen and (max-width: 800px) {
    .priceList {
        width: 90%;
    }
}
@media screen and (max-width: 380px) {
    .priceList div span {
        padding-left: 20px;
        font-size: 16px;
    }
    
}
@media screen and (max-width: 910px) {
    .infoImg {              
        left: 5%;
    }
}
@media screen and (max-width: 850px) {
    .info {
        height: auto;
    }
    .infoImg {              
        width: 60%; 
        margin: 0px auto;
        position: relative;
        left: 0;
    }
    .infoImg:before {
        left: -10px;    
    }
    .infoList, .infoListNew {       
        margin: -40px auto 60px;    
        position: static;
    }

}

@media screen and (max-width: 590px) {
    .infoImg {
        width: 95%;                
    }        
}
@media screen and (max-width: 480px) { 
    .infoList, .infoListNew {
        width: 360px;   
    }   
    .infoList li {
        font-size: 11px;  
        font-weight: normal;   
    } 
}
@media screen and (max-width: 430px) { 
    .infoList, .infoListNew {
        width: 80%;               
    }
    .infoListNew p {
        margin-left: 0px;
        font-size: 15px;
    } 
    .infoListNew span {
        margin-left: 20px;
        font-size: 15px;
    }  
    .infoList li {
        font-size: 11px;  
        font-weight: normal;
        line-height: 14px;
        padding: 12px 0px 12px 50px;  
    }   
}
@media screen and (max-width: 380px) {   
    .infoImg {       
        background-size: 70%; 
    }   
}


@media screen and (max-width: 380px) { 
    .button {
        font-size: 14px;
    }    
}
@media screen and (max-width: 660px) { 
    .form {
        width: 80%;
        height: 165px;
        text-align: center;
    }   
    .form input[type=text] { 
        width: 100%;
        margin-bottom: 15px; 
        text-align: left;   
    }
    .form .button {
        margin: auto;
        display: inline-block;
    }
}
@media screen and (max-width: 850px) { 
    .rightPhoto {          
        margin-top: -110px;
        margin-bottom: -460px; 
        background: url(images/rightPhoto.jpg) no-repeat 25% 0;  
        
        margin-right: -200px;
        width: 200px;   
        margin-left: calc(100% - 200px);   
    }
}
@media screen and (max-width: 850px) { 
    .product {
        width: 49%;
    }    
}
@media screen and (max-width: 530px) { 
    .product {
        width: 90%;  
        margin: 40px auto;
        display: block;
    }    
    .loadOther {
        display: block;
    }
    .otherProduct {
        display: none;
    } 
}
@media screen and (min-width: 530px) { 
    .product {  
        display: inline-block !important;
    }  
}
@media screen and (max-width: 540px) { 
    .compareTitle {
        font-size: 12px;
    }   
    .compareCenter {
        position: relative;
        top: -45px;
        width: 210px !important;
        overflow: visible;
        margin-left: -105px;
        margin-right: -105px;  
        padding-bottom: 0px !important;
    }
    .compareBlock {
        width: 49%;
        padding-bottom: 50px;
        vertical-align: top;
    }
    .compareTitle {
        margin-bottom: 20px;    
    }
}

@media screen and (max-width: 380px) { 
    .work {
        min-width: 95%;
    }
}
@media screen and (max-width: 860px) { 
    .reviewLayer {
        text-align: center; 
        
    }   
    .review {
        margin: 20px 3%;
    } 
}

@media screen and (max-width: 1060px) {
    .footerForm {
        width: 300px;
        margin-top: 30px;
    }        
}
@media screen and (max-width: 835px) {
    .contact {        
        margin-top: 30px;
    }        
}
@media screen and (max-width: 450px) {
    .contact, .map, .footerForm {        
        width: 90% !important;
    }  
    .contact, .map {
        text-align: center;
        margin: 30px 0px 0px;
    }      
}

@media screen and (max-width: 450px) {
    .newNumberLine span b { 
        font-size: 31px;
        line-height: 42px;    
    }
    .newNumberLine span {
        font-size: 10px;
    }
    .newNumberLine {
        padding: 0px;
    }
}