body { padding-top: 50px; line-height: 2; font-size: 14px; color: #464646;}
a,a:hover{ color: #26B3C1;}
ul, li{ margin: 0; padding: 0;}

.show{ display: block;}

.icon{ display: inline-block;}
.icon96{ width: 96px; height: 96px;}
.icon-solution{ background: url(../images/solution@3x.png) no-repeat center center; background-size: contain;}

.navbar{ margin-bottom: 0;}
.navbar-default{ background: #fff; border-color: #fff; box-shadow: 0 1px 1px 0 rgba(68,71,76,0.30);}
.navbar-fixed-top{ border-width: 0;}
.navbar-brand{ padding: 10px 15px;}
.navbar-brand #logo{ display: inline-block; width: 191px; height: 47px; background: url(../images/logo.png?v20251124) no-repeat; background-size: auto 70%;}
.nav>li>a{ padding: 15px 36px; font-size: 18px;}
.navbar-nav{ margin: 0 -15px;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ background-color: #464646; color: #fff;}

.navbar-collapse .nav{ padding: 15px 0;}

.carousel-inner>.item>img{ margin: 0 auto;}
.carousel-inner .imgbox{ min-height: 180px; background-size: cover; background-position: center center;}
.carousel-inner .imgbox:hover{cursor: pointer;}

section{ padding: 30px 0;}
section .text h2{ margin: 40px 0; font-size: 30px; text-align: center;}
section .text h3{ font-size: 20px;}
section .text p{ font-size: 16px; text-indent: 2em;}

#apps{}
#apps h2{ position: relative; top: -40px; margin: 20px 0 40px; height: 96px; line-height: 96px;}
#apps h2 .icon-solution{ position: relative; top: 40px; margin-right: 20px;}
#apps .app { display: flex; justify-content: space-between; flex-wrap: wrap;}
#apps .app .appbox { width: 100%;}
#apps .app a.btn-block{ position: relative; margin: 10px 0; padding: 0 0 30px 0; min-height: 240px; border: none; background-repeat: no-repeat; background-size: cover; font-size: 16px;}
#apps .app a.btn-block#app1{ background: #4A3A16 url(../images/app1bg.png) center center; background-size: 100% auto; }
#apps .app a.btn-block#app2{ background: #3D2647 url(../images/app2bg.png) center center; background-size: 100% auto; }
#apps .app a.btn-block#app3{ background: #3C1513 url(../images/app3bg.png) center center; background-size: 100% auto; }
#apps .app a.btn-block#app4{ background: #1D1D1D url(../images/app4bg.png) center center; background-size: 100% auto; }
	#apps .app a.btn-block#app4 span{ line-height: 1.7;}
#apps .app a.btn-block#app5{ background: #1F2B4D url(../images/app5bg.png) center center; background-size: 100% auto; }
#apps .app a.btn-block#app6{ background: #5B4E57 url(../images/app6bg.png) center center; background-size: 100% auto; }
#apps .app a.btn-block b{ display: block; padding: 16px 0; background: rgba(74,58,22,.6);}
#apps .app a.btn-block#app2 b{ background: rgba(61,38,71,.6);}
#apps .app a.btn-block#app3 b{ background: rgba(60,21,19,.6);}
#apps .app a.btn-block#app4 b{ background: rgba(29,29,29,.6);}
#apps .app a.btn-block#app5 b{ background: rgba(31,43,77,.6);}
#apps .app a.btn-block#app6 b{ background: rgba(91,78,87,.6);}
#apps .app a.btn-block b{ position: relative; border-radius: 4px; z-index: 1;}
#apps .app a.btn-block span{ position: relative; display: block; margin-top: 0; padding: 20px 20px 0; font-size: 12px; line-height: 2; text-align: left; word-wrap: break-word; white-space: normal; z-index: 1;}
#apps .app a.btn-block .glyphicon{ position: absolute; top: inherit; bottom: 10px; left: 0; right: 0; z-index: 1; opacity: .6; font-size: 30px;}
#apps .app a.btn-block:hover .glyphicon{ opacity: 1;}
#apps .app a.btn-block .bg{ position: absolute; top:0; bottom: 0; left: 0; right: 0; display: block; background: #000; border-radius: 4px; opacity: .3; z-index: 0;}
#apps .app a.btn-block:hover .bg{ opacity: .5;}

#apps .app li{ margin-left: 20px; text-align: left; font-size: 13px; cursor: pointer;}
#apps .app li:hover{ text-decoration: underline;}


#solutions{}
.solution{ padding: 40px 0; border-top: 1px solid #ddd;}
.solution .pix{ padding-left: 0; padding-right: 0;}
.solution .pix img{ min-width: 100%;}
.solution .pix img+img{ margin-top: 20px;}
.solution .desc h3{ font-size: 18px; line-height: 30px;}
.solution .desc ul{ margin-bottom: 20px; list-style-type: disc;}
.solution .desc li{ margin-left: 20px; line-height: 2; color: #666;}
.solution .desc li.title{ position: relative; left: -20px; font-size: 18px; font-weight: 700; color: #333; list-style: none;}


#about{ padding-top: 60px 0; border: 1px solid #ddd; border-width: 1px 0;}
#contact .text h2{ text-align: left;}
#contact .text p{ text-indent: 0;}


footer{ padding: 40px 0 80px; background-color: #464646; color: #fff;}
footer p{ font-size: 16px;}

.js-scroll-to-top{ position: fixed; bottom: 10px; right: 10px; padding: 5px 12px; background: #464646; border: none; opacity: .5;}

.modal-dialog{ margin:10% auto;}
.modal-body{ padding: 50px 15px; text-align: center;}
.modal-body .tips{ font-size: 16px;}
.modal-body .tips img { margin: 0 auto;}

.qr-code{ margin-top: 24px; width: 100px; height: 100px;}

@media (min-width: 768px) {
body{padding-top: 80px;}
.navbar-collapse .nav{ padding: 0;}
.navbar-brand{ margin-right: 150px; padding: 17px 15px;}
{ background-size: contain;}
.navbar-brand #logo{ background-size: auto 100%;}
.navbar-collapse.in .nav li a{ border-bottom: none;}
.nav>li>a{ padding: 30px 72px;}
.big{ height: 360px; }
section .text{ padding: 0 50px;}



#apps{ padding: 70px 0 0;}
#apps .app{ margin: 0 auto 20px;}
#apps .app .appbox { width: calc(50% - 10px);}
#apps .app:hover p{ display: block;}
#apps .btn b{ font-size: 28px;}
#apps .app .collapse{ }
#apps .app li{ font-size: 16px;}
#apps .app a.btn-block{ min-height: 240px;}
#apps .app a.btn-block span{ }


#solutions h2{ padding-bottom: 20px;}
.solution{ margin-bottom: 40px;}

#about{ padding: 140px 0;}
#about .text h2{text-align: right;}
#about .text{}

#contact{ padding: 140px 0;}

.solution .pix{ margin-top: 20px;}
.solution .desc{ margin-top: 20px;}
.solution .desc h3{ margin-bottom: 20px; font-size: 20px; line-height: 1.5;}

}

@media (min-width: 992px) {
.carousel-inner .imgbox{ min-height: 780px;}
#apps .app .collapse{ }
#apps .app button{ font-size: 16px;}
#apps .app a.btn-block{ min-height: 360px;}
#contact .text{ position: relative;}
#contact .text img{ position: absolute; right: 5%; top: 42%;}
.modal-body .tips img { max-width: 398px;}
}

@media (min-width: 1200px) {
.container { width: 1368px;}
#apps .app .collapse{ }
#apps .app a.btn-block span{ font-size: 18px;}
.solution .pix img{ max-width: 300px; min-width: 300px;}
.solution .pix img.enlarge{ max-width: 100%; min-width: 100%;}
#contact .text img{ right: 15%;}

}