/* -------------------------------------  1259px  ------------------------------------- */
@media(max-width:1259px)
{
    /* KeyVisualTopPage */
    .KeyVisualBox{ max-width: 900px; }

    /* AboutBox */
    .AboutBox .RightContent .Content{ max-width: 80%; margin-left: 10%; }

    /* OurService */
    .OurServiceBox{ max-width: 960px; }

    /* OurWork */
    .OurWork ul li{ min-height: 340px; }
    .OurWork ul li:hover .Detail .Inner{ padding: 30px 30px;}
    .OurWork ul li:hover .Detail .Inner h3{ font-size: 28px;}

    /* OurHappyClient */
    .OurHappyClientBox{ max-width: 960px; }

    /* OurTeam */
    .OurTeam .OurTeamBox{ max-width: 960px; }

    /* BlogBox */
    .container_Blog { max-width: 960px; }
    .BlogBox .RightPicture{ height: 500px; }

    /* footer */
    footer .FooterBox{ max-width: 960px; }
}

/* -------------------------------------  1023px  ------------------------------------- */
@media(max-width:1023px)
{
    /* KeyVisualTopPage */
    .KeyVisualBox{ max-width: 80%; }

    /* AboutBox */
    .AboutBox .LeftPicture{ width: 50%;}
    .AboutBox .RightContent{ width: 50%; }
    .AboutBox .RightContent .Content{ max-width: 80%; margin-left: 10%; }

    /* OurService */
    .OurServiceBox{ max-width: 90%; }
    .OurServiceBoxList .ServiceList{ padding-right: 30px; }
    .OurServiceBoxList .ServiceList h3{ font-size: 22px; }
    .OurServiceBoxList .ServiceList ul li{ font-size: 14px;}

    /* OurWork */
    .OurWork ul li{ min-height: 340px; }
    .OurWork ul li .Detail{ display: table; top: 0; opacity: 1;}
    .OurWork ul li .Detail .Inner{ display: table-cell; vertical-align: middle; text-align: center; color: #fff; position: relative; padding: 30px 30px; background: rgba(0, 0, 0, 0.6);}
    .OurWork ul li .Detail .Inner h3{ font-size: 28px; line-height: 30px;}
    .OurWork ul li .Detail .Inner p{  line-height: 21px;}
    .OurWork ul li:nth-last-child(-n+2){  min-height: 300px; }
    .OurWork ul li:nth-last-child(-n+1){  min-height: 300px; }

    /* OurHappyClient */
    .OurHappyClientBox{ max-width: 90%; }
    .OurHappyClientBox .LeftContent{ width: 40%; }
    .OurHappyClientBox .LeftContent .Content{ padding-right: 50px; }
    .OurHappyClientBox .RightLogo{ width: 60%; padding: 20px; }
    .OurHappyClientBox .RightLogo ul li { height: 90px;}
    .OurHappyClientBox .RightLogo ul li img{ max-height: 90px; }

    /* OurTeam */
    .OurTeam .OurTeamBox{ max-width: 90%; }

    /* BlogBox */
    .container_Blog { max-width: 90%; }
    .BlogBox .LeftContent{ width: 45%; }
    .BlogBox .RightPicture{ width: 55%; height: 450px; }

    /* footer */
    footer .FooterBox{ max-width: 90%; padding-bottom: 20px; }
    footer .FooterBox .FooterNav .Address{ width: auto; margin-left: 40px;}
    footer .FooterBox .FooterNav .Address{ padding:  20px 30px 20px 30px; }
    footer .FooterBox .FooterNav{ display: block; font-size: 15px; }
    footer .FooterBox .FooterNav .List{ width: 45%; float: left; margin-left: 0px; }
    footer .FooterBox .FooterNav .List:before{ width: 70px; text-align: right;}
    footer .FooterBox .FooterNav .List ul { padding-left: 43px;}
    footer .FooterBox .FooterNav .EmailTel{ width: 45%; float: right; margin-left: 40px; }
}   

/* -------------------------------------  767px  ------------------------------------- */
@media(max-width:767px)
{
    /* KeyVisualTopPage */
    .KeyVisualBox{ font-size: 23px;}
    .KeyVisualBox h1{ font-size: 60px; line-height: 70px; }

    /* AboutBox */
    .AboutBox{ display: block;}
    .AboutBox .LeftPicture{ width: auto; height: 450px;}
    .AboutBox .RightContent{ width: 90%; margin: auto; padding: 40px 0; }
    .AboutBox .RightContent .Content{ max-width: 100%; margin-left: 0; }

    /* OurService */
    .OurServiceBoxList{ display: block; }
    .OurServiceBoxList .ServiceList{ width: 50%; float: left; padding-right: 50px; }
    .OurServiceBoxList .ServiceList h3{ font-size: 26px; }
    .OurServiceBoxList .ServiceList ul li{ font-size: 16px;}

    /* OurWork */
    .OurWork ul li{ min-height: 280px; width: auto; float: none; }
    .OurWork ul li:hover .Detail .Inner{ padding: 30px 20px;}
    .OurWork ul li .Detail .Inner{ padding: 30px 20px; }
    .OurWork ul li .Detail .Inner h3{ font-size: 28px; line-height: 30px;}
    .OurWork ul li .Detail .Inner p{ font-size: 16px; line-height: 21px;}
    .OurWork ul li:nth-last-child(-n+2){ width: auto; min-height: 280px; }
    .OurWork ul li:nth-last-child(-n+1){ width: auto; min-height: 280px; }

    /* OurHappyClient */
    .OurHappyClientBox{ display: block; }
    .OurHappyClientBox .LeftContent{ width: auto; }
    .OurHappyClientBox .LeftContent .Content{ padding-right: 0px; }
    .OurHappyClientBox .RightLogo{ width: auto; padding: 30px; margin-top: 20px; }
    .OurHappyClientBox .RightLogo ul li { height: 90px;}
    .OurHappyClientBox .RightLogo ul li img{ max-height: 80px; }
    
    /* OurTeam */
    .OurTeam .OurTeamBox{ max-width: 90%; }

    /* BlogBox */
    .container_Blog { max-width: 100%; }
    .BlogBox{ display: block;}
    .BlogBox .LeftContent{ width: 90%; margin: auto; padding: 50px 0px; }
    .BlogBox .RightPicture{ width: 100%; height: 450px; }

    /* footer */
    footer .FooterBox .FooterNav .List{ width: auto; float: none; }
    footer .FooterBox .FooterNav .EmailTel{ width: auto; float: none; margin-left: 40px; }
}

/* -------------------------------------  506px  ------------------------------------- */
@media(max-width:506px)
{
    /* KeyVisualTopPage */
    .KeyVisualBox{ font-size: 16px;}
    .KeyVisualBox h1{ font-size: 50px; line-height: 60px; }

    /* AboutBox */
    .AboutBox .LeftPicture{ width: auto; height: 300px;}

    /* OurService */
    .OurServiceBoxList{ margin-top: 40px; }
    .OurServiceBox .OurServiceHeader .Descriptions span{ display: inline; }
    .OurServiceBoxList .ServiceList{ width: auto; float: none; padding-right: 0px; padding-left: 20px; margin-top: 30px; }

    /* OurHappyClient */
    .OurHappyClient{ padding: 50px 0 20px 0;}
    .OurHappyClientBox .RightLogo{padding: 20px; }
    .OurHappyClientBox .RightLogo ul li { width: 30.3%; margin: 1.5%; height: 80px;}
    .OurHappyClientBox .RightLogo ul li img{ max-height: 70px; }

     /* BlogBox */
     .BlogBox .RightPicture{ height: 300px; }

    /* footer */
    footer{ padding: 40px 0 10px 0;}
}