@charset "utf-8";
/* CSS Document */


/*PC*/
@media print, screen and (min-width: 600px) {


main { overflow: hidden;}

/*----------------------------------------------------

 head

----------------------------------------------------*/
.hedImg { width: 100%; height: 360px; background: url(../images/technology/hedImg.jpg) center center no-repeat; background-size: cover; margin: 0 auto 80px; text-align: center; color: #FFF; padding: 100px 0 0; box-sizing: border-box;}
.hedImg h2 { width: 100%; font-size: 66px; font-family:Arial, Helvetica, sans-serif;}
.hedImg p { width: 100%; font-size: 20px;}

.navBg ul li:nth-of-type(5) a { color: #eb6100;}



/*----------------------------------------------------

 sec01

----------------------------------------------------*/
.sec01 { width: 100%; margin: -80px 0 0; width: 100%;}
.sec01 .w1080 { background: url(../images/technology/sec01Img01.jpg) bottom left no-repeat; background-size: contain; min-height: 620px;}
.sec01 .ttl { padding: 120px 0 0 350px;}
.sec01 .ttl h3 { width: 100%; font-size: 48px; font-family : 'SimSun','sans-serif'; color: #eb6100; margin: 0 0 20px;}
.sec01 .ttl p { width: 100%; font-size: 14px;}
.sec01 img { margin: -100px auto 0 700px;}






/*----------------------------------------------------

 sec02

----------------------------------------------------*/
.sec02 { width: 100%; margin: 0; background: #eaf0f5; text-align: center;}
.sec02 .w1080 { width: 100%; padding: 50px 0;}
.sec02 .w1080 .map { position: relative;}
.sec02 .w1080 img { width: auto; height: auto;}

.sec02 .w1080 .map .btn01 { width: 176px; height: 44px; position: absolute; top: 28px; left: 33px; }
.sec02 .w1080 .map .btn02 { width: 176px; height: 44px; position: absolute; top: 201px; left: 33px; }
.sec02 .w1080 .map .btn03 { width: 176px; height: 44px; position: absolute; top: 410px; left: 33px; }
.sec02 .w1080 .map .btn04 { width: 176px; height: 44px; position: absolute; top: 584px; left: 33px; }
.sec02 .w1080 .map .btn05 { width: 176px; height: 44px; position: absolute; top: 738px; left: 33px; }
.sec02 .w1080 .map .btn06 { width: 176px; height: 44px; position: absolute; top: 840px; left: 33px; }
.sec02 .w1080 .map .btn07 { width: 176px; height: 44px; position: absolute; top: 1002px; left: 33px; }

.sec02 .w1080 .map div a { display: block; position: relative;}
.sec02 .w1080 .map div a:hover { display: block; opacity: 1.0;}

.sec02 .w1080 .map div a .off { position: absolute; top: 0; left: 0; opacity: 1.0;}
.sec02 .w1080 .map div a .on { position: absolute; top: 0; left: 0; opacity: 0;}

.sec02 .w1080 .map div a:hover .off { position: absolute; top: 0; left: 0; opacity: 0;}
.sec02 .w1080 .map div a:hover .on { position: absolute; top: 0; left: 0; opacity: 1.0;}


.sec02 a img,
.sec02 a:hover img {
	transition: all 0.5s  ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}





/*----------------------------------------------------

 sec03

----------------------------------------------------*/
.sec03 { width: 100%; padding: 50px 0; margin: 0; background: #FFF; position: relative; overflow: hidden;}
.sec03::before { position: absolute; content: url(../images/technology/sec03Bg01.png); top: -50px; left: -20px;}
.sec03::after { position: absolute; content: url(../images/technology/sec03Bg02.png); top: 0; right: -100px;}
.sec03 .w900 { position: relative; overflow: hidden;}
.sec03 .ttl { text-align: center; padding: 60px 0 80px;}
.sec03 .ttl h3 { width: 100%; font-size: 40px; font-family : 'SimSun','sans-serif'; color: #eb6100; margin: auto auto 10px;}
.sec03 .ttl p { width: 100%; font-size: 12px; margin: auto auto 10px;}
.sec03 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec03 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec03 .w1030 .txt { width: 320px;}
.sec03 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec03 .w1030 .txt p { margin: 0; font-size: 14px; line-height: 22px;}
.sec03 .w1030 img { float: right; margin: -140px 0 0;}



 


/*----------------------------------------------------

 sec04

----------------------------------------------------*/
.sec04 { width: 100%; padding: 50px 0; margin: 0; background: #fff6e9; position: relative;}
.sec04::before { position: absolute; content: url(../images/technology/sec04Bg01.png); top: 0; left: 0px;}
.sec04 .w1080 { position: relative; overflow: hidden;}
.sec04 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec04 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec04 .w1030 .txt { width: 320px;}
.sec04 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec04 .w1030 .txt p { margin: 0; font-size: 14px; line-height: 22px;}
.sec04 .w1030 img { float: right; margin: -130px 0 0;}






/*----------------------------------------------------

 sec05

----------------------------------------------------*/
.sec05 { width: 100%; padding: 50px 0; margin: 0; background: #FFF; position: relative;}
.sec05::before { position: absolute; content: url(../images/technology/sec05Bg01.png); bottom: 50px; left: -20px;}
.sec05 .w1080 { position: relative; overflow: hidden;}
.sec05 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec05 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec05 .w1030 .txt { width: 330px;}
.sec05 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec05 .w1030 .txt p { margin: 0; font-size: 14px; line-height: 22px;}
.sec05 .w1030 img { float: right; margin: -90px 0 0;}






/*----------------------------------------------------

 sec06

----------------------------------------------------*/
.sec06 { width: 100%; padding: 50px 0; margin: 0; background: #fff6e9; position: relative;}
.sec06::before { position: absolute; content: url(../images/technology/sec06Bg01.png); top: -100px; right: -20px;}
.sec06 .w1080 { position: relative; overflow: hidden;}
.sec06 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec06 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec06 .w1030 .txt { width: 320px;}
.sec06 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec06 .w1030 .txt p { margin: 0; font-size: 14px; line-height: 22px;}
.sec06 .w1030 img { float: right; margin: -110px 0 0;}


  



/*----------------------------------------------------

 sec07

----------------------------------------------------*/
.sec07 { width: 100%; padding: 50px 0; margin: 0; background: #FFF; position: relative;}
.sec07::before { position: absolute; content: url(../images/technology/sec07Bg01.png); top: -30px; right: -100px;}
.sec07::after { position: absolute; content: url(../images/technology/sec07Bg02.png); bottom: -200px; left: 10px; z-index: 10;}
.sec07 .w1080 { position: relative; overflow: hidden;}
.sec07 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec07 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec07 .w1030 .txt { width: 300px;}
.sec07 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec07 .w1030 .txt p { margin: 0; font-size: 14px; line-height: 22px;}
.sec07 .w1030 img { float: right; margin: -90px 0 0;}






/*----------------------------------------------------

 sec08

----------------------------------------------------*/
.sec08 { width: 100%; padding: 50px 0; margin: 0; background: #fff6e9; position: relative;}
.sec08::before { position: absolute; content: url(../images/technology/sec08Bg01.png); top: -30px; right: -100px;}
.sec08 .w1080 { position: relative; overflow: hidden;}
.sec08 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec08 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec08 .w1030 .txt { width: auto;}
.sec08 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec08 .w1030 .txt p { margin: 0; font-size: 14px; line-height: 22px;}
.sec08 .w1030 img { float: right; margin: -40px 0 0;}


  



/*----------------------------------------------------

 sec09

----------------------------------------------------*/
.sec09 { width: 100%; padding: 50px 0; margin: 0; background: #FFF; position: relative;}
.sec09::before { position: absolute; content: url(../images/technology/sec09Bg01.png); top: 0; right: 0;}
.sec09 .w1080 {}
.sec09 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec09 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec09 .w1030 .txt { width: 320px;}
.sec09 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal;}
.sec09 .w1030 .txt p { margin: 0; font-size: 12px; line-height: 22px;}
.sec09 .w1030 img { float: right; margin: -80px 100px 0 0;}













}

/*sp*/
@media only screen and (max-width: 599px) {

/*main { overflow: hidden;}*/

/*----------------------------------------------------

 head

----------------------------------------------------*/
.hedImg { width: 100%; height: 180px; background: url(../images/technology/hedImg.jpg) center center no-repeat; background-size: cover; margin: 0 auto 0px; text-align: center; color: #FFF; padding: 50px 0 0; box-sizing: border-box;}
.hedImg h2 { width: 100%; font-size: 30px; font-family:Arial, Helvetica, sans-serif;}
.hedImg p { width: 100%; font-size: 18px;}

.navBg ul li:nth-of-type(5) a { color: #eb6100;}



/*----------------------------------------------------

 sec01

----------------------------------------------------*/
.sec01 { width: 94%; margin:0 auto 0; position:relative;}
.sec01 .w1080 { background: url(../images/technology/sec01Img01.jpg) bottom left no-repeat; background-size: 60% auto; height:660px;}
.sec01 .ttl { padding: 50px 0 0;}
.sec01 .ttl h3 { width: 100%; font-size: 30px; font-family : 'SimSun','sans-serif'; color: #eb6100; margin: 0 0 20px;}
.sec01 .ttl p { width: 100%; font-size: 16px;}
.sec01 img { position:absolute; bottom:50px; right:10px; width:50%;}






/*----------------------------------------------------

 sec02

----------------------------------------------------*/
.sec02 { width: 100%; margin: 0; background: #eaf0f5; text-align: center;}
.sec02 .w1080 { width: 100%; padding: 50px 0;}
.sec02 .w1080 .map { position: relative;}
.sec02 .w1080 img { width: auto; height: auto;}

.sec02 .w1080 .map .btn01 { width: 176px; height: 44px; position: absolute; top: 28px; left: 33px; }
.sec02 .w1080 .map .btn02 { width: 176px; height: 44px; position: absolute; top: 201px; left: 33px; }
.sec02 .w1080 .map .btn03 { width: 176px; height: 44px; position: absolute; top: 410px; left: 33px; }
.sec02 .w1080 .map .btn04 { width: 176px; height: 44px; position: absolute; top: 584px; left: 33px; }
.sec02 .w1080 .map .btn05 { width: 176px; height: 44px; position: absolute; top: 738px; left: 33px; }
.sec02 .w1080 .map .btn06 { width: 176px; height: 44px; position: absolute; top: 840px; left: 33px; }
.sec02 .w1080 .map .btn07 { width: 176px; height: 44px; position: absolute; top: 1002px; left: 33px; }

.sec02 .w1080 .map div a { display: block; position: relative;}
.sec02 .w1080 .map div a:hover { display: block; opacity: 1.0;}

.sec02 .w1080 .map div a .off { position: absolute; top: 0; left: 0; opacity: 1.0;}
.sec02 .w1080 .map div a .on { position: absolute; top: 0; left: 0; opacity: 0;}

.sec02 .w1080 .map div a:hover .off { position: absolute; top: 0; left: 0; opacity: 0;}
.sec02 .w1080 .map div a:hover .on { position: absolute; top: 0; left: 0; opacity: 1.0;}


.sec02 a img,
.sec02 a:hover img {
	transition: all 0.5s  ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.scroll-box {
	width:96%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;  /* 隲ｷ�｣隲､�ｧ郢ｧ�ｹ郢ｧ�ｯ郢晢ｽｭ郢晢ｽｼ郢晢ｽｫ */
	margin-bottom:0;
}

.scroll-box::-webkit-scrollbar {
	height: 5px;
}

.scroll-box::-webkit-scrollbar-track {
	border-radius: 0px;
	background: #EEEEEE;
}

.scroll-box::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #666666;
}




/*----------------------------------------------------

 sec03

----------------------------------------------------*/
.sec03 { width: 100%; padding: 50px 0; margin: 0; background: #FFF; position: relative; overflow: hidden;}
.sec03::before { position: absolute; content: url(../images/technology/sec03Bg01.png); top: -50px; left: -100px;}
.sec03::after { position: absolute; content: url(../images/technology/sec03Bg02.png); top: 0; right: -100px;}
.sec03 .w900 { position: relative; overflow: hidden;}
.sec03 .ttl { text-align: center; padding: 0; position:relative; z-index:10;}
.sec03 .ttl h3 { width: 100%; font-size: 30px; font-family : 'SimSun','sans-serif'; color: #eb6100; margin: auto auto 10px;}
.sec03 .ttl p { width: 100%; font-size: 16px; margin: auto auto 10px;}
.sec03 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec03 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec03 .w1030 .txt { width: 94%; margin:0 auto;}
.sec03 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec03 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec03 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec03 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec03 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec03 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec03 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}


 


/*----------------------------------------------------

 sec04

----------------------------------------------------*/
.sec04 { width: 100%; padding: 20px 0; margin: 0; background: #fff6e9; position: relative;}
.sec04::before { position: absolute; content: url(../images/technology/sec04Bg01.png); top: 0; left: 0px;}
.sec04 .w1080 { position: relative; overflow: hidden;}
.sec04 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec04 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec04 .w1030 .txt { width: 94%; margin:0 auto;}
.sec04 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec04 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec04 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec04 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec04 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec04 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec04 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}






/*----------------------------------------------------

 sec05

----------------------------------------------------*/
.sec05 { width: 100%; padding: 20px 0; margin: 0; background: #FFF; position: relative;}
.sec05::before { position: absolute; content: url(../images/technology/sec05Bg01.png); top: 0px; left: -120px;}
.sec05 .w1080 { position: relative; overflow: hidden;}
.sec05 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec05 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec05 .w1030 .txt { width: 94%; margin:0 auto;}
.sec05 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec05 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec05 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec05 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec05 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec05 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec05 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}






/*----------------------------------------------------

 sec06

----------------------------------------------------*/
.sec06 { width: 100%; padding:20px 0; margin: 0; background: #fff6e9; position: relative;}
.sec06::before { position: absolute; content: url(../images/technology/sec06Bg01.png); top: -100px; right: -100px;}
.sec06 .w1080 { position: relative; overflow: hidden;}
.sec06 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec06 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec06 .w1030 .txt { width: 94%; margin:0 auto;}
.sec06 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec06 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec06 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec06 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec06 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec06 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec06 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}


  



/*----------------------------------------------------

 sec07

----------------------------------------------------*/
.sec07 { width: 100%; padding: 20px 0; margin: 0; background: #FFF; position: relative;}
.sec07::before { position: absolute; content: url(../images/technology/sec07Bg01.png); top: -30px; right: -200px;}
/*.sec07::after { position: absolute; content: url(../images/technology/sec07Bg02.png); bottom: -200px; left: 10px; z-index: 10;}*/
.sec07 .w1080 { position: relative; overflow: hidden;}
.sec07 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec07 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec07 .w1030 .txt { width: 94%; margin:0 auto;}
.sec07 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec07 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec07 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec07 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec07 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec07 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec07 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}






/*----------------------------------------------------

 sec08

----------------------------------------------------*/
.sec08 { width: 100%; padding: 20px 0; margin: 0; background: #fff6e9; position: relative;}
.sec08::before { position: absolute; content: url(../images/technology/sec08Bg01.png); top: -30px; right: -100px;}
.sec08 .w1080 { position: relative; overflow: hidden;}
.sec08 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec08 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec08 .w1030 .txt { width: 94%; margin:0 auto;}
.sec08 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec08 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec08 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec08 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec08 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec08 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec08 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}


  



/*----------------------------------------------------

 sec09

----------------------------------------------------*/
.sec09 { width: 100%; padding: 20px 0; margin: 0; background: #FFF; position: relative;}
.sec09::before { position: absolute; content: url(../images/technology/sec09Bg01.png); top: 0; left: -200px;}
.sec09 .w1080 {}
.sec09 .w1080 .hexagon { padding: 30px 0; text-align: center;}
.sec09 .w1080 .hexagon img { filter: drop-shadow( 5px 5px 5px #999);}

.sec09 .w1030 .txt { width: 94%; margin:0 auto;}
.sec09 .w1030 .txt h4 { color: #eb6100; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal;}
.sec09 .w1030 .txt p { margin: 0 0 5%; font-size: 16px; line-height: 22px;}
/*.sec09 .w1030 img { width:100%; height:auto; margin:20px 0 0;}*/
.sec09 .w1030 .spImg { list-style: none; margin: 0; padding: 0;}
.sec09 .w1030 .spImg li { margin: 0 5% 5%; padding: 0; text-align: right; font-size: 14px;}
.sec09 .w1030 .spImg li:last-child { margin-bottom: 0; padding: 0;}
.sec09 .w1030 .spImg li img { width: 100%; height: auto; border-radius: 5px;}


	
	
}