@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);/*思源黑體*/
/* font style */
body {
	font-family: 'Noto Sans TC', sans-serif;
}
textarea {
	resize: none; /* Disables resizability */
}
/*文字自動省略*/
.font_vertical {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-height: 24px;
	height: 72px;
}
a {
	text-decoration: none;
}
.form-control:focus {
	border-color: #3190ba;
	box-shadow: 0 0 0 0 transparent;
}
.form-select:focus {
	border-color: #3190ba;
	box-shadow: 0 0 0 0 transparent;
}
.btn-check:focus + .btn, .btn:focus {
	outline: 0;
	box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25);
}
.page-link:focus {
	color: #3190ba;
	box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25);
}
.btn_style {
	width: 100%;
	color: #fff;
	background-color: #013c7c;
	border-color: #fff;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 0;
	border: 0;
}
.btn_style:hover {
	color: #fff;
	background-color: #f29600;
	border-color: #FFCE00;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
}
.b_btn_style {
	color: #fff;
	background-color: #00ac85;
	border-color: #fff;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 0;
}
.b_btn_style:hover {
	color: #fff;
	background-color: #008063;
	border-color: #008063;
	-webkit-box-shadow: none;
	box-shadow: none;
}
/*header*/
.header_bg {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 888;
	background-color: #fff;
}
/*about*/
.a_bg {
	background-image: url(../images/a_bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 75vh;
	position: relative;
	z-index: 0;
}
.a_pic {
	position: absolute;
	width: 100%;
	z-index: 1;
	left: 0;
	bottom: 0;
	text-align: center;
	pointer-events: none;
}
.a_pic img {
	width: 100%;
	max-width: 800px;
}
.a_text_box {
	z-index: 5;
	position: relative;
	text-shadow: 2px 3px 10px #3e3e3e;
	padding-top: 10%;
	padding-left: 5%;
}
.a_slogan {
	font-size: 28px;
}
.a_title {
	font-size: 22px;
}
.a_text {
	font-size: 16px;
	line-height: 25px;
}
/*說明*/
.f_bg {
	background-image: url(../images/mf_bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
.f_text {
	text-shadow: 2px 3px 10px #000;
}
.f_box {
	text-shadow: 2px 5px 5px #000;
	width: 250px;
	padding: 0px 0;
	margin: auto;
}
.f_box img {
	width: 15%;
	position: absolute;
	top: 2px;
	left: 20%;
	text-align: center;
}
.f_box h3 {
	font-size: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid #fff;
	text-align: center;
	position: relative;
}
/*item*/
.item_bg {
	background-image: url(../images/item_bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
.item_text {
	text-shadow: 0px 0px 10px #000066;
}
/*翻轉*/
.container1 {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	max-width: 210px;
	margin: auto;
}
.front, .back {
	background-size: cover;
	background-position: center;
 -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	text-align: center;
	min-height: 280px;
	height: auto;
	border-radius: 10px;
	font-size: 1.5rem;
}
.front {
	background-color: #f4f7f9;
	color: #393a8f;
}
.back {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#231c6c+0,4f6b8c+99 */
	background: #231c6c; /* Old browsers */
	background: -moz-linear-gradient(top, #231c6c 0%, #4f6b8c 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #231c6c 0%, #4f6b8c 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #231c6c 0%, #4f6b8c 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231c6c', endColorstr='#4f6b8c', GradientType=0 ); /* IE6-9 */
	color: #fff;
}
.front:after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	opacity: .6;
	background-color: #f4f7f9;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 10px;
}
.container1:hover .front, .container1:hover .back {
 -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
 transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.inner {
	-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
	transform: translateY(-50%) translateZ(60px) scale(0.94);
	top: 50%;
	position: absolute;
	left: 0;
	width: 100%;
	padding: 2rem;
	font-size: .7em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: 1px solid transparent;
	-webkit-perspective: inherit;
	perspective: inherit;
	z-index: 2;
}
.inner img {
	filter: invert(85%) sepia(50%) saturate(2523%) hue-rotate(225deg) brightness(116%) contrast(90%);
	max-width: 120px;
	text-align: center;
	margin: 10px auto;
}
.container1 .back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.container1 .front {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.container1:hover .back {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.container1:hover .front {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
/*service*/
.ser_bg {
	background-image: url(../images/ser_bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
.ser_box_bg {
	background-image: url(../images/box_bg.png);
	background-position: top left;
	background-size: 100%;
	background-repeat: no-repeat;
}
/*contact*/
.c_bg {
	background-image: url(../images/c_bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
.nav-pills .nav-link {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#31cbaf+0,3066b0+100 */
	background: #31cbaf; /* Old browsers */
	background: -moz-linear-gradient(left, #31cbaf 0%, #3066b0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #31cbaf 0%, #3066b0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #31cbaf 0%, #3066b0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31cbaf', endColorstr='#3066b0', GradientType=1 ); /* IE6-9 */
	border-radius: 0px;
}
.nav-pills:hover .nav-link:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#088e76+0,0c3374+100 */
	background: #088e76; /* Old browsers */
	background: -moz-linear-gradient(left, #088e76 0%, #0c3374 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #088e76 0%, #0c3374 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #088e76 0%, #0c3374 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#088e76', endColorstr='#0c3374', GradientType=1 ); /* IE6-9 */
	color: #fff;
}
.nav-link {
	color: #fff;
	padding: 10px;
	width: 100%;
	-webkit-box-shadow: 0px 2px 3px hsla(0, 0%, 17%, 0.79);
	box-shadow: 0px 2px 3px hsla(0, 0%, 17%, 0.79);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: #fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#088e76+0,0c3374+100 */
	background: #088e76; /* Old browsers */
	background: -moz-linear-gradient(left, #088e76 0%, #0c3374 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #088e76 0%, #0c3374 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #088e76 0%, #0c3374 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#088e76', endColorstr='#0c3374', GradientType=1 ); /* IE6-9 */
}
.nav-item {
	width: 33.3%;
	padding: 10px;
	font-size: 13px;
}
.tab-content>.active {
	display: block;
	height: 165px;
}
.tab_title {
	color: #00ffc6;
	font-size: 20px;
	padding: 10px 0;
	border-bottom: 1px solid #00ffc6;
}
.tab_btn {
	color: #fff;
	background-color: #10a585;
	padding: 5px 15px;
	border-radius: 0px;
	border: 0;
}
.tab_btn:hover {
	color: #fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#088e76+0,0c3374+100 */
	background: #088e76; /* Old browsers */
	background: -moz-linear-gradient(left, #088e76 0%, #0c3374 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #088e76 0%, #0c3374 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #088e76 0%, #0c3374 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#088e76', endColorstr='#0c3374', GradientType=1 ); /* IE6-9 */
	border: 0;
}
.tab_text {
	font-size: 16px;
	line-height: 25px;
}
.m_tab_box {
	background-image: url(../images/mbox_bg.png);
	background-position: top center;
	background-size: 100%;
	background-repeat: no-repeat;
	height: 620px;
	position: relative;
}
.m_tab_box::after {
 background-image: url(../images/mfbox_bg.png);
 background-position: top left;
 background-size: 100%;
 background-repeat: no-repeat;
 height: 3px;
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
}
.robit_img {
	position: absolute;
	left: 0%;
	bottom: -6%;
	width: 50%;
	z-index: 99;
	max-width: 180px;
}
.bg_1 {
	position: relative;
	background-image: url(../images/mf_bg1.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	height: 225px;
}
.bg_2 {
	position: relative;
	background-image: url(../images/mf_bg2.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	height: 226px;
}
.bg_3 {
	position: relative;
	background-image: url(../images/mf_bg3.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	height: 226px;
}
.bg_4 {
	position: relative;
	background-image: url(../images/mf_bg4.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	height: 226px;
}
.f_box1_position{
	margin-top:-10%;
}
.f_box2_position{
	margin-top:-5%;
}
.f_box4_position{
	margin-top:10%;
}

 @media (min-width: 360px) {
.m_tab_box {
 height: 580px;
}
.robit_img {
 max-width: 140px;
}
/*翻轉*/
.container1 {;
 max-width: 250px;
}
.bg_1 {
 height: 254px;
}
.bg_2 {
 height: 254px;
}
.bg_3 {
 height: 254px;
}
.bg_4 {
 height: 254px;
}
.f_box1_position{
	margin-top:-5%;
}
}
 @media (min-width: 375px) {
.bg_1 {
 height: 264px;
}
.bg_2 {
 height: 264px;
}
.bg_3 {
 height: 264px;
}
.bg_4 {
 height: 264px;
}
}
@media (min-width: 390px) {
 .robit_img {
 max-width: 170px;
}
 .bg_1 {
 height: 275px;
}
.bg_2 {
 height: 275px;
}
.bg_3 {
 height:275px;
}
.bg_4 {
 height:275px;
}
.f_box2_position{
	margin-top:-2%;
}
}
@media (min-width: 414px) {
.m_tab_box {
 height: 480px;
}
.bg_1 {
 height: 292px;
}
.bg_2 {
 height: 292px;
}
.bg_3 {
 height: 292px;
}
.bg_4 {
 height: 292px;
}
}
@media (min-width: 428px) {
 .bg_1 {
 height: 302px;
}
.bg_2 {
 height: 302px;
}
.bg_3 {
 height: 302px;
}
.bg_4 {
 height: 302px;
}
}
 @media (min-width: 480px) {
.a_pic img {
 width: 80%;
}
.m_tab_box {
 height: 420px;
 max-width: 415px;
 margin: auto;
}
.robit_img {
 bottom: -10%;
 left: 10%;
}
.f_box {
 width: 350px;
 padding: 40px 0;
}
.f_box img {
 width: 10%;
 left: 30%;
}
.bg_1 {
 height: 339px;
}
.bg_2 {
 height: 339px;
}
.bg_3 {
 height: 339px;
}
.bg_4 {
 height: 339px;
}
}
@media (min-width:533px) {
.bg_1 {
 height: 376px;
}
.bg_2 {
 height: 376px;
}
.bg_3 {
 height: 376px;
}
.bg_4 {
 height: 376px;
}
}
@media (min-width:600px) {
.a_pic img {
 width: 70%;
}
}
 @media (min-width: 768px) {
.a_bg {
 height: 75vh;
}
.a_text_box {
 width: 80%;
 padding-top: 3%;
}
.robit_img {
 max-width: 260px;
}
.robit_img {
 bottom: 15%;
 left: -5%;
}
.tab_title {
 font-size: 24px;
}
}
 @media (min-width: 800px) {
.tab-content>.active {
 height: 190px;
}
.f_box {
 width: 300px;
}
.robit_img {
 left: 0%;
}
}
 @media (min-width: 960px) {
.f_box {
 width: 350px;
}
}
 @media (min-width: 992px) {
.a_bg {
 height: 90vh;
}
.tab-content>.active {
 height: 205px;
}
.a_slogan {
 font-size: 40px;
}
.a_title {
 font-size: 30px;
}
.a_text {
 font-size: 20px;
 line-height: 38px;
}
/*說明*/
.f_bg {
 background-image: url(../images/f_bg.jpg);
 background-position: center center;
 background-size: 100%;
 background-repeat: no-repeat;
 width: 100%;
 height: 770px;
}
.f_box1_position {
 position: absolute;
 top: 20%;
 left: 5%;
}
.f_box2_position {
 position: absolute;
 top: 30%;
 right: 10%;
}
.f_box3_position {
 position: absolute;
 bottom: 10%;
 left: 15%;
}
.f_box4_position {
 position: absolute;
 bottom: 0%;
 right: 5%;
}
.robit_img {
 max-width: 335px;
}
.robit_img {
 left: -5%;
}
.tab_title {
 font-size: 30px;
 margin-bottom: 20px;
}
.tab_text {
 font-size: 18px;
 line-height: 28px;
}
}
 @media (min-width: 1200px) {
.a_bg {
 height: 100vh;
}
.nav-item {
 font-size: 15px;
}
.tab-content>.active {
 height: 240px;
}
/*說明*/
.f_bg {
 height: 850px;
}
.f_box2_position {
 right: 15%;
}
.f_box3_position {
 left: 20%;
}
.f_box4_position {
 right: 7%;
}
}
 @media (min-width: 1400px) {
.f_bg {
 height: 1000px;
}
.f_box h3 {
 font-size: 45px;
}
.f_box p {
 font-size: 22px;
 line-height: 40px;
}
.f_box img {
 width: 15%;
 left: 20%;
}
.a_pic img {
 max-width: 1000px;
}
}
 @media (min-width: 1600px) {
.f_bg {
 height: 1200px;
}
}
 @media (min-width: 1920px) {
.f_bg {
 height: 1400px;
}
.f_box2_position {
 top: 30%;
}
.f_box4_position {
 right: 10%;
 bottom: 5%;
}
}