/* ------------ *Default ------------- */
@charset "UTF-8";
/* Flex Class */
.fx-column {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.flex-center {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.flex-end {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: flex-end;-ms-flex-align: flex-end;align-items: flex-end;-webkit-box-pack: flex-end;-ms-flex-pack: flex-end;justify-content: flex-end;}
.fx-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.align-start {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.align-center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.align-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.fx-center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.fx {display: -webkit-box;display: -ms-flexbox;display: flex;}
.fx-wrap {-ms-flex-wrap: wrap;flex-wrap: wrap;}
.fxd { justify-content: flex-end;}
/* Flex Class End */ 

/* Reserved Class */
.text-center {text-align: center;}
/* Reserved Class End*/

/* Style Default*/
a, a:hover,button, button:hover, .speed {-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
* {-webkit-box-sizing: border-box;box-sizing: border-box;}
button {border: 0;padding: 0;cursor: pointer;}
* {outline: none;}
/* Style Default End */

/* ---------- *All styles ----------- */

/* Body */

body {
  overflow-x: hidden;
  font-family: ProximaNovaReg;
}

.overflow-y {
  overflow-y: hidden;
}

/* Button */

.main-btn {
  color: #fff;
  border-radius: 5px;
  display: inline-block;
  background: url(../img/other/btn.png) center/cover no-repeat;
}
/*
.main-btn:hover {
  -webkit-box-shadow: 0px 9px 16px 0px rgba(33, 88, 119, 0.55);
          box-shadow: 0px 9px 16px 0px rgba(33, 88, 119, 0.55);
}
*/

.main-btn:hover {
  -webkit-box-shadow: 0px 9px 16px 0px rgba(70, 161, 217, 0.55);
          box-shadow: 0px 9px 16px 0px rgba(70, 161, 217, 0.55);
}


/* Title */

.title {
  line-height: 1;
  margin-bottom: 35px;
}

.title h2 {
  font-size: 48px;
}

.title h2 span {
  color: #46a1d9;
  font-family: ProximaNovaBold;
}

/* ------------ *Header ------------- */

.header {
  z-index: 9;
  padding: 15px 0;
  position: absolute;
  top: 0;left: 0;right: 0;
}

.logo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.logo a,
.logo img {
  display: inherit;
  margin-top: 10px;
}

.nav li {
  margin-left: 50px;
}

.nav a {
  color: #fff;
  font-family: ProximaNovaLight;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav a:hover {
  color: #46a1d9;
}

.nav a:after {
  content: " ";
  margin-left: 10px;
  width: 11px;height: 8px;
  background: url(../img/icons/i-arrow-down.png) no-repeat center;
}

.navbar-toggle,
.close-nav {
  display: none;
  background: none;
  margin-left: 20px;
}

.icon-bar {
  display: block;
  background: #fff;
  position: relative;
  width: 24px;height: 2px;
}

.navbar-toggle .icon-bar+.icon-bar,
.close-nav .icon-bar+.icon-bar {
  margin-top: 6px;
}

.close-nav {
  margin-right: 0;
  position: absolute;
  top: 15px;right: 15px;
}

.close-nav span:first-child {
  top: 8px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.close-nav span:nth-child(2) {
  opacity: 0;
}

.close-nav span:last-child {
  top: -8px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.close-nav:hover {
  opacity: .5;
}

.links {
    margin-bottom: 10px;
}

.links-btn {
  padding: 12px 35px;
}

/* ------------ *Banner ------------- */

.banner {
  padding-top: 210px;
  position: relative;
  background: url(../img/bg/premier.png) 0 0/cover no-repeat;
}

.banner-txt {
  z-index: 1;
  width: 100%;
  max-width: 520px;
  position: relative;
}

.benner-title {
  font-size: 48px;
}

.benner-title span {
  color: #fff;
  font-family: ProximaNovaBold;
}

.banner-txt p {
  font-size: 22px;
  padding-right: 70px;
  margin: 105px 0 45px;
}

.banner-txt p span {
    margin: 15px 0 5px;
    display: inline-block;
    font-size: smaller;
}

.banner-form .field-input {
  width: 281px;
  margin-right: 5px;
}

.field-input input {
  color: #9c9c9c;
  font-size: 18px;
  padding: 0 15px;
  border-radius: 4px;
  background: #f1f1f1;
  width: 100%;height: 63px;
  border: 2px solid #46a1d9;
  font-family: ProximaNovaLight;
  -webkit-box-shadow: 0 3px 10px #46a1d9;
          box-shadow: 0 3px 10px #46a1d9;
}

.form-btn {
  width: 234px;height: 65px;
}

.banner-img {
  position: absolute;
  bottom: -270px;right: 0;
}

/* ------------ *About ------------- */

.about {
  padding: 110px 0 120px;
  text-align: right;
}

.about .box {
  position: relative;
}

.about-txt {
  width: 100%;
  max-width: 480px;
  margin-left: 95px;
}

.about-txt-one {
  font-size: 24px;
}

.about-txt-two {
  font-size: 18px;
  margin: 25px 0 35px;
  font-family: ProximaNovaLight;
}

.about-btn {
  padding: 24px 82px;
}

.btn-play {
  margin-top: -90px;
  width: 193px;height: 193px; 
  background: url(../img/other/play.png) center/contain no-repeat;
}

.btn-play:hover {
  -webkit-transform: scale(.95);
      -ms-transform: scale(.95);
          transform: scale(.95);
}

.about-img {
  position: absolute;
  top: -40px;left: -180px;
}

.about-img:before {
  top: -70px;right: -165px;
  width: 371px;height: 105px;
  background: url(../img/other/about-arrow-top-lf.png) center/contain no-repeat;
}

.about-img:after {
  right: -145px;bottom: -55px;
  width: 208px;height: 62px;
  background: url(../img/other/about-arrow-bot-lf.png) center/contain no-repeat;
}

/* ------------ *Stories ------------- */

.stories {
  padding: 60px 0 20px;
  position: relative;
}

.stories-txt {
  font-size: 24px;
  padding-right: 260px;
}

.stories .row {
  margin-top: 70px;
}

.stories-img {
  min-height: 290px;
  margin-bottom: 40px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.stories-img img {
  width: 85%;
}

.stories-name {
    color: #46a1d9;
    font-size: 18px;
    margin-bottom: 30px;
    font-family: ProximaNovaBold;
    text-align: center;
}

.stories-list {
  padding-left: 23px;
}

.stories-list li:not(:last-child) {
  margin-bottom: 25px;
}

.stories-list li {
  color: #46a1d9;
  font-size: 18px;
  list-style: disc;
  font-family: ProximaNovaLight;
}

.stories-list li p {
  color: #000;
}

.stories-fix-img {
  z-index: -1;
  position: absolute;
  top: -50px;right: 0;
}

/* ------------ *Demo ------------- */

.demo {
  padding: 220px 0 450px;
  background: url(../img/other/demo-fix.png) 100% 120px/contain no-repeat;
}

.demo .container {
  z-index: 1;
  position: relative;
}

.demo-txt {
  font-size: 24px;
  margin-bottom: 55px;
}

.demo-btn {
  padding: 23px 93px;
}

.demo-img img {
  position: absolute;
  top: 0;right: -125px;
  max-width: 558px;
}

/* ------------ *Footer ------------- */

.footer {
  color: #fff;
}

.footer-lebel-1 {
  margin-top: -170px;
  padding: 145px 0 60px;
  background: url(../img/bg/footer.png) 0 0/cover no-repeat;
}

.footer-txt {
  font-size: 24px;
  margin-top: 30px;
  font-family: ProximaNovaBold;
}

.footer-lebel-2 {
  padding: 15px 0;
  background: #383838;
}

.footer-info {
  font-size: 18px;
  font-family: ProximaNovaSemibold;
}

.footer-info a {
  color: #46a1d9;
}

.footer-info a:hover {
  text-decoration: underline;
}

.cosial-item:not(:last-child) {
  margin-right: 60px;
}

.cosial-item {
  width: 41px;height: 34px;
}

a.i-in {
  background: url(../img/icons/i-in.png) center/contain no-repeat;
}

a.i-tw {
  background: url(../img/icons/i-tw.png) center/contain no-repeat;
}

a.i-gm {
  background: url(../img/icons/i-gm.png) center/contain no-repeat;
}

a.i-fb {
  background: url(../img/icons/i-fb.png) center/contain no-repeat;
}

.cosial-item:hover {
  -webkit-transform: scale(0.80);
      -ms-transform: scale(0.80);
          transform: scale(0.80);
}

/* ------------ *Thank ------------- */

.thank {
  position: relative;
}

.thank-level-1 {
  padding: 235px 0 85px;
  background: url(../img/other/thank.png) 0 0/70% no-repeat;
}

.contacts {
  margin-right: 250px;
}

.contacts li:not(:last-child) {
  margin-right: 60px;
}

.contacts li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contacts li:before {
  content: " ";
  margin-right: 15px;
  width: 28px;height: 20px;
}

li.i-tel:before {
  background: url(../img/icons/i-tel.png) no-repeat center;
}

li.i-mail:before {
  background: url(../img/icons/i-mail.png) no-repeat center;
}

.contacts a {
  color: #fff;
  font-size: 18px;
}

.contacts a:hover {
  color: #ffa562;
}

.thank-level-1 h2 {
  color: #46a1d9;
  font-size: 48px;
  font-family: ProximaNovaBold;
}

.thank-link {
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
}

.thank-link a {
  color: #fff;
}

.thank-link a:hover {
  color: #46a1d9;
}

.thank-link span {
  margin: 0 6px;
}

.thank-level-2 {
  z-index: 1;
  padding: 40px 0;
  position: relative;
}

.thank-level-2 h2 {
  color: #46a1d9;
  font-size: 72px;
  font-family: ProximaNovaXbold;
}

.thank-level-2 p {
  font-size: 24px;
  margin-top: 50px;
}

.thank-btn {
  padding: 23px 65px;
  margin-top: 25px;
}

.thank-page .footer-lebel-1 {
  margin-top: 0;
}

.thank-fix-img {
  position: absolute;
}

.thank-img1 {
  right: 0;bottom: 40px;
}

.thank-img2 {
  z-index: -1;
  top: 170px;left: 0;
}

/* =================================== */
/*            Page: System             */
/* =================================== */

/* ------------ *Primary ------------- */

.primary {
  padding: 200px 0 320px;
  background: url(../img/bg/system.png) 0 100%/cover no-repeat;
}

.primary .container {
  position: relative;
}

.primary .benner-title {
  color: #fff;
  font-family: ProximaNovaLight;
}

.primary .benner-title span {
  color: #46a1d9;
  margin-top: 10px;
  display: inline-block;
}

.primary-btn {
  margin-top: 85px;
  padding: 23px 90px;
}

.system-img {
  position: absolute;
  top: -70px;right: -160px;
}

/* ------------ *Setting ------------- */

.setting {
  position: relative;
  padding-top: 140px;
}

.setting-die {
  left: 0;bottom: 0;
  position: absolute;
  background: #f4f4f4;
  width: 53%;height: 245px;
  border-top-right-radius: 240px;
}

.title p {
  font-size: 24px;
  margin-top: 10px;
  font-family: ProximaNovaLight;
}

.setting .row {
  margin-top: 85px;
}

.title-block {
  font-size: 30px;
  margin-bottom: 15px;
}

.title-block span {
  color: #46a1d9;
  font-family: ProximaNovaBold;
}

.setting-box p {
  font-size: 18px;
  font-family: ProximaNovaLight;
}

.setting-list {
  margin: 30px 0 95px;
}

.setting-list li {
  font-size: 18px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.setting-list li:not(:last-child) {
  margin-bottom: 15px;
}

.setting-list li:before {
  content: " ";
  margin-right: 15px;
  width: 26px;height: 20px;
  background: url(../img/icons/i-check.png) center/contain no-repeat;

  -ms-flex-negative: 0;

      flex-shrink: 0;
}

.setting-form-box {
  width: 360px;
  margin: 0 auto;
  text-align: center;
  padding: 70px 30px 50px;
  background: url(../img/other/phone.png) center/cover no-repeat;
}

.setting-form-box h4 {
  color: #46a1d9;
  font-size: 24px;
  font-family: ProximaNovaBold;
}

.setting-form {
  margin-top: 100px;
}

.field-form {
  display: block;
  margin-bottom: 30px;
}

.field-form input {
  border: 0;
  color: #46a1d9;
  padding: 0 10px;
  font-size: 18px;
  width: 100%;height: 46px;
  font-family: ProximaNovaLight;
  border-bottom: 2px solid #e8e8e8;
}

.field-form input::-webkit-input-placeholder {color:#46a1d9;}
.field-form input::-moz-placeholder          {color:#46a1d9;}/* Firefox 19+ */
.field-form input:-moz-placeholder           {color:#46a1d9;}/* Firefox 18- */
.field-form input:-ms-input-placeholder      {color:#46a1d9;}

.setting-btn {
  width: 100%;height: 65px;
}

.subform {
  font-size: 12px;
  margin-top: 20px;
  font-family: ProximaNovaLight;
}

.setting-img {
  z-index: -1;
  position: absolute;
  right: 0;bottom: 0;
}

/* ----------- *About Us ------------- */

.about-us {
  overflow: hidden;
  padding-top: 100px;
  position: relative;
}

.about-us-die {
  position: absolute;
  top: 215px;right: 0;
  background: #f4f4f4;
  width: 57%;height: 220px;
  border-top-left-radius: 110px;
  border-bottom-left-radius: 110px;
}

.about-us .container {
  position: relative;
}

.pc-img {
  position: absolute;
  top: -55px;left: -240px;
}

.about-us .box {
  margin-top: 80px;
  text-align: center;
}

.about-us .play {
  z-index: 1;
  position: relative;
}

.about-us .btn-play {
  margin-top: 0;
}

.about-us .row {
  margin-top: 80px;
  padding-left: 120px;
}

.about-us-item {
  text-align: center;
}

.about-us-title {
  color: #46a1d9;
  font-size: 30px;
  margin-bottom: 30px;
  font-family: ProximaNovaBold;
}

.about-us-txt {
  font-size: 24px;
  font-family: ProximaNovaLight;
}

/* ----------- *Timeline ------------- */

.timeline {
  padding-top: 110px;
}

/* =================================== */
/*               Modal                 */
/* =================================== */

.modal {
  z-index: 99;
  display: none;
  position: fixed;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  top: 0;left: 0;right: 0;bottom: 0;
}

.modal-box {
  background: #fff;
  margin: 50px auto;
  position: relative;
  border-radius: 20px;
  border: 20px solid #000;
  width: 700px;height: 490px;
}

.modal-close {
  background: none;
  position: absolute;
  top: -15px;right: -15px;
  width: 12px;height: 12px;
}

.modal-close svg {
  fill: #fff;
  width: 100%;height: 100%;
}

.modal-close:hover {
  opacity: .5;
}

.modal-video-js {
  height: 100%;
}

.modal-video-js iframe {
  width: 100%;height: 100%;
}

/* ------------ *Default ------------- */
/* ------------ *Default ------------- */
/* ------------ *Default ------------- */
/* ------------ *Default ------------- */
/* --------- *Before::After ---------- */
.about-img:before,
.about-img:after {
  content: " ";
  position: absolute;
}