.main-content .section-title .desc h2, .section-milestones .title, .section-history .title h2, .section-history .block .title-name, .section-country .block-toggle .desc h4 { font-family: "rawline-700", " Arial, sans-serif"; font-weight: normal; font-style: normal; }
:lang(th) .main-content .section-title .desc h2, .main-content .section-title .desc :lang(th) h2, :lang(th) .section-milestones .title, .section-milestones :lang(th) .title, :lang(th) .section-history .title h2, .section-history .title :lang(th) h2, :lang(th) .section-history .block .title-name, .section-history .block :lang(th) .title-name, :lang(th) .section-country .block-toggle .desc h4, .section-country .block-toggle .desc :lang(th) h4 { font-family: "prompt-bold", " Arial, sans-serif"; font-weight: normal; font-style: normal; }

.main-content .section-title { margin-top: 50px; padding-left: 150px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 1198px) { .main-content .section-title { padding-left: inherit; } }
@media (max-width: 992px) { .main-content .section-title { margin-top: 150px; } }
.main-content .section-title .desc { max-width: 950px; padding: 20px 0; }
@media (max-width: 1198px) { .main-content .section-title .desc { max-width: inherit; } }
.main-content .section-title .desc h2 { font-size: 36px; color: #000000; margin: 0; margin-bottom: 20px; }
@media (max-width: 768px) { .main-content .section-title .desc h2 { font-size: 30px; } } 
.main-content .section-title .desc p { font-size: 21px; color: #878A9D; margin: 0; }
@media (max-width: 768px) { .main-content .section-title .desc p { font-size: 16px; } }

.section-milestones { height: 580px; }
.section-milestones .title { font-size: 36px; color: #000000; }
.section-milestones .wrapper { position: relative; margin-top: 170px; }
@media (max-width: 1080px) { .section-milestones .wrapper { margin-top: 20px; } }
.section-milestones .wrapper .center { width: 100%; margin: auto; overflow-x: hidden; overflow-y: hidden; /*
.block-set-1{ .dot2{ .image{  &.active{ opacity: 1; }  } }
}
*/ }
@media (max-width: 1080px) { .section-milestones .wrapper .center .arrow { display: flex; justify-content: flex-end; margin-right: 15px; } }
.section-milestones .wrapper .center .arrow .btn-prev { visibility: hidden; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 3px 0 rgba(90, 97, 105, 0.11), 0 4px 8px 0 rgba(90, 97, 105, 0.12); display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; cursor: pointer; left: 5%; top: 30px; }
@media (max-width: 1750px) { .section-milestones .wrapper .center .arrow .btn-prev { right: 5%; top: 20px; } }
@media (max-width: 1280px) { .section-milestones .wrapper .center .arrow .btn-prev { right: 5%; top: 10px; } }
@media (max-width: 1080px) { .section-milestones .wrapper .center .arrow .btn-prev { position: inherit; width: 35px; height: 30px; background: #B82025; border-radius: inherit; box-shadow: inherit; margin-right: 5px; } }
.section-milestones .wrapper .center .arrow .btn-prev:after { content: ""; width: 0; height: 0; border-top: 10px solid transparent; border-right: 20px solid #B82025; border-bottom: 10px solid transparent; margin-right: 5px; }
@media (max-width: 1080px) { .section-milestones .wrapper .center .arrow .btn-prev:after { border-right: 10px solid #ffffff; } }
.section-milestones .wrapper .center .arrow .btn-prev.active { visibility: inherit; }
.section-milestones .wrapper .center .arrow .btn-next { visibility: hidden; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 3px 0 rgba(90, 97, 105, 0.11), 0 4px 8px 0 rgba(90, 97, 105, 0.12); display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; cursor: pointer; right: 9%; top: 30px; }
@media (max-width: 1750px) { .section-milestones .wrapper .center .arrow .btn-next { right: 5%; top: 18px; } }
@media (max-width: 1280px) { .section-milestones .wrapper .center .arrow .btn-next { right: 5%; top: 7px; } }
@media (max-width: 1080px) { .section-milestones .wrapper .center .arrow .btn-next { position: inherit; width: 35px; height: 30px; border-radius: inherit; background: #B82025; box-shadow: inherit; } }
.section-milestones .wrapper .center .arrow .btn-next:after { content: ""; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid #B82025; border-bottom: 10px solid transparent; margin-left: 5px; }
@media (max-width: 1080px) { .section-milestones .wrapper .center .arrow .btn-next:after { border-left: 10px solid #ffffff; } }
.section-milestones .wrapper .center .arrow .btn-next.active { visibility: inherit; }
.section-milestones .wrapper .center .dd { border-left: 1px solid #E6E6EA; position: absolute; height: 170px; margin-top: -85px; z-index: -1; }
@media (max-width: 1080px) { .section-milestones .wrapper .center .dd { display: none; } }
.section-milestones .wrapper .center .bb { display: none; }
.section-milestones .wrapper .center .bb.active { display: inherit; -webkit-animation: fade 2s; /* Safari 4+ */ -moz-animation: fade 2s; /* Fx 5+ */ -o-animation: fade 2s; /* Opera 12+ */ animation: fade 2s; /* IE 10+, Fx 29+ */ }
@-webkit-keyframes fade { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fade { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fade { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fade { 0% { opacity: 0; }
  100% { opacity: 1; } }
.section-milestones .wrapper .center .dot1, .section-milestones .wrapper .center .dot2, .section-milestones .wrapper .center .dot3, .section-milestones .wrapper .center .dot4, .section-milestones .wrapper .center .dot5 { position: absolute; border-left: 1px solid #878A9D; height: 170px; /*
.content:hover ~ .image{     opacity: 1;  background: #000000; 
}
*/ }
@media (max-width: 1080px) { .section-milestones .wrapper .center .dot1, .section-milestones .wrapper .center .dot2, .section-milestones .wrapper .center .dot3, .section-milestones .wrapper .center .dot4, .section-milestones .wrapper .center .dot5 { position: inherit; border-left: 0; height: inherit; } }
.section-milestones .wrapper .center .dot1:before, .section-milestones .wrapper .center .dot2:before, .section-milestones .wrapper .center .dot3:before, .section-milestones .wrapper .center .dot4:before, .section-milestones .wrapper .center .dot5:before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #B82025; display: inline-block; position: absolute; left: -6px; top: -6px; }
@media (max-width: 1080px) { .section-milestones .wrapper .center .dot1:before, .section-milestones .wrapper .center .dot2:before, .section-milestones .wrapper .center .dot3:before, .section-milestones .wrapper .center .dot4:before, .section-milestones .wrapper .center .dot5:before { display: none; } }
.section-milestones .wrapper .center .dot1 .image, .section-milestones .wrapper .center .dot2 .image, .section-milestones .wrapper .center .dot3 .image, .section-milestones .wrapper .center .dot4 .image, .section-milestones .wrapper .center .dot5 .image { width: 275px; height: 275px; /* margin-left: -50%; */ /* margin-top: -70%; */ position: absolute; right: -137.5px; top: -210px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 1750px) { .section-milestones .wrapper .center .dot1 .image, .section-milestones .wrapper .center .dot2 .image, .section-milestones .wrapper .center .dot3 .image, .section-milestones .wrapper .center .dot4 .image, .section-milestones .wrapper .center .dot5 .image { width: 200px; height: 200px; right: -100px; top: -150px; } }
@media (max-width: 1280px) { .section-milestones .wrapper .center .dot1 .image, .section-milestones .wrapper .center .dot2 .image, .section-milestones .wrapper .center .dot3 .image, .section-milestones .wrapper .center .dot4 .image, .section-milestones .wrapper .center .dot5 .image { width: 150px; height: 150px; right: -75px; top: -110px; } }
@media (max-width: 1080px) { .section-milestones .wrapper .center .dot1 .image, .section-milestones .wrapper .center .dot2 .image, .section-milestones .wrapper .center .dot3 .image, .section-milestones .wrapper .center .dot4 .image, .section-milestones .wrapper .center .dot5 .image { position: inherit; width: inherit; display: none; margin-bottom: 10px; } }
.section-milestones .wrapper .center .dot1 .image img, .section-milestones .wrapper .center .dot2 .image img, .section-milestones .wrapper .center .dot3 .image img, .section-milestones .wrapper .center .dot4 .image img, .section-milestones .wrapper .center .dot5 .image img { width: 100%; height: 100%; }
.section-milestones .wrapper .center .dot1 .content, .section-milestones .wrapper .center .dot2 .content, .section-milestones .wrapper .center .dot3 .content, .section-milestones .wrapper .center .dot4 .content, .section-milestones .wrapper .center .dot5 .content { position: absolute; bottom: 0; padding-left: 15px; width: 290px; cursor: pointer; }
@media (max-width: 1750px) { .section-milestones .wrapper .center .dot1 .content, .section-milestones .wrapper .center .dot2 .content, .section-milestones .wrapper .center .dot3 .content, .section-milestones .wrapper .center .dot4 .content, .section-milestones .wrapper .center .dot5 .content { width: 215px; } }
@media (max-width: 1280px) { .section-milestones .wrapper .center .dot1 .content, .section-milestones .wrapper .center .dot2 .content, .section-milestones .wrapper .center .dot3 .content, .section-milestones .wrapper .center .dot4 .content, .section-milestones .wrapper .center .dot5 .content { width: 180px; } }
@media (max-width: 1080px) { .section-milestones .wrapper .center .dot1 .content, .section-milestones .wrapper .center .dot2 .content, .section-milestones .wrapper .center .dot3 .content, .section-milestones .wrapper .center .dot4 .content, .section-milestones .wrapper .center .dot5 .content { position: inherit; width: inherit; margin-bottom: 10px; } }
.section-milestones .wrapper .center .dot1 .content .year, .section-milestones .wrapper .center .dot2 .content .year, .section-milestones .wrapper .center .dot3 .content .year, .section-milestones .wrapper .center .dot4 .content .year, .section-milestones .wrapper .center .dot5 .content .year { font-size: 21px; color: #B82025; }
.section-milestones .wrapper .center .dot1 .content .desc p, .section-milestones .wrapper .center .dot2 .content .desc p, .section-milestones .wrapper .center .dot3 .content .desc p, .section-milestones .wrapper .center .dot4 .content .desc p, .section-milestones .wrapper .center .dot5 .content .desc p { font-size: 14px; color: #878A9D; margin: 0; }
.section-milestones .wrapper .horizon-prev, .section-milestones .wrapper .horizon-next { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 3px 0 rgba(90, 97, 105, 0.11), 0 4px 8px 0 rgba(90, 97, 105, 0.12); display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; cursor: pointer; }
.section-milestones .wrapper .horizon-next { right: 150px; top: 145px; }
.section-milestones .wrapper .horizon-next:after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #B82025; border-bottom: 5px solid transparent; }
@media (max-width: 1080px) { .section-milestones svg { display: none; } }
.section-milestones svg image { display: none; }
.section-milestones svg text:hover ~ image { display: inherit; }

.section-history { padding-top: 200px; padding-bottom: 100px; padding-left: 150px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 1198px) { .section-history { padding-left: inherit; } }
@media (max-width: 768px) { .section-history { padding: 100px 0; } }
.section-history h1 { text-transform: uppercase; color: #000000; margin-bottom: 50px; }
.section-history .title { padding-bottom: 50px; }
@media (max-width: 768px) { .section-history .title { padding-bottom: 20px; } }
.section-history .title p { font-size: 21px; color: #B82025; letter-spacing: 0; line-height: 33px; margin: 0; margin-bottom: 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 768px) { .section-history .title p { font-size: 16px; } }
.section-history .title h2 { font-size: 60px; color: #000000; letter-spacing: 1.5px; line-height: 40px; margin: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 768px) { .section-history .title h2 { font-size: 30px; } }
.section-history .block .title-name { font-size: 24px; color: #BD0000; letter-spacing: 0; line-height: 38px; margin-bottom: 10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 768px) { .section-history .block .title-name { font-size: 18px; } }
.section-history .block ul li { font-size: 24px; color: #000000; letter-spacing: 0; line-height: 37px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 768px) { .section-history .block ul li { font-size: 16px; line-height: inherit; } }

.section-slider .slider { width: 100%; }
.section-slider .slider .slider-project { margin: 50px 0; /*
@media(max-width: 1080px){ justify-content: center; margin: 20px 0;
}
.image{ @include flex(flex,center,center);
}*/ }
.section-slider .slider .slider-project a { display: inherit; }
.section-slider .slider .slider-project a img { width: 100%; height: 344px; margin-bottom: 5px; object-fit: cover; }
.section-slider .slider .slider-project a p { color: #85889E; text-transform: uppercase; font-size: 14px; text-align: center; height: 60px; }
.section-slider .slider .slideControls { display: flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: flex-end; align-items: center; -webkit-align-items: center; }
@media (max-width: 1080px) { .section-slider .slider .slideControls { justify-content: center; margin-bottom: 40px; } }
.section-slider .slider .slideControls .slidePrev, .section-slider .slider .slideControls .slideNext { background: #FFFFFF; box-shadow: 0 2px 3px 0 rgba(90, 97, 105, 0.11), 0 4px 8px 0 rgba(90, 97, 105, 0.12); border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
.section-slider .slider .slideControls .slidePrev { margin-right: 5px; }
.section-slider .slider .slideControls .slidePrev:hover .triangle-left { border-right: 10px solid #B82025; }
.section-slider .slider .slideControls .slidePrev .triangle-left { width: 0; height: 0; border-top: 5px solid transparent; border-right: 10px solid #878A9D; border-bottom: 5px solid transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.section-slider .slider .slideControls .slideNext:hover .triangle-right { border-left: 10px solid #B82025; }
.section-slider .slider .slideControls .slideNext .triangle-right { width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #878A9D; border-bottom: 5px solid transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.section-country { padding: 150px 0; padding-left: 150px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
@media (max-width: 1198px) { .section-country { padding-left: inherit; } }
.section-country .block-item { display: flex; }
.section-country .block-items { margin-bottom: 150px; }
.section-country .block { max-width: 300px; }
@media (max-width: 992px) { .section-country .block { max-width: inherit; } }
.section-country .block img { margin-bottom: 10px; }
.section-country .block h2 { margin-bottom: 20px; }
.section-country .block a { width: 100%; border-bottom: 1px solid #B82025; font-size: 18px; color: #BD0000; padding-bottom: 20px; position: relative; display: flex; align-items: center; cursor: pointer; }
.section-country .block a.active, .section-country .block a:hover { color: #878A9D; border-bottom: 1px solid #878A9D; }
.section-country .block a.active:before, .section-country .block a:hover:before { background: #878A9D; }
.section-country .block a.active:after, .section-country .block a:hover:after { border-left: 12px solid #878A9D; }
.section-country .block a:before { content: ""; background: #B82025; width: 20px; height: 1px; position: absolute; top: 13px; right: 30px; }
.section-country .block a:after { content: ""; border-top: 0px solid transparent; border-left: 12px solid #B82025; border-bottom: 5px solid transparent; position: absolute; right: 18px; top: 13px; }
.section-country .block-toggle { display: none; padding-top: 30px; }
.section-country .block-toggle .desc h4 { font-size: 18px; color: #000000; margin-bottom: 10px; }
.section-country .block-toggle .desc p, .section-country .block-toggle .desc li { font-size: 14px; color: #878A9D; }

/*# sourceMappingURL=history_page.css.map */