@charset "utf-8";

 
/* product-sec */


.screen-1 {position: relative;}
.screen-1 .left {position: absolute;width: 40%;height: 100%;left: 12.5%;}
.screen-1 .left .title-style h1{font-size: 74px;}
.screen-1 .left .text{font-size: 18px;line-height: 26px;color: #89898a;margin: auto;}
.screen-1 .left .view-btn {margin: 50px auto auto}
.screen-1 .img{}
.screen-1 .img img{display: block;} 

.screen-2 {position: relative;}
.screen-2 .upper {}
.screen-2 .upper .left{width: 45%;}
.screen-2 .upper .left .title-style{margin-top: 50px;}
.screen-2 .upper .left .title-style h2{color: #fff;}
.screen-2 .upper .left .text{padding: 20px 0;overflow: hidden; color: #bcbcbc;font-size: 16px;line-height: 26px;width: 70%;}
.screen-2 .upper .right{width: 45%;}
.screen-2 .img img{display: block;} 


.screen-3 {position: relative;}
.screen-3 .upper {}
.screen-3 .upper .left{width: 45%;}
.screen-3 .upper .right {width: 45%;}
.screen-3 .upper .right .title-style{margin-top: 50px;}
.screen-3 .upper .right .title-style h2{color: #fff;}
.screen-3 .upper .right .text{padding: 20px 0;overflow: hidden; color: #bcbcbc;font-size: 16px;line-height: 26px;width: 70%;}
.screen-3 .img img{display: block;} 


.screen-4 {position: relative;}
.screen-4 .left {position: absolute;width:40.5%;height: 100%;padding-left: 12.5%; background: url("4-01.jpg");background-size: 100% 100%;}
.screen-4 .left .title-style h2{color: #fff;}
.screen-4 .left .text{padding: 10px 0; font-size: 16px;line-height: 26px;color: #fff;width:90%;margin: 0}
.screen-4 .right {width:47%;}
.screen-4 .right img{display: block;} 


.screen-5 {position: relative;}
.screen-5 .upper .left{width: 45%;display: inline-block;vertical-align: middle;float: none;}
.screen-5 .upper .left .title-style{margin-top: 50px;}
.screen-5 .upper .left .text{padding: 20px 0;overflow: hidden; color: #8d8d8d;font-size: 16px;line-height: 26px;}
.screen-5 .upper .right{width: 50%;display: inline-block;vertical-align: middle;float: none;text-align: right;margin-left: 3%;}
.screen-5 .img img{display: block;}


.screen-6 {position: relative;}
.screen-6 .center{width: 500px;left: 50%;margin-left: -250px;top:15%;z-index: 11;position: absolute;text-align: center;}
.screen-6 .center .title-style{}
.screen-6 .center .title-style h2{color: #fff;}
.screen-6 .center .title-style .line {margin: 20px auto auto;}
.screen-6 .center .text{padding: 20px 0;overflow: hidden; color: #b1b3b4;font-size: 16px;line-height: 26px;}
.screen-6 .upper{}
.screen-6 .upper img{}



.screen-7 {min-height: 1058px;position: relative;}
.screen-7 .left {margin-left: 12.5%;margin-top: 120px;width:47%;}
.screen-7 .left .title-style h2{color: #fff;}
.screen-7 .left .title-style .line{}
.screen-7 .left .table{padding-top: 30px;overflow: hidden;}
.screen-7 .right {position: absolute;right: 0;top: 0;width: 40%;height: 100%;}
.screen-7 .right .img{margin-top: 150px;}


.screen-8 {position: relative;}
.screen-8 .center {width: 650px;position: absolute;left: 50%;margin-left: -325px;top: 13%;z-index: 3;text-align: center;}
.screen-8 .center .title-style h2{}
.screen-8 .img{position: relative;}

.link-btn {position: absolute;width: 300px;height: 300px;top: 55%;left: 18%;text-align: center;}
.link-btn ul {list-style: none;margin: 0;padding: 0;display: table;width: 100%;height: 100%;}
.link-btn ul li{list-style: none;margin: 0;padding: 0;display: table-cell;vertical-align: middle;}
.link-btn a{display: block;width: 100%;height: 100%;}
.link-btn .link-a {background-color: rgb(0, 191, 134,.2);display:inline-block;padding: 5px 20px;line-height: 32px;width: 120px; overflow: hidden;border-radius:50px;}
.link-btn .link-a i {display: inline-block;vertical-align: middle;margin-right: 10px;}
.link-btn .link-a h6{display: inline-block;vertical-align: middle;margin: 0;font-weight: normal;font-size: 12px;color: #00bf86;}
.link-btn a:hover .link-a{background-color:#00bf86;}
.link-btn a:hover .link-a h6{color: #fff;}



@media screen and (max-width: 5120px) {
	.screen {background-size: 100%;}
	.screen-1 .img img,.screen-2 .img img,.screen-3 .img img,.screen-4 .right img,.screen-5 .img img,.screen-6 .img img,.screen-8 .img img{width: 100%;}
	.screen-6 .upper {text-align: center;}
	.screen-6 .upper img {display: inline-block;}
	.link-btn {top: 59%;left: 20%;}
}
@media screen and (max-width: 1920px) {
	.screen {background-size: auto;}
	.screen-1 .img img,.screen-2 .img img,.screen-3 .img img,.screen-4 .right img,.screen-5 .img img,.screen-6 .img img,.screen-8 .img img{width: auto;}
	.link-btn {top: 55%;left: 18%;}
}
@media screen and (max-width: 1680px) {
	.upper {left: 10%;width: 80%;}
	.screen-1 .left .title-style h1 {font-size: 60px;} 
	.screen-1 .left .text {font-size: 16px;line-height: 26px;}
	.title-style h2 {font-size: 40px;line-height: 50px;}
	.screen-4 .left {width: 43%;padding-left: 10%;}
	.screen-7 .left {margin-left: 10%;margin-top: 120px;width: 45%;}
	.screen-7 .right {right:2%;width: 35%;}
}

@media screen and (max-width: 1440px) {
	.screen-1 .left .text,.screen-2 .upper .left .text,.screen-4 .left .text,.screen-5 .upper .left .text {font-size: 14px;line-height: 24px;}	 
	.screen-2 .upper .left .text,.screen-3 .upper .right .text {width: 100%;}
	.screen-7 {min-height: 900px;}
	.link-btn {top: 53%;left: 13%;}
}

@media screen and (max-width: 1366px) {
	.link-btn {top: 53%;left: 13%;}
	.screen-6 .center {top: 10%;}
}

@media screen and (max-width: 1280px) {
	.screen-1 .left .title-style h1,.screen-2 .upper .left .title-style h2,.title-style h2  {font-size: 40px;line-height: 40px;}
	.screen-1 .left {width: 45%;left: 5%;}	 
	.upper {left: 5%;width: 90%;}
	.screen-4 .left {width: 48%;padding-left: 5%;}
	.screen-6 .upper {text-align: center;}
	.screen-6 .upper img{width: 90%;margin: auto;}
	.screen-7 .left {margin-left: 5%;margin-top: 120px;width: 45%;}
	.screen-7 {min-height: 800px;}
	.link-btn {top: 50%;left: 13%;}
	.screen-1 .left .text, .screen-2 .upper .left .text, .screen-4 .left .text, .screen-5 .upper .left .text,.screen-3 .upper .right .text {font-size: 12px;line-height: 22px;}
	.screen-5 .upper .left {margin-top: 50px;}
}


@media screen and (max-width: 1152px) {
	.title-style h1, .title-style h2 {font-size: 28px;line-height: 30px;}
	.screen-1 .left .title-style h1, .screen-2 .upper .left .title-style h2, .title-style h2 {font-size: 30px;line-height: 30px;}
	.view-btn h5 {font-size: 12px;}
	.view-btn a{padding: 15px 30px;}	
	.screen-6 .center {top: 10%;left: 0;text-align: left;margin: 0;}
	.screen-6 .center .title-style .line {margin: 20px 0 0;}
	.screen-7 .right .img {margin-top:100px;}
	.screen-7 {min-height: 700px;}
	.link-btn {top: 19%;left: 0;}
}


@media screen and (max-width: 1024px) {
	 
}


@media screen and (max-width: 860px) {
	.screen-1 .left {width:90%;float: none;}
	.screen-2 .upper .left,.screen-2 .upper .right,.screen-3 .upper .left,.screen-3 .upper .right,.screen-4 .right,.screen-4 .left .text,.screen-5 .upper .left,.screen-5 .upper .right {width: 100%;float: none;}
	.screen-1 .title-style{margin-top: 80px;}
	.screen-2 .upper .left .title-style h2{font-size: 30px;line-height: 30px;}
	.screen-2 .upper .left .title-style {margin-top: 0px;}
	.screen-3 .upper .right .title-style  {margin-top: 20px;}
	.screen-4 .left {width: 90%;padding:20% 5% 10% 5%;position: relative;top:auto;overflow: hidden;}
	.screen-5 .upper .left,.screen-5 .upper .left .title-style {margin: 0;}
	.screen-6 .center {position: relative;width: 90%;left: 5%;margin-left: 0px; top: auto;}
	.screen-6 .upper img {width: 100%;}
	.screen-7  {padding: 20% 0;}
	.screen-7 .left {margin:auto;width: 90%;float: none;}
	.screen-7 .right {width:90%;position: relative;top:auto;left: auto;margin:auto;}
	.screen-7 .right .img {margin-top: 50px;}
	.screen-8 .center {width: 90%;left: 5%;margin-left: 0px;top: 11%;}
	.link-btn {top: 15%;left: 50%;margin-left: -150px;}
	.screen-3 .upper .left {display: none;}
	.screen-1 .table,.screen-1 .table-cell {display: block;overflow: hidden;}
	.screen-5 .upper .right {text-align: center;}
	.link-btn {top: 10%;}
} 
/* iPad x */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
/* iPad y */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	
}