body{font-family:var(--content);color:var(--color-body);font-weight:400}

header { height:100px; position:fixed; left:0; right:0; top:0; z-index:99; background:var(--color-white); }
header .center { display:flex; gap:30px}
header .center .lang { width: 10%; display:flex; justify-content: flex-end; gap:10px }
header .center .lang .lang-btn>a { line-height:100px; display:block; color:var(--color-nav); font-size:15px; font-weight:600 }
header .center .menu { width:100%; display:flex; align-content:start; }
header .logo { position:relative; padding:10px 25px 30px 25px; width: 140px; height: 140px; background: var(--color-white); border-radius: 140px; z-index: 9}
header .logo a { display:block; width:90px; }
header .logo img {transition: all .2s ease-in-out; }
header .logo:hover img {transform: scale(1.1); }

.our-name { display:flex; gap:80px; align-items: center;}
.our-name .image, .our-name .text { width:50% }

.our-awards { display:flex; gap:80px;}
.our-awards .image { margin-top:20px }
.our-awards .text { width:60% }

.hidden-header {height:140px}

.services-box a { position: relative; display: flex; height: 100%}
.services-box .s-overlay { position:absolute; left:0; right:0; top:0; bottom:0; height:100%; display:flex; align-items:center;    justify-content: space-evenly; }
.services-box .s-overlay .s-content { text-align:center; padding:40px }

.services-box .s-overlay .s-content h2 { color:var(--color-white); font-size:28px }
.services-box .s-overlay .s-content p { color:var(--color-white); visibility: hidden;}
.services-box:hover .s-overlay .s-content p { color:var(--color-white); visibility:visible;}

.services-page .services-box:nth-child(1) .s-overlay { background:rgba(130, 204, 221,.7) ;transition: all .2s ease-in;}
.services-page .services-box:nth-child(2) .s-overlay { background:rgba(60, 99, 130,.7);transition: all .2s ease-in;}
.services-page .services-box:nth-child(3) .s-overlay { background:rgba(56, 173, 169,.7) ;transition: all .2s ease-in;}
.services-page .services-box:nth-child(4) .s-overlay { background:rgba(7, 153, 146,.7) ;transition: all .2s ease-in;}
.services-page .services-box:nth-child(5) .s-overlay { background:rgba(96, 163, 188,.7) ;transition: all .2s ease-in;}
.services-page .services-box:nth-child(6) .s-overlay { background:rgba(130, 204, 221,.7) ;transition: all .2s ease-in;}

.services-page .services-box:nth-child(1):hover .s-overlay { background:rgba(130, 204, 221,.9) }
.services-page .services-box:nth-child(2):hover .s-overlay { background:rgba(60, 99, 130,.9) }
.services-page .services-box:nth-child(3):hover .s-overlay { background:rgba(56, 173, 169,.9) }
.services-page .services-box:nth-child(4):hover .s-overlay { background:rgba(7, 153, 146,.9) }
.services-page .services-box:nth-child(5):hover .s-overlay { background:rgba(96, 163, 188,.9) }
.services-page .services-box:nth-child(6):hover .s-overlay { background:rgba(130, 204, 221,.9) }

.ref-box { display:flex; justify-content:center; padding:30px; border:1px solid var(--color-grey); text-align: center; }
.ref-box h4 { font-size:14px; margin-top:0 }
.ref-box p { font-size:14px }

.ref-list { margin:40px 0;}
.ref-list h2 { font-size:24px }

.owl-carousel .owl-stage{display: flex;}
.s-box {display: flex;flex: 1 0 auto;height: 100%;}

.video{position:relative}
.video a{display:block;position:relative}
.video a:before{display:flex;content:'\f144';font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;font-size:72px;color:#fff;z-index:9;margin:auto;opacity:.8;width:100%;height: 100%;display:flex;align-items:center;justify-content: center;}
.video img { width:100% }

.toggle-content { display:none; }

.sticky { position:sticky; top:20px }

.contact-box .box { padding:30px; border:1px solid var(--color-grey); margin-bottom:10px }
.contact-box .box h2 { font-size:18px }
.contact-box .box p { margin-bottom:0 }
.contact-box .box .icon { font-size:20px; margin-bottom:20px; color: var(--color-nav);}

.blog-box { border-radius:4px; border:1px solid var(--color-grey); overflow:hidden; }
.blog-box .blog-ex { padding:30px }
.blog-box .blog-ex h2 { font-size:20px; margin-bottom:20px }
.blog-box .blog-ex p { font-size:15px }

.slide-d { display:block; }
.slide-m { display:none !important; }

.slider{position:relative;overflow:hidden}
.slider .owl-item.active span{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-name:fadeInDown;animation-delay:.2s}
.slider .owl-item.active p{display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-name:fadeInUp;animation-delay:.6s}
.slider .owl-item.active .btn-w{display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-name:fadeInUp;animation-delay:.6s}
.slider .owl-item.active small{display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-name:fadeInUp;animation-delay:.6s}
.slider .owl-item.active .btn,.slider .owl-item.active .video-btn{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-name:fadeInUp;animation-delay:1s}
.slider .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background: rgba(19,20,21,0);}
.slider .overlay .center{display:flex;align-items:center;width:100%;height:100%}
.slider .overlay span{font-size:100px;line-height:;color:var(--color-white); font-family: 'Promises Gisttela Script', sans-serif;font-weight:300;margin-bottom:10px;display:block;letter-spacing: 5px}
.slider .overlay small{color:#fff;display:block;font-size:20px;margin-bottom:15px}
.slider .overlay p{display:block;width:100%;font-size:22px;color:var(--color-white);font-weight:300}
.slider .slide-content{max-width:720px; margin: 0 auto; text-align:center}
.slider .owl-carousel .owl-nav { margin-top:0 }
.slider .owl-carousel .owl-nav button.owl-prev,.slider .owl-carousel .owl-nav button.owl-next{position:absolute;top:45%;background:#E0E2E4;width:42px;height:42px;color:#154C9D;border-radius:42px;line-height:44px}
.slider .owl-carousel .owl-nav button.owl-next span,.slider .owl-carousel .owl-nav button.owl-prev span{font-size:25px;line-height:25px}
.slider .owl-carousel .owl-nav button.owl-prev{left:30px}
.slider .owl-carousel .owl-nav button.owl-next{right:30px}
.slider .owl-item.active img{width:100%;object-fit:cover;animation:move 30s ease;-ms-animation:move 30s ease;-webkit-animation:move 30s ease;-0-animation:move 30s ease;-moz-animation:move 30s ease}
@-webkit-keyframes move {
0%{-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;-o-transform-origin:center;transform-origin:center;transform:scale(1.0);-ms-transform:scale(1.0);-webkit-transform:scale(1.0);-o-transform:scale(1.0);-moz-transform:scale(1.0)}
100%{transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-moz-transform:scale(1.2)}
}
.slider img { height:100vh }
#cssmenu{position:relative; z-index:9; font-family:var(--nav);}
#cssmenu>ul { display:flex; justify-content:center; text-align: center;}
#cssmenu,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button{list-style:none;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu>ul>li>a {display: block; font-size: 15px; font-weight:600; color:var(--color-nav);padding:0 30px; line-height:100px; letter-spacing:-0.3px;position:relative;}
#cssmenu>ul>li:last-child>a { border-right:none; }
#cssmenu>ul>li.active>a, #cssmenu ul li>a:hover {color:var(--color-nav-hover);position: relative;}
#cssmenu>ul>li.active>a:before, #cssmenu>ul>li:hover>a:before {content:""; position: absolute; bottom: 0; left: 0; right: 0;}
#cssmenu #menu-button{display:none;}
#cssmenu ul ul{position:absolute;left:-9999px; box-shadow: 0 0 40px rgba(0,0,0,.2);text-align: left;background:var(--color-main); padding:12px 0px;}
#cssmenu.align-right ul ul{text-align:right}
#cssmenu li:hover > ul{left:auto}
#cssmenu.align-right li:hover > ul{left:auto;right:0}
#cssmenu ul ul ul{margin-left:100%;top:0;}
#cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%;}
#cssmenu ul ul li a{padding:10px 20px;font-size: 13px; display:block;width:240px;text-decoration:none;color:var(--color-white);font-weight:700;position:relative;}
#cssmenu ul ul li a:hover { background:color:var(--color-main); color:var(--color-white); opacity: .6;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0;}
#cssmenu .has-sub { position: relative;}
#cssmenu .has-sub>a { padding-right: 40px; }
#cssmenu .has-sub:before { content: '\f107'; font-family:var(--faw); font-size: 12px; font-weight: 600; position: absolute; right: 20px; line-height:100px; color:var(--color-nav); }
#cssmenu .has-sub:hover:before {color:var(--color-nav-hover);content: '\f106'; font-family:var(--faw); font-weight: 600;}
#cssmenu .active.has-sub:before {color:var(--color-nav-hover); }

.s-box img {width:auto !important; height: 72px !important}
.s-box h2 { font-size:18px; margin:20px 0 10px 0 }
.s-box p { font-size:14px }
.s-box { background:var(--color-white); box-shadow: 10px 15px 10px 0 rgba(191,180,159,0.10);border-radius: 4px; }
.s-box a {padding:20px; display: block;}

span.arrow {color:var(--color-grey); font-size: 24px}
.s-box:hover span.arrow { color:var(--color-before); }

.home-cfpc .center { background-image:url('../img/kaihbg.png');  padding:80px 80px; border-radius: 4px; background-position:center; background-size:cover; }
.home-cfpc .hcfpc-content { max-width:400px }
.home-cfpc .hcfpc-content h2 { color:var(--color-white); }
.home-cfpc .hcfpc-content h2:before { color:var(--color-white); }

.home-about .image img { width:100%; object-fit:cover; object-position:bottom; }
.home-about .text .text-content { max-width:720px; padding:30px }

.get-in-touch { background:var(--color-grey); }
.get-in-touch .image { text-align:right; }

footer h5 { margin-bottom:20px; font-size:16px }
footer .f-nav ul { list-style:none; }
footer .f-nav ul li { display:block; padding:3px 0 }
footer .f-nav ul li a { font-size:14px }
footer .f-nav ul li a:hover { opacity:.7 }

footer .f-contact { text-align:right; }
footer .f-contact p { font-size:14px }

.ref-content img {filter: grayscale(100%);}
.ref-box:hover .ref-content img {filter: grayscale(0);}

.toggle-btn { display:inline-block; width:32px; height:32px; border-radius:32px; line-height:32px; color:var(--color-main); border:1px solid var(--color-grey); cursor: pointer; margin-top: 10px}
.toggle-btn:hover { border:1px solid var(--color-main); }

footer .f-social ul { list-style:none; display:flex; gap:5px }
footer .f-social ul li a { display:block; width:42px; height:42px; line-height:42px; text-align:center; background:var(--color-silver); }
footer .f-social ul li a:hover { background:var(--color-main); color:var(--color-white); }

.copyright { border-top:1px solid var(--color-silver); }

.breadcrumbs { background:var(--color-silver); text-align:right; }

@media only screen and (max-width:900px) {
    #cssmenu>ul>li.active>a, #cssmenu ul li:hover>a { opacity:1;position: relative;}
    #cssmenu {position: absolute;left: 0;right: 0;width: auto;text-align: left;margin:0;}
    #cssmenu>ul>li>a:hover { background:var(--color-dark);color:var(--color-white)}
    #cssmenu > ul { margin: 0 0 0 0; position: relative;}
    #cssmenu>ul{display:none; z-index:9; position: absolute; top:150px;left:10px; right:10px}
    #cssmenu ul{display:none; z-index:9; position: absolute;}
    #cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
    #cssmenu.align-center > ul,#cssmenu.align-right ul ul{text-align:left;}
    #cssmenu ul li,#cssmenu ul ul li,#cssmenu ul li:hover > ul > li{width:100%;height:auto;}
    #cssmenu > ul > li,#cssmenu.align-center > ul > li,#cssmenu.align-right > ul > li{float:none;display:block;}
    #cssmenu>ul>ul>li>a{font-size:12px;color:var(--color-white);background:none;padding:15px 20px 20px 30px;}
    #cssmenu>ul>li>a { padding:20px !important; color:var(--color-white) !important; display: block; background:color:var(--color-main); font-size: 14px; line-height: normal !important;border-bottom:1px solid var(--color-light);}
    #cssmenu>ul>li:last-child>a{border-bottom:none}
    #cssmenu>ul>li { background:var(--color-main); margin:0 }
    #cssmenu ul ul li a { padding:15px 20px; }
    #cssmenu ul ul { padding: 0 !important }
    #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:var(--color-white); background:var(--color-main)}
    #cssmenu ul ul li > a,#cssmenu ul ul li a {background:var(--color-white)}
    #cssmenu ul ul ul li a{padding-left:40px;}
    #cssmenu ul ul ul ul li a{padding-left:40px;}
    #cssmenu>ul>li { border-right:none; text-align: left;}
    #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;right:auto;width:100%;margin:0;}
    #cssmenu #menu-button{display:block;color:var(--color-main);cursor:pointer;font-size:12px;height:48px; background:var(--color-dark); width: 48px; position: absolute; top:30px; right:20px; border-radius: 2px;}
    #cssmenu .submenu-button{position:absolute;z-index:10;right:0;top:0;display:block;border-left:1px solid var(--color-light);height:55px;width:55px;cursor:pointer;}
    #cssmenu .submenu-button::after{content:'';position:absolute;top:21px;left:26px;display:block;width:1px;height:11px;background:var(--color-white);z-index:99;}
    #cssmenu .submenu-button::before{content:'';position:absolute;left:21px;top:26px;display:block;width:11px;height:1px;background:var(--color-white);z-index:99;}
    #cssmenu ul li a,#cssmenu ul ul li a{width:100%;}
    #cssmenu > ul > li.has-sub > a::after,#cssmenu ul ul li.has-sub > a::after,#menu-line,#cssmenu .submenu-button.submenu-opened:after{display:none;}
    #cssmenu ul ul li a { color: var(--color-white); background:var(--colo-main); }
    #cssmenu ul ul{ border-bottom: none; }
    #cssmenu ul ul li a{border-bottom:1px solid var(--color-light);}
    #menu-button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
    #menu-button:after{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin:auto;position:absolute;top:24px;right:0;left:0;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
    #menu-button:before{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin:auto;-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:17px;right:0;left:0;display:block;height:2px;width:20px;background:#ddd;content:''}
    #menu-button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:22px;border:0;height:2px;width:19px;background:var(--color-white);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
    #menu-button.menu-opened:before{top:22px;background:var(--color-white);width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    #cssmenu .has-sub:before{display: none;}

    .slide-d { display:none !important; }
    .slide-m { display:block !important; }

    .get-in-touch .image { display:none; }
    .home-cfpc .center { padding:30px } 

    .our-name { display:flex; gap:20px; align-items: center;    flex-direction: column;}
    .our-name .image, .our-name .text, .our-awards .image, .our-awards .text { width:100% }
    .our-name, .our-awards { padding:0 !important }
    .our-awards {display:flex; gap:20px; align-items: center;    flex-direction: column;}

    h1 { font-size:34px }
    .services-box .s-overlay .s-content p { font-size:14px }
    .services-box .s-overlay .s-content h2 { font-size:18px }

    .ref-list .col-5 {grid-template-columns: repeat(1, 1fr);}

    .ref-content img { max-width:128px }
    .ref-box { padding:10px }

    footer .col-5 {grid-template-columns: repeat(1, 1fr);}
    footer .f-contact { text-align:center; }
    footer .f-social ul {justify-content: center;}
    .copyright { text-align:center; }

    .f-nav { text-align:center; }

    .f-social { text-align:center; }

    .s-box p { display:none; }
    .s-box a img { display:inline-block !important; }
    .s-box { text-align:center; }
    .s-box a { width:100% }

    header .center .lang { gap:10px; }
    header .center .lang  { margin-right:60px }
}

@media only screen and (max-width:999px) {

}