/*
  *Project: AXM-Official-Web;
  *Based: Bootstrap4.0
  *Author: AXM-SPS;
*/


/* General */

html, body {
  min-height: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Roboto', sans-serif;
  color: #fff;
}
h1 {
  color: #fff;
}
h2 {
  font-size: 1.5rem;
}
button:focus {
  outline: none;
}
section {
  padding: 4rem 0;
}
.section-title h1 {
  font-size: 2rem;
}
.section-title.otherwise h1 {
  color: #3d506f;
}
a {
  color: #546279;
}

/* page-1 */

header {
  background: #fff;
  color: #aaa;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.navbar {
  padding: 0;
}
.navbar .navbar-brand {
  padding: 0;
  line-height: 4rem;
  margin-right: 0;
}
ul.navbar-nav {
  float: right;
  margin: 0;
  padding: 0;
}
ul.navbar-nav li {
  list-style: none;
  float: left;
  display: inline-block;
  margin-right: 1rem;
}
.page-1 {
  background: #546279 url('../images/page1-bg.jpg') no-repeat center/cover;
  position: relative;
  text-align: center;
}
.logo-box {
  font-size: 2rem;
  max-width: 10rem;
}
.logo-box img, .axm-robots img {
  width: 100%;
}
.share-img {
  width: 320px;
  height: 320px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
}
.main-content {
  margin-top: 2rem;
}
.logo-img {
  max-width: 16rem;
  margin-bottom: 2rem;
}
ul.navbar li a {
  line-height: 4rem;
}
ul.navbar li a:hover, ul.navbar li a:active {
  font-weight: bold;
}
.navbar-header {
  float: right;
  margin-top: 13px;
}
.navbar-toggle {
  width: 50px;
  height: 38px;
  background: transparent;
  border: none;
}
.navbar-toggle .icon-bar {
  background: #546279;
  height: 4px;
  width: 100%;
  display: block;
  margin-bottom: 5px;
  line-height: 38px;
}
.navbar-toggle .material-icons {
  display: none;
}
.navigation-is-open .navbar-toggle .icon-bar {
  display: none;
}
.navigation-is-open .navbar-toggle .material-icons {
  display: inline-block;
  font-weight: bold;
  font-size: 2rem;
}
.slogan-box {
  padding: 5rem 1rem;
  text-shadow: 1px 10px 10px rgba(0, 0, 0, 0.2);
  color: #596b79;
  font-size: 1.25rem;
  background: rgba(29, 38, 58, 0.8);
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
}
.slogan-container {
  width: 50%;
  margin: 2rem auto;
}
.slogan-cn {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 1rem;
}
.slogan-en {
  font-size: 1.3rem;
  color: #fff;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #fff;
  text-align: center;
}
.intro {
  text-align: center;
  font-size: 1rem;
  color: #aaa;
}
.navbar-toggle-btn {
  display: inline-block;
}
.mobile-navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #1d263a;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.7s;
  -moz-transition: visibility 0s 0.7s;
  transition: visibility 0s 0.7s;
}
.mobile-navbar ul {
  height: 100%;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4rem 0 0;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.mobile-navbar ul li {
  list-style: none;
}
.mobile-navbar ul li a {
  line-height: 4rem;
  color: #fff;
  display: block;
}
.mobile-navbar ul li a:hover, .mobile-navbar ul li a:active {
  background: #3d506f;
}
.navigation-is-open .mobile-navbar {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.navigation-is-open .mobile-navbar ul {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}

/* page-2 */

#page-2 {
  background: #fff;
  color: #3d506f;
}
.page-title {
  text-align: center;
  margin-bottom: 6rem;
}
.page-title span {
  color: #3d506f;
  padding: 2rem 0;
}
.axmtec .item {
  padding: 1rem;
  min-height: 24rem;
  margin-bottom: 1rem;
  text-align: center;
}
.section-title {
  font-size: 1.625rem;
  padding: 1rem 0;
  text-align: center;
  color: #3d506f;
  margin-bottom: 2rem;
}
.axmtec .item p {
  color: #3d506f;
}
.cooperation {
  text-align: center;
  padding: 3rem 0;
}
.cooperation-logo {
  margin: 2rem 0;
}
.axmtec .icon-box {
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  background: #3d506f;
  text-align: center;
  margin-bottom: 1.5rem;
}
.axmtec .icon-box .material-icons {
  color: #fff;
  line-height: 6rem;
  font-size: 2rem;
}
.axmtec .section-title {
  font-size: 1.5rem;
  padding: 1rem 0;
}
.axmtec .section-title .brief-intro {
  text-align: center;
  margin-top: 1rem;
}
.axmtec .section-title .brief-intro span {
  display: inline-block;
  font-size: 0.815rem;
  width: 50%;
  border-top: 1px solid #3d506f;
  padding: 1rem 0;
}

/* page-3 */

#page-3 {
  background: #1d263a;
  text-align: center;
}
.pepper-box img {
  width: 100%;
}
.pepper-function {
  padding: 2rem 1rem;
}
.pepper-function .function-category {}
.pepper-function .function-category .function-info {
  margin-bottom: 2rem;
  border-bottom: 1px solid #fff;
  display: inline-block;
}
.pepper-function .function-category .item {
  padding: 0.5rem;
  margin-bottom: 1rem;
  display: inline-block;
  transition: all 0.3s ease-in-out 0s;
  font-size: 0.815rem;
}
.pepper-function .function-category h2 {
  margin: 1rem 0;
  font-size: 1.5rem;
}
.pepper-function .function-category .material-icons {
  font-size: 2rem;
}
.pepper-function .function-category .item:hover .material-icons {
  transform: scale(1.4) translate3d(0, 0px, 0);
}

/* page-4 */

#page-4 {
  color: #333;
  background: #fff;
}
.axm-solutions .scenes {
  float: left;
  text-align: center;
}
.solutions-scenes .scenes {
  background: #fff;
  width: 100%;
  margin-bottom: 2rem;
  color: #fff;
}
.solutions-scenes .scenes-img-box {
  width: 100%;
  background: #546279;
}
.solutions-scenes .scenes-img-box img {
  width: 100%;
}
.solutions-scenes .scenes-info-box {
  background: #1d263a;
}
.solutions-scenes .scenes-name {
  padding: 0.5rem 0;
}
.solutions-scenes .scenes-name span {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0 1rem;
}
.solutions-scenes .scenes-content {
  font-size: 1rem;
  overflow: hidden;
  padding: 0.5rem 0;
  margin: 0 2rem;
  border-top: 1px solid #fff;
}
.solutions-scenes .scenes-content li {
  display: inline-block;
  margin: 0 1rem;
  list-style: none;
}
.solutions-progress .progress-box img {
  max-width: 40rem;
}

/* page-6 */

.application-cases {
  margin-top: 2rem;
}
.application-cases .case-box {
  background: #fff;
  color: #333;
  padding: 0 3rem;
}
.application-cases .case-box .image-box {
  overflow: hidden;
  text-align: center;
}
.application-cases .case-box .image-box img {
  width: 100%;
}
.application-cases .case-box h2 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
.application-cases .case-box h3 {
  font-size: 1rem;
  border-left: 3px solid #ff6f00;
  padding: 0 0.5rem;
}
.finance-branch .case-box {
  height: 24rem;
}
.finance-branch .case-box .image-box {
  padding: 0.5rem 1rem;
}
.finance-branch .case-box .image-box img {
  max-width: 10rem;
}
.others-banks-cases {
  width: 100%;
}
.others-banks-cases> h2 {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}
.others-banks-cases .case-box {
  height: auto;
}
.public-service .case-box {
  background: transparent;
  border: none;
}
.public-service .case-box .image-box {
  padding: 0.5rem 2rem;
  text-align: left;
}
.public-service .case-box .image-box img {
  max-width: 20rem;
}
.public-service .case-box .content-box img {
  width: 80%;
}

/* page-6 */

#page-6 {
  background: #1d263a;
  min-height: auto;
}
.pioneers .item {
  text-align: center;
  color: #999;
  overflow: hidden;
  margin-bottom: 2rem;
}
.pioneers .item .pioneers-img {
  max-width: 232px;
}
.pioneers .item h2 {
  padding: 1rem 0;
  color: #fff;
  height: 5rem;
}

/* page-7 */

#page-7 {
  background: #f5f5f5;
  text-align: center;
}
.team-composition> div {
  text-align: center;
}
.our-team .team-composition {
  margin-bottom: 2rem;
}
.our-team .portrait-box {
  width: 6rem;
  height: 6rem;
  display: inline-block;
  border-radius: 100%;
  padding: 0;
  overflow: hidden;
  text-align: center;
  border: 3px solid #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.our-team .portrait-box img {
  width: 100%;
}
.team-composition .intro-box {
  background: #1d263a;
  color: #7f90a5;
  padding: 2rem;
}
.team-composition .intro-box p {
  margin-bottom: 0.5rem;
  padding: 0 3rem;
}
.our-team .intro .title {
  font-weight: bold;
  font-size: 1.5rem;
}
.our-team .name, .our-team .position {
  font-size: 1.2rem;
  color: #3d506f;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.our-team .intro {
  color: #3d506f;
}
.our-team .team-members {
  padding: 1rem;
}
.our-team .team-members .portrait-box-small {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  display: inline-block;
  margin: 0.5rem;
}

/* page-8 */

#page-8 {
  padding-bottom: 0;
  min-height: auto;
  background: #1d263a;
}
.contact-us {
  color: #fff;
  text-align: center;
  position: relative !important;
}
.contact-us .section-title h1 {}
.contact-us .container {
  padding: 2rem 1rem;
}
.contact-us .item {
  margin-bottom: 2rem;
}
.contact-us .item .title {
  font-size: 1.25rem;
  font-weight: bold;
}
.contact-us .item a {
  color: #fff;
}
.contact-us .icon-box {
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  background: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
}
.contact-us .icon-box .material-icons {
  color: #1d263a;
  line-height: 6rem;
  font-size: 2rem;
}
.contact-us .icon-box .fa {
  color: #1d263a;
  line-height: 6rem;
  font-size: 2rem;
}
.contact-us .icon-box img {
  line-height: 6rem;
  margin-top: 2rem;
}
.contact-us .contact-info {
  text-align: left;
}
.contact-us input {
  border: 1px solid #fff;
  background: transparent;
  color: #f5f5f5;
  padding: 0.5rem 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}
.contact-us textarea {
  width: 100%;
  background: transparent;
  border: 1px solid #fff;
  padding: 1rem 1.5rem;
}
.submit-btn {
  padding: 1rem 3rem;
  background: #fff;
  border: none;
  color: #3d506f;
}
.contact-us .submit-btn {
  margin-top: 2rem;
  font-weight: bold;
  float: right;
}
.contact-us footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  paddingpx: 1rem 0;
  padding: 15px 0;
}
.contact-us footer .copyright {
  text-align: center;
  margin: 0;
  font-size: 0.815rem;
  color: #fff;
}
#qrModal {
  color: #546279;
  text-align: center;
}
.modal-dialog {
  margin: auto;
  margin-top: 10%;
}
.modal-body img {
  max-width: 100%;
}
.modal-header h4 {
  font-size: 1.2rem;
}
.modal-footer {
  text-align: center;
  border-top: none;
  font-size: 0.815rem;
}
@media(min-width:74.9em) {
  .section {
    min-height: 800px;
  }
  .axmtec .section-title {
    margin-bottom: 0;
  }
}

/* Large devices (desktops, less than 75em) */

@media (max-width: 74.9em) {
  #page-1 {
    padding: 0;
  }
  .slogan-box {
    position: static;
  }
  .slogan-cn {
    font-size: 3rem;
  }
  .slogan-en {
    font-size: 1.5rem;
    margin: 1rem 0;
  }
  .axmtec .item {
    min-height: 28rem;
  }
  .axmtec .section-title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
}

/* Medium devices (tablets, less than 62em) */

@media (max-width: 61.9em) {
  header .container {
    width: 100%;
  }
  .logo-box {
    margin: 0 auto;
    text-align: left;
  }
  .logo-box img {
    max-width: 10rem;
  }
  .slogan-container {
    width: 100%;
  }
  .slogan-cn {
    font-size: 3rem;
  }
  .slogan-en {
    font-size: 1.35rem;
  }
  .axmtec .item {
    min-height: 24rem;
    margin-bottom: 0;
  }
  .application-cases .case-box {
    padding: 1rem;
  }
  .pioneers .item .pioneers-img {
    width: 100%;
  }
  .pioneers .item h2 {
    height: 4rem;
    margin: 1rem 0;
    padding: 0;
  }
  .team-composition .intro-box p {
    padding: 0;
  }
}

/* Small devices (landscape phones, less than 48em) */

@media (max-width: 47.9em) {
  .logo-img {
    max-width: 12rem;
  }
  .axmtec .item {
    min-height: 25rem;
    margin-bottom: 0;
  }
  .logo-box {
    width: 100%;
    margin: 0 auto;
    font-size: 2rem;
    padding: 1rem;
    text-align: left;
  }
  .slogan-box {
    left: 0;
  }
  .slogan-cn {
    font-size: 2rem;
  }
  .slogan-en {
    font-size: 1.25rem;
  }
  .contact-us .item .title {
    font-size: 1rem;
    height: 3rem;
    text-align: center;
  }
}

/* Extra small devices (portrait phones, less than 34em) */

@media (max-width: 33.9em) {
  #page-1 {
    padding: 0;
  }
  .logo-box {
    width: 100%;
    margin: 0 auto;
    font-size: 2rem;
    padding: 0;
    text-align: center;
  }
  .logo-img {
    max-width: 10rem;
  }
  .axm-robots {
    margin-bottom: 2rem;
  }
  .slogan-container {
    width: 80%;
  }
  .slogan-cn {
    font-size: 2rem;
  }
  .slogan-en {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    letter-spacing: 0;
  }
  .page-title {
    margin-bottom: 1rem;
  }
  .page-title {
    padding: 1rem 0;
  }
  .mobile-view .company-intro {
    width: 100%;
    text-align: center;
    padding: 2rem;
  }
  .section-title {
    font-size: 1.2rem;
  }
  .axmtec .item {
    padding: 1rem;
    min-height: auto;
  }
  .pepper-function .function-category h2 {
    font-size: 1.5rem;
  }
  .pepper-function .function-category .material-icons {
    font-size: 1rem;
  }
  .pepper-function .function-category .item {
    padding: 0.5rem;
  }
  .pepper-function .function-category .item p {
    font-size: 0.815rem;
  }
  .solutions-scenes .scenes-content {
    margin: 0;
  }
  .solutions-scenes .scenes {
    background: #fff;
    margin-bottom: 2rem;
    box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.25), -2px 5px 8px rgba(0, 0, 0, 0.25);
  }
  .solutions-scenes .scenes-name span {
    font-size: 1.5rem;
    color: #fff;
    border: none;
    padding: 0;
    background: none;
  }
  .solutions-scenes .scenes-name {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 2rem;
  }
  .solutions-scenes .scenes-content li {
    text-align: center;
    list-style: none;
    margin-right: 0.5rem;
  }
  .application-cases .case-box {
    padding: 1rem;
  }
  .pioneers .item {
    margin-bottom: 2rem;
  }
  .pioneers .item h2 {
    height: 4rem;
    margin: 0;
    padding: 1rem 0;
  }
  .our-team .portrait-box {
    float: none;
  }
  #page-8 {
    min-height: auto;
    padding-bottom: 0;
    text-align: center;
  }
  .contact-us .qr-code {
    max-width: 10rem;
    float: none;
    display: inline-block;
  }
  .contact-us .details {
    float: none;
    margin-top: 2rem;
  }
  .contact-us .contact-info {
    text-align: center;
  }
  .contact-box {
    display: table;
  }
  .contact-info {
    margin-top: 2rem;
    display: table-footer-group;
  }
  #user-message {
    display: table-header-group;
  }
  .contact-us .submit-btn {
    float: none;
  }
  .modal-dialog {
    margin: auto;
    margin-top: 30%;
    width: 90%;
  }
}