body {font-family:"微軟正黑體", Arial, Helvetica, sans-serif;}
main {padding-top:104px;}
h2 {color:#fe7800; font-size:2.25em; font-weight:bold; text-align:center; padding:0 0 4rem 0; margin-top:-.5em;}
section {padding:7em 0;}
.btn-warning:hover,
.btn-warning:active {background-color:#ffac0c !important; border-color:#ffac0c;}
@media (min-width: 1200px){.container {/*max-width: 1140px;*/max-width: 1200px;}}
header .nav-item a {color:#fff;}
header .nav-item a:hover {color:#ffc107;}
header .nav-item a:focus,
header .nav-item a:active {border-color:#ffc107; box-shadow:none;}
header .nav-item a.btn-warning {color: inherit;}
header h1{margin-top:7px;}
p span {display:block;}
.p1 p,
.p3 p,
.p4 p {font-size:1.75rem; font-weight:bold;}
.p2 p {font-size:1.5rem; font-weight:bold;}
.p1 {background:url(../images/bg01.png); background-size:cover;}
.p1 ul {padding:0; margin:0;}
.p1 ul li {
	margin:3px 3px;
	width: calc(100%/6);
	/*padding: .375rem;*/
	list-style:none;
}
.p1 ul li .btn {
	/*border-radius:50px;
	height:90px;
	width:90px;*/
	/*line-height:100px;*/
	line-height:130%;
	height:60px;
	padding:0 11px;
	font-weight:bold;
	display:flex;
	align-items:center;
	justify-content: center;
	border-radius:0 15px;
	font-weight:800;
	cursor: default !important;
}
.p1 ul li .btn-warning{
	color:#be4100;
	border-color:#ffaf72;
	background: #fff0e4;
background: -moz-linear-gradient(-45deg,  #fff0e4 0%, #ffdcc1 100%);
background: -webkit-linear-gradient(-45deg,  #fff0e4 0%,#ffdcc1 100%);
background: linear-gradient(135deg,  #fff0e4 0%,#ffdcc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff0e4', endColorstr='#ffdcc1',GradientType=1 );
}
/*.p1 ul li .btn-warning:hover{
	color:#fff;
	background:#cf4700 !important;
	border-color:#cf4700;
}*/
.p1 ul li:hover .btn {
	/*border-color:#ff9000;
	border-width:3px;*/
	/*-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;*/
}
.p1 .sysimg IMG { display:none;
	width:100%;
	height:100%;
	border:#343a40 2px solid;
	margin-top:8px;
}
.p1 .sysimg02 {
	background:url(../images/img_sys01.png) no-repeat 0 0;
	width:570px;
	height:384px;
	border:#343a40 2px solid;
	box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
	margin-top:8px;
}
.p2 {background-color:rgba(251,190,36,0.2);}
.p2 .card {
	width: calc((100% - 80px)/3);
	border:0;
}
.p2 .card-body {
	position:relative;
	padding-top:80px;
	padding-bottom:2em;
	text-align:center;
}
.p2 .card-body .icon {
	position:absolute;
	top:-50px;
	left: calc((100% - 100px)/2);
	font-size:3rem;
	text-shadow:0.05em 0.05em 0.1em rgba(255,100,16,1);
	font-weight:bold;
	color:#fff;
	text-align:center;
    padding:0;
    margin-bottom: 0;
	line-height:100px;
	width:100px;
	height:100px;
	border-radius:100px;
	background: #ffc107;
	background: -moz-linear-gradient(-45deg,  #ffc107 0%, #fe7800 100%);
	background: -webkit-linear-gradient(-45deg,  #ffc107 0%,#fe7800 100%);
	background: linear-gradient(135deg,  #ffc107 0%,#fe7800 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#fe7800',GradientType=1 );
}

.p2 .card-body:hover .icon {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.p3 {background:url(../images/bg03.png); background-size:cover; padding-bottom:13rem;}
.p3 p {margin:1rem 0;}
.p4 {
	background: #fdedc7;
	background: -moz-linear-gradient(top,  #fdedc7 20%, #ffdddd 100%);
	background: -webkit-linear-gradient(top,  #fdedc7 20%,#ffdddd 100%);
	background: linear-gradient(to bottom,  #fdedc7 20%,#ffdddd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdedc7', endColorstr='#ffdddd',GradientType=0 );
}
.p4 .btn {padding:1rem 2rem;}


@media (max-width: 1320px) {
.p2 p {text-align:left;}
.p2 p span {display: inline;}
}
@media (max-width: 1200px) {
.p1 ul li {width: calc(100%/10);}
.p1 ul li .btn {padding:0;}
.p1 .sysimg IMG {margin-top:2em;}
.p1 .col-lg-6 {
	flex: 0 0 100%;
    max-width: 100%;}
.p1 .sysimg IMG {display:block;}
.p1 .sysimg02 {display:none;}
}
@media (max-width: 990px) {
section {padding:5em 0;}
h2 {padding-bottom:2rem;}
.p1 {margin-top:2em;}
.p1 ul li {width: calc(100%/7);}
.p2 .row {display:block; margin-top:0 !important;}
.p2 .card {width:95%; margin:1rem auto;}
.p2 .card-body {padding:2rem 1rem 2rem 6rem;}
.p2 .card-body .icon {
	position:absolute;
	top:25%;
	left: 10px;
	line-height:70px;
	width:70px;
	height:70px;
	font-size:2.5rem;
}
.p2 p span {font-size:1.125rem;}
.p3 {padding-bottom:5rem;}
}
@media (max-width: 768px) {
.p1 .sysimg {margin-top:2em;}
.p1 ul li {width: calc(100%/5.5);}
}


/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}