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

/*最新消息*/
.pro_title {position: relative;border-bottom: solid 1px #0c7a9b;padding: 0 50px 8px;color: #0c7a9b;display: table;margin: 30px auto 60px;font-size: 3rem;}
.pro_title::after{position: absolute;content:"";right: 50%;margin-right: -7px;bottom: -10px;width: 0;height: 0;border-top: 10px solid #0c7a9b;border-left: 7px solid transparent;border-right: 7px solid transparent;}
.news_list{float: left;width: calc(33.333% - 30px);margin: 0 15px 50px;}
.news_list:nth-child(2n+1){clear: inherit;}
.news_list a{display: block;position: relative;box-shadow: #c5cace 0 4px 2px -2px;padding-bottom: 80px;}
.news_left{border-radius: 5px 5px 0 0;overflow:hidden}
.news_list .news_right{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:15px;
    background:#fff;
    -webkit-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    -ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    transition:all .3s cubic-bezier(0.165,0.84,0.44,1)
}
.news_list .news_des{
    opacity:0;
    height:0;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    -webkit-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    -ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);
    transition:all .3s cubic-bezier(0.165,0.84,0.44,1)
}
.news_list a:hover .news_des{opacity:1;height:70px}
.news_title h1{margin-top: 0;}
.news_date {font-size: 14px;color: #0c7a9b;margin-bottom: 5px;}
.news_right p{color: #4d4d4d;text-align: center;border-top: 1px solid #eee;padding-top: 10px;margin-bottom: 0;}
/*最新消息-底層頁*/
.clear{clear: both;}
.sub_box1, .sub_box2 {margin-bottom: 30px;margin-top: 30px;}
.sub_box1 img{text-align: center;margin: 30px 0; box-shadow: 0 5px 10px -4px #c7c7c7;}
.dl_title1 {text-align: center;}
.dl_date1 {position: relative; text-align: right;font-size: 15px;color: #aeaeae;}
.dl_date1 span {background-color: #fff;padding-left: 10px;}
.dl_date1::before{position: absolute;content: '';left: 0;top: 12px;height: 1px;width: 91%;background-color: #eee;z-index: -1;}
.title_box {margin-bottom: 20px;}
.img_right img {float: right;margin-left: 30px;box-shadow: -5px 5px 10px -4px #c7c7c7;}
.img_left img {float: left;margin-right: 30px;box-shadow: 5px 5px 10px -4px #c7c7c7;}
.movie_box iframe{width: 100%;height: 500px;}
.news_bk{position: relative;}
.news_bk::after{position: absolute;content: '';width: 85%;height: 80%;background-color: #f5f5f5;bottom: 0;z-index: -1;}
.news_bk:nth-of-type(odd)::after{right: 0;}
.news_bk:nth-of-type(even)::after{left: 0;}
center{margin-bottom: 100px;}
/*產品*/
.mj-title-style{text-align: center;margin-bottom: 40px;}
.mj-title-style:after{position: absolute; left: 50%;margin-left: -25px;}
h3.sm-title {
    font-size: 2.1rem;
    background-color: #cbcbcb;
    display: table;
    margin: 0 auto;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #fff;
}
.list_txt {text-align: center;margin-bottom: 40px;}
.list_txt p{letter-spacing: 1px;border-bottom: 1px solid #f8f8f8;margin-bottom: 15px;padding-bottom: 5px;line-height: 26px;}
.img_table2 { margin-bottom:30px;}
.table-container+.table-container{margin-top: 20px;}
.table-container{
	width: 100%;
		overflow-y: auto;
		_overflow: auto;
		margin: 0 0 0;
	   }
.m-tables{width: 100%;background-color:#fff;border-left:1px #eee solid;border-top:1px #eee solid;}
.m-tables th, .m-tables td{font-size: 15px; padding:5px; border-bottom:1px #eee solid; border-right:1px #eee solid; text-align:center;width: calc(100% / 3);}
.m-tables th{font-weight: bold;background-color: #5aacac;font-weight:400;padding: 5px 10px;color: #fff;white-space:nowrap;}
.table_title{padding: 15px 0!important;background:#0c7a9b;background:#5aacac;background:-moz-linear-gradient(-45deg,rgba(90,172,172,1) 0%,rgba(12,122,155,1) 100%);background:-webkit-linear-gradient(-45deg,rgba(90,172,172,1) 0%,rgba(12,122,155,1) 100%);background:linear-gradient(135deg,rgba(90,172,172,1) 0%,rgba(12,122,155,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5aacac',endColorstr='#0c7a9b',GradientType=1);}
.m-tables tr:nth-child(odd){ background-color:#f9f9f9;}
.list_img{text-align: center;margin-top: 30px;}
.list_img img{display: table;margin: 0 auto;}
.advan_solu+.advan_solu{margin: 50px 0 50px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;padding: 30px 0;}
.solu_list{margin: 0 -10px 30px;display: flex;}
.solu_list div{float: left;text-align: center; padding: 10px; margin: 0 10px;border: 1px solid #eee; border-bottom: 4px solid #0c7a9b;}
.solu_2 div{width: calc(100% / 2 - 20px);}
.solu_3 div{width: calc(100% / 3 - 20px);}
.solu_4 div{width: calc(100% / 4 - 20px);}
.solu_list div span{position: relative; font-family: 'Rubik', sans-serif;color: #0c7a9b;}
.solu_list div span::before,.solu_list div span::after{position: absolute;content: '';height: 1px;width: 8px;background-color:#0c7a9b;top: 9px;}
.solu_list div span::before{left: -15px;}
.solu_list div span::after{right: -15px;}
.solu_list div p{margin-bottom: 0;font-size: 15px;margin-top: 5px;color: #838383;}
.process {margin: 0 -5px 0;}
.step_box_first{width: 240px;margin: 0 auto 30px;text-align: center;background-color: #eee;padding: 5px;border-radius: 5px;position: relative;}
.step_box_first::after{
	position: absolute;
	content: '';
	background-image: url(../images/solution/process/down.png);
	background-size: 20px;
	background-repeat: no-repeat;
	width: 35px;
	height: 35px;
	background-position: center;
	right: 50%;
	margin-right: -17.5px;
	bottom: -18px;
	z-index: 1;
	background-color: #fff;
	padding: 5px;
	border-radius: 60px;
	border: 2px solid #0c7a9b;
}
.step_box_other{margin: 0 8px 15px;text-align: center;position: relative;display: inline-block;width: calc(100% / 5 - 20px);}
.step_box_other::after{
	position: absolute;
	content: '';
	background-image: url(../images/solution/process/right.png);
	background-size: 20px;
	background-repeat: no-repeat;
	width: 35px;
	height: 35px;
	background-position: center;
	right: -22px;
	bottom: 120px;
	z-index: 1;
	background-color: #fff;
	padding: 5px;
	border-radius: 60px;
	border: 2px solid #0c7a9b;
}
.step_box_other figure{background-color: #eee;padding: 5px;border-radius: 5px;}
.process .step_box_other:nth-of-type(10)::after{display: none;}
.other_word {position: relative;background-color: #0c7a9b;border-radius: 3px;padding: 5px 20px;color: #fff;margin-bottom: 20px;display: inline-block;}
.other_word::after{position: absolute;content: '';width: 1px;height: 15px;background-color:#0c7a9b;left: 50%;margin-left: -0.5px;bottom: -18px;z-index: 9;}
.step_box p{margin-top: 5px;}


/*產品底層*/
.inner-solution{margin-bottom: 30px;}
.solu_bk{position: relative;margin:30px 0 50px}
.solu_bk::after{position: absolute;content: '';width: 100%;height: 350px;background-color: #fafafa;left: 0;top: 0;z-index: -1;}
.solu_bk p{text-align: center;margin-bottom: 30px;margin-top: 30px;}
.solu_bk p span{font-weight: 600;margin-right: 5px;border-bottom: 1px solid #0c7a9b;}
.img_table{float: left;width: 50%;padding: 0 30px;}
.img_table_single{width: 50%;padding: 0 30px;margin: 0 auto; }
.img_table_lot,.img_table {margin: 60px 0;}
.img_table_lot figure{float: left;width: 40%;}
.img_table_lot figure+div{float: right; width: 55%;}
.img_table_lot_even figure{float: right;}
.img_table_box{width: 80%;margin: 0 auto;}
.img_table_lot_even figure+div{float: left;}
.img_txtt p{margin-top: 50px;}
.img_txtt p span{font-weight: 600;margin-right: 5px;border-bottom: 1px solid #0c7a9b;}
.advan_solu .img_table_bk{position: relative;}
.img_table_bk+.img_table_bk{margin-top: 40px;}
.advan_solu .img_table_bk::after{position: absolute;content: '';width: 60%;height: 400px;background-color: #f8f8f8;bottom: 20px;z-index: -1;}
.advan_solu .img_table_bk:nth-of-type(even)::after{right: 0;}
.advan_solu .img_table_bk:nth-of-type(odd)::after{left: 0;}
.list_img .float_l{position: relative;float: left;width: 48%;margin-top: 30px;border-top: 4px solid #c7c7c7;padding-top: 25px;}
.list_img .float_l::after{
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-top: 10px solid #c7c7c7;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	top: 0;
	left: 50%;
	margin-left: -7px;
}
.list_img .float_r{position: relative;float:right;width: 48%;border-bottom: 4px solid #c7c7c7;padding-bottom: 25px;}
.list_img .float_r::after{
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-bottom: 10px solid #c7c7c7;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	bottom: 0;
	left: 50%;
	margin-left: -7px;
}
.list_img .float_c {display: inline-block;width: 48%;padding-bottom: 25px;}

.img_table_bk+.mj-title-style{margin-top: 30px;}
.img_tt{position: relative;}
.img_tt::before{position: absolute;content: '';width: 70%;height: 200px;top: 30px;z-index: -2;background-color: #fafafa;}
.img_tt:nth-of-type(odd)::before{right: 0;}
.img_tt:nth-of-type(even)::before{left:0;}
.txt_intro{margin-top: 40px;}
.solu_top{margin-top: 30px;}
.advan_solu ul{list-style: none;letter-spacing: 1px;line-height: 26px;padding-left: 0;display: table;margin: 0 auto;}
.advan_solu ul i{margin-right: 5px;color: #0c7a9b;}
.system_6box {display: table;margin: 0 auto;}
.system_6{border-bottom: 1px solid #f8f8f8;margin-bottom: 15px;padding-bottom: 5px;}
.system_6 p{letter-spacing: 1px;line-height: 26px;display: inline-block;vertical-align: middle;margin-left: 10px;}
.system_6 h3{display: inline-block;}
.system_6 .list_txt{float: left;}


/*聯絡我們*/
.contact_bk{position:relative;padding-bottom: 150px;}
.contact_bk:before{position:absolute;content:'';width: 60%;height: 75%;background-image: url(../images/contact/bk.jpg?20190702);background-size: contain;background-repeat: no-repeat;background-position: 20% bottom;opacity: .7;left: 10%;bottom: 0;z-index: -1;}
.contact_txt {text-align: center;margin-bottom: 50px;}
.con_form{width: 50%;float: left;}
.con_info{width: 45%;float: right;background-color: rgba(255, 255, 255, 0.7);padding: 40px 30px 20px;box-shadow: 0px 5px 15px -3px #929292;}
.textarea{height: 150px;padding: 2.5em 0.15em 1em!important;}
textarea:focus{border: none!important;}
.com_tit{margin-bottom: 30px;font-size: 18px;font-weight: 600;color: #959595;padding-bottom: 5px;border-bottom: 1px solid #e6e7e8;}
.company_box ul{padding-left: 0;}
.company_box ul li{clear: both;padding-bottom: 20px;color: #333;overflow: hidden;height: 70px;font-size: 0;}
.company_box ul li:before {content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.company_box ul li .tx_r {  width: 80%;   display: inline-block;  vertical-align: middle;  font-size: 16px;}
.company_box ul li .box1 {float: left;width: 50px;height: 50px;display: block;text-align: center;padding-top: 7px;border: 2px solid #0c7a9b;margin-right: 8px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}
.company_box ul li .box1 i {color: #0c7a9b;font-size: 26px;line-height: 30px;margin: 0;}
.company_box ul li:hover .box1 {background: #0c7a9b;}
.company_box ul li:hover i {  color: #fff;}
.con_map iframe{height: 300px;}
.code_l{float: left;width: 200px;}
.code_r{float: left;margin-left: 20px;margin-top: 25px;}
.contact_b_img{display: none;}
/*輸入框樣式*/
.input {
	position: relative;
	z-index: 1;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
.con_block_l{float: left;width: 49%;}
.con_block_r{float: right;width: 49%;}
.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: bold;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #6a7989;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1em 0 0;
	width: 100%;
	font-size: 16px;
	color: #5aacac;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

input:-internal-autofill-selected{
	background-color: transparent!important;
}
/* Hoshi */
.input--hoshi {overflow: hidden;}
.input__field--hoshi {margin-top: 1em;padding: 2em 0.15em 1em;width: 100%;background: transparent;color: #595F6E;line-height: 20px;}
.input__label--hoshi {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.25em;
	width: 100%;
	height: calc(100% - 1em);
	text-align: left;
	pointer-events: none;
}
.input__label-content--hoshi {position: absolute;}

.input__label--hoshi::before,
.input__label--hoshi::after {
	content: '';
	position: absolute;
	top: 0;
	left:-1px;
	width: 100%;
	height: calc(100% - 10px);
	border-bottom: 1px solid #B9C1CA;
}

.input__label--hoshi::after {
	margin-top: 2px;
	border-bottom: 4px solid red;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}


.input__label--hoshi-color-3::after {
	border-color: #5aacac;
}

.input__field--hoshi:focus + .input__label--hoshi::after,
.input--filled .input__label--hoshi::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
.input--filled .input__label-content--hoshi {
	-webkit-animation: anim-1 0.3s forwards;
	animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}

@keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}
@media (max-width: 996px){
	/*產品*/
	.step_box_other {width: calc(100% / 4 - 10px);margin: 0 3px 10px;}
	.step_box_other img {width: 100%;}
	.step_box_other::after {right: -12px;background-size: 15px;width: 30px;height: 30px;bottom: 90px;}
	/*最新消息*/
	.news_list{width: calc(100% / 2 - 30px);}
}
@media (max-width: 768px) { 

	/*產品*/
	.pro_title, h3.sm-title,.mj-title{text-align: center;font-size: 2.4rem;}
	.solu_list {flex-wrap: wrap;}
	.solu_4 div {width: calc(100% / 2 - 20px);margin: 0 10px 20px;}
	/*產品底層*/
	.img_table figure {float: none;width: 100%;margin-bottom: 20px;}
	.img_table .table-container {width: 100%;float: none;}
	.advan_solu .img_table_bk::after{display: none}
	.img_table {margin: 0 0 20px;}
	.img_table figure+div {float: none;width: 100%;text-align: center;}
	.img_table .img_txtt p {margin-top: 30px;}
	.img_tt::before {width: 100%;height: 90%;bottom: 0;top: auto;}
	.solu_bk::after {height: 102%;}
	/*最新消息*/
	.news_list{float: none;margin: 0 auto 30px;width: 350px;}
	/*最新消息底層*/
	.news_bk::after{width: 100%;}
	.movie_box iframe {height: 36vh;}
	/*聯絡我們*/
	.contact_bk{padding-bottom: 30px;}
	.contact_txt{margin-bottom: 40px;}
	.con_form,.con_info {width: 100%;float: none;padding: 20px;}
	.com_tit{margin-bottom: 20px;}
	.contact_bk:before{display: none}
	.contact_b_img{display: block;}
	.company_box ul li{height: auto;padding-bottom: 10px;}
	.company_box ul li .box1 {width: 40px;height: 40px;}
	.company_box ul li .box1 i {font-size: 22px;line-height: 22px;}
	.company_box ul li .tx_r{margin-top: 5px;}
	.btnWrap{margin: 20px 0 0;}
}
@media (max-width: 640px){
	.pro_title {
		margin: 15px auto 50px;
	}
	/*產品*/
	.step_box_first{margin: 0 auto 10px;}
	.step_box_other {width: calc(100% / 2 - 20px);float: none;margin: 0 9px 30px;}
	.step_box_other::after{bottom: 130px;}
	/*產品底層*/
	.solu_bk{margin: 0 0 50px}
	.list_img .float_r,.list_img .float_l {float: none;width: 100%;}
	.list_img .float_c {width: 100%;}
	.list_img .float_r {margin-top: 30px;border-top: 4px solid #c7c7c7;border-bottom: none;padding: 25px 0 0;}
	.list_img .float_r::after{
	border-top: 10px solid #c7c7c7;
	border-bottom: none;
	bottom: auto;
	top: 0;
	}
	.list_img img {width: 100%;}
	.img_table {width: 100%;float: none;padding: 0;margin-bottom: 40px;}
	.img_table figure{margin-bottom: 0;}
	.img_table .img_txtt p{margin-top: 15px;}
	.solu_bk p {margin-top: 15px;margin-bottom: 10px;}
	.img_table_bk+.img_table_bk {margin-top: 0;}
	.solu_bk {margin-bottom: 30px;}
	.img_table_single {width: 100%;padding: 0;}
	.img_txtt p {margin-top: 15px;text-align: center;}
	.list_img {margin-top: 0;}
	.list_img .float_l {margin-top: 0;}
	.list_img .float_r::after {display: none;}
	.list_img .float_r {border-top: none;margin-top: 15px;padding: 0;}
	.img_table_lot figure {float: none;width: 100%;}
	.img_table_lot figure+div {width: 100%;float: none;margin-top: 15px;}
	.img_table_lot {margin: 0px 0 20px;}
	/*最新消息底層*/
	.img_left img,.img_right img {float: none;margin: 0 auto;}
}
@media (max-width: 480px){
	/*產品*/
	.step_box_other::after {bottom: 90px;}
	
	/*最新消息*/
	.news_list{width: 100%;}
	.news_title h1{font-size: 18px}
	.news_date{font-size: 13px}
	/*聯絡我們*/
	.contact_bk{padding-bottom: 0;}
	.contact_txt{margin-bottom: 0;}
	.con_block_l,.con_block_r{width: 100%;float: none;}
	.code_l {width: 140px;}
	.contact_b_img{display: none;}
	.con_form, .con_info{padding: 15px;}
}
@media (max-width: 375px){
	/*產品*/
	.step_box_other::after {bottom: 75px;}
	.solu_list div{width: calc(100% - 20px);margin: 0 10px 10px;}
}