/* -------------------------------------  1280px  ------------------------------------- */
@media(max-width:1280px)
{
    /* KeyVisualTopPage */
    .KeyVisualBox{ width: 90%; }
    .KeyVisualBox div.Type1 h1{ width: 50%;}
    .KeyVisualBox div.Type1 h2{ width: 50%;}
    .KeyVisualBox div.Type1 .Descriptions{ font-size: 18px; line-height: 33px; }

    /* KeyVisualLP */
    .KeyVisualBoxLP{ width: 90%;}

    /* KeyVisualPage */
    .KeyVisualPage{ height: 300px; }
    .KeyVisualPageBox{ width: 90%; }

    /* VideoLP */
    .VideoLPBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .VideoLPBox .VideoLR .Left .MapResponsive { height: 260px; }
    .VideoLPBox .VideoLR .Right .MapResponsive { height: 260px; }

    /* TailContact */
    .TailContactBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .TailContactBox .ContactForm{ max-width: 800px;}

    /* footer */
    footer .FooterBox .FooterContactBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }
    footer .FooterBox .FooterContactBox .FooterAddress{ width: 50%; }
    footer .FooterBox .FooterContactBox .FooterAddress .Address{ font-size: 18px; }
    footer .FooterBox .FooterContactBox .FooterAddress .Address:before{ width: 50px; height: 60px;}
    footer .FooterBox .FooterContactBox .FooterContact{ width: 45%; font-size: 17px;}
    footer .FooterBox .FooterContactBox .FooterContact p.FontBig{ font-size: 25px; }
    footer .FooterBox .FooterContactBox .FooterContact br{ display: none;}
    footer .FooterBox .FooterContactBox .FooterAddress .MapResponsive { height: 250px;}
    footer .FooterBox .Copyrights .CopyrightsBox{ max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* Link_Banner */
    .Link_Banner{  max-width: auto; margin-left: 60px; margin-right: 60px; }
    .Link_Banner .Link_Left p.FontBig{ font-size: 17px; }
    .Link_Banner .Link_Left p span{ padding-left: 20px; font-size: 17px; }

    /* AboutToppage */
    .AboutToppageBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .AboutToppageBox .AboutToppageLR .HeaderBoxAll{ width: 30%; }
    .AboutToppageBox .AboutToppageLR .Detail{ width: 70%;}

    /* OurProducts */
    .OurProductsBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .OurProductsBox .OurProductsBoxList ul li .Picture{ width: 40%; height: 360px; max-width: 360px;}
    .OurProductsBox .OurProductsBoxList ul li .Detail{ width: 55%; }

    /* OurWorkToppage */
    .OurWorkToppageBoxMargin{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .OurWorkToppageBox ul li .List{ padding: 0px 20px; height: 280px; }

    /* StrengthToppage */
    .StrengthToppageBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    /* container_StrengthToppage */
    .container_StrengthToppage { width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .StrengthDetail{ font-size: 16px; line-height: 28px;}
    .StrengthDetail .Title{ font-size: 25px; }
    .StrengthOne{ min-height: auto; }
    .StrengthTwo{ min-height: auto; }
    .StrengthThree{ min-height: auto; }

    /* ProductPage */
    .ProductPage{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .ProductPage .StrengthAll{ min-height: auto; padding: 0 30px 30px 0px; }

    /* MessageFromPresident */
    .MessageFromPresidentBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .MessageFromPresidentBox .Detail .PictureTitle{ margin-bottom: 20px;}

    /* NisshoHistory */
    .NisshoHistory .NisshoHistoryBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* OurWorkPage */
    .OurWorkPageBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* OurWorkPageList */
    .OurWorkPageList .OurWorkPageListBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* NewsPageList */
    .NewsPageList .NewsPageListBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* BreadcrumbTopAll */
    .BreadcrumbBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* NewsPageSingle */
    .NewsPageSingle{ padding: 80px 0; }
    .NewsPageSingle .NewsPageSingleBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .NewsPageSingle .NewsPageSingleBox h1{ font-size: 32px; }

    /* ProductDetailList */
    .ProductDetailPage .ProductDetailPageBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .ProductDetailList .ProductDetailLR{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .ProductDetailList .ProductDetailLR .SlideImages .slider-for .slick-slide{ height: 400px; }
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li{ width: 16%;}
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li .ColorBox{ width: 60px; height: 60px; }
    .ProductDetailList .ProductDetailLR .SlideImages .slider-nav div.slick-slide{ height: 80px!important; }
    .StylePRD2 .StylePRD2Box .Colour ul li{ width: 10%; }

    /* HowTo */
    .HowTo{ padding: 80px 0; border-top: 8px solid #000; }
    .HowToHeaderList{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .HowToList2{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* ContactMiddleBox */
    .ContactMiddleBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .ContactMiddleList ul li .Icon{ width: 120px; height: 120px; padding: 25px; }
    .ContactMiddleList ul li .Icon img{ max-height: 70px; }
    .FormIcon{ max-width: 60px!important; margin-top: 5px; }

    /* InstallationLPBox */
    .InstallationLPBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* ProblemLP */
    .ProblemLP{ min-height: 1100px; padding: 10% 0 10% 0; }
    .ProblemLPBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; } 
    .ProblemLPBox .ProblemHHeader{ max-width: 450px; height: 287px;}
    .ProblemLPBox .ProblemHHeader h2{ font-size: 70px; padding-top: 50px; }
    .ProblemLPBox .ProblemHHeader p{ font-size: 35px; line-height: 40px;}
    .ProblemLPBox .ProblemList{ margin: 0px 0;}
    .ProblemLPBox .ProblemList ul li{ height: 145px; font-size: 21px; }
    .ProblemLPBox .ProblemList ul li .icon{ margin-top: 10px;}
    .ProblemLPBox .ProblemList ul li p{ line-height: 28px; }
    .ProblemLPBox .ProblemList ul li .icon{ padding-top: 45px; }
    .FontEN .ProblemLPBox .ProblemList ul li{ font-size: 20px;}
    .FontEN .ProblemLPBox .ProblemList ul li p{ line-height: 21px; }
    .FontEN .ProblemLPBox .ProblemHHeader h2{ margin: 0; font-size: 60px; padding-top: 60px; }
    .FontEN .ProblemLPBox .ProblemHHeader p{ font-size: 30px; }

    /* container_ProundAchievement */
    .HeaderFeature{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .container_ProundAchievement { width: auto; max-width: auto; margin-left: 60px; margin-right: 60px;  }
    .container_ProundAchievement1 > div > ul{ width: 100%;}
    .container_ProundAchievement1{ width: auto; max-width: auto; margin-right: 60px; }
    .ProundAchievement1 .Box1{ padding-left: 60px; padding-right: 0;}
    .ProundAchievement1 .Box2{ padding-left: 50px; }

    /* FeatureIntroBox */
    .FeatureIntroBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .FeatureIntroList ul li .Title{ padding: 10px 5px; font-size: 18px;}
    .FeatureIntroList ul li .Detail .Captions{ font-size: 15px; }

    /* AruniProblremList */
    .AruniProblremList h2{ top: 30%; font-size: 60px; }
    .AruniProblremList ul li{ height: 400px; }

    /* FeatureIntro */
    .ProductSectionBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .ProductSectionList ul li .Picture{ height: 300px;}

    /* WhyAlumiRoofList */
    .WhyAlumiRoofList ul li:nth-child(odd) .Detail{ padding: 0 20px 0 20px; }
    .WhyAlumiRoofList ul li .Detail{ padding: 0 20px 0 20px; }
    .WhyAlumiRoofList ul li .Detail .Title{ margin: 0; font-size: 28px; padding-left: 70px; line-height: 35px;}
    .WhyAlumiRoofList ul li .Detail .Title:before{ width: 50px; height: 60px; top: 0; }
    .WhyAlumiRoofList ul li .Detail .Captions{ font-size: 18px; margin: 10px 0 0 0;}

    /* StepInstall */
    .StepInstallBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .StepInstallList ul li img{ max-height: 200px; }
    .Complete1WeekVideo{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px;}
    .Complete1WeekVideo ul li .VideoBox { height: 250px; }

    /* ContactusMiddle */
    .ContactusMiddleBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }
    .ContactusMiddleList ul li{ font-size: 18px; }
    .ContactusMiddleList ul li img{ max-width: 55px; max-height: 55px; }

    /* FeatureIntro */
    .ProductInfomationsBox{ width: auto; max-width: auto; margin-left: 60px; margin-right: 60px; }

    /* AlumiOurWorks */
    .AlumiOurWorksBox{ width: auto; max-width: auto;}
}

/* -------------------------------------  1023px  ------------------------------------- */
@media(max-width:1023px)
{
    /* KeyVisualTopPage */
    .KeyVisualBox div.Type1 h1{ font-size: 38px; width: 50%; }
    .KeyVisualBox div.Type1 h2{ font-size: 38px; width: 50%; }
    .KeyVisualBox div.Type1 .Descriptions{ font-size: 18px; line-height: 31px; }
    .KeyVisualBox div.Type2 .Inner h1{ font-size: 38px; }
    .KeyVisualBox div.Type2 .Inner h2{ font-size: 38px; }
    .KeyVisualBox div.Type2 .ReadMore a{ font-size: 20px; padding: 15px 100px 15px 60px; }

    /* KeyVisualPage */
    .KeyVisualPage{ height: 260px; }
    .KeyVisualPageBox .TitlePage{ font-size: 38px; padding-top: 50px; padding-right: 0px;}

    /* KeyVisualBoxLP */
    .KeyVisualBoxLP .Box h1 span{font-size: 0.7em;} 
    .KeyVisualBoxLP .ArumiRoof h1{ font-size: 80px; }
    .KeyVisualBoxLP .ArumiRoof .Title{ font-size: 60px;}
    .KeyVisualBoxLP .ArumiRoof .Captions{ font-size: 40px;}
    .KeyVisualBoxLP .ArumiRoof .BTNContact{ max-width: 300px; height: 80px;}
    .KeyVisualBoxLP .ArumiRoof .BTNContact a{ font-size: 30px; padding: 18px 0 6px 0;}

    .ArumiRoofBanner h1{ font-size: 80px!important; }
    .ArumiRoofBanner .Title{ font-size: 60px!important;}
    .ArumiRoofBanner .Captions{ font-size: 40px!important;}
    .ArumiRoofBanner .BTNContact{ max-width: 300px!important; height: 80px!important;}
    .ArumiRoofBanner .BTNContact a{ font-size: 30px!important; padding: 18px 0 6px 0!important;}
    
    /* VideoLP */
    /*.VideoLP { margin-top: -50px;}*/
    .VideoLPBox{  width: 90%; margin: 0 auto; margin-top: -40px; font-size: 20px;}
    .VideoLPBox .TxtLP{ line-height: 35px; }
    .VideoLPBox .VideoLR .Left{ width: 48%;}
    .VideoLPBox .VideoLR .Left .MapResponsive { height: 220px; }
    .VideoLPBox .VideoLR .Right{ width: 48%;}
    .VideoLPBox .VideoLR .Right .MapResponsive { height: 220px; }

    /* TailContact */
    .TailContactBox{ width: 90%; margin: 0 auto; }
    .TailContactBox .SocialBox .Title{ font-size: 20px; padding: 10px;}

    /* HeaderBoxAll */
    .HeaderBoxAll h2{ font-size: 32px; }
    .HeaderBoxAllGray h1{ font-size: 32px; }
    .HeaderBoxAllGray h2{ font-size: 32px; }

    /* footer */
    footer .FooterBox .FooterContactBox{ width: 90%; margin: 0 auto; margin-top: 60px; margin-bottom: 40px; }
    footer .FooterBox .FooterContactBox .FooterAddress .Address{ font-size: 16px; }
    footer .FooterBox .FooterContactBox .FooterAddress .Address:before{ width: 50px; height: 50px;}
    footer .FooterBox .FooterContactBox .FooterAddress .CompanyName{ font-size: 18px; }
    footer .FooterBox .FooterContactBox .FooterContact p.FontBig{ font-size: 23px; }
    footer .FooterBox .FooterContactBox .FooterContact p span{ padding-left: 10px;}
    footer .FooterBox .FooterContactBox .FooterContact{ font-size: 16px; }
    footer .FooterBox .Copyrights .CopyrightsBox{ width: 90%; margin: 0 auto; }

    /* Link_Banner */
    .Link_Banner{ width: 90%; margin: 0 auto; margin-top: 60px; margin-bottom: 60px;  }
    .Link_Banner .Link_Left p span{ padding-left: 0px; }

    /* AboutToppage */
    .AboutToppageBox{ width: 90%; margin: 0 auto; }
    .AboutToppageBox .AboutToppageLR .HeaderBoxAll{ width: 35%; }
    .AboutToppageBox .AboutToppageLR .Detail{ width: 65%;}
    .AboutToppage .IconLeftAbout{ width: 50%; height: 25%; bottom: 0px; max-height: 200px; }
    .AboutToppage .IconRightAbout{ width: 40%; height: 50%; bottom: 0px; max-height: 600px;}

    /* OurProducts */
    .OurProductsBox{  width: 90%; margin: 0 auto; }
    .OurProductsBox .OurProductsBoxList ul li{ align-items: top;}
    .OurProductsBox .OurProductsBoxList ul li:nth-child(odd){ align-items:flex-start; }
    .OurProductsBox .OurProductsBoxList ul li .Picture{ width: 40%; height: 280px; max-width: 280px;}
    .OurProductsBox .OurProductsBoxList ul li .Detail{ width: 55%; }
    .OurProductsBox .OurProductsBoxList ul li .Detail .Title{ font-size: 30px; }
    .OurProductsBox .OurProductsBoxList ul li .Detail .Icon{ max-width: 32px; max-height: 32px;}
    .OurProductsBox .OurProductsBoxList ul li .Detail .Captions{ font-size: 16px; line-height: 30px;}
    .OurProductsBox .OurProductsBoxList ul li .Detail .Readmore{ margin: 30px 0 0 0;}

    /* OurWorkToppage */
    .OurWorkToppageBoxMargin{ width: 90%; margin: 0 auto; }
    .OurWorkToppageBox{ margin: 40px 0 10px 0; }
    .OurWorkToppageBox ul li .List{ padding: 0px 10px; height: 220px; }
    .OurWorkToppage .LinkReadmore{ margin-top: 0px;}
    .OurWorkToppage .slick-list{ margin-bottom: 20px;}

    /* StrengthToppage */
    .StrengthToppageBox{ width: 90%; margin: 0 auto; }
    /* container_StrengthToppage */
    .container_StrengthToppage {  width: 90%; margin: 0 auto; }
    .StrengthOne{ padding: 0 20px 20px 20px; }
    .StrengthTwo{ padding: 0 20px 20px 20px; }
    .StrengthThree{ padding: 0 20px 20px 20px; }
    .StrengthDetail .Title{ margin-top: 20px; }

    /* ProductPage */
    .ProductPage{ width: 90%; margin: 0 auto; }
    .ProductPage .StrengthPicture{ width: calc(100% - 320px); max-width: 250px; height: 200px; }
    .ProductPage .StrengthPicture:before{ width: 250px; height: 200px;}
    .ProductPage .StrengthDetail{ width: calc(100% - 300px); font-size: 16px; line-height: 28px; }
    .ProductPage .StrengthDetail .Title{ font-size: 25px; margin-top: 40px;}

    /* MessageFromPresident */
    .MessageFromPresident{ padding: 80px 0 80px 0; }
    .MessageFromPresidentBox{ width: 90%; margin: 0 auto; }

    /* NisshoHistory */
    .NisshoHistory .NisshoHistoryBox{ width: 90%; margin: 0 auto;  }
    .NisshoHistory .IconRightNisshoHistory{ width: 40%; height: 50%; margin-top: 0px; max-height: 400px;}

    /* OurWorkPage */
    .OurWorkPageBox{ width: 90%; margin: 0 auto; }
    .OurWorkPage .IconRightOurwork{ width: 30%; max-height: 200px; }

    /* OurWorkPageList */
    .OurWorkPageList .OurWorkPageListBox{ width: 90%; margin: 0 auto; }

    /* NewsPageList */
    .NewsPageList{ padding: 50px 0;}
    .NewsPageList .NewsPageListBox{  width: 90%; margin: 0 auto; }
    .NewsPageList .NewsPageListBox .NewsListBox ul li{ width: 48%; margin: 2% 0% 2% 4%; background-color: #efefef; }
    .NewsPageList .NewsPageListBox .NewsListBox ul li:nth-child(odd){ margin-left: 0; background-color: #ddeaf0; }
    .NewsPageList .NewsPageListBox .NewsListBox ul li:nth-child(3n){ margin-right: 0; /*background-color: #000;*/ }
    .NewsPageList .NewsPageListBox .NewsListBox ul li:nth-child(3n+1){ margin-left: 0; /*background-color: red; */}
    .NewsPageList .NewsPageListBox .NewsListBox ul li:nth-child(2n){ margin-left: 4%; /*background-color: red;*/ }

    /* BreadcrumbTopAll */
    .BreadcrumbBox{ width: 90%; margin: 0 auto; }

    /* NewsPageSingle */
    .NewsPageSingle .NewsPageSingleBox{ width: 90%; margin: 0 auto; }
    .NewsPageSingle .NewsPageSingleBox h1{ font-size: 30px; }

    /* PagenotFound */
    .PagenotFound{ width: 90%; margin-top: 50px; padding: 30px; }

    /* ProductDetailList */
    .ProductDetailPage .ProductDetailPageBox{ width: 90%; margin: 0 auto; }
    .ProductDetailList .ProductDetailLR{ width: 90%; margin: 0 auto; }
    .ProductDetailList .ProductDetailLR .SlideImages .slider-for .slick-slide{ height: 350px; }
    .ProductDetailList .ProductDetailLR .SlideImages .slider-nav div.slick-slide{ height: 50px!important; }
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li{ width: 21%;}
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li .ColorBox{ width: 55px; height: 55px; }
    .StylePRD2 .StylePRD2Box{width: 90%;}
    .StylePRD2 .StylePRD2Box .PicStyle2 div{ height: 200px; }
    .rtl-slider-flex .rtl-slider .rtl-slider-slide{ background-size: contain; height: 400px;}

    /* HowTo */
    .HowTo{ padding: 50px 0; border-top: 5px solid #000; }
    .HowToHeaderList{ width: 90%; margin: 0 auto; margin-top: 80px; margin-bottom: 80px; }
    .HowToHeaderList .Right .Title{ font-size: 25px;}
    .HowToHeaderList .Right .Square:before{ width: 30px; height: 30px; }
    .HowToList2{ width: 90%; margin: 0 auto; margin-top: 80px; margin-bottom: 80px; }
    .HowToList2 .Title{ font-size: 25px;}

    /* ContactMiddleBox */
    .ContactDescription{ font-size: 20px;}
    .ContactMiddleBox{ width: 90%; margin: 0 auto; }
    .ContactMiddleList ul li{ font-size: 18px; }
    .ContactMiddleList ul li .Icon{ width: 100px; height: 100px; padding: 20px; }
    .ContactMiddleList ul li .Icon img{ max-height: 60px; }
    .FormIcon{ max-width: 50px!important; margin-top: 5px;}

    /* InstallationLPBox */
    .InstallationLPBox{ width: 90%; margin: 0 auto; }

    /* ProblemLP */
    .ProblemLP{ min-height: 900px; padding: 10% 0 10% 0; }
    .ProblemLPBox{ width: 90%; margin: 0 auto; } 
    .ProblemLPBox .ProblemHHeader{ max-width: 400px; height: 250px;}
    .ProblemLPBox .ProblemHHeader h2{ font-size: 65px; padding-top: 40px; }
    .ProblemLPBox .ProblemHHeader p{ font-size: 35px; line-height: 40px;}
    .ProblemLPBox .ProblemList{ margin: 0px 0;}
    .ProblemLPBox .ProblemList ul li{ height: 111px; font-size: 16px; }
    .ProblemLPBox .ProblemList ul li p{ line-height: 22px; }
    .ProblemLPBox .ProblemList ul li .icon{ padding-top: 30px; }
    .ProblemLPBox .ProblemList ul li .icon:before{ width: 30px; height: 30px; top: -5px; }
    .FontEN .ProblemLPBox .ProblemList ul li{ font-size: 16px;}
    .FontEN .ProblemLPBox .ProblemList ul li p{ line-height: 19px; }
    .FontEN .ProblemLPBox .ProblemHHeader h2{ margin: 0; font-size: 50px; padding-top: 60px; }
    .FontEN .ProblemLPBox .ProblemHHeader p{ font-size: 25px; }


    /* container_ProundAchievement */
    .FeatureBGAll{  padding: 200px 0 100px 0;}
    .HeaderFeature{ width: 90%; margin: 0 auto; top: -160px; }
    .HeaderFeature .Left .LeftBox{ width: 330px; height: 330px; font-size: 30px; }
    .HeaderFeature .Left .LeftBox img{ max-width: 200px;}
    .container_ProundAchievement {  width: 90%; margin: 0 auto; }
    .ProundAchievement .Box1 .TItle p{ font-size: 28px; }
    .ProundAchievement1 .Box1 .TItle p{ font-size: 28px; }
    .ProundAchievement1 .Box1 .TItle p span{ font-size: 23px; }

    /* InstallationLPList */
    .FontEN .InstallationLPList .BA .Title{ font-size: 18px;}

    /* FeatureIntroBox */
    .FeatureIntroBox{ width: 90%; margin: auto; }
    .FeatureIntroList ul { flex-wrap: wrap;}
    .FeatureIntroList ul li{ width: 48%; margin: 2% 0% 2% 2%; }
    .FeatureIntroList ul li:nth-child(odd){ margin-left: 0; margin-right: 2%; }
    .FeatureIntroList ul li .Title{ padding: 10px 5px; font-size: 18px;}
    .FeatureIntroList ul li .Detail .Captions{ font-size: 15px; }

    /* AruniProblremList */
    .AruniProblremList h2{ top: 30%; font-size: 50px; }
    .AruniProblremList ul li{ height: 350px; }

    /* FeatureIntro */
    .ProductSectionBox{ width: 90%; margin: auto;}
    .ProductSectionList ul li .Picture{ height: 200px; }
    .ProductSectionList ul li .TitleTH{ font-size: 25px; }
    .ProductSectionList ul li .TitleEN{ font-size: 16px; }

    /* WhyAlumiRoofList */
    .WhyAlumiRoofList ul li{ display: block; }
    .WhyAlumiRoofList ul li .Picture{ width: 100%; }
    .WhyAlumiRoofList ul li .Detail{ width: 100%; padding: 40px; }
    .WhyAlumiRoofList ul li:nth-child(odd) .Detail{ padding: 40px;}
    .WhyAlumiRoofList ul li:after{ width: 100%; left: 0%; background-image: linear-gradient(to top, rgba(255,255,255,.2), rgba(255,255,255,1)); }
    .WhyAlumiRoofList ul li:nth-child(odd):after{ width: 100%; left: 0%; background-image: linear-gradient(to top, rgba(255,255,255,.2), rgba(255,255,255,1));  }
    
    /* StepInstall */
    .StepInstallBox{ width: 90%; margin: auto; }
    .StepInstallBox h2{ font-size: 50px; }
    .StepInstallList ul li img{ max-height: 200px; }
    .Complete1WeekVideo{ width: 90%; margin: auto;}
    .Complete1WeekVideo ul li .VideoBox { height: 200px; }
    .Complete1Week p{ font-size: 25px; padding: 10px 30px; }

    /* ContactusMiddle */
    .ContactusMiddleBox{ width: 90%; margin: auto;}
    .ContactusMiddleList ul li{ font-size: 18px; }
    .ContactusMiddleList ul li img{ display: block; margin: auto; margin-bottom: 10px; max-width: 55px; max-height: 55px; }

    /* FeatureIntro */
    .ProductInfomationsBox{ width: 90%; margin: auto; }
    .ProductInfomationsList ul li .Picture{ height: 350px; }
    .ProductInfomationsBox .PRDColor{ width: 90%;margin: auto;}

    /* AlumiOurWorksBox */
    .AlumiOurWorksBox{ /*width: 90%;*/ margin: auto; }
    .AlumiOurWorksList ul li{ height: 600px; }

    /* AlumiClass */
    .AlumiClass .TailContactBox .SocialBox .Title{ font-size: 16px;}
    .AlumiClass .TailContactBox .SocialBox .SCBox{ font-size: 20px;}

    /* ContactFixed */
    .ContactFixed{ display: block; }
    .AlumiFooter .TelF{ margin-top: 20px!important;}
    .AlumiFooter .TelF:before{ top: 0;}
    .AlumiFooter .MailF:before{ top: 0;}

}

/* -------------------------------------  767px  ------------------------------------- */
@media(max-width:767px)
{
    /* TailContact */
    .TailContactBox .SocialBox{ display: block; }
    .TailContactBox .ContactDescription{ font-size: 18px;}
    .TailContactBox .SocialBox .SocialBoxLine{ width: 100%; }
    .TailContactBox .SocialBox .SocialBoxFB{ width: 100%; margin-top: 20px;}

    /* footer */
    footer .FooterBox .Copyrights .CopyrightsBox p:nth-child(1){ float: none; text-align: center; padding-left: 0px;}
    footer .FooterBox .Copyrights .CopyrightsBox p:nth-child(2){ float: none; text-align: center; padding-right: 0px; padding-top: 10px;}

    /* ProductDetailList */
    .ProductDetailList .ProductDetailLR{ display: block; }
    .ProductDetailList .ProductDetailLR .SlideImages{ width: 100%; padding: 0 30px; }
    .ProductDetailList .ProductDetailLR .ProductDetail{ width: 100%; margin-top: 40px; }
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li{ width: 12%;}
    .StylePRD2 .StylePRD2Box .PicStyle2 div{ width: 31%; height: 180px; }
    .StylePRD2 .StylePRD2Box .DimensionPrice .Dimension{ font-size: 16px; }
    .StylePRD2 .StylePRD2Box .DimensionPrice .Prices{ font-size: 16px; }
    .ProductDetailList .ProductDetailLR .SlideImages .NoPhoto{ display: none; }

    /* ProblemLP */
    .ProblemLP{ min-height: 900px; padding: 10% 0 10% 0; }
    .ProblemLPBox .ProblemHHeader{ max-width: 400px; height: 250px;}
    .ProblemLPBox .ProblemHHeader h2{ font-size: 65px; padding-top: 40px; }
    .ProblemLPBox .ProblemHHeader p{ font-size: 35px; line-height: 40px;}
    .ProblemLPBox .ProblemList{ margin: 0px 0;}
    .ProblemLPBox .ProblemList ul li{ height:93px; font-size: 15px; }
    .ProblemLPBox .ProblemList ul li p{ line-height: 20px; }

    /* ProundAchievement */
    .container_ProundAchievement{ padding-top: 20px; padding-bottom: 20px;}
    .container_ProundAchievement > div > ul > li { width: 100%; margin: auto; border-radius: 20px; }
    .ProundAchievement{ width: auto; display: block; padding: 0 30px 30px 30px; }
    .ProundAchievement .Box1{ width: 100%; padding-right: 0px; margin: auto;}
    .ProundAchievement .Box1 .TItle{ margin: auto; }
    .ProundAchievement .Box1 .TItle p{ font-size: 28px; }
    .ProundAchievement .Box1 .MBPicrture{ display: block; margin-top: 30px;}
    .ProundAchievement .Box1 .MBPicrture img{ width: 100%; height: auto; max-width: 100%;}
    .ProundAchievement .Box1 .Description{ max-width: 100%; padding: 0; margin-top: 30px; font-size: 18px; line-height: 30px;}
    .ProundAchievement .Box2{ width: 100%; display: none;}


    .container_ProundAchievement1{ width: 90%; margin: 0 auto;  padding-top: 20px; padding-bottom: 20px;}
    .container_ProundAchievement1 > div > ul > li { width: 100%; margin: auto; border-radius: 20px; }
    .ProundAchievement1{ width: auto; display: block; margin: 0 auto!important; padding: 0 30px 30px 30px; }
    .ProundAchievement1 .Box1{ width: 100%; padding: 0; margin: auto;}
    .ProundAchievement1 .Box1 .TItle{ margin: auto; }
    .ProundAchievement1 .Box1 .TItle p{ font-size: 28px; }
    .ProundAchievement1 .Box1 .MBPicrture{ display: block; margin-top: 30px;}
    .ProundAchievement1 .Box1 .MBPicrture img{ width: 100%; height: auto; max-width: 100%;}
    .ProundAchievement1 .Box1 .Description{ max-width: 100%; padding: 0; margin-top: 30px; font-size: 18px; line-height: 30px;}
    .ProundAchievement1 .Box2{ width: 100%; display: none;}

    /* FeatureBGAll */
    .HeaderFeature .Left{ width: 100%;}
    .HeaderFeature .Right{ display: none;}

    /* AlumiClass */
    .AlumiClass .TailContactBox .SocialBox .SocialBoxLine{ margin-right: 0;}
    .AlumiClass .TailContactBox .SocialBox .SocialBoxFB{ margin-left: 0;}
}

/* -------------------------------------  640px  ------------------------------------- */
@media(max-width:640px)
{
    /* KeyVisualTopPage */
    /*.KeyVisualBox div{ flex-wrap: wrap; height: auto; justify-content: space-around;}*/
    .KeyVisualBox div.Type1{ flex-wrap: wrap; height: auto; justify-content: space-around;}
    .KeyVisualBox div.Type1 h1{ width: 90%; height: auto; font-size: 26px; }
    .KeyVisualBox div.Type1 h2{ width: 90%; height: auto; font-size: 26px; }
    .KeyVisualBox div.Type1 .Descriptions{ width: 90%; height: auto; max-width: 90%; line-height: 30px; margin-top: 20px;}
    .KeyVisualBox div.Type2 .Inner h1{ font-size: 28px;}
    .KeyVisualBox div.Type2 .Inner h2{ font-size: 28px;}
    .KeyVisualBox div.Type2 .ReadMore a{ font-size: 20px; padding: 10px 80px 10px 40px; }
    .KeyVisualBox div.Type2 .ReadMore a:after{ width: 35px; height: 35px; top: 8px; right: 30px; }

    .SupachokTextSP{ display: block; padding: 150px 0 40px 0; margin: 0 auto 0 0;}
    .SupachokText{ display: none; /*padding: 150px 0 40px 0; margin: 0 auto 10px 0;*/ }
    .SupachokTextSP img{ max-width: 350px;}
    .SupachokPhoto{ padding: 0 0 50px 0; margin: 0 -20px 0 auto; }
    .SupachokPhoto img{ max-width: 300px;}

    /* KeyVisualPage */
    .KeyVisualPage{ height: 200px; }
    .KeyVisualPageBox .TitlePage{ font-size: 30px; padding-top: 50px; }

    /* KeyVisualLP */
    .KeyVisualBoxLP div img{ max-width: 480px; }
    .KeyVisualBoxLP .Box img{ max-width: 300px; }
    .KeyVisualBoxLP .Box h1{ font-size: 30px; letter-spacing: 0;}

    .KeyVisualBoxLP .ArumiRoof h1{ font-size: 60px; margin: 0!important; }
    .KeyVisualBoxLP .ArumiRoof .Title{ font-size: 38px;}
    .KeyVisualBoxLP .ArumiRoof .Captions{ font-size: 30px;}

    .ArumiRoofBanner h1{ font-size: 60px!important; margin: 0!important; }
    .ArumiRoofBanner .Title{ font-size: 38px!important;}
    .ArumiRoofBanner .Captions{ font-size: 30px!important;}

    /* VideoLP */
    .VideoLPBox{ font-size: 20px; }
    .VideoLPBox .TxtLP{ line-height: 33px; }
    .VideoLPBox .VideoLR{ display: block;}
    .VideoLPBox .VideoLR .Left{ width: 100%;}
    .VideoLPBox .VideoLR .Left .MapResponsive { height: 200px; }
    .VideoLPBox .VideoLR .Right{ width: 100%;}
    .VideoLPBox .VideoLR .Right .MapResponsive { height: 200px; }

    /* TailContactBox */
    .TailContactBox .SocialBox{ margin-top: 50px; }
    .TailContactBox .HeaderBox h2{ font-size: 30px; letter-spacing: 5px; }
    .TailContactBox .HeaderBox h2:before{ width: 40px; height: 70px; left: -45px; top: -50px; }

    /* ContactForm */
    .TailContactBox .ContactForm{ margin-top: 60px; }
    .TailContactBox .ContactForm ul li{ display: block; margin: 15px 0;}
    .TailContactBox .ContactForm ul li p:nth-child(1){ width: 100%; }
    .TailContactBox .ContactForm ul li p:nth-child(2){ width: 100%; }
    .TailContactBox .ContactForm ul li .FormBoxCheckbox{ padding-left:0px;}
    .TailContactBox .ContactForm ul li .FormBoxCheckbox label{ margin-right: 0px;}
    .TailContactBox .ContactForm .BTN{ margin-top: 40px; text-align: center;}
    .TailContactBox .ContactForm ul li p:nth-child(1) span.NoneX{display: none;}
    .TailContactBox .ContactForm ul li input[type=radio]{ margin-right: 5px;}

    /* footer */
    footer .FooterBox .FooterContactBox{ display: block; }
    footer .FooterBox .FooterContactBox .FooterAddress{ width: auto; font-size: 16px;}
    footer .FooterBox .FooterContactBox .FooterAddress .Address{ margin: 30px 0 10px 0; font-size: 16px; padding-left: 60px;}
    footer .FooterBox .FooterContactBox .FooterAddress .CompanyName{ font-size: 16px; }
    footer .FooterBox .FooterContactBox .FooterContact{ width: auto; margin-top: 20px; font-size: 14px; padding-bottom: 0; }
    footer .FooterBox .FooterContactBox .FooterContact p.FontBig{ font-size: 20px; }
    footer .FooterBox .FooterContactBox .FooterContact p{ margin: 5px  0;}
    footer .FooterBox .FooterContactBox .FooterAddress .MapResponsive { height: 220px;}

    /* Link_Banner */
    .Link_Banner{ display: block; margin-top: 0; }
    .Link_Banner .Link_Left{ width: 100%;}
    .Link_Banner .Link_Left p span{ padding-left: 0px; font-size: 16px; }
    .Link_Banner .Banner_Right{ width: 100%; margin-top: 15px;}
    .FontEN .Link_Banner .Link_Left p.FontBig{ font-size: 18px;}
    .FontEN .Link_Banner .Link_Left p span{ font-size: 18px;}

    /* AboutToppage */
    .Aboutpage{ padding: 80px 0 80px 0; }
    .AboutToppage{ padding: 80px 0 50% 0; margin-top: -20px; }
    .AboutToppageBox .AboutToppageLR{ display: block;}
    .AboutToppageBox .AboutToppageLR .HeaderBoxAll{ width: auto; }
    .AboutToppageBox .AboutToppageLR .Detail{ width: auto; margin-top: 30px; padding-left: 0; font-size: 16px;}
    .AboutToppage .IconLeftAbout{ width: 50%; height: 25%; bottom: 0px; max-height: 150px; }
    .AboutToppage .IconRightAbout{ width: 40%; height: 50%; bottom: 0px; max-height: 500px;}

    /* OurProducts */
    .OurProductsBox .OurProductsBoxList{ margin-top: 10px;}
    .OurProductsBox .OurProductsBoxList ul li{ display: block; padding:20px 0 40px 0 ; margin: 0; clear: both; overflow: auto; }
    .OurProductsBox .OurProductsBoxList ul li .Picture{ width: 100%; height: auto; max-width: 100%;}
    .OurProductsBox .OurProductsBoxList ul li .Detail{ width: 100%; }
    .OurProductsBox .OurProductsBoxList ul li .Detail .Title{ font-size: 30px; margin-top: 20px; }
    .OurProductsBox .OurProductsBoxList ul li .Detail .Icon{ max-width: 32px; max-height: 32px;}
    .OurProductsBox .OurProductsBoxList ul li .Detail .Captions{ margin: 10px 0 20px 0; font-size: 16px; line-height: 26px;}
    .OurProductsBox .OurProductsBoxList ul li .Detail .Readmore{ margin: 0px 0 0 0;}

    /* OurWorkToppage */
    .OurWorkToppage{ padding: 80px 0; }
    .OurWorkToppageBox{ margin: 40px 0 10px 0; }
    .OurWorkToppageBox ul li .List{ padding: 0px 5px; height: 150px; }
    .OurWorkToppage .LinkReadmore{ margin-top: 0px;}
    .OurWorkToppage .slick-list{ margin-bottom: 20px;}

    /* StrengthToppage */
    .StrengthToppage .StrengthVideoBox{  width: 90%; margin: auto;}
    .StrengthToppage .StrengthVideoBox .MapResponsive { height: 200px; }
    .container_StrengthToppage > div > ul > li { width: auto; margin: 20px 0; }
    .StrengthOne{ display: block; padding: 0; }
    .StrengthTwo{ display: block; padding: 0; }
    .StrengthThree{ display: block; padding: 0;}
    .StrengthDetail{ width: auto; font-size: 16px; line-height: 25px; padding: 20px;}
    .StrengthDetail .Title{ font-size: 22px; margin-top: 0px; line-height: 30px; }
    .StrengthPicture{ width: auto; }
    .StrengthPicture img{ width: 100%; max-width: 100%;}
    .container_StrengthToppage > div > ul > li:hover .StrengthPicture img{ margin-top: 0px; }

    /* HeaderBoxAll */
    .HeaderBoxAll h2{ padding: 40px 0 40px 0; font-size: 30px; letter-spacing: 6px; }
    .HeaderBoxAllGray h1{ padding: 40px 0 40px 0; font-size: 30px; font-weight: 600; letter-spacing: 5px; }
    .HeaderBoxAllGray h2{ padding: 40px 0 40px 0; font-size: 30px; font-weight: 600; letter-spacing: 5px; }

    /* ProductPage */
    .ProductPage .StrengthAll{ /*display: block;*/ justify-content:center; flex-wrap: wrap; padding: 0 30px 0px 0px; position: relative; }
    .ProductPage .StrengthPicture{ width: auto; max-width: 100%; height: 200px; }
    .ProductPage .StrengthPicture:before{ width: 100%; height: 200px;}
    .ProductPage .StrengthDetail{ width: auto; font-size: 16px; line-height: 28px; padding: 20px 0 20px 20px; }
    .ProductPage .StrengthDetail .Title{ font-size: 25px; margin-top: 20px;}

    /* MessageFromPresident */
    .MessageFromPresidentBox{ display: block; }
    .MessageFromPresidentBox .Detail{ width: 100%; font-size: 16px; }
    .MessageFromPresidentBox .Detail .PictureTitle{  margin-bottom: 20px;}
    .MessageFromPresidentBox .Picture{ width: 100%; margin-top: 40px;}

    /* NisshoHistory */
    .NisshoHistory .NisshoHistoryBox .HeaderBox h2{ font-size: 30px; }
    .NisshoHistory .NisshoHistoryBox .HeaderBox h2:before{ width: 40px; height: 70px; left: -45px; top: -50px; }
    .NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li{ padding: 0 0 70px 30px; }
    .NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .Years:before{ left: -36px;}
    .NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight{ display: block;}
    .NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight .Detail{ width: 100%; font-size: 16px; line-height: 28px;}
    .NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight .Picture{ width: 100%; padding: 40px 0;}
    .NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight .Picture img{ box-shadow: 15px 15px 0px #c6dde6; }
    .NisshoHistory .IconRightNisshoHistory{ width: 40%; height: 50%; margin-top: 0px; max-height: 300px;}
    
    /* OurWorkPage */
    .OurWorkPageBox .OurWorkPageBoxLR{ display: block; }
    .OurWorkPageBox .OurWorkPageBoxLR .Picture{ width: 100%; }
    .OurWorkPageBox .OurWorkPageBoxLR .Detail{ margin-top: 20px; width: 100%; font-size: 16px; line-height: 28px; }
    .OurWorkPage .IconRightOurwork{ width: 50%; max-height: 200px; }

     /* OurWorkPageList */
     .OurWorkPageList{ padding: 80px 0; }
     .OurWorkPageList .OurWorkPageListBox .HeaderBox h2{ font-size: 30px;  }

     /* NewsPageList */
    .NewsPageList .NewsPageListBox .NewsListBox ul li{ width: 100%; margin: 2% 0% 4% 0%; background-color: #efefef; }
    .NewsPageList .NewsPageListBox .NewsListBox ul li:nth-child(2n){ margin-left: 0%; }

    /* NewsPageSingle */
    .NewsPageSingle{ padding: 50px 0; }
    .NewsPageSingle .NewsPageSingleBox .Picture{ margin: 30px 0;}
    .NewsPageSingle .NewsPageSingleBox h1{ font-size: 25px; line-height: 33px; }
    .NewsPageSingle .SinglePostDetail { font-size: 16px;}
    .NewsPageSingle .SinglePostDetail h2{ font-size: 22px; line-height: 28px; }
    .NewsPageSingle .SinglePostDetail h3{ font-size: 20px; line-height: 25px; }
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li{ width: 16%;}
    .StylePRD2 .StylePRD2Box .PicStyle2 div{ width: 31%; height: 130px; }
    .StylePRD2 .StylePRD2Box .ProductDescriptions{ margin:10px 0 20px 0;}
    .StylePRD2 .StylePRD2Box .DimensionPrice{ margin: 20px 0 0 0; padding: 10px; }
    .StylePRD2 .StylePRD2Box .Colour ul li{ width: 16%;}
    .rtl-slider-flex .rtl-slider .rtl-slider-slide{ background-size: contain; height: 300px;}

    /* HowTo */
    .HowToHeader:before{ height: 29px; top: 10px; }
    .HowToHeader h2{ padding: 0; width: 290px; font-size: 35px; letter-spacing: 0px; display: inline-block; padding: 0 20px 0 20px; }
    .HowToHeader .Cpation{ width: 290px; font-size: 25px; letter-spacing: 0px; display: inline-block; padding: 0 20px 0 20px; }
    .HowToHeaderList{ display: block;}
    .HowToHeaderList .Left{ width: 100%; margin-bottom: 40px; }
    .HowToHeaderList .Right{ width: 100%; font-size: 18px; }
    .HowToList2 ul{ display: block;}
    .HowToList2 ul li{ width: 100%; margin: 20px 0; }
    .HowToList2 ul li .Picture{ height: auto;  margin: 0 0 15px 0; }
    .HowToList2 ul li .Title{ font-size: 25px; }

    /* ContactMiddleBox */
    .ContactMiddleHeader h2{ font-size: 35px; letter-spacing: 8px; }
    .ContactMiddleHeader h2:before{ width: 65px; height: 65px; left: -21px; top: -6px; }
    .ContactDescription{ font-size: 18px;}
    .ContactMiddleBox{ width: 90%; margin: 0 auto; }
    .ContactMiddleList{ margin-top: 10px;}
    .ContactMiddleList ul li{ width: 160px; margin: 20px 20px; font-size: 16px; }
    .ContactMiddleList ul li .Icon{ width: 100px; height: 100px; padding: 20px; }
    .ContactMiddleList ul li .Icon img{ max-height: 60px; }
    .FormIcon{ max-width: 50px!important; margin-top: 5px}

    /* InstallationLP */
    .InstallationLP{ padding: 80px 0; }
    .InstallationLPHeader h2{ font-size: 25px; letter-spacing: 0;}
    .InstallationLPHeader h2:before{ width: 60px; height: 60px; left: -65px; top: -20px; }
    .InstallationLPList{ margin-top: 40px; }
    .InstallationLPList .BA .Title{ font-size: 25px; margin-top: 10px; }
    .InstallationLPList .BA{ display: block; }
    .InstallationLPList .BA .Before{ width: 100%; }
    .InstallationLPList .BA .After{ width: 100%; margin-top: 20px; text-align: right; }
    .InstallationLPList .BABox{ display: none;}
    .InstallationLPList .BA .MB{ display: block; padding: 10px 20px; font-size: 22px; font-weight: 600; color: #b2ae9d;}
    .InstallationLPList .BA .After .MB{color: white;}
    .FontEN .InstallationLPList .BA .Title{ font-size: 17px;}
    /* ProblemLP */
    .ProblemLP{ min-height: auto; padding: 100px 0 100px 0; background-size: contain; background-position-y: 100px; /*background-image: none; background-color: #fff;*/ }
    .ProblemLPBox .ProblemHHeader{ max-width: 300px; height: 190px;}
    .ProblemLPBox .ProblemHHeader h2{ font-size: 45px; padding-top: 30px; }
    .ProblemLPBox .ProblemHHeader p{ font-size: 25px; line-height: 30px;}
    .ProblemLPBox .ProblemList{ margin: 0px 0; padding-top: 50%;}
    .ProblemLPBox .ProblemList ul{ display: block; }
    .ProblemLPBox .ProblemList ul li{ width: 100%; height: auto; margin: 0!important; font-size: 20px; background-color: transparent; text-align: left; }
    .ProblemLPBox .ProblemList ul li p{ margin: 0; line-height: 30px; text-align: left; }
    .ProblemLPBox .ProblemList ul li p span{ display: inline-block;}
    .ProblemLPBox .ProblemList ul li .icon{ padding-top: 0px; padding-left: 40px; }
    .ProblemLPBox .ProblemList ul li .icon:before{ width: 30px; height: 30px; top: 0px; margin-left: 0; }
    .FontEN .ProblemLPBox .ProblemList ul li{ font-size: 20px;}
    .FontEN .ProblemLPBox .ProblemList ul li p{ line-height: 28px; }
    .FontEN .ProblemLPBox .ProblemHHeader h2{ margin: 0; font-size: 40px; padding-top: 45px; }
    .FontEN .ProblemLPBox .ProblemHHeader p{ font-size: 20px; }
    .MobilePic{ display: block; margin: 20px 0;}
    .MobilePic img{ width: 100%; height: auto; max-width: 100%; border-radius: 15px;}

    /* AruniProblremList */
    .AruniProblremList h2{ position: relative; top: 0; padding: 40px 0; font-size: 40px; color: #193964; }
    .AruniProblremList h2 span{ display: block;}
    .AruniProblremList ul{ display: block;}
    .AruniProblremList ul li{ width: 100%; height: 250px; }
    .AruniProblremList ul li .Detail .Captions span{ display: inline-block; }

    /* FeatureIntro */
    .ProductSectionList ul{ display: block; flex-wrap: wrap; }
    .ProductSectionList ul li{ width: 80%; margin: 0 auto!important; margin-bottom: 40px; text-align: center; }
    .ProductSectionList ul li .Picture{ height: 250px; }
    .ProductSectionList ul li .TitleTH{ font-size: 25px; }
    .ProductSectionList ul li .TitleEN{ font-size: 16px; }
    ul.slick-dots{ display: inline-block; text-align: center; margin: 0;}
    ul.slick-dots li{ width: auto; margin: 5px;}

    /* WhyAlumiRoofBox */
    .WhyAlumiRoofBox h2{ font-size: 40px; line-height: 60px; }
    .WhyAlumiRoofBox h2 span{ display: block; font-size: 55px; }

    /* StepInstall */
    .StepInstallBox h2{ font-size: 40px; }
    .StepInstallList ul{ display: block; }
    .StepInstallList ul li{ width: 100%; display: block; max-width: 260px; margin: 0 auto; margin-bottom: 30px; text-align: center; }
    .StepInstallList ul li img{ max-height: 100%; }
    .StepInstallList ul li:first-child{ margin-left: auto;}
    .StepInstallList ul li:last-child{ margin-right: auto;}
    .StepInstallList ul li .PC{ display: none;}
    .StepInstallList ul li .SP{ display: block;}
    .Complete1WeekVideo ul{ display: block; }
    .Complete1WeekVideo ul li{ width: 100%; margin-bottom: 20px;}
    .Complete1WeekVideo ul li .VideoBox { height: 200px; }
    .Complete1Week{ margin: 40px 0; }
    .Complete1Week p{ font-size: 25px; padding: 10px 30px; }
    .Complete1Week span{ display: block; }

    /* ProductInfomationsBox */
    .ProductInfomationsBox .PRDColorTitle{ margin-bottom: 0; }
    .ProductInfomationsBox .PRDColorBox ul{ display: block;}
    .ProductInfomationsBox .PRDColorBox ul li{ width: 100%; margin: 50px 0;}
    .ProductInfomationsBox .PRDColorBox ul li:first-child{ margin-top: 0;}
    .ProductInfomationsBox .PRDColorBox ul li:first-child:before{ right: 0; left: 0; margin: auto; width: 50%; height: 4px; top: auto; bottom: -30px; }

}

/* -------------------------------------  480px  ------------------------------------- */
@media(max-width:480px)
{
    /* KeyVisualLP */
    .KeyVisualBoxLP div img{ max-width: 95%; }
    .KeyVisualBoxLP .ArumiRoof {line-height: 3em; margin: 0;}
    .KeyVisualBoxLP .ArumiRoof h1{ font-size: 50px; margin: 0 0 30px!important; }
    .KeyVisualBoxLP .ArumiRoof .Title{ font-size: 30px;}
    .KeyVisualBoxLP .ArumiRoof .Captions{ font-size: 25px; margin-top: 20px;}
    .KeyVisualBoxLP .ArumiRoof .BTNContact{ max-width: 270px; height: 80px;}
    .KeyVisualBoxLP .ArumiRoof .BTNContact a{ font-size: 25px; padding: 10px 0 6px 0;}

    .SupachokTextSP{ padding: 160px 0 0px 0; }
    .SupachokTextSP img{ max-width: 300px;}
    .SupachokPhoto{ padding: 0 0 70px 0; margin: -30px -20px 0 auto; }
    .SupachokPhoto img{ max-width: 240px;}

    .ArumiRoofBanner {line-height: 3em!important; margin: 0!important;}
    .ArumiRoofBanner h1{ font-size: 50px!important; margin: 0 0 30px!important; }
    .ArumiRoofBanner .Title{ font-size: 30px!important;}
    .ArumiRoofBanner .Captions{ font-size: 25px!important; margin-top: 20px!important;}
    .ArumiRoofBanner .BTNContact{ max-width: 270px!important; height: 80px!important;}
    .ArumiRoofBanner .BTNContact a{ font-size: 25px!important; padding: 10px 0 6px 0!important;}

    /* TailContactBox */
    .TailContactBox .SocialBox .SCBox{ font-size: 20px; }
    .TailContactBox .SocialBox .Title{ font-size: 18px; }
    .TailContactBox .SocialBox .SCBox p img{ margin-right: 10px;}

    /* footer */
    footer .FooterBox .Copyrights .CopyrightsBox p:nth-child(2) span{ display: block; }

    /* OurWorkToppage */
    .OurWorkToppageBox ul li .List{ height: 180px; }

    .pictures .item{ width: 50%; }
    .tjGalleryItem{width: 50%; }

    /* ProductDetailList */
    .ProductDetailPage .ProductDetailPageBox .HeaderBoxAllGray .IconMore{ max-width: 120px; margin-left: 75px;}
    .FontTH .ProductDetailPage .ProductDetailPageBox .HeaderBoxAllGray .IconMore{ max-width: 120px; margin-left: 100px;}
    .ProductDetailList ul li{ padding: 50px 0; }
    /*.ProductDetailList .ProductDetailLR .SlideImages{ padding: 20px; }*/
    .ProductDetailList .ProductDetailLR .SlideImages .slider-for .slick-slide{ height:300px;}
    .ProductDetailList .ProductDetailLR .ProductDetail .ProductName{ font-size: 28px; }
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li{ width: 14.6%; font-size: 12px;}
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li p{ line-height: 18px;}
    .ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li .ColorBox{ width: 45px; height: 45px;}
    .rtl-slider-flex .rtl-slider .rtl-slider-slide{ height: 280px;}
    .StylePRD2 .StylePRD2Box .Colour ul li{ width: 18%;}
    .StylePRD2 .StylePRD2Box .PicStyle2 div{ width: 30%; height: 100px; }

    /* ContactMiddleBox */
    .ContactMiddle{ height: auto; margin-bottom: 0px; background-size: auto 70%;}
    .ContactDescription{ font-size: 18px;}
    .ContactMiddleList{ margin-top: 10px; padding: 30px 30px;}
    .ContactMiddleList ul{ display: block;}
    .ContactMiddleList ul li{ margin: 0 auto; margin-top: 40px; margin-bottom: 20px; font-size: 16px; }
    .ContactMiddleList ul li:last-child{ margin-bottom: 0;}
    .ContactMiddleList ul li .Icon{ width: 100px; margin: auto; height: 100px; padding: 20px; margin-bottom: 10px; }
    .ContactMiddleList ul li .Icon img{ max-height: 60px; }
    .FormIcon{ max-width: 50px!important; margin-top: 5px}

    /* FeatureBGAll */
    .FeatureBGAll{ padding: 160px 0 100px 0; margin-top: 40%;}
    .HeaderFeature{top: -150px;}
    .HeaderFeature .Left .LeftBox{ width: 300px; height: 300px;}
    .HeaderFeature .Left .LeftBox img{ max-width: 160px;}
    .HeaderFeature .Left{ width: 100%;}
    .HeaderFeature .Right{ display: none;}

    /* ProblemLP */
    .ProblemLP{ background-position-y: 130px; }
    .ProblemLPBox .ProblemList{ margin: 0px 0; padding-top: 48%;}

    /* FeatureIntroBox */
    .FeatureIntro{ padding: 20px 0; }
    .FeatureIntroList ul li .Title{ padding: 10px 5px; font-size: 14px;}
    .FeatureIntroList ul li .Detail{ padding: 5px 5px;}
    .FeatureIntroList ul li .Detail .icon{ margin: 0; height: 60px;}
    .FeatureIntroList ul li .Detail .icon img{ max-width: 50px; max-height: 50px; }
    .FeatureIntroList ul li .Detail .Captions{ font-size: 13px; margin-top: 10px; }
    .FeatureIntroList ul li .Detail .ReadMore{ font-size: 14px;}

    /* WhyAlumiRoofList */
    .WhyAlumiRoof{ padding: 80px 0; overflow: hidden;}
    .WhyAlumiRoofList ul{ margin: 20px 0 20px 0;}
    .WhyAlumiRoofList ul li .Detail .Title{ font-size: 21px; line-height: 30px;}
    .WhyAlumiRoofList ul li .Detail{ padding: 20px; }
    .WhyAlumiRoofList ul li:nth-child(odd) .Detail{ padding: 20px;}

    /* ContactusMiddleList */
    /*.ContactusMiddleBox{ width: 100%;}*/
    .ContactusMiddle{ margin: 20px 0; }
    .ContactusMiddleList ul{ display: block;}
    .ContactusMiddleList ul li{ width: 100%; }
    .ContactusMiddleList ul li{ font-size: 18px; margin-top: 20px; }
    .ContactusMiddleList ul li img{ display: block; margin: auto; margin-bottom: 5px; max-width: 55px; max-height: 55px; }
    .ContactusMiddleList ul li:first-child{ border-right: 0px solid #fff;}
    .ContactusMiddleList ul li:nth-child(2){ border-right: 0px solid #fff;}

    .Complete1WeekVideo{ overflow: hidden;}

    .slick-dotted.slick-slider{ padding-bottom: 30px;}
    .slick-dots li button:before{ width: 30px!important; height: 30px!important; font-size: 15px!important;}
    .slick-dots li button{ width: 30px!important; height: 30px!important; }

    .ProductSectionBox{ width: 100%;}
    .ProductSection{ overflow: hidden;}
    .ProductSectionList ul{ /*width: 98%;*/ padding: 0; }
    .ProductSectionList .slick-list { padding: 0 40px!important;}
    .ProductSectionList .slick-list { margin: 0 -8px; }
    .ProductSectionList .slick-slide>div { padding: 0 8px; }
    .ProductSectionList .slick-dots li button:before{ color: #fff!important;}
    .ProductSectionList ul.slick-dots li{ width: 40px!important; height: 40px!important;}
    .ProductSectionList .slick-dotted.slick-slider{ padding-bottom: 50px;}
    .ProductSectionList .slick-dots li.slick-active button:before{ opacity: 1;}

    /* ProductInfomationsList */
    .ProductInfomationsBox{ width: 100%;}
    .ProductInfomations{ overflow: hidden; }
    .ProductInfomationsList ul{ /*width: 100%;*/ padding: 0;  }
    .ProductInfomationsList ul li{ padding-bottom: 20px; }
    .ProductInfomationsList .slick-list { padding: 0 40px!important;}
    .ProductInfomationsList .slick-list { margin: 0 -8px; }
    .ProductInfomationsList .slick-slide>div { padding: 0 8px; }
    .ProductInfomationsBox .PRDColor{ margin-top: 60px;}

    /* AlumiClass */
    .AlumiClass .TailContactBox .ContactForm ul li:nth-child(1){ width: 100%; }
    .AlumiClass .TailContactBox .ContactForm ul li:nth-child(2){ width: 100%; }
    .AlumiClass .TailContactBox .ContactForm ul li:nth-child(3){ width: 100%; }
    .AlumiClass .TailContactBox .ContactForm ul li:nth-child(4){ width: 100%; }
    .AlumiClass .TailContactBox .ContactForm ul li:nth-child(5){ width: 100%; position: relative; top: 0; right: 0;}

    /* ProductInfomationsList */
    .AlumiOurWorksBox{ width: 100%;}
    .AlumiOurWorksList ul{ /*width: 100%;*/ padding: 0;  }
    .AlumiOurWorksList ul li{ padding-bottom: 20px; }
    .AlumiOurWorksList .slick-list { padding: 0 40px!important;}
    .AlumiOurWorksList ul.slick-dots li{ height: auto;}
    .AlumiOurWorksList ul.slick-dots{ width: auto; position: relative; }

}