@charset "utf-8";
@-webkit-viewport { width: device-width; }
@-moz-viewport      { width: device-width; }
 @-ms-viewport       { width: device-width; }
 @-o-viewport        { width: device-width; }
 @viewport           { width: device-width; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(../fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2'); 	
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:  url(../fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2'); 	
}

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
html{ touch-action: manipulation;overflow-x: hidden;}
/* CSS Document */
body {font-family: 'Lato', sans-serif,  Arial;   line-height: 1.5;  margin:0; padding:0;  color: #333; overflow-x: hidden;}
h1 {  font-size: 1.2rem; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto; }
h3, h4 { font-size: 1.15em; font-weight:400; }
h5, h6 { font-size: 1.125em; font-weight:400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { font-size: 1rem; color: #333; line-height: 1.5rem;  font-weight:300; }
a { text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
audio,canvas,video{ display: inline-block;}
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
.color-b{color: #00a596;}
main{ }  
/**brand-wrap****/

.banner{ width: 100%;  max-width: 100%; height: auto; overflow: hidden; margin:0 auto;display: block;   text-align: center; line-height: 2.5em; vertical-align: top; z-index: 0; }
.banner-img { width: 100%;  height: auto; overflow: hidden;  }
.banner-wrap { width: 100%; max-width: 600px; display:flex;  flex-wrap: wrap;  flex-direction:row; justify-content: center; align-items: center; padding:2em; margin:5% auto;  position:absolute; z-index: 9; text-align: left;  }
.banner-img img { width: 100%; height: auto; overflow: hidden;  }



/* TOPcss
-------------------------------------------------- */
.content-top { overflow: hidden;}
.content-top .txt-01{ margin-bottom: 25px;}
.box-top-h2 { width: 100%; margin-bottom: 25px;  }
.box-top-h2 h2 { display: inline-block;  font-weight: bold; font-size: 1rem;   }
.box-top-h2 strong{  color:#ff6500;}
.box-top-h2 h3 { font-weight: 400; }
.title-style{ margin:15px auto;   font-size:1.75rem; font-weight: 700!important;  background:url(../images/index/v-line-2.png) no-repeat  center bottom; background-size:86px 4px;  }
/*.bd-sub 
=====================*/
.bd-sub { position: absolute; top: 0;  left: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 10px; padding-top: 35px; z-index: 1;  -webkit-transform: translateX(-3px);  transform: translateX(-3px);
 color: rgba(31, 50, 140, 0); -webkit-transition: color .5s .25s; transition: color .5s .25s;}
.bd-sub:before { content: "";  position: absolute;  width: 1px;  height: 0; top: 0;  left: 3px;  background: #1f328c;  -webkit-transition: height .3s;  transition: height .3s;}
.bd-sub.scrollin { color: rgba(31, 50, 140, 1);}
.bd-sub.scrollin:before {height: 30px;}
.wrp-top-service .bd-sub { left: 93px;}
.wrp-top-about .bd-sub { left: 93px; top: -50px;}
.wrp-top-news .bd-sub { top: -30px; left: 50%;}

/* wrp-top-about
======================*/
.wrp-top-about { position: relative; }
.img-top-about { margin:0px 10px;}
.box-top-about { position: relative; padding: 0 25px 70px; margin-top: -20px;  }
.box-top-about h1{ font-size:1.45rem; margin-bottom: 20px; color:#ff6500;   text-shadow: 0px 1px 0px rgba(255,255,255,1);   }
.box-top-about h2{ font-size:1.5rem; margin-bottom: 20px;  text-shadow: 0px 1px 0px rgba(255,255,255,1);   }

/*wrp-application
======================*/
.wrp-application { position: relative; padding:5rem 0px;   }
.wrp-application .box-top-h2{ text-align: center; display: flex; flex-wrap: wrap;  flex-flow:column;    align-content: center; justify-content: center; }
.wrp-application .box-top-h2 h4{color:#7a7772;}
.best-wrap { width: 100%;  display: block; margin:0px auto; padding:20px; background: url(../images/index/index-v1.jpg) no-repeat -200px 200px; background-size:auto 80%;  }
.best-wrap li { width: 100%;  height: auto; display:block; margin:50px 10px; padding:0px 0px 10px 0px; position: relative;  background: #fff; box-shadow: 2px 5px 8px rgba(0,0,0,.1);  border-radius:20px; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }
.best-wrap li figure{ width:98%; display:block;   }
.best-wrap li:hover {  transform:  translateY(-20px); }
.best-wrap li .inner{width:98%; max-height: 160px; padding:2rem;  display:block; vertical-align: top;overflow:hidden;}
.best-wrap li a .inner h3{font-size:1.35rem; font-weight: 700; color: #0066cc; }
.best-wrap li a .inner p{ font-size:.875rem; font-weight:300; line-height: 1.35rem; overflow: hidden;  word-break: break-all;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }

/*.wrp-top-news 
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.wrp-top-news {  width: 100%; display: block; position: relative;  padding: 20% 0px 50px 0px;  background: url(../images/index/bottom.jpg) no-repeat center bottom #084e9e; background-size: 100% auto;  }

.wrp-top-news .box-top-h2{   text-align: center; color: #fff;  }
.news{ position: relative;  width: 100%; max-width:960px;  margin:80px auto 0px auto;   display:flex;  flex-wrap: wrap;  flex-direction:row; justify-content: center; align-items: center; }
.news li { display: block; padding: 0 5px; width: 100%;  margin:1% 10px 5% 10px;  border-bottom: solid 5px rgba(0,0,0,.5);position: relative;   transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }
.news li figure{ width:100%;  padding:0px; display:block; margin: auto;}
.news li figure img{width: 100%;max-width: 100%;  height: auto;  border: solid 1px #efefef;transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }
.news-box { width:100%;  display:block;  margin: auto -5px;  position: relative;   padding: 10px 20px ; vertical-align: top; }
.news-box .font-s{ margin: 10px 0px; font-size:1.25rem; font-weight: 700; color: #000; }
.news-box .font-b{ margin:10px 0px 0px 0px; font-size:2rem; font-weight: 700; color: #FFA200;}
.news-txt{ width:100%; display:block;  line-height: 17px; font-size: 1.15rem; margin:0px auto; vertical-align: top;	word-break: break-all;}
.box-top-news {position: relative; padding: 0 25px 70px; margin:-20px  auto  auto auto; }
.time{ display: block;   padding:4px; font-size:20px;  color:#fff; font-weight:700; }
a .news-txt p{color: #fff; }

/***** Julia *****/
.map-box { width: 100%; height:auto; margin:0 auto; padding:0px; display: -webkit-flex; display: flex; flex-wrap: wrap;  text-align: center; vertical-align: top; }
.banner-box { width: 50%; min-height: auto; margin: 0; padding:0; }

/* Common style */
.grid figure { position: relative;  display: block;  overflow: hidden; margin:0px;  width: 100%; height:auto; background: #fff; text-align: center; cursor: pointer; vertical-align:top; }
.grid figure img { position: relative; display: block; height:auto;  width: 100%; }
.grid figure figcaption { padding: 2em 1em; color: #fff; text-transform: uppercase; font-size: 1.25em; text-align:center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }
.grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
/* For some effects it will show as a button */
.grid figure h2 span { font-weight: 700; }
.grid figure h2, .grid figure p { margin: 0; }
.grid figure p { letter-spacing:.3px; font-size: 100%; }


/***** Julia *****/
figure.effect-julia { background: #fff; vertical-align:top; }
figure.effect-julia img { max-width: none;  -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; vertical-align:top; }
figure.effect-julia figcaption { margin:5% auto; }
figure.effect-julia h2 { position: relative; padding:1rem 0em 0em 0em; color:#fff; text-transform: none; word-spacing: 0.3em; font-size:1rem; font-weight:700;}
figure.effect-julia h2::after { content: ""; display: block; margin:0px auto 1% auto; width:10%; height: 2px;  background: #fff; }
figure.effect-julia p { display: inline-block; margin: 0 ; padding:0; color: #fff; text-transform: none; font-size:1rem;font-weight: 400;  }
figure.effect-julia p:first-child { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
figure.effect-julia:hover p:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; }
figure.effect-julia:hover img { opacity: 0.4; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
figure.effect-julia:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
figcaption .brand-logo img{ width:64px; height:auto; display:block; margin:auto; padding-top: 20px; vertical-align: top;}
.filter{-webkit-filter:brightness(.5);}
/*btn-01
============================*/
.btn-01{ display: inline-block; min-width: 180px; padding: 15px; position: relative; text-decoration: none; color: #fff; text-align: center; font-size: 12px; font-weight: 600; z-index: 0;}
.btn-01 > span::after,.btn-01 > span::before,.btn-01 > span > span::after,.btn-01 > span > span::before { background-color: #2673e7; content: ''; display: block; position: absolute; z-index: 10; -webkit-transition: all .3s ease; transition: all .3s ease;}
.btn-01 > span::after { height: 1px; left: -1px; top: -1px; width: 8px;  }
.btn-01 > span::before { bottom: -1px; height: 1px; right: -1px; width: 8px;}
.btn-01 > span > span::after { height: 8px; left: -1px; top: -1px; width: 1px;}
.btn-01 > span > span::before { bottom: -1px; height: 8px; right: -1px; width: 1px;}
.btn-01 > span > span > span:after{ display: block; content: ""; position: absolute; z-index: -1; top: 0;bottom: 0; left: 0; right: 0; width: 100%; height: 100%; margin: auto; background-image: linear-gradient(135deg, #4481eb 0%, #04befe 100%);border-radius:30px;  -webkit-transition: .3s; transition: .3s;}
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: block; width:130px; line-height:1.25rem; margin: 8px auto; padding:10px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 20px; text-transform: capitalize;  }
.btn-more { color: #fff;   border-radius:30px;    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); }
.btn-more:hover { color: #fff; background: #00afb9; }




@media screen and (min-width: 769px){
.content-top .txt-01{ margin-bottom:50px;}
.box-top-h2 { width: 100%; margin-bottom:50px;}
.box-top-h2 h2 {  font-size:2.15rem; line-height:2.75rem; }
.box-top-h2 h2 strong{font-size:1.5rem; line-height:2.75rem; }
.box-top-h2 .number {  font-size: 12px; padding-left: 5px;}
.bd-sub {  font-size: 15px;  padding-top: 70px;  -webkit-transform: translateX(-5px);   transform: translateX(-5px);}
.bd-sub:before { width: 2px;   top: 0; left: 5px;}
.bd-sub.scrollin:before {  height: 60px;}
.wrp-top-about .bd-sub { top: -100px;  left: 56%;}
.title-style{ margin:15px auto 25px auto; font-size:3rem;   }

/*wrp-top-about
=================================*/
.wrp-top-about:before { top: 0px; left:56%;}
.img-top-about { margin-left: 0; position: absolute; right:-10px; top:0px; width:50%;}
.box-top-about {width: 96%;  max-width: 1140px;margin: 0 auto; padding: 120px 10px 100px 0px;}
.box-top-about .txt-01 { max-width: 480px;  margin:20px 0 40px 0; text-shadow: 0px 1px 0px rgba(255,255,255,1);  }
/*	.wrp-application
========================*/
.wrp-application:before  { top: 0px; left:56%;}
.title-wrap{   display: none; }
/*wrp-top-main
=================================*/
.wrp-top-main:before { content: ''; background: #f2f6f9; width: 50%;   display: block; position: absolute; top: 0px;  left: 0px; }
.img-top-main { margin-left: 0; position: absolute; right:0px; top:0%; width:50%;}
.box-top-main {width: 96%;  max-width: 800px;margin: 0 auto; padding: 120px 10px 100px 0px;}
.box-top-main .txt-01 { max-width: 480px; background-color:transparent; margin:20px 0 40px 0;  line-height:1.75rem;   color:#27293D; font-weight: 700; font-size: 1.5rem;  }
/*.wrp-top-news 
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/	
.wrp-top-news {position: relative; padding-top: 0%; }
.box-top-news {width: 96%;  max-width: 1140px;margin: 0 auto; padding: 60px 10px 0px 0px;}

	
/*btn-01
============================*/
.btn-01{ min-width: 220px; padding: 20px; font-size: 15px;}
.btn-01 > span::after,.btn-01 > span::before { width: 15px;}
.btn-01 > span > span::after,.btn-01 > span > span::before { height: 15px;}
/* hover */
.btn-01:hover > span:after,.btn-01:hover > span:before { width: 100%; width: calc(100% + 2px);}
.btn-01:hover > span > span::after,.btn-01:hover > span > span::before { height: 100%; height: calc(100% + 2px);}
.btn-01 > span > span > span:after{ width: calc(100% - 14px); height: calc(100% - 14px);}
.btn-01:hover > span > span > span:after{ width: 100%; height: 100%;}
}

@media (min-width: 768px) {
figure.effect-julia figcaption { margin:0px 5%;padding:4rem 2rem 0em 0em;  }	
figcaption .brand-logo img{ width:128px; height:auto; display:block; margin:auto; vertical-align: top;}
figure.effect-julia h2 {  font-size:1.75rem; min-height: 120px; }
	
}
@media (min-width: 980px) {
.banner-box { width: 25%; display: inline-block; }
figure.effect-julia h2 { margin-top:6%; }
}


@media screen and (min-width: 1440px){
.img-top-about {  right:-5%;}
}

@media screen and (min-width: 1680px){
.img-top-about {  right:-10%;}	
}

.stand-sticky {display: none!important;}