@charset "UTF-8";
@import 'sanitize.css';
body { margin: 0; padding: 0; color: #5c5b5b; background: #fff; font-size:16px;  }
h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; font-weight: normal; letter-spacing: normal; }
ul,li,ol{ margin: 0; padding: 0; list-style: none;}
a{ text-decoration: none; cursor: pointer; }
.clr:after{ content:""; display:block; height:0; clear:both; visibility:hidden; }

/* Font English */
.FontEN{ font-family: 'DM Sans', sans-serif;}

/* Font Thai */
.FontTH{ font-family: 'Noto Sans Thai', sans-serif; }

/* BreadcrumbTopAll */
.BreadcrumbTopAll{ margin-top: 20px;}
.BreadcrumbBox{ max-width: 1160px; margin: auto; padding: 0; font-size: 13px; }
.BreadcrumbBox ul li{ display: inline-block; color: #adadad;}
.BreadcrumbBox ul li a{ color: #adadad; }

/* KeyVisualTopPage */
.KeyVisualTopPage{ width: 100%; height: 100vh; }
.KeyVisualBox{ position: relative; width: 100%; height: 100%; max-width: 1160px; margin: auto; display: flex; align-items: center; color: #fff;}
.KeyVisualBox div.Type1{ position: relative; width: 100%; height: 100%; max-width: 1160px; display: flex; align-items: center; justify-content: space-between;}
.KeyVisualBox div.Type1 h1{ width: 60%; font-size: 40px; font-weight: 600; text-align: left; letter-spacing: 2px; }
.KeyVisualBox div.Type1 h1 span{ display: block; }
.KeyVisualBox div.Type1 h2{ width: 60%; font-size: 40px; font-weight: 600; text-align: left; letter-spacing: 2px; }
.KeyVisualBox div.Type1 h2 span{ display: block; }
.KeyVisualBox div.Type1 .Descriptions{ width: 40%; max-width: 350px; font-size: 20px; line-height: 40px; text-align: left;}
.KeyVisualBox div.Type2{ position: relative; width: 100%; height: 100%; max-width: 1160px; display: flex; align-items: center; justify-content: center;}
.KeyVisualBox div.Type2 .Inner{ width: 100%; margin: auto; text-align: center; }
.KeyVisualBox div.Type2 .Inner img{ margin: auto; width: 100%; max-width: 350px; height: auto; margin-bottom: -20px; }
.KeyVisualBox div.Type2 .Inner h1{ width: 100%; color: #343433; text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 
    0px 0px 10px rgba(255, 255, 255, 1), 
    0px 0px 15px rgba(255, 255, 255, 1),
    0px 0px 20px rgba(255, 255, 255, 1),
    0px 0px 30px rgba(255, 255, 255, 1),
    0px 0px 40px rgba(255, 255, 255, 1),
    0px 0px 55px rgba(255, 255, 255, 1),
    0px 0px 75px rgba(255, 255, 255, 1); font-size: 40px; font-weight: 600; text-align: center; letter-spacing: 2px; }
.KeyVisualBox div.Type2 .Inner h1 span{font-size: 0.8em;} 
.KeyVisualBox div.Type2 .Inner h2{ width: 100%; color: #343433; text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 
        0px 0px 10px rgba(255, 255, 255, 1), 
        0px 0px 15px rgba(255, 255, 255, 1),
        0px 0px 20px rgba(255, 255, 255, 1),
        0px 0px 30px rgba(255, 255, 255, 1),
        0px 0px 40px rgba(255, 255, 255, 1),
        0px 0px 55px rgba(255, 255, 255, 1),
        0px 0px 75px rgba(255, 255, 255, 1); font-size: 40px; font-weight: 600; text-align: center; letter-spacing: 2px; }
.KeyVisualBox div.Type2 .Inner h2 span{font-size: 0.8em;} 
.KeyVisualBox div.Type2 .ReadMore{ text-align: center; margin: 0; }
.KeyVisualBox div.Type2 .ReadMore a{ position: relative; display: inline-block; margin-top: 10px; background-color: #58a5ce; box-shadow: 3px 4px 0px rgba(114, 113, 113, 1); border-radius: 100px; font-size: 22px; padding: 15px 100px 15px 60px; color: #fff; transition: all .3s;}
.KeyVisualBox div.Type2 .ReadMore a:after{ position: absolute; content: ''; width: 40px; height: 40px; top: 10px; right: 50px; background-image: url('../images/in-net/icon-readmore.svg'); background-repeat: no-repeat; background-size:contain; background-position: center; }
.KeyVisualBox div.Type2 .ReadMore a:hover { background-color:#3291cb; transition: all .3s; }

.SupachokTextSP{ display: none;}

/* KeyVisualLP */
.KeyVisualLP{ width: 100%; height: 100vh; position: relative; z-index: 1; }
.KeyVisualBoxLP{ position: relative; width: 100%; height: 100%; max-width: 1160px; margin: auto; display: flex; align-items: center; color: #fff;}
.KeyVisualBoxLP .Box{ position: relative; width: 100%; height: 100%; max-width: 1160px; text-align: center; display: flex; align-items: center; justify-content: center;}
.KeyVisualBoxLP .Box img{ margin: auto; max-width: 380px; }
.KeyVisualBoxLP .Box h1{ color: #343433; text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 
    0px 0px 10px rgba(255, 255, 255, 1), 
    0px 0px 15px rgba(255, 255, 255, 1),
    0px 0px 20px rgba(255, 255, 255, 1),
    0px 0px 30px rgba(255, 255, 255, 1),
    0px 0px 40px rgba(255, 255, 255, 1),
    0px 0px 55px rgba(255, 255, 255, 1),
    0px 0px 75px rgba(255, 255, 255, 1); font-size: 56px; font-weight: 600; text-align: center; letter-spacing: 2px; }
.KeyVisualBoxLP .Box h1 span{font-size: 0.8em;} 
.KeyVisualBoxLP .ArumiRoof{color: #fff; margin-top: 120px; line-height: 4em; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 
    0px 0px 10px rgba(0, 0, 0, 0.15), 
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15); font-weight: 600; text-align: center; letter-spacing: 0px; }
.KeyVisualBoxLP .ArumiRoof h1{margin:  0 0 30px!important; font-size: 90px; font-weight: 700; color: #fff;text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 
        0px 0px 10px rgba(0, 0, 0, 0.15), 
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15); }
.KeyVisualBoxLP .ArumiRoof .Title{ font-size: 60px; margin: 0;}
.KeyVisualBoxLP .ArumiRoof .Captions{ font-size: 40px; font-weight: 300; margin: 0;}
.KeyVisualBoxLP .ArumiRoof .Captions span{ display: block; font-weight: 600;}
.KeyVisualBoxLP .ArumiRoof .BTNContact{ text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); max-width: 320px; height: 80px; margin: auto; margin-top: 30px; text-align: center;background-image: url('../images/alumi-roof/btn-contact.png'); background-repeat: no-repeat; background-size:contain; background-position: center; }
.KeyVisualBoxLP .ArumiRoof .BTNContact a{ padding: 10px 0 10px 0; color: #193964; font-size: 32px; font-weight: 600; display: block; }

.ArumiRoofBanner{color: #fff!important; margin-top: 120px!important; line-height: 4em!important; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 
    0px 0px 10px rgba(0, 0, 0, 0.15), 
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15),
    0px 0px 10px rgba(0, 0, 0, 0.15)!important; font-weight: 600!important; text-align: center!important; letter-spacing: 0px!important; }
.ArumiRoofBanner h1{margin:  0 0 30px!important; font-size: 90px!important; font-weight: 700!important; color: #fff!important; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 
        0px 0px 10px rgba(0, 0, 0, 0.15), 
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15),
        0px 0px 10px rgba(0, 0, 0, 0.15)!important; }
.ArumiRoofBanner .Title{ font-size: 60px; margin: 0;}
.ArumiRoofBanner .Captions{ font-size: 40px; font-weight: 300; margin: 0;}
.ArumiRoofBanner .Captions span{ display: block; font-weight: 600;}
.ArumiRoofBanner .BTNContact{ text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); max-width: 320px; height: 80px; margin: auto; margin-top: 30px; text-align: center;background-image: url('../images/alumi-roof/btn-contact.png'); background-repeat: no-repeat; background-size:contain; background-position: center; }
.ArumiRoofBanner .BTNContact a{ padding: 10px 0 10px 0; color: #193964; font-size: 32px; font-weight: 600; display: block; }

/* VideoLP */
.VideoLP{ width: auto; height:auto; padding: 0; background-color: #83bccf; position: relative;}
.VideoLPBox{ position: relative; width: auto; height:auto; max-width: 1160px; margin: auto; margin-top: -50px; z-index: 2; color: #fff; font-size: 21px; font-weight: 300; text-align: center;}
.VideoLPBox .TxtLP{ margin: 0 auto; padding-bottom: 60px; max-width: 700px; line-height: 40px;}
.VideoLPBox .VideoLR{ display: flex; justify-content: space-between; margin-top: 40px 0; padding-bottom: 100px;}
.VideoLPBox .VideoLR .Left{ width: 46%;}
.VideoLPBox .VideoLR .Left .MapResponsive { overflow: hidden; padding-bottom:0%; position: relative; height: 300px; margin-top: 30px; }
.VideoLPBox .VideoLR .Left .MapResponsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
.VideoLPBox .VideoLR .Right{ width: 46%;}
.VideoLPBox .VideoLR .Right .MapResponsive { overflow: hidden; padding-bottom:0%; position: relative; height: 300px; margin-top: 30px; }
.VideoLPBox .VideoLR .Right .MapResponsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute;}

/* ProblemLP */
.ProblemLP{ width: auto; height:auto; min-height: 1100px; padding: 5% 0 20% 0; background-image: url('../images/in-net/bg-probrem.png'); background-repeat: no-repeat; background-size:cover; background-position: top center;}
.ProblemLPBox{ position: relative; width: auto; height:auto; max-width: 1160px; margin: auto; color: #fff; font-size: 24px; font-weight: 300; text-align: center;}
.ProblemLPBox .ProblemHHeader{ max-width: 520px; height: 350px; color: #5c5b5b; margin: auto; text-align: center; background-image: url('../images/in-net/bg-problem-section.png'); background-repeat: no-repeat; background-size:100% auto; background-position: top center;}
.ProblemLPBox .ProblemHHeader h2{ margin: 0; font-size: 80px; font-weight: 700; padding-top: 75px; }
.FontEN .ProblemLPBox .ProblemHHeader h2{ margin: 0; font-size: 60px; }
.FontEN .ProblemLPBox .ProblemHHeader p{ font-size: 32px; margin-top: 10px;}
.ProblemLPBox .ProblemHHeader p{ margin: 0; margin-top: -10px; font-size: 45px; font-weight: 600; line-height: 50px;}
.ProblemLPBox .ProblemList{ margin: 40px 0; position: relative;}
.ProblemLPBox .ProblemList ul{ position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;}
.ProblemLPBox .ProblemList ul li{ width: 29%; height: 185px; padding: 10px; font-size: 25px; font-weight: 600; color: #1b82cf; text-align: center; margin: 2% 2%; background-image: url('../images/in-net/bg-problem-icon.png'); background-repeat: no-repeat; background-size:cover; background-position: center;}
.ProblemLPBox .ProblemList ul li:nth-child(2){ margin-top: 10%; }
.ProblemLPBox .ProblemList ul li:nth-child(4){ margin-top: -3%; margin-left: 10%; }
.ProblemLPBox .ProblemList ul li:nth-child(5){ margin-top: -3%; margin-right: 10%; }
.ProblemLPBox .ProblemList ul li .icon{ position: relative; padding-top: 50px; }
.ProblemLPBox .ProblemList ul li .icon:before{ position: absolute; width: 40px; height: 40px; content: ''; left: 0; right: 0; margin: auto;  top: 0px;  background-image: url('../images/in-net/icon-true.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.ProblemLPBox .ProblemList ul li p{ margin: 10px 0 0 0; padding: 0; line-height: 35px; }
.ProblemLPBox .ProblemList ul li p span{ display: block;}
.MobilePic{ display: none;}
.FontEN .ProblemLPBox .ProblemList ul li{ font-size: 22px;}

.KeyVisual .slick-dots li.slick-active button:before{ font-size: 15px!important; color: #fff!important;}
.KeyVisual .slick-dots li{ width: 20px!important; margin: 0 5px!important; padding: 0!important;}
.KeyVisual .slick-dots li button:before{ font-size: 15px!important; color: #fff!important;}
.KeyVisual .slick-dots{ bottom: 100px!important;}
.KeyVisual .slick-list{ margin-bottom: 40px;}
.KeyVisual .slick-track{ margin-left: 0;}

/* KeyVisualPage */
.KeyVisualPage{ width: 100%; height: 350px; }
.KeyVisualPageBox{ position: relative; width: 100%; height: 100%; max-width: 1160px; margin: auto; display: flex; align-items: center; color: #fff;}
.KeyVisualPageBox div{ position: relative; width: 100%; height: 100%; max-width: 1160px; display: flex; align-items: center; justify-content: space-between;}
.KeyVisualPageBox h1{ width: 50%; font-size: 40px; font-weight: 600; text-align: left; letter-spacing: 2px; }
.KeyVisualPageBox h1 span{ display: block; }
.KeyVisualPageBox .TitlePage{ width: 100%; font-size: 40px; padding-top: 100px; padding-right: 100px; font-weight: 600; text-align: right; letter-spacing: 2px; }

/* HeaderTXTBox */
.HeaderTXTBox{ position: relative; display: block; margin-bottom: 40px;}
.HeaderTXTBox p,.HeaderTXTBox h2{ padding: 0; margin: 0;}
.HeaderTXTBox p{ font-family: 'Inter', sans-serif; font-size: 45px; font-weight: 200; }
.HeaderTXTBox p span{ font-weight: 700;}
.HeaderTXTBox h2{ font-size: 22px; font-weight: 300; }
.FontEN .HeaderTXTBox h2{ font-family: 'Kanit', sans-serif; }
.HeaderTXTBox:after{ position: absolute; content: ''; width: 55px; height: 5px; background-color: #000; bottom: -30px; left:0; }

/* HeaderBoxAll */
.HeaderBoxAll{ width: auto; height: auto; min-height: 160px; text-align: left; display: inline-block; position: relative;}
.HeaderBoxAll:before{ position: absolute; width: 160px; height: 160px; content: ''; left: 45px; top: -20px; z-index: 0; background-image: url('../images/icon-2-color-white.svg'); background-repeat: no-repeat; background-size:cover; background-position: center;}
.HeaderBoxAll h2{ padding: 60px 0 30px 0; font-size: 35px; font-weight: 600; letter-spacing: 9px; text-transform: uppercase; position: relative; z-index: 1; }

/* HeaderBoxAllGray */
.HeaderBoxAllGray{ width: auto; height: auto; min-height: 160px; text-align: left; display: inline-block; position: relative; margin-bottom: 20px;}
.HeaderBoxAllGray:before{ position: absolute; width: 160px; height: 160px; content: ''; left: 45px; top: -20px; z-index: 0; background-image: url('../images/icon-2-color.svg'); background-repeat: no-repeat; background-size:cover; background-position: center;}
.HeaderBoxAllGray h1{ padding: 40px 0 30px 0; font-size: 35px; font-weight: 600; letter-spacing: 9px; text-transform: uppercase; position: relative; z-index: 1; }
.HeaderBoxAllGray h2{ padding: 40px 0 30px 0; font-size: 35px; font-weight: 600; letter-spacing: 9px; text-transform: uppercase; position: relative; z-index: 1; }

/* BTN Effects */
.btn { display: inline-block; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-self: center; -ms-flex-item-align: center;  align-self: center; font-weight: 400; text-decoration: none; text-align: center; transition: all .4s; }
.btn:hover, .btn:focus { color: #fff; outline: 0; transition: all .4s; }
.btn1 { border-color: #a2b968; color: #fff; background-image: -webkit-linear-gradient(45deg, #a2b968 50%, transparent 50%); background-image: linear-gradient(45deg, #a2b968 50%, transparent 50%); background-position: 100%; background-size: 400%; -webkit-transition: background 150ms ease-in-out; transition: background 150ms ease-in-out; transition: all .4s; }
.btn1:hover { background-position: 0; transition: all .4s; }

/* reveal Effects */ 
.reveal{ position: relative; transform: translateY(100px); opacity: 0; transition: 1s all ease; }
.reveal.active{ transform: translateY(0); opacity: 1; }

/* reveal Effects */ 
.reveal2{ position: relative; transform: translateX(50px); opacity: 0; transition: 1s all ease; }
.reveal2.active{ transform: translateX(0); opacity: 1; }

/* reveal Effects */ 
.reveal3{ position: relative; transform: translateX(-50px); opacity: 0; transition: 1s all ease; }
.reveal3.active{ transform: translateX(0); opacity: 1; }

/* AboutToppage */
.AboutToppage{ width: auto; height: auto; margin: 0; padding: 100px 0 33% 0; background-color: #fff; margin-top: 0px; position: relative; }
.Aboutpage{ width: auto; height: auto; margin: 0; padding: 100px 0 100px 0; background-color: #fff; margin-top: 0px; position: relative; }
.AboutToppageBox{ width: auto; max-width: 1160px; margin: auto; overflow: auto; position: relative; z-index: 1;}
.AboutToppageBox .AboutToppageLR{ display: flex; justify-content: space-between; margin: 0; padding: 0;}
.AboutToppageBox .AboutToppageLR .HeaderBoxAll{ width: 25%; }
.AboutToppageBox .AboutToppageLR .Detail{ width: 75%; font-size: 18px; padding-left: 30px; line-height: 32px; /*text-align: justify;*/ }
.AboutToppageBox .AboutToppageLR .Detail .Title{ margin: 0; font-size: 30px; font-weight: 500; }
.AboutToppageBox .AboutToppageLR .Detail .LinkAbout{ margin-top: 40px; display: inline-block; }
.AboutToppageBox .AboutToppageLR .Detail .LinkAbout a{ background-color: #5c5b5b; color: #fff; padding: 10px 50px; font-size: 14px; letter-spacing: 2px;}
.AboutToppage .IconLeftAbout{ width: 50%; height: 30%; max-height: 300px; position: absolute; left: 0; bottom: 50px; background-image: url('../images/about-left-photo.png'); background-repeat: no-repeat; background-size:cover; background-position: right center; z-index: 0;}
.AboutToppage .IconRightAbout{ width: 40%; height: 80%; max-height: 700px; position: absolute; right: 0; bottom: 50px; background-image: url('../images/about-right-grid-photo.png'); background-repeat: no-repeat; background-size:cover; background-position: left center; z-index: 0;}

/* MessageFromPresident */
.MessageFromPresident{ width: auto; height: auto; margin: 0; padding: 100px 0 100px 0; background-color: #fff; position: relative; }
.MessageFromPresidentBox{ width: auto; max-width: 1160px; margin: auto; overflow: auto; display: flex; justify-content: space-between; position: relative; z-index: 1;}
.MessageFromPresidentBox .Detail{ width: 50%; font-size: 18px; line-height: 32px; /*text-align: justify;*/}
.MessageFromPresidentBox .Detail p{ display: inline-block; position: relative; }
.MessageFromPresidentBox .Detail .FirstLT{ position: relative;}
.MessageFromPresidentBox .Detail .FirstLT::first-letter{ font-size: 50px; font-weight: 500; padding: 15px 0px 10px 0; margin-right: 6px; float: left;}
.MessageFromPresidentBox .Detail .PictureTitle{ margin-top: 0; margin-bottom: 40px;}
.MessageFromPresidentBox .Detail .PictureTitle img{ width: 100%; max-width: 500px; height: auto;}
.MessageFromPresidentBox .Picture{ width: 40%;}
.MessageFromPresidentBox .Picture img{ width: 100%; max-width: 100%; height: auto;}
.MessageFromPresidentBox .Picture img.Name{ width: auto; max-width: 220px; height: auto;}
.MessageFromPresidentBox .Picture p{ text-align: right;}

/* NisshoHistory */
.NisshoHistory{ width: auto; height: auto; padding: 100px 0; background-color: #e8f1f5; position: relative; z-index: 1; }
.NisshoHistory .NisshoHistoryBox{ width: auto; max-width: 1160px; height: auto; margin: auto; position: relative; z-index: 1; }
.NisshoHistory .NisshoHistoryBox .HeaderBox{ display: block; margin: auto; text-align: center; position: relative; padding: 50px 0; }
.NisshoHistory .NisshoHistoryBox .HeaderBox h2{ text-align: center; display: inline; font-size: 35px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; position: relative;}
.NisshoHistory .NisshoHistoryBox .HeaderBox h2:before{ width: 55px; height: 75px; content: ''; position: absolute; left: -65px; top: -60px; background-image: url('../images/icon-2-color.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.NisshoHistory .NisshoHistoryBox .ContactDescription{ font-weight: 500; font-size: 20px; text-align: center;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList{ margin: 0; padding: 0; }
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul{ margin: 0; padding: 0; margin-top: 50px;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li{ display: block; position: relative; margin: 0; padding: 0 0 50px 40px; clear: both;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li:before{ position: absolute; content: ''; left: 0; top: 20px; width: 2px; height: 100%; background-color: #83bccf; }
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li:last-child{ border-left: 0; }
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li:last-child:before{ display: none; }
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li p{ margin: 0; padding: 0;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .Years{ font-size: 35px; font-weight: 500; margin-bottom: 40px; position: relative; font-family: 'Cormorant Garamond', serif;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .Years:before{ position: absolute; content: ''; width: 14px; height: 14px; top: 20px; left: -46px; border-radius: 100px; background-color: #83bccf;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .Years:after{ position: absolute; content: ''; width: 40px; height: 4px; left: 0; bottom: -10px; background-color: #83bccf;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight{ display: flex; justify-content: space-between;}
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight .Detail{ width: 45%; font-size: 18px; line-height: 32px; /*text-align: justify;*/ }
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight .Picture{ width: 45%; padding-right: 25px; }
.NisshoHistory .NisshoHistoryBox .NisshoHistoryBoxList ul li .LeftRight .Picture img{ width: 100%; max-width: 100%; height: auto; box-shadow: 25px 25px 0px #c6dde6; }
.NisshoHistory .IconRightNisshoHistory{ width: 20%; height: 80%; max-height: 700px; position: absolute; right: 0; top: 100px; background-image: url('../images/nissho-history-right.png'); background-repeat: no-repeat; background-size:cover; background-position: left top; z-index: 0;}
.NisshoHistory .IconLeftNisshoHistory{ width: 20%; height: 25%; position: absolute; left: 0;bottom: 0; background-color: #dfecf1; }

/* OurWorkPage */
.OurWorkPage{ width: auto; height: auto; margin: 0; padding: 100px 0 100px 0; background-color: #fff; margin-top: 0px; position: relative; z-index: 1; }
.OurWorkPageBox{ width: auto; max-width: 1160px; margin: auto; overflow: auto; position: relative; z-index: 1;}
.OurWorkPageBox .OurWorkPageBoxLR{ display: flex; justify-content: space-between; margin: 0; padding: 0;}
.OurWorkPageBox .OurWorkPageBoxLR .Picture{ width: 45%; }
.OurWorkPageBox .OurWorkPageBoxLR .Picture img{ width: 100%; max-width: 100%; height: auto; }
.OurWorkPageBox .OurWorkPageBoxLR .Detail{ width: 50%; font-size: 18px; line-height: 32px; }
.OurWorkPageBox .OurWorkPageBoxLR .Detail p{ margin: 0px 0 20px 0;}
.OurWorkPage .IconRightOurwork{ width: 25%; height: 50%; max-height: 200px; position: absolute; right: 0; bottom: 0px; background-image: url('../images/nissho-history-right.png'); background-repeat: no-repeat; background-size:cover; background-position: left top; z-index: 0;}

/* OurWorkPageList */
.OurWorkPageList{ width: auto; height: auto; padding: 100px 0; background-color: #e8f1f5; position: relative; z-index: 1; }
.OurWorkPageList .OurWorkPageListBox{ width: auto; max-width: 1160px; height: auto; margin: auto; position: relative; z-index: 1; }
.OurWorkPageList .OurWorkPageListBox .HeaderBox{ display: block; margin: auto; text-align: center; position: relative; padding: 50px 0; }
.OurWorkPageList .OurWorkPageListBox .HeaderBox h2{ text-align: center; display: inline; font-size: 35px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; position: relative;}
.OurWorkPageList .OurWorkPageListBox .HeaderBox h2:before{ width: 55px; height: 75px; content: ''; position: absolute; left: -65px; top: -60px; background-image: url('../images/icon-2-color.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.OurWorkPageList .OurWorkPageListBox .NisshoHistoryBoxList{ margin: 0; padding: 0; }
/*  Style1 */
.mosaicflow__column { float: left; }
.mosaicflow__item { position:relative; margin: 10px 5px; }
.mosaicflow__item img { display:block; width:100%; max-width:500px; height:auto; }
.mosaicflow__item p { position:absolute; bottom:0; left:0; width:100%; margin:0; padding:5px; background:rgba(162,185,104,.8); color:#fff; font-size:14px; /*text-shadow:1px 1px 1px hsla(0,0%,0%,.75);*/ opacity:0; -webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1); -moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1); -o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1); transition: all 0.4s cubic-bezier(0.23,1,0.32,1); }
.mosaicflow__item:hover p { opacity:1; }
.mosaicflow__item:hover img{ opacity:.8; }
/*  Style2 */
.pictures{ font-size: 0px; }
.pictures .item{ position:relative; display:inline-block; }
.pictures .item img{ position:relative; z-index: 11; }
.pictures .item .item_description{ position:absolute; z-index: 10; left: -15px; top: -15px; right: -15px; bottom: -60px; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); background:#a2b968; padding: 15px; display:none; }
.pictures .item .item_description span{ color:#ffffff; font-size: 13px; display:block; position:absolute; bottom: 15px; height: 30px; }
.pictures .item:hover{ z-index: 100; opacity: .8; }
.pictures .tjGalleryItem .item:hover .item_description{ display:block; }

/* NewsPageList */
.NewsPageList{ width: auto; height: auto; padding: 100px 0; background-color: #fff; position: relative; z-index: 1; }
.NewsPageList .NewsPageListBox{ width: auto; max-width: 1160px; height: auto; margin: auto; position: relative; z-index: 1; }
.NewsPageList .NewsPageListBox .HeaderBox{ display: block; margin: auto; text-align: center; position: relative; padding: 50px 0; }
.NewsPageList .NewsPageListBox .HeaderBox h2{ text-align: center; display: inline; font-size: 35px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; position: relative;}
.NewsPageList .NewsPageListBox .HeaderBox h2:before{ width: 55px; height: 75px; content: ''; position: absolute; left: -65px; top: -60px; background-image: url('../images/icon-2-color.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.NewsPageList .NewsPageListBox .NewsListBox{ margin: 0; padding: 0; }
.NewsPageList .NewsPageListBox .NewsListBox ul{ display: flex; flex-wrap: wrap; justify-content: flex-start; /*justify-content: center;*/ }
.NewsPageList .NewsPageListBox .NewsListBox ul li{ width: 31.3%; height: auto; margin: 2% 1.5% 2% 1.5%; padding: 20px; background-color: #efefef; }
.NewsPageList .NewsPageListBox .NewsListBox ul li:nth-child(odd){ 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: #000;*/ }
.NewsPageList .NewsPageListBox .NewsListBox ul li a{ color: #5c5b5b; transition: all .3s;}
.NewsPageList .NewsPageListBox .NewsListBox ul li:hover{ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); transition: all .3s; }
.NewsPageList .NewsPageListBox .NewsListBox ul li .Picture{ width: 100%; height: 200px; overflow: hidden; }
.NewsPageList .NewsPageListBox .NewsListBox ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
.NewsPageList .NewsPageListBox .NewsListBox ul li:hover .Picture img{ opacity: 0.8; transition: all .3s; }
.NewsPageList .NewsPageListBox .NewsListBox ul li .Detail{ width: auto; margin-top: 20px; color: #5c5b5b;}
.NewsPageList .NewsPageListBox .NewsListBox ul li .Detail .Title{ font-size: 20px; font-weight: 500; position: relative; margin: 0; transition: all .3s;}
.NewsPageList .NewsPageListBox .NewsListBox ul li .Detail .Title:before{position: absolute; content: ''; left: 0; bottom: -5px; width: 30px; height: 2px; background-color: #5c5b5b;}
.NewsPageList .NewsPageListBox .NewsListBox ul li .Detail .Date{ margin: 0; text-align: right; font-size: 14px;}
.NewsPageList .NewsPageListBox .NewsListBox ul li a:hover .Detail .Title{ color: #a2b968;transition: all .3s;}

/* NewsPageSingle */
.NewsPageSingle{ width: auto; height: auto; padding: 100px 0; background-color: #fff; position: relative; z-index: 1; }
.NewsPageSingle .NewsPageSingleBox{ width: auto; max-width: 1160px; height: auto; margin: auto; position: relative; z-index: 1; }
.NewsPageSingle .NewsPageSingleBox h1{ position: relative; font-size: 35px; font-weight: 600; margin: 0; padding: 0; margin-bottom: 20px;}
.NewsPageSingle .NewsPageSingleBox h1:before{ position: absolute; content: ''; left: 0; bottom: -10px; width: 60px; height: 5px; background-color: #8ebbcd;}
.NewsPageSingle .NewsPageSingleBox .DateCreate{ display: block; margin: 30px 0; clear: both; }
.NewsPageSingle .NewsPageSingleBox .Picture{ margin: 50px 0;}
.NewsPageSingle .NewsPageSingleBox .Picture img{ width: 100%; max-width: 100%; height: auto;}
/* SinglePostDetail */
.NewsPageSingle .SinglePostDetail { margin: 20px 0; font-size: 18px;}
.NewsPageSingle .SinglePostDetail p{ margin: 20px 0; line-height: 28px; }
.NewsPageSingle .SinglePostDetail p img{ width: auto; max-width: 100%; height: auto; display: block; margin-top: 20px; margin-bottom: 20px;}
.NewsPageSingle .SinglePostDetail img{ width: auto; max-width: 100%; height: auto; display: block; margin-top: 20px; margin-bottom: 20px;}
.NewsPageSingle .SinglePostDetail h2{ position: relative; color: #5c5b5b; padding: 15px 0 0px 0; font-size: 28px; font-weight: 600; line-height: 35px; }
.NewsPageSingle .SinglePostDetail h2 em{ margin-right: 5px; font-style: normal; }
.NewsPageSingle .SinglePostDetail h2 em:after{ content: '.'; }
.NewsPageSingle .SinglePostDetail h3{ position: relative; color: #5c5b5b; padding: 10px 0 0px 0; font-size: 23px; font-weight: 500; line-height: 32px; }
.NewsPageSingle .SinglePostDetail h3 em{ margin-right: 5px; font-style: normal; }
.NewsPageSingle .SinglePostDetail h3 em:after{ content: '.'; }
.NewsPageSingle .SinglePostDetail a{ color: #83bccf; }
.NewsPageSingle .SinglePostDetail ul{ border: 1px solid #eee; margin: 20px 0; border-radius: 10px; padding: 10px 30px 10px 35px;}
.NewsPageSingle .SinglePostDetail ul li{ list-style-type: disc!important; list-style-position: outside!important; margin: 10px 0; }
.NewsPageSingle .SinglePostDetail ul li::marker{ display: inline-block!important;}
.NewsPageSingle .SinglePostDetail ul li p:first-child{ margin-top: 0px!important; margin-bottom: 0px!important;}
.NewsPageSingle .SinglePostDetail ol{ margin-left: 20px;}
.NewsPageSingle .SinglePostDetail ol li{ list-style-type: decimal!important; list-style-position: outside!important; margin: 10px 0; }
.NewsPageSingle .SinglePostDetail ol li::marker{ display: inline-block!important;}
.NewsPageSingle .SinglePostDetail ol li:first-child p{ margin-top: 0!important;}
/* table */
.NewsPageSingle .SinglePostDetail table{ min-width: 100%; width: auto; margin: 20px 0; text-align: left; }
.NewsPageSingle .SinglePostDetail table thead{ background-color: #5c5b5b; }
.NewsPageSingle .SinglePostDetail table thead th{ padding: 15px 10px; font-size: 18px; line-height: 25px; vertical-align: middle; min-width: 30px; text-align: left; background-color: transparent;} 
.NewsPageSingle .SinglePostDetail table tbody td{ padding: 10px 10px; vertical-align: middle; min-width: 30px;} 
.NewsPageSingle .SinglePostDetail table thead th{ border-right: 1px solid #ccc; color: #fff; }
.NewsPageSingle .SinglePostDetail table tbody tr{ background-color: #f9f9f9; }
.NewsPageSingle .SinglePostDetail table tbody tr:nth-child(odd){ background-color: #fff; }     
.NewsPageSingle .SinglePostDetail table tbody tr td, .NewsPageSingle .SinglePostDetail table tbody tr th { min-width: 100px; }
.NewsPageSingle .SinglePostDetail table tbody tr td:nth-child(2){ min-width: 100px; }
.NewsPageSingle .SinglePostDetail table tbody tr:hover{ background-color: #f3f3f3;  }
.NewsPageSingle .SinglePostDetail table tbody td{ border-right: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #eee; text-align: left; }
.NewsPageSingle .SinglePostDetail table tbody td a{ color: #5c5b5b; text-decoration: underline; display: block;}

/* PagenotFound */
.PagenotFound{ width: auto; max-width: 800px; margin: auto; padding: 40px; background-color: #f2f2f2; margin-top: 100px; margin-bottom: 50px; font-size: 20px; }

/* StrengthToppage */
.StrengthToppage{ width: auto; height: auto; padding: 100px 0; position: relative; }
.StrengthToppage .IconLeft{ width: 330px; height: 500px; position: absolute; left: 0; bottom: 33%; background-image: url('../images/bg-strength-left.png'); background-repeat: no-repeat; background-size:cover; background-position: center; z-index: 0;}
.StrengthToppageBox{ width: auto; max-width: 1160px; margin: auto; overflow: auto; position: relative;}
.StrengthToppage .StrengthVideoBox{ margin-top: 40px; overflow: auto; clear: both; position: relative;}
.StrengthToppage .StrengthVideoBox .Title{ font-size: 25px; font-weight: 600; text-align: center; margin: 40px 0 20px 0;}
.StrengthToppage .StrengthVideoBox .MapResponsive { max-width: 600px; margin: auto; overflow: hidden; padding-bottom:0%; position: relative; height: 360px; margin-top: 30px;}
.StrengthToppage .StrengthVideoBox .MapResponsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
/* container_StrengthToppage */
.container_StrengthToppage { max-width: 1160px;  margin: 0 auto; position: relative; z-index: 1; }
.container_StrengthToppage > div { height: auto; }
.container_StrengthToppage > div > ul { width: 100%; margin: 0; padding: 0; }
.container_StrengthToppage > div > ul > li {  list-style-type: none; width: calc(((100vw - 100%) / 2) + 100%); margin: 50px 0; padding: 0; color: white; box-sizing: border-box; transition: all .3s; }
.StrengthOne{ display: flex; justify-content: space-between; background-color: #83bccf; min-height: 350px; padding: 0 60px 40px 40px; }
.StrengthTwo{ display: flex; justify-content: space-between; background-color: #5c5b5b; min-height: 350px; padding: 0 60px 40px 40px; }
.StrengthThree{ display: flex; justify-content: space-between; background-color: #a2b968; min-height: 350px; padding: 0 60px 40px 40px; }
.StrengthDetail{ order: 1; width: 55%; font-size: 18px; line-height: 32px;}
.StrengthDetail p:nth-last-child(1){ margin-bottom: 0;}
.StrengthDetail .Title{ font-size: 30px; font-weight: 600; margin: 0; margin-top: 40px; transition: all .4s;}
.StrengthPicture{ order: 2; width: 40%; margin: 0; padding: 0;}
.StrengthPicture img{ width: auto; max-width: 100%; height: auto; margin: 0; padding: 0; transition: all .4s;}
.container_StrengthToppage > div > ul > li:hover .StrengthPicture img{ margin-top: -40px; transition: all .4s; }
.container_StrengthToppage > div > ul > li:hover { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); transition: all .3s;}
/*.container_StrengthToppage > div > ul > li:hover .StrengthDetail .Title{ padding-left: 10px; border-left: 5px solid #fff; transition: all .4s;})*/

/* ProductPage */
.ProductPage{ max-width: 1160px;  margin: 0 auto; position: relative; }
.ProductPage ul{ margin-top: 40px;}
.ProductPage ul li{ margin: 70px 0; }
.ProductPage ul li:last-child{ margin-bottom: 20px; transition: all .4s;}
.ProductPage .StrengthAll{ display: flex; justify-content: space-between; background-color: #cce0e8; min-height: 250px; padding: 0 30px 40px 0px; }
.ProductPage .StrengthPicture{ order: 1; width: calc(100% - 360px); max-width: 320px; height: 250px; margin: 0; margin-top: -20px; padding: 0; position: relative;}
.ProductPage .StrengthPicture:before{ position: absolute; content: ''; border: 1px solid #747779; width: 320px; height: 250px; top: 13px; left: 15px; transition: all .4s;}
.ProductPage .StrengthPicture img{ display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; transition: all .4s;}
.ProductPage ul li:hover .StrengthPicture:before{ border: 1px solid #fff; transition: all .4s;}
.ProductPage .StrengthDetail{ order: 2; width: calc(100% - 400px); font-size: 18px; line-height: 32px;}
.ProductPage .StrengthDetail p:nth-last-child(1){ margin-bottom: 0;}
.ProductPage .StrengthDetail .Title{ font-size: 30px; font-weight: 600; margin: 0; margin-top: 50px; transition: all .4s;}
.ProductPage .StrengthDetail .Title::first-letter{ font-size: 40px; font-weight: 500; padding: 15px 0px 10px 0; }

/* OurProducts */
.OurProducts{ width: auto; height: auto; padding: 100px 0; background-color: #efefef; }
.OurProductsBox{ width: auto; max-width: 1160px; margin: auto; position: relative;}
.OurProductsBox .OurProductsBoxList{ margin-top: 50px;}
.OurProductsBox .OurProductsBoxList ul{ margin: auto;}
.OurProductsBox .OurProductsBoxList ul li{ width: auto; height: auto; display: flex; align-items: center; justify-content: space-between; margin:0; padding: 4% 0; overflow: auto; clear: both; }
.OurProductsBox .OurProductsBoxList ul li .Picture{ width: 35%; height: 400px; max-width: 400px; overflow: hidden; order: 2;}
.OurProductsBox .OurProductsBoxList ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .4s; }
.OurProductsBox .OurProductsBoxList ul li:hover .Picture img{ opacity: 0.8; transition: all .4s; }
.OurProductsBox .OurProductsBoxList ul li .Detail{ width: 60% ;order: 1; color: #5c5b5b;}
.OurProductsBox .OurProductsBoxList ul li .Detail .Title{ text-transform: uppercase; font-size: 35px; font-weight: 500; margin: 0; letter-spacing: 2px; margin-right: 20px;transition: all .3s;}
.OurProductsBox .OurProductsBoxList ul li:hover .Detail .Title{ color: #a2b968;transition: all .3s;}
.OurProductsBox .OurProductsBoxList ul li .Detail .Icon{ max-width: 40px; height: auto; max-height: 40px; vertical-align:baseline;}
.OurProductsBox .OurProductsBoxList ul li .Detail .Captions{ margin: 10px 0 30px 0; font-size: 18px; font-weight: 400; line-height: 35px;}
.OurProductsBox .OurProductsBoxList ul li .Detail .Readmore{ margin: 50px 0 0 0;}
.OurProductsBox .OurProductsBoxList ul li .Detail .Readmore a{ font-size: 14px; display: inline-block; padding: 15px 60px; letter-spacing: 1px; color: #fff; background-color: #5c5b5b;}
.OurProductsBox .OurProductsBoxList ul li:nth-child(odd){ margin: 0; }
.OurProductsBox .OurProductsBoxList ul li:nth-child(odd) .Picture{ order: 1; }
.OurProductsBox .OurProductsBoxList ul li:nth-child(odd) .Detail{ order: 2; }

/* ProductDetailPage */
.ProductDetailPage{ width: auto; height: auto; padding: 100px 0 50px 0; background-color: #fff; position: relative; }
.ProductDetailPage .ProductDetailPageBox{ width: auto; max-width: 1160px; height: auto; margin: auto; position: relative; }
.ProductDetailPage .ProductDetailPageBox .HeaderBoxAllGray{ width: 100%;}
.ProductDetailPage .ProductDetailPageBox .HeaderBoxAllGray h2{ padding: 40px 0 30px 0; }
.ProductDetailPage .ProductDetailPageBox .HeaderBoxAllGray .Icon{ width: 100%; max-width: 40px; height: auto; max-height: 40px; vertical-align:baseline; }
.ProductDetailPage .ProductDetailPageBox .HeaderBoxAllGray .IconMore{ width: 100%; max-width: 160px; height: auto; margin-left: 100px; display: inline-block; vertical-align: middle;}
.ProductDetailList{ margin: 20px 0;}
.ProductDetailList ul li{ width: auto; height: auto; clear: both; padding: 100px 0; background-color: #fafafa;}
.ProductDetailList ul li:first-child{ padding-top: 0;}
.ProductDetailList ul li:nth-child(odd){ background-color: #fff;}
.ProductDetailList .ProductDetailLR{ width: auto; max-width: 1160px; height: auto; margin: auto; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;}
.ProductDetailList .ProductDetailLR .SlideImages{ width: 45%; height: auto; max-width: 500px; /*background-color: #ccc;*/}
.ProductDetailList .ProductDetailLR .SlideImages .slider-for{ width: 100%; max-width: 100%; background-color: #fff; border: 1px solid #fafafa; /* fafafa */ text-align: center;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-for .slick-slide{ height: 450px; text-align: center;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-for div.slick-slide{ text-align: center;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-for div.slick-slide img{ width: auto; max-width: 100%; height:auto; max-height: 100%; left: 0; right: 0; margin: auto;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-nav{ margin-top: 10px;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-nav div:first-child{ margin-left: 0;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-nav div:last-child{ margin-right: 0;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-nav div.slick-slide{ width: 100%; height: 120px!important; margin: 5px; overflow: hidden;}
.ProductDetailList .ProductDetailLR .SlideImages .slider-nav div.slick-slide img{ cursor: pointer; display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.ProductDetailList .ProductDetailLR .SlideImages .NoPhoto{ background-color: #ccc; min-height: 300px; text-align: center; line-height: 300px;}
.ProductDetailList .ProductDetailLR .ProductDetail{ width: 45%; height: auto;}
.ProductDetailList .ProductDetailLR .ProductDetail p{ margin: 0; padding: 0; }
.ProductDetailList .ProductDetailLR .ProductDetail .DetailBox{ line-height: 30px; margin-top: 20px; }
.ProductDetailList .ProductDetailLR .ProductDetail ul{ margin-left: 30px; }
.ProductDetailList .ProductDetailLR .ProductDetail ul li{ background-color: transparent; list-style-type: disc!important; list-style-position: outside!important; padding: 0; margin: 10px 0; }
.ProductDetailList .ProductDetailLR .ProductDetail ul li::marker{ display: inline-block!important;}
.ProductDetailList .ProductDetailLR .ProductDetail ol{ margin-left: 30px;}
.ProductDetailList .ProductDetailLR .ProductDetail ol li{ background-color: #fff; list-style-type: decimal!important; list-style-position: outside!important; padding: 0; margin: 10px 0; }
.ProductDetailList .ProductDetailLR .ProductDetail ol li::marker{ display: inline-block!important;}
.ProductDetailList .ProductDetailLR .ProductDetail ol li:first-child p{ margin-top: 0!important;}
.ProductDetailList .ProductDetailLR .ProductDetail .ProductName{ font-size: 30px; font-weight: 600;}
.ProductDetailList .ProductDetailLR .ProductDetail .InstallationType{ margin: 10px 0; font-size: 18px; font-weight: 600;}
.ProductDetailList .ProductDetailLR .ProductDetail .ProductDescriptions{ margin:20px 0 40px 0; line-height: 30px;}
.ProductDetailList .ProductDetailLR .ProductDetail .ProductDescriptions p.Title{ font-size: 18px; font-weight: 600;}
.ProductDetailList .ProductDetailLR .ProductDetail .Colour{ margin: 40px 0;}
.ProductDetailList .ProductDetailLR .ProductDetail .Colour ul{ display: flex; flex-wrap: wrap; margin-left: 0; margin-top: 10px; }
.ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li{ background-color: transparent; list-style: none!important; width: 14%; padding: 0; margin: 0 2% 2% 0; text-align: center; font-size: 13px; line-height: 20px; }
.ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li .ColorBox{ width: 64px; height: 64px; margin: 0 auto; margin-bottom: 10px; border-radius: 100px; border: 1px solid #adadad;}
.ProductDetailList .ProductDetailLR .ProductDetail .Colour ul li img{ max-width: 100%; }
.ProductDetailList .ProductDetailLR .ProductDetail .DimensionPrice{ margin: 40px 0; padding: 30px; background-color: #efefef; }
.ProductDetailList .ProductDetailLR .ProductDetail .DimensionPrice .Dimension{ font-size: 19px; font-weight: 600;}
.ProductDetailList .ProductDetailLR .ProductDetail .DimensionPrice .Prices{ margin: 10px 0 20px 0; font-size: 19px; font-weight: 600; }
.ProductDetailList .ProductDetailLR .ProductDetail .DimensionPrice .Others{ font-size: 16px; line-height: 25px; }
/* slick slide */
.ProductDetailList .ProductDetailLR .SlideImages .slick-next{ right: -30px!important; z-index: 99; width: 23px!important; height: 30px!important; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-prev{ left: -30px!important; z-index: 99; width: 23px!important; height: 30px!important; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-prev:before { background-image: url('../images/chevron-left-solid.svg'); background-size: cover; display: inline-block; width: 23px!important; height: 30px!important; content:""; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-next:before { background-image: url('../images/chevron-right-solid.svg'); background-size: cover; display: inline-block; width: 23px!important; height: 30px!important; content:""; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-track { float: left!important; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-prev, .ProductDetailList .ProductDetailLR .SlideImages .slick-next{ top: 45%!important; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-dots{ bottom: 20px!important; }
.ProductDetailList .ProductDetailLR .SlideImages .slick-dots li button:before{ font-size: 15px!important; color: #fff!important; }
.StylePRD2{ text-align: center;}
.StylePRD2 .StylePRD2Box{ max-width: 900px; margin: auto;}
.StylePRD2 .StylePRD2Box p{ margin: 0; padding: 0;}
.StylePRD2 .StylePRD2Box .PicStyle2{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.StylePRD2 .StylePRD2Box .PicStyle2 div{ width: 30%; height: 270px; text-align: center; border: 1px solid #eee; display: flex; align-items: center; }
.StylePRD2 .StylePRD2Box .PicStyle2 div img{ width: auto; max-width: 100%; height: auto; max-height: 100%; }
.StylePRD2 .StylePRD2Box .ProductName{ font-size: 30px; font-weight: 600;}
.StylePRD2 .StylePRD2Box .ProductDescriptions{ margin:10px 0 40px 0;}
.StylePRD2 .StylePRD2Box .DimensionPrice{ margin: 40px 0; padding: 20px; background-color: #efefef; }
.StylePRD2 .StylePRD2Box .DimensionPrice .Dimension{ font-size: 18px; }
.StylePRD2 .StylePRD2Box .DimensionPrice .Prices{ font-size: 18px; margin: 10px 0 20px 0; }
.StylePRD2 .StylePRD2Box .DimensionPrice .Others{ font-size: 16px; line-height: 25px; }
.StylePRD2 .StylePRD2Box .InstallationType{ margin: 10px 0; font-size: 18px; font-weight: 600;}
.StylePRD2 .StylePRD2Box .Colour{ margin: 40px 0;}
.StylePRD2 .StylePRD2Box .Colour ul{ display: flex; flex-wrap: wrap; justify-content: center; margin-left: 0; margin-top: 10px; }
.StylePRD2 .StylePRD2Box .Colour ul li{ background-color: transparent; list-style: none!important; width: 10%; max-width: 70px; padding: 0; margin: 0 2% 2% 0; text-align: center; font-size: 13px; }
.StylePRD2 .StylePRD2Box .Colour ul li img{ max-width: 100%; }

/* OurWorkToppage */
.OurWorkToppage{ width: 100%; height: auto; margin: 0; padding: 100px 0; background-color: #fff; margin-top: 0px; overflow: auto; }
.OurWorkToppageBoxMargin{ width: auto; max-width: 1160px; margin: auto; overflow: auto; position: relative; }
.OurWorkToppageBox{ width: 100%; height: auto; overflow: auto; margin: 40px 0; }
.OurWorkToppageBox ul{ margin: 0; padding: 0; overflow: auto;}
.OurWorkToppageBox ul li{ width: 50%; overflow: hidden; transition: all .4s; }
.OurWorkToppageBox ul li .List{ margin: 40px 0; padding: 0px 20px; height: 320px; overflow: hidden; }
.OurWorkToppageBox ul li .List img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .4s; }
.OurWorkToppageBox ul li .List:hover img{ -webkit-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02); transition: all .4s; opacity: 0.9; }
.OurWorkToppage .LinkReadmore{ margin-top: 40px; text-align: center;}
.OurWorkToppage .LinkReadmore a{ background-color: #5c5b5b; display: inline-block; color: #fff; padding: 15px 50px; font-size: 14px; letter-spacing: 2px;}
.OurWorkToppage .slick-dots li.slick-active button:before{ font-size: 12px!important; color: #5c5b5b!important;}
.OurWorkToppage .slick-dots li{ width: 20px!important; margin: 0 2px!important; padding: 0!important;}
.OurWorkToppage .slick-dots li button:before{ font-size: 12px!important; color: #5c5b5b!important;}
.OurWorkToppage .slick-dots{ bottom: 0px!important;}
.OurWorkToppage .slick-list{ margin-bottom: 40px;}
.OurWorkToppage .slick-track{ margin-left: 0;}

/* Test */
.intro-text{ text-align: center; font-size: 3em; overflow: hidden; margin: 0 auto; white-space: nowrap; background-image: linear-gradient(90deg, #fb7419, #bc1429, #319197);  background-clip: text; -webkit-background-clip: text; color: transparent; }

/* TailContact */
.TailContact{ width: auto; height: auto; padding: 100px 0; background-color: #fff; }
.TailContactBox{ width: auto; max-width: 1160px; height: auto; margin: auto; overflow: auto; }
.TailContactBox .HeaderBox{ display: block; margin: auto; text-align: center; position: relative; padding: 50px 0; }
.TailContactBox .HeaderBox h2{ text-align: center; display: inline-block; font-size: 35px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; position: relative;}
.TailContactBox .HeaderBox h2:before{ width: 55px; height: 75px; content: ''; position: absolute; left: -65px; top: -60px; background-image: url('../images/icon-2-color.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.TailContactBox .ContactDescription{ font-weight: 500; font-size: 20px; text-align: center;}
.TailContactBox .SocialBox{ width: auto; height: auto; margin: auto; display: flex; justify-content: space-between; margin-top: 80px; margin-bottom: 50px;}
.TailContactBox .SocialBox p{ margin: 0;}
.TailContactBox .SocialBox a{color: #5c5b5b;}
.TailContactBox .SocialBox .SocialBoxLine{ width: 48%; align-self: flex-end; background-color: #fff; border: 2px solid #83bccf; text-align: center; transition: all .3s; }
.TailContactBox .SocialBox .SocialBoxLine:hover{ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); transition: all .3s;}
.TailContactBox .SocialBox .Title{ background-color: #83bccf; color: #fff; padding: 10px 20px; min-height: 50px; font-size: 25px; font-weight: 600; }
.TailContactBox .SocialBox .SCBox{ padding: 40px 20px; text-align: center; font-size: 22px; font-weight: 500;}
.TailContactBox .SocialBox .SCBox p{ display: inline-block;}
.TailContactBox .SocialBox .SCBox p img{ width: 100%; max-width: 50px; height: auto; vertical-align: middle; margin-right: 20px;}
.TailContactBox .SocialBox .SocialBoxFB{ width: 48%; align-self: flex-end; background-color: #fff; border: 2px solid #83bccf; text-align: center; transition: all .3s; }
.TailContactBox .SocialBox .SocialBoxFB:hover{ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); transition: all .3s;}
/* ContactForm */
.TailContactBox .ContactForm{ max-width: 900px; margin: auto; margin-top: 100px; color: #5c5b5b;}
.TailContactBox .ContactForm ul { margin: 0;}
.TailContactBox .ContactForm ul li{ margin: 20px 0; display: flex; flex-wrap: nowrap; clear: both;}
.TailContactBox .ContactForm ul li:last-child{ margin-bottom: 0; }
.TailContactBox .ContactForm ul li p:nth-child(1){ margin: 0; width: 35%; }
.TailContactBox .ContactForm ul li p:nth-child(2){ margin: 0; width: 65%; }
.TailContactBox .ContactForm ul li p:nth-child(1) span:nth-child(1){ position: relative; display:block; font-size: 15px; min-height: 45px; line-height: 30px; letter-spacing: 1px; padding: 8px 10px 0 30px;}
.TailContactBox .ContactForm ul li p:nth-child(1) span:nth-child(1):before{ position: absolute; content: ''; width: 20px; height: 20px; left: 0; top: 12px; background-image: url('../images/icon-bullets.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.TailContactBox .ContactForm ul li input[type=text]{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; }
.TailContactBox .ContactForm ul li input[type=number]{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; }
.TailContactBox .ContactForm ul li input[type=password]{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; }
.TailContactBox .ContactForm ul li input[type=email]{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; }
.TailContactBox .ContactForm ul li input[type=tel]{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; }
.TailContactBox .ContactForm ul li input[type=url]{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; }
.TailContactBox .ContactForm ul li select{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:1px solid #bdbdbd; }
.TailContactBox .ContactForm ul li textarea{ font-family: 'DM Sans', sans-serif; display: inline-block; outline:none; width: 100%; min-height: 200px; margin-top: 0px; padding: 14px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #efefef; border:0px solid #bdbdbd; vertical-align: top; margin-top: 0px; }
.TailContactBox .ContactForm ul li input[type=checkbox]{ margin-right: 10px; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5);}
.TailContactBox .ContactForm ul li input[type=radio]{ margin-right: 10px; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5);}
.TailContactBox .ContactForm ul li .FormBoxCheckbox label{ display: inline-block; padding-top: 8px; margin-right: 20px;}
.TailContactBox .ContactForm .BTN{ text-align: left; margin-top: 50px;}
.TailContactBox .ContactForm button { position: relative; display: inline-block; outline:none; cursor: pointer; background-color: #5c5b5b; letter-spacing: 3px; color: #fff; padding: 20px; width: 100%; max-width: 190px; border: 0; font-size: 14px; font-weight: 300; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all .3s; }
.TailContactBox .ContactForm button:hover{ background-color: #83bccf; transition: all .3s; }
.TailContactBox .ContactForm input[type=submit] { position: relative; display: inline-block; outline:none; cursor: pointer; background-color: #5c5b5b; letter-spacing: 3px; color: #fff; padding: 20px; width: 100%; max-width: 190px; border: 0; font-size: 14px; font-weight: 300; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all .3s; }
.TailContactBox .ContactForm input[type=submit]:hover{ background-color: #83bccf; transition: all .3s; }
.TailContactBox .ContactForm ul li p:nth-child(1) span.NoneX:before{ display: none;}
.TailContactBox .ContactForm a{ color: #83bccf; text-decoration: underline;}
.BulletsRes{ width: 17px; height: auto; vertical-align: middle; margin-right: 10px;}

/* Footer */
footer{ background-color: #83bccf; color: #fff; overflow: auto; background-image: url('../images/bg-tail.png'); background-repeat: no-repeat; background-size:cover; background-position: center; }
footer .FooterBox{ height: auto; margin: auto; overflow: auto; }
footer .FooterBox .FooterContactBox{ width: auto; max-width: 1160px; height: auto; margin: auto; display: flex; justify-content: space-between; position: relative; margin-top: 100px; margin-bottom: 20px; }
footer .FooterBox .FooterContactBox .FooterAddress{ width: 48%; font-size: 16px; align-self: flex-end; }
footer .FooterBox .FooterContactBox .FooterAddress p{ margin: 0;}
footer .FooterBox .FooterContactBox .FooterAddress .Logo img{ width: auto; max-width: 200px; height: auto;}
footer .FooterBox .FooterContactBox .FooterAddress .CompanyName{ font-size: 20px; margin-top: 10px;}
footer .FooterBox .FooterContactBox .FooterAddress .Address{ margin: 0px 0 10px 0; font-size: 21px; font-weight: 400; position: relative; padding-left: 70px;}
footer .FooterBox .FooterContactBox .FooterAddress .Address:before{ width: 60px; height: 70px; content: ''; position: absolute; left: 0; top: 0; background-image: url('../images/icon-map.png'); background-repeat: no-repeat; background-size:contain; background-position: center; }
footer .FooterBox .FooterContactBox .FooterAddress .Map{ border: 1px solid #999; margin-top: 30px; width: 100%; height: 290px; background-color: #eee;}
footer .FooterBox .FooterContactBox .FooterAddress .MapResponsive { overflow: hidden; padding-bottom:0%; position: relative; height: 290px; margin-top: 30px; border: 1px solid #8d8b8b;}
footer .FooterBox .FooterContactBox .FooterAddress .MapResponsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
footer .FooterBox .FooterContactBox .FooterContact{ width: 45%; font-size: 20px; font-weight: 400; align-self: flex-end; padding-bottom: 20px; }
footer .FooterBox .FooterContactBox .FooterContact p{ margin: 10px  0;}
footer .FooterBox .FooterContactBox .FooterContact p.FontBig{ font-size: 30px; font-weight: 400; }
footer .FooterBox .FooterContactBox .FooterContact p:last-child{ margin: 0;}
footer .FooterBox .FooterContactBox .FooterContact p span{ display: inline-block; padding-left: 20px; font-weight: 600;}
footer .FooterBox .FooterContactBox .FooterContact a{color: #fff;}
footer .FooterBox .FooterContactBox .FooterContact a:hover{color: #123;}
footer .FooterBox .Copyrights{ width: auto; height: auto; background-color: #5c5b5b; color: #fff; font-size: 12px; margin: 0; padding: 20px 0; letter-spacing: 1px; overflow: auto; clear: both;}
footer .FooterBox .Copyrights .CopyrightsBox{ max-width: 1160px; height: auto; margin: auto; }
footer .FooterBox .Copyrights .CopyrightsBox a{ color: #fff;}
footer .FooterBox .Copyrights .CopyrightsBox a:hover{ color: #83bccf;}
footer .FooterBox .Copyrights .CopyrightsBox p{ margin: 0; padding: 0;}
footer .FooterBox .Copyrights .CopyrightsBox p:nth-child(1){ float: right; text-align: right; padding-left: 10px;}
footer .FooterBox .Copyrights .CopyrightsBox p:nth-child(2){ float: left; text-align: left; padding-right: 10px;}

.AlumiFooter{ background-image: url('../images/alumi-roof/bg-alumi-tail.png')!important; background-repeat: no-repeat; background-size:cover; background-position: center;}
.AlumiFooter .FooterBox .Copyrights{background-color: #000211!important;}
.AlumiFooter .FooterBox .FooterContactBox .FooterContact p span{ display: block; padding-left: 0;}
.AlumiFooter .TelF{ position: relative; padding-left: 40px; margin-top: 40px!important;}
.AlumiFooter .TelF:before{ width: 20px; height: 20px; position: absolute; content: ''; left: 0; top: 10px; background-image: url('../images/alumi-roof/icon-tel-tail.png'); background-repeat: no-repeat; background-size:contain;}
.AlumiFooter .MailF{ position: relative; padding-left: 40px; margin-top: 10px!important;}
.AlumiFooter .MailF:before{ width: 20px; height: 20px; position: absolute; content: ''; left: 0; top: 10px; background-image: url('../images/alumi-roof/icon-email-tail.png'); background-repeat: no-repeat; background-size:contain;}
.AlumiFooter .ContacAddressAlumi{ margin-top: 30px!important;}

/* pagination */
#pagination { padding: 0;  margin: 60px 0 60px;  overflow: hidden; font-size: 14px; }
#pagination ul { position: relative; padding: 0; margin: 0; text-align: center; }
#pagination li { display: inline-block; padding: 0;  margin: 0 1px; text-align: center; width: 45px; height: 45px; list-style: none; font-weight: bold; line-height: 37px; }
#pagination li a { background: #83bccf; width: 40px; height: 40px; }
#pagination li a:hover {  background: #83bccf; opacity: .6; }
#pagination li:first-child:hover { opacity: .6;  }
#pagination li span, #pagination li a { position: relative; letter-spacing: 0px; border: 1px solid #83bccf; border-radius: 5px;}
#pagination span, #pagination a {  display: block;  float: left; padding: 0px 0px 0px 0px;  margin: 2px 2px 2px 0; color: #fff; text-decoration: none; border: 1px solid #83bccf }
#pagination ul li span.active{ width: 40px; height: 40px; background: #fff; color: #83bccf; }
#pagination li:first-child span:before, #pagination li:first-child a:before, #pagination li:last-child span:after, #pagination li:last-child a:after { position: absolute;  display: block;  width: 9px;  height: 16px;  margin-top: -7px; content: ""; }
#pagination li:first-child a, #pagination li:first-child span{  padding-left: 0px;  background: none; border: 0px; font-size: 15px; color: #83bccf; top: 0px; }
.FontTH #pagination li:first-child a,.FontTH #pagination li:first-child span{ font-size: 14px; }
#pagination li:last-child:hover { opacity: .6; }
#pagination li:last-child a, #pagination li:last-child span { padding-right: 0px;  margin: 2px 0px; background: none; border: 0px; font-size: 15px; color: #83bccf; top: 0px; }
.FontTH #pagination li:last-child a,.FontTH  #pagination li:last-child span { font-size: 14px;}
#pagination span, #pagination a,#pagination li:last-child a, #pagination li:last-child span{ margin: 0; }


/* Remove for prod */
.rtl-slider-flex { width: 100%; /*margin: 10em auto; padding: 0.75em 0.75em 0.5em; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.2); box-shadow: 0 1px 5px rgba(0,0,0,0.15);*/ }
/* .rtl-slider-flex .thumb-prev{ position: absolute; left: -20px;}
.thumb-prev, .thumb-next { position: absolute; bottom: 12px !important; right: calc(9% + 0.75em) !important; }
.thumb-prev { right: calc(0% + 0.75em) !important;
}*/
.rtl-slider-flex { /*display: flex; flex-direction: row; justify-content: center;*/ box-sizing: border-box;  position: relative; }
.rtl-slider-flex .rtl-slider { width: 100%; /*margin-right: 1%;*/ }
.rtl-slider-flex .rtl-slider-nav { width: 100%; /*margin-top: -2px;*/ }
.rtl-slider-flex .rtl-slider-nav .rtl-slider-slide { width: 20%; padding-top: 90%; opacity: 0.75; transition: all 0.3s ease; cursor: pointer; }
.rtl-slider-flex .rtl-slider-nav div{ margin-right: 5px;}
.rtl-slider-flex .rtl-slider-nav div:last-child(){ margin-right: 0px;}
.rtl-slider-flex .rtl-slider-nav .slick-slide.slick-current.slick-active .rtl-slider-slide { opacity: 1; }
.rtl-slider-flex .rtl-slider-slide { background:  url("") no-repeat center/cover; padding-top: 56.25%; }
.rtl-slider-flex .rtl-slider .rtl-slider-slide{ background-size: contain; height: 500px;}
/*.rtl-slider-flex .thumb-prev,.rtl-slider-flex .thumb-next { position: absolute; bottom: 4px; right: 0;  height: 88px; width: 9.5%; text-align: center; display: flex; justify-content: center; align-items: center; cursor: pointer;  transition: all 0.3s ease; background: transparent; }
.rtl-slider-flex .thumb-prev { right: 9.5%; }*/

/*.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-next{ right: -30px!important; z-index: 99; width: 35px!important; height: 40px!important; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-prev{ left: -30px!important; z-index: 99; width: 35px!important; height: 40px!important; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-prev:before { background-image: url('../images/chevron-left-solid.svg'); background-size: cover; display: inline-block; width: 23px!important; height: 30px!important; content:""; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-next:before { background-image: url('../images/chevron-right-solid.svg'); background-size: cover; display: inline-block; width: 23px!important; height: 30px!important; content:""; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-track { float: left!important; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-prev, .ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-next{ top: 45%!important; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-dots{ bottom: 20px!important; }
.ProductDetailList .ProductDetailLR .SlideImages .rtl-slider-flex .slick-dots li button:before{ font-size: 15px!important; color: #fff!important; }*/


/* PrivacyPolicy */
.PrivacyPolicy{ width: auto; height: auto; margin: 0; padding: 0; background-color: #fff; margin-top: 0px; position: relative; }
.PrivacyPolicyBox{ position: relative; width: 100%; max-width: 960px; height: auto; margin: auto; overflow: hidden; z-index: 9; }
.TermsPrivacyBoxDetail{ padding: 80px 0;}
.TermsPrivacyBoxDetail p{ margin: 15px 0;}
.TermsPrivacyBoxDetail ul { margin-left: 20px;}
.TermsPrivacyBoxDetail ul li{ list-style: disc!important; }
.TermsPrivacyBoxDetail ol{ margin-left: 40px; /*counter-reset: item;*/counter-reset: my-sec-counter; }
.TermsPrivacyBoxDetail ol ol{ margin-left: 20px; margin-top: 10px; }
.TermsPrivacyBoxDetail ol ol ol{ margin-left: 20px; margin-top: 10px; }
.TermsPrivacyBoxDetail ol li{ list-style-type:decimal!important; position: relative; display: block!important; margin-bottom: 10px; }
.TermsPrivacyBoxDetail ol li:before { /*content: counters(item, "") "."; counter-increment: item;*/ counter-increment: my-sec-counter; content: "(" counter(my-sec-counter) ") "; margin-left: -22px; }
.TermsPrivacyBoxDetail ol li li{ margin-left: 20px;}
.TermsPrivacyBoxDetail ol li li:before { /*content: counters(item, ".") ". )"; counter-increment: item;*/ counter-increment: my-sec-counter; content: "" counter(my-sec-counter) ") "; margin-left: -22px; }
.TermsPrivacyBoxDetail ol li li li:before { /*content: counters(item, ".") ". )"; counter-increment: item;*/ counter-increment: my-sec-counter; content: "(" counter(my-sec-counter) ") "; margin-left: -27px; }
.TermsPrivacyBoxDetail .title{ font-weight: bold; display: inline-block; margin-bottom: 5px;}
.TermsPrivacyBoxDetail a{ text-decoration: underline; color: #83bccf;}
.TermsPrivacyBoxDetail .EM{ font-style: italic;}
.TermsPrivacyBoxDetail .ML40{ margin-left: 40px;}

.CookiesPolicy{ padding: 80px 0;}
.CookiesPolicy p{ margin: 15px 0;}
.CookiesPolicy ul { margin-left: 20px;}
.CookiesPolicy ul li{ list-style: disc!important; }
.CookiesPolicy ol{ margin-left: 0px; counter-reset: item; }
.CookiesPolicy ol ol{ margin-left: 20px; margin-top: 10px; }
.CookiesPolicy ol ol ol{ margin-left: 20px; margin-top: 10px; }
.CookiesPolicy ol li{ list-style-type:decimal!important; position: relative; display: block!important; margin-bottom: 10px; padding-left: 0; }
.CookiesPolicy ol li:before { content: counters(item, "") ". "; counter-increment: item; margin-left: 0px; }
.CookiesPolicy ol li li{ margin-left: 20px; }
.CookiesPolicy ol li li:before { content: counters(item, ".") " "; counter-increment: item; margin-left: -22px; }
.CookiesPolicy .title{ font-weight: bold; display: inline-block; margin-bottom: 5px;}
.CookiesPolicy a{ text-decoration: underline; color: #83bccf;}
.CookiesPolicy .EM{ font-style: italic;}
.CookiesPolicy .ML40{ margin-left: 40px;}
.CookiesPolicy table{ margin: 20px 0!important;}
.CookiesPolicy table, th, td { border: 1px solid #ccc; border-collapse: collapse; padding: 10px; text-align: center; }

/*.FontTH .ENText{ display: none; }
.FontEN .ENText a{ color: #fff!important; text-decoration: underline;}
.FontEN .ENText a:hover{ color: #ccc!important; text-decoration: none;}
.FontEN .THText{ display: none; }
.FontTH .THText a{ color: #fff!important; text-decoration: underline;}
.FontTH .THText a:hover{ color: #ccc!important; text-decoration: none; }*/

.ENText a{ color: #fff!important; text-decoration: underline;}
.ENText a:hover{ color: #ccc!important; text-decoration: none;}
.THText a{ color: #fff!important; text-decoration: underline;}
.THText a:hover{ color: #ccc!important; text-decoration: none; }

/* InstallationLP */
.InstallationLP{ width: 100%; height: auto; padding: 100px 0; background-color: #f3f3f0; margin-bottom: 60px; }
.InstallationLPBox{ max-width: 1160px; margin: auto; }
.InstallationLPHeader{ position: relative; z-index: 1; letter-spacing: 3px; width: 100%; text-align: center;}
.InstallationLPHeader h2{  position: relative; display: inline-block; z-index: 1; font-size: 35px; letter-spacing: 1px; font-weight: 600;}
.InstallationLPHeader h2:before{ position: absolute; z-index: -1; content: ''; width: 100px; height: 100px; left: -120px; top: -20px; background-image: url('../images/in-net/icon-Installation.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.InstallationLPList{ margin-top: 80px; }
.InstallationLPList .BABox{ width: auto; max-width: 690px; margin: auto; display: flex; justify-content: space-between; margin-top: 20px; background-image: linear-gradient(150deg, #ffffff 0%, #b2ae9d 100%); border-radius: 20px 20px 0 0; }
.InstallationLPList .BABox p{ margin: 0; padding: 15px 20px; font-size: 26px; font-weight: 600; }
.InstallationLPList .BABox .BABoxLeft{ text-align: left; color: #b2ae9d;}
.InstallationLPList .BABox .BABoxRight{ text-align: right; color: #ffffff;}
.InstallationLPList .BA{ display: flex; justify-content: space-between; margin: 0;}
.InstallationLPList .BA .Picture{ margin: 0; width: 100%; height:auto; max-width: 100%;}
.InstallationLPList .BA .Picture img{ width: 100%; height: auto; max-width: 100%; }
.InstallationLPList .BA .Title{ margin: 0; margin-top: 20px; text-align: center; font-size: 30px; font-weight: 600;}
.InstallationLPList .BA .Before{ width: 50%; }
.InstallationLPList .BA .After{ width: 50%; }
.InstallationLPList .BA .MB{ display: none;}
.FontEN .InstallationLPList .BA .Title{ font-size: 23px;}

/* ContactMiddle */
.ContactMiddle{ width: 100%; height: 550px; margin-bottom: 100px; background-image: url('../images/in-net/bg-contact-middle.png'); background-repeat: no-repeat; background-position: top center; padding-top: 200px; background-size: cover; }
.ContactMiddleBox{ max-width: 1160px; margin: auto; }
.ContactMiddleHeader{ position: relative; z-index: 1; color: #fff; font-size: 35px; letter-spacing: 3px; width: 100%; text-align: center;}
.ContactMiddleHeader h2{ font-family: 'DM Sans', sans-serif; position: relative; display: inline-block; z-index: 1; font-size: 55px; letter-spacing: 15px; font-weight: 700;}
.ContactMiddleHeader h2:before{ position: absolute; z-index: -1; content: ''; width: 120px; height: 120px; left: -45px; top: -20px; background-image: url('../images/in-net/header-blue.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.ContactMiddleList{ background-color: #58a5ce; color: #fff; text-align: center; margin-top: 0px; padding: 40px 70px; border: 8px solid #b5d7e2; border-radius: 20px; }
.ContactDescription{ font-size: 22px;}
.ContactMiddleList ul{ display: flex; justify-content: center;}
.ContactMiddleList ul li{ width: 200px; margin: 20px 45px; text-align: center; font-size: 20px; }
.ContactMiddleList ul li .Icon{ width: 150px; height: 150px; display: flex; justify-content: center; justify-items: center; margin: auto; padding: 30px; background-color: #fff; border-radius: 100px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); margin-bottom: 20px;}
.ContactMiddleList ul li .Icon img{ width: 100%; height: auto; max-height: 90px; max-width: 100%; }
.ContactMiddleList ul li p{ margin: 0;}
.FormIcon{ max-width: 80px!important; margin-top: 5px}
.ContactMiddleList ul li a{ color: #fff;}

.ProductDetailListLP{ margin: 0!important; padding-top: 50px;}
.ProductDetailListLP ul li:first-child{ padding-top: 100px!important;}
.ProductDetailListLP .ProductDetailLR .ProductDetail ul li{ padding-top: 0!important;}
.ProductDetailListLP .ProductDetailLR .ProductDetail .Colour ul li:first-child{ padding-top: 0!important;}

/* HowTo */
.HowTo{ width: auto; height: auto; background-color: #ecebe6; padding: 100px 0; border-top: 10px solid #000; }
.HowToBox{width: 100%; height: auto; overflow: auto; margin: 40px 0;}
/* HeaderBoxAll */
.HowToHeader{ width: 100%; height: auto; text-align: center; display: inline-block; position: relative;}
.HowToHeader:before{ position: absolute; width: 100%; height: 45px; content: ''; left: 0px; top: 0px; z-index: 0; background-image: url('../images/in-net/line-how-to.svg'); background-repeat: repeat; background-position: top center;}
.HowToHeader h2{ padding: 0; width: 450px; font-size: 45px; font-weight: 600; letter-spacing: 1px; position: relative; z-index: 1; display:block; margin: 0 auto; background-color: #ecebe6; }
.HowToHeader .Cpation{ width: 450px; font-size: 30px; font-weight: 600; letter-spacing: 1px; position: relative; z-index: 1; display:block; margin: 0 auto; margin-top: 0px; background-color: #ecebe6; }
.HowToHeaderList{ display: flex; justify-content: space-between; max-width: 1160px; margin: auto; margin-top: 100px; margin-bottom: 100px;}
.HowToHeaderList .Left{ width: 50%; }
.HowToHeaderList .Left img{ width: 100%; height: auto; max-width: 100%;}
.HowToHeaderList .Right{ width: 50%; font-size: 18px; position: relative; }
.HowToHeaderList .Right p{ margin: 15px 0;}
.Title{ font-size: 26px; font-weight: 600; margin: 0 0 20px 0;}
.Square{ position: relative; padding-left: 50px; }
.Square:before{ width: 35px; height: 35px; position: absolute; content: ''; left: 0; top: 0; background-color: #8e886f;}
.HowToList2{ max-width: 1160px; margin: auto; margin-top: 100px; margin-bottom: 0px;}
.HowToList2 ul{ display: flex; justify-content: space-between; }
.HowToList2 ul li{ width: 30%; margin: 0 2%; font-size: 18px; text-align: center; }
.HowToList2 ul li .Picture{ text-align: center; height: 330px; display: flex; justify-content: center; justify-items: center;}
.HowToList2 ul li .Picture img{width: auto; height: auto; max-height: 330px; max-width: 230px; }
.HowToList2 ul li .Caption{ text-align: left;}

/* FeatureBGAll */
.FeatureBGAll{ width: 100%; height: auto; position: relative; padding: 240px 0 100px 0; margin-top: 10%; background-image: url('../images/in-net/bg-feature-all.jpg '); background-repeat: repeat; background-position: top center;}
.HeaderFeature{ width: 100%; position: absolute; max-width: 1160px; left: 0; right: 0; top: -225px; margin: auto; margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.HeaderFeature .Left{ width: 50%;}
.HeaderFeature .Left .LeftBox{ width: 450px; height: 450px; margin: auto; text-align: center; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 38px; font-weight: 600; background-image: url('../images/in-net/bg-feature.svg '); background-repeat: repeat; background-position: center; }
.HeaderFeature .Left .LeftBox img{ width: 100%; height: auto; max-width: 230px;}
.HeaderFeature .Left .LeftBox p{ margin: 15px 0;}
.HeaderFeature .Right{ width: 50%; text-align: right;}
.HeaderFeature .Right img{ width: auto; height: auto; max-width: 95%;}
/* ProundAchievement */
.container_ProundAchievement { max-width: 1160px;  margin: 0 auto; padding-top: 30px; padding-bottom: 30px; }
.container_ProundAchievement > div { height: auto; }
.container_ProundAchievement > div > ul { width: 100%; margin: 0; padding: 0; }
.container_ProundAchievement > div > ul > li {  list-style-type: none; width: calc(((100vw - 100%) / 2) + 100%); border-radius: 20px 0 0 20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);  background-image: url('../images/in-net/bg-feature-list.png'); background-repeat: repeat; background-position: left center; padding:0; box-sizing: border-box; }
.ProundAchievement{ max-width: 1160px; height: auto; position: relative; /*background-color: #a80000; color: #fff;*/ font-size: 16px; padding: 0 0 0 50px; display: flex; justify-content:space-between; align-items: center; overflow: auto; }
.ProundAchievement .Box1{ width: 50%; padding-right: 30px;}
.ProundAchievement .Box1 .TItle{ /*border: 2px dashed #3291cb;*/ border-top: 0px; max-width: 350px; overflow: hidden; position: relative; }
.ProundAchievement .Box1 .TItle:before { content: ""; position: absolute;  border: 5px dashed #3291cb; top: -5px; bottom: -4px; left: -4px; right: -4px; }
.ProundAchievement .Box1 .TItle p{ display: block; margin: 0 8px 8px 8px; background-color: #3291cb; color: #fff; font-weight: 600; font-size: 30px; text-align: center; padding: 30px 20px;}
.ProundAchievement .Box1 .MBPicrture{ display: none;}
.ProundAchievement .Box1 .Description{ max-width: 90%; font-weight: 400; font-size: 18px; line-height: 35px; margin-top: 50px; padding-bottom: 50px;}
.ProundAchievement .Box2{ width: 50%; padding-right: 30px;}
.ProundAchievement .Box2 img{ width: 100%; height: auto; max-width: 100%;}
/* ProundAchievement1 */
.container_ProundAchievement1 { max-width: 100%; margin: 0 auto; padding-top: 30px; padding-bottom: 30px; }
.container_ProundAchievement1 > div { height: auto; }
.container_ProundAchievement1 > div > ul { width: 1160px; margin: 0; padding: 0; }
.container_ProundAchievement1 > div > ul > li { position: relative; list-style-type: none; width: calc(((100vw - 100%) / 2) + 100%); border-radius: 0 20px 20px 0; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);  background-image: url('../images/in-net/bg-feature-list.png'); background-repeat: repeat; background-position: left center; padding:0; box-sizing: border-box; }
.ProundAchievement1{ max-width: 1160px; height: auto; position: relative; margin: auto; margin-right: 0px; /*background-color: #a80000; color: #fff;*/ font-size: 16px; padding: 0 0 0 50px; display: flex; justify-content:space-between; align-items: center; overflow: auto; }
.ProundAchievement1 .Box1{ width: 50%; padding-right: 30px;}
.ProundAchievement1 .Box1 .TItle{ /*border: 2px dashed #3291cb;*/ border-top: 0px; max-width: 350px; overflow: hidden; position: relative; }
.ProundAchievement1 .Box1 .TItle:before { content: ""; position: absolute;  border: 5px dashed #3291cb; top: -5px; bottom: -4px; left: -4px; right: -4px; }
.ProundAchievement1 .Box1 .TItle p{ display: block; margin: 0 8px 8px 8px; background-color: #3291cb; color: #fff; font-weight: 600; font-size: 30px; text-align: center; padding: 30px 20px;}
.ProundAchievement1 .Box1 .TItle p span{ font-size: 25px;}
.ProundAchievement1 .Box1 .MBPicrture{ display: none;}
.ProundAchievement1 .Box1 .Description{ max-width: 90%; font-weight: 400; font-size: 18px; line-height: 35px; margin-top: 50px; padding-bottom: 50px;}
.ProundAchievement1 .Box1  ul { margin-left: 20px;}
.ProundAchievement1 .Box1  ul li{ position: relative; /*list-style: disc!important;  list-style-image: url('../images/in-net/header-blue.svg');*/ }
.ProundAchievement1 .Box1  ul li::before { position: absolute; left: -25px; top: 5px;  content: ''; height: 20px; width: 20px; background-size: cover; background-image: url('../images/in-net/header-blue.svg'); background-repeat: no-repeat; margin-right: 10px; background-position: center center; vertical-align: middle; }
.ProundAchievement1 .Box2{ width: 50%; padding-right: 50px;}
.ProundAchievement1 .Box2 img{ width: 100%; height: auto; max-width: 100%;}

/* CTALeftBottom */
.CTALeftBottom{ position:fixed; width: auto; left: 20px; bottom:30px; font-size:18px; letter-spacing: 1px; font-weight: 500; z-index: 9;}
.CTALeftBottom a{ background-color: #a2b968; box-shadow: 3px 4px 0px rgba(114, 113, 113, 1); color:#fff; padding: 12px 25px; border-radius: 100px; transition: all .3s; }
.CTALeftBottom a:hover{ background-color:#91ae47; transition: all .3s; }
.CTALeftBottom img{ margin: 0; padding: 0; margin-right: 2px; width:100%; max-width:22px; height:auto; vertical-align: middle; }
.FontTH .CTALeftBottom{ font-size:18px; letter-spacing: 0; font-weight: 400; }
.FontTH .CTALeftBottom a{ padding: 8px 25px; }

/* FeatureIntro */
.FeatureIntro{ padding: 40px 0; background-image: url('../images/alumi-roof/bg-feature.jpg'); background-repeat: no-repeat; background-size: cover; }
.FeatureIntroBox{ max-width: 1160px; margin: auto; }
.FeatureIntroList{ margin: 0;}
.FeatureIntroList ul{ display: flex; justify-content: space-between; }
.FeatureIntroList ul li{ width: 23%; margin: 1.5%; text-align: center; border: 1px solid #193964; border-radius: 8px; background-color: #fff; overflow: hidden; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.5); }
.FeatureIntroList ul li:first-child{ margin-left: 0;}
.FeatureIntroList ul li:last-child{ margin-right: 0;}
.FeatureIntroList ul li .Title{ background-color: #193964; margin: 0; padding: 10px; color: #f7c510; font-size: 21px; font-weight: 600;}
.FeatureIntroList ul li .Title span{ display: block;}
.FeatureIntroList ul li .Detail{ padding: 10px; margin: 0; border: 1px solid #fff6bf;}
.FeatureIntroList ul li .Detail .icon{ width: auto; text-align: center; height: 120px; display: flex; justify-content: center; align-items: center; }
.FeatureIntroList ul li .Detail .icon img{ width: auto; height: auto; max-width: 100px; max-height: 100px; }
.FeatureIntroList ul li .Detail .Captions{ color: #193964; margin: 0; min-height: 50px; }
.FeatureIntroList ul li .Detail .Captions span{ display: block;}
.FeatureIntroList ul li .Detail .ReadMore{ margin: 10px 0 10px 0; }
.FeatureIntroList ul li .Detail .ReadMore a{ display: inline-block; background-color: #193964; color: #f7c510; padding: 3px 20px; border-radius: 100px; }
.FeatureIntroList ul li .Detail .ReadMore a:hover{ background-color: #f7c510; color: #193964; }

/* AruniProblrem */
.AruniProblrem{ margin: 0; padding: 0; }
.AruniProblremList h2{ margin: 0; position: absolute; top: 30%; width: 100%; text-align: center; color: #f7c510; font-size: 80px; font-weight: 700; z-index: 1; }
.AruniProblremList{ margin: 0; padding: 0;}
.AruniProblremList ul{ margin: 0; padding: 0; display: flex; flex-wrap: nowrap; }
.AruniProblremList ul li{ width: 20%; height: 450px; overflow: hidden; position: relative; }
.AruniProblremList ul li .Picture{ margin: 0; width: 100%; height: 100%; overflow: hidden; }
.AruniProblremList ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.AruniProblremList ul li .Detail{ position: absolute; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));}
.AruniProblremList ul li .Detail .Captions{ position: absolute; margin: 0; margin-bottom: 30px; width: 100%; bottom: 0; font-size: 18px; text-align: center; color: #f7c510; }
.AruniProblremList ul li .Detail .Captions span{ display: block; }

/* FeatureIntro */
.ProductSection{ padding: 100px 0; background-image: url('../images/alumi-roof/bg-products.png'); background-repeat: no-repeat; background-size: cover; }
.ProductSectionBox{ max-width: 1160px; margin: auto; }
.ProductSectionList{ margin: 0; padding: 0;}
.ProductSectionList ul{ margin: 0; padding: 0; /*display: flex; justify-content: space-between;*/ }
.ProductSectionList ul li{ width: auto; /*width: 31%; margin: 1.5%;*/ text-align: center; }
/*.ProductSectionList ul li:first-child{ margin-left: 0;}
.ProductSectionList ul li:last-child{ margin-right: 0;}*/
.ProductSectionList ul li .Picture{ margin: 0; width: 100%; height: 320px; overflow: hidden; margin-bottom: 20px; }
.ProductSectionList ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ProductSectionList ul li .TitleTH{ margin: 0; color: #f7c510; font-size: 30px; font-weight: 600; margin-bottom: 0px;}
.ProductSectionList ul li .TitleEN{ margin: 0; color: #fff; font-size: 18px; font-weight: 500;}
.ProductSectionList .slick-list { margin: 0 -20px; }
.ProductSectionList .slick-slide>div { padding: 0 20px; }
.ProductSectionList .slick-track{ width: 100%;}
.ProductSectionList .slick-list { padding: 0!important;}

/* WhyAlumiRoof */
.WhyAlumiRoof{ padding: 100px 0; background-image: url('../images/alumi-roof/bg-why-alumi-roof.png'); background-repeat: no-repeat; background-size: cover; }
.WhyAlumiRoofBox{ /*max-width: 1160px;*/ margin: auto; }
.WhyAlumiRoofBox h2{ margin: 0; position: relative; text-align: center; color: #193964; font-size: 60px; line-height: 80px; font-weight: 700; }
.WhyAlumiRoofBox h2 span{ display: block; font-size: 90px; }
.WhyAlumiRoofList{ margin: 0; padding: 0;}
.WhyAlumiRoofList ul{ margin: 60px 0 80px 0; padding: 0;}
.WhyAlumiRoofList ul li{ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative; overflow: hidden; margin: 30px 0; }
.WhyAlumiRoofList ul li:nth-child(odd):after{ left: 50%; background-image: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1)); }
.WhyAlumiRoofList ul li:nth-child(odd) .Picture{ order: 1; }
.WhyAlumiRoofList ul li:nth-child(odd) .Detail{ order: 2; padding: 0 150px 0 80px; }
.WhyAlumiRoofList ul li:after{ width: 50%; height: 100%; content: ''; position: absolute; left: 0%; top: 0; z-index: 0; background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));}
.WhyAlumiRoofList ul li .Picture{ width: 50%; height: 100%; overflow: hidden; position: relative; z-index: 1; order: 2;}
.WhyAlumiRoofList ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.WhyAlumiRoofList ul li .Detail{ width: 50%; padding: 0 80px 0 150px; color: #193964; position: relative; z-index: 1; order: 1;}
.WhyAlumiRoofList ul li .Detail .Title{ position: relative; font-size: 30px; font-weight: 600; padding-left: 80px;}
.WhyAlumiRoofList ul li .Detail .Title span{ display: block; }
.WhyAlumiRoofList ul li .Detail .Title:before{ position: absolute; left: 0; top: 10px; content: ''; width: 60px; height: 70px; }
.WhyAlumiRoofList ul li .Detail .Why01:before{ background-image: url('../images/alumi-roof/why-icon-01.png'); background-repeat: no-repeat; background-size: contain; }
.WhyAlumiRoofList ul li .Detail .Why02:before{ background-image: url('../images/alumi-roof/why-icon-02.png'); background-repeat: no-repeat; background-size: contain; }
.WhyAlumiRoofList ul li .Detail .Why03:before{ background-image: url('../images/alumi-roof/why-icon-03.png'); background-repeat: no-repeat; background-size: contain; }
.WhyAlumiRoofList ul li .Detail .Why04:before{ background-image: url('../images/alumi-roof/why-icon-04.png'); background-repeat: no-repeat; background-size: contain; }
.WhyAlumiRoofList ul li .Detail .Captions{ font-size: 20px; margin-top: 20px;}

/* StepInstall */
.StepInstall{ padding: 80px 0; }
.StepInstallBox{ max-width: 1280px; margin: auto; }
.StepInstallBox h2{ margin: 0; position: relative; text-align: center; color: #193964; font-size: 60px; font-weight: 700; }
.StepInstallList{ margin: 0; padding: 0; margin-top: 30px;}
.StepInstallList ul{ display: flex; flex-wrap: nowrap; justify-content: space-between; }
.StepInstallList ul li{ width: 24.5%; margin: 0.5%; }
.StepInstallList ul li img{ display: block; width: auto; max-width: 100%; height: auto; max-height: 260px; }
.StepInstallList ul li:first-child{ margin-left: 0;}
.StepInstallList ul li:last-child{ margin-right: 0;}
.StepInstallList ul li .PC{ display: block;}
.StepInstallList ul li .SP{ display: none;}
.Complete1Week{ text-align: center; margin: 60px 0; }
.Complete1Week p{ display: inline-block;margin: auto; font-size: 30px; padding: 10px 50px; font-weight: 500; background-color: #f7c510; color: #193964; border-radius: 100px;}
.Complete1Week span{ font-weight: 700; }
.Complete1WeekVideo{ max-width: 1160px; margin: auto; }
.Complete1WeekVideo ul{ display: flex; justify-content: space-between; }
.Complete1WeekVideo ul li{ width: 48%; }
.Complete1WeekVideo ul li .VideoBox { overflow: hidden; padding-bottom:0%; position: relative; height: 320px; border-radius: 10px;}
.Complete1WeekVideo ul li .VideoBox iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute;}

/* ContactusMiddle */
.ContactusMiddle{ margin: 40px 0 0 0; padding-bottom: 40px; position: relative; }
.ContactusMiddle:before{ position: absolute; content: ''; top: 40%; left: 0; width: 100%; height: 100%; background-color: #f9f9f9; z-index: -1; }
.ContactusMiddleBox{ max-width: 1160px; margin: auto; background-color: #193964; padding: 20px; color: #fff; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.5); }
.ContactusMiddleBox h2{ margin: 0; position: relative; text-align: center; font-size: 40px; font-weight: 600; }
.ContactusMiddleBox .Captions{ margin-top: 0; text-align: center; font-size: 15px; }
.ContactusMiddleList{ margin: 0; padding: 0; }
.ContactusMiddleList ul{ display: flex; flex-wrap: nowrap; justify-content: space-between; }
.ContactusMiddleList ul li{ width: 32.5%; margin: 0.5%; font-size: 21px; text-align: center; }
.ContactusMiddleList ul li img{ display: inline-block; width: auto; max-width: 65px; height: auto; max-height: 65px; margin-right: 10px; }
.ContactusMiddleList ul li a{ color: #fff;}
.ContactusMiddleList ul li:first-child{ margin-left: 0; border-right: 1px solid #fff;}
.ContactusMiddleList ul li:nth-child(2){ margin-left: 0; border-right: 1px solid #fff;}
.ContactusMiddleList ul li:last-child{ margin-right: 0;}

.BGF9{background-color: #f9f9f9;}

/* FeatureIntro */
.ProductInfomations{ padding: 50px 0; }
.ProductInfomationsBox{ max-width: 1160px; margin: auto; }
.ProductInfomationsBox h2{ margin: 0; position: relative; text-align: center; color: #193964; font-size: 40px; font-weight: 600; margin-bottom: 40px; }
.ProductInfomationsList{ margin: 0; padding: 0;}
.ProductInfomationsList ul{ margin: 0; padding: 0; }
.ProductInfomationsList ul li{ width: auto; text-align: center; }
.ProductInfomationsList ul li .Picture{ margin: 0; width: 100%; height: 450px; position: relative; overflow: hidden;}
.ProductInfomationsList ul li .Picture:before{ position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: 0; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); }
.ProductInfomationsList ul li .Picture img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ProductInfomationsList ul li .TitleTH{ margin: 0; background-color: #193964; color: #fff; font-size: 28px; padding: 10px; font-weight: 600; }
.ProductInfomationsList .slick-list { margin: 0 -5px; }
.ProductInfomationsList .slick-slide>div { padding: 0 5px; }
.ProductInfomationsList .slick-track{ width: 100%;}
.ProductInfomationsList .slick-list { padding: 0!important;}
.ProductInfomationsBox .PRDColor{ margin: 80px 0; text-align: center; color: #193964;}
.ProductInfomationsBox .PRDColorTitle{ font-size: 25px; font-weight: 600; text-align: center;}
.ProductInfomationsBox .PRDColorRemark{ font-size: 15px; font-weight: 400; text-align: center;}
.ProductInfomationsBox .PRDColorBox{ margin: 30px 0; }
.ProductInfomationsBox .PRDColorBox ul{ margin: 0; display: flex; justify-content: space-between;}
.ProductInfomationsBox .PRDColorBox ul li{ width: 48%; position: relative; font-size: 18px; }
.ProductInfomationsBox .PRDColorBox ul li .PictureColor img{ width: auto; height: auto; max-width: 100%; max-height: 280px;}
.ProductInfomationsBox .PRDColorBox ul li:first-child:before{ position: absolute; right: -20px; top: 0; content: ''; width: 4px; height: 100%; background-color: #193964; }

/* AlumiOurWorks */
.AlumiOurWorks{ margin: 40px 0 0 0; padding-bottom: 40px; position: relative; }
.AlumiOurWorksBox{ max-width: 1160px; margin: auto; }
.AlumiOurWorksBox h2{ margin: 0; position: relative; text-align: center; font-size: 40px; font-weight: 600; }
.AlumiOurWorksList{ margin: 0; padding: 0; text-align: center; margin-top: 40px; }
.AlumiOurWorksList ul{ margin: 0; padding: 0; }
.AlumiOurWorksList ul li{ width: auto; text-align: center; height: 800px; overflow: hidden; }
.AlumiOurWorksList ul li .TreeRows{ margin: 0; height: 100%; display:flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: column; }
.AlumiOurWorksList ul li .TreeRows p{ width: 100%; height: 32%; margin: 0; overflow: hidden;}
.AlumiOurWorksList ul li .TreeRows p img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.AlumiOurWorksList ul li .TwoRows{ margin: 0; height: 100%; display:flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: column;}
.AlumiOurWorksList ul li .TwoRows p{ margin: 0; width: 100%; height: 49%; }
.AlumiOurWorksList ul li .TwoRows p img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.AlumiOurWorksList .slick-list { margin: 0 -8px; }
.AlumiOurWorksList .slick-slide>div { padding: 0 8px; }
.AlumiOurWorksList .slick-track{ width: 100%;}
.AlumiOurWorksList .slick-list { padding: 0!important;}

.AlumiClass{ border-top: 20px solid #193964;}
.AlumiClass .TailContactBox{ max-width: 900px; margin: auto;}
.AlumiClass .TailContactBox .HeaderBox{ padding: 0!important;}
.AlumiClass .TailContactBox .HeaderBox h2{ color: #193964; font-size: 40px; letter-spacing: 0;}
.AlumiClass .TailContactBox .HeaderBox h2:before{ display: none;}
.AlumiClass .TailContactBox .ContactDescription{ font-size: 18px; font-weight: 400; }
.AlumiClass .TailContactBox .SocialBox{ justify-content: center; margin-top: 20px;}
.AlumiClass .TailContactBox .SocialBox .SocialBoxLine{ /*max-width: 35%;*/ border-radius: 20px; border: 0px; margin-right: 20px; color: #fff; background-color: #193964;}
.AlumiClass .TailContactBox .SocialBox .SocialBoxFB{ /*max-width: 35%;*/ border-radius: 20px; border: 0px; margin-left: 20px; color: #fff; background-color: #193964;}
.AlumiClass .TailContactBox .SocialBox .Title{ padding-bottom: 0; background-color: transparent; font-size: 18px;}
.AlumiClass .TailContactBox .SocialBox .SCBox{ padding: 0 10px 10px 10px; font-size: 26px;}
.AlumiClass .TailContactBox .SocialBox a{ color: #fff;}
.AlumiClass .TailContactBox .SocialBox .SCBox p img{ margin-right: 10px;}
.AlumiClass .TailContactBox .ContactForm{ margin-top: 40px;}
.AlumiClass .TailContactBox .ContactForm p:nth-child(1){ width: 100%; font-size: 18px; font-weight: 600; color: #193964; }
.AlumiClass .TailContactBox .ContactForm p:nth-child(1) img{ display: none;}
.AlumiClass .TailContactBox .ContactForm ul{ position: relative;}
.AlumiClass .TailContactBox .ContactForm ul li p:nth-child(1) span:nth-child(1){ font-size: 14px; font-weight: 500; padding: 8px 0 0 0; }
.AlumiClass .TailContactBox .ContactForm ul li p:nth-child(1) span:nth-child(1):before{ display: none;}
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(1){ width: 45%; }
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(2){ width: 45%; }
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(3){ width: 45%; }
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(4){ width: 45%; }
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(5){ width: 45%; position: absolute; top: 0; right: 0;}
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(6){ text-align: center;}
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(6) p:nth-child(2){ font-size: 16px; font-weight: 500;}
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(7) p:nth-child(2){text-align: center;}
.AlumiClass .TailContactBox .ContactForm ul li:nth-child(7) p:nth-child(2) .wpcf7-spinner{ display: block; margin: auto;}
.AlumiClass .TailContactBox .ContactForm ul li{ margin: 0 0; display: block; clear: none;}
.AlumiClass .TailContactBox .ContactForm ul li p:nth-child(2){ width: 100%; font-size: 13px;}
.AlumiClass .TailContactBox .ContactForm ul li input[type=text]{ background-color: transparent; border-bottom: 2px solid #c6d5e5; padding-top: 0; padding-left: 0;}
.AlumiClass .TailContactBox .ContactForm ul li input[type=email]{ background-color: transparent; border-bottom: 2px solid #c6d5e5; padding-top: 0; padding-left: 0;}
.AlumiClass .TailContactBox .ContactForm ul li input[type=tel]{ background-color: transparent; border-bottom: 2px solid #c6d5e5; padding-top: 0; padding-left: 0;}
.AlumiClass .TailContactBox .ContactForm ul li textarea{ background-color: #f9fbfc; }
.AlumiClass .TailContactBox .ContactForm input[type=submit]{ font-size: 18px; font-weight: 600; text-transform: uppercase; background-image: url('../images/alumi-roof/btn-Send.png')!important; background-color: transparent; background-repeat: no-repeat; background-size: contain; }

/* ContactFixed */
.ContactFixed{ display: none; position: fixed; z-index: 999999; right: 0px; bottom: 0px; width: 90px; height: 90px; background-image: url('../images/alumi-roof/icon-contact-fixed.png')!important; background-repeat: no-repeat; background-size: contain; }
.ContactFixed a{ position: relative; display: block; width: 100%; height: 100%; }

/* Link_Banner */
.Link_Banner{ width: auto; max-width: 1160px; height: auto; margin: auto; display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 40px; margin-bottom: 100px;  }
.Link_Banner .Link_Left{ width: 48%; text-align: left;}
.Link_Banner .Link_Left a{ color: #fff; }
.Link_Banner .Link_Left a:hover{ color: #000; }
.Link_Banner .Link_Left p{ margin: 0 15px; }
.Link_Banner .Link_Left p.FontBig{ font-size: 22px; font-weight: 400; }
.Link_Banner .Link_Left p:last-child{ margin: 0;}
.Link_Banner .Link_Left p span{ display: inline-block; padding-left: 20px; font-size: 20px; font-weight: 600;}
.Link_Banner .Banner_Right{ width: 45%; }
.Link_Banner .Banner_Right img{ width: 100%; height: auto; max-width: 100%; }
.FontEN .Link_Banner .Link_Left p.FontBig{ font-size: 20px;}
.FontEN .Link_Banner .Link_Left p span{ font-size: 20px; display: block; padding-left: 0;}