@CHARSET "utf-8";

   /* Reset CSS
 * --------------------------------------- */
   body,
   div,
   dl,
   dt,
   dd,
   ul,
   ol,
   li,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   pre,
   form,
   fieldset,
   input,
   textarea,
   p,
   blockquote,
   th,
   td {
       padding: 0;
       margin: 0;
   }

   a {
       text-decoration: none;
   }

   table {
       border-spacing: 0;
   }

   fieldset,
   img {
       border: 0;
   }

   address,
   caption,
   cite,
   code,
   dfn,
   em,
   strong,
   th,
   var {
       font-weight: normal;
       font-style: normal;
   }

   strong {
       font-weight: bold;
   }

   ol,
   ul {
       list-style: none;
       margin: 0;
       padding: 0;
   }

   caption,
   th {
       text-align: left;

   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-weight: normal;
       font-size: 100%;
       margin: 0;
       padding: 0;
       color: #444;
   }

   q:before,
   q:after {
       content: '';
   }

   abbr,
   acronym {
       border: 0;
   }


   /* Custom CSS
 * --------------------------------------- */
   body {

       color: #333;
       color: rgba(0, 0, 0, 0.5);
   }

   .wrap {
       margin-left: auto;
       margin-right: auto;
       width: 960px;
       position: relative;
   }



   .section {
       text-align: center;
   }

   #menu li {
       display: inline-block;
       margin: 10px;
       color: #000;
       background: #fff;
       background: rgba(255, 255, 255, 0.5);
       -webkit-border-radius: 10px;
       border-radius: 10px;
   }

   #menu li.active {
       background: #666;
       background: rgba(0, 0, 0, 0.5);
       color: #fff;
   }

   #menu li a {
       text-decoration: none;
       color: #000;
   }

   #menu li.active a:hover {
       color: #000;
   }

   #menu li:hover {
       background: rgba(255, 255, 255, 0.8);
   }

   #menu li a,
   #menu li.active a {
       padding: 9px 18px;
       display: block;
   }

   #menu li.active a {
       color: #fff;
   }

   #menu {
       position: fixed;
       top: 0;
       left: 0;
       height: 40px;
       z-index: 70;
       width: 100%;
       padding: 0;
       margin: 0;
   }

   .twitter-share-button {
       position: fixed;
       z-index: 99;
       right: 149px;
       top: 9px;
   }

   #download {
       margin: 10px 0 0 0;
       padding: 15px 10px;
       color: #fff;
       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
       background-color: #49afcd;
       background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
       background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
       background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
       background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
       background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
       background-image: linear-gradient(top, #5bc0de, #2f96b4);
       background-repeat: repeat-x;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
       border-color: #2f96b4 #2f96b4 #1f6377;
       border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
       filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

       -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
       border-radius: 6px;
       vertical-align: middle;
       cursor: pointer;
       display: inline-block;
       -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   }

   #download a {
       text-decoration: none;
       color: #fff;
   }

   #download:hover {
       text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
       background-color: #2F96B4;
       background-position: 0 -15px;
       -webkit-transition: background-position .1s linear;
       -moz-transition: background-position .1s linear;
       -ms-transition: background-position .1s linear;
       -o-transition: background-position .1s linear;
       transition: background-position .1s linear;
   }

   #infoMenu {
       height: 20px;
       color: #f2f2f2;
       position: fixed;
       z-index: 70;
       bottom: 0;
       width: 100%;
       text-align: right;
       font-size: 0.9em;
       padding: 8px 0 8px 0;
   }

   #infoMenu ul {
       padding: 0 40px;
   }

   #infoMenu li a {
       display: block;
       margin: 0 22px 0 0;
       color: #333;
   }

   #infoMenu li a:hover {
       text-decoration: underline;
   }

   #infoMenu li {
       display: inline-block;
       position: relative;
   }

   #examplesList {
       display: none;
       background: #282828;
       -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
       border-radius: 6px;
       padding: 20px;
       float: left;
       position: absolute;
       bottom: 29px;
       right: 0;
       width: 638px;
       text-align: left;
   }

   #examplesList ul {
       padding: 0;
   }

   #examplesList ul li {
       display: block;
       margin: 5px 0;
   }

   #examplesList ul li a {
       color: #BDBDBD;
       margin: 0;
   }

   #examplesList ul li a:hover {
       color: #f2f2f2;
   }

   #examplesList .column {
       float: left;
       margin: 0 20px 0 0;
   }

   #examplesList h3 {
       color: #f2f2f2;
       font-size: 1.2em;
       margin: 0 0 15px 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.4);
       -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
       -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
       box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
       padding: 0 0 5px 0;
   }



   /* Centered texts in each section
	* --------------------------------------- */
   .section {
       text-align: center;
   }

   /* Backgrounds will cover all the section
	* --------------------------------------- */
   #section1,
   #section2,
   #section3,
   #section4,
   #section5,
   #slide1,
   #slide2 {
       background-size: cover;
       background-attachment: fixed;
   }

   /* #myVideo {
       position: absolute;
       right: 0;
       bottom: 0;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background-size: 100% 100%;
       background-color: black;
       background-image:
       ;
       background-position: center center;
       background-size: contain;
       object-fit: cover;
       z-index: 3;
   } */
   #myVideo {
       -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
       -ms-transform: translateX(-50%) translateY(-50%);
       -o-transform: translateX(-50%) translateY(-50%);
       transform: translateX(-50%) translateY(-50%);
       position: absolute;
       top: 50%;
       left: 50%;
       min-width: 100%;
       min-height: 100%;
       width: auto;
       height: auto;
       z-index: -100;


   }


   /* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
   #section1 .layer {
       position: absolute;
       z-index: 4;
       width: 100%;
       margin: 0;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   #section2 .layer {
       position: absolute;
       z-index: 4;
       width: 100%;
       margin: 0;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   #section3 .layer {
       position: absolute;
       z-index: 4;
       width: 100%;
       margin: 0;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   #section4 .layer {
       position: absolute;
       z-index: 4;
       width: 100%;
       margin: 0;
       top: 45%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   /*solves problem with overflowing video in Mac with Chrome */
   #section0,
   #section3,
   #section4 {
       overflow: hidden;
   }



   /* Hiding video controls
	* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
	* --------------------------------------- */
   video::-webkit-media-controls {
       display: none !important;
   }

   /* Defining each sectino background and styles
	* --------------------------------------- */


   #section3 h1 {
       top: 50%;
       transform: translateY(-50%);
       position: relative;
   }

   #section1 {
       padding: 6% 0 0 0;
   }

   #section2 {
       background-image: url(/data/image/int_bg.jpg);
       padding: 6% 0 0 0;
   }

   #section3 {
       background-image: url(/data/image/cll_bg.jpg);
       padding: 6% 0 0 0;
   }

   #section4 {
       padding: 0 0 0 0;
   }

   #section5 {
       background-image: url(/data/image/bg5.jpg);
       padding: 6% 0 0 0;
   }


   /*Adding background for the slides
	* --------------------------------------- */


   #slide2 {
       background-image: url(/data/image/bg4.jpg);
       padding: 6% 0 0 0;
   }


   /* Bottom menu
	* --------------------------------------- */
   #infoMenu li a {
       color: #fff;
   }

   /* Demos Menu
 * --------------------------------------- */
   #demosMenu {
       position: fixed;
       bottom: 10px;
       right: 10px;
       z-index: 999;
   }

   .s0-text {
       font-size: 73px;
       font-weight: 600;
       color: #444;
       margin-bottom: 12px;
   }

   .s0-sub-text {
       font-size: 19px;
       color: #444;
       margin: 15px 0;
   }

   @keyframes Color {
       0% {
           color: #A0D468;
       }

       20% {
           color: #4FC1E9;
       }

       40% {
           color: #FFCE54;
       }

       60% {
           color: #FC6E51;
       }

       80% {
           color: #ED5565;
       }

       100% {
           color: #AC92EC;
       }
   }

   @-moz-keyframes Color {
       0% {
           color: #A0D468;
       }

       20% {
           color: #4FC1E9;
       }

       40% {
           color: #FFCE54;
       }

       60% {
           color: #FC6E51;
       }

       80% {
           color: #ED5565;
       }

       100% {
           color: #AC92EC;
       }
   }

   @-webkit-keyframes Color {
       0% {
           color: #A0D468;
       }

       20% {
           color: #4FC1E9;
       }

       40% {
           color: #FFCE54;
       }

       60% {
           color: #FC6E51;
       }

       80% {
           color: #ED5565;
       }

       100% {
           color: #AC92EC;
       }
   }

   .fp-completely {
       overflow: hidden;
   }

   .slogan-area {
       overflow: hidden;
       display: inline-block;
       width: 100%;
       height: 100%;
   }

   .slogan-wrap {
       z-index: 1;
       margin: 0;
       position: absolute;
       top: 45%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   .slg-logo {
       max-width: 600px;
       margin: 0 0 10px;
       width: 100%;
   }

   .image-area {
       position: absolute;
       margin: 0 auto;
       display: inline-block;
       min-height: 300px;
       max-height: 300px;
       overflow: hidden;
       vertical-align: bottom;
       width: 100%;
       bottom: 0;
       left: 0;
       font-size: 0;
   }

   .s-img01 {
       position: absolute;
       top: 0;
       left: 600px;
       width: 100%;
       max-width: 700px;
   }

   .s-img02 {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       max-width: 1200px;
   }

   /* duties vision */
   .dv-area {
       overflow: hidden;
       display: inline-block;
       width: 100%;
       height: 100%;
   }

   .dv-wrap {
       z-index: 1;
       margin: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   .dv-logo {
       max-width: 330px;
       margin: 0 0 30px;
       width: 100%;
   }

   .image-area02 {
       width: 100%;
       overflow: hidden;
       height: 100%;
       position: relative;
       left: 0;
       top: 0;
   }

   .s-img03 {
       position: absolute;
       bottom: 0;
       left: 0;
       /* width: 100%; */
       height: 100%;
       right: 0;
       margin: 0 auto;
   }

   .s-img04 {
       position: absolute;
       bottom: 0;
       left: 0;
       /* width: 100%; */
       height: 100%;
       right: 0;
       margin: 0 auto;
   }

   .more-btn-wrap a {
       color: #444;
       font-size: 18px;
       letter-spacing: 1px;
       font-weight: bold;
   }

   .more-btn-wrap a:hover {
       color: #444;
   }

   .more-btn-wrap a.w-font:hover {
       color: #fff !important;
   }

   .more-btn-wrap a span {
       font-size: 16px;
   }

   .slick-area {
       margin: 30px 0;
   }

   .slick-area .slick-slide {
       width: 500PX;
       margin-right: 30px;
   }

   .vision-section {
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
       text-align: center;

   }

   .slide-section {
       width: 100%;
       max-width: 1440px;
       margin: 0 auto;
       text-align: left;

   }

   .cl-section {
       font-size: 0;
       width: 100%;
       max-width: 1440px;
       margin: 0 auto;
       text-align: left;
   }

   .cl-l-box {
       display: inline-block;
       width: 50%;
       vertical-align: top;
       min-height: 473px;
       max-height: 473px;
       position: relative;
   }

   .cl-r-box {
       display: inline-block;
       width: 50%;
       vertical-align: top;
       min-height: 473px;
       max-height: 473px;
       position: relative;
   }

   .cll-btn {
       position: absolute;
       left: 0;
       bottom: 0;
   }

   .cll-btn a {
       display: block !important;
   }

   .cll-img {
       width: 100%;
       max-width: 750px;
   }

   .more-btn-wrap {
       margin-bottom: 10px;
   }



   .bxslider {
       overflow: hidden;
   }

   .bxslider li {
       width: 100% !important;
       height: 100% !important;
   }

   .bxslider li img {
       display: block;
       width: 100%;
       height: 100%;
   }

   .bxslider li img {
       -webkit-animation: imgscale 10s;
       -moz-animation: imgscale 10s;
       animation: imgscale 10s;
       animation-iteration-count: infinite;
       margin: 0 auto;
       object-fit: cover;
   }

   .bx-wrapper {
       z-index: -1;
   }

   @-webkit-keyframes imgscale {
       0% {
           -webkit-transform: scale(1.08) rotate(0.1deg);
       }

       100% {
           -webkit-transform: scale(1.3) rotate(0.1deg);
       }
   }

   @-moz-keyframes imgscale {
       0% {
           -moz-transform: scale(1.08) rotate(0.1deg);
       }

       100% {
           -moz-transform: scale(1.3) rotate(0.1deg);
       }
   }

   @keyframes imgscale {
       0% {
           transform: scale(1.08) rotate(0.1deg);
       }

       100% {
           transform: scale(1.3) rotate(0.1deg);
       }
   }

   div.text {
       width: 100%;
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       z-index: 999 !important;
       color: #fff;
   }

   .page-list-area {
       font-size: 0;
       margin: 30px 0 0;
   }

   .page-list-area li {
       display: inline-block;
       width: 20%;
       text-align: center;
       border-left: 1px solid #ccc;
       min-height: 190px;
       padding: 25px 0;
   }

   .page-list-area li:last-child {
       border-right: 1px solid #ccc;
   }

   .page-list-area li .p-num {
       font-size: 34px;
       color: #61e0c1;
       font-weight: 700;
       margin: 0 0 40px;
   }

   .page-list-area li .p-s-num {
       color: #000;
       font-weight: 400;
       font-size: 16px;
   }

   @media only screen and (min-width:1700px) {
       .s-img01 {
           position: absolute;
           top: 0;
           left: 800px;
           width: 100%;
           max-width: 700px;
       }
   }

   @media only screen and (max-width:1600px) {
       .s0-text {
           font-size: 60px;
       }


   }

   @media only screen and (max-width:980px) {
       .s0-text {
           font-size: 55px;
       }

       .m-text-box h3 {
           font-size: 55px;
       }

       .s0-sub-text {
           margin: 30px 0;
       }

       .slide-section {
           padding: 0 10px;
       }

       .cl-l-box {
           width: 100%;
           min-height: auto;
           max-height: none;
           text-align: center;
           margin-bottom: 10px;
       }

       .cl-r-box {
           width: 100%;
           min-height: auto;
           max-height: none;
           padding: 0 30px;
       }
       .cll-btn {
    position: relative;
           margin: 15px 0 0 !important;
}
   }

   @media only screen and (max-width:768px) {
       .dv-wrap {
           width: 100%;
       }

       .s0-text {
           font-size: 30px;
       }

       .s0-sub-text {
           font-size: 14px;
       }

       .more-btn-wrap a {
           font-size: 15px;
       }

       .m-text-box h3 {
           font-size: 30px;
       }

       .s-img01 {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           max-width: 700px;
       }

       .s-img03 {
           height: auto;

       }

       .s-img04 {
           height: auto;
       }

       .page-list-area {
           padding: 0 5px;
       }

       .page-list-area li {
           display: inline-block;
           width: 20%;
           text-align: center;
           max-width: 500px;
           border-left: 1px solid #ccc;
           min-height: auto;
           padding: 15px 0;
           margin: 15px 0;

       }

       .page-list-area li .p-num {
           margin: 0 0 20px;
           font-size: 18px;
       }

       .page-list-area li .p-s-num {
           font-size: 11px;
       }
   }