body{font-family:var(--content);color:var(--color-white); background: var(--color-dark);}
header { padding:20px 0; position:sticky; top:0; z-index: 99;  position: absolute; top: 0; left: 0; right: 0; z-index: 99}
header .center { display:flex; align-items:center; justify-content:space-between }

.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 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: rgb(33,36,48);background: linear-gradient(180deg, rgba(33,36,48,0.5032606792717087) 0%, rgba(33,36,48,1) 100%);}
.slider .overlay:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;}
.slider .overlay .slide-content { max-width:720px }
.slider .overlay .center{display:flex;align-items:center;width:100%;height:100%}
.slider .overlay .slide-content span{font-size:46px;color:var(--color-white);font-weight:700;margin-bottom:10px;display:block;font-family: var(--title);letter-spacing:-0.04em;position:relative;}
.slider .overlay .slide-content small{color:var(--color-white);display:block;font-size:20px;margin-bottom:15px}
.slider .overlay .slide-content p{display:block;width:100%;font-size:18px;color:var(--color-white);font-weight:500}

.hidden-header { height:130px }

.home-about { display:flex; align-items: center;}
.home-about:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background: rgb(23,26,38); background: linear-gradient(90deg, rgba(23,26,38,0) 0%, rgba(23,26,38,1) 50%); }
.home-about .image { width:50%; overflow: hidden;}
.home-about .image img { width:100%; }
.home-about .text { width:50%;}
.home-about .text .text-content { max-width:720px; width:100%; position:relative; z-index:99 }

.home-services { position:relative; margin-top:-80px }
.service-box a { display:block; position:relative;border-radius: 6px 6px 0 0;overflow:hidden;}
.service-box .overlay {background: rgb(33,36,48);background: linear-gradient(180deg, rgba(33,36,48,0.5032606792717087) 0%, rgba(33,36,48,1) 100%); position: absolute; top: 0; left:0; right: 0; bottom: 0}
.service-box:hover .overlay {background: rgb(33,36,48);background: linear-gradient(180deg, rgba(33,36,48,0.80) 0%, rgba(33,36,48,1) 100%);}
.service-box .s-content { position:absolute; left:40px; right:40px; bottom:80px }
.service-box .s-content span { font-size:12px; color:var(--color-blue); }
.service-box .s-content h4 { color:var(--color-white);}
.service-box .s-content p { color:var(--color-white); display: none;}
.service-box:hover .s-content p { display:block; }

.quick-info .center { display:flex; align-items:center; }
.quick-info .quick-title { width:30%; }
.quick-info .quick-content { width:70%; display:flex; flex-wrap: wrap;gap:20px}
.quick-info .quick-content .quick-box { width:calc(50% - 20px); padding: 40px 60px;border-radius:6px}
.quick-info .quick-content .quick-box p { font-size:14px }
.quick-info .quick-content .quick-box:nth-child(1) { background:var(--color-blue); }
.quick-info .quick-content .quick-box:nth-child(2) { background:var(--color-pink); }
.quick-info .quick-content .quick-box:nth-child(3) { background:var(--color-green); }
.quick-info .quick-content .quick-box:nth-child(4) { background:var(--color-yellow); }

.blog .center { max-width:960px; }
.blog ul, .page ul, .page ol, .blog-detail .center .middle ol, .blog-detail .center .middle ul { list-style:disc; margin:20px; font-size:14px }

.home-faq { background:var(--color-grey); }
.home-faq .center { display:flex; gap:80px; align-items: center; }
.home-faq .center .faq { width:50%; }
.home-faq .center .app-content { width:50%; }

.faq-ac h3 { font-size: 16px; display: flex; gap:20px; align-items: center; flex-direction: row-reverse;background:var(--color-white);  padding:30px 40px 30px 30px; margin-bottom: 10px; border-radius: 6px; cursor: pointer; font-weight: 600;}
.faq-ac h3:hover, .faq-ac h3.ui-state-active { background:var(--color-main); color:var(--color-white);}
.faq-ac .faq-content { text-align: left; padding:20px 30px 30px 30px; }
.faq-ac .faq-content p { font-size: 14px; }
.faq-ac .faq-content p:last-child { margin-bottom: 0; }
.faq-ac h3 span {}

.app-content { position:relative; text-align: right;}
.app-content img { border-radius:6px }
.app-content a { font-family: var(--title); background:var(--color-main); width:180px; height:180px; border-radius:6px; position:absolute; left:0; display: block; top: 40%; text-align: left; padding: 40px; font-size: 24px; color: var(--color-white); font-weight: 800}
.app-content a:hover { background:var(--color-second); }

.r-box { border-radius: 6px; overflow: hidden;}
.r-ex p { font-size:14px; line-height:18px } 
.r-box span.name { font-size:13px; font-style:italic; color:var(--color-main); }

.b-box .b-ex { padding:30px }
.b-box .b-image img { border-radius:6px }

.fancybox-slide--video .fancybox-content, .fancybox__carousel .fancybox__slide.has-video .fancybox__content { background:transparent !important; outline: none !important} 


footer { background:var(--color-navy); }
footer .f-logo img { margin-bottom:20px }
footer .f-logo small { margin-bottom:20px }

footer h4 { color:var(--color-white); margin-bottom:20px }
footer .f-nav ul { list-style:none; }
footer .f-nav ul li { display:block; padding:4px 0; }
footer .f-nav ul li a { font-size:14px; color:var(--color-blue); }
footer .f-nav ul li a:hover { color:var(--color-white); }

footer .f-social ol { list-style:none; margin-bottom:40px  }
footer .f-social ol li { display:inline-block; }
footer .f-social ol li a { width:42px; height:42px; display:block; text-align:center; line-height:42px; border-radius:42px; background:var(--color-blue); color:var(--color-white); }
footer .f-social ol li a:hover { background:var(--color-second); }

footer .f-address ul { list-style:none; }
footer .f-address ul li { display:block; padding:4px 0 }
footer .f-address ul li a { color:var(--color-white); font-size:14px; }

.gallery .g-box img { object-fit:cover; width:100%; height:20em; }

#cssmenu{position:relative; z-index:99; font-family: var(--nav);}
#cssmenu>ul { display:flex; }
#cssmenu>ul>li { margin: 0 0 0 -4px; }
#cssmenu,#cssmenu ul,#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: 14px; font-weight:700; color:var(--color-nav);padding:0 15px; line-height: 50px; letter-spacing:-0.5px}
#cssmenu>ul>li.active>a, #cssmenu ul li:hover>a { color:var(--color-nav-hover); position: relative;}
#cssmenu #menu-button{display:none;}
#cssmenu > ul > li{ display: inline-block;}
#cssmenu ul ul{position:absolute;left:-9999px; box-shadow: 0 0 40px rgba(0,0,0,.2);text-align: left;background:var(--color-second); padding:12px 0px;;border-radius:6px;}
#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:12px 20px;font-size: 14px; display:block;width:240px;text-decoration:none;color:var(--color-white);font-weight:600;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:50px; color:var(--color-nav); }
#cssmenu .has-sub:hover:before {color:var(--color-white);content: '\f106'; font-family:var(--faw); font-weight: 600;}
#cssmenu .active.has-sub:before {color:var(--color-white); }

.service-image img { object-fit:cover; object-position:center; width:100%; height:100%; max-height:480px; margin-bottom:30px }
.sidebar-content { display:flex; gap:40px}
.sidebar-content .content { width:80% }
.sidebar-content .sidebar { width:20%; }
.side-menu { background:var(--color-navy); border-radius: 6px;}
.side-menu ul { list-style:none; padding:30px 0}
.side-menu ul li a { display:block; padding:15px 30px; font-size:14px; font-family:var(--title); color:var(--color-white); border-bottom:1px solid var(--color-dark); }
.side-menu ul li:last-child a { border-bottom:none; }
.side-menu ul li a:hover, .side-menu ul li.active a { opacity:.7 }

.consult { margin-top:40px; position: sticky; top:60px}
.consult a:before { content:''; background:var(--color-second); top:30%; height:70%; width:100%; left:0; right:0; position:absolute; z-index: -9; border-radius: 6px}
.consult a { display:block; padding: 40px; position: relative;}
.consult:hover a:before { background: var(--color-second);}
.consult a span { font-size:20px; display:block; margin-top: 20px; font-family: var(--title); font-weight: 600; letter-spacing: -0.5px; color: var(--color-white);}
.consult img { display:inline-block; }

.related { background:var(--color-grey); }

.address ul {list-style: none; margin-top: 30px}
.address ul li { display:flex; padding:20px 0; border-bottom:1px solid var(--color-navy); align-items:flex-start; }
.address ul li .icon { width:42px;; font-size:24px; color: var(--color-second); text-align: center;}
.address ul li p span { display:block; font-size:12px; font-weight:600; color:var(--color-second); }
.address ul li p { flex:1;font-size:16px;margin:0 }

.application-page { max-width:720px; margin:0 auto }

.blog-detail .center{display:flex;gap:40px}
.blog-detail .center .left{width:10%}
.blog-detail .share,.blog-detail .related-blog{position:sticky;top:80px;padding-top:80px}
.blog-detail .share>span{display:block;font-weight:600;margin-bottom:15px;font-size:12px}
.blog-detail .center .middle{width:70%}
.blog-detail .center .right{width:20%}

@media only screen and (max-width:1249px) {
    #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:60px;left:10px; right:10px}
    #cssmenu ul{display:none; z-index:9; position: absolute; border-radius: 6px; overflow: hidden;}
    #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(--transparent);}
    #cssmenu>ul>li:last-child>a{border-bottom:none}
    #cssmenu>ul>li { background:var(--color-second); 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; }
    #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:-20px; right:20px; border-radius: 2px;}
    #cssmenu .submenu-button{position:absolute;z-index:10;right:0;top:0;display:block;border-left:1px solid var(--transparent);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(--transparent);}
    #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;}
    .fancybox-content { width:100% !important; height:100% !important; }
    .sidebar-content .content,.sidebar-content .sidebar{width:100%}
    .blog-detail .center{flex-direction:column}
    .blog-detail .center .left,.blog-detail .center .middle,.blog-detail .center .right{width:100%}
    .blog-detail .center .right{padding:20px;background:var(--color-navy);border-radius:3px;margin-top:30px}
    .blog-detail .center{gap:0}
    .blog-detail .share,.blog-detail .related-blog{padding-top:0}

    .slider .slide img { object-fit:cover; width:100%; height:60vh; }
    .slider .overlay .slide-content span { font-size:24px }
    .slider .overlay .slide-content p { font-size:14px }
    .home-services { position:relative; margin-top:0 }
    .slider .overlay .center {align-items: flex-end; padding-bottom: 40px}

    .home-about { flex-direction: column;}
    .home-about:before { display:none; }
    .home-about .image, .home-about .text { width:100% }
    .home-about .text .text-content { padding:30px }
    footer .col-3 { gap:20px }
    .sidebar-content { flex-direction: column;}

    .info-box { margin:15px 0 }
    .info-box a { display:flex; gap:15px; align-items: center;}
    .info-box a img { width:50%; height: 72px}
    .info-box p { display:none; }
    .info-box h4 { font-size:13px }
    .gallery.col-4 {grid-template-columns: repeat(2,1fr);}
    .gallery .g-box img { height:10em }



}