@charset "UTF-8";

@font-face {
font-family: 'thsarabunnewbold';
src: url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew_bold-webfont.woff2) format('woff2'),
url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew_bold-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'thsarabunnewbolditalic';
src: url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew_bolditalic-webfont.woff2) format('woff2'),
url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew_bolditalic-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'thsarabunnewitalic';
src: url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew_italic-webfont.woff2) format('woff2'),
url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew_italic-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'thsarabunnewregular';
src: url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew-webfont.woff2) format('woff2'),
url(//www.netcon.co.th/wp-content/themes/twentytwentyone/assets/fonts/thsarabunnew-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
html{
font-size:77%;
max-width:800px;
background-color:#000000;
margin:auto;
}
@media(min-width:350px){
html{
font-size:92%;
}
}
@media(min-width:450px){
html{
font-size:100%;
}
} .fullw {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
@media(max-width:580px){
.fullw-mobile {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
}
body, #content, .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .widget-area, .widget, .sidebar, #sidebar, footer, .footer, #footer, .site-footer{
font-family:"kanit"!important;
}
button:focus {
outline: unset!important;
}
.aligncontent-middle{
width:fit-content;
margin:auto;
}  .netcon-logo img{
width: 40vw;
}
@media(min-width:500px){
.netcon-logo img{
width: 30vw;
}
}
@media(min-width:991px){
.netcon-logo img{
width: 20vw;
}
}
@media(min-width:1200px){
.netcon-logo img{
width:300px;
}
}  .nav-frame{
background-color:#000000;
position: fixed;
width: 100%;
left: 0;
z-index: 5;
}
@media(min-width:820px){
.nav-frame{
width: 820px;
left: 50%;
transform: translate(-50%, 0px);
}
}
.navbar-nav .nav-link {
font-size: 1.3rem;
}
nav{
background-color:#000000;
padding: 15px 30px!important;
}
.navbar-nav a{
color:#ffffff;
transition:0.35s ease-in-out
}
.navbar-nav a:hover{
color:#017e40;
}
.navbar-nav .nav-item .active{
color:#017e40;
text-decoration:underline;
}
.ct-hamburger-toggle {
display: block;
position: relative;
overflow: hidden;
padding: 0;
width: 32px;
height: 27px;
font-size: 0;
border-radius: none;
border: none;
cursor: pointer;
background-color: unset;
}
.ct-hamburger-toggle.is-active{
z-index:10;
}
.ct-hamburger-toggle .ct-hamburger-toppings {
display: block;
position: absolute;
top: 50%;
left: 0px;
right: 0px;
height: 4px;
background: #ffffff;
transition: all 0s 0.3s;
border-radius: 2px;
}
.ct-hamburger-toggle .ct-hamburger-toppings:after, .ct-hamburger-toggle .ct-hamburger-toppings:before {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
border-radius: 2px;
background-color: #ffffff;
content: "";
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.ct-hamburger-toggle .ct-hamburger-toppings:before {
top: -10px;
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.ct-hamburger-toggle .ct-hamburger-toppings:after {
bottom: -10px;
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
.ct-hamburger-toggle.is-active .ct-hamburger-toppings {
background: 0 0;
border-left: 0;
}
.ct-hamburger-toggle.is-active .ct-hamburger-toppings:before, .ct-hamburger-toggle.is-active .ct-hamburger-toppings:after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}
.ct-hamburger-toggle.is-active .ct-hamburger-toppings:before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ct-hamburger-toggle.is-active .ct-hamburger-toppings:after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ct-hamburger-toggle.is-active .ct-dots {
transition-property: left, opacity;
transition-duration: 0.3s, 0.1s;
transition-delay: 0s, 0.3s;
left: 25px;
opacity: 0;
}
.ct-hamburger-toggle.is-active .ct-dots:before, .ct-hamburger-toggle.is-active .ct-dots:after {
-webkit-transition-delay: 0s, 0.2s;
transition-delay: 0s, 0.2s;
}
.ct-hamburger-toggle.is-active .ct-dots:before {
top: 0;
left: 25px;
}
.ct-hamburger-toggle.is-active .ct-dots:after {
left: 25px;
bottom: 0;
}
.sidenav {
height: 100%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0;
background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.8s ease-out; opacity:0;
pointer-events:none;
}
.sidenav.expand{
opacity:1;
pointer-events:unset;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav .active{
color: #017e40;
text-decoration:underline;
}
.sidenav a:hover{
color:#017e40;
text-decoration:none;
}  .intro{
padding-bottom: 25px;
padding-top: 15px;
text-align:center;
}
.intro h1{
font-family:'thsarabunnewregular', san-serif;
font-size:1.7rem;
color:#077e40;
line-height:1;
margin-bottom:1rem;
}
.intro h1 span{
font-family:'thsarabunnewbold', san-serif;
font-size:1.9rem;
}
.intro h2{
font-family: 'kanit', san-serif;
font-size: 1.1rem;
font-weight: 400;
}  .contact{
text-align:center;
background-color:#f4f2f1;
padding: 25px 0px;
}
.contact h2.contact-headtext{
color:#017e40;
font-size:1.1rem;
margin-bottom:1rem;
}
.contact h2.contact-bottomtext{
margin-bottom:0px;
color:#000000;
font-size:1.1rem;
font-family:"kanit", san-serif;
font-weight:300;
}  .service{
padding: 25px 0px;
}
.service h2{
text-transform:uppercase;
letter-spacing: 3px;
margin-bottom:25px;
font-family:'kanit', san-serif;
}
.service-title{
padding:0px 0px;
margin:auto;
background-color:#017e40;
border-bottom:5px solid #e1e1e1;
}
.service-title h3{
color:#ffffff;
font-weight: 300;
margin-bottom:0px;
}
.service-subtitle{
font-weight: 400;
}
.service-detail{
font-family: 'thsarabunnewregular', san-serif;
font-size: 1.5em;
font-weight: 500;
line-height: 1.1;
}
.service-img-frame-lg{
margin:20px 0px;
}
.service-img-frame-lg img{
width:80px;
height:auto;
}
.service-img-frame{
margin:20px 0px;
}
.service-img-frame img{
width:50px;
height:auto;
}
.border-b{
border-bottom:1px solid #dddddd;
}
.border-r{
border-right:1px solid #dddddd;
}
.mt{
padding-top:20px;
}
@media(max-width:450px){
.service-title h3{
font-size:1.6rem;
}
}  .moreservice-frame{
margin-top:30px;
}
.moreservice-img{
width:100%;
}
.more-service-detail-rackserver img{
width:100%;
height:auto;
}
.more-service-detail-designserver img{
width: 100%;
height:auto;
}
.more-service-detail-wirelessaccess img{
width: 100%;
height:auto;
}
.more-service-detail-construction img{
width: 100%;
height:auto;
}
.more-service-detail{
height:100%;
width:100%;
background-image:url(https://www.netcon.co.th/wp-content/uploads/2021/07/Netcon-service-img-vector-grey-bg.png);
background-position:center center;
background-size:100% 100%;
background-repeat:no-repeat;
background-color:#017e40;
padding: 25px 15px 25px 25px;
color:#ffffff;
}
.more-service-detail-grey{
height:100%;
width:100%;
background-image:url(https://www.netcon.co.th/wp-content/uploads/2021/07/Netcon-service-img-vector-bg.png);
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
background-color:#ebebeb;
padding: 25px 15px 25px 25px;
color:#000000;
}
.more-service-detail-center{
width:fit-content;
margin:auto;
}
.more-service-detail-title{
letter-spacing:3px;
font-family: 'thsarabunnewbold', san-serif;
font-size: 2.3rem;
line-hight:0.7;
}
.more-service-bullet{
font-family: 'thsarabunnewregular', san-serif;
font-size: 1.5rem;
padding-inline-start: 20px;
}  .clients{
padding: 25px 0px;
}
.clients h2{
text-transform:uppercase;
letter-spacing: 3px;
margin-bottom:25px;
font-family:'kanit', san-serif;
}
.clients img{
width:100%;
}  .move-to-top-frame{
padding:15px 10px;
background-color:#000000;
text-align:center;
position:relative;
}
.move-to-top-frame .footer-logo img, .move-to-top-frame .footer-logo source img, .move-to-top-frame .footer-logo picture img{
width:120px;
}
.move-to-top-arrow{
position: absolute;
top: 50%;
right: 0%;
transform: translate(-10vw,-50%);
}
.move-to-top-arrow img, .move-to-top-arrow source img, .move-to-top-arrow picture img{
width: 40px;
}
.footer-contact{
padding:15px 0px;
background-color:#ffffff;
}
.footer-contact h2{
font-family:'thsarabunnewregular', san-serif;
font-size:1.4rem;
line-height:1;
margin-bottom:1rem;
}
.footer-contact h2 span{
font-family:'thsarabunnewbold', san-serif;
font-size:1.6rem;
}
.footer-contact h3{
color:#077e40;
font-family: 'kanit', san-serif;
font-size: 1.1rem;
font-weight: 400;
}
.border-bt{
border-bottom: 1px solid #cccccc;
margin-bottom: 0;
}
.contact-pack{
display:flex;
border-right: 1px solid #cccccc;
}
@media(max-width:768px){
.contact-pack{
border-right: 0px;
}
}
.contact-pack p{
font-size: 1.2rem;
}
.contact-pack img, .contact-pack source img, .contact-pack picture img{
width:30px;
height:auto;
}
.contact-pack, .contact-pack a{
color: #017e40!important;
font-size: 1.4rem;
}
.contact-icon a, .contact-icon a:hover{
color: #017e40!important;
font-size: 1.8rem;
}
.contact-icon:last-child, .contact-icon a:last-child{
font-weight: 500;
}
.contact-qr-code{
text-align:center;
color: #017e40!important;
font-size: 1.1rem;
} @media(max-width:768px){
#particles-background,
#particles-foreground {
display:none;
}
}
@media(min-width:768px){
body .vertical-centered-box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
body .vertical-centered-box:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
body .vertical-centered-box .content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-align: left;
font-size: 0;
}
* {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#particles-background,
#particles-foreground {
position:fixed;
z-index:-1;
left: -51%;
top: -51%;
width: 202%;
height: 202%;
-webkit-transform: scale3d(0.5, 0.5, 1);
-moz-transform: scale3d(0.5, 0.5, 1);
-ms-transform: scale3d(0.5, 0.5, 1);
-o-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
}
lesshat-selector {
-lh-property: 0; } 
@-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
@-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
@-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
@keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
[not-existing] {
zoom: 1;
}
lesshat-selector {
-lh-property: 0; } 
@-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
@-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
@-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
@keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
[not-existing] {
zoom: 1;
}
lesshat-selector {
-lh-property: 0; } 
@-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
@-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
@-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
@keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
[not-existing] {
zoom: 1;
}
}