@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,700');
* { -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; }
/* CSS Document */
body { font-family:'Poppins',sans-serif; overflow-x:hidden; margin:0; padding:0;  color: #333;}
h1 {  font-size: 1.2em; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto; }
h3, h4 { font-size: 1.15em; font-weight: 600; }
h5, h6 { font-size: 1.125em; font-weight: 600 }
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: 1.05rem; color: #6a6a6a; line-height: 1.75rem;  font-weight: 100; }
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 }
a:hover{ color:#900d1c;}
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;}
/**brand-wrap****/
.banner{ width: 100%;  max-width: 98%; height: auto; overflow: hidden; margin:1%;display: block;   text-align: center; line-height: 2.5em; vertical-align: top; z-index: 0; }
.banner img{ width: 100%; max-width: 100%; height: auto;}

/* TOPcss
-------------------------------------------------- */
.content-top { overflow: hidden;}
.content-top .txt-01{ margin-bottom: 25px;}
.box-top-h2 { margin-bottom: 25px;}
.box-top-h2 h2 { display: inline-block; color: #1f328c; font-weight: bold; font-size: 1.5rem;}
.box-top-h2 h3 { font-weight: 400; }

/*.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%;}


/*video
======================*/
.wrp-top_main { position: relative;  height:100vh; max-height:400px;  overflow: hidden; z-index: 0; }
.wrp-top_mv { margin:-55% 1% 5% 1%; position: relative;z-index: 0; }
.pic-top_mv { width: auto;  height: 100% ;   position: absolute;  right: 0px;z-index: 0;}
.pic-top_mv img { height: 100%; width: auto;z-index: 0;}


/* wrp-top_about
======================*/
.wrp-top_about { position: relative; }
.wrp-top_about:before { content: ''; background: #f2f6f9; width: 100%; height: 100%; display: block; position: absolute; top: 0px;  z-index: -1;}
.img-top_about { margin:30px 10px;}
.box-top_about { position: relative; padding: 0 25px 70px; margin-top: -20px;  }

/*wrp-top_service
======================*/
.wrp-top_service { position: relative;}
.wrp-top_service:before { content: ''; background: #f2f6f9; width: 100%; height: 120%; display: block; position: absolute; top: 0; left: 0; z-index: -1;}
.bg-top_service { display: none;}
.box-top_service { position: relative; padding: 80px 25px 15px 20px; text-align: left;}
.box-top_service .box-top-h2{ text-align: left; display: block;}
.label-slider { display: none;}
 /**hot**/
.hot  { position: relative; width: 100%; margin:0; display:block; text-align:left;  vertical-align:top; }
.hot-wrap { width: 100%; display:block; text-align: left; margin:0px auto; }
.hot-wrap li { width:80%;  max-width:80%;  height: auto; display: block; margin:0 auto;  padding:20px;    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; }
.hot-wrap li:hover{ transform: scale(.9) ; background: #fff; box-shadow: 0px 5px 8px rgba(0,0,0,.1) }
.hot-wrap li figure img{  max-width: 100%; height: auto; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;}
.hot-wrap li:hover figure img{  transform: scale(1.1) translateY(-20px); }
.hot-wrap a h4{ color: #1f328c; text-align: center; font-size:1.5rem; }
.hot-wrap a p{   max-width:80%; max-height:400px; display: block; margin: auto; font-size:.9rem; line-height:1.25rem;   color:#27293D;   text-align: left; overflow: hidden; }

/*wrp-application
======================*/
.wrp-application { position: relative; padding:10em 0 ;   }
.wrp-application:before { content: ''; background: #f2f6f9; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1;}
.wrp-application .box-top-h2{ text-align: center; display: flex; flex-wrap: wrap;  flex-flow:column;    align-content: center; justify-content: center; }
.application{width: 100%; margin: auto auto 5% auto;    display: flex; flex-wrap: wrap; flex-grow: row;  align-content: center; justify-content: center; }
.application li { width:100%;  max-width:100%;  height: auto; display: block; margin:0 auto;  padding:0px;    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; }
.application li:hover{ transform: scale(.9) ; background: #fff; box-shadow: 0px 5px 8px rgba(0,0,0,.1) }
.application li figure img{ position: relative;  z-index: 1; max-width: 100%; height: auto; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;}
.application li:hover figure img{  transform: scale(1.1) translateY(-20px); }
.application a h4{ text-align: center; font-size:1rem;  color: #fff;   -webkit-transition: all .5s .6s ease; transition: all .5s .6s ease;}
.application a p{ max-width:80%; max-height:200px; display: block; margin: auto; font-size:.9rem; line-height:1.15rem;  overflow: hidden;   color: #fff;  text-align: center;  }
.title-wrap{ width: auto; margin-top: -100px;   padding: 30px;  word-wrap: break-word; display: block;position: absolute;  z-index: 999; background: #1f328c;opacity: 0.7; }
.application li:hover .title-wrap{ display: block;}

/* wrp-top_main
======================
.wrp-top_main { position: relative; }
.wrp-top_main:before { content: ''; background: #f2f6f9; width: 100%; height: 100%;   display: block; position: absolute; top: 290px; left: 0; z-index: -1;}
*/
.img-top_main { margin:30px 10px;}
.box-top_main { position: relative; padding: 0 25px 70px; margin-top: -20px;  }
/*.wrp-top_news 
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.wrp-top_news { background: #fff; position: relative; padding-top: 20%; }
.wrp-top_news:before { content: ''; background: #f2f6f9; width: 100%; height: 87%; display: block; position: absolute; top: 290px; left: 0;}
.wrp-top_news .box-top-h2{ display: block;  text-align: center; }
.news-wrap{ position: relative; margin: 40px auto;display:flex;  flex-wrap: wrap;  flex-direction:row; justify-content: center; align-items: center; }
.news-wrap li { display: inline-block; padding: 0 25px 15px; width: 100%; max-width:90%;  margin:1% auto;    position: relative;  background: #fff;   transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }
.news-wrap li:hover{ transform: scale(.99) ; background: #fff; box-shadow: 0px 5px 8px rgba(0,0,0,.1) }
.news-wrap li figure{ padding:20px 10px; display: block; margin: auto;}
.news-wrap 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-wrap li:hover figure img{  transform: scale(.99) translateY(10px);  border: none;}
.news-box { position: relative; background: #fff; padding: 30px 20px 100px 20px;}
.news-date{ color: #1f328c; font-weight: bold; letter-spacing: 0.04em; font-size: .9rem; margin-bottom: 10px}
.news-txt{ color: #555; letter-spacing: 0.04em; line-height: 17px; font-size: 1.15rem; margin-bottom: 30px; 	-webkit-transition: color .1s; transition: color .1s;}
.btn-top_news {  text-align: center;  margin: 0 auto 100px;}

/*.contact
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.wrp-top_contact{ position: relative; padding:50px 0px;  background-image: url(../images/map-color.png),url( ../images/map.jpg);  background-size:30% auto,70% auto;  background-repeat: no-repeat; background-attachment: inherit; background-position: right top, left bottom; }
.box-contact { position: relative; padding: 85px 25px; }
.box-contact .txt-contact {  margin: 25px 0 0;  line-height: 1.4; font-size: 14px; color: #444;  letter-spacing: 0.08em;}
.lst-tel {  margin: 5px 0 0;}
.lst-tel li {  padding: 15px 0 0; font-size: 15px; font-weight: 700; color: #1f328c; letter-spacing: 0.08em;}
.box-contact .btn-contact { margin: 25px 0 0;}
.box-contact .btn-contact a { display: block; padding: 25px 5px;  background: url(../images/icon/email.svg)  no-repeat 5px 20px  #1f328c;  background-size:50px auto;  color: #fff; font-size: 1rem;  text-align: center;  text-decoration: none;  font-weight: 700;  letter-spacing: 0.14em;}




/*btn-01
============================*/
.btn-01{ display: inline-block; min-width: 180px; padding: 15px; position: relative; text-decoration: none; color: #1f328c; 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: #1f328c; 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: #fff; -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-purple { color: #8f67a0;  background: #fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:500; border: solid 1px #8f67a0;}
.btn-purple:hover { color: #fff; background: #8f67a0; }



@media screen and (min-width: 590px){
	.pic-top_mv {  right: 0; }
}

@media screen and (min-width: 768px){
	.content-top .txt-01{ margin-bottom: 30px;}
	.box-top-h2 { margin-bottom: 60px;}
	.box-top-h2 h2 {  font-size:4rem; }
	.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_service .bd-sub { top: -2px;  left: 56%; }
	.wrp-top_about .bd-sub { top: -100px;  left: 56%;}
	.wrp-top_news .bd-sub { top: -60px; left: 50%;}
	
	
	
/*video
=================================*/	
	.wrp-top_main { margin:1%; height:100vh;  max-height:640px; z-index: 0;overflow: hidden; }
	.wrp-top_mv { margin:-15% 1% 1% 1%;   position: relative;z-index: 0; overflow: hidden; }
	.pic-top_mv { width: 100%; position: relative; top: auto; right: auto; overflow: hidden; }
	.pic-top_mv video { width: 100%;display: block; z-index: 1;  transform: scale(1); }
/*	.wrap-mv:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/video-overlay.png) left top repeat;}*/	

	/*wrp-top_about
=================================*/
    .wrp-top_about{background-image: url(../images/about-01.png); background-repeat: no-repeat; background-attachment: inherit; background-position: left top; }
	.wrp-top_about:before { top: 0px; left:56%;}
	.img-top_about { margin-left: 0; position: absolute; right:0px; top:20%; 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; background-color:#fff; margin:20px 0 40px 0;   }
	
/*	.wrp-top_service
========================*/
	.wrp-top_service:before { top: -120px; left: 56%; max-height:85vh; }
	.bg-top_service { display: block; position: absolute; top: 0; left: 0; width:80%;  height: 120%; background: url(../images/top-pic-about-map.png) 0 0 no-repeat; background-size: contain;}
	.box-top_service { max-width: 1140px; padding: 170px 10px 60px; margin: 0 auto; text-align:left; 	}
	.box-top_service .box-top-h2{ text-align: left; display: inline-block;}
	.box-top_service .txt-01{ text-align: left; max-width: 540px; margin-left: 0;}
	.label-box{ width:20%;position: absolute;text-align: left;  display: block;}
	.label-slider {  width:100%;  text-align: left;  display: block;  }
	.label-slider:after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; background: url(../images/index/triangle.jpg) left top  no-repeat;}
	.label-slider h3{ padding:2em .5em; color: #fff; font-size:2rem; background:#1f328c; margin-bottom: 2%; display: block; } 
	.wrp-top_service{ background: url(../images/about-02.png)  no-repeat right top; background-size:auto 50%; }
	.hot-wrap { width: 80%;  text-align: left; margin:0px 0px 0px 20%;  }
	.hot-wrap li { width:100%;  max-width:90%;  height: auto; display: block; margin:0 auto; }
	.hot-wrap a h4,.hot-wrap a p{  max-width:90%;  display: block; margin:0 auto 5% auto; text-align: left; }

/*	.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 { background: #fff; position: relative; padding-top: 2%; }
.wrp-top_news:before { top:50%;height: 50%; }
.news-wrap li { padding: 0 10px; width: 31.3333%;  margin: auto 1%;}
/*.contact
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.wrp-top_contact{ padding:0 0 10em 0;   background-position: right top,left bottom;  background-size:25% auto, 60% auto }
.box-contact {  margin: 0 auto;  padding: 175px 10px 0; max-width: 1140px;  box-sizing: border-box;}
.box-contact .txt-contact {  margin: 65px 0 0;  line-height: 1.4; font-size: 16px;}
.lst-tel {  margin: 35px 0 0;}	
.lst-tel li { display: inline-block;  padding: 0 35px 0 0;   font-size:1.15rem;}	
.box-contact .btn-contact {   margin: 27px 0 0;}	
.box-contact .btn-contact a {  padding: 30px 10px;  font-size: 22px; position: relative;  overflow: hidden;  z-index: 0; background: url(../images/icon/email.svg)  no-repeat 10% 10px  #1f328c;  background-size:70px auto; }	

/*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: 980px) {
/*video
=================================*/	
	.wrp-top_main { margin:1%;  max-height:540px; z-index: 0;overflow: hidden; }
	.wrp-top_mv { margin:-15% 1% 1% 1%;   position: relative;z-index: 0; overflow: hidden; }
	.pic-top_mv { width: 100%; position: relative; top: auto; right: auto; overflow: hidden; }
	.pic-top_mv video { width: 100%;display: block; z-index: 1;  transform: scale(1); }
	.wrap-mv:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/video-overlay.png) left top repeat;}	

	
}
 


@media screen and (min-width: 1160px){
	.label-box{ width:20%;}
	.label-slider h3{ padding:2em 1em; color: #fff; font-size:2.5rem; } 

	
}
@media screen and (min-width: 1240px){
	.wrp-top_about:after { content: ''; display: block; width: 60px; height: 2px; background: #1f328c; position: absolute; top: 184px; left: 5%;}
	.wrp-top_main { margin:1%;  max-height:640px; z-index: 0;overflow: hidden; }
	.wrp-top_mv { margin:-15% 1% 1% 1%; position: relative;z-index: 0; }
}

@media screen and (min-width: 1440px){
	.wrp-top_main { margin:1%;  max-height:680px; z-index: 0;overflow: hidden; }
	.wrp-top_mv { margin:-15% 1% 1% 1%; position: relative;z-index: 0; }
}

@media screen and (min-width: 1600px){
		.wrp-top_main { margin:1%;  max-height:760px; z-index: 0;overflow: hidden; }


}



/* video text animation 
============================*/
.top-mv{ position: absolute; top:60%; left: 120px; transform: translateY(-60%); z-index: 1; width: 780px; height: 272px; overflow: hidden;}
@media screen and (min-width: 1400px){
.top-mv{   top:60%; left: 120px; transform: translateY(-60%); }
}
@media screen and (max-width: 1095px){
.top-mv{ top:60%;  transform: translateY(-20%) scale(0.7); left: -60px;}
}
@media screen and (max-width: 767px){
.top-mv{ top:60%;  transform:translateY(-20%) scale(0.7); left:0px;}
}
.top-mv > h1{ color: #fff; font-weight: 700; line-height: 1; vertical-align: top; position: absolute; opacity: 0; overflow: hidden;}
.top-mv > h1 > span{opacity: 0; display: inline-block;}
.top-mv > h1 > span.anim{ -webkit-animation: animMainVisual .5s ease forwards; animation: animMainVisual .5s ease forwards;}
.top-mv > p{ color: #fff; font-weight: 700; line-height: 1; vertical-align: top; position: absolute; opacity: 0; overflow: hidden;}
.top-mv > p > span{opacity: 0; display: inline-block;}
.top-mv > p > span.anim{ -webkit-animation: animMainVisual .5s ease forwards; animation: animMainVisual .5s ease forwards;}
@keyframes animMainVisual {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes animMainVisual {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
    }
}
.top-mv .txt01{ font-size:80px;   top: 0px; left: 0;}
.top-mv .txt02{ font-size: 42px; transform: rotate(90deg) scaleX(0.8); letter-spacing: 0.06em; top: -7px; right: -24px}
.top-mv .txt03{ font-size: 56px;   top: 54%; left: 0; overflow: visible;}
.top-mv .txt04{ font-size: 64px;  top: 54%; left: 160px;}
.top-mv .txt03:after{ content: ''; display: block; background: #fff; height: 16px; width: 0; position: absolute; bottom: -25px; left: 0; -webkit-transition: .3s .1s ease; transition: .3s .1s ease;}
.top-mv.anim .txt03:after{ width: 95%;}
.top-mv h1 img{ width: auto;}



@media screen and (max-width: 414px){
	.wrp-top_main {  display: none; }
	.wrp-top_about { margin-top: 40px;}
}