/*css*/
html{height:100%;font-size:12px;}
body{font-size:1em;font-family: MyriadPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;background:#fff;min-height:100%;color:#000;}
body, h1, h2, h3, h4, h5, h6, p{margin:0;padding:0;}
textarea,input,select {font-size: inherit;font-weight: inherit;text-decoration: none;font-family: inherit;}
img{margin:0;padding:0;width: 100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
em{font-style: normal;}
a{text-decoration:none; outline:none;}
a:visited,a:hover,a:active{text-decoration:none;}
*{box-sizing:border-box;}
.clearfix,.layout,{zoom:1;}
.clearfix:after,.layout:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
.hidden{display:none;}
.clearfix::after{display:block;clear:both;content:'';}
.layout{max-width: 1170px;margin: 0 auto;}
.fl{float: left;}
.fr{float: right;}
.flex{display: flex;}
.yellow{color: #e5bb59}
.s-reveal {opacity: 0; transform: translate3d(0, 50px, 0); transition: opacity 0.8s, transform 0.8s; } 
.reveal_visible {opacity: 1; transform: translate3d(0, 0, 0); } 
.btn-close{background:url(../images/img_close.png) no-repeat; width:21px; height:21px; cursor:pointer;display: flex;position: absolute;top: 4%;right: 4%;}
.w-100{width: 100%;}

/*Header*/
.header{background: #000;height: 80px;align-items:center;border-bottom: 1px solid #c7c7c7}
.header .logo{width: 60px;height: 80px;display: inline-flex;align-items: center;justify-content: center;}
.header ul > li{float: left;margin: 0 3em;height:80px;display: inline-flex;align-items: center;justify-content: center;position: relative;}
.header ul > li a{font-size: 14px;font-weight: bold;background-image: linear-gradient(to right, #fbf38c, #e5bb59 50%, #fff 50% ); background-size: 200% 100%;position: relative; background-position: -100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;} 
.header ul > li a:before {content: ''; background: #e5bb59; display: block; position: absolute; bottom: -10px; left: 0; width: 0; height: 1px; transition: all 0.3s ease-in-out; } 
.header ul > li a:hover {background-position: 0; } 
.header ul > li a:hover::before {width:100%;}
.nav-wrap .btn-close,.nav-wrap .icon-logo{display: none;}
.banner{position: relative;z-index: 2;width: 30vw;margin: 0 auto;height: 58vw;max-height: 500px;align-items: center;display: flex;}
.banner img{width: 100%;}
.video-bg{position:absolute;top:80px;left:0;bottom:0;right:0;z-index:0;height: 58vw;max-height: 500px}
.video-bg video{width:100%;height:100%;object-fit:cover;filter:brightness(80%);}

.mod-home{/*width:100vw;*/overflow-x:hidden}
.mod-aboutus{background: #000;border-radius: 0 0 20% 20%;position: relative;display: block;width: 100%;text-align: center;color: #fff;padding: 6em 0 6em;}
.mod-aboutus:after{content: "";background: url(../images/bg_aboutus.png)no-repeat center;width: 100%;height: 100%;background-size: 100%;display: block;position: absolute;top: 0;z-index: 0}
.mod-aboutus > *{position: relative;z-index: 1}
.mod-aboutus h1{color: #e5bb59}
.mod-aboutus p{margin: 10px auto}
.mod-aboutus img{width: 15%;margin: 5em auto}

.mod-services{margin:5em auto 0;position: relative;padding-bottom: 8em}
.mod-services .layout{padding: 0 3em}
.mod-services:after{content: "";background: url(../images/bg_service.png)no-repeat -5vw top;width: 100%;height:100%;background-size:cover;display: block;position: absolute;top: 5%;z-index: 0}
.mod-services > *{position: relative;z-index: 1}
.mod-services h1{color: #e5bb59;text-align: center;}
.mod-services .info{width: 100%;padding: 5em 0 5em;position: relative;}
.mod-services .info > div{margin: 10px auto;}
.mod-services .info > div ul{font-size: 20px;}
.mod-services .info > div *{padding: 3px 0;}
.mod-services .info > p{width: 42%;line-height: 1.75;font-size: 20px;padding-top: 3em}
.banner-services{position: relative;width: 50%;position: absolute;right: 0;top: 40px;}
.banner-services img{box-shadow:0 0 25px #8f8f8f21,0 0 50px #8f8f8f21}

.mod-services-more.box-list ul{margin-left:0;}

.box-list{margin-bottom: 3em;width: 100vw;overflow: hidden;}
.box-list > .layout{display: flex;position: relative;padding: 0 3em;}
.box-list  ul{width: 45%;margin: 0 5em;}
.box-list  ul > li{margin: 20px auto;}
.box-list  ul > li > *{padding: 10px 0}
.box-list  ul > li > p {font-size: 20px;line-height: 1.5;}
.banner-phone{width: 400px;position: absolute;left:10%;top: 40px;}

.mod-mobile .layout > div{display: flex;justify-content: end;}
.mod-mobile .layout > div > ul{margin-top: 5em;}
.mod-mobile.box-list ul{margin: 0}
.mod-mobile .slide-item-1 { width: 600px; height: 500px; background: url(../images/img_phone.png) no-repeat ;background-size: 100%;}
.mod-mobile .slide-item-1 > div {background: url(../images/img_phone_m.png) no-repeat;background-size: 46%;position: absolute;width: 100%;height: 100%;left: -11px;top: 25%;z-index: 3;opacity: 0;-webkit-transform: translate(-6px, 40px);-ms-transform: translate(-6px, 40px);transform: translate(-6px, 40px);-webkit-animation-delay: .5s;animation-delay: .5s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.mod-mobile .slide-item-1 .slide2 {left: -21px;top: 23%;z-index: 4;-webkit-animation-delay: 1s;animation-delay: 1s;}
.mod-mobile .slide-item-1 .slide3 {left: -33px;top: 21%;z-index: 5;-webkit-animation-delay: 2s;animation-delay: 2s;}
.mod-mobile .animationStart { -webkit-animation-name: slideItem1; animation-name: slideItem1; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease }
@-webkit-keyframes slideItem1 { 0% {-webkit-transform:translate(20px, 20px);transform:translate(20px, 20px);opacity:0}to { -webkit-transform: translate(0); transform: translate(0); opacity: 1 }}
@keyframes slideItem1 { 0% {-webkit-transform:translate(20px, 20px);transform:translate(20px, 20px);opacity:0}to { -webkit-transform: translate(0); transform: translate(0); opacity: 1 }}

.mod-web{margin: 15em 0 10em;}
.box-laptop{position: absolute; right:0;bottom: 4%; width: 460px;}
.box-laptop .logo{opacity:0;transform: scale(1) rotate(-45deg);opacity: 0;position: absolute;left: 0;top: 5%}
.box-laptop .logo.active {opacity: 1;transition: transform 750ms ease-in-out 0s;transform: scale(1.1) rotate(0deg);transition: all 0.5s ease;-webkit-animation-duration: 1s; animation-duration: 1s;}
.box-laptop .winfo{opacity: 0;position: absolute;left: 0;top:0}
.box-laptop .winfo.active{opacity: 1; transition: all 3s ease;-webkit-animation-duration: 3s; animation-duration: 3s;}

.mod-enquiry{border-radius: 20% 20% 0 0 ;overflow: hidden;background:linear-gradient(to bottom, #011346,#010e34 70%,  #000 100% );padding: 10em 0 5em;}
.mod-enquiry h1{color: #e5bb59;text-align: center;margin-bottom:3em}
.mod-enquiry .layout > div{display: flex;align-items: center;margin: 20px auto;justify-content: space-between;width: 800px;}
.mod-enquiry .layout > div > div > input,
.mod-enquiry .layout > div> div > textarea{font-family: Garamond;border: 0;padding: 20px;letter-spacing: 2px;font-size: 16px;color: #2a343e;border-radius: 5px;resize: none;width: 100%;}
.mod-enquiry .layout > div> div > input:focus,
.mod-enquiry .layout > div> div > textarea:focus{box-shadow: 0 1px 10px rgb(255 255 255 / 80%);outline: 0}
.mod-enquiry .layout > div> div input:nth-child(2){margin-left: 20px;}
.mod-enquiry .layout > div> div > textarea{height: 100px;}
.mod-enquiry .layout > div> div > input::placeholder,
.mod-enquiry .layout > div> div > textarea::placeholder{color: #cacaca;font-size: 16px;font-weight:600}
.mod-enquiry .layout > div a.btn-submit{background: #e5bb59;color: #fff;font-size: 18px;font-weight: 600;height: 50px;width: 20%;margin: 1em auto;display: inline-flex;align-items: center;justify-content: center;border-radius:30px;box-shadow:0px 4px 9px #bfaa79f2}
.mod-enquiry .layout > div a.btn-submit:hover{background: #febf2b;}
.mod-enquiry .form{position: relative;z-index: 1;}

.box-contact{color: #fff;position: relative;z-index: 1;font-size: 16px;margin-top: 10em}
.box-contact .logo{width: 100px;display: inline-flex;align-items: center;justify-content: center;}
.box-contact label{display: inline-flex;padding-right: 0.3em;}
.box-contact span{display: inline-flex;padding-left:0.3em;}
.box-contact .layout > div{align-items: flex-start;width: 100%;}
.box-contact .layout{padding: 0 3em;}

#particles-js {position: absolute; /*width: 100%*/; height: 100%; z-index: 0;justify-content: space-between;}

@media screen and (max-width: 992px) {
	.menu-toggle{position: absolute;left: 15px;height: 80px;display: block;line-height: 1.5;font-weight: bold;cursor: pointer;overflow: hidden;}
	.menu-toggle:before{content: "";background: url(../images/icon_menubar.png)no-repeat center;background-size: 100%;width: 25px;height: 100%;z-index: 2;margin-right: 5px;vertical-align: top;display:inline-block;position: relative;}
	.header .layout{text-align: center;}
	.nav-wrap {position: fixed;z-index: 102;margin: 0;padding: 0 15px;top: 0;bottom: 0;height: 100%;left: -999px;width:315px;min-height: 100vh;background: #000;border-right: 1px solid #c7c7c7;;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;box-shadow: 0 0 10 rgba(0,0,0,.15);transition: all .5s;transition-delay: .1s;}
	.nav-wrap.mobile{display: block;left: 0;}
	.nav-wrap .btn-close,.nav-wrap .icon-logo{display: block;}
	.nav-wrap .icon-logo{width: 40%;display: block;margin: 2em auto;}
	.nav-wrap .btn-close{display: block;top: 1.5%;}
	.header ul{margin-top: 5em}
	.header ul > li{display:block;height: auto;float: none;margin: 3em 0;}
	.header ul > li:hover > a, .header ul > li.active > a{color:#2a343e }
	.header ul > li > a{line-height: 30px;text-align: left;padding: 0;font-size: 20px;}
	.banner{width: 60vw}

	.mod-aboutus{padding:3em 0;border-radius: 0 0 100px 100px; }
	.mod-aboutus img{width: 60%;margin: 3em auto;}
	.mod-aboutus p{font-size: 14px;margin: 10px 20px;line-height: 1.75;}

	.mod-services{margin: 3em 0 0;}
	.mod-services:after{content: "";background: url(../images/bg_service_mobile.png)no-repeat 0 top;width: 100%;height:100%;background-size:cover;display: block;position: absolute;top:5%;z-index: 0}
	.mod-services .info{padding: 3em 0 0}
	.mod-services .info > p{float: none;width: 100%;padding-top: 0;}

	.box-list > .layout{display: block;padding: 0}
	.box-list ul{width: 100%;padding:0 2em;margin:5em 0 0 0}
	.banner-services{position: relative;width: 100vw;top: 0;}
	.mod-mobile .layout > div{display: block;}
	.banner-phone{position: relative;width:100%;left:60px; }
	.mod-mobile .slide-item-1{width: 500px;height: 525px;    margin: 0 auto;position: relative;}
	.mod-mobile .slide-item-1 > div{top: 29%;left: -15px;background-size: 49%;}
	.mod-mobile .slide-item-1 .slide2{top: 27%;left: -25px;}
	.mod-mobile .slide-item-1 .slide3{top: 25%;left: -38px;}
	.mod-mobile .slide-item-1 > div{max-width: 98%;}

	.box-laptop{position: relative;width: 87vw;margin: 0 auto;}
	.mod-web{margin: 5em 0;}

	.mod-enquiry{border-radius:100px 100px 0 0;padding: 5em 2em;}
	.mod-enquiry .layout > div{display: block;}
	.mod-enquiry .layout > div input:nth-child(2){margin-left: 0;margin-top: 20px}
	.mod-enquiry .layout > div{width: 100%;}
	.mod-enquiry .layout > div a{width: 100%;}

	.box-contact{margin-top: 5em;}
	.box-contact .layout{padding: 0;}
	.mod-enquiry h1{margin-bottom: 2em;}
	.box-contact span{padding-left: 1.5em;}
	.box-contact label{width: 120px;}
	.box-contact .logo{margin:0 auto 4em;width: 170px;display: block;}
	.mod-enquiry .layout > div > div{font-size: 18px;line-height: 1.75;margin-top: 2em;}



}
.combine {
	margin-top: 10px;
	width: 100%;
	margin-right: 10px;
}

.errormsg {
	color: red !important;
}

@media (max-width: 504px) {
  .box-contact span{padding-left:0.6em}
  .box-contact label{width:100px;}
}