@import '../fontface/fontface.css';

/*Reset*/
h1,h2,h3,h4,h5,h6,p,ul,ol,li,div { margin:0; padding:0; font-weight:normal; list-style:none; }


/*Stylesheet*/
body { margin:0; padding:0; font-family:Arial; font-size:16px; color:#504f4f; }
input, select, textarea { font-family:Arial; font-size:16px; color:#504f4f; resize:none; }

a { color:#504f4f; text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
a:hover { color:#504f4f; text-decoration:none; outline:none; }
a img { border:none; }

.imghover { opacity:1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.imghover:hover { opacity:0.75; }

.clear { clear:both; }

#wrapper { margin:0; padding:0; }
#container { width:100%; margin:0; padding:0; }
#header { width:100%; margin:0; padding:0; position:fixed; top:0; background:#fff; z-index:10000; }
.header-bg { width:100%; height:10px; margin:0; padding:0; background:url(../images/bg/bg-top.jpg) repeat-x top center; }
.header { width:92%; margin:0 auto; padding:0; }
.headerL { float:left; padding:18px 0 0 0; }
.logo { float:left; width:302px; margin:0; padding:0; }
.logo img { width:100%; height:auto; display:block; }
.slogan { float:left; width:239px; margin:0 0 0 15px; padding:0 0 0 15px; border-left:1px solid #e9e9e9; }
.slogan img { width:100%; height:auto; display:block; }

.headerR { float:right; margin:0; padding:0; }
.mn { float:right; margin:0; padding:0; }
.mn ul { margin:0; padding:0; }
.mn ul li { float:left; margin:0; padding:0; list-style:none; }
.mn ul li a { display:block; margin:0; padding:40px 15px; color:#000; text-transform:uppercase; font-size:20px; line-height:20px; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';  }
.mn ul li a.default { background:#46bc8c; color:#fff; }
.mn ul li a.default:hover { color:#fff; }
.mn ul li a:hover { color:#46bc8c; }
.mn ul li.active a { background:#46bc8c !important; color:#fff !important; }

.content { width:92%; margin:0 auto; padding:30px 0; }

/*Home*/
#Home { margin:0; padding:110px 0 0 0; }
#Home span { color:#000; }
.Banner { width:100%; height:405px; overflow:hidden; background:#efefef; }
.BannerL { float:left; width:60%; height:405px; margin:0; padding:0; }
.BannerL ul li { height:405px; }
.BannerR { float:right; width:40%; height:405px; margin:0; padding:0; }
.BannerR-box { width:100%; height:135px; color:#fff; }
.BannerR-text { width:80%; margin:0; padding:3%; font-size:14px; }
.BannerR-text p { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:20px; line-height:20px; text-transform:uppercase; padding-bottom:10px; }

.Home-txthead { margin:0; padding:0 0 20px 0; }
.Home-txtheadL { float:left; margin:0; padding:0; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:48px; line-height:48px; color:#46bc8c; text-transform:uppercase; }
.Home-txtheadL span { color:#09b1c1; }
.Home-txtheadR { float:right; margin:0; padding:0; }
.Home-txtheadR-mobile { display:none; }

/*Our Service*/
#Our { margin:0; padding:110px 0 120px 0; position:relative; background:url(../images/bg/bg-our.jpg) no-repeat center center; background-size:cover;overflow: hidden;}
.Our-bg-top { position:absolute; width:337pxx; top:-15px; right:0; z-index:9999; text-align:right; }
.Our-bg-btm { position:absolute; width:562p; bottom:-30px; left:2%; z-index:9999; }
.Our-bg-top img, .Our-bg-btm img { width:100%; height:auto; display:block; }
.OurL { float:left; width:35%; margin:0; padding:0 0 150px 0; }
.OurL h1 { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:40px; line-height:40px; color:#46bc8c; text-transform:uppercase; padding-bottom:10px; }
.OurL h1 span { color:#09b1c1; }
.OurL h2 { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:30px; line-height:30px; color:#09b1c1; padding-bottom:10px; }
.OurL ul { margin:0; padding:0 0 20px 0; }
.OurL ul li { margin:0; padding:0 0 10px 45px; background:url(../images/bullet-capsule.png) no-repeat top left; text-align:justify }



.OurR { float:right; width:60%; margin:0; padding:0 0 50px 0; }
.OurR span { color:#09b1c1; font-weight:bold; }
.OurR h1 { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:40px; line-height:40px; color:#46bc8c; text-transform:uppercase; }
.OurR h2 { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:40px; line-height:40px; color:#09b1c1; text-transform:uppercase; padding-bottom:10px; }
.OurR ul { margin:0; padding:0 0 20px 0; }
.OurR ul li { margin:0; padding:0 0 10px 45px; background:url(../images/bullet-capsule.png) no-repeat top left;  text-align:justify }


/*How we work?*/
/* #How { margin:0; padding:110px 0 110px 0; background:url(../images/bg/bg-how.png) center center no-repeat; background-size:contain; } */
#How { margin:0; padding:110px 0 110px 0;}
#How h1 { width:100%; text-align:center; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:48px; line-height:48px; color:#09b1c1; text-transform:uppercase; }
#How h2 { width:100%; text-align:center; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:35px; line-height:48px; color:#09b1c1; text-transform:uppercase; }
#How.no-img {padding: 100px 0; height: 50vh; display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center; -ms-flex-align: center;align-items: center;}

.How-img { max-width:1148px; margin:0 auto; padding:40px 0 0 0; }
.How-img img { width:100%; height:auto; display:block; }

/*Contact Us*/
#Contact { margin:0; padding:160px 0 0 0; background:#09b1c1; color:#fff; }
#Contact a { color:#fff; }
#Contact a:hover { color:#fff; text-decoration:underline; }
.con-logo { width:302px; margin:0; padding:0 0 20px 0; }
.con-logo img { width:100%; height:auto; display:block; }

.con-address { float:left; width:35%; margin:0; padding:0; }
.con-form { float:right; width:60%; margin:0; padding:0; }
.con-form p.txthead { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:30px; line-height:30px; color:#fff; text-transform:uppercase; padding-bottom:20px; }

.txtbox { width:96%; margin:0; padding:8px 2%; color:#fff; font-size:12px; border:1px solid #fff; background:none; }
.formL { float:left; width:49%; margin:0; padding:0; }
.formR { float:right; width:49%; margin:0; padding:0; font-size:12px; }

.btn { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:18px; line-height:18px; background:#0f5380; color:#fff; border:none; padding:8px 10px 5px 10px; text-transform:uppercase; }
.btn:hover { cursor:pointer; color:#08a5b3; }

.con-map { margin:0; width: 60%;}
.btn-map { float:left; margin:0; padding:0 0 10px 0; }
.btn-map ul { margin:0; padding:0; }
.btn-map ul li { float:left; margin:0 10px 0 0; padding:0; }
.btn-map ul li img { margin-top:-6px; }
.btn-map ul li a { display:block; margin:0; padding:15px 20px 10px 20px; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:25px; line-height:25px; color:#fff; border:1px solid #fff; text-transform:uppercase; }
.btn-map ul li a:hover { text-decoration:none !important; }
.btn-map ul li a.default { background:#0f5380; border:1px solid #0f5380; }


.btn-download { position:absolute; top:-40px; right:0; margin:0; padding:0; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:18px; line-height:18px; color:#fff; text-transform:uppercase; }

.content-map { width:100%; margin:0; padding:0; }
.box-map { width:98%; margin:0; padding:1%; box-shadow:1px 1px 5px #888; background:#fff; position:relative; }
.content-map img { width:100%; height:auto; display:block; }

.google-maps { position: relative; padding-bottom: 27.8%; height: 0; overflow: hidden; }
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/*Footer*/
#footer { margin:0; padding:10px 0; background:#e7f7f9; font-size:14px; }
.footer { width:92%; margin:0 auto; padding:0; }
.footerL { float:left; margin:0; padding:0; color:#08a5b3; }
.footerL p.company { font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:20px; line-height:20px; color:#08a5b3; text-transform:uppercase; padding-top:3px; }
.footerR { float:right; margin:0; padding:10px 0 0 0; }
.footer-contact { float:right; margin:0; padding:0; }
.footer-contact ul { margin:0; padding:0; }
.footer-contact ul li { float:left; margin:0; padding:0 0 0 20px; }
.footer-contact ul li a:hover { text-decoration:underline; }
.footer-copy { float:right; margin:0; padding:5px 0 0 0; color:#9a9999; font-size:12px; }
.footer-mobile, .btn-download-mobile { display:none; }

.group-flex {display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;padding-bottom: 200px;}
#cookie { background-color: #f7f7f7;}
#cookie h1 {font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';font-size: 40px;line-height: 40px; margin-bottom: 10px; color: #46bc8c;text-transform: uppercase;}
#cookie h2 {font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';font-size: 30px;line-height: 30px;color: #09b1c1;margin-bottom: 5px;}
#cookie h2.head {font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';font-size: 40px;line-height: 40px; margin-bottom: 10px; color: #46bc8c;text-transform: uppercase;}
#cookie p {line-height: 1.5;margin-bottom: 20px;}
#cookie p.mb-0 {margin-bottom: 0;}
#cookie a:hover {color:#46bc8c;}
#cookie ul {padding-left: 40px;}
#cookie ul li {list-style: disc; margin-bottom: 10px;}
#cookie .line {border-top: 1px solid rgb(185 184 184 / 35%);padding-top: 30px;margin-top: 40px;}
.padding-bg {padding: 180px 0 90px 0;}
#box-footer {width: 100%;background: #e7f7f9;padding: 30px 0 30px 0;color: #504f4f;}
#box-footer a {color: #504f4f;}
#box-footer a:hover {color: #46bc8c;}
#box-footer .row {width: 92%;margin: 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;}
#box-footer .row .left {display: -webkit-box;display: -ms-flexbox;display: flex;}
#box-footer .row .left p {font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';font-size: 20px;line-height: 20px;color: #08a5b3;text-transform: upercase;padding-top: 3px;}
#box-footer .row .left p span {font-size: 14px;font-family: Arial;}
#box-footer .row .left img {margin-right: 10px;}
#box-footer .row .right {margin-left: auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: 14px;}
#box-footer .row .right .icon-group + .icon-group {margin-left: 20px;}
#box-footer .row .right .icon-group img {vertical-align: bottom;}
#box-footer .row .copy-right  {width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-top: 20px;padding-top: 20px;border-top: 1px solid rgb(155 155 155 / 35%)}
#box-footer .row .copy-right span {border-right: 1px solid #c7c7c7;margin: 0 20px;}
#box-footer .row .copy-right p  {font-size: 14px;margin-left: auto;}
#box-footer .row .copy-right a {font-size: 14px;}


/* 1366px */
@media screen and (max-width: 1366px){
.Our-bg-top { width:250px; }
.Our-bg-btm { width:450px; }
#box-footer .row .right {display: block;}
#box-footer .row .right .icon-group + .icon-group {margin: 10px 0 0 0;}
}

/* 1280px */
@media screen and (max-width: 1280x){
.Our-bg-top { width:250px; }
.Our-bg-btm { width:350px; }
.OurL { margin:0; padding:0; }
}

/* 1180 */
@media only screen and (max-width:1180px) {
    .con-map {
        width: 100%;
        padding-top: 40px;
    }
    .group-flex {
        display: block;
    }
    .con-address {
        width: 100%;
        float: unset;
    }
}

/* 1024px */
@media screen and (max-width: 1024px){
.slogan { display:none; }
.BannerR-text p { font-size:18px; line-height:18px; padding-bottom:5px; }

.footerR { padding:5px 0 0 0; }
.footer-contact ul { margin:-2px 0 0 0; }
.footer-contact ul li { float:none; margin:2px 0 0 0; padding:0; }
.footer-copy { display:none; }
.footer-mobile { display:block; width:100%; margin:20px 0 0 0; padding:10px 0 5px 0; text-align:center; color:#9a9999; font-size:12px; border-top:1px solid #ccc; }
}

/* 820 */
@media only screen and (max-width: 820px) {
#box-footer .row {display: block;}   
#box-footer .row .right {display: block;margin-top: 20px;}
#box-footer .row .copy-right {display: block;text-align: center;}
#box-footer .row .copy-right p {margin: 10px 0 0 0;}
}

/* 800px */
@media screen and (max-width: 800px){
.logo { width:250px; }
.slogan { display:none; }
.mn ul li a { padding:42px 10px; color:#000; text-transform:uppercase; font-size:16px; line-height:16px; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';  }
.Home-txthead { padding:0 0 10px 0; }
.Home-txtheadR { display:none; }
.Home-txtheadR-mobile { display:block; padding-top:30px; }

.OurL { float:left; width:100%; margin:0; padding:0; }
.OurR { float:left; width:100%; margin:0; padding:0 0 50px 0; }
}

/* 768 */
@media screen and (max-width: 768px){
    .btn-download-mobile {
        display: block;
        width: 100%;
        float: none;
        margin: 0;
        padding: 22px 0 0 0;
        font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG';
        font-size: 18px;
        line-height: 18px;
        color: #fff;
        text-transform: uppercase;
    }

    .btn-download {
        display: none;
    }
    
}


/* 640px */
@media screen and (max-width: 640px){
.header { width:100%; margin:0; padding:0; }
.headerL { float:none; width:250px; margin:0 auto; padding:18px 0 0 0; }
.headerR { float:none; width:100%; margin:18px 0 0 0; padding:0; }
.mn { float:none; width:100%; }
.mn ul li { float:left; width:25%; margin:0; padding:0; list-style:none; }
.mn ul li a { display:block; width:90%; margin:0; padding:20px 5%; color:#000; text-align:center;}
.padding-bg {padding: 300px 0 65px 0;}

#Home, #Our, #How, #Contact { padding:160px 0 0 0;}

.Banner { height:auto; }
.BannerL { float:none; width:100%; height:405px; margin:0; padding:0; }
.BannerL ul li { height:405px; }
.BannerR { float:none; width:100%; height:405px; margin:0; padding:0; }

.OurR { padding:0 0 200px 0; }

.con-form { float:none; width:100%; margin:40px 0 0 0; padding:0; }

.btn-map { float:none; width:100%; }
.btn-map ul li { float:left; width:48%; margin:0 1%; padding:0; }
.btn-map ul li a { display:block; width:92%; margin:0; padding:4% 4% 2% 4%; font-size:23px; line-height:23px; text-align:center; }
}


@media only screen and (max-width:568px) {
    #How h2 { font-size: 30px; line-height: 40px;}
}
/* 480px */
@media screen and (max-width: 480px){
#Home, #Our, #How, #Contact { padding:248px 0 0 0; }

.mn ul li { float:none; width:100%; margin:0; padding:0; list-style:none; }
.mn ul li a { display:block; width:100%; margin:0; padding:10px 0; color:#000; text-align:center;  }

.BannerL { float:none; width:100%; height:205px; margin:0; padding:0; }
.BannerL ul li { height:205px; }

.formL { float:none; width:100%; margin:0; padding:0; }
.formR { float:none; width:100%; margin:8px 0 0 0; padding:0; font-size:12px; }

.footerL { float:none; width:100%; margin:0; padding:0; }
.footerR { float:none; width:100%; margin:0; padding:10px 0 0 0; }
.footer-contact { float:none; margin:0; padding:0; }
.btn-map ul li a {font-size:18px;}
.btn-map ul li img {margin-top: 0;width: 70%;height: auto;}
}

/* 375px */
@media screen and (max-width: 375px){
.btn-map ul li {width:100%;}
.btn-map ul li+li {margin-top: 8px;}
}

/* 360px */
@media screen and (max-width: 360px){
.Home-txtheadL { float:left; margin:0; padding:0; font-family: 'NPNaipolAllinOne-Bold','NPNaipolAllinOne-BoldSVG'; font-size:36px; line-height:36px; color:#46bc8c; text-transform:uppercase; }

.OurR h1 {  font-size:30px; line-height:30px; }
.OurR h2 { font-size:42px; line-height:38px; padding-bottom:10px; }

.btn-map ul li { float:left; width:100%; margin:1% 0; padding:0; }

.Our-bg-top { width:100%; }
.Our-bg-btm { width:100%; }
}

/* 320px */
@media screen and (max-width: 320px){
.BannerR-text { font-size:12px; }
}