@charset "utf-8";
a, input, button{outline:none;}
img, input{border:0;}
.Details{width:1200px; margin:0 auto;}
.clear { clear:both; }

/* CSS Document */
.btn-down{text-align: center;}
.btn-down a{width: 280px;height: 60px;line-height: 60px;display: inline-block;border-radius: 5px;color: #fff;font-size: 22px;text-align: left;margin: 15px;border: 1px solid transparent;}
.btn-down a span{margin-left: 30px;}
.btn-down a span::after{content: '';display: inline-block;width: 1px;height: 30px;background-color: #fff;border-right: 1px solid #0cad85;vertical-align: middle;opacity: 0.3;margin-left: 15px;}
.btn-down a:nth-of-type(1){background: url(../images/index-jp/window.png) no-repeat 238px center #0ca6f2;}
.btn-down a:nth-of-type(2){background: url(../images/index-jp/mac.png) no-repeat 238px center #0ec799;}
.btn-down a:nth-of-type(1):hover span::after{background-color: #0ca6f2;border-right: 1px solid #0ca6f2;}
.btn-down a:nth-of-type(2):hover span::after{background-color: #0ec799;border-right: 1px solid #0ec799;}
.btn-down a:nth-of-type(1):hover{background: url(../images/index-jp/window-hover.png) no-repeat 238px center transparent;border: 1px solid #0ca6f2;color: #0ca6f2;}
.btn-down a:nth-of-type(2):hover{background: url(../images/index-jp/mac-hover.png) no-repeat 238px center transparent;border: 1px solid #0ec799;color: #0ec799;}
/* CSS Document */
.DivMain01 {margin-top: 71px; background: url(../images/index-jp/bg01.jpg) top center no-repeat;text-align: center;padding: 100px 0;}
.DivMain01 h1{font-size: 51px;color: #fff;padding: 40px 0 50px;line-height: 1.5;}
.DivMain01 h2{font-size: 24px;color: #ebebeb;line-height: 1.5;}
.DivMain01 .Feature{background: #ffffff;padding: 80px 0;margin-top: 70px;text-align: left;box-shadow: 0 10px 10px #f8f8f8;}
.DivMain01 .Feature ul::after{content: '';display: block;clear: both;}
.DivMain01 .Feature ul li{float: left;width: 300px;margin: 0 50px;}
.DivMain01 .Feature .img-box{height: 200px;}
.DivMain01 .Feature img{height: 100%;vertical-align: text-bottom;}
.DivMain01 .Feature h4{font-size: 21px;color: #222222;font-weight: 600;position: relative;margin-top: 30px;}
.DivMain01 .Feature h4::after{content: '';display: inline-block;height: 1px;background-color: #dddddd;position: absolute;top: 15px;right: 0;width: 200px;}
.DivMain01 .Feature h5{font-size: 17px;color: #222222;margin-top: 15px;}
.DivMain01 .Feature p{font-size: 15px;color: #666666;line-height: 1.5;padding-top: 10px;}
/* CSS Document */
.DivMain02 {background: #f3f5f5;}
.DivMain02-bg{background: url(../images/index-jp/bg02.jpg) bottom center no-repeat #f3f5f5;}
.DivMain02 .main-con::after{content: '';display: block;clear: both;}
.DivMain02 .main-con .left{float: left;width: 50%;}
.DivMain02 .main-con .left .con{float: right;padding: 0 50px;}
.DivMain02 .main-con .right{float: right;width: 50%;text-align: right;}
.DivMain02 .main-con .right .con{float: left;padding: 0 50px;text-align: left;}
.DivMain02 .main-con h3{font-size: 29px;color: #000000;font-weight: 600;padding-top: 15px;line-height: 1.5;}
.DivMain02 .main-con h4{font-size: 24px;color: #333333;padding: 15px 0 20px;}
.DivMain02 .main-con h5{font-size: 18px;color: #000000;}
.DivMain02 .main-con img{width: 100%;}
.DivMain02 .main-con ul {padding: 50px 0 50px 15px;}
.DivMain02 .main-con ul li{list-style: disc;color: #fa9a41;}
.DivMain02 .main-con ul span{color: #444444;font-size: 15px;}
.DivMain02 .main-con .more a{color: #555555;}
.DivMain02 .main-con .more a span{position: relative;left: 0;transition: left .8s ease-in-out;}
.DivMain02 .main-con .more a:hover span{left: 10px;}
/* CSS Document */
.box-radius { border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;  }
.DivMain03 {  background: #f3f5f5; min-height: 410px; padding: 0 0 30px; }
.DivMain03-bg{background: url(../images/index-jp/bg03.jpg) top center no-repeat;}
.DivMain03 h2 { color: #000000; font-size: 35px; text-align: center; padding: 40px 0 10px; line-height: 45px; }
.DivMain03 .Cent { margin: 20px 0px; background: #fff; padding: 20px 90px; box-shadow: 0px 5px 15px #f0f0f0; -webkit-box-shadow: 0px 5px 15px #f0f0f0; 
	-moz-box-shadow: 0px 5px 15px #f0f0f0; -o-box-shadow: 0px 5px 15px #f0f0f0; min-height: 160px; }
.DivMain03 .Cent .Left, .DivMain03 .Cent .Right { width: 340px; float: left; }
.DivMain03 .Cent .Left h6, .DivMain03 .Cent .Right h6 { font-size: 17px; padding: 20px 0 0; }
.DivMain03 .Cent .Left h6 span, .DivMain03 .Cent .Right h6 span { width: 20px; height: 20px; display: inline-block; line-height: 20px; border-radius: 50%; -o-border-radius: 50%; 
	-webkit-border-radius: 50%; color: #0ca6f2; border:solid 1px #0ca6f2; text-align: center; }
.DivMain03 .Cent .Right h6 span { color: #6abb17; border:solid 1px #6abb17; }
.DivMain03 .Cent .Left .Input { padding: 10px 0 0; position: relative; }
.DivMain03 .Cent .Left .Input input { font-size: 15px; background: #f4f4f4; width: 220px; height: 36px; border-radius: 5px; -o-border-radius: 5px; 
	-webkit-border-radius: 5px; float: left; padding: 10px;  }
.DivMain03 .Cent .Left .Input .But { height: 56px; width: 52px; background: url(../images/index-jp/div03-img02-nine.png) center no-repeat #0ca6f2; float: left;
border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.DivMain03 .Cent .Left .Input .tab {  width: 290px; border:1px solid #ddd; position: absolute; top: 65px; left: 0; border-radius: 5px; -o-border-radius: 5px; 
	-webkit-border-radius: 5px; padding: 10px 0; background: #fff; display: none;  }
.DivMain03 .Cent .Left .Input .tab ul { cursor: pointer; }
.DivMain03 .Cent .Left .Input .tab ul li { padding: 3px 10px; width: 270px; font-size: 15px; line-height: 23px; position: relative;  }
.DivMain03 .Cent .Left .Input .tab ul li.more {  background: url(../images/index-jp/div03-img01-nine.png) 240px center no-repeat; }
.DivMain03 .Cent .Left .Input .tab ul li:hover { background: #329be5; color: #fff; }
.DivMain03 .Cent .Left .Input .tab ul li.more:hover { background: url(../images/index-jp/div03-img01-nine.png) 240px center no-repeat #329be5; color: #fff; }
.DivMain03 .Cent .Left .Input .tab ul li .tab02 { width: 180px; position: absolute; left: 275px; top: 0;  border-radius: 5px; -o-border-radius: 5px; 
	-webkit-border-radius: 5px; padding: 10px 0; border:1px solid #ddd; background: #fff; z-index: 10; display: none;  }
.DivMain03 .Cent .Left .Input .tab ul li .tab02 ol { cursor: pointer; color: #333;  }
.DivMain03 .Cent .Left .Input .tab ul li .tab02 ol li { padding: 3px 10px; width: 160px; font-size: 15px; line-height: 23px; }
.DivMain03 .Cent .Left .Input .tab ul li .tab02 ol li:hover { width: 160px; background: #329be5; color: #fff; }
.DivMain03 .Cent .Right .Put { padding: 10px 0 0; }
.DivMain03 .Cent .Right .Put a { text-decoration: none; }
.DivMain03 .Cent .Right .Put .down { width: 250px; height: 57px; border-radius: 5px; background: #6abb17; font-size: 19px; color: #fff;  line-height: 57px;
 text-align: center; }
 /* ----------------- */
.DivMain04 {background: #f5f7f7;padding: 30px 0;}
.DivMain04 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain04 ul li{width: 48%;float: left;text-align: center;background: #ffffff;padding: 30px;box-sizing: border-box;margin: 10px;min-height: 360px;border-radius: 10px;border: 1px solid #e5e4e1;}
.DivMain04 ul li strong{display: block;}
.DivMain04 ul li strong::before{content: '';display: inline-block;width: 100px;height: 1px;background: #e0e0e0;position: relative;top:-5px;right: 15px;}
.DivMain04 ul li strong::after{content: '';display: inline-block;width: 100px;height: 1px;background: #e0e0e0;position: relative;top:-5px;left: 15px;}
.DivMain04 ul li h4{font-size: 19px;font-weight: 600;color: #000;}
.DivMain04 ul li p{font-size: 14px;color: #838383;padding-top: 20px;}
.DivMain04 ul li .img-box{padding: 25px 0;}
.DivMain04 .main04-btn{text-align: center;}
.DivMain04 .main04-btn p{color: #ff9019;font-size: 16px;padding: 30px 0;}
.DivMain04 .main04-btn a{background: #ffa600;padding: 20px 40px;border-radius: 5px;transition: all 0.5s;position: relative;}
.DivMain04 .main04-btn a:hover{background-color: #fe9635;top:1px;}
.DivMain04 .main04-btn a span{color: #fff;font-weight: 600;font-size: 19px;}
/* ----------------- */
.DivMain05 {background: #f5f7f7;padding: 30px 0;}
.DivMain05 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain05 table{border:1px solid #e5e4e1;text-align: center;width: 100%;border-collapse:collapse;background: #fffdfa;}
.DivMain05 table th{padding: 15px 0;border:1px solid #f0efeb;}
.DivMain05 table th a:hover{text-decoration: underline;color: #ffa600;}
.DivMain05 table td{border:1px solid #f0efeb;padding: 20px 0;font-size: 15px;}
.DivMain05 table td:nth-of-type(1){text-align: left;padding-left: 60px;}
.DivMain05 table tr:nth-of-type(even){background: #ffffff;}
.DivMain05 table tr h3{font-size: 28px;font-weight: 600;}
.DivMain05 table tr h4{font-size: 15px;font-weight: 600;padding-top: 15px;}
/* ----------------- */
.DivMain06 {background: #f5f7f7;padding: 30px 0;}
.DivMain06 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain06 img{width: 100%;}
.DivMain06 p{padding-top: 20px;text-align: center;}
.DivMain06 p a{color: #ff8e1c;text-decoration: underline;font-size: 18px;}
/* ----------------- */
.DivMain07{background:#fff;color: #181818;}
.DivMain07 h3{font-size: 26px;border-bottom:4px solid #dddddd;padding: 25px 0;margin-bottom: 30px;}
.DivMain07 .left{float: left;width: 20%;}
.DivMain07 .right{float: right;width: 80%;padding-left: 40px;box-sizing: border-box;}
.DivMain07 .right p{line-height: 35px;font-size: 15px;}
.DivMain07 .right p strong{float: left;text-align: right;display: block;width: 180px;}
.DivMain07 .right p span{display: inline-block;width: 540px;padding-left: 30px;}
.DivMain07 .right .drp_btn2{text-decoration: underline;color: #05bdfd;}
.DivMain07 .right .drp_btn2 strong{width: 100%;text-align: left;margin: 10px 0;}
.DivMain07 .right .drp_btn2:hover{color: #4185ea;}
.DivMain07 .des{text-align: center;color: #181818;padding: 40px 0 20px;}
.DivMain07 .line{border-bottom: 1px #b4b4b4 dashed;padding-top: 50px;}
/* ----------------- */
.DivMain08{background:#fff;color: #5c5c5c;padding-bottom:100px;text-align: center;}
.DivMain08 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain08 h4{color: #000;padding:30px 0;font-size: 23px;}
.DivMain08 ul li{float: left;width: 33.33%;padding: 0 20px;box-sizing: border-box;}
/* ----------------- */
.DivMain09{background:url(../images/index-jp/bg09.jpg)no-repeat center;height: 439px;padding-top:50px;box-sizing: border-box;text-align: center;}
.DivMain09 h3{font-size: 23px;line-height: 1.5;padding-top: 30px;color: #666666;}
.DivMain09 .button-group {padding: 30px 0;}
.DivMain09 .button-group a{display: inline-block;background: #16c79b;color: #fff;border-radius: 30px;width: 320px;height: 60px;line-height: 60px;transition: all 0.5s;}
.DivMain09 .button-group a:hover{background-color: #2e8b57;box-shadow: none;-webkit-transform: translateY(1px);transform: translateY(1px);transform: scale(1.1);}
.DivMain09 .button-group a span{margin-left: 15px;font-size: 20px;font-weight: 600;}
.DivMain09 .button-group a img{vertical-align: -5px;}
/* ----------------- */
.DivMain010{padding: 60px 0;}
.DivMain010 .control {position: relative;user-select:none;}
.DivMain010 .control-direction{position: absolute;width: 27px;height: 49px;top:50%;transform: translateY(-50%);cursor: pointer;}
.DivMain010 .control-direction.left{left:60px;}
.DivMain010 .control-direction.right{right:60px;}
.DivMain010 .screen{max-width: 790px;overflow: hidden;margin: 0 auto;position: relative;height: 540px;}
.DivMain010 .screen ul{width: 500%;position: absolute;top: 0;left: 0;transition: left 1s;}
.DivMain010 .screen ul::after{content: '';display: block;clear: both;}
.DivMain010 .screen ul li{width: 20%;float: left;}
.DivMain010 .screen ul li img{width: 100%;}
.DivMain010 .control-origin ul{display: flex;justify-content: center;align-items: center;padding-top: 30px;}
.DivMain010 .control-origin ul li{width: 10px;height: 10px;background: #afafaf;border-radius: 50%;margin: 0 15px;cursor: pointer;}
.DivMain010 .control-origin ul li.focus{background: #f07c0c;}
.DivMain010 p{font-size: 16px;color: #000000;text-align: center;padding: 30px 0;}
.DivMain010 p span{font-weight: 600;color: #ff9019;}
.DivMain010 .device ul{display: flex;justify-content: center;align-items: center;}
.DivMain010 .device ul li{text-align: center;margin: 0 35px;}
.DivMain010 .device ul li span{display: block;margin-top: 15px;}
/* ----------------- */
@media (max-width: 979px) {
	.Details{width:100%; padding: 0 15px; box-sizing: border-box;}
	.DivMain01 {padding: 30px 0;}
	.DivMain01 h1{font-size: 33px;padding: 15px 0;}
	.DivMain01 h2{font-size: 19px;}
	.DivMain01 .Feature{margin-top: 15px;padding: 15px 0;}
	.DivMain01 .Feature ul li{float: none;margin: 0 auto 30px;}
/* CSS Document */
	.DivMain02 {padding-bottom: 30px;}
	.DivMain02 .main-con .left{float: none;width: 100%;}
	.DivMain02 .main-con .left .con{float: none;}
	.DivMain02 .main-con .right{float: none;width: 100%;}
	.DivMain02 .main-con .right .con{float: none;}
/* CSS Document */
	.DivMain03 { display: none; }
/* CSS Document */
	.DivMain04 ul li{float: none;width: 80%;margin: 10px auto;}
/* CSS Document */
	.DivMain05 table td:nth-of-type(1){padding-left: 0;text-align: center;}
/* CSS Document */
	.DivMain010 .control-direction{display: none;}
	.DivMain010 .screen{ width: 100%;height: 450px;}
	.DivMain010 .device ul{flex-wrap: wrap;}
	.DivMain010 .device ul li{margin:5px 15px;}
/* CSS Document */
	.DivMain07 h3{font-size: 18px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	.DivMain07 .left p {text-align: center;}
	.DivMain07 .left img {width: 100%;}
	.DivMain07 .left p strong{display: block;width: 100%;}
	.DivMain07 .right p strong{text-align: left;display: block;width: 100%;float:none;padding-left: 30px;box-sizing: border-box;}
	.DivMain07 .right p span{display: block;width: 100%;padding-left: 30px;box-sizing: border-box;}
/* CSS Document */
	.DivMain09{height: auto;padding:30px 0;}
}
@media (max-width: 767px) {
	.DivMain01 {background: #3c3c3c;}
	.DivMain01 h1{font-size: 25px;}
	.DivMain01 h2{font-size: 17px;}
	.DivMain01 .Feature{box-shadow: 0 0;}
/* CSS Document */
	.DivMain02 .main-con .left .con{padding: 0 15px;}
	.DivMain02 .main-con .right .con{padding: 0 15px;}
	.DivMain02 .main-con h3{font-size: 27px;}
/* CSS Document */
	.DivMain03 .main03-list span{display: block;}
/* CSS Document */
	.DivMain010 .screen{height: 280px;}
/* CSS Document */
	.DivMain08{padding: 0;}
/* CSS Document */
	.DivMain09{background: #fff;}
	.DivMain09 h3{font-size: 17px;}
	.DivMain09 p{font-size: 13px;}

}
@media (max-width: 479px) {
	body { margin:0; padding:0; font:13px/23px; color:#333; text-align:justify; }
/* CSS Document */
	.DivMain01 h1{font-size: 21px;}
	.DivMain01 h2{font-size: 15px;}
/* CSS Document */
	.DivMain02 .main-con h3{font-size: 18px;}
	.DivMain02 .main-con h4{font-size: 17px;}
	.DivMain02 .main-con h5{font-size: 15px;}
	.DivMain02 .main-con ul {padding: 15px 0 15px 15px;}
	.DivMain02 .main-con ul span{font-size: 13px;}
/* CSS Document */
	.DivMain04 ul li{width: 100%;}
	.DivMain04 .main04-btn a{padding: 15px 20px;}
	.DivMain05 {display: none;}
	.DivMain06 {display: none;}
	.DivMain010 {display: none;}
	.DivMain08 h3{padding: 30px 0;}
	.DivMain08 ul {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
	.DivMain08 ul li{float: none;width: 100%;padding:20px;}
}