@charset "UTF-8";
@import 'sanitize.css';
body { margin: 0; padding: 0; color: #000; font-family: 'Kanit', sans-serif; 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 Japan */
.FontJP{ font-family: 'Noto Sans JP', sans-serif; }

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

/* KeyVisualTopPage */
.KeyVisual{ margin: 0; padding: 0;}
.KeyVisual ul{ margin: 0; padding: 0; list-style: none; }
.KeyVisualTopPage{ width: 100%; height: 100vh; display: flex; justify-content: left; align-items: center; background-color: #fff; background-image: url("../images/keyvisual.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center;}
.KeyVisualBox{ width: 100%; max-width: 1160px; overflow: auto; margin: auto; color: #fff; font-size: 25px; text-transform: uppercase; }
.KeyVisualBox .Detail{ max-width: 600px;}
.KeyVisualBox p{ margin: 5px 0; padding: 0;}
.KeyVisualBox h1{ font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 500; line-height: 80px; }
.KeyVisualBox h1 span{ display: block; }
.KeyVisualBox .BlueColor{ color: #33baff; }

/* container_About */
.container_About { max-width: 100%;  margin: 0 auto; }
.container_About > div { height: auto; }
.container_About > div > ul { width: 100%; margin: 0; padding: 0; }
.container_About > div > ul > li { list-style-type: none; width: calc(((100vw - 100%) / 2) + 100%); box-sizing: border-box; }
/* BlogBox */
.AboutBox{ width: auto; margin: auto; overflow: auto; display: flex; justify-content: center; align-items: center; }
.AboutBox .LeftPicture{ width: 55%; overflow: hidden; height: 650px; }
.AboutBox .LeftPicture img{ display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: cover; }
.AboutBox .RightContent{ width: 45%; overflow: auto;font-size: 18px; font-weight: 300;}
.FontJP .AboutBox .RightContent{ font-size: 17px; }
.AboutBox .RightContent .Content{ max-width: 400px; margin-left: 100px; }
.AboutBox .RightContent .Content h2{ font-family: 'Kanit', sans-serif; color: #000; font-size: 50px; line-height: 55px; font-weight: 600; margin: 0; padding: 0; }
.AboutBox .RightContent .Content h2 span{ display: block; color: #31b3f6; }
.AboutBox .RightContent .Content .Captions{ font-family: 'Kanit', sans-serif; color: #000; font-size: 20px; font-weight: 300; margin: 0; }
.AboutBox .RightContent .Content p{ color: #5e5e5e; margin: 0; margin-top: 20px; }

/* OurService */
.OurService{ background-color: #000; padding: 80px 0;}
.OurServiceBox{ width: auto; max-width: 1160px; margin: auto; overflow: auto; }
.OurServiceBox .OurServiceHeader{ margin-bottom: 30px;}
.OurServiceBox .OurServiceHeader .Ideas{ font-family: 'Kanit', sans-serif; color: #fff; display: block; font-size: 20px; margin: 0; padding: 0;}
.OurServiceBox .OurServiceHeader h2{ font-family: 'Kanit', sans-serif; color: #31b3f6; font-size: 50px; line-height: 55px; font-weight: 600; margin: 0; padding: 0; }
.OurServiceBox .OurServiceHeader .Descriptions{ color: #fff; font-size: 18px; padding: 0; margin-top: 10px;}
.OurServiceBox .OurServiceHeader .Descriptions span{ display: block; }
.OurServiceBoxList{ display: flex; justify-content: center; align-items: top; margin-top: 60px;}
.OurServiceBoxList .ServiceList{ width: 32%; overflow: auto; margin-right: 2%; }
.OurServiceBoxList .ServiceList:nth-child(3){ margin-right: 0%; }
.OurServiceBoxList .ServiceList .ServiceIcon{ width: 80px; height: auto;}
.OurServiceBoxList .ServiceList h3{ font-family: 'Kanit', sans-serif; color: #31b3f6; font-size: 25px; font-weight: bold;}
.OurServiceBoxList .ServiceList ul{ margin: 0; padding: 0; border-left: 2px solid #31b3f6; margin-top: 10px;}
.OurServiceBoxList .ServiceList ul li{ list-style-type: disc; margin: 3px 0 3px 25px; text-indent: -2px; color: #fff; text-transform: uppercase; }

/* OurWork */
.OurWork{ background-color: #31b3f6; padding: 0;}
.OurWork ul{ margin: 0; padding: 0; list-style: none;}
.OurWork ul li{ background-color: #74c1e9; display: block; width: 33.33%; min-height: 400px; overflow: hidden; height:100%; float: left; position: relative; transition: all .3s; }
.OurWork ul li a{ display: block;}
.OurWork ul li .Detail{ position: absolute; width: 100%; height: 100%; top: 400px; opacity: 0; transition: all .3s; }
.OurWork ul li:hover .Detail{ display: table; top: 0; opacity: 1; }
.OurWork ul li:hover .Detail .Inner{ display: table-cell; text-align: center; vertical-align: middle; color: #fff; position: relative; padding: 30px 50px; background: rgba(0, 0, 0, 0.6); }
.OurWork ul li:hover .Detail .Inner h3{ font-size: 30px;}
.OurWork ul li:hover .Detail .Inner p{ font-size: 16px;}
.OurWork ul li:first-child .DetailFirst{ position: absolute; width: 100%; height: 100%; bottom: 0; display: table;}
.OurWork ul li:first-child .DetailFirst h2{ display: table-cell; text-align: center; vertical-align: middle; font-family: 'Kanit', sans-serif; color: #fff; font-size: 50px; line-height: 55px; font-weight: 600; margin: 0; padding: 0; }
.OurWork ul li:first-child .DetailFirst h2 span{ color: #000; display: block; }
.OurWork ul li:nth-child(odd){ background-color: #31b3f6; }
.OurWork ul li:nth-last-child(-n+2){ background-color: #02547f; width: 50%; }
.OurWork ul li:nth-last-child(-n+1){ background-color: #1483bc; width: 50%; }
.OurWork ul li:nth-last-child(-n+2):hover .Inner h3{ max-width: 480px; margin: auto;}
.OurWork ul li:nth-last-child(-n+2):hover .Inner p{ max-width: 480px; margin: auto;}

.OurWork ul li:nth-last-child(-n+1):hover .Inner h3{ max-width: 480px; margin: auto;}
.OurWork ul li:nth-last-child(-n+1):hover .Inner p{ max-width: 480px; margin: auto;}

/* OurHappyClient */
.OurHappyClient{ background-color: #000; padding: 80px 0;}
.OurHappyClientBox{ width: auto; max-width: 1160px; margin: auto; overflow: auto; display: flex; justify-content: center; align-items: top; }
.OurHappyClientBox .LeftContent{ width: 30%; overflow: auto;}
.OurHappyClientBox .LeftContent .Content{ padding-right: 60px; }
.OurHappyClientBox .LeftContent .Content h2{ font-family: 'Kanit', sans-serif; color: #fff; font-size: 50px; line-height: 55px; font-weight: 600; margin: 0; padding: 0; }
.OurHappyClientBox .LeftContent .Content h2 span{ color: #31b3f6; display: block;}
.OurHappyClientBox .LeftContent .Content .Descriptions{ color: #fff; font-size: 18px; font-weight: 300; margin: 0; margin-top: 10px; }
.OurHappyClientBox .RightLogo{ width: 70%; overflow: hidden; padding: 40px; margin-top: 10px; background-color: #fff; }
.OurHappyClientBox .RightLogo ul{ margin: 0; padding: 0;}
.OurHappyClientBox .RightLogo ul li { width: 23%; height: 120px; float: left; margin: 1%; display: table; text-align: center; vertical-align: middle; }
.OurHappyClientBox .RightLogo ul.type2 li { width: calc((100% / 6) - 2%); height: 120px;margin: 1%; }
.OurHappyClientBox .RightLogo ul li p{ display: table-cell; text-align: center; vertical-align: middle; }
.OurHappyClientBox .RightLogo ul li img{ display: block; margin: auto; width: auto; max-width: 100%; height: auto; max-height: 110px; }

/* OurTeam */
.OurTeam{ width: auto; padding-top: 50px; background-color: #f3f4f8; }
.OurTeam .OurTeamBox{ max-width: 1160px; height: auto; margin: auto; overflow: auto; }
.OurTeam .OurTeamBox h2{ font-family: 'Kanit', sans-serif; color: #31b3f6; font-size: 50px; font-weight: 600; margin: 0; padding: 0; }
.OurTeam .OurTeamBox h2 span{ color: #000;}
.OurTeam .OurTeamPic{ width: auto; }
.OurTeam .OurTeamPic img{ width: auto; max-width: 100%; height: auto; }

/* container_Blog */
.container_Blog { max-width: 1160px;  margin: 0 auto; }
.container_Blog > div { height: auto; }
.container_Blog > div > ul { width: 100%; margin: 0; padding: 0; }
.container_Blog > div > ul > li {  list-style-type: none; width: calc(((100vw - 100%) / 2) + 100%); box-sizing: border-box; }
/* BlogBox */
.BlogBox{ width: auto; margin: auto; overflow: auto; display: flex; justify-content: center; align-items: center; }
.BlogBox .LeftContent{ width: 38%; overflow: auto;}
.BlogBox .LeftContent .Content{ max-width: 350px; }
.BlogBox .LeftContent .Content h2{ font-family: 'Kanit', sans-serif; color: #31b3f6; font-size: 50px; font-weight: 600; margin: 0; padding: 0; }
.BlogBox .LeftContent .Content .Descriptions{ color: #5e5e5e; font-size: 18px; font-weight: 300; margin: 0; }
.BlogBox .LeftContent .Content a{ font-family: 'Kanit', sans-serif; display: inline-block; margin-top: 5px; padding: 5px 20px; color: #31b3f6; border: 1px solid #31b3f6; border-radius: 10px; }
.BlogBox .LeftContent .Content a:hover{ background-color: #31b3f6; color: #fff;}
.BlogBox .RightPicture{ width: 62%; overflow: hidden; height: 600px; }
.BlogBox .RightPicture img{ display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: cover; }

/* Footer */
footer{ background-color: #000; color: #fff; padding: 80px 0 20px 0; overflow: auto; font-family: 'Kanit', sans-serif; }
footer .FooterBox{ max-width: 1160px; height: auto; margin: auto; overflow: auto; }
footer .FooterBox .FooterCompany{ margin-bottom: 20px; overflow: auto;}
footer .FooterBox .FooterCompany p{ margin: 0; padding: 0;}
footer .FooterBox .FooterCompany .Title{ font-size: 50px; font-weight: 600; margin-bottom: 10px;}
footer .FooterBox .FooterCompany .Company{ font-size: 38px; font-weight: 500; color: #31b3f6;}
footer .FooterBox .FooterCompany .Name{ font-size: 20px;}
footer .FooterBox a{ color: #fff;}
footer .FooterBox a:hover{ color: #31b3f6;}
footer .FooterBox p{ margin: 0; padding: 0;}
footer .FooterBox .FooterNav{ display: flex; justify-content: center; align-items: top; font-size: 16px; }
footer .FooterBox .FooterNav .Address{ width: 40%; padding:  20px 50px 20px 30px; }
footer .FooterBox .FooterNav .AddressIcon{ position: relative; padding-left: 10px;}
footer .FooterBox .FooterNav .AddressIcon:before{ position: absolute; width: 30px; height: 30px; content: ''; left: -30px; top: -3px; background-image: url("../images/address-icon.png"); background-repeat: no-repeat; background-size:contain; background-position: center; }
footer .FooterBox .FooterNav .FacebookTail{ padding: 0; margin-top: 10px; padding-left: 10px;}
footer .FooterBox .FooterNav .FacebookTail img{ width: 30px; height: auto;}
footer .FooterBox .FooterNav .List{ width: 35%; padding: 20px 30px 20px 30px; position: relative; }
footer .FooterBox .FooterNav .List:before{ position: absolute; content: 'OUR SERVICE'; left: 0; font-size: 16px; font-weight: bold; color: #31b3f6;}
footer .FooterBox .FooterNav .List ul { overflow: auto; padding-top: 0px; padding-left: 80px;}
footer .FooterBox .FooterNav .List ul li{ list-style-type: disc; margin: 0 0 0 20px; text-indent: -2px; }
footer .FooterBox .FooterNav .List ul li a{ display: block; padding: 0px;}
footer .FooterBox .FooterNav .EmailTel{ width: 25%; padding: 20px 30px; }
footer .FooterBox .FooterNav .Email{ position: relative; padding-left: 10px; margin-bottom: 20px;}
footer .FooterBox .FooterNav .Email:before{ position: absolute; width: 30px; height: 30px; content: ''; left: -30px; top: -3px; background-image: url("../images/email-icon.png"); background-repeat: no-repeat; background-size:contain; background-position: center; }
footer .FooterBox .FooterNav .Telephone{ position: relative; padding-left: 10px;}
footer .FooterBox .FooterNav .Telephone:before{ position: absolute; width: 30px; height: 30px; content: ''; left: -30px; top: -3px; background-image: url("../images/tel-icon.png"); background-repeat: no-repeat; background-size:contain; background-position: center; }
footer .FooterBox .Copyrights{ text-align: center; font-size: 12px; letter-spacing: 1px; padding-top: 20px; }